@charset "UTF-8";
/* CSS Document */

body{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 0px;
	margin: 0px;
	background-color: rgba(217,235,255,1.00);
	}

a:link, a:visited{
	color: rgba(70,114,177,1.00);
	text-decoration: none;
	}
a:hover{
	text-decoration: underline;
	}	
h1{
	font-weight: 400;
	font-size: 3em;	
	padding: 0px;
	margin: 10px 0px 10px 0px;
	font-weight: regular;
	color: rgba(70,114,177,1.00);
	}
h2{
	font-weight: normal;
	font-size: 1.5em;	
	}

#wrapper{
	padding: 0px;
	margin: 0px;
	text-align: center;
	min-width: 604px;
	}
#subwrapper {
	margin: 0px;
	padding-left: 0px;
	}
#dissection-box-wrapper{
	position:relative;
	margin: 15px 0px 10px 0px;
	padding: 0px;
	display: inline-block;
	}	
#info-box-wrapper{
	vertical-align: top;
	height: 500px;
	min-width: 320px;
	width: 30%;
	padding: 0px;
	margin: 20px 0px 0px -5px;
	text-align: left;
	display:inline-block;
	}
	
	
/* buttons ------------------------ */
#imageMode ul{
	text-align: center;
	padding: 0px 0px 10px 0px;
	margin: 0px;
	display: inline-block;
	}
#imageMode li{
	padding: 0px 30px 0px 0px;
	vertical-align: top;
	text-align: center;
	list-style-type: none;
	display: inline-block;
	float: left;
	}
#imageMode li img{
	width: 65px;
	height: 65px;
	}	
#imageMode li div.background{
	background-color: #99CCFF;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	text-align: center;
	display: block;
	margin: auto;
	transition: all .2s ease-in-out;
	}	
#imageMode li p{
	padding: 5px 0px 0px 0px;
	margin: 0px;
	}	

/* background active states */	
#imageMode li.active div.background{
	background-color: #ffffff;
	transition: all .2s ease-in-out;
	}	
	
#sideMode ul{
	display: none;
	}	
#sideMode ul.active{
	display: block;
	}	
#sideMode li.inactive {
	 pointer-events: none;
	 opacity: .5;
	 }		
		
#imageMode li, #sexMode li, #sideMode li, #scaleMode li{	
	display: inline;
	list-style-type: none;
	color: rgba(70,114,177,1.00);
	}	
#sexMode li.title, #sideMode li.title, #scaleMode li.title {
	font-weight: bold;
	pointer-events: none;
	}
#imageMode li.option:hover, #sexMode li.option:hover, #sideMode li.option:hover, #scaleMode li.option:hover{
	cursor: pointer; 
	color: rgba(0,48,142,1.00);
	text-decoration: underline;
	}
#sexMode ul, #sideMode ul, #scaleMode ul{
	padding: 5px 0px 0px 0px;
	margin: 0px;
	font-size: 1em;
	}	
	
#sexMode li.inactive{
	 pointer-events: none;
	 opacity: .5;
	 }	
	
#imageMode li.active, #sexMode li.active, #sideMode li.active, #scaleMode li.active, #toolBox li.active,
#imageMode li.active:hover{
	color: rgba(201,100,0,1.00);
	transition: all .2s ease-out;
	pointer-events: none;
	}
#imageMode li.active:hover, #sexMode li.active:hover, #sideMode li.active:hover, #scaleMode li.active:hover, #toolBox li.active:hover{
	color: rgba(201,100,0,1.00);
	text-decoration: none;
	pointer-events: none;
	}		


/* toolbox ------------------------ */
#toolBox{
	text-align: center;
	background-color:rgba(255,255,255,1.00);
	padding-bottom: 20px;
	padding-top: 20px;
	}
#toolBox ul{
	text-align: center;
	padding: 0px;
	margin: 0px;
	display: flex;
	padding-left: 15%;
	padding-right: 15%;
	}
#toolBox li{
	padding: 0px 3px 0px 3px;
	vertical-align: top;
	text-align: center;
	list-style-type: none;
	width: 100px;
	display: inline-block;
	margin: auto;
	}
#toolBox li div.background{
	background-color: #99CCFF;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	text-align: center;
	display: block;
	margin: auto;
	transition: all .2s ease-in-out;
	}	
#toolBox li img{
	width: 50px;
	height: auto;
	}	
#toolBox li p{
	padding-top: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	}
/* toolbox active states */	
#toolBox li.active div.background{
	background-color: #FF9E35;
	transition: all .2s ease-in-out;
	}
#toolBox li.option:hover{
	cursor: pointer; 
	color: rgba(0,48,142,1.00);
	text-decoration: underline;
	}
	
	
