/********************************************
MAIN SITE CENTER STYLE
*********************************************/
.wrapper_center {
	margin: 0 auto;
	/* margin-left: 80px; */
	/* width: 980px; */
	width: auto;
	padding-right: 50px;
	padding-left: 50px;
	
}
/********************************************
TOP
*********************************************/
#wrapper_top {
	margin: 0 auto;
	width: 100%;
	height: 120px;
	background: url(../images/bg_top.jpg) repeat-x left top;
	/*background: url(../images/clientsays_bg.jpg) repeat-x left top;*/
	
}
#top {
	width: 100%;
	height: 120px;
}
.logo {
	float: left;
	width: 250px;
	height: 120px;
	align: center;
	alignticket: none;
}


/********************************************
HEADER
*********************************************/
#wrapper_header {
	margin: 0 auto;
	width: 100%;
	height: 320px;
	float: left;
	background: url(../images/header_bg.jpg) no-repeat center top;
	
}

/********************************************
BODY
*********************************************/

#wrapper_body {
	margin: 0 auto;
	width: 100%;
	padding: 20px 0px 30px 0px;
	float: left;
	
}
.main_content {
	float: left;
	/*width: 585px; */
    width: auto;
    margin-right: 100px; /* Add by Hnoo */
}
.button_readmore {
	float: left;
	width: 300px;
	height: 27px;
}
.button_readmore a:link, .button_readmore a:visited {
	float: left;
	background: url(../images/but_readmore.jpg) no-repeat left top;
	font: normal 12px Tahoma, sans-serif;
	color: #727272;
	width: 80px;
	height: 21px;
	padding: 6px 0px 0px 10px;
	text-decoration: none;
}
.button_readmore a:hover {
	color: #454545;
}
.shadow_01 {
	float: left;
	background: url(../images/shadow_01.png) no-repeat left top;
	width: 585px;
	height: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.shadow_02 {
	float: left;
	background: url(../images/shadow_01.png) no-repeat left top;
	width: 585px;
	height: 10px;
	margin-bottom: 15px;
}
.shadow_03 {
	float: left;
	background: url(../images/shadow_01.png) no-repeat left top;
	width: 326px;
	height: 10px;
	margin-bottom: 10px;
}
.shadow_full {
	float: left;
	background: url(../images/shadow_full.jpg) no-repeat left top;
	width: 980px;
	height: 10px;
	margin-top: 15px;
}
.imgright {
	float: right;
}
.imgleft {
	float: left;
}
.imgcenter {
	display:block; margin-left: auto; margin-right: auto
}

.clear { 
	clear:both; 
}

/* ---------- Services ---------- */

.services {
	float: left;
	width: 585px;
}
.services_listspace {
	float: left;
	width: 25px;
	height: 200px;
}
.services ul {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 275px;
}
.services li {
	margin: 0px 0px 15px 0px;
	padding: 0px;
	width: 275px;
	height: 70px;
	list-style-type: none;
	float: left;
}
li.serlist_01 a {float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_01.jpg) no-repeat left top;}
li.serlist_01 a:hover {float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_01_hover.jpg) no-repeat left top;}

li.serlist_02 a { float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_02.jpg) no-repeat left top;}
li.serlist_02 a:hover {float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_02_hover.jpg) no-repeat left top;}

li.serlist_03 a { float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_03.jpg) no-repeat left top;}
li.serlist_03 a:hover {float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_03_hover.jpg) no-repeat left top;}

li.serlist_04 a { float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_04.jpg) no-repeat left top;}
li.serlist_04 a:hover {float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_04_hover.jpg) no-repeat left top;}

li.serlist_05 a { float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_05.jpg) no-repeat left top;}
li.serlist_05 a:hover {float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_05_hover.jpg) no-repeat left top;}

li.serlist_06 a { float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_06.jpg) no-repeat left top;}
li.serlist_06 a:hover {float: left; display: block; width: 275px; height: 70px; background: url(../images/serviceslist_06_hover.jpg) no-repeat left top;}

/* ---------- Content ---------- */
.main_detail ul {
	width:580px;
}
.main_detail li  { width:260px; float:left; }

.main_detail li {
	margin: 5px 0px;
	padding: 0px 0px 0px 30px;
	list-style-type: none;
	background: url(../images/icon_add.png) no-repeat left top;
}

.content {
	float: left;
	width: 585px;
	background: url(../images/bg_content.jpg) no-repeat left bottom;
}
.content h2{
	color: #FFF;
	padding: 7px 0px 7px 35px;
	background: url(../images/bg_content.jpg) no-repeat left top;
	height: 41px;
}
.content p {
	padding: 0px 20px;
}

.content ul {
	margin: 0px;
	padding: 0px 20px;
	line-height: 20px;
}
.content li {
	margin: 0px;
	padding: 0px 0px 0px 30px;
	list-style-type: none;
	background: url(../images/icon_apply.png) no-repeat left top;
}

