html{background-color:white}

body {
    font-family: Gadugi, Corbel, Tahoma, Verdana, Helvetica, Arial, sans-serif;
    
    /*Note: these are called Cascading Style Sheets, because things cascade or flow from high to low in the HTML elements. That means that since Body is the highest level HTML element, any style we apply to this will apply to every other element on the web page. Thus, we only have to write the style once, in body, if we want, for example, every element to have the same font-family. We can specifically target different elements, classes, and IDs later on with specific variations on the style listed in the body. These will override the body values, because these elements are more specific.*/

    #background-color: #dbdbdb; #gray

    /*Let's give some padding to the body, meaning the elements found within it won't bump right up to the edge of the body. Let's also give this a width and set the margins to auto so it floats in the middle of the browswer window! */
    
    padding: 10px; 
    
    /*Puts 10px between the edge of the body and all elements inside of it*/
    

    
    margin-right: auto; margin-left: auto; 
    
    /*Writing these two margin rules will center an element within the DIV or element it is nested within. The body is nested within the Browser Window element, so it will center.*/

}

.width960{

    width: 960px;
    margin-right: auto; margin-left: auto; 
    padding-left:60px;
    padding-right:60px;
}


.width960b{
    position:fixed;
    z-index:10;
    margin-left:auto;
    margin-right:auto;
    width: 960;
    left: 50%; transform: translate(-50%, 0);
    top:-90px;
}

.width960b_2{
    position:fixed;
    z-index:10;
    margin-left:auto;
    margin-right:auto;
    width: 960;
    left: 50%; transform: translate(-50%, 0);
    top:-90px;
}

.fadedBackground{
    position:fixed;
    z-index:4;
    left:auto;
    right:auto;
width: 100%;position: fixed;left: 50%;margin: 0 0 0 -50%;
    top:-75px;
    background-color:black;
    opacity:0.4;
    height:340px;
}
.width1080{

    width: 1080px;
    margin-right: auto; margin-left: auto; 
    padding-left:60px;
    padding-right:60px;
}
.fadedBackground2{
    position:fixed;
    z-index:9;
    left:auto;
    right:auto;
width: 100%;position: fixed;left: 50%;margin: 0 0 0 -50%;
    top:-75px;
    background-color:rgba(0,0,0,0.8);
    height:340px;
}
.fadedBackgroundWhite{
    position:fixed;
    z-index:1;
    left:auto;
    right:auto;
width: 100%;position: fixed;left: 50%;margin: 0 0 0 -50%;
    top:-75px;
    background-color:rgba(255,255,255,0);
    height:340px;
}
.portpic1{

}

.portpic2{

}

.portpic3{

}

.portpic4{

}

.widthForMobile{

    width:1100px;
    border-bottom: 1px;
    border-color:white;

}


.quotex{
    
    background-color:#FFF7FA;
    text-align:center;
    width:auto;
    float:center;
    width: 100%;
    min-width:1080px;
    border-bottom: 2px solid #641E00;
    border-top: 2px solid #641E00;
    padding-bottom:  2px;
    padding-top:  2px;
}

.banner2{
    
    background-color:#F8F8F8;
    text-align:center;
    width:auto;
    float:center;
    width: 100%;
    min-width:1080px;
    border-bottom: 2px solid #202020;
    border-top: 2px solid #202020;
    padding-bottom:  2px;
    padding-top:  2px;
}

.spacer1{
    height:50px;
}

.spacer50L{
    height:50px;
    border-bottom: 1px solid #202020;
}
.spacer200L{
    height:200px;
    border-top: 1px solid rgba(0,0,100,.5);

}

.spacer50{
    height:50px;
}
.spacer75{
    height:75px;
}
.spacer100{
    height:100px;
}
.spacer200{
    height:200px;
}
.spacer300{
    height:300px;
}
.spacer400{
    height:400px;
}
.spacer500{
    height:100px;
}


.spacer2{
    height:1px;
}


.spacerEnd{
    height:500px;
}

.spacer3{
    height:15px;
}


.img1{
    position:relative;
    left:0px;
    right:0px;
    float:right;
    border: 30px solid white
}

.img2{
    position:relative;
    left:0px;
    right:px;
    float:left;
    border: 30px solid white
}


.text{
    font-size:24px;
    border: 10px solid white;
}

.text2{
    clear:both
    font-size:16px
    text-align:right
    bottom-border: 0px solid white !important
}


.subt{ margin-top:50px;
    font-size: 24px
}

