#allSteps
{
	width:854px; 
	height:360px;
	position:absolute;
	top: 0px;
	left: 0px;
}

.step
{
	width:100%; 
	height:100%; 
	position:absolute;
	top: 0px;
	left: 0px;
}

#tweezers
{
	width:240px;
	height:240px;
	position:absolute;
	left:700px; top:225px;
	z-index:3;
}

#ruler{
	position:absolute;
	z-index:50;
	width:8.2%;
	height: 144.8%;
	top:-5%;
	left:50%;

	background-image:url("../../../../../common/interactives/images/ruler-cm.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
}

/* -- LILY START -- */
/********************
<div id="lily" class="lily_whole">
    <img src="../../../../../common/interactives/images/lily/pedicel.png" id="pedicel" />
    <img src="../../../../../common/interactives/images/lily/petal_5.png" id="petal_5" />
    <img src="../../../../../common/interactives/images/lily/petal_4.png" id="petal_4" />
    <img src="../../../../../common/interactives/images/lily/petal_6.png" id="petal_6" />
    <img src="../../../../../common/interactives/images/lily/petal_3.png" id="petal_3" />
    <img src="../../../../../common/interactives/images/lily/stamen_2.png" id="stamen_2" />
    <img src="../../../../../common/interactives/images/lily/stamen_4.png" id="stamen_4" />
    <img src="../../../../../common/interactives/images/lily/stamen_6.png" id="stamen_6" />
    <img src="../../../../../common/interactives/images/lily/pistil.png" id="pistil" />
    <img src="../../../../../common/interactives/images/lily/stamen_5.png" id="stamen_5" />
    <img src="../../../../../common/interactives/images/lily/stamen_3.png" id="stamen_3" />
    <img src="../../../../../common/interactives/images/lily/stamen_1.png" id="stamen_1" />
    <img src="../../../../../common/interactives/images/lily/petal_1.png" id="petal_1" />
    <img src="../../../../../common/interactives/images/lily/petal_2.png" id="petal_2" />
</div>
********************/
.lily_whole
{
	width:355px; 
	height:298px; 
	position:absolute;
	left:256px; bottom:0px;		
	opacity:1;
}

.lily_whole IMG { position:absolute; }

.lily_whole #pedicel { left:47.5%; bottom:-11%; } 
.lily_whole #petal_1 { left:13%; top:45%; }
.lily_whole #petal_2 { left:49%; top:35%; }
.lily_whole #petal_3 { left:0%; top:22.5%; } 
.lily_whole #petal_4 { left:50.5%; top:24.75%; } 
.lily_whole #petal_5 { left:20%; top:10%; } 
.lily_whole #petal_6 { left:45.5%; top:.25%; } 
.lily_whole #stamen_1 {	left:50%; top:19%; }
.lily_whole #stamen_2 {	left:33.5%; top:18.5%; }
.lily_whole #stamen_3 {	left:51.5%; top:13%; }
.lily_whole #stamen_4 {	left:36%; top:9%; }
.lily_whole #stamen_5 { left:50.5%; top:7%; }
.lily_whole #stamen_6 {	left:43%; top:8%; }
.lily_whole #pistil { left:48%; top:4%; }

.lily_whole #petal_2:hover { left:49%; top:35%; }



.cuttingTrayLilyMeasure{
	width:100%; height:100%;
	position:absolute;	
	background-image:url("../../../../../common/interactives/images/measurements.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
}
/* -- LILY END -- */

#blank_petal {background-color: red; opacity:.0; width:0px; height:0px; position:absolute; left:32.5%; top:94.2%;}
#blank_style {background-color: red; opacity:.0; width:0px; height:0px; position:absolute; left:75.75%; top:87.85%;}
#blank_filament {background-color: red; opacity:.0; width:1px; height:0px; position:absolute; left:61.5%; top:85.5%;} 
#blank_anther {background-color: red; opacity:.0; width:0px; height:0px; position:absolute; left:47%; top:62.6%;} 

/*-- READ OUT START --*/
.readOut
{
	background-image:url("../../../../../common/interactives/images/indicator_arrow.png");
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
	width:5%;
	height:3%;
	position: absolute;
}

#text_petal.readOut { left:32.17%; top:16%; }
#text_style { left:75.3%; top:22.1%; }
#text_ovary { left:75.3%; top:70.15%; }
#text_filament { left:61.15%; top:29%; }
#text_anther { left:46.65%; top:47.2%; }
/*-- READ OUT END --*/

/* -- PISTIL START -- */
/********************
<div id="pistilHolder">
    <div id="pistil2" class="pistil pistilClose"></div>
</div>
********************/
#pistilHolder
{
	position:absolute;
	width:8.9%;
	height:76%;
	left:50%; top: 19%; 
}
#pistilHolder2
{
	position:absolute;
	width:8.9%;
	height:76%;
	left:50%; top: 19%; 
}
#pistilHolder3
{
	position:absolute;
	width:8.9%;
	height:76%;
	left:50%; top: 19%; 
}
#pistil2
{	
	width: 30%;
	height: 100%;
	left: 35%;
	position: absolute;
}
#pistil3
{	
	width:100%;
	height:100%;
	position: absolute;
}
#pistil4
{	
	width: 30%;
	height: 100%;
	left: 35%;
	position: absolute;
}
#pistil5
{	
	width:100%;
	height:100%;
	position: absolute;
}
#pistil6
{	
	width:100%;
	height:100%;
	position: absolute;
}
.pistil
{	
	background-size:contain;
    background-repeat: no-repeat;
    background-color:transparent;
    margin: 0px auto;
}
.pistilClose
{
	background-image:url("../../../../../common/interactives/images/pistil2.png");	
}
.pistilOpen
{
	background-image:url("../../../../../common/interactives/images/pistil3.png");
}

#blank_pistil {background-color: black; opacity:.0; width:2px; height:5%; position:absolute; left:46.75%; top:0%;} 
/* -- PISTIL END -- */



/*-- POINT A & B START --*/
.pointer
{
	color:white;
	font-family: Arial, Helvetica, sans-serif ;
	font-size: 20px;
	font-weight: bold;
	width:9%;
	padding:0px;
	position: absolute;
	left:45%;
}
#pointA
{
	/*border-top:dashed 1px white;*/
	top: 17%;
	background-image:url("../../../../../common/interactives/images/indicator_a.png");
	background-repeat: no-repeat;
    background-color:transparent;
    height: 10%

}
/*#pointA:before{ content: "A"; }*/

#pointB
{	
	/*border-bottom:dashed 1px white;*/
	top: 90%;
	background-image:url("../../../../../common/interactives/images/indicator_b.png");
	background-repeat: no-repeat;
    background-color:transparent;
    height: 10%
}
/*#pointB:before { content: "B"; }*/
/*-- POINT A & B END --*/