body {
  padding-bottom: 40px;
  color: #5a5a5a;
  font-family: Tahoma, SimSun, Arial, Helvetica, sans-serif;
background: #ebebeb; /* Old browsers */
background-image:url(../images/bg.png); background-repeat:repeat;
}

a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: none;}
a:active {text-decoration: none;}
a:hover, a:active, a:focus {  outline: 0; }

.topbanner { width: 100%; height: auro; min-height:230px; background-image:url(../images/slide_top.jpg); background-repeat:no-repeat; position:relative;  z-index: 10; padding-top:0px;}
.topbanner2 { width: 100%; height: auro; min-height:140px; background-image:url(../images/slide3.jpg); background-repeat:no-repeat; position:relative;  z-index: 10; padding-top:0px;}
.topbanner3 { width: 100%; height: auro; min-height:230px; background-image:url(../images/slide_wall.jpg); background-repeat:no-repeat; position:relative;  z-index: 10; padding-top:0px;}

.new_topbanner2 { width: 100%; height: auro; min-height:140px; background-image:url(../images/new_slide3.jpg); background-repeat:no-repeat; position:relative;  z-index: 10; padding-top:0px;}

.endbanner { width: 100%; height:230px; background-image:url(../images/slide2.jpg); background-repeat:no-repeat; position:relative;  z-index: 10; padding-top:50px;}
.new_endbanner { width: 100%; height:230px; background-image:url(../images/new_slide2.jpg); background-repeat:no-repeat; position:relative;  z-index: 10; padding-top:50px;}

.coursearea { position: fixed; bottom: 0px; width: 100%; height:90px; background-color:rgba(16,16,16,0.95); z-index: 10;}
.coursearea_list { height: 80px; overflow: auto; margin: 0px; }
.coursearea_list::-webkit-scrollbar { width: 12px;}
.coursearea_list::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #000;}
.coursearea_list::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #424242;}
.coursearea_list ul li { width: 210px;  height:65px; display:inline-block; margin: 0px 5px; background-color:rgba(16,16,16,0.95);color:#f0f0f0; font-size:12px; overflow:hidden; }
.course_btn {position: fixed; bottom: 55px; right: 15px; padding: 3px !important; }
.course_btn2 {position: relative; float:right; }
.course_img {width: auto; height:60px; margin: 0px 5px 0px 0px; float:left;}

.footerbg { width: 100%; height:50px; background-color:#222; margin-bottom: -50px;} 
.fortoshort { min-height: 600px;}

.space{ padding-top: 90px;}
.space2{ padding: 0px 0px 10px 0px;}
.space3 { min-height: 260px;}
.space4 { min-height: 180px;}
.scroll1 { height: 250px; overflow:auto;}
.scroll1::-webkit-scrollbar { width: 12px;}
.scroll1::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff;}
.scroll1::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #f1f1f1;}

.arearelate{ height: 320px; margin-bottom: 10px; overflow:auto;            scrollbar-arrow-color:#9f9f9f; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#d0d0d0; scrollbar-shadow-color:#d0d0d0; scrollbar-track-color:#fff;}
.arearelate::-webkit-scrollbar { width: 12px;}
.arearelate::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff;}
.arearelate::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #f1f1f1;}


.arearelate2{ height: 500px; margin-bottom: 10px; overflow:auto;            scrollbar-arrow-color:#9f9f9f; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#d0d0d0; scrollbar-shadow-color:#d0d0d0; scrollbar-track-color:#fff;}
.arearelate2::-webkit-scrollbar { width: 12px;}
.arearelate2::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff;}
.arearelate2::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #f1f1f1;}

.scroll2 { height: 85px; overflow:auto; word-break: break-all;}
.scroll2::-webkit-scrollbar { width: 12px;}
.scroll2::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff;}
.scroll2::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #f1f1f1;}

.scroll3 { height: 225px; overflow:auto; word-break: break-all;}
.scroll3::-webkit-scrollbar { width: 12px;}
.scroll3::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff;}
.scroll3::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #f1f1f1;}