.subt_h4{ margin-top:0px;
    font-size: 18px
}

.subt_h2{ margin-top:0px;
    font-size: 26px;
    text-align: center;
}

h1 {
    color: #3A0700;
font-family: "poiret one", gadugi, corbel;
    font-size:130px;
    height:60px;
    margin-left: 0px;
    margin-right: 24px;
    text-align:center;
}

.h1_2{
    color: white;
font-family: "poiret one", gadugi, corbel;
    font-size:130px;
    height:60px;
    margin-left: 0px;
    margin-right: 24px;
    text-align:center;
}

.h1_replace{
    color: white;
font-family: "poiret one", gadugi, corbel;
    font-size:130px;
    height:0px;
    margin-left: 0px;
    margin-right: 24px;
    text-align:center;
}
    
    /*This is a hexidecimal RGB value. Double-click over the value to see what color it is. You can read more about hexidecimal colors in the textbook chapter on color. Visit http://www.w3schools.com/tags/ref_colorpicker.asp to find a useful interface for finding millions of colors and copying and pasting the hexidecimal values right into your codes*/
/*You can comment things out in CSS, i.e., not have the browser read them, by writing slash-asterix and then ending with */ 
    
}

p {
    font-size: 16px;
    color: #333333;
    cursor: text; 
    
    /*This changes the cursor. If you move the cursor over a P element on this page, it will turn into the Text Selection tool.*/
}


a {
    text-decoration: none; 
    /*If you don't like underlined URL links, set text-decoration to none. We should change the color of the text slightly, though, so people know it is a link!*/
    color: #6600CC;
    
}
.div2 {
    background-color: white;
    /*Notice that the body has a gray background but any DIVs on top of it have white backgrounds. Let's tweak this so the DIVS have rounded corners...*/
    padding: 8px;
    border-bottom: 1px solid #641E00;
    width:100%;

}

.div2b {
    background-color: transparent;
    /*Notice that the body has a gray background but any DIVs on top of it have white backgrounds. Let's tweak this so the DIVS have rounded corners...*/
    padding: 8px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    z-index:10;


}



.div3 {
    text-align: right
}





.navind{

    display: inline-block;/*This puts all of the bullets on a single line*/
    padding:8px; /*Sets all sides to 5px padding*/
    padding-bottom: 5px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    padding-top: 5px;
    background-color: white;
    color: #641E00;
    font-family: "poiret one" ; font-size:35px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    border: 3px solid #641E00; 
        margin-left:15px;

}

.bnavind{

    display: inline-block;/*This puts all of the bullets on a single line*/
    padding:8px; /*Sets all sides to 5px padding*/
    padding-bottom: 4px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    padding-top: 4px;
    margin-left: 6px;
    margin-right: 6px;
    background-color: white;
    color: #641E00;
    font-family: "poiret one" ; font-size:26px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    border-top: 1px solid #641E00; 
    border-bottom: 1px solid #641E00; 
        margin-left:15px;

}

.cnavind{

    display: inline-block;/*This puts all of the bullets on a single line*/
    padding:8px; /*Sets all sides to 5px padding*/
    padding-bottom: 4px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    padding-top: 4px;
    background-color: white;
    color: #641E00;
    font-family: "poiret one" ; font-size:26px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    border-top: 1px solid #641E00; 
    border-bottom: 1px solid #641E00; 
        margin-left:15px;

}






#fadeMouseOver1,
#fadeMouseOver1b,
#fadeMouseOver2,
#fadeMouseOver2b,
#fadeMouseOver3,
#fadeMouseOver3b,
#fadeMouseOver4,
#fadeMouseOver4b
{
    display: inline-block;/*This puts all of the bullets on a single line*/
    
    
    
    padding:8px; /*Sets all sides to 5px padding*/
    
    padding-bottom: 5px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    
    padding-top: 5px;
    margin-left:15px;
    padding-right:10px;
    color: #641E00;
    background-color:rgba(255,0,0,.025);
    font-family: "poiret one" ; font-size:35px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    
    border-left: 5px solid #641E00; 
    /* makes a border that is 2px thick, solid (as opposed to dashed, etc.) and white*/
    
}


