* {margin: 0; padding: 0}
html { 
  height: 100%;
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100% }
body { 
  height: 100%;
  margin: 0;
  background-color:#222222; }

#viewercontainer {
  width: 99vw;
  height: 92vh;
  color:#111;
  position: relative;
  top:60px;
  }

#viewerwrapper {
  width: 65vw;
  height: 90vh;
  position:relative;
  display:inline-block;
  }
#viewertool{
  width: 20vw;
  height: 90vh;
  float:left;
  display:inline-block; 
  vertical-align: top;
}
#imagecontainer{
  width: 12vh;
  left:3vh;
  height:87vh;
  position:relative;
  display:inline-block;
  vertical-align: top;

}
#openseadragon {
  width:100%;
  height:73vh;
  }
.sidenavwrapperleft{
  width:2%;
  height:75%;
  position:absolute;
  z-index:10;
  }
.sidenavwrapperright{
  width:2%;
  height:75%;
  position:absolute;
  right:0;
  z-index:10;
  }
  }
.sidenav {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: background-color 0.5s; /* Safari 3.1 to 6.0 */
  transition: background-color 0.5s;
  }
.sidenavwrapperleft:hover .sidenav,
.sidenavwrapperright:hover .sidenav{
  background-color: rgba(44, 44, 44, 0.1);
  }
.sidenavimg {
  max-width:100%;
  position:absolute;
  top:50%;
  opacity:0.3;
  -webkit-transition: opacity 0.5s; /* Safari 3.1 to 6.0 */
  transition: opacity 0.5s;
  }
.sidenavwrapperleft:hover .sidenavimg,
.sidenavwrapperright:hover .sidenavimg{
  opacity: 1;
  }
#navigationcontrol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }

ul li{
  
  cursor: pointer;
  margin-left:20px;
  color: white;
  }


/*#thumblabel{
  height:3vh;
  width:100%;
  position:relative;
  top:2vh;
  z-index: 999;
}*/
#rostral{
  display: inline-block;
  width: 49%;
  margin-left:1%;
  font-size: 1.4vh;
  color: #888;
  text-align: left;
  }
#caudal{
  display: inline-block;
  width: 48.5%;
  margin-right:1%;
  font-size: 1.4vh;
  color: #888;
  text-align: right;
}

#uparrow{
  width:100%;
  top:5px;}
#downarrow{
  width:100%;
  position:relative;
  bottom:5px;
  z-index:998;
}
#uparrow > img {
  width: 27px;
  margin-left: auto;
  margin-right: auto;
  display:block;
  opacity:0.7;
  z-index: 999;
}
#downarrow > img {
  width: 27px;
  display:block;
  margin-left: auto;
  margin-right: auto;
  opacity:0.7;
  z-index: 999;
  }

#hleftarrow > img {
  width: 0.8vw;
  opacity:0.7;
}
#hrightarrow > img {
  width: 0.8vw;
  opacity:0.7;
  z-index: 999;
  }

.vertslider{
  height:87vh;
  background-color: black;
}

.hozslider{
  top:2vh;
  height:12vh;
  position:relative;
  background-color: black;
  text-align: center;
}

.hcontent-slider{
  display: inline-block;
  left:0;
  width:95%;
}
.slidernav{
  display:inline-block;
  height:12vh;
  left:0;
  z-index: 0.99;
  vertical-align: middle;
  line-height: normal;
}

.slidernavleft{
  display:inline-block;
  height:12vh;
  left:0;
  z-index: 0.99;
  vertical-align: middle;
  line-height: normal;
}
.slidernavright{
  display:inline-block;
  height:12vh;
  right:0;
  z-index: 0.99;
  vertical-align: middle;
  line-height: normal;
}

.thumbn{
  text-align: center;
  opacity:0.6;

}
.thumbn img{
  height:8.6vh;
  margin-top:2vh;
}

.hthumbn{
  height:12vh;
  opacity:0.6;
  position: relative;
  width: 6.6vw;
}

.hthumbn img{
  height:80%;
  width:auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  margin: auto;
}
.text_age{
  color: gray;
  z-index: 999;
  position:relative;
}

.imgtext{
  color: gray;
}


#disprois{
  align-content: right;
  color:#888;
  font-size: 1.4vh;
  text-align: center;
  margin-top: 1vh;
}
#bottomcontrols{
    width:90%;
  margin:auto;
}
#bottomcontrols:after{
  content: "";
  display: table;
  clear: both;
}

#legend {
  float: left;
  width: 50%;
  padding: 15px;
  top:0px;
  color:#888;
  font-size: 1.4vh;
  
  }
#repcells{
  float: left;
  width: 50%;
  text-align: center;
  }

#replicate{
  color:#888;
  padding:15px;
    font-size: 1.4vh;
  }

#dispcells{
  color:#888;
  font-size: 1.4vh;
  text-align: center;
  padding:15px;
}



#waves{
  width:80%;
  display:block;
  margin:auto;
  color:#888;
  font-size: 1.4vh;
  border-radius: 5px;
  margin-top:2vh;
  margin-bottom:2vh;
}


