/* -- LIQUID TYPES -- */
.water
{
	background-color:Aqua;
	opacity:0.30;
}

.lemonjuice
{
	background-color:yellow;
	opacity:0.30;
}


/* -- BEAKER -- */

/* default beaker positioning */
.beaker_left, .beaker_right
{
	width:150px; height:150px;
	position:absolute;
}
/* default beaker positioning for beakers 400 mL or greater facing left */
.beaker_left .beakerLarge
{
    width:72%; height: 74.25%; 
    left: 12%; bottom: 3.5%;
}

/* max fillable area for liquid inside a beaker */
.beaker_left .liquid_size, .beaker_right .liquid_size
{       
   width:78%; height: 58.25%; 
   bottom: 5.5%; 
   position:absolute;  
}
.beaker_left .liquid_size
{       
   left: 15%;  
}
.beaker_right .liquid_size
{
   right: 15%;  
}

/* default positioning and shape of liquid in beaker */
.beaker_liquid
{
	width:100%; height: 51%;
	bottom: 0;
	position:absolute;
    display:block;
	border-bottom-right-radius: 80% 10%;
	border-bottom-left-radius: 80% 10%;
}


/* droppable area for beaker */
.beaker_left .drop_target, .beaker_right .drop_target
{
    width: 100%; height:160%;
	position:absolute; 
	bottom: 0%;
}

/* beaker graphic */
.beaker_left .beaker25{	    background-image:url("../images/beaker25mL-left.png");      }
.beaker_right .beaker25{	background-image:url("../images/beaker25mL-right.png");     }
.beaker_left .beaker100{	background-image:url("../images/beaker100mL-left.png");     }
.beaker_right .beaker100{	background-image:url("../images/beaker100mL-right.png");    }
.beaker_left .beaker250{	background-image:url("../images/beaker250mL-left.png");     }
.beaker_right .beaker250{	background-image:url("../images/beaker250mL-right.png");    }
.beaker_left .beaker400{	background-image:url("../images/beaker400mL-left.png");	    }
.beaker_right .beaker400{	background-image:url("../images/beaker400mL-right.png");    }
.beaker_left .beaker500{	background-image:url("../images/beaker500mL-left.png");	    }
.beaker_right .beaker500{	background-image:url("../images/beaker500mL-right.png");    }
.beaker_left .beaker600{	background-image:url("../images/beaker600mL-left.png");	    }
.beaker_right .beaker600{	background-image:url("../images/beaker600mL-right.png");    }
.beaker_left .beaker1000{	background-image:url("../images/beaker1000mL-left.png");    }
.beaker_right .beaker1000{	background-image:url("../images/beaker1000mL-right.png");   }

/* positioning of beaker graphic */
.beaker_left .beaker25, .beaker_right .beaker25,
.beaker_left .beaker100, .beaker_right .beaker100,
.beaker_left .beaker250, .beaker_right .beaker250,
.beaker_left .beaker400, .beaker_right .beaker400,
.beaker_left .beaker500, .beaker_right .beaker500,
.beaker_left .beaker600, .beaker_right .beaker600,
.beaker_left .beaker1000, .beaker_right .beaker1000
{
    width:100%; height:100%;
	position:absolute;	
	left: 0%; bottom: 0%;
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
}


/* -- DIGITALE BALANCE -- */

