html,body {
    font-family: 'Source Sans Pro', Arial, serif;
    font-weight: 300;
    font-size: 14pt;
    padding: 0px;
    margin: 0px;
    width: 100%;
}

h1 {
    font-family: 'Source Sans Pro', Arial, serif;
}

#container {
    position: relative;
    top: -30px;
    /*border: 1px solid red;*/
    /*background: blue;*/
    margin: 0px auto;
    width: 100%;
    /*width: 1200px;*/
    /*height: 100%;*/
}

#container-static {
    position: relative;
    top: -30px;
    /*border: 1px solid red;*/
    /*background: blue;*/
    margin: 0px auto;
    width: 100%;
    /*width: 1200px;*/
    height: 600px;
}

#container2 {
    position: relative;
    /*border: 1px solid red;*/
    /*background: blue;*/
    margin: 0px auto;
    width: 1px;
    height: 0px;
    /*width: 1200px;*/
    /*height: 100%;*/
}

#wheel {
    position: absolute;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: 400px;
    background-image: url('images/wheel.gif');
}

#map_petals {
    position: relative;
    /*border: 3px solid blue;*/
    margin:0px auto;
    width: 1080px;
    height: 1000px;
}

.p1 { background-image: url('images/p1.png'); }
.p2 { background-image: url('images/p2.png'); }
.p3 { background-image: url('images/p3.png'); }
.p4 { background-image: url('images/p4.png'); }
.p5 { background-image: url('images/p5.png'); }
.p6 { background-image: url('images/p6.png'); }
.p7 { background-image: url('images/p7.png'); }
.p8 { background-image: url('images/p8.png'); }
.p9 { background-image: url('images/p9.png'); }
.p10 { background-image: url('images/p10.png'); }
.p11 { background-image: url('images/p11.png'); }
.p12 { background-image: url('images/p12.png'); }
.p13 { background-image: url('images/p13.png'); }
.p14 { background-image: url('images/p14.png'); }
.p15 { background-image: url('images/p15.png'); }
.p16 { background-image: url('images/p16.png'); }
.p17 { background-image: url('images/p17.png'); }
.p18 { background-image: url('images/p18.png'); }
.p19 { background-image: url('images/p19.png'); }
.p20 { background-image: url('images/p20.png'); }
.p21 { background-image: url('images/p21.png'); }
.p22 { background-image: url('images/p22.png'); }
.p23 { background-image: url('images/p23.png'); }
.p24 { background-image: url('images/p23.png'); }
/*.p24 { background-image: url('images/p24.png'); }*/

#slider {
    position: absolute;
    width: 270px;
    margin: 4px 0px 8px 6px;
    top: 95%;
    left: 40%;
    opacity: 0.1;
    filter: alpha(opacity=0.1);
}

#dates {
    opacity: 0;
    filter: alpha(opacity=0);
}

#sliderCar {
    position: absolute;
    width: 97%;
    height: 5px;
    top:  720px;
    margin-left:20px;
    margin-right:20px;
}

#prog1 {
    position: absolute;
    width: 97%;
    height: 30px;
    top:  715px;
    margin-left:20px;
    margin-right:20px;
}

#prog2 {
    position: absolute;
    width: 97%;
    height: 40px;
    top:  740px;
    margin-left:0px;
    margin-right:20px;
}

.marker {
    position: absolute;
    border-left: 1px solid #000080;
    width: 0px;
    height: 17px;
    float: left;
}

.marker2 {
    position: absolute;
    width: 40px;
    height: 20px;
    float: left;
    font-family:"Handlee", sans-serif;
    font-size:8pt;
}

.m1 { left: 0%; }
.m2 { left: 18%; }
.m3 { left: 22%; }
.m4 { left: 25%; }
.m5 { left: 33%; }
.m6 { left: 40%; }
.m7 { left: 45%; }
.m8 { left: 48%; }
.m9 { left: 54%; }
.m10 { left: 63%; }
.m11 { left: 89%; }
.m12 { left: 95%; }
.m13 { left: 100%; }

