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

body {
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	-moz-text-size-adjust: none;
	-moz-user-select: none;
	-o-text-size-adjust: none;
	-o-user-select: none;
	-ms-text-size-adjust: none;
	-ms-user-select: none;
	text-size-adjust: none;
	user-select: none;
	background-color: #555;
	font-family:Arial, Helvetica, sans-serif;
}


 .mainboard {
	position:absolute; top:50%; margin-top:-300px; left:50%; margin-left:-480px; width:960px; height:600px; 
	background-color:#E6E6E6; -webkit-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; -moz-border-radius:6px; border-radius:6px; 
	-webkit-box-shadow: 0px 3px 8px rgba(0,0,0,.85); -o-box-shadow: 0px 3px 8px rgba(0,0,0,.85); -moz-box-shadow: 0px 3px 8px rgba(0,0,0,.85); box-shadow: 0px 3px 8px rgba(0,0,0,.85); -ms-box-shadow: 0px 3px 8px rgba(0,0,0,.85); 
}

#btnbiocourseware {
	position:absolute; top:8px;left:15px; width:160px; height:32px; cursor:pointer; line-height:32px; text-align:center; color:#FFf;
	-webkit-box-shadow: 0px 3px 8px rgba(0,0,0,.85); -o-box-shadow: 0px 3px 8px rgba(0,0,0,.85); -moz-box-shadow: 0px 3px 8px rgba(0,0,0,.85); box-shadow: 0px 3px 8px rgba(0,0,0,.85); -ms-box-shadow: 0px 3px 8px rgba(0,0,0,.85); 
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #369), color-stop(0.53, #69c));
	background-image:-moz-linear-gradient(bottom, #369, #69c);
	background-image:-ms-linear-gradient(bottom, #369, #69c);
	background-image:-o-linear-gradient(bottom, #369, #69c);
	background-image:linear-gradient(bottom, #369, #69c);
	background-color:#369;
	font-size:15px; font-family:Arial, Helvetica, sans-serif; 
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-ms-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}





.ptitle {
	position:absolute; top:15px; left:50%; margin-left:-480px; width:960px; height:60px; font-size:26px; font-family: Helvetica-light, Arial, sans-serif; color:#999; text-align:center; z-index:3;
}



.litemask{
	position:absolute; width:958px; height:540px; bottom:0px; border:1px solid #CCCCCC; font-size:28px; color:#333; text-align:center; text-shadow:0px 2px 4px #999;
	background-color:rgba(255,255,255,0.85); z-index: 15; 
	-webkit-border-bottom-right-radius:6px; 
	-webkit-border-bottom-left-radius:6px; 
	-moz-border-radius-bottomright:6px; 
	-moz-border-radius-bottomleft:6px; 
	border-bottom-right-radius:6px; 
	border-bottom-left-radius:6px; 
	-o-border-bottom-right-radius:6px; 
	-o-border-bottom-left-radius:6px;
}

.content {
	position:absolute; width:958px; height:540px; bottom:0px; border:1px solid #CCCCCC;
	background-color:#F2F2F2; 
	-webkit-border-bottom-right-radius:6px; 
	-webkit-border-bottom-left-radius:6px; 
	-moz-border-radius-bottomright:6px; 
	-moz-border-radius-bottomleft:6px; 
	border-bottom-right-radius:6px; 
	border-bottom-left-radius:6px; 
	-o-border-bottom-right-radius:6px; 
	-o-border-bottom-left-radius:6px;
}

.maindestext {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:#333; text-align:left; line-height: 25px;}
.imgbtn {position:absolute; width:30px; height:30px; left:20px; top:15px; cursor:pointer; z-index:4;}
  
.globtn {position:absolute; width:30px; right:20px; top:8px; cursor:pointer;z-index:4; }


#btntool {position:absolute; right:0px; top:0px; height:33px; -o-border-top-right-radius:6px; -ms-border-top-right-radius:6px; border-top-right-radius:6px; -webkit-border-top-right-radius:6px; -moz-border-radius-topright:6px; cursor:pointer;
}

#bigtitle {
	position:absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 40px;
	font-weight:100;
	width: 960px;
	text-align: center;
	z-index: 2;
	top:125px;
	left:0px;
}

#smalltitle {
	position:absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight:100;
	width: 960px;
	text-align: center;
	z-index: 2;
	top:195px;
	left:0px;
}

#menubar {position:absolute; top:265px;left:0px;width:960px; height:196px; background-color:#BABABA;}

#footage {
	position:absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #999999;
	width: 960px;
	text-align: center;
	z-index: 2;
	bottom:5px;
	left:0px;
}


#aboutus {
	position:absolute; right:45px; top: 15px; height:30px; cursor:pointer; color:#FFF; text-align:left; text-indent:20px; font-family:Arial, Helvetica, sans-serif; font-size:20px; line-height:30px;
	}

#plantCanvas {
	position:absolute; top:0px; border-right:solid 1px #c3c3c3; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; -o-border-bottom-left-radius:6px; -ms-border-bottom-left-radius:6px; border-bottom-left-radius:6px; background-image:url(../img/PlantParts.png); z-index: 2;
}

