@charset "utf-8";

/* -------General------- */
@font-face{
  font-family: 'thaisans';
  src: url('font/thaisanslite_r1.otf');
}
header, section, footer, aside, nav, article, figure{ 
	display: block; 
	background: #FFF;
}
ul{
	margin: 0;
}
.left{
	float: left;
}
.right{
	float: right;
}
.center{
	text-align: center;
}
.button{
	background-color: #CCC;
	padding: 5px;
	color: #666;
	border: none;
}
.box-border {
	border: 1px solid #CCC;
	margin: 1em 0;
	border-radius: 0.2em;
}
/* CSS Document */
body{
	font: Helvetica sans-serif;
	color: #444;
	background: url(../images/bg_multiply.gif);
	background-size: 90px;
	/*background: #6FB3F7;*/
	/*background: #89BABE;*/
	margin: 0;
}
.wrapper{
	background: #FFF;
	box-shadow: 0px 0px 20px 0.3px #909290;
}
#content{
	padding-top: 1em;
}
.box{
	clear: both;
}
h1, h2, h3, h4, h5, h6{
	font-family: 'thaisans';
	letter-spacing: 0.08em;
}
h1{
	font-size: 2em;
}
h2{
	font-size: 1.8em;
}
h3{
	font-size: 1.6em;
}
.nopad{
	padding: 0px !important;
}

#landing #enter img{
	width: 28%;
	margin: 1em 0;
}
#landingbox{
	padding-top: 0.5em;
}

.button-section{
	display: block;
	text-align: center;
}
a.enter-to-web{
	padding: 10px 30px;
	background: #B4D8FE;
	opacity: 1;
	font-size: 22px;
	text-decoration: none;
	color: #E04D05;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	-webkit-box-shadow: 0px -4px 7px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow:    0px -4px 7px 0px rgba(50, 50, 50, 0.3);
box-shadow:         0px -4px 7px 0px rgba(50, 50, 50, 0.3);
}
a.enter-to-web:hover{
	background: #CFE6FE;
}
.mainContent{
	overflow: hidden;
	clear: both;
	margin: 0 20px;
	background: #FFF;
	border-radius: 0 0 10px 10px;
}
.leftSide{
	padding:1em 0em;
	margin: 0.5em;
}
.leftSide > li{
	display: block;
	list-style: none;
	margin: 0.3em 0;
}
.leftSide > li a{
	text-decoration: none;
	color: #2C82A2;
	display: block;
	font-family: 'thaisans';
	line-height: 1.5em;
	font-size: 1.25em;
	letter-spacing: 0.08em;
}
.leftSide > li a:hover, .leftSide > li.active a{
	color: #FF8040;
}
.content{
	padding: 15px;
	min-height: 400px;
	overflow: hidden;
}
p, label{
	color: #444;
	line-height: 1.6em;
	font-size: 14px;
}
hr{
	background-color:#063;
	color:#063;
}
ul{
	list-style: none;
	padding: 0;
}
.bold{
	font-weight: bold;
}
.outlink{
	text-align: center;
	margin-left: 0;
	margin-top: 1em;
}
.outlink li{
	display: inline-block;
	margin-right: 20px
}
.outlink img{
	width: 160px;
}
.outlink li:nth-child(2) img{
	height: 90px;
	width: auto;
}
/* -------header------- */
.mainHeader {
	background: #FFF;
	border-radius: 10px 10px 0 0;
	z-index: 1;
	position: relative;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(5, 63, 80, 0.3);
	-moz-box-shadow:    0px 3px 3px 0px rgba(5, 63, 80, 0.3);
	box-shadow:         0px 3px 3px 0px rgba(5, 63, 80, 0.3);
}
.mainHeader .logo{
	clear: both;
	padding: 1em;	
}
.mainHeader .logo img{
	max-width: 250px;
}
.mainHeader .basicmatters{
	font-family: 'thaisans';
	letter-spacing: 0.08em;
	font-size: 1.4em;
	position: absolute;
	bottom: 1em;
	right: 0;
}
ul.navigation{
	margin: 0;
	padding: 0;
	clear: both;
	overflow: hidden;
}
ul.navigation li{
	list-style: none;
	float: left;
	width: 16.667%;
	background: #2C82A2;
	text-align: center;
	display: inline-block;
}
ul.navigation li:hover, ul.navigation li.active{
	background: #2E89AB;
}
ul.navigation li a{
	color: #FFF;
	text-decoration: none;
	display: block;
	height: inherit;
	vertical-align: middle;
	padding: 0.3em 0;
	border-bottom: 0.3em solid #FFF;
	font-family: 'thaisans';
	font-size: 1.25em;
	letter-spacing: 0.08em;
}
ul.navigation li a:hover, ul.navigation li.active a{
	border-bottom: 0.2em solid #FFA23C;
	text-shadow: 2px 2px 2px rgba(20, 79, 60, 0.3);
}
ul.fourColumnBox{
	border: 8px solid #B3B3B3;
	padding: 22px;
	background-color: #E6E6E6;
	position: relative;
	margin: 0; 
}
ul.fourColumnBox li{
	list-style: none;
	display: inline-table;
	width: 223px;
	text-align: center;
	height: 243px;
	margin-left: 10px;
}
ul.fourColumnBox li a{
	display: inline-block;	
	position: relative;
	background-color: #CCC;
	height: inherit;
	width: inherit;
}
ul.fourColumnBox li a:hover{
	background: #B3B3B3;
}
ul.fourColumnBox li:first-child{
	margin-left: 0;
}
ul.fourColumnBox li > img{
	margin-top: 15px;
}