.blackspace { background-color:#222; border:#CCC solid 1px; -webkit-border-radius: 2px; border-radius: 2px;}
.whitespace { width: 100%; background-color:#fff; border:#CCC solid 1px; -webkit-border-radius: 2px; border-radius: 2px; min-height: 580px; margin: 10px 0px; padding: 0px;}
.whitespace2 { background-color:rgba(255,255,255,.6); border-left:#CCC solid 1px; -webkit-border-radius: 2px; border-radius: 2px; min-height: 550px;}
.whitespace3 { border-bottom:#CCC solid 1px; min-height: 120px; margin-bottom: 18px;}
.whitespace4 { border-bottom:#CCC solid 1px; min-height: 120px; margin-bottom: 18px; background-color:#fff;}
.whitespace5 { width: 100%; background-color:rgba(255,255,255,.6); border:#ededed solid 1px; -webkit-border-radius: 10px; border-radius: 10px; padding: 20px;}
.whitespace6 { width: 100%; background-color:rgba(255,255,255,.6); border:#ededed solid 1px; -webkit-border-radius: 10px; border-radius: 10px; margin-bottom: 10px;}
.greenspace1 { border-bottom:#CCC solid 1px; min-height: 120px; margin-bottom: 18px; background-color:rgba(0,170,170,.3);}
.purplespace1 { border-bottom:#CCC solid 1px; min-height: 200px; margin-bottom: 18px; padding: 5px 0px 0px 0px;
 	-moz-border-radius:8px;	-webkit-border-radius:8px;	border-radius:8px;	
    background:-moz-linear-gradient( center top, #2572b5 5%, #2a90e7 100% ); background:-ms-linear-gradient( top, #2572b5 5%, #2a90e7 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2572b5', endColorstr='#2a90e7');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #2572b5), color-stop(100%, #2a90e7) );
	background-color:#2a90e7;}
.divideborder { border-right:#CCC solid 1px;}
.divideborder2 { border-bottom:#CCC solid 1px;}
.margin1 {margin: 15px 0px;}
.margin2 {margin: 0px 8px;}
.margin3 {margin: 8px 0px;}
.margin4{ margin-right: 8px;}
.margin5{margin-left : -3em; text-indent : 3em ;}
.margin6{ margin-left: 30px;}
.padding0{margin:0px; padding:0px; float:right;}
.padding1{margin:0px; padding-top:10px; float:right;}
.padding2{padding-left:40px  !important; }
.padding3{padding-left:20px  !important; }
.padding4{margin:0px !important; padding:0px !important; ;}
.padding5{padding: 0px 20px;}
.subnavtab { padding: 1px 3px  !important; }
.testoral_lt{ background-image:url(../images/bg_testoral_lt.jpg); width: 160px; height: 120px; background-repeat: no-repeat; float:left; margin:10px; text-align:center;
padding: 10px 0px 0px 0px;}
.testoral_sc{ background-image:url(../images/bg_testoral_sc.jpg); width: 160px; height: 120px; background-repeat: no-repeat; float:left; margin:10px; text-align:center;
padding: 10px 0px 0px 0px;}

input[type=radio].css-checkbox {
							position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
						}

						input[type=radio].css-checkbox + label.css-label {
							padding-left:21px;
							height:18px; 
							display:inline-block;
							line-height:18px;
							background-repeat:no-repeat;
							background-position: 0 0;
							font-size:16px;
							vertical-align:middle;
							cursor:pointer;

						}

						input[type=radio].css-checkbox:checked + label.css-label {
							background-position: 0 -18px;
						}
						label.css-label {
				background-image:url(../images/csscheckbox.png);
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

/*-------------------------------------------------------------------------------------------
font
-------------------------------------------------------------------------------------------*/

.time { font-size: 15px; line-height: 18px; color:#fff; background-color:rgba(0,79,119,.8); padding: 5px 7px; display:inline-block; margin: 10px 3px 0px 0px;
-webkit-border-radius: 10px; border-radius: 10px; }
.welcome { position:absolute; top:55px; right: 2px; background-color:rgba(255,255,255,.7); color:#000; font-size: 13px; padding: 4px 7px; -webkit-border-radius: 10px; border-radius: 10px; z-index: 999; }
.blue_r { font-size: 15px; line-height: 15px; color:#fff; background-color:rgba(0,170,170,.7); padding: 3px 8px; margin: 2px 5px 2px 0px; display:inline-block;-webkit-border-radius: 5px; border-radius:5px; }
.blue_r1 { font-size: 13px; line-height: 15px; color:#fff; background-color:#a3acbb; padding: 3px 8px; margin: 2px 5px 2px 0px; display:inline-block;-webkit-border-radius: 5px; border-radius:5px; }
.blue_r1_left { font-size: 13px; line-height: 15px; color:#fff; background-color:#a3acbb; padding: 3px 8px; margin: 2px 5px 2px 0px; display:inline-block;-webkit-border-radius: 5px; border-radius:5px; float:left; }
.blue_r2 { color:#fff; padding: 5px 0px 5px 8px; background-color:#3375ad; font-size: 13px;   }
.blue_r3 { font-size: 13px; line-height: 15px; color:#fff; background-color:#a3acbb; padding: 3px 8px; margin: 2px 5px 2px 10px; display:inline-block;-webkit-border-radius: 5px; border-radius:5px; }
.blue_r4 { line-height: 15px; color:#fff; background-color:#00aaaa; padding: 10px; margin: 5px 2px; display: inherit;}
.blue_r5 { line-height: 15px; color:#fff; background-color:#00aaaa; padding: 5px; width: 80px; float:right; -webkit-border-radius: 5px; border-radius:5px;}
.blue_r6 { font-size: 21px; line-height: 28px; color:#fff; background-color:rgba(0,170,170,.9); padding: 10px 15px; margin: 5px; display:inline-block;-webkit-border-radius: 5px; border-radius:5px; }
.blueright { color:#727b84; text-align:right; min-width: 290px;}
.blueright2 { color:#727b84; text-align:right; float:right;}
.blueleft { color:#ececec; text-align:left; min-width: 290px; font-size: 80%;}
.blue0{ color:#3375ad;font-weight:bold; margin-left : 6em; text-indent : -6em ;}
.blue { color:#3375ad;font-weight:bold;}
.blue2 { color:#3375ad; font-size: 15px; margin: 15px 0px 2px 0px; font-weight:bold;}
.blue3 { color:#3375ad;font-weight:bold; text-decoration:underline;}
.blue3 a { color:#3375ad;font-weight:bold; text-decoration:underline;}
.blue3 a:hover { color:#3375ad;font-weight:bold; text-decoration:underline;}
.black_list { padding: -2px 5px ; margin: 10px 0px; list-style: square url("../images/list.gif");background-color:#084767;-webkit-border-radius: 8px; border-radius:8px; height: 130px; overflow:auto; }
.black_list2 { padding: -2px 5px ; margin: 10px 0px; list-style: square url("../images/list.gif");background-color:#084767;-webkit-border-radius: 8px; border-radius:8px; min-height: 260px; }
.whitelist1 { font-size: 15px; line-height: 21px; color:#fff; margin-bottom: 2px; padding: 4px 5px 1px 0px;  }
.whitelist1 a { color:#fff286; cursor: pointer; padding: 0px 3px; }
.whitelist1 a:hover { color:#ffef6c; }
.white {font-size: 15px; line-height: 18px; color:#fff; margin: 5px 0px; }
.white2 {font-size: 13px; color:#fff; float:left; }
.white3 {font-size: 13px; color:#fff; margin-left: 20px; }
.white_r1 { color:#fff; margin-right: 2px; background-color:#000; padding: 3px 3px 3px 5px;font-size: 13px; }
.black { font-size: 15px; line-height: 21px; color:#222; margin-bottom: 2px; padding: 0px 5px 6px 0px; font-weight:bold; }
.black2 { font-size: 15px; line-height: 21px; color:#222; padding: 5px 0px 5px 15px; font-weight:bold; }
.black2 a { color:#428bca;  }
.black2 a:hover { color:#5fa1d9; cursor: pointer; }
.black3 { font-size: 15px; line-height: 20px; color:#4e4e4e; margin-bottom: 10px; padding: 5px 2px  }
.black4 { font-size: 15px; line-height: 20px; color:#222; margin-bottom: 10px; padding: 5px 8px; font-weight:bold;  }
.black5 { color:#333; border-bottom: #d0d0d0 solid 1px ;}
.black6 { line-height: 21px; letter-spacing: 3px;}
.black6_bold { line-height: 21px; letter-spacing: 3px; font-weight:bold;}
.black7 { font-size: 15px; line-height: 21px; letter-spacing:2px; color:#222; margin: 20px 0px; padding: 0px; font-weight:bold; }
.blackleft { color:#333; text-align:left; min-width: 290px; font-size: 80%;}
.gray{ color:#776d64; line-height: 13px; }
.gray_r1 { font-size: 13px; line-height: 17px; color:#222; background-color:#e4e4e4; padding: 3px 5px; margin: 2px 5px 2px 0px; display:inline-block;  }
.gray_r2 { font-size: 13px; color:#fff; background-color:#d2d2d2; padding: 2px 6px; -webkit-border-radius: 5px; border-radius: 5px; display:inline-block;  }
.green_border1{ color:rgba(0,170,170,1.0); border-left:rgba(0,170,170,1.0) 5px solid; padding: 5px; font-weight:bold; }
.shadow1 {text-shadow: #fff 0.1em 0.1em 0.2em}

.title { background-color:rgba(34,34,34,.7); color:#fff; padding: 10px 20px; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; display:inline-block;}
.title2 { background-color:rgba(34,34,34,.7); color:#fff; padding: 10px 20px; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; display:inline-block; float:left;}
.title3 { background-color:rgba(34,34,34,.7); color:#fff; padding: 10px 20px; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; display:inline-block; float:left; margin-left:15px;}


.lesson {font-size:15px; font-family:Verdana, Geneva, sans-serif; padding:0px; color:#222; font-style: italic; line-height:12px; width: 100%;
          overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;  }
.lesson:hover {color:#3e3e3e;overflow:hidden; }
.lesson2 {font-size:15px; padding:0px; color:#222; width: 100%; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;  }
.lesson2:hover {color:#3e3e3e;overflow:hidden; }
.lesson3 {font-size:15px; padding:2px 0px; color:#f0f0f0; max-width: 700px; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;  }
.lesson3:hover {color:#fff;overflow:hidden; }
.lesson4 {font-size:13px; padding: 0px; color:#333; max-width: 480px; }
.lesson4:hover {color:#222;overflow:hidden; }
.lesson5 {font-size:15px; padding:2px 0px; color:#222; max-width: 400px; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; line-height: 18px;  }
.lesson5:hover {color:#555;overflow:hidden; }
.lesson6 {font-size:15px; padding:2px 0px; color:#222; max-width: 590px; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; line-height: 15px; display: inline;  }
.lesson6:hover {color:#555;overflow:hidden; }
.lesson7 {font-size:15px; padding:2px 0px; color:#222; max-width: 240px; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; line-height: 18px;  }
.lesson7:hover {color:#555;overflow:hidden; }
.keywords{font-size:13px; margin:10px 0px; color:#b92c28; max-width: 590px; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; line-height: 15px; clear:both;  }
.keywords_r1{font-size:13px; margin:5px 10px 5px 0px; padding:4px; background-color:#b92c28; color:#fff; line-height: 18px; }


.d1{position:absolute; right:0; bottom:0; color:#fff; font-weight:bold; background-color:rgba(0,0,0,.8); padding: 0px; width: 100%; text-align:right;}
.date{position:absolute; left:0; top:0; color:#fff; font-weight:bold; background-color:rgba(0,0,0,.8); padding: 0px; width: 100%; text-align:left;}
.newicon{position:absolute; right:0; top:0; font-weight:bold; text-align:right; z-index: 9; margin-right:-10px; margin-top: -10px;}
.newicon2{position:absolute; right:0; top:0; font-weight:bold; text-align:right; z-index: 9; width: 100%; height:140px; border: none; }
.yellowtitle{background-color:#f8b74c !important; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;	border:1px solid #ee8801; color:#fff !important; padding: 8px; margin: 0px; font-weight:bold;}

.mask {
	position: absolute; overflow: hidden;  top: 0;  left: 0;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	background-color: rgba(0,0,0,0.5);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.thumbnail:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;}
   
   
.lt{position:absolute; right:0; bottom:0; color:#fff; font-weight:bold; background-color:#F90; padding: 1px 5px;}
.sc{position:absolute; right:0; bottom:0; color:#fff; font-weight:bold; background-color:#00a6b9; padding: 1px 5px;}
.ad{position:absolute; right:0; bottom:0; color:#fff; font-weight:bold; background-color:#e60012; padding: 1px 5px;}
.ap{position:absolute; right:0; bottom:0; color:#fff; font-weight:bold; background-color:#ff322e; padding: 1px 5px;}
.pre1 {color:#fff; font-weight:bold; background-color:#79ba1c; padding: 1px 3px; white-space:nowrap;}
.pre1 a, a:hover{color:#fff;}
.lt0 {color:#fff; font-weight:bold; background-color:#3c3c3c; padding: 1px 3px; white-space:nowrap;}
.lt1 {color:#fff; font-weight:bold; background-color:#F90; padding: 1px 3px; white-space:nowrap;}
.lt1 a, a:hover{color:#fff;}
.sc0 {color:#fff; font-weight:bold; background-color:#3c3c3c; padding: 1px 3px; white-space:nowrap;}
.sc1 {color:#fff; font-weight:bold; background-color:#00a6b9; padding: 1px 3px; white-space:nowrap;}
.sc1 a, a:hover{color:#fff;}
.ad0 {color:#fff; font-weight:bold; background-color:#3c3c3c; padding: 1px 3px; white-space:nowrap;}
.ad1 {color:#fff; font-weight:bold; background-color:#e60012; padding: 1px 3px; white-space:nowrap;}
.ad1 a, a:hover{color:#fff;}
.ap0 {color:#fff; font-weight:bold; background-color:#3c3c3c; padding: 1px 3px; white-space:nowrap;}
.ap1 {color:#fff; font-weight:bold; background-color:#ff322e; padding: 1px 3px; white-space:nowrap;}
.ap1 a, a:hover{color:#fff;}
.deg1 {color:#fff; font-weight:bold; background-color:#7cacff; padding: 1px 3px; white-space:nowrap;}
.deg2 {color:#fff; font-weight:bold; background-color:#4390d3; padding: 1px 3px; white-space:nowrap;}
.deg3 {color:#fff; font-weight:bold; background-color:#2572b5; padding: 1px 3px; white-space:nowrap;}
.mix1 {color:#fff; font-weight:bold; background-color:#6db200; padding: 1px 3px; white-space:nowrap;}
.mix1 a, a:hover{color:#fff;}

.pre2 {color:#fff; background-color:#79ba1c; padding: 1px 3px; white-space:nowrap;}
.pre2 a, a:hover{color:#fff;}
.lt2 {color:#fff; background-color:#F90; padding: 1px 3px; white-space:nowrap;}
.lt2 a, a:hover{color:#fff;}
.sc2 {color:#fff; background-color:#00a6b9; padding: 1px 3px; white-space:nowrap;}
.sc2 a, a:hover{color:#fff;}
.ad2 {color:#fff; background-color:#e60012; padding: 1px 3px; white-space:nowrap;}
.ad2 a, a:hover{color:#fff;}


.read { position:absolute; left:0; top:0; color:#fff; font-weight:bold; padding:5px;background-color:rgba(255,255,255,0.8);-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;}
.copyright {font-size: 12px; text-align:center; color:#fff; padding-top: 15px;  }
.red0{ color:#C00; font-weight: bold; margin-left : 6em; text-indent : -6em ;}
.red { color:#C00; padding: 0px 5px;}
.red2 { color:#f45a55; padding: 0px 5px; text-decoration: underline;}
.red3 { color:#C00; padding: 0px 2px;}
.yellow { color:#ffd163; padding: 0px 5px;}
.yellow2 { color:#ffd163; padding: 0px 5px; text-decoration: underline;}
.red_r1 { color:#fff; margin-right: 2px; background-color:#b70000; padding: 3px 3px 3px 5px;font-size: 13px; }
.red_r2 { font-size: 13px; line-height: 17px; color:#222; background-color:rgba(255,195,195,.8); padding: 3px 5px; margin: 2px 5px 2px 0px; display:inline-block;  }
.point1{ margin-left:10px;}

hr.hrstyle1 {
	border-top: 1px dashed #f49a00;
}
hr.hrstyle2 {
	border-top: 1px dashed #00a6b9;
}
hr.hrstyle3 {
	border-top: 1px dashed #e60012;
}

.many { padding: 0px 5px 0px 23px; margin-left: 10px; background-image:url(../images/icon_people.png); background-repeat:no-repeat;}
.like { padding: 0px 5px 0px 23px; margin-left: 10px; background-image:url(../images/icon_thumb.png); background-repeat:no-repeat;}
.dislike { padding: 0px 5px 0px 20px; margin-left: 10px; background-image:url(../images/icon_nothumb.png); background-repeat:no-repeat;}
.name { font-size: 21px; font-family: Georgia, Times, serif;  }
.name2 { font-size: 19px; font-family: Georgia, Times, serif; color:#fff;  }
.name3 { font-size: 19px; font-family: Georgia, Times, serif; color:#222; }
.name4 { font-size: 15px; font-family: Georgia, Times, serif; overflow:hidden;}
.intro {font-size: 17px; font-family: Georgia, Times, serif; line-height: 25px; color:#555b62; font-style:italic;}
.intro1 {font-size: 15px; line-height: 24px; color:#e7f1ff; font-style:italic; height: 200px;  min-width: 290px; overflow:auto;
            background:-moz-linear-gradient( center top, #428aca 5%, #215885 100% );
            background:-ms-linear-gradient( top, #428aca 5%, #215885 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#428aca', endColorstr='#215885');
            background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #428aca), color-stop(100%, #215885) );
            background-color:#428aca;
            scrollbar-arrow-color:#FFFFFF; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#CCCCCC; scrollbar-shadow-color:#666666; scrollbar-track-color:#333333; clear:both;}
.intro1::-webkit-scrollbar { width: 12px;}
.intro1::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.intro1::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #8d8d8d;}

.intro1b {font-size: 15px; line-height: 24px; color:#e7f1ff; font-style:italic; height: 420px;  min-width: 290px; overflow:auto;
            background:-moz-linear-gradient( center top, #428aca 5%, #215885 100% );
            background:-ms-linear-gradient( top, #428aca 5%, #215885 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#428aca', endColorstr='#215885');
            background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #428aca), color-stop(100%, #215885) );
            background-color:#428aca;
            scrollbar-arrow-color:#FFFFFF; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#CCCCCC; scrollbar-shadow-color:#666666; scrollbar-track-color:#333333; clear:both;}
.intro1b::-webkit-scrollbar { width: 12px;}
.intro1b::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.intro1b::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #8d8d8d;}

.intro2 {font-size: 15px; line-height: 24px; color:#e7f1ff; font-style:italic; height: 200px;  min-width: 290px; overflow:auto;
            background:-moz-linear-gradient( center top, #428aca 5%, #215885 100% );
            background:-ms-linear-gradient( top, #428aca 5%, #215885 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#428aca', endColorstr='#215885');
            background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #428aca), color-stop(100%, #215885) );
            background-color:#428aca;
            scrollbar-arrow-color:#FFFFFF; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#CCCCCC; scrollbar-shadow-color:#666666; scrollbar-track-color:#333333; clear:both;}
.intro2::-webkit-scrollbar { width: 12px;}
.intro2::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.intro2::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #8d8d8d;}
.intro3 {font-size: 16px; line-height: 24px; color:#a9b3c0; font-style:italic; height: 240px;  min-width: 290px; overflow:auto;
            scrollbar-arrow-color:#FFFFFF; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#CCCCCC; scrollbar-shadow-color:#666666; scrollbar-track-color:#333333;}
.intro3::-webkit-scrollbar { width: 12px;}
.intro3::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.intro3::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #8d8d8d;}

.intro3b {font-size: 16px; line-height: 24px; color:#a9b3c0; font-style:italic; height: 470px;  min-width: 290px; overflow:auto;
            scrollbar-arrow-color:#FFFFFF; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#CCCCCC; scrollbar-shadow-color:#666666; scrollbar-track-color:#333333;}
.intro3b::-webkit-scrollbar { width: 12px;}
.intro3b::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.intro3b::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #8d8d8d;}

.intro4 {font-size: 16px; line-height: 24px; color:#a9b3c0; height: 180px;  min-width: 290px; overflow:auto;
            scrollbar-arrow-color:#FFFFFF; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#CCCCCC; scrollbar-shadow-color:#666666; scrollbar-track-color:#333333;}
.intro4::-webkit-scrollbar { width: 12px;}
.intro4::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.intro4::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #8d8d8d;}

.intro5 {font-size: 16px; line-height: 24px; color:#a9b3c0; font-style:italic; height: 150px;  min-width: 290px; overflow:auto;
            scrollbar-arrow-color:#FFFFFF; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#CCCCCC; scrollbar-shadow-color:#666666; scrollbar-track-color:#333333;}
.intro5::-webkit-scrollbar { width: 12px;}
.intro5::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.intro5::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #8d8d8d;}

.intro5b {font-size: 16px; line-height: 24px; color:#a9b3c0; font-style:italic; height: 350px;  min-width: 290px; overflow:auto;
            scrollbar-arrow-color:#FFFFFF; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#CCCCCC; scrollbar-shadow-color:#666666; scrollbar-track-color:#333333;}
.intro5b::-webkit-scrollbar { width: 12px;}
.intro5b::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.intro5b::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #8d8d8d;}

.f_center { text-align:center;}

.tab-pane1 ul{ min-width: 290px;list-style:none; height: 390px; overflow:auto; margin-bottom: 10px;scrollbar-arrow-color:#FFFFFF; scrollbar-face-colorR:#CCCCCC; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#999999;
            scrollbar-3dlight-color:#CCCCCC; scrollbar-shadow-color:#666666; scrollbar-track-color:#333333;}
.tab-pane1 ul::-webkit-scrollbar { width: 12px;}
.tab-pane1 ul::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.tab-pane1 ul::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #8d8d8d;}


.talk { font-size:15px;margin: 0em 0em 0.5em 1.75em; text-indent : -3em ; color:#a9b3c0; border-bottom: #383838 solid 1px;  min-width: 250px;}
.talk2 { font-size:15px;margin: 0em 0em 0.1em 0.5em; text-indent : -3em ; color:#a9b3c0; border-bottom: #383838 solid 1px;  min-width: 250px; padding: 3px 0px;}
.pheight{ padding: 0px; margin: 2px 0px; clear:both;}
.pheight2{ margin-top:10px; float:right;}
.pheight3{ margin-top:10px;}
.pheight4{ margin:20px 5px 0px 0px; float:right;}
.clear { clear:both;}
.pright{float:right; margin: 5px 18px 0px 0px;}

.relatelist { list-style:none; color:#222; font-size:11px; width: 100%; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;}
.relatelist2 { list-style:none; color:#222; font-size:11px; width: 100%; overflow: hidden; padding-left:2px; }

.q1{color:#039; padding:3px 0px; font-weight:bold; font-size:16px;}
.q2{color:#039; padding:3px 0px; font-weight:bold; font-size:18px; line-height: 28px;}
.choice1{color:#0c7777; padding:2px; font-weight:bold; font-size:14px; line-height:15px;margin-left : 4em; 
text-indent : -4em ;}
.pcenter{ text-align:center;}

.chart_red1 { font-size: 15px; line-height: 15px; background-color:#F7464A; padding:0px 8px; margin-right: 8px;  }
.chart_red2 { font-size: 15px; line-height: 15px; background-color:#f36e71; padding:0px 8px; margin-right: 8px;  }
.chart_red3 { font-size: 15px; line-height: 15px; background-color:#f78f92; padding:0px 8px; margin-right: 8px;  }
.chart_gray1 { font-size: 15px; line-height: 15px; background-color:#4D5360; padding:0px 8px; margin-right: 8px;  }
.chart_blue1 { font-size: 15px; line-height: 15px; background-color:#2f78b6; padding:0px 8px; margin-right: 8px;  }
.chart_cyan1 { font-size: 15px; line-height: 15px; background-color:#00a6b9; padding:0px 8px; margin-right: 8px;  }
.chart_cyan2 { font-size: 15px; line-height: 15px; background-color:#47cede; padding:0px 8px; margin-right: 8px;  }
.chart_cyan3 { font-size: 15px; line-height: 15px; background-color:#72e4f1; padding:0px 8px; margin-right: 8px;  }
.chart_yellow1 { font-size: 15px; line-height: 15px; background-color:#ff9900; padding:0px 8px; margin-right: 8px;  }
.chart_green1 { font-size: 15px; line-height: 15px; background-color:#5c9c5c; padding:0px 8px; margin-right: 8px;  }
.chart_purple1 { font-size: 15px; line-height: 15px; background-color:#847ba4; padding:0px 8px; margin-right: 8px;  }
.chart_white1 { font-size: 15px; line-height: 15px; background-color:#c2c2c2; padding:0px 8px; margin-right: 8px;  }

#list {position: relative;} 
#list a, a:hover {color: #fff;}	 
#list.current {	color: #000; display: inline-block;	text-decoration: none;	background-color: #000;  }

.blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite;}
 @keyframes blink {
      to {visibility: hidden;}
    }
    @-webkit-keyframes blink {
      to {visibility: hidden;}
    }


/*-------------------------------------------------------------------------------------------
button
-------------------------------------------------------------------------------------------*/
.imgpadding {margin: 10px 2px 0px 0px;}
.imgpadding2 {margin: 0px 2px 0px 2px;}
.imgpadding3 {margin: 5px 0px 0px 10px;}
.imgpadding4 {margin: 5px 0px;}
.imgpadding5 {margin: 5px 8px 0px 0px;}
.imgpadding6 {margin: 0px 8px 5px 0px !important;}
.imgicon{width: 25px; height:auto;}
.imgicon2{width: 50px; margin-right:10px; height:auto;}
.imgperson{margin: -10px 1px 0px 0px; padding:0px; width: 30px; height:auto;}
.imgperson2{margin: 10px 2px 0px 0px; padding:0px; width: 30px; height:auto;}
.imgperson3{margin: -10px -15px 0px 0px; padding:0px; width: 30px; height:auto;}
.imgcourse{margin: 5px 5px 5px 0px; width: 125px; height:auto;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  -ms-border-radius: 4px;  -o-border-radius: 4px;  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);  border: 1px solid #CCC;}
.imgcourse2{margin: 5px 5px 5px 0px; width: 90px; height:auto;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  -ms-border-radius: 4px;  -o-border-radius: 4px;  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);  border: 1px solid #CCC;}
.imgleft{ float:left;}
.imgright{ float:right;}
.imgright2{ float:right; margin: 0px 5px;}
.hot{position: absolute; top: 5px; left: 2px;}

.imageleft2{
	float: left;
	margin: 10px 20px 10px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  border: 1px solid #CCC;
  transition:width 0.5s; -webkit-transition:width 0.5s; -moz-transition:width 0.5s; -o-transition:width 0.5s; -ms-transition:width 0.5s;  
}

.img-swap {cursor: pointer;}

.imageleft3{
   float: left;
   width: 80px;
   height:80px;
   margin: 5px 10px 5px 5px;
  -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%;  border-radius: 50%;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  border: 1px solid #CCC;
}

.imageleft4{
	float: left;
	width:135px; height:auto; max-height: 130px;
	margin: 10px 20px 10px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  border: 1px solid #CCC;  
}

.imgspace{margin: 0px 5px; float:left;}
.box1{ 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;}


.btntab01 {	font-size:15px; -webkit-border-radius: 5px 5px 0 0;	border-radius: 5px 5px 0 0;	padding:10px 15px; text-decoration:none;
	background-color:#abcaff; color:#084868; display:inline-block; float:left; margin:0px 2px;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff; -moz-box-shadow:inset 1px 1px 0px 0px #ffffff; box-shadow:inset 1px 1px 0px 0px #ffffff;}
.btntab01:hover { background-color:#cddefc; color:#1b75c3;}
.btntab01:active { position:relative; top:1px;}
.btntab01on{ font-size:15px; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;	padding:10px 15px; text-decoration:none;
	background-color:#2572b5; color:#fff; display:inline-block; float:left; margin:0px 2px;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff; -moz-box-shadow:inset 1px 1px 0px 0px #ffffff; box-shadow:inset 1px 1px 0px 0px #ffffff;}

.btntab02 {	font-size:15px; -webkit-border-radius: 5px 5px 0 0;	border-radius: 5px 5px 0 0;	padding:10px 15px; text-decoration:none;
	background-color:#abcaff; color:#084868; display:inline-block; float:right; margin:0px 2px;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff; -moz-box-shadow:inset 1px 1px 0px 0px #ffffff; box-shadow:inset 1px 1px 0px 0px #ffffff;}
.btntab02:hover { background-color:#cddefc; color:#1b75c3;}
.btntab02:active { position:relative; top:1px;}
.btntab02on{ font-size:15px; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;	padding:10px 15px; text-decoration:none;
	background-color:#2572b5; color:#fff; display:inline-block; float:right; margin:0px 2px;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff; -moz-box-shadow:inset 1px 1px 0px 0px #ffffff; box-shadow:inset 1px 1px 0px 0px #ffffff;}

.btn04 {
	font-size:12px;
	font-weight:normal;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #dcdcdc;
	padding:2px 6px;
	margin: 0px 2px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color:#ededed;
	color:#777777;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.btn04:hover {
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
    color:#777777;
}.btn04:active {
	position:relative;
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color:#ededed;
	color:#777777;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}
.btn04on {
	position:relative;
	background-color:#32ba76;
	font-size:12px;
	font-weight:normal;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #dcdcdc;
	padding:2px 6px;
	margin: 0px 2px;
	text-decoration:none;
	color:#fff;
	display:inline-block;
}
.btn04wrong {
	position:relative;
	background-color:#ff4545;
	font-size:12px;
	font-weight:normal;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #dcdcdc;
	padding:2px 6px;
	margin: 0px 2px;
	text-decoration:none;
	color:#fff;
	display:inline-block;
}

.btn-orange {
	font-weight:normal;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffa443), color-stop(100%, #ff7400) );
	background:-moz-linear-gradient( center top, #ffa443 5%, #ff7400 100% );
	background:-ms-linear-gradient( top, #ffa443 5%, #ff7400 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa443', endColorstr='#ff7400');
	background-color:#ff7400;
	color:#ffffff;
	display:inline-block;
	text-shadow:1px 1px 0px #ff7400;
	font-weight:bold;
}.btn-orange:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff7400), color-stop(100%, #ffa443) );
	background:-moz-linear-gradient( center top, #ff7400 5%, #ffa443 100% );
	background:-ms-linear-gradient( top, #ff7400 5%, #ffa443 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7400', endColorstr='#ffa443');
	background-color:#ffa443;
	color:#ffffff !important;
}.btn-orange:active {
	position:relative;
	top:1px;
}

.btn_teacher {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #dcdcdc;
	width: 150px; height:120px;
	text-indent: -999px;
	padding:0px;
	margin-top:20px;
	text-decoration:none;
	background-image:url(../images/teacherpic.jpg);
	background-repeat:no-repeat;
	display:inline-block;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.btn_teacher:hover {
	background-image:url(../images/teacherpic_hover.jpg);
	width: 150px; height:120px;
}.btn_teacher:active {
	position:relative;
	top:1px;
}

.oraldoc1 { width: 323px; height:293px; background-image:url(../images/oraldoc1.gif); background-repeat: no-repeat; display: inline-block; text-indent:-9999px; overflow: hidden;   }
.oraldoc1:hover {width: 323px; height:293px; background-image:url(../images/oraldoc1_hover.gif); background-repeat: no-repeat; overflow: hidden; }

.oraldoc2 { width: 323px; height:293px; background-image:url(../images/oraldoc2.gif); background-repeat: no-repeat; display: inline-block; text-indent:-9999px; overflow: hidden;   }
.oraldoc2:hover {width: 323px; height:293px; background-image:url(../images/oraldoc2_hover.gif); background-repeat: no-repeat; overflow: hidden; }

.oraldoc3 { width: 323px; height:293px; background-image:url(../images/oraldoc3.gif); background-repeat: no-repeat; display: inline-block; text-indent:-9999px; overflow: hidden;   }
.oraldoc3:hover {width: 323px; height:293px; background-image:url(../images/oraldoc3_hover.gif); background-repeat: no-repeat; overflow: hidden; }

/* ~~ 主題按鈕 ~~ */
.channel1 {width: 370px; height:190px; background-image:url(../images/topic_og.gif); display: inline-block; text-indent:-9999px; }
.channel1:hover {width: 370px; height:190px; background-image:url(../images/topic_og_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel2 {width: 370px; height:190px; background-image:url(../images/topic_life1.gif); display: inline-block; text-indent:-9999px; }
.channel2:hover {width: 370px; height:190px; background-image:url(../images/topic_life1_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel3 {width: 370px; height:190px; background-image:url(../images/topic_life2.gif); display: inline-block; text-indent:-9999px; }
.channel3:hover {width: 370px; height:190px; background-image:url(../images/topic_life2_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel4 {width: 370px; height:190px; background-image:url(../images/topic_life3.gif); display: inline-block; text-indent:-9999px; }
.channel4:hover {width: 370px; height:190px; background-image:url(../images/topic_life3_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel5 {width: 370px; height:190px; background-image:url(../images/topic_rx.gif); display: inline-block; text-indent:-9999px; }
.channel5:hover {width: 370px; height:190px; background-image:url(../images/topic_rx_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel6 {width: 370px; height:190px; background-image:url(../images/topic_so.gif); display: inline-block; text-indent:-9999px; }
.channel6:hover {width: 370px; height:190px; background-image:url(../images/topic_so_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel7 {width: 370px; height:190px; background-image:url(../images/topic_ej1.gif); display: inline-block; text-indent:-9999px; }
.channel7:hover {width: 370px; height:190px; background-image:url(../images/topic_ej1_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel8 {width: 370px; height:190px; background-image:url(../images/topic_ej2.gif); display: inline-block; text-indent:-9999px; }
.channel8:hover {width: 370px; height:190px; background-image:url(../images/topic_ej2_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel9 {width: 370px; height:190px; background-image:url(../images/topic_use.gif); display: inline-block; text-indent:-9999px; }
.channel9:hover {width: 370px; height:190px; background-image:url(../images/topic_use_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel10 {width: 370px; height:190px; background-image:url(../images/topic_hl.gif); display: inline-block; text-indent:-9999px; }
.channel10:hover {width: 370px; height:190px; background-image:url(../images/topic_hl_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel11 {width: 370px; height:190px; background-image:url(../images/topic_et1.gif); display: inline-block; text-indent:-9999px; }
.channel11:hover {width: 370px; height:190px; background-image:url(../images/topic_et1_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel12 {width: 370px; height:190px; background-image:url(../images/topic_et2.gif); display: inline-block; text-indent:-9999px; }
.channel12:hover {width: 370px; height:190px; background-image:url(../images/topic_et2_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel13 {width: 370px; height:190px; background-image:url(../images/topic_tc1.gif); display: inline-block; text-indent:-9999px; }
.channel13:hover {width: 370px; height:190px; background-image:url(../images/topic_tc1_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel14 {width: 370px; height:190px; background-image:url(../images/topic_tc2.gif); display: inline-block; text-indent:-9999px; }
.channel14:hover {width: 370px; height:190px; background-image:url(../images/topic_tc2_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel15 {width: 370px; height:190px; background-image:url(../images/topic_pe1.gif); display: inline-block; text-indent:-9999px; }
.channel15:hover {width: 370px; height:190px; background-image:url(../images/topic_pe1_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel16 {width: 370px; height:190px; background-image:url(../images/topic_pe2.gif); display: inline-block; text-indent:-9999px; }
.channel16:hover {width: 370px; height:190px; background-image:url(../images/topic_pe2_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel17 {width: 370px; height:190px; background-image:url(../images/topic_lk1.gif); display: inline-block; text-indent:-9999px; }
.channel17:hover {width: 370px; height:190px; background-image:url(../images/topic_lk1_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel18 {width: 370px; height:190px; background-image:url(../images/topic_lk2.gif); display: inline-block; text-indent:-9999px; }
.channel18:hover {width: 370px; height:190px; background-image:url(../images/topic_lk2_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel19 {width: 370px; height:190px; background-image:url(../images/topic_at.gif); display: inline-block; text-indent:-9999px; }
.channel19:hover {width: 370px; height:190px; background-image:url(../images/topic_at_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel20 {width: 370px; height:190px; background-image:url(../images/topic_ew.gif); display: inline-block; text-indent:-9999px; }
.channel20:hover {width: 370px; height:190px; background-image:url(../images/topic_ew_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel21 {width: 370px; height:190px; background-image:url(../images/topic_job.gif); display: inline-block; text-indent:-9999px; }
.channel21:hover {width: 370px; height:190px; background-image:url(../images/topic_job_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel22 {width: 370px; height:190px; background-image:url(../images/topic_tech.gif); display: inline-block; text-indent:-9999px; }
.channel22:hover {width: 370px; height:190px; background-image:url(../images/topic_tech_on.gif); display: inline-block; ; text-indent:-9999px; }
.channel23 {width: 370px; height:190px; background-image:url(../images/topic_bu.gif); display: inline-block; text-indent:-9999px; }
.channel23:hover {width: 370px; height:190px; background-image:url(../images/topic_bu_on.gif); display: inline-block; ; text-indent:-9999px; }

/*.online {width: 195px; height:140px; background-image:url(../images/online_pic.png); display: inline-block; text-indent:-9999px; }
.online:hover {width: 195px; height:140px; background-image:url(../images/online_pic_hover.png); display: inline-block; ; text-indent:-9999px; }*/

/* ~~ 表單按鈕 ~~ */
input.type1 {border:0; padding:2px; font-size:14px; border:solid 1px #ccc; background-color:#002133; color:#fff; border: solid #1e2023 1px; 
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}
input.type2 {border:0; padding:2px; font-size:14px; border:solid 1px #ccc; background-color:#787f8b; color:#fff; border: solid #1e2023 1px; 
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}
input.type2::-webkit-input-placeholder { color: #fff; /* WebKit browsers */}
input.type2:-moz-placeholder { color: #fff; /* Mozilla Firefox 4 to 18 */}
input.type2::-moz-placeholder { color: #fff; /* Mozilla Firefox 19+ */}
input.type2:-ms-input-placeholder { color: #fff; /* Internet Explorer 10+ */}
textarea.type2 {border:0; padding:2px; font-size:14px; border:solid 1px #ccc; background-color:#929aa9; color:#fff; border: solid #1e2023 1px; 
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}
textarea.type2::-webkit-input-placeholder { color: #fff; /* WebKit browsers */}
textarea.type2:-moz-placeholder { color: #fff; /* Mozilla Firefox 4 to 18 */}
textarea.type2::-moz-placeholder { color: #fff; /* Mozilla Firefox 19+ */}
textarea.type2:-ms-input-placeholder { color: #fff; /* Internet Explorer 10+ */}
button.type1{background-color:#2d3035; padding: 5px; }
select.type1 {border:0; padding:2px; font-size:14px; color:#3b5835; border:solid 1px #ccc; margin:0 0 5px; width:206px; font-family: 微軟正黑體;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: auto;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}	
input.type3 {margin: 0px 10px;}

/* ~~ 表格 ~~ */
table#calendar { width: 98%; border: 1px solid #999; border-collapse: collapse;  font-family: Georgia, Times, serif; }
table#calendar th {  font-size: 70%; text-transform: uppercase; text-align:center; background-color:#727b84; color:#fff;padding: 5px;  }
table#calendar td {
	border: 1px solid #c5c5c5;
	height: 10em;
	width:6em;
	padding: 3px;
	vertical-align: top;
	overflow:auto;
	text-align: center;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #00376e;
	font-weight:bold;
}
table#calendar caption { font-size: 200%;background-color:#727b84; line-height:210%;  }
table#calendar .day { text-align: right; color:#222;  }
table#calendar .weekend { text-align: right; }
table#calendar .weekend1 { background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#dddddd 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#dddddd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */ }
table#calendar .dayoff { color: #adadad;text-align: right; }
table#calendar .month { font-style:italic; padding: 0px 2em; color: #fff;  }
table#calendar .notes {font-family: Arial, Helvetica, sans-serif; font-size: 80%; text-align: left; border-bottom:rgba(230, 255, 255, 0.5) dotted 1px; padding:3px 0px 2px 0px ; clear: both; font-weight:bold; color:#222; }
table#calendar .pop {font-family: Arial, Helvetica, sans-serif; font-size: 80%; text-align: left; border-bottom:rgba(170, 170, 170, 0.6) dotted 1px; padding-bottom:5px; }
table#calendar .event { white-space:nowrap; }
table#calendar .today{ text-align: right; background-color: #d9ffbf;}
table#calendar .p1{ background-color: #c7ebff;}
table#calendar .p2{ background-color: #d5d5d5;}
table#calendar .p3{ background-color: #e4b6b7;}

table#a1 { width: 100%; min-width: 280px; margin: 0px; padding: 0px; border-collapse: collapse; }
table#a1 th, table#a1 td { padding: 0px;border-bottom: 1px solid #383838; }
table#a1 .icon{ text-align: right; padding-right:5px;}

table#a2 { width: 95%; margin: 0px; padding: 0px; border-collapse: collapse; }
table#a2 th, table#a2 td { padding: 0px;border-bottom: 1px solid #bbbbbb; }

table#a2-1 { width: 95%; margin: 0px; padding: 0px; border-collapse: collapse; }
table#a2-1 th, table#a2-1 td { padding: 5px 0px;border:none; }

table#a3 { width: 100%; margin: 0px; padding: 0px; border-collapse: collapse; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;}
table#a3 th { text-align: left; background-color:#dedede;   }
table#a3 td { font-size: 15px;	color: #333333; text-align: left; vertical-align:middle; padding: 5px 3px; border-bottom: 1px solid #CCCCCC;  }
table#a3 tr:hover td{ background-color:rgba(191, 173, 159, 0.2); }
table#a3 tr:nth-child(odd){background-color:#fff;}
table#a3 tr:nth-child(even){background-color:#fff;}

table#a33 { width: 100%; margin: 0px; padding: 0px; border-collapse: collapse; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;}
table#a33 th { text-align: left; background-color:#dedede;  }
table#a33 td { font-size: 15px;	color: #333333; text-align: left; vertical-align:middle; padding: 5px 3px; border-bottom: 1px solid #CCCCCC;  }
table#a33 tr:hover td{ background-color:rgba(191, 173, 159, 0.2); }
table#a33 tr:nth-child(odd){background-color:#fff;}
table#a33 tr:nth-child(even){background-color:#fff;}

table#a4 { width: 100%; margin: 0px; padding: 0px; border-collapse: collapse; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;}
table#a4 th { text-align: center; }
table#a4 td { font-size: 15px;	color: #333333; text-align: left; vertical-align:middle; padding: 3px;   }
table#a4 tr:hover td{ background-color:rgba(191, 173, 159, 0.2); }
table#a4 tr:nth-child(odd){background-color:#fff;}
table#a4 tr:nth-child(even){background-color:#fff;}

table#a5 { width: 100%; margin: 0px; padding: 0px; border-collapse: collapse; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;}
table#a5 th { text-align: left; background-color:#dedede; padding: 8px 3px;  border-bottom: 1px solid #fff; }
table#a5 td { font-size: 15px;	color: #333333; text-align: left; vertical-align:middle; padding: 8px 3px; border-bottom: 1px solid #CCCCCC;  }
table#a5 tr:hover td{ background-color:rgba(191, 173, 159, 0.2); }
table#a5 tr:nth-child(odd){background-color:#fff;}
table#a5 tr:nth-child(even){background-color:#fff;}

table#a6 { width: 100%; margin: 0px; padding: 0px; border-collapse: collapse; }
table#a6 th { text-align: left; background-color:#dedede; padding: 3px;  }
table#a6 td { font-size: 15px;	color: #333333; text-align: left; vertical-align:top; padding: 3px;  }


table#progress{ width: 98%; border: 1px solid #999; border-collapse: collapse; font-size: 14px; }
table#progress th {   text-align:center; background-color:#727b84; color:#fff;padding: 5px; line-height: 25px; 	font-weight:normal;}
table#progress td {
	border: 1px solid #c5c5c5;
	width:auto;
	padding: 3px 8px 3px 3px;
	vertical-align: middle;
	overflow:auto;
	text-align: center;
	color: #00376e;
}
table#progress .plt{  background-color: #ff7200;text-align: center; color: #fff; }
table#progress .psc{  background-color: #00a6b9;text-align: center; color: #fff; }
table#progress .pad{  background-color: #d81418;text-align: center; color: #fff; }
table#progress .plt_h1{ background-color: #f76f01; line-height: 18px; }
table#progress .psc_h1{ background-color: #008da7; line-height: 18px;}
table#progress .pad_h1{ background-color: #c30105; line-height: 18px;}
table#progress .plt_light{  background-color: #ffc56e;text-align: right; color: #222;   }
table#progress .psc_light{  background-color: #b1ebf2;text-align: right; color: #222;   }
table#progress .pad_light{  background-color: #ffd3d4;text-align: right; color: #222;  }
table#progress .light1{  background-color: #e1eaf4;}
table#progress .light2{  background-color: #c1d1e3;}

/* ~~ 固定表格 ~~ */
 
.td
{
nowrap:'true';
}
 
div.tableContainer {
clear: both;
height: 400px;
overflow: auto;
width: 100%;
}
 
/* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */
html div.tableContainer/* */ {
padding: 0 8px 0 0
}
 
/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
html div.tableContainer {
height: auto;
padding: 0;
width: 100%;
}
 
/* Reset overflow value to hidden for all non-IE browsers. */
/* Filter out Opera 5.x/6.x and MacIE 5.x                  */
head:first-child+body div[class].tableContainer {
height: 400px;
overflow: hidden;
width: 100%;
}
 
/* define width of table. IE browsers only                 */
/* if width is set to 100%, you can remove the width       */
/* property from div.tableContainer and have the div scale */
div.tableContainer table {
float: left;
width: 100%
}
 
/* WinIE 6.x needs to re-account for padding. Give it a negative margin */
html div.tableContainer table/* */ {
margin: 0 -8px 0 0
}
 
/* define width of table. Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer table {
float: none;
margin: 0;
width: 100%;
}
 
/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body div[class].tableContainer table {
width: 100%;
}
 
/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative;
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution      */
top: expression(document.getElementById("tableContainer").scrollTop)
}
 
/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */
head:first-child+body thead[class].fixedHeader tr {
display: block
}
 
/* make the TH elements pretty */
thead.fixedHeader th {
background: #dedede;
font-weight: bold;
padding: 4px 1px;
text-align: left;
}
 
/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}
 
/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}
 
/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
/* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */
head:first-child+body tbody[class].scrollContent {
display: block;
height: 360px;
overflow: auto;
width: 100%
}
 
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: 1px solid #EEE;
border-top: 1px solid #AAA;
padding: 2px 1px
}
 
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: 1px solid #EEE;
border-top: 1px solid #AAA;
padding: 2px 1px
}
 
/* define width of TH elements: 1st, 2nd, and 3rd respectively.      */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding                         */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */
head:first-child+body thead[class].fixedHeader th {
width: 300px
}
 
head:first-child+body thead[class].fixedHeader th + th {
width: 300px
}
 
head:first-child+body thead[class].fixedHeader th + th + th {
border-right: none;
width: 300px
}
 
/* define width of TH elements: 1st, 2nd, and 3rd respectively.      */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding                         */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */
head:first-child+body tbody[class].scrollContent td {
width: 300px
}
 
head:first-child+body tbody[class].scrollContent td + td {
width: 300px
}
 
head:first-child+body tbody[class].scrollContent td + td + td {
border-right: none;
width: 300px
 
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
top: expression(document.getElementById("tableContainer").scrollTop)
}



/* 卷軸table @group Reset */

.fht-table,
.fht-table thead,
.fht-table tfoot,
.fht-table tbody,
.fht-table tr,
.fht-table th,
.fht-table td {
	/* position */
    margin: 0;
    
    /* size */
	padding: 0;

	/* text */
	font-size: 100%;
	font: inherit;
	vertical-align: top;
	}

.fht-table {
	/* appearance */
    border-collapse: collapse;
    border-spacing: 0;
	}

/* @end */

/* @group Content */

.fht-table-wrapper,
.fht-table-wrapper .fht-thead,
.fht-table-wrapper .fht-tfoot,
.fht-table-wrapper .fht-fixed-column .fht-tbody,
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
	/* appearance */
	overflow: hidden;
	
	/* position */
	position: relative;
	}

	.fht-table-wrapper .fht-fixed-body .fht-tbody,
	.fht-table-wrapper .fht-tbody {
		/* appearance */
	    overflow: auto;
		}

		.fht-table-wrapper .fht-table .fht-cell {
			/* appearance */
			overflow: hidden;
			
			/* size */
		    height: 1px;
			}
	
	.fht-table-wrapper .fht-fixed-column,
	.fht-table-wrapper .fht-fixed-body {
	    /* position */
	    top: 0;
	    left: 0;
	    position: absolute;
	    }
	    
	.fht-table-wrapper .fht-fixed-column {
	    /* position */
	    z-index: 1;
	    }
.fht-thead {background-color:#dedede; padding:3px;}	

/* @end */

.svg-item {
    width: 100%;
    font-size: 16px;
    margin: 0 auto;
    animation: donutfade 1s;
}

@keyframes donutfade {
  /* this applies to the whole svg item wrapper */
    0% {
        opacity: .2;
    }
    100% {
        opacity: 1;
    }
}

@media (min-width: 992px) {
    .svg-item {
        width: 80%;
    }
}

.donut-ring {
    stroke: #EBEBEB;
}

.donut-segment {
    transform-origin: center;
    stroke: #FF6200;
}

.donut-segment-2 {
    stroke: #ce2621;
    animation: donut1 3s;
}

.donut-segment-3 {
    stroke: #d9e021;
    animation: donut2 3s;
}

.donut-segment-4 {
    stroke: #ed1e79;
    animation: donut3 3s;
}

.segment-1{fill:#ccc;}
.segment-2{fill:#ce2621;}
.segment-3{fill:#d9e021;}
.segment-4{fill:#ed1e79;}

.donut-percent {
    animation: donutfadelong 1s;
}

@keyframes donutfadelong {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes donut1 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 69, 31;
    }
}

@keyframes donut2 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 30, 70;
    }
}

@keyframes donut3{
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 1, 99;
    }
}

.donut-text {
    font-family: Arial, Helvetica, sans-serif;
    fill: #ce2621;
}
.donut-text-1 {
    fill: #ce2621;
}
.donut-text-2 {
    fill: #d9e021;
}
.donut-text-3 {
    fill: #ce2621;
}

.donut-label {
    font-size: 0.28em;
    font-weight: 700;
    line-height: 1;
    fill: #000;
    transform: translateY(0.25em);
}

.donut-percent {
    font-size: 0.5em;
    line-height: 1;
    transform: translateY(0.5em);
    font-weight: bold;
}

.donut-data {
    font-size: 0.18em;
    line-height: 1;
    transform: translateY(0.5em);
    text-align: center;
    text-anchor: middle;
    color:#666;
    fill: #666;
    animation: donutfadelong 1s;
}




/* ---------- */
/* just for this presentation */
.svg-layout { text-align:center; }
.svg-item {
  max-width:30%;
  display:inline-block;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 801px) {
.logosize{padding-left: 2%; background-image:url(../images/logo.png); width: 220px; height: 48px; }	
}

@media (max-width: 800px) {
.logosize{padding-left: -2%; background-image:url(../images/logo_small.png); width: 60px; height: 48px; }	
}

@media (min-width: 680px) {
.topbanner_in { float:right; width: auto; height:100px; text-align:right;}
}

@media (max-width: 679px) {
.topbanner_in { display: none;}
}