#car {
    position: absolute;
    width: 157px;
    height: 64px;
    top: 107px;
    left:-2px;
    background-image:url('images/car.png');
    z-index: 600;
    opacity: 0;
    filter: alpha(opacity=0);
}

#map-background {
    position: absolute;
    top:40px;
    width: 1080px;
    height: 700px;
    /*top: 190px;*/
    /*left: 60px;*/
    /*border:1px solid black;*/
    background-image:url('images/map_background_1080_line_100col.png');
    /*background-size: 100% auto;*/
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0;
    filter: alpha(opacity=0);
}

.rp {
    position: absolute;
    /*border: 1px solid blue;*/
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
}

#sf0 { z-index: 1000; }
#sf1 { z-index: 990; }
#sf2 { z-index: 980; }
#sf3 { z-index: 970; }
#sf4 { z-index: 960; }
#sf5 { z-index: 950; }
#sf6 { z-index: 940; }
#sf7 { z-index: 930; }
#sf8 { z-index: 920; }
#sf9 { z-index: 910; }
#sf10 { z-index: 900; }
#sf11 { z-index: 890; }
#sf12 { z-index: 880; }

#sf0view { z-index: 991; }
#sf1view { z-index: 981; }
#sf2view { z-index: 971; }
#sf3view { z-index: 961; }
#sf4view { z-index: 951; }
#sf5view { z-index: 941; }
#sf6view { z-index: 931; }
#sf7view { z-index: 921; }
#sf8view { z-index: 911; }
#sf9view { z-index: 901; }
#sf10view { z-index: 891; }
#sf11view { z-index: 881; }
#sf12view { z-index: 871; }

.sunflower {
    position: absolute;
    /*border: 1px solid blue;*/
    background-repeat: no-repeat;
    /*background-size: 15% auto;*/
    width: 25px;
    height: 25px;
    background-image: url('images/s1.png');
}

#sf0header {
    background-image:url('images/cities/Portland-b.png');
    width: 196;
    height: 56;
}
#sf1header {
    background-image:url('images/cities/Sacramento-b.png');
    width: 205;
    height: 49;
}
#sf2header {
    background-image:url('images/cities/Sanfran-b.png');
    width: 250;
    height: 58;
}
#sf3header {
    background-image:url('images/cities/Monterey-b.png');
    width: 140;
    height: 69;
}
#sf4header {
    background-image:url('images/cities/LosAngeles-b.png');
    width: 128;
    height: 73;
}
#sf5header {
    background-image:url('images/cities/Vegas-b.png');
    width: 186;
    height: 51;
}
#sf6header {
    background-image:url('images/cities/Bryce-b.png');
    width: 177;
    height: 45;
}
#sf7header {
    background-image:url('images/cities/Zion-b.png');
    width: 219;
    height: 43;
}
#sf8header {
    background-image:url('images/cities/Arches-b.png');
    width: 236;
    height: 41;
}
#sf9header {
    background-image:url('images/cities/Denver-b.png');
    width: 144;
    height: 44;
}
#sf10header {
    background-image:url('images/cities/Stlouis-b.png');
    width: 99;
    height: 53;
}
#sf11header {
    background-image:url('images/cities/Champaign-b.png');
    width: 179;
    height: 59;
}
#sf12header {
    background-image:url('images/cities/Chicago-b.png');
    width: 148;
    height: 50;
}

.bheader1 {
    background-repeat: no-repeat;
    padding-bottom:5pt;
    border-bottom:1px solid black;
}

.rollover1 {
    position: absolute;
    top:0px;
    background-color:white;
    border-radius: 10px;
    padding-top:10pt;
    padding-bottom:10pt;
    padding-left:20pt;
    width: 260;
    /*height: 150;*/
    opacity: 0.7;
    filter: alpha(opacity=0.7);
    display:block;
    font-family:"Handlee", sans-serif;
    font-size:11pt;
}

#controls {
    position: absolute;
    /*border:1px solid red;*/
    top:0px;
    margin-top:705px;
    margin-left:10px;
    width: 250px;
    /*border: 1px solid green;*/
    opacity: 0;
    z-index: 10;
}