/* image & dissection box ------------------------ */
#dissection-box{
	position: relative;
	width: 600px;
	height: 600px;
	background-color: rgba(255,255,255,1.00);
	overflow: hidden;
	vertical-align: top;
	padding: 0px;
	border: 2px solid #7fb3e6;
	}
#dissection-box img.viewer-image, #dissection-box img{
	position: absolute;
	top: 0px;
	width: 600px;
	height: 600px;
	visibility: hidden;
	}
#dissection-box img.active{
	left: 0px;
	visibility: visible;
	}	
#dissection-box-message {
	position: absolute;
	top: 250px;
	color: rgba(81,141,207,1.00);
	font-size: 1.5em;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	display: none;
	font-weight:normal;
	}	
#dissection-box-message.active{
	display: block;
	}	
/* for smoother transition */	
#image-box.active{
	cursor: grab;
	}
#credits{
	text-align: right;
	font-size: .9em;
	font-weight: normal;
	padding: 0px;
	margin: 0px;
	}
#credits p{
	padding: 0px;
	margin: 0px 5px 0px 0px;
	}
#credits p{
	color: #7fb3e6;
	}	
#credits p:hover{
	color: rgba(70,114,177,1.00);
	cursor: pointer;
	text-decoration:underline;
	}	
		
/* ------------------------ */
#scaleMode, #sideMode, #imageMode, #sexMode{
	margin: 0px 0px 0px 20px;
	padding: 0px;
	}	
#info-box{
	border-top: 2px solid #7fb3e6;
	margin: 30px 0px 0px 0px;
	text-align: left;
	padding: 30px 0px 0px 20px;
	}	
#info-box h2{
	font-size: 1.25em;
	margin-top: 0px;
	}
#info-box p{
	font-size: .95em;
	}
	
/* ------------------------ INFO HOTSPOTS */
#info-hotspots{
	position: absolute;
	width: 600px;
	height: 600px;
	left: 0px;
	top: 0px;
	}
#info-hotspots path{
	fill: #ff9600;
	fill-opacity: 0;
	stroke: #ff9600;
	stroke-opacity: 0;
	transition: all .2s ease-in-out;
	}		
#info-hotspots path:hover{
	fill-opacity: .3;
	stroke-opacity: 0;
	cursor: pointer;
	}
#info-hotspots .active, #info-hotspots .active:hover{
	fill-opacity: .5;
	stroke-opacity: 0;
	}	
	
	
/* ------------------------ ZOOM HOTSPOTS */
#zoom-hotspots{
	position: absolute;
	width: 600px;
	height: 600px;
	left: 0px;
	top: 0px;
	}
#zoom-hotspots path{
	fill: #ff0062;
	fill-opacity: 0;
	stroke: #ff0062;
	stroke-width: 3px;
	stroke-dasharray: 10, 10;
	stroke-linecap: butt;
	stroke-opacity: 0;
	transition: all .2s ease-in-out;
	}		
#zoom-hotspots path:hover, #zoom-hotspots .active, #zoom-hotspots .active:hover{
	fill-opacity: .3;
	cursor: pointer;
	stroke-opacity: 1;
	}
	
	
/* ------------------------ SCALPEL HOTSPOTS */	
#scalpel-hotspots{
	position: absolute;
	width: 600px;
	height: 600px;
	left: 0px;
	top: 0px;
	}
#scalpel-hotspots path{
	fill: #3ff866;
	fill-opacity: 0;
	stroke: #3ff866;
	stroke-width: 3px;
	stroke-dasharray: 10, 10;
	stroke-linecap: butt;
	stroke-opacity: 0;
	transition: all .2s ease-in-out;
	}		
#scalpel-hotspots path:hover, #scalpel-hotspots .active, #scalpel-hotspots .active:hover{
	fill-opacity: .3;
	cursor: pointer;
	stroke-opacity: 1;
	}
	
	
/* ------------------------ */	
#svg-box {
	display: none;
	position: absolute;
	}
#svg-box.active{
	display: block;
	}


/* ------------------------ */
.disable{
	opacity: .35;
	pointer-events: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}	
	
	
/* ------------------------ */
#feedback-box{
	padding: 0px 0px 10px 0px;
	margin: 0px;
	}
#feedback-box p{
	background-color: rgba(81,141,207,1.00);
	color: rgba(255,255,255,1.00);
	padding: 15px 0px 15px 0px;
	margin: 0px 0px 0px 0px;
	}
.noshow{
	display: none;
	}		
	
/* testing ------------------------ */

img[src='Error.src']{
    display: none;
}