@charset "utf-8";



/*

	Site Name: 

	Description: initial setting

	Version: 

	Author: 

*/



/*

===== CONTENTS ===========================================



	1: CONTAINER

	2: HEADER

	3: FOOTER

	4: NAVIGATION

	5: MAIN CONTENT



==========================================================

*/





/* CLEAR FIX*/

.clearfix:after {content: ".";

	display: block;

	height: 0;

	clear: both;

	visibility: hidden;}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/

* html .clearfix { height: 0%;}

.clearfix {display: block;}

/* End hide from IE-mac */





*/

.pagetop{

	text-align:right;

	padding:10px;

	clear: both;

	width: 730px;

	margin-right: auto;

	margin-left: auto;

}



/*

===== 1: CONTAINER ==========================================

*/

div#container {

	width:800px;

	background-color: #FFFFFF;

	margin-top: 0;

	margin-right: auto;

	margin-left: auto;

	border-right-width: 1px;

	border-left-width: 1px;

	border-right-style: solid;

	border-left-style: solid;

	border-right-color: #CCCCCC;

	border-left-color: #CCCCCC;

	background-image: url(img/containerbg.jpg);

	min-height: 100%;

	height: 100%;

	height: auto;

}

div#container .left{

	background-image: url(img/left_bg.jpg);

	background-repeat: no-repeat;

	width: 800px;

	min-height:500px;

	padding-bottom: 40px;

}

/*

===== 2: HEADER ==========================================

*/

div#header{

	width: 675px;

	margin-left: 125px;

	height: 113px;

	background-image: url(img/headbg.jpg);

	background-repeat: no-repeat;

}

div#header h1{
	font-size: 10px;
	line-height: normal;
	text-align: right;
	padding-top: 98px;
	padding-right: 1px;
	color: #FFF;
	font-weight: bold;

}

/*

===== 3: FOOTER ==========================================

*/

div#footer{

	font-size: 11px;

	color: #666666;

	text-align: center;

	clear: both;

	width: 800px;

	margin-right: auto;

	margin-left: auto;

	position: relative;

	bottom: 0px;

}

div#footer  span{

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	border-top-width: 1px;

	border-top-style: solid;

	border-top-color: #999999;

	text-align: center;

	line-height: auto;

	margin-left: 130px;

	display: block;

	width: 660px;

}

/*



/*

===== 4: NAVIGATION ======================================

*/

div#nav{

	width:675px;

	margin-left: 125px;

	background-image: url(img/menu_a.jpg);

	height: 48px;

	background-repeat: no-repeat;

}

div#nav  a  p{

	visibility: hidden;

}

div#nav a{

	display: block;

	height: 48px;

}

div#nav a:link{

}

div#nav a:active,div#nav a:visited{

}

div#nav a:hover{

}



div#nav .list{

}

div#nav ul{

}

div#nav li{

	float: left;

}

div#nav .top a{

	width: 100px;

	margin-left: 30px;

}

div#nav .top a:hover{

	background-image: url(img/menu_b.jpg);

	background-repeat: no-repeat;

	background-position: -30px 0px;

}

div#nav .lesson a{

	width: 130px;

}

div#nav .lesson a:hover{

	background-image: url(img/menu_b.jpg);

	background-repeat: no-repeat;

	background-position: -130px 0px;

}

div#nav .contact a{

	width: 120px;

}

div#nav .contact a:hover{

	background-image: url(img/menu_b.jpg);

	background-repeat: no-repeat;

	background-position: -260px 0px;

}

div#nav .news a{

	width: 90px;

}

div#nav .news a:hover{

	background-image: url(img/menu_b.jpg);

	background-repeat: no-repeat;

	background-position: -380px 0px;

}

div#nav .gallery a{

	width: 90px;

}

div#nav .gallery a:hover{

	background-image: url(img/menu_b.jpg);

	background-repeat: no-repeat;

	background-position: -470px 0px;

}

div#nav .blog a{

	width: 90px;

}

div#nav .blog a:hover{

	background-image: url(img/menu_b.jpg);

	background-repeat: no-repeat;

	background-position: -560px 0px;

}

/*

===== 5: MAIN CONTENT ====================================

*/

#main{

	width:660px;

	padding: 0px;

	margin-left: 130px;

}



/*

---TOP---

*/

#main .top{
	width: 660px;
	margin-right: auto;
	margin-left: auto;



}

#main .top h2{
	clear: both;
	margin-top: 20px;

}

#main .top h3{

	margin-top: 10px;

	font-size: 12px;

	line-height: 150%;

	width: 580px;

	margin-left: 20px;

	height: 150px;

	clear: both;

}

#main  .top  h3  .rightpic{

	float: right;

	margin-left: 10px;

}

#main  .top  h3  .rightpic  img{

	border: 1px solid #CCCCCC;

}

#main  .top  h3  .lefttxt{

	font-size: 14px;

}



/*sec*/



#main .sec{

	width: 600px;

	margin-right: auto;

	margin-left: auto;

}



#main .sec h2{

	margin-top: 20px;

}



#main .sec h3{

	margin-top: 20px;

	background-image: url(img/caption_bg.jpg);

	background-repeat: no-repeat;

	height: 30px;

	font-size: 16px;

	line-height: 24px;

	text-indent: 25px;

	color: #000000;

	width: auto;

	margin-left: 20px;

	clear: both;

}