#plantdes1 {
	position:absolute; top:0px; height:450px; width:390px; right:0px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomright:6px; border-bottom-right-radius:6px; -ms-border-bottom-right-radius:6px; -o-border-bottom-right-radius:6px;overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}
#plantpart1 {position:absolute; width:215px;}
#plantpart2 {position:absolute; top:407px; width:355px;}

.desc1 {z-index: 6; font-family: Arial, Helvetica, sans-serif; font-size: 12px; cursor:pointer;}
.desc1noclick {z-index: 6; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}


#instuction{position:absolute; top:515px; left: 255px;}
#flowerCanvas {
	position:absolute; top:0px; border-right:solid 1px #c3c3c3; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; -o-border-bottom-left-radius:6px; -ms-border-bottom-left-radius:6px; border-bottom-left-radius:6px; background-image:url(../img/flower.png); z-index: 2;
}
.desc1f {
	position:absolute; top:0px; height:510px; width:390px; right:0px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomright:6px; border-bottom-right-radius:6px; -ms-border-bottom-right-radius:6px; -o-border-bottom-right-radius:6px; font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; z-index: 2; padding:10px; overflow-y:scroll; overflow-x:hidden;  -webkit-overflow-scrolling:touch;
}


#Stigma {position:absolute; top:63px; left: 83px;}
#Style  {position:absolute; top:109px; left: 83px;}
#Ovary  {position:absolute; top:153px; left: 83px;}
#Anther {position:absolute; top:76px; left: 402px;}
#Filament{position:absolute; top:108px; left: 402px;}
#instuction2{  position:absolute; top:520px; left: 160px;}



.desc2 {  z-index: 3; font-family: Arial, Helvetica, sans-serif;
	font-size: 11px; cursor:pointer;
}

#cellCanvas {
	position:absolute; top:0px; border-right:solid 1px #c3c3c3; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; -o-border-bottom-left-radius:6px; -ms-border-bottom-left-radius:6px; border-bottom-left-radius:6px; background-image:url(../img/CellStructure.png); z-index: 2;
}

#celldes1 {
	position:absolute; top:0px; height:450px; width:390px; right:0px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomright:6px; border-bottom-right-radius:6px; -ms-border-bottom-right-radius:6px; -o-border-bottom-right-radius:6px; font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; z-index: 2; padding:10px; overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}

#Nucleus {position:absolute; top:22px; left: 360px;}
#instuction21{position:absolute; top:515px; left: 155px;}

.cellpartcanvas {position:absolute; right:60px; top:60px; width:300px; height:300px; border:solid 1px #c3c3c3;}
.cellparttext {position:absolute; top:390px; width:365px;  font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:#333; text-align:justify; line-height: 25px;}
#nucleuscanvas {background-image:url(../img/cellparts/c11.png);}
#wplantcanvas {background-image:url(../img/cellparts/plantcell.png);}
#physiologycanvas {
	position:absolute; top:0px; border-right:solid 1px #c3c3c3; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; -o-border-bottom-left-radius:6px; -o-border-bottom-right-radius:6px; -ms-border-bottom-left-radius:6px; -ms-border-bottom-right-radius:6px; border-bottom-left-radius:6px; border-bottom-right-radius:6px; -moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; background-image:url(../img/phsiology.png); z-index: 2;
}	
.desc3 {  z-index: 3; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px; cursor:pointer; color:#3366ff;
}

#instuction31{position:absolute; top:365px; left: 145px;}
#instuction32{position:absolute; top:352px; left: 638px;}
#instuction33{position:absolute; top:495px; left: 745px;}

.canvasBox {
	position:absolute; height:500px; width:473px; top:50px;left: 5px; border:solid 1px #c3c3c3; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px;  z-index: 5;
}	


.cyclecanvas {position:absolute; top:44px;left: 0px; border:solid 1px #c3c3c3; -webkit-border-bottom-left-radius:6px; -o-border-bottom-left-radius:6px; -ms-border-bottom-left-radius:6px; border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; z-index: 4;}	
#mosscanvas {background-image:url(../img/cycle/cycle1.png);} 



.desccycle {position:absolute; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; -ms-border-bottom-left-radius:6px; -o-border-bottom-left-radius:6px; border-bottom-left-radius:6px; top:45px;right: 0px; height:480px; width:373px; z-index: 4; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:#333; text-align:left; line-height: 25px; overflow-y:scroll; overflow-x:hidden; padding:5px 20px 10px 25px; background-color:#FFF;}	
.desc41 {z-index: 6; font-family: Arial, Helvetica, sans-serif; font-size: 11px; cursor:pointer;}
.desc3noclick {  z-index: 3; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#3366ff;}

#invisiblebox {
	position:absolute; left:50%; margin-left:-480px; width:960px; height:540px; margin-top:-240px; top:50%;
}

#glossorybox {
	position:absolute; width:260px; height:150px; z-index: 7;
	font-size:13px; line-height:16px; -webkit-border-radius: 6px; -ms-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
	background-color:rgba(0, 0, 0, 0.85); color:#fff;  padding:15px;
	resize:none;  -webkit-box-shadow: 3px 3px 8px rgba(0,0,0,.85); -o-box-shadow: 3px 3px 8px rgba(0,0,0,.85); -moz-box-shadow: 3px 3px 8px rgba(0,0,0,.85); box-shadow: 3px 3px 8px rgba(0,0,0,.85); -ms-box-shadow: 3px 3px 8px rgba(0,0,0,.85); 
} 

.glossoryclose {
	position:absolute; width:70px; height:20px; left:230px; top:10px; z-index: 8; font-size:14px; color:#FFF; cursor:pointer;
} 

.glossoryboxtitle {position:absolute; top:5px; font-family: Arial, Helvetica, sans-serif; font-size: 13px;}

.glossoryboxdes{font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align:left; height:120px; overflow-x:hidden; overflow-y:scoll; -webkit-overflow-scrolling:touch; }


#glossary {
	position:absolute; width:600px; height:600px; top:50%; margin-top:-300px; left:50%; margin-left:-300px; 
	background-color:#FDFDFD; -webkit-border-radius:6px; -ms-border-radius:6px; -moz-border-radius:6px; -o-border-radius:6px; border-radius:6px; z-index: 10; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#666; 
	-webkit-box-shadow: 3px 3px 8px rgba(0,0,0,.85); -o-box-shadow: 3px 3px 8px rgba(0,0,0,.85); -ms-box-shadow: 3px 3px 8px rgba(0,0,0,.85); -moz-box-shadow: 3px 3px 8px rgba(0,0,0,.85); box-shadow: 3px 3px 8px rgba(0,0,0,.85);
}

#glossarylitemask{
	position:absolute; width:600px; height:549px; bottom:0px; left:50%; margin-left:-300px; 
	background-color:rgba(204,204,204,0.7); z-index: 15; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px; z-index: 10; font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#000;
	text-align:center;
}