/* digital balance default settings */
.digscale
{	
	width:200px; height:100px;
	left: 300px; top: 235px; 
	position:absolute;
	margin-left:auto;
	margin-right:auto;		
	background-image:url("../images/digitalscale.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
}

/* dropaable area for digital balance */
.digscale .drop_target 
{
	width: 100%; height:200%;
	position:absolute; 
	bottom: 0%;
}

/* text read out of mass on digital balance */
.digscale .digscale_txt 
{
	width: 53%; height:23%;	
	position:absolute;
	left: 22%; bottom: 32%;
	font-family:Courier New;
	font-size:150%;
	text-align:right;
}

/* tare button on digital balance */ 
.digscale .tare_enabled , .digscale .tare_disabled 
{
    width:18%; height:21%;	
	right: 4%; bottom: 33%;
	position:absolute;
	cursor:pointer;
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
}
.digscale .tare_enabled 
{	
	background-image:url("../images/digitalscale-enable.png");
}
.digscale .tare_disabled 
{	
	background-image:url("../images/digitalscale-disable.png");
}


/* -- GRADUATED CYLINDER -- */

.graduated_cylinder
{
    width:70px; height:225px;
	position:absolute;	
	right: 150px; bottom: 10px;
}
.graduated_cylinder .liquid_size
{
   width:30%; height: 77.5%; 
   position:absolute;
   left: 33%; bottom: 7.75%; 
}
.graduated_cylinder .gcliq
{
	width:100%; height: 100%;
	position:absolute;
	bottom: 0; 	
	border-bottom-right-radius: 40% 1%;
	border-bottom-left-radius: 40% 1%;
}
.gc50_left
{
	width:100%; height:100%;
	position:absolute;	
	background-image:url("../images/gc50mL-left.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent; 	
}
.gc50_right
{
	width:100%; height:100%;
	position:absolute;	
	background-image:url("../images/gc50mL-right.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent; 	
}
.gc100_left
{
	width:100%; height:100%;
	position:absolute;	
	background-image:url("../images/gc100mL-left.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent; 	
}
.gc100_right
{
	width:100%; height:100%;
	position:absolute;	
	background-image:url("../images/gc100mL-right.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent; 	
}
.gc250_left
{
	width:100%; height:100%;
	position:absolute;	
	background-image:url("../images/gc250mL-left.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent; 	
}
.gc250_right
{
	width:100%; height:100%;
	position:absolute;	
	background-image:url("../images/gc250mL-right.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent; 	
}
.gc500_left
{
	width:100%; height:100%;
	position:absolute;	
	background-image:url("../images/gc500mL-left.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent; 	
}
.gc500_right
{
	width:100%; height:100%;
	position:absolute;	
	background-image:url("../images/gc500mL-right.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent; 	
}


/* -- TAPE MEASURE -- */

.tm-all /*contains all tm elements*/
{
	border:solid 0px blue;
	background-color:transparent;
	position:absolute;
	padding:0px;
	margin-top:-10px;	
	display:none;
}
.tm-all .tm-tape /*tape*/
{
	background-color:#f7db27;
	border:solid 0px red;
	position:absolute;
	z-index: 0;
}

.tm-all .tm-clip /*clip*/
{
	position:absolute;
	width:15%; height:100%;
	z-index: 1;
}
.tm-clip-right
{
	background-image:url("../images/tm-clip-01.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
}
.tm-clip-left
{
	background-image:url("../images/tm-clip-02.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
}

.tm-all .tm-main /*main*/
{
	border:solid 0px red;
	position:relative;	
	width:100%; height:100%;
	z-index: 1;
}
.tm-main-right
{	
	background-image:url("../images/tm-01.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
    border:solid 0px red;
}
.tm-main-left
{
	background-image:url("../images/tm-02.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
    border:solid 0px red;
}

.ruler-cm
{
	background-image:url("../images/ruler_cm.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
    border:solid 1px red;
}

/* -- TWEEZERS -- */
/********************
<div id="tweezers" class="tweezers tweezersOpen"></div>
<div id="hitSpot"></div>
********************/
.tweezers
{	
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
    border:solid 0px red;
}
.tweezersOpen
{
	background-image:url("../images/tweezer_open.png");
}

.tweezersClose
{
	background-image:url("../images/tweezer_closed.png");	
}

#hitSpot
{
	/*background-color:white;*/
	opacity:.60;	
	width:7px;
	height:15px;
	position:absolute;
	left:0px; top:0px;
	z-index:2;
}

/* -- MAGNIFYING LENS -- */
/********************         
<div class="magnifying_lens magnifying_lens_left"></div> 
<div class="magnifying_lens magnifying_lens_right"></div>
<div id="close01" class="close_btn" style="top:12.5%;"><div></div></div> // optional close button
********************/

.magnifying_lens
{
	height:100%;
	position:absolute;
	top: 0px;
	z-index:50;
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
    border:solid 0px red;
}
.magnifying_lens_left
{	
	width:17.5%; 
	left: 0px;
	background-image:url("../images/lens_left.png");	
}
.magnifying_lens_right
{	
	width:17%; 	
	right: 0px;	
	background-image:url("../images/lens_right.png");	
}

/* -- MAGNIFYING LENS END -- */

/*-- CUTTING BOARD TRAY --*/
.cuttingTray{
	width:100%; height:100%;
	position:absolute;	
	background-image:url("../images/bg_tray_1.png");
	  background-attachment: fixed;
	background-position: center;
    background-repeat: no-repeat;
    background-color:transparent;
}

/*-- SCALPEL --*/
/******************** 
<div id="scalpel" class="scalpel">
    <div class="scalpel"></div>                        
</div>
********************/

.scalpel
{
	background-image:url("../images/scalpel.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
    width:480px;
	height:240px;
    position:absolute;
	left:650px; top:225px;
	z-index:3;
}