.content2 {
	float: left;
	width: 585px;
	font-size: 12px;
}
.content2 ul {
	margin: 0px;
	padding: 0px;
}
.content2 li {
	margin: 0px 0px;
	padding: 0px 0px 0px 30px;
	list-style-type: none;
	background: url(../images/icon_add2.png) no-repeat left top;
	line-height: 20px;
}

.content3 {
	float: left;
	width: 585px;
	background: url(../images/bg_content.jpg) no-repeat left bottom;
}
.content3 h2{
	color: #FFF;
	padding: 7px 0px 7px 35px;
	background: url(../images/bg_content.jpg) no-repeat left top;
	height: 41px;
}
.content3 h3{
	color: #FFF;
	padding: 10px 0px 0px 35px;
	background: url(../images/bg_content.jpg) no-repeat left top;
	height: 41px;
	font-size: 16px;
}

.content3 p {
	padding: 0px 20px;
}
.content3 ul {
	margin: 0px;
	padding: 0px 20px 0px 40px;
}

.content3 li {
	list-style-type: disc;
	line-height: 20px;
}

.content4 {
	float: left;
	width: 585px;
	background: url(../images/bg_content.jpg) no-repeat left bottom;
}
.content4 h2{
	color: #FFF;
	padding: 7px 0px 7px 35px;
	background: url(../images/bg_content.jpg) no-repeat left top;
	height: 41px;
	font-size: 18px;
}

.content4 p {
	padding: 0px 20px;
	text-indent: 3em;
}
.content4 ul {
	list-style-type: disc;
	margin: 0px;
	padding: 0px 20px 0px 80px;
}
.content4 ol {
	margin: 0px;
	padding: 0px 20px 0px 80px;
}
.content4 il {
	line-height: 20px;
}


.portfolio {
	float: left;
	width: 195px;
	margin-top: 10px;
	text-align: center;
}
.portfolio_text {
	float: right;
	width: 195px;
}

.portfolio_text p {
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	margin: 0px;
	padding: 0px;
}

/********************************************
SIDEBAR
*********************************************/
#sidebar {
	float: left;
	width: 329px;
	padding-left: 66px;
	padding-top: 32px;
	background: url(../images/sidebar_bg.png) no-repeat left top;
}

/* ---------- What's New ---------- */

.whatsnew {
	float: left;
	width: 326px;
	text-align: center;
}

.news {
	float: left;
	width: 326px;
}

.news li {
	margin: 10px 0px;
	padding: 0px 0px 0px 30px;
	list-style-type: none;
	background: url(../images/icon_add.png) no-repeat left top;
}

/*----------------------------------------price--------------------*/

.price_sidebar {
	float: left;
	width: 260px;
	text-align: center;
	background:#d1eaf8;
	padding: 10px;
	border:3px solid #bdd8e8;
	margin-left: 20px;
}

.price_sidebar:hover {
	border:3px solid #83b8d7;
}

.price_sidebar h4 {
	text-align: left;
	margin: 0px;
	padding: 0px;
}

.price_sidebar p {
	color: #F00;
	font-size: 12px;
	text-align: left;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
}

ul.toc {
	list-style:none;
	width:250px;
	font-size: 12px;
	margin: 0 auto;
}
.toc li {background:url(../images/dot.gif) repeat-x 0 0.85em;}
.toc li strong {float:left;background:#d1eaf8;padding: 0 4px 0 0;}
.toc li span {float:right;background:#d1eaf8; padding: 0 0 0 4px;}
.toc li br {clear:both;}

.price {
	float: left;
	width: 550px;
	background:#d1eaf8;
	padding: 10px;
	border:3px solid #bdd8e8;
}

.price:hover {
	border:3px solid #83b8d7;
}

.price h3 {
	text-align: left;
	margin: 0px;
	padding: 0px;
}

.price p {
	color: #F00;
	text-align: left;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
}

ul.tod {
	list-style:none;
	width:500px;
	margin: 0 auto;
}
.tod li {background:url(../images/dot.gif) repeat-x 0 bottom;}
.tod li strong {float:left;background:#d1eaf8;padding: 0 4px 0 0;}
.tod li span {float:right;background:#d1eaf8;padding: 0 0 0 4px;}
.tod li br {clear:both;}

/*----------------------------------------ตัวอย่างสถานศึกษา--------------------*/

.refer_sidebar {
	float: left;
	width: 260px;
	text-align: center;
	background:#d1eaf8;
	padding: 10px;
	border:3px solid #bdd8e8;
	margin-left: 20px;
}

.refer_sidebar:hover {
	border:3px solid #83b8d7;
}

.refer_sidebar h4 a {
	text-decoration: none;
}

.refer_sidebar h4 {
	text-align: left;
	margin: 0px;
	padding: 0px 0px 10px;
}

.refer_sidebar p {
	font-size: 12px;
	text-align: center;
	line-height: 16px;
	padding: 0px;
	margin: 0px;
}

.refer_sidebar ul {
	list-style:none;
	width:250px;
	font-size: 12px;
	margin: 0 auto;
	text-align: left;
}

/********************************************
FOOTER
*********************************************/
#wrapper_footer {
	margin: 0 auto;
	width: 100%;
	height: 140px;
	background: url(../images/footer_bg.jpg) repeat-x left top;
	float: left;
	
}
#wrapper_footer a {
	color: #7B86A1;
	text-decoration: none;
}
#wrapper_footer a:hover {
	color: #929CB3;
	text-decoration: underline;
}
#wrapper_footer p {
	color: #7B86A1;
	float: left;
	width: 480px;
	font-size: 11px;
	line-height: 14px;
}
.footer_logo {
	float: left;
	width: 116px;
	height: 49px;
	padding-top: 28px;
	margin-left: 10px;
}
.footer_facebook {
	float: left;
	width: 32px;
	height: 49px;
	padding-top: 45px;
	margin-left: 338px;
}