ul.fourColumnBox li .li_image{
	background: #999;
	width: 146px;
	height: 142px;
	display: inline-block;
}
ul.fourColumnBox li .li_logo{
	margin-top: 10px;
}

ul.fourColumnBox li .li_image img{
	height: inherit;
}
/* ---------Home--------- */
.contactBox{
	margin: 31px 0;
	clear: both;
	width: 999px;
}

.mainFooter .footeraddr p{
	text-align: center;
	margin: 1.2em 0;
	color: #FFF;
	font-family: 'thaisans';
	letter-spacing: 0.08em;
	font-size: 1.1em;
}
.mainFooter .footeraddr{
	margin: 0;
	padding: 0;
	background: #2E89AB;
	border-top: 0.3em solid lightblue;
	margin-top: 0.5em;
}
.home-question li{
	margin-left: 0.5em;
}
.home-question img{
	width: 20px;
	margin-right: 10px;
	vertical-align: bottom;
}
.home-question{
	margin: 0;
	margin-bottom: 1em;
}
.readmore-main {
	margin-bottom: 0.5em;
	display: block;
	text-align: right;
}
.news-box .readmore-main {
	background: #fef5eb;
	padding: 0.4em 0.5em;
}
.knowus {
	display: inline-block;
}
img.home-mascot{width: 6em; float: right; margin-top: -1.5em;}
#facebookLink{
	background: url("../images/footerRight.png") scroll 0 -2px transparent;
	width: 42px;
	height: 42px;
	display: inline-block;
}
#twitterLink{
	background: url("../images/footerRight.png") scroll 97px -2px transparent;
	width: 42px;
	height: 42px;
	display: inline-block;
}
#greenIcon{
	background: url("../images/footerRight.png") scroll 42px -2px transparent;
	width: 42px;
	height: 42px;
	display: inline-block;
}
.footerSep{
	width: 100%;
	height: 7px;
	background-color: #606060;
	clear: both;
	margin: 30px 0;
}
.mainFooter .copyRight{
	color: #333;
	margin-bottom: 47px;
	margin-top: 17px;
	font-size: 12px;
}
h1.content-header{
	color: #3F99A0;
}
h1.content-header span{
	color: #FF8040;
	font-size: 1.2em;
}
.tutor{
	position: relative;
	overflow: hidden;
	margin-left: 0;
	margin-top: 1em;
}
#main .tutor li{
	text-align: center;
	padding: 0 1em; 
	float: left;
	width: 20%;
}
.boxheader{
	color: #3F99A0;
	padding: 0 0.4em;
	background-color: #E1F5FD;
	border-left: 0.2em solid #FFA23C;
	border-bottom: 0.1em solid #ADD8E6;
}
.content-header{
	color: #3F99A0;
	padding-top: 7px;
	border-bottom: 2px solid lightblue;
}
.content-header.home{
	border: none;
}
.tutor li p{
	color: #6FB3F7;
	margin: 0.5em 0;
}
.tutor li img{
	width: 100px;
}
.tutor .tutor-name{
	font-family: 'thaisans';
	letter-spacing: 0.08em;
	font-size: 1.4em;
	color: #2E89AB;
	line-height: 1em;
}
.tutor .tutor-desc{
	color: #444;
}
.tutor .readmore{
	float: right;
	margin-bottom: 15px; 
	margin-right: 15px;
}
.tutor .readmore a{
	color: #3F99A0;
	font-size: 14px;
	text-decoration: none;
}
#aboutus .tutor ul li{
	text-align: center;
}
#aboutus .tutor ul li img{
	width: 70%;
	margin-top: 1em;
}
#aboutus .tutor .tutor-name{
	margin-bottom: 0;
}
#aboutus .tutor .tutor-desc{
	width: auto;
}
.tutor-img-box, .tutor-desc-box{
	display: inline-block;
	vertical-align: middle;
}
#contactus .contactus_header{
	margin-bottom: 0;
}
#contact-box{
	position: relative;
	padding: 2em 2em 1.5em;
	border: 3px solid #E1F5FD;
	border-width: 0 3px 3px;
}
#contact-box .row{
	display: block;
	margin: 10px 0;
}
#contact-box .row label, #contact-box input{
	line-height: 2em;
	height: 2em;
	display: inline-block;
}
#contact-box .row label{
	width: 14%;
	color: 
}
#contact-box input, #contact-box input:focus, #contact-box textarea{
	border: none;
	background: #B4D8FE;
	border-radius: 5px;
	padding: 0 5px;
}
#contactus .address, #page_contactus .map{
	display: inline-block;
	float: left;
	vertical-align: middle;
}
#contactus .address{
	width: 40%;
}
#contactus .map{
	width: 60%;
}
/* Teaching */
.subject{
	margin-top: 1em;
}
.content-header.box-inline{
	display: inline-block;
}
.fb_iframe_widget {
	margin: 1em 0;
}

