* {
 margin:0;
}

html, body {
 height:970px;
}

body {
 background-color:#c3ebff;
}

header {
 z-index:1;
 top:0;
 width:1000px;
 height:68px;
 background-color:#FFFFFF;
 box-shadow:0px 7px 5px -5px #CCCCCC;
}
    .hdr {
     float:left;
     display:block;
    }
    #title {
     width:600px;
    }
    #extra {
     display:block;
     float:left;
     font-size:75%;
     font-family:Arial,sans-serif;
     font-weight:bold;
     margin-top:-7px;
     margin-left:9px;
    }
        #extra a:link {text-decoration:none;color:#999999;}
        #extra a:visited {text-decoration:none;color:#999999;}
        #extra a:hover {color:#ffad40;}

nav {
 position:absolute;
 z-index:103;
 margin-left:auto;
 margin-right:auto;
 left:0;
 right:0;
 top:75px;
 width:1000px;
 height:15px;
 background-color:#ffffff;
    }
    nav ul {
     font-family: Arial, sans-serif;
     font-size:115%;
     margin:0;
     padding: 0;
     list-style:none;
     margin-left:5px;
    }
    nav ul li {
     display:block;
     position:relative;
     float:left;
     background-color:#ffffff;
     margin-right:30px;
     margin-top:5px;
    }
    nav a {
     display:block;
     text-decoration:none;
     padding: 2px 15px 0px 15px;
     color:#104070;
     white-space: nowrap;
     height:25px;
     font-weight:bold;
     font-size:80%;
    }
    nav ul ul {
     z-index:103;
     left:-9999px;
     width:220px;
     background-color:#ffffff;
     list-style:none;
     display:block;
     clear:both;
     position:absolute;
     border-top:2px solid #ffad40;
     border-bottom:2px solid #ffad40;
     box-shadow:-1px 2px 2px #666666;
    }
    nav ul ul li {
     height:20px;
     border-bottom:1px dashed #ebebeb;
     font-size:80%;
    }
        nav ul li:hover ul {left:0;}
        nav ul li ul:hover ul {left:0;}

    nav a:visited {color:#104070;}
    nav a:hover {color:#EC7A08;}

#wrapper {
 background-color:#FFFFFF;
 width:1000px;
 height:650px;
 margin-left:auto;
 margin-right:auto;
 margin-top:0;
 left:0;
 right:0;
 min-height:100%;
}

#info {
 position:relative;
 clear:both;
 margin-left:0;
 width:1000px;
 height:110px;
 top:40px;
 background-color:#333333;
}

    #info img {
     display:block;
     float:left;
     width:160px;
     margin-left:80px;
     margin-top:-20px;
    }

    #expp {
     display:block;
     float:left;
     margin-top:10px;
     margin-left:25px;
     width:660px;
     font-family:"Dosis",sans-serif;
     color:#ffffff;
     font-size:1.3em;
     text-align:left;
     /* Weird work-around for mobile browsers (*COUGH* Android *COUGH*)
        that like to blow up the font for no reason */
     max-height:3000em;
     -webkit-text-size-adjust: none;
    }

.product {
 position:relative;
 top:70px;
 display:inline-block;
 float:left;
 width:300px;
 height:400px;
 clear:both;
 margin-left:130px;
 padding:10px;
 font-size:150%;
 font-weight:100;
 font-family:'Dosis',sans-serif;
 text-align:center;
 border-radius:5px;
 color:#ffffff;
 background-color:#335c85;
 box-shadow:1px 1px 1px #333333;
 overflow:hidden;
}
    .product img {
        max-width:100%;
    }
    .phline {
     width:280px;
     height:1px;
     background-color:#ffffff;
     margin-left:10px;
     margin-top:5px;
    }
    .plink {
     width:200px;
     height:34px;
     margin-left:50px;
     margin-top:10px;
     background-color:#ffffff;
     border-radius:5px;
     color:#335c85;
     font-size:110%;
     font-weight:bold;
     box-shadow:1px 1px 1px #333333;
     display:block;
     clear:both;
     text-decoration:none;
    }