#main .sec h4{

	width: auto;

	margin-top: 10px;

	margin-left: 40px;

	font-size: 12px;

	line-height: 150%;

	color: #333333;

	clear: both;

}

#main   .sec   h4   .lefttxt{

	width: 380px;

	float: left;

}



#main .sec h4 .rightpic{

	float: right;

	width: 160px;

}



/*RSS config*/

#main #rss{

	width: 90%;

	clear: both;

	margin-left: 40px;

}

#main #rss p{

	line-height: normal;

}

#main #rss h3{

	margin-top: 20px;

	background-image: url(img/caption_bg.jpg);

	background-repeat: no-repeat;

	height: 30px;

	font-size: 16px;

	line-height: 24px;

	text-indent: 25px;

	color: #000000;

	width: auto;

	margin-left: -20px;

}



#main #rss h4{

	margin-top: 20px;

	background-image: url(img/caption_bg2.jpg);

	background-repeat: no-repeat;

	height: 30px;

	font-size: 16px;

	line-height: 24px;

	text-indent: 25px;

	color: #000000;

	width: auto;

	margin-left: -20px;

}

#main #rss h5{

	margin-top: 20px;

	background-image: url(img/caption_bg3.jpg);

	background-repeat: no-repeat;

	height: 30px;

	font-size: 16px;

	line-height: 24px;

	text-indent: 25px;

	color: #666666;

	width: auto;

	margin-left: -20px;

}

#main #rss strong{

}



/* ----------- stylized form----------- */

.myform{

	width:550px;

	padding:10px;

	margin-right: auto;

	margin-bottom: 30;

	margin-left: auto;

	clear: both;

	height: 350px;

}



	#stylized_f{
	border:2px solid #CCCCCC;
	margin-top: 20px;
	background-color: #B8E2FA;

	}

	#stylized_f h1 {

		font-size:14px;

		font-weight:bold;

		margin-bottom:8px;

	}

	#stylized_f p{

		font-size:11px;

		color:#666666;

		margin-bottom:20px;

		border-bottom:solid 1px #b7ddf2;

		padding-bottom:10px;

	}

	#stylized_f label{
	display:block;
	font-weight:bold;
	text-align:right;
	width:140px;
	float:left;
	color: #5C60AA;

	}

	#stylized_f .small{

		color:#666666;

		display:block;

		font-size:14px;

		font-weight:normal;

		text-align:right;

		width:140px;

	}

	#stylized_f input{

	float:left;

	font-size:12px;

	padding:4px 2px;

	border:solid 1px #aacfe4;

	width:350px;

	margin:2px 0 20px 10px;

	}

	

	



	

	#stylized_f	textarea{

	float:left;

	font-size:12px;

	padding:4px 2px;

	border:solid 1px #aacfe4;

	width:350px;

	margin:2px 0 20px 10px;

	}

#stylized_f  .button{
	clear:both;
	margin-left:150px;
	width:200px;
	height:40px;
	text-align:center;
	line-height:31px;
	color:#FFFFFF;
	font-size:14px;
	font-weight:bold;
	background-color: #5C60AA;
	border-radius: 5px;

	}

	#stylized_f h5{
	font-size: 14px;
	line-height: 150%;
	text-align: center;
	color: #5C60AA;

	}



/*--lesson setting----*/





#main .lessontable em{

	color: #FF3300;

	font-style: normal;

	font-weight: bold;

	font-size: 12px;

}

#main .lessontable .note {
	margin-left: 20px;
	font-size: 10px;

}





#main .lessontable table	{

	border-collapse: collapse;

	border-spacing: 0;

	border: 1px solid #CCCCCC;

	margin-top: 10px;

	width: 580px;

	margin-left: 20px;

}

#main .lessontable tbody {

	font-size: 12px;

}

#main   .lessontable   th,td 	{

	padding: 5px;

	color: #000000;

	border: 1px solid #CCCCCC;

	text-align: center;

}

#main .lessontable td	{



}



#main .lessontable th	{

	border-top-width: 1px;

	border-bottom-width: 2px;

	border-top-style: solid;

	border-bottom-style: solid;

	border-top-color: #CCCCCC;

	border-bottom-color: #0F437F;

	background-color: #CAE5F1;

	background-image: url(img/th.jpg);

	background-repeat: repeat-x;

	font-weight: normal;

	white-space: nowrap;

	text-align: center;

}

#main .lessontable .aline{

	background-color: #FFFF66;

}

#main .lessontable .bline{

	background-color: #FFFF99;

}

#main .lessontable .cline{

	background-color: #FFFFCC;

}

#main .lessontable .br{

	background-color: #DDDDDD;

}

#main .lessoncap{

	margin-left: 20px;

	margin-top: 5px;

	clear: both;

	height: 120px;

}

#main .lessoncap dl{
	width: 127px;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	padding: 5px;
	border: 1px solid #FB9E03;
	background-color: #FFFF99;

}

#main .lessoncap dt{

	font-size: 12px;

	font-weight: bold;

	text-align: center;

	color: #0000FF;

	font-family: Arial, Helvetica, sans-serif;

}

#main .lessoncap dd{

	font-size: 12px;

	text-align: center;

}