/* Orbit Slider */
.orbit-container .orbit-slides-container li .orbit-caption{
	background: rgba(255,255,255,0.7);
	color: #2C82A2;
	font-family: 'thaisans';
	font-size: 1.2em;
	line-height: 1em;
	letter-spacing: 0.08em;
	text-align: center;
}

/* NEWS*/
#news h1 {
	padding: 0;
}
.news-box li:hover {
	background: #FEEFDA;
}
.news-box li {
	padding: 0.4em 0.7em;
	background: #FEF5EB;
	margin: 0.4em 0;
	border-radius: 0.4em;
}
.news-box li h3 {
	font-family: Helvetica sans-serif;
	font-size: 1.2em;
	letter-spacing: normal;
}
#main .news-box li h3 {
	font-weight: normal;
	font-size: 1.1em;
	color: grey;
}
#main .news-box li {
	margin: 0.1em 0;
	border-radius: 0;
}
#main .news-box .caption {
	margin-bottom: 0;
}
.news_header {
	line-height: 1em;
}
.news_date, .news_ref {
	color: #ffa23c;
	font-size: 1em;
	font-family: 'thaisans';
} 
.caption {
	margin-bottom: 1em;
}
.news-topic {
	color: #008cba;
	line-height: 1em;
}
.short-desc {
	margin: 0;
}
.news-list .caption {
	text-align: right;
	margin-bottom: 0;
}
@media only screen and (min-width: 64.063em){
	.main-box, .news-box {
		height: 332px;
	}
}
/* mobile only */
@media only screen and (max-width: 40em){
	#navigation{
		display: none;
	}
	#navigation li{
		width: 100%;
	}
	#navigation li a{
		border: none;
		padding: 0;
	}
	a.menu{
		background: #2C82A2;
		border-bottom: 0.2em solid #FFA23C;
		color: #FFF;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		font-family: 'thaisans';
		font-size: 1.4em;
		letter-spacing: 0.08em;
	}
	a.menu > i{
		font-size: 0.8em;
		margin-right: 0.3em;
	}
	.home-question{
		width: 100%;
	}
	.home-question li{
		list-style: disc;
	}
	.home-question li img{
		display: none;
	}
	.boxheader{
		font-size: 1.4em;
	}
	.tutor{
		margin-bottom: 0;
	}
	#main .tutor li{
		width: 50%;
		min-height: 12.5em;
	}
	.readmore{
		display: none;
	}
	#gotoTop{
		font-size: 2em;
		padding: 0.1em 0 0.2em;
		display: block;
		border: 1px solid #2E89AB;
		margin-top: 1em;
	}
	#content{
		padding: 0px !important;
	}
	#home-slider{
		margin: 0;
	}
	.orbit-container .orbit-slides-container li .orbit-caption{
		padding: 0.3em;
	}
	.mainHeader .logo{
		width: 100%;
		text-align: center;
	}
	.mainHeader .logo img{
		max-width: 225px;
	}
	.teachingcont{
		width: 100%;
	}
	#aboutus .tutor ul li{
		width: 100%;
		text-align: left;
		min-height: 0;
	}
	#aboutus .tutor-img-box {
		width: 35%;
		padding-right: 5%;
	}
	#aboutus .tutor-desc-box{
		width: 60%;
	}
	#aboutus .tutor ul li img{
		margin: 0;
		width: 100%;
		margin-top: 1em;
	}
	#contact-box{
		padding: 1em;
	}
	#contactus .address, #contactus .map{
		width: 100%;
		padding: 0 0.5em;
	}
	#landingbox{
		padding: 0;
	}
	#landing #enter{
		height: 100%;
	}
	#landing #enter img{
		width: 60%;
	}

}