@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:#FAFAFA; -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:245px;left:0px;width:960px; height:300px; background-color:#E1E1E1;}
.menubarbtn{width:390px; height:36px; cursor:pointer; line-height:36px; text-align:left; color:#000; font-size:17px; 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;
	}


#mainbtn1 {
	position:absolute; top:17px;right:130px; border:thin solid #C69F9F;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #E6B3B3), color-stop(0.53, #FBC8C8));
	background-image:-moz-linear-gradient(bottom, #E6B3B3, #FBC8C8);
	background-image:-ms-linear-gradient(bottom, #E6B3B3, #FBC8C8);
	background-image:-o-linear-gradient(bottom, #E6B3B3, #FBC8C8);
	background-image:linear-gradient(bottom, #E6B3B3, #FBC8C8);
	background-color:#E6B3B3;
}

#mainbtn2 {
	position:absolute; top:63px;right:130px; border:thin solid #95BD95;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #A7DAA7), color-stop(0.53, #BEF1BE));
	background-image:-moz-linear-gradient(bottom, #A7DAA7, #BEF1BE);
	background-image:-ms-linear-gradient(bottom, #A7DAA7, #BEF1BE);
	background-image:-o-linear-gradient(bottom, #A7DAA7, #BEF1BE);
	background-image:linear-gradient(bottom, #A7DAA7, #BEF1BE);
	background-color:#A7DAA7;
}

#mainbtn3 {
	position:absolute; top:109px;right:130px; border:thin solid #C7A187;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #E7C1A7), color-stop(0.53, #FED8BE));
	background-image:-moz-linear-gradient(bottom, #E7C1A7, #FED8BE);
	background-image:-ms-linear-gradient(bottom, #E7C1A7, #FED8BE);
	background-image:-o-linear-gradient(bottom, #E7C1A7, #FED8BE);
	background-image:linear-gradient(bottom, #E7C1A7, #FED8BE);
	background-color:#E7C1A7;
}

#mainbtn4 {
	position:absolute; top:155px;right:130px; border:thin solid #87ADC7;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #A7CDE7), color-stop(0.53, #BEE4FE));
	background-image:-moz-linear-gradient(bottom, #A7CDE7, #BEE4FE);
	background-image:-ms-linear-gradient(bottom, #A7CDE7, #BEE4FE);
	background-image:-o-linear-gradient(bottom, #A7CDE7, #BEE4FE);
	background-image:linear-gradient(bottom, #A7CDE7, #BEE4FE);
	background-color:#A7CDE7;
}

#mainbtn5 {
	position:absolute; top:201px;right:130px; border:thin solid #A194AD;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #C1B4CD), color-stop(0.53, #D8CBE4));
	background-image:-moz-linear-gradient(bottom, #C1B4CD, #D8CBE4);
	background-image:-ms-linear-gradient(bottom, #C1B4CD, #D8CBE4);
	background-image:-o-linear-gradient(bottom, #C1B4CD, #D8CBE4);
	background-image:linear-gradient(bottom, #C1B4CD, #D8CBE4);
	background-color:#C1B4CD;
}

#mainbtn6 {
	position:absolute; top:247px;right:130px; border:thin solid #ACAC92;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #C1C1A7), color-stop(0.53, #D8D8BE));
	background-image:-moz-linear-gradient(bottom, #C1C1A7, #D8D8BE);
	background-image:-ms-linear-gradient(bottom, #C1C1A7, #D8D8BE);
	background-image:-o-linear-gradient(bottom, #C1C1A7, #D8D8BE);
	background-image:linear-gradient(bottom, #C1C1A7, #D8D8BE);
	background-color:#C1C1A7;
}

#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;
	}

#structureCanvas {
	position:absolute; top:0px; -webkit-border-bottom-radius:6px; -moz-border-radius-bottom:6px; -o-border-bottom-radius:6px; -ms-border-bottom-radius:6px; border-bottom-radius:6px; background-image:url(../img/Structure.jpg); z-index: 2;
}


#titleBac {position:absolute; left:35px; top: 10px; z-index: 6; font-family: Helvetica-light, Arial, sans-serif; font-size: 28px; color:#333333; font-weight:30;}
.desc1 {z-index: 6; font-family: Arial, Helvetica, sans-serif; font-size: 12px; cursor:pointer;}

#titleBacshape {position:absolute; right:32px; top: 30px; z-index: 6; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color:#336666; font-weight:200;}

.desc2 {z-index: 6; font-family: Helvetica-light, Arial, sans-serif; font-size: 12px; cursor:pointer; color:#336666;}

#scollbox1 {font-size: 12px; position:absolute; z-index: 6; top:445px; height:88px; width:660px; left:20px; -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;}

.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: 7; 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: 7; left: 673px;font-size:18px; color:#999; cursor:pointer;}

.canvasBox {
	position:absolute; height:500px; width:473px; top:50px;left: 5px; border:solid 1px #c3c3c3; -webkit-border-radius:6px;  z-index: 8;
}	
#a {background-image:url(../img/CellWall.jpg);}
#b {background-image:url(../img/Flagellum.jpg);}
#c {background-image:url(../img/Nucleoid.jpg);}
#d {background-image:url(../img/CellTypeCompare.jpg);}
#e {background-image:url(../img/CellMembrane.jpg);}
#h {background-image:url(../img/Ribosome.jpg);}

#anitip {position:absolute; z-index: 9; top:244px; left: 477px; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color:#666; font-style:italic;}

.anibutton {position:absolute; z-index: 9; width:150px; height:22px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; cursor:pointer; line-height: 22px; font-weight:400;
    border:thin solid #95BD95;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-ms-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #A7DAA7), color-stop(0.53, #BEF1BE));
	background-image:-moz-linear-gradient(bottom, #A7DAA7, #BEF1BE);
	background-image:-ms-linear-gradient(bottom, #A7DAA7, #BEF1BE);
	background-image:-o-linear-gradient(bottom, #A7DAA7, #BEF1BE);
	background-image:linear-gradient(bottom, #A7DAA7, #BEF1BE);
	background-color:#A7DAA7;}


#ani1 {top:275px; left: 300px;}
#ani2 {top:275px; left: 533px;}
#ani3 {top:313px; left: 300px;}
#ani4 {top:313px; left: 533px;}
#ani5 {position:absolute; z-index: 9; width:170px; height:22px; top:330px; left: 550px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; cursor:pointer; line-height: 22px; font-weight:400; border:thin solid #C7A187;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #E7C1A7), color-stop(0.53, #FED8BE));
	background-image:-moz-linear-gradient(bottom, #E7C1A7, #FED8BE);
	background-image:-ms-linear-gradient(bottom, #E7C1A7, #FED8BE);
	background-image:-o-linear-gradient(bottom, #E7C1A7, #FED8BE);
	background-image:linear-gradient(bottom, #E7C1A7, #FED8BE);
	background-color:#E7C1A7;}

.anivideo1 {position:absolute; z-index: 10; top:268px; left: 259px; width:462px; height:300px; background-color:#FFF; 
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-ms-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px; }
	
.creat4Btnani {position:absolute; top:6px; z-index: 11; left: 340px;font-size:14px; color:#36f; cursor:pointer;}
.creat4Btnani2 {position:absolute; top:6px; z-index: 11; left: 339px;font-size:14px; color:#fff; cursor:pointer;}
#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);
}



#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;
}