#controls span:hover {
    color: red;
    cursor: pointer;
}
#controls span {
    font-size:10pt;
    font-family: 'Roboto Condensed', sans-serif;
    color: #000080;
    /*color: #888;*/
    text-decoration:underline;
}

#storystory {
    /*font-family:"Handlee", sans-serif;*/
    font-family:"Handlee", sans-serif;
    position: absolute;
    top:0px;
    /*border: 1px solid blue;*/
    margin-left: 252px;
    margin-top: 162px;
    width: 522px;
    height: 450px;
    opacity: 0;
    font-size: 11pt;
    text-align:justify;
}

#registry {
    /*font-family:"Handlee", sans-serif;*/
    font-family:"Handlee", sans-serif;
    position: absolute;
    top:0px;
    /*border: 1px solid blue;*/
    margin-left: 330px;
    margin-top: 370px;
    width: 370px;
    height: 450px;
    opacity: 0;
    font-size: 13pt;
    text-align:justify;
}


#videoframe {
    position: absolute;
    top:0px;
    /*border: 1px solid blue;*/
    margin-left: 270px;
    margin-top: 75px;
    width: 500px;
    height: 281px;
    z-index: 1;
    opacity: 0;
    font-size: 11pt;
}

#vowsvows {
    font-family:"Handlee", sans-serif;
    position: absolute;
    top:0px;
    /*border: 1px solid blue;*/
    margin-left: 260px;
    margin-top: 600px;
    width: 560px;
    height: 450px;
    opacity: 0;
    font-size: 13pt;
    text-align:justify;
}

#propprop {
    font-family:"Handlee", sans-serif;
    position: absolute;
    top:0px;
    /*border: 1px solid blue;*/
    margin-left: 170px;
    margin-top: 600px;
    opacity: 0;
}

#photos {
    font-family:"Handlee", sans-serif;
    position: absolute;
    top:0px;
    /*border: 1px solid blue;*/
    margin-left: 170px;
    margin-top: 600px;
    opacity: 0;
}

#prewedding {
    font-family:"Handlee", sans-serif;
    position: absolute;
    top:0px;
    /*border: 1px solid blue;*/
    margin-left: 170px;
    margin-top: 600px;
    opacity: 0;
}

#blogblog {
    font-family:"Handlee", sans-serif;
    font-size: 24pt;
    position: absolute;
    top:0px;
    width: 560px;
    height: 100px;
    /*border: 1px solid blue;*/
    margin-left: 260px;
    margin-top: 600px;
    opacity: 0;
}

#credit {
    font-family:"Handlee", sans-serif;
    position: absolute;
    top:0px;
    /*border: 1px solid blue;*/
    margin-left: 375px;
    margin-top: 35px;
    width: 200px;
    font-size: 10pt;
    color: #AAAAAA;
    text-align:justify;
}

#about {
    /*border: 1px solid red;*/
}

#registry {
    /*border: 1px solid green;*/
}

.bubble {
    font-family:"Handlee", sans-serif;
    border-radius: 5px;
    width: 600px;
    text-align: justify;
    padding: 20px;
    /*position: absolute;*/
    /*float: left;*/
    margin-left: 60px;
    clear:both;
}

.sbub {
  border: 2px solid #FFFF00;
  /*background-color: #FFF7A9;*/
}

.jbub {
  border: 2px solid #02068D;
  /*background-color: #A9D8FF;*/
}

#outside {
    position: relative;
    width: 1280px;
    margin-left: -275px;
    /* margin: 0px auto; */
}

#photo-unit {
    margin-bottom: 20px;
}

.bubble .arrow {
    border-style: solid;
    position: absolute;
}
 
.jbub .bottom {
    border-color: transparent #02068D transparent transparent;
    border-width: 12px 12px 12px 12px;
    left: 36px;
}

.sbub .bottom {
    border-color: transparent #FFFF00 transparent transparent;
    border-width: 12px 12px 12px 12px;
    left: 36px;
}

.bubble .name {
    position: absolute;
    margin-left:-60px;
}

.prop_image {
    /*margin-left: 90px;*/
    width:750px;
}