#bfadeMouseOver1,
#bfadeMouseOver1b,
#bfadeMouseOver2,
#bfadeMouseOver2b,
#bfadeMouseOver3,
#bfadeMouseOver3b,
#bfadeMouseOver4,
#bfadeMouseOver4b
{

    display: inline-block;/*This puts all of the bullets on a single line*/
    
    
    
    padding:8px; /*Sets all sides to 5px padding*/
    
    padding-bottom: 5px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/

    padding-top: 4px;
    margin-left:10px;
    color: #641E00;
    background-color:rgba(255,0,0,.025);
    font-family: "poiret one" ; font-size:35px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    
    border-left: 2px solid #641E00; 
    /* makes a border that is 2px thick, solid (as opposed to dashed, etc.) and white*/
    font-size:28px
}

#cfadeMouseOver1,
#cfadeMouseOver1b,
#cfadeMouseOver2,
#cfadeMouseOver2b,
#cfadeMouseOver3,
#cfadeMouseOver3b,
#cfadeMouseOver4,
#cfadeMouseOver4b
{

    display: inline-block;/*This puts all of the bullets on a single line*/
    padding:8px; /*Sets all sides to 5px padding*/
    padding-bottom: 4px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    padding-top: 4px;
    margin-left: 6px;
    margin-right: 6px;
    background-color: #FFF7FA;
    color: #641E00;
    font-family: "poiret one" ; font-size:26px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    border: 0px solid #641E00; 
}




.navind_2{

    display: inline-block;/*This puts all of the bullets on a single line*/
    padding:8px; /*Sets all sides to 5px padding*/
    padding-bottom: 5px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    padding-top: 5px;
    background-color: rgba(0,0,0,0.2);
    color: white;
    font-family: "poiret one" ; font-size:35px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    border: 3px solid white; 
}

.bnavind_2{

    display: inline-block;/*This puts all of the bullets on a single line*/
    padding:8px; /*Sets all sides to 5px padding*/
    padding-bottom: 4px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    padding-top: 4px;
    margin-left: 6px;
    margin-right: 6px;
    background-color: rgba(0,0,0,0.2);
    color: white;
    font-family: "poiret one" ; font-size:26px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    border-top: 4px solid white; 
    border-bottom: 4px solid white; 
}

.cnavind_2{

    display: inline-block;/*This puts all of the bullets on a single line*/
    padding:8px; /*Sets all sides to 5px padding*/
    padding-bottom: 4px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    padding-top: 4px;
    margin-left: 6px;
    margin-right: 6px;
    background-color: rgba(0,0,0,0.2);
    color: white;
    font-family: "poiret one" ; font-size:26px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    border-top: 4px solid white; 
    border-bottom: 4px solid white; 
        font-size:26px;

}









#fadeMouseOver1_2, 
#fadeMouseOver1b_2, 
#fadeMouseOver2_2, 
#fadeMouseOver2b_2, 
#fadeMouseOver3_2, 
#fadeMouseOver3b_2, 
#fadeMouseOver4_2, 
#fadeMouseOver4b_2
{
    display: inline-block;/*This puts all of the bullets on a single line*/
    
    
    
    padding:8px; /*Sets all sides to 5px padding*/
    
    padding-bottom: 5px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    
    padding-top: 5px;
    
    background-color: rgba(255,255,255,0.2);
    
    color: white;
    
    font-family: "poiret one" ; font-size:35px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    
    border-left: 3px solid white; 
    /* makes a border that is 2px thick, solid (as opposed to dashed, etc.) and white*/
    
}




#bfadeMouseOver1_2,
#bfadeMouseOver1b_2,
#bfadeMouseOver2_2,
#bfadeMouseOver2b_2,
#bfadeMouseOver3_2,
#bfadeMouseOver3b_2,
#bfadeMouseOver4_2,
#bfadeMouseOver4b_2
{

    display: inline-block;/*This puts all of the bullets on a single line*/
    padding:8px; /*Sets all sides to 5px padding*/
    padding-bottom: 4px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    padding-top: 4px;
    margin-left: 6px;
    margin-right: 6px;
    background-color: rgba(255,255,255,0.2);
    color: white;
    font-family: "poiret one" ; font-size:26px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    border-left: 3px solid white; 
}

#cfadeMouseOver1_2,
#cfadeMouseOver1b_2,
#cfadeMouseOver2_2,
#cfadeMouseOver2b_2,
#cfadeMouseOver3_2,
#cfadeMouseOver3b_2,
#cfadeMouseOver4_2,
#cfadeMouseOver4b_2
{

    display: inline-block;/*This puts all of the bullets on a single line*/
    padding:8px; /*Sets all sides to 5px padding*/
    padding-bottom: 4px; /*overrules step above and sets bottom padding to 2px, next step does the same to the top padding*/
    padding-top: 4px;
    margin-left: 6px;
    margin-right: 6px;
    background-color: rgba(255,255,255,0.2);
    color: white;
    font-family: "poiret one" ; font-size:26px;
        /*must be in quotes, because it is more than one word and as you may have noticed, nothing is more than one word in coding!*/, Helvetica, Arial, sans-serif;
    border-left: 3px solid white; 
    font-size:26px;
}








