/* graph visualisation stuff */
#graphcont { width: 562px; position: relative; height: auto; overflow: hidden; color: #669; float:left; }
#graph { border: 1px solid #e0e0e0; width: 562px; height: 459px; font-size: 11px; position: relative; margin-bottom: 10px; overflow: hidden; background-color: #FFF; }
#graph h3{font-size: 13px;}
#graph h2{font-size: 15px;}
#graph h1{font-size: 16px;}

/* left hand */

#leftcont { width: 100px; height: 459px; position: relative; float: left; border: 0px solid #F00; }
#leftspace { width: 170px; height: 459px; position: relative; left: 0px; float: left; border: 0px solid #F00; background-image: url(../images/ruler/vhandleft.png); background-size:contain;}

#lefttitle { width: 100px; font-size: 14px; position: relative; left: 4%; bottom: 10px; float: left;}
#lefttxt { width: 100px; left: 4%; float: left; font-size: 12px; position: relative; }
#leftimg { display:none; position: absolute; right: 2px; bottom: 0px; }

#leftmorphbut { float:left; }
/* left hand */

/* right hand */
#rightcont { width: 100px; height: 459px; position: relative; float: left;  margin-left: 20px; border: 0px solid #F00;}
#rightspace { width: 170px; height: 459px; position: relative; left: 0px; float: left; border: 0px solid #F00; background-image: url(../images/ruler/vhandright.png); background-size:contain;}

#righttitle { width: 100px; font-size: 14px; position: relative; right: 4%; bottom: 10px; float:right;  text-align: right; }
#righttxt { width: 100px; font-size: 12px; position: relative; right: 4%;  text-align: right; float:right; }
#rightimg { display:none; position: absolute; left: 2px; bottom: 0px; }


#rightmorphbut {float:right; margin-right: 0px;}
#righttimer { width: 32px; left: 34px; top: 32px; position: absolute; }
/* right hand */

.greentxt { color: #393; } /* flaccid title */

/* canvas css */
.cockeye { width: 64px; height:64px; }
.imgcanvas {display:none;}
.canvas {
	position: absolute;
	height: 459px;
	width: 100px;
	left: 0px;
	top: 0px;
	background-image: url(../images/elements/shade.png);
	background-position: bottom;
	background-size:contain;
}
.canvasmatrix {
	background-image: url(../images/parts/pubicbone.png);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size:contain;
}
.canvasmatrixXXL {
	background-image: url(../images/parts/pubicbone-noval.png);
	background-size:contain;
}

#left { position: absolute; left: 0px; bottom: 0px } /* canvas  */
#right { position: absolute; left: 0px; bottom: 0px; } /* canvas  */
/* canvas css */

</style><style type="text/css">

.icon {
	position: relative;
	height: 30px;
	width: 40px;
	float:left;
}
/* visualiser page stuff */
#mainContent { padding: 0px 2% 0px 2%; overflow: hidden; }
#title { padding: 0px 2% 0px 2%; }
#selectdiv select{ max-width: 270px; width:96%; }

.inner p{font-size: 15px;}
.goto { cursor:pointer; text-align: right; overflow: hidden; height: auto;  }
.goto img { float:left; margin: 2px; display: block; }
#measurecont { font-size: 11px; position: fixed; height: auto; width: 840px; z-index: 2; left: -850px; top: 135px; background-image: url(../images/assets/backlight.jpg); }
#framecontainer {position: absolute;
	height: 680px;
	width: 760px;
	left: 0px;
	top: 50px;
	background-color: #FFF;
	display:none;}
#lineupframe {
	position: absolute;
	height: inherit;
	width: inherit;
	left: 0px;
	top: 0px;
}	
/* visualiser page stuff */


#controls { position: relative; float:left; margin-right: 20px; width: 200px; }
#adcont { position: relative; width: 240px; float: right; height: auto; overflow: hidden; margin-bottom: 20px;}
#adcont img {float: right; margin-left: 10px;}

#descriptiondiv { font-size: 14px; line-height: normal; color: #669; position: relative; text-align: left; width: 100%; }
#footer { background-color: #3853a5; }

@media screen and (min-width: 150px) and (max-width: 600px) {	
	#controls { display:block; }
	#adcont { display:none; }
	#customcock { display:none; }
	#visualisertab { display:none; }
	#itemstab { display:none; }
}
@media screen and (min-width: 501px) and (max-width: 800px) {
	#controls { display:block; }
	#adcont { display:none; }
}
@media screen and (min-width: 150px) and (max-width: 1024px) {
	
}