.footer_column {
	float: right;
	width: 480px;
	height: 80px;
	margin-top: 10px;			
}

/* ---------- Copyright Information ---------- */

#copyright {
	width: 100%;
	height: 30px;
	float: left;
	font-size: 11px;
	color: #56627E;
	padding-top: 15px;
}
#copyright p {
	float: left;
	font-size: 11px;
	color: #56627E;
	width: 500px;
}

/* ---------- Go to Page Top ---------- */

.page_top:link, .page_top:visited {
	font-size: 11px;
	color: #56627E;
	text-decoration: none;
	float: right;
	padding-right: 10px;
	background: url(../images/arrow_top.jpg) no-repeat right 5px;
}
.page_top:hover {
	text-decoration: underline;
}


/********************************************
INNER PAGES
*********************************************/
#wrapper_top_inner {
	margin: 0 auto;
	width: 100%;
	height: 121px;
	background: url(../images/inner_header_bg.jpg) repeat-x left top;
	
}

/* ---------- Page Title ---------- */

.page_title {
	float: right;
	width: 720px;
}

/* ---------- Services Overview ---------- */

.detail, .upgrade, .more_services, .refer {
	float: left;
	/*width: 585px;*/
	width: auto;
}

.detail, .upgrade, .more_services, .refer ul {
	margin: 0;
	padding: 0;
}
.detail li {
	margin: 0px 0px;
	padding-left: 26px;
	list-style-type: none;
	background: url(../images/success.png) no-repeat left 6px;
	line-height: 26px;
}

.upgrade li {
	margin: 0px 0px;
	padding-left: 26px;
	list-style-type: none;
	background: url(../images/bullet_go.png) no-repeat left 6px;
	line-height: 26px;
}

.more_services li {
	margin: 0px 0px;
	padding-left: 26px;
	list-style-type: none;
	background: url(../images/add.png) no-repeat left 6px;
	line-height: 26px;
}

.refer ul {
	width:580px;
	font-size: 12px;
}
.refer li  { width:270px; float:left; }
.refer li {
	padding-left: 16px;
	background: url(../images/bullet_orange.png) no-repeat left 2px;
	line-height: 16px;
}

/* ---------- Contact ---------- */

.address_locations {
	float: left;
	width: 326px;
	padding-top: 25px;
	padding-bottom: 120px;
}
.address_locations p {
	margin: 0px;
	padding: 5px 0px 5px 0px;
	line-height: 18px;
}


/* ---------- Contact Form ---------- */

.contact_form {
	float: left;
	width: 585px;
}
.contact_form label{
	width: 372px;
	height: 21px;
	display: block;
}
.input_bg {
	width: 373px;
	height: 25px;
	padding: 7px 10px 0px 10px;
	background: url(../images/input_bg.jpg) no-repeat left top;
	font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #727272;
}
.textarea_bg {
	width: 543px;
	height: 235px;
	padding: 7px 10px 0px 10px;
	background: url(../images/textarea_bg.jpg) no-repeat left top;
	font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #727272;
}
.input_submit {
	width: 113px;
	height: 34px;
	background: url(../images/button_formsubmit.jpg) no-repeat left top;
	font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #fff;
	cursor: pointer;
}

/* Sidebar Sub Menu
-----------------------------------------------------------------*/
	 
	.submenu	{
 		margin-bottom:20px;
  		}
				
	.submenu ul li	{ 
		border-bottom:1px solid #d0d0d0;
		border-top:1px solid #fff;					
		}

		.submenu ul li a	{
			display:block;
			padding:8px 0px 8px 15px;
			text-decoration:none;
			font:normal 14px/21px  Tahoma, sans-serif;
			}
					
			.submenu ul li a:hover{
	 			color:#000;
				background:#e0e0e0;
				display:block;
				}

	.submenu ul li.current a{
	 						color:#000;
							background:#e0e0e0;
							border-left:5px solid #ccc;
							display:block;
							}

#slides_container{width:980px; position:relative; padding:0px 0px 0px 0px; clear:left; float:left;}
.slider{ position:relative;  margin:0px auto; width:980px; padding:0px 0px 0px 0px; color:#010101; height:300px;}

.slideshow { width: 216px; height: 162px; margin: auto }

#stat{
	text-align: center;
	padding-top: 1950px;
}