li.inline_block{
    display: inline-block;
}

li#goPg1{
    display: inline-block;
    height: 80px;
    width: 100px;
    background: none;

    cursor:pointer;

    color: #641E00;
    text-align: center;
    font: bold /*3.2em*/ 50px "Helvetica Neue", Arial
        

    /*background: linear-gradient(top, #34696f, #2f5f63);
    border-radius: 50px;*/
    /*box-shadow: 0 8px 0 #1b383b;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);*/
}

li#goPg2{
    display: inline-block;
    height: 80px;
    width: 100px;
    background: none;

    cursor:pointer;

    color: #641E00;
    text-align: center;
    font: bold /*3.2em*/ 50px "Helvetica Neue", Arial
        

    /*background: linear-gradient(top, #34696f, #2f5f63);
    border-radius: 50px;*/
    /*box-shadow: 0 8px 0 #1b383b;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);*/
}

li#goPg3{
    display: inline-block;
    height: 80px;
    width: 100px;
    background: none;

    cursor:default;

    color: #641E00;
    text-align: center;
    font: bold /*3.2em*/ 50px "Helvetica Neue", Arial
        

    /*background: linear-gradient(top, #34696f, #2f5f63);
    border-radius: 50px;*/
    /*box-shadow: 0 8px 0 #1b383b;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);*/
}

li#goPgNone{
    display: inline-block;
    height: 80px;
    width: 100px;
    background: none;

    cursor:default;

    color: #641E00;
    text-align: center;
    font: bold /*3.2em*/ 50px "Helvetica Neue", Arial
}

li#gallery1{
    display: inline-block;
}

li#gallery2{
    display: inline-block;
}

li#gallery3{
    display: inline-block;
}

li#gallery4{
    display: inline-block;
}

li#gallery5{
    display: inline-block;
}
li#gallery1b{
    display: inline-block;
}
li#gallery2b{
    display: inline-block;
}
li#gallery3b{
    display: inline-block;
}
li#gallery4b{
    display: inline-block;
}
li#gallery5b{
    display: inline-block;
}

li a { /*This will only apply to "li a"*/
    /*This targets not all URL links but only those in the nav bar. We want these to look just like the text in the nav bar, as people will be clicking on it regardless assuming these are links.*/
    
    text-decoration: none; /*This gets rid of the underline on a clicked link*/
    
    color: inherit; 
    /*Inherit means take the value of the element it is nested in, in this case take the value of the LI font color*/
    
}

.centerMe {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

.portPage1 {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

.portPage2 {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}





/*Leaflet Section*/


#map{
    height:100%;
    position:relative;
}
#smMap{
    height:500px;
    position:fixed;
    z-index:1;
    top:45px;
    left:0px;
    width:100%;
}
#MyMap{
    position:absolute; top:0; bottom:0; width:100%; height:100%;
}

.infoWindow{
    color:black;
    font-family: inherit
}
    
body #return{
    text-decoration: none;
    color:white !important;
    position:fixed;
    z-index:10;
    width:100%;
    background-color:rgba(0,0,0,.6);
}

#mapTitle{
    position:fixed;
    z-index:11;
    margin-left:auto;
    margin-right:auto;
    left: 50%; transform: translate(-50%, 0);
    text-align:center;
    top:13px;
    color:black
}
#mapTitle2{
    position:fixed;
    z-index:11;
    left: 4%;
    text-align:center;
    top:10px;
    color:rgba(0,0,0,0.7)
}
#mapTitle2_2{
    position:fixed;
    z-index:11;
    margin-left:auto;
    margin-right:auto;
    left: 4%;
    text-align:center;
    top:-10px;
    color:white;
}

#legend{
    position:fixed;
    z-index:3;
    width: 220px;
    right: 30px;
    bottom: 50px;
    color:white;
    background-color:rgba(0,0,0,0.2);
    font:inherit;
    font-size:20px;
    padding-left:10px;
}