/* Auxillary pages like 'about' and 'datums' */
.article {
 font-family:Arial;
 width:90%;
 margin-left:5%;
}
.nextto {
 display:inline-block;
 float:left;
}

#diagram {
 width:800px;
}

#sep {
 padding-top:130px;
 height:100px;
 width:100%;
 clear:both;
}

footer {
 position:absolute;
 margin-top:-50px;
 font-size:70%;
 color:#999999;
 font-family:sans-serif;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 left:0;
 right:0;
 width:1000px;
}
    #lpanel {
     display:inline-block;
     float:left;
     width:33%;
    }
        #lpanel .a {
         z-index:2;
        }

    #mpanel {
     display:inline-block;
     float:left;
     width:40%;
    }
    #rpanel {
     display:inline-block;
     float:left;
     width:26%;
    }
    footer a:link{text-decoration:none;}
    footer a:visited{text-decoration:none;}
/* Div containing the tabs */
#oldnew {
 font-family:'Roboto',sans-serif;
 font-weight:bold;
 font-color:blue;
## margin-left:380px;
 margin-top:5px;
}
ul.list li {
    display: inline;
}
#tabbox{
 position:relative;
 width:1000px;
 height:630px;
 margin-left:0px;
 margin-top:0px;
 font-family:'Roboto',sans-serif;
 background-color:#e6e6e6;
}
//optgroup { font-size:100%; }
/* Tabs and the maps they contain */
#tabs {
 margin-bottom:-70px;
 width:992px;
 float:left;
 clear:both;
}
#tab1, #tab2, #tab3 {
 height:630px;
 width:992px;
}
#map1, #map2, #map3 {
 position:absolute;
 height:100%;
 width:94%;
 margin:0;
 padding:0;
}
.legend {
 position:absolute;
 z-index:3;
 margin-left:35%;
 margin-top:-84%;
}
.surgelegend {
 position:absolute;
 z-index:3;
 margin-left:10%;
 margin-top:-84%;
}


/* More options pulldown */
#extras {
 position:absolute;
 z-index:1;
 top:5px;
 margin-left:550px;
 width:435px;
 height:30px;
 color:#0b61a4;
 text-align:left;
}
#staticIm {
 visibility:hidden;
}
#archive {
 visibility:hidden;
}
#bkmk {
/* visibility:hidden;*/
 visibility:visible;
}
#select2 {
 visibility:hidden;
}
#select3 {
 visibility:hidden;
}
#tabs1 {
 visibility:hidden;
}
#emptyPlot {
 visibility:hidden;
}

#extras ul {
 font-family: "Roboto", sans-serif;
 font-size:20%;
 font-weight:bold;
 margin:0;
 padding: 0;
 list-style:none;
 margin-left:5px;
}
#extras ul li {
 display:block;
 position:relative;
 float:left;
 text-align:right;
 background-color:#ffffff;
 margin-right:70px;
 margin-top:5px;
}
#extras a {
 text-decoration:none;
 white-space: nowrap;
 height:25px;
}
#extras ul ul {
 z-index:3;
 left:-9999px;
 width:220px;
 background-color:#ffffff;
 list-style:none;
 display:block;
 clear:both;
 position:absolute;
 border-top:2px solid #ffad40;
 border-bottom:2px solid #ffad40;
 box-shadow:-1px 2px 2px #666666;
 font-size:80%;
}
#extras ul li ul li {
 height:25px;
 width:215px;
 border-bottom:1px dashed #ebebeb;
 font-size:100%;
 cursor:pointer;
 padding-left:5px;
 text-align:left;
}
    #extras ul li:hover ul {left:-5px;}
    #extras ul li ul:hover ul {left:-5px}
    #extras ul li ul li:hover {color:#ffad40;}


.button1:hover {
    background-color: #e6e6e6;
    border: 1px solid #808080;
}
.button1 {
    border-radius: 8px;
    background-color: #f0f0f0;
    border: none;
    box-shadow: 0 9px #999;
}
.button1:active {
  background-color: #e6e6e6;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#b1:hover {
    border: 2px solid #4CAF50;
}
#b2:hover {
    border: 2px solid red;
    background-color: #DCDCDC;
}
#b1:active {
  background-color: #DCDCDC;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