#grid-view {
	position:absolute; width: 200px; height:550px; left:0px; top: 50px;
	-webkit-border-bottom-left-radius:8px; -o-border-bottom-left-radius:8px; -moz-border-bottom-left-radius:8px; -ms-border-bottom-left-radius:8px; border-bottom-left-radius:8px; border-top:solid 1px #c3c3c3; border-right:solid 1px #c3c3c3;
}

#glossarysearchbar {
	position:absolute; width: 200px; height:25px; left:0px; top: 0px; background-color:#CCC; 
}

#seachinputbox {
	position:absolute; width: 177px; height:12px; left:5px; bottom: 5px; text-align:left; -webkit-border-radius:8px; -moz-border-radius:8px; -o-border-radius:8px; border-radius:8px; -ms-border-radius:8px; padding-left:3px;
}
																																																		
#grid-list {position:absolute; width: 200px; height:500px; left:0px;top: 25px; overflow-y:scroll; overflow-x:hidden; background-color:#FFF; text-align:center; -webkit-overflow-scrolling:touch;}

#grid-list .list-item {
	width: 190px; height: 40px; cursor:pointer; overflow: hidden; background-color:#FFF; text-align:left;
	color:#000; text-indent:20px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; line-height:40px; border-bottom:solid 1px #CCC; 
}

#page-view {
	position:absolute; top: 50px; right:0px; width: 359px; height:500px; overflow:hidden;  
color:#333; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; line-height:25px; text-align:justify;
	padding:20px; -webkit-border-bottom-right-radius:8px; -ms-border-bottom-right-radius:8px; -moz-border-bottom-right-radius:8px; -ms-border-bottom-right-radius:8px; border-bottom-right-radius:8px; border-top:solid 1px #c3c3c3; background-color:#F4F4F4; overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling:touch;
	}

.termname {
	font-family:Helvetica-light,Arial, sans-serif; font-size:22px; color:#000;
}

.termdescription{font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align:left; color:#333;
}

.wholemask{position:absolute; top:50%; margin-top:-300px; left:50%; margin-left:-480px; width:960px; height:600px; 
	background-color:rgba(204,204,204,0.2); -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px; z-index: 15; 
}
.create4 {position:absolute; top:20px; z-index: 4; height:536px; width:466px; 
	-webkit-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; -moz-border-radius:6px; border-radius:6px; 
	left: 247px; font-size:24px; padding:10px; color:#666; background-color:#FFF; -webkit-box-shadow: 3px 3px 8px rgba(0,0,0,.85); -o-box-shadow: 3px 3px 8px rgba(0,0,0,.85); -ms-box-shadow: 3px 3px 8px rgba(0,0,0,.85); -moz-box-shadow: 3px 3px 8px rgba(0,0,0,.85); box-shadow: 3px 3px 8px rgba(0,0,0,.85);
}	
	
.creat4Btn {position:absolute; top:30px; z-index: 4; left: 673px;font-size:18px; color:#999; cursor:pointer;}