#layerButton{
    cursor:pointer
}
#layerButton2{
    cursor:pointer
}
#layerButton3{
    cursor:pointer
}
.layerButtonLi{
    display: inline-block;
    cursor:pointer
}



#shrink1{}


#shrink1button {
    cursor:pointer;
    position:fixed;
    z-index:20;
    margin-left:auto;
    margin-right:auto;
    left: 50%; transform: translate(-50%, 0);
    text-align:center;
    top:-13px;
    color:white;
    background-color:rgba(0,0,0,0.2);
    height:41px;
    padding-left:4px;
    padding-right:4px
}
#shrink1button2 {
    cursor:pointer;
    position:fixed;
    z-index:20;
    margin-left:auto;
    margin-right:auto;
    left: 50%; transform: translate(-50%, 0);
    text-align:center;
    top:-13px;
    color:white;
    background-color:rgba(0,0,0,0.5);
    height:41px;
    padding-left:4px;
    padding-right:4px
}

#overflow {
    overflow:hidden;
}

#storyMapBody {
    overflow:hidden;
    background-color:#383838;
    height:100%;
}
#storyMapBodyFix{
    background-color:#383838;
    position:fixed;
    z-index:0;
    left:auto;
    right:auto;
    width: 100%;position: fixed;left: 50%;margin: 0 0 0 -50%;
    height:20px;
    top:-10px;
}

#smt1{
    position:fixed;
    z-index:1;
    top:10px;
    left:0px;
    width:1000px;
}
#smt2{
    position:fixed;
    z-index:1;
    top:290px;
    left:0px;
    width:1000px;
}
#smt3{
    position:fixed;
    z-index:1;
    top:500px;
    left:0px;
    width:1000px;
}
#sms1{
    position:fixed;
    z-index:1;
    top:113px;
    right:0px;
    width:400px;
}
#sms2{
    position:fixed;
    z-index:1;
    top:353px;
    right:0px;
    width:400px;
}
#sms3{
    position:fixed;
    z-index:1;
    top:580px;
    right:0px;
    width:400px;
}
#smCircle{
    position:fixed;
    z-index:2;
    top:505px;
    left:226px;
}
#smText1{
    position:fixed;
    z-index:1;
    top:700px;
    left:50px;
    font-size: 75px;
    color: white;
}
#smText2{
    position:fixed;
    z-index:10;
    top:850px;
    left:60px;
    font-size: 40px;
    cursor:pointer;
    text-decoration:none; color: white;
}
#smText2_2{
    position:fixed;
    z-index:10;
    bottom:0px;
    left:60px;
    font-size: 40px;
    cursor:pointer;
    text-decoration:none; color: white;
}
#smStart{
    position:fixed;
    z-index:10;
    left: 50%;
    top:300px;
    transform: translate(-50%, 0);
    font-size: 40px;
    cursor:pointer;
    text-decoration:none; color: white;
}

#smAlign3{
    position:fixed;
    z-index:10;
    left: 70%;
    top:60%;
    transform: translate(-50%, 0);
    font-size: 30px;
    cursor:pointer;
    text-decoration:none; color: rgba(255,255,255,0.6);
}
#smAirPhoto1964{
    position:fixed;
    z-index:1;
    top:-30px;
    right:0px;
    width:790px;

}
#smAirPhotoDigitize{
    position:fixed;
    z-index:2;
    top:-30px;
    right:0px;
    width:790px;

}




#smTextP2_1{
    position:fixed;
    z-index:3;
    top:80px;
    left:30px;
    font-size: 32px;
    color: white; 
    background-color:rgba(0,0,0,.2);
    padding-top:60px;
    padding-left:30;
    padding-right:30;
}
#smTextP2_1 p{
    margin-top:-30px;  
}

#smTextP2_2{
    position:fixed;
    z-index:3;
    top:320px;
    left:30px;
    font-size: 32px;
    color: white; 
    background-color:rgba(0,0,0,.2);
    padding-top:60px;
    padding-left:30;
    padding-right:30;
}
#smTextP2_2 p{
    margin-top:-30px;  
}
#smTextP2_3{
    position:fixed;
    z-index:3;
    top:560px;
    left:30px;
    font-size: 32px;
    color: white; 
    background-color:rgba(0,0,0,.2);
    padding-top:60px;
    padding-left:30;
    padding-right:30;
}
#smTextP2_3 p{
    margin-top:-30px;  
}
#smTextP2_4{
    position:fixed;
    z-index:3;
    top:800px;
    left:30px;
    font-size: 32px;
    color: white; 
    background-color:rgba(0,0,0,.2);
    padding-top:60px;
    padding-left:30;
    padding-right:30;
}
#smTextP2_4 p{
    margin-top:-30px;  
}