#b2:active {
  background-color: #DCDCDC;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


#extras a:visited { text-decoration:none;color:#0b61a4; }
#extras a:hover { color:#ffad40; }

    .st {
     display:block;
     float:left;
     font-size:130%;
     padding:5px;
     margin-left:10px;
     margin-top:20px;
     height:30px;
     background-color:#666666;
     font-family:"Dosis",sans-serif;
     color:#ffffff;
     z-index:8;
     cursor:pointer;
    }
#holder1 {
 overflow:scroll;
 height:280px;
 width:150px;
 margin-left:25px;
 margin-top:20px;
 background-color:#ffffff;
}
#holder {
 overflow:scroll;
 height:280px;
 width:350px;
 margin-left:25px;
 margin-top:20px;
 background-color:#ffffff;
}

.dispSt {
 overflow:hidden;
 width:100px;
 height:20px;
 display:inline-block;
 float:left;
 font-family:"Dosis",sans-serif;
 font-size:100%;
 text-decoration:none;
 color:#0b61a4;
}

/* Plot styling */
#head {
 position:absolute;
 width:1000px;
 height:45px;
 margin-left:0px;
 margin-top:0px;
 padding-top:3px;
 color:#333333;
 font-family:'Arial Narrow',sans-serif;
 background-color:#ffffff;
 box-shadow:1px 1px 1px #cccccc;
}

#plot {
 position:absolute;
 width:968px;
 height:370px;
 margin-left:-15px;
 margin-top:45px;
 background-color:#ffffff;
 overflow:hidden;
 border-radius:5px;
 border:1px solid #cccccc;
 visibility:hidden;
}
#plot .axis path,
  .axis line {
   fill:none;
   stroke:#cccccc;
  }
  .axis text {
   font-family:sans-serif;
   font-size:12px;
  }
  .dattxt {
   width:50px;
   height:20px;
   color:white;
   background-color:#d699d6;
   border-radius:5px;
   filter: drop-shadow(2px 2px 2px #666666);
  }
  rect.pane {
   cursor:url('../images/pan.png'),auto;
//   cursor:zoom-in;
   fill:none;
   pointer-events:all;
  }

.plot_tt {
 position:absolute;
 text-align:center;
 width:100px;
 height:80px;
 padding:2px;
 font:12px 'Roboto',sans-serif;
 background-color:#fffbf0;
 overflow:hidden;
}
#secTitle {
 position:absolute;
 display:inline-block;
 float:left;
 width:800px;
 height:10px;
 top:1px;
 font-size:90%;
 font-weight:bold;
 font-family:"Roboto",sans-serif;
 margin-left:95px;
 text-align:center;
}
.minmax {
 position:absolute;
 display:inline-block;
 float:right;
 width:20px;
 top:1px;
 right:0;
 font-size:120%;
 cursor:pointer;
}

#data {
 position:absolute;
 margin-left:50px;
 margin-top:335px;
}
.data {
 width:110px;
 height:23px;
 display:inline-block;
 color:white;
 text-align:center;
 margin-right:5px;
 cursor:pointer;
 border-radius:5px;
 font-size:100%;
 box-shadow:2px 2px 2px #666666;
}
.data:hover{box-shadow:4px 4px 4px #666666;}

#gline1 {
 position:absolute;
 margin-left:0;
 margin-top:305px;
}
#gline2 {
 margin-left:60px;
 margin-top:-22px;
}

#fadnld {
position:absolute;
margin-top:310px;
margin-left:780px;
}


#dwnld{
 position:absolute;
 margin-left:800px;
 margin-top:310px;
}
.dwnld {
 display:inline-block;
 float:left;
 width:40px;
 height:20px;
 margin-left:10px;
 border-radius:5px;
 box-shadow:1px 1px 1px #666666;
 background-color:#ffad40;
 text-align:center;
 color:#ffffff;
 font-family:'Roboto',sans-serif;
 font-size:100%;
 cursor:pointer;
}
.dwnld:hover {color:#000000;box-shadow:2px 2px 2px #666666;}