#circleFT{
  width:1.3vh;
  height: 1.3vh;
  border-radius: 50%;
  position:relative;
  line-height: 500px;
  display:inline-block;
  background-image:linear-gradient(#009900,#00ff00);
  margin-right: 10px;
  margin-left: 10px;
}
#circleBrdU{
  width:1.3vh;
  height: 1.3vh;
  position:relative;
  border-radius: 50%;
  text-align: center;
  background-image:linear-gradient(#990000, #FF0000);
  display:inline-block;
  margin-right: 10px;
  margin-left: 10px;

}
#circleEdU{
  width:1.3vh;
  height:1.3vh;
  border-radius: 50%;
  position:relative;
  line-height: 500px;
  display:inline-block;
  background-image:linear-gradient(#990000,#FF0000);
  margin-right: 10px;
  margin-left: 10px;

}
.waveline{
  opacity: 0;
  stroke:blue;
}
#circleWhite{
  width:1.3vh;
  height:1.3vh;
  border-radius: 50%;
  position:relative;
  line-height: 500px;
  text-align: center;
  background-image:linear-gradient(#7a7a7a, white);
  margin-right: 10px;
  display:inline-block;
   margin-left: 10px;
 }
#circlevGluT2{
  width:1.3vh;
  height:1.3vh;
  border-radius: 50%;
  line-height: 500px;
  text-align: center;
  position:relative;
  background-image:linear-gradient(#5e5e5e, #c2c2c2);
  margin-right: 10px;
    display:inline-block;
    margin-left: 10px;

}

#timeline{
  position:relative; 
  width:90%;
  margin:auto;
  height:auto;

}

.thick:hover{
  opacity:0.7 !important;
  stroke:grey !important;
  stroke-width: 5 !important;
  cursor:pointer;
}

.BrdU{
  opacity:0;
}
.svgFT{
  opacity:0;
}
.svgline{
  opacity:0.5;
}
#brains{
  max-width:50%;
  height:auto;
  position:relative;
  margin: auto;
  margin-right: auto;
  display: block;
  top:2%;
  
}
#brains img{
  max-width: 100%;
}
.levelbar{
  opacity:0.7;
  cursor:pointer;
}
.levelbar:hover{
  opacity:1 !important;
  cursor:pointer;
}


#treeview{
  width:40%;
  color:blue;
}

.seadragon-viewer {
  display: inline-block;
  width: 45%;
  background-color: black;
  height: 600px;
}



.tooltip span {
    display:block;
}

#region_id{
position:absolute;
width:100px;
height:30px;
padding: 2px;
text-align: center;
top:50px;
left:20px;
background-color: #222;
color:white;
z-index: 999;
-webkit-border-radius: 3px;
border: 2px solid #888;
font-weight: bold;
}

#region_name{
position:absolute;
padding: 2px;
top:80px;
left:20px;
color:grey;
z-index: 999;
}

.roiselector{
  margin-left:10%;
  width: 80%;
  display:table;
}
#clear{
  width:50%;
  position:relative;
  background-color: #333;
  padding:1px;
  color:#888;
  -webkit-border-radius: 3px;
  border:1px solid #888;
  float:right;
  display:inline-block;
  font-size: 1.4vh;
}

#clear:hover{
  /*border:2px solid #888;*/
  background-color: #444;
}


#clear:active{
  border:2px solid #888;
  background-color: #222;
}


.selectize-input items{
  overflow-y: auto;
  max-height: 20px;
}

#download{
	width:90%;
	margin-top:1vh;
	background-color: #333;
  padding:1px;
	color:#888;
	-webkit-border-radius: 3px;
	border:1px solid #888;
	margin-left: 5%
}


#download:hover{
	/*border:2px solid #888;*/
	background-color: #444;
}


#download:active{
	border:2px solid #888;
	background-color: #222;
}


#contactus fieldset
{
   width:30%;
   padding:20px;
   border:1px solid #ccc;
   margin:auto;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;  
   margin-top:100px; 
   color:#888;
}
#contactus legend, h2
{
   font-family : sans-serif;
   font-size: 1.3em;
   color:#888;
}

#contactus label
{
   font-family :sans-serif;
   font-size:0.8em;
}

#contactus input[type="text"],textarea
{
  color : #999; 
  padding : 5px; 
  font-family :sans-serif;
  border : 1px solid #999;
  width:90%;
  background-color: #333;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    font-size:0.8em;

}

#contactus textarea:focus, input:focus{
    outline: ridge 1px #666;
}

#contactus .spmhidip
{
   display:none;
   width:10px;
   height:3px;
}
#fg_crdiv
{
   font-family : sans-serif;
   font-size: 0.3em;
   opacity: .2;
   -moz-opacity: .2;
   filter: alpha(opacity=20);   
}
#fg_crdiv p
{
    display:none;
}


#contactus .short_explanation
{
   font-family :  sans-serif;
   font-size: 0.7em;
   color:#888;
   margin-bottom:10px;   
}

#contactus .container{ 
  padding:3px;
}

#contactus .butons{ 
  margin-top:10px;
  padding:3px;
}

#contactus .error
{
   font-family:  sans-serif; 
   font-size: 0.8em;
   color: red;
 }
#development{
  width:70%;
  margin:auto;
  color:#af0000;
  text-align: center;
  padding:10px;
  border:solid 1px #af0000;
  font-size: 1.4em;
  border-radius: 25px;

}
#development a{
color:#af0000;
text-decoration: underline;
}
/*.form-group{
  width:30%;
  position: relative;
  top:100px;
  margin:auto;
  padding-top:2%;
  padding-bottom:2%;
  color: #888;
 
  background-color: #333;
  border:solid 1px #888;
  border-radius:10px;
}
.form-control{
  width:80%;
  margin:auto;
  background-color: #222;
  padding:2px;
  padding-left:10px;
  left:20px;
  margin-bottom:20px;
  border:solid 1px #888;
}
.form-control:focus{
}
.form-group label{
  padding-left:10%;
  margin:auto;
  font-family: sans-serif;
}

.form-group button{
  margin-left:10%;
}*/