#cdbMap{
    position:fixed;
    z-index:2;
    top:70px;
    width:100%;
    height:100%;


}







#smTextP3_1{
    position:fixed;
    z-index:5;
    top:15%;
    left:50%;transform: translate(-50%, 0);
    font-size: 32px;
    color: white; 
    background-color:rgba(0,0,0,.5);
    padding-left:40px;
    padding-right:40px;
    border-radius:20px;
}
#smTextP3_1next{
    cursor:pointer;
    position:fixed;
    z-index:5;
    top:11%;
    left:50%;transform: translate(-50%, 0);
    font-size: 22px;
    color: white; 
    background-color:rgba(0,0,0,.5);
    padding-left:30px;
    padding-right:30px;
    border-radius:20px;
}
#smTextP3_2{
    position:fixed;
    z-index:5;
    top:40%;
    left:2%;
    font-size: 32px;
    color: white; 
    background-color:rgba(0,0,0,.5);
    padding-left:40px;
    padding-right:40px;
    border-radius:20px;
    height:330px;
}
#smTextP3_2 p{
    margin-bottom:-30px;  
}
#smTextP3_2next{
    cursor:pointer;
    position:fixed;
    z-index:5;
    top:11%;
    left:50%;transform: translate(-50%, 0);
    font-size: 22px;
    color: white; 
    background-color:rgba(0,0,0,.5);
    padding-left:30px;
    padding-right:30px;
    border-radius:20px;
}
#smTextP3_3{
    position:fixed;
    z-index:5;
    top:30%;
    left:63%;
    font-size: 32px;
    color: white; 
    background-color:rgba(0,0,0,.5);
    padding-left:40px;
    padding-right:40px;
    padding-bottom:60px;
    border-radius:20px;
    word-wrap: break-word;
}
#smTextP3_3 p{
    margin-bottom:-30px;  
}
#smTextP3_3next{
    cursor:pointer;
    position:fixed;
    z-index:5;
    top:11%;
    left:50%;transform: translate(-50%, 0);
    font-size: 22px;
    color: white; 
    background-color:rgba(0,0,0,.5);
    padding-left:30px;
    padding-right:30px;
    border-radius:20px;
}

/*
#smt1{
    position:fixed;
    z-index:1;
    top:1%px;
    left:0px;
    width:70%;
}
#smt2{
    position:fixed;
    z-index:1;
    top:30%;
    left:0px;
    width:70%;
}
#smt3{
    position:fixed;
    z-index:1;
    top:55%;
    left:0px;
    width:70%;
}
#sms1{
    position:fixed;
    z-index:1;
    top:11%;
    right:0px;
    width:300px;
}
#sms2{
    position:fixed;
    z-index:1;
    top:37%;
    right:0px;
    width:300px;
}
#sms3{
    position:fixed;
    z-index:1;
    top:63%;
    right:0px;
    width:300px;
}
#smCircle{
    position:fixed;
    z-index:2;
    top:55%;
    left:13%;
}
#smText1{
    position:fixed;
    z-index:1;
    top:700px;
    left:50px;
    font-size: 75px;
    color: white;
}
#smText2{
    position:fixed;
    z-index:1;
    top:750px;
    right:50px;
    font-size: 50px;
    color: white;
    cursor:pointer;
}
*/










/*CAMPUS MAP STUFF*/

#zoomTo_Full{
    cursor:pointer;
    position:fixed;
    z-index:3;
    width: 220px;
    right: 30px;
    bottom: 440px;
    color:white;
    background-color:rgba(0,0,0,0.5);
    font:inherit;
    font-size:20px;
    padding-left:50px;
}
#zoomTo_Main{
    cursor:pointer;
    position:fixed;
    z-index:3;
    width: 220px;
    right: 30px;
    bottom: 400px;
    color:white;
    background-color:rgba(0,0,0,0.5);
    font:inherit;
    font-size:20px;
    padding-left:50px;
}
#zoomTo_East{
    cursor:pointer;
    position:fixed;
    z-index:3;
    width: 220px;
    right: 30px;
    bottom: 360px;
    color:white;
    background-color:rgba(0,0,0,0.5);
    font:inherit;
    font-size:20px;
    padding-left:50px;
}








.pyIm{
    width=100%
}