﻿body {margin:0px; padding:0px; color:#3a3430;font-family:Helvetica,"Trebuchet MS",Arial,sans-serif;	font-size:13px; line-height:1.5em; background-color:#e1e1e1;}
.wrapper{width:960px; margin: 0 auto;}
.clear_h00 {clear: both; width:100%; height: 0px; }
.clean_h10 {clear: both; width:100%; height: 10px; }
.clean_h30 {clear: both; width:100%; height: 30px; }
.left{float:left;}
.right{float:right;}
.horizon_divider { background: url(../images/hor_divider.jpg) repeat-x bottom; }

#topbar {background:#39708f; padding:8px; color:white; height:22px; border-bottom:1px solid white; font-size:13px; margin: 0 auto;}
#topbar a{ text-decoration:none; margin-right:10px; color:white; font-size:13px;}
#topbar .slinks{width:145px; float:right; }
#topbar img{ background-color:white; width:18px;}
#topbar img:hover{background-color:#24d8e5;}

#wrapper_header { width: 100%; background: #f3f3f3; }
#header { width: 990px; height: 206px; padding: 0; margin: 0 auto; background: url(../images/header.jpg) no-repeat; }
#header .logo { float: left; padding-left:40px;}
#header .logo img{width:115px; padding-top:12px;}
#header .title { float: left;text-align:center; height:105px; color:#39708f; padding:10px 0px 15px 0px; font-size:26px;  line-height:34px; width:800px;}
#header .title span {font-size:36px; font-weight: bold;	text-decoration: none; color:#ef7716; font-family: Arial, Helvetica, sans-serif;}

#menu {clear: both; width: 940px; height: 90px; padding: 3px 25px; background: url(../images/menu.png) no-repeat; }
#home_menu a { float: left; display: block; width: 46px; height: 46px; margin-right: 40px; background: url(../images/home.png) no-repeat; }
#home_menu a:hover {	background: url(../images/home_hover.png) no-repeat; }
#menu ul { margin: 0; padding: 7px 0 0 0; list-style: none; }
#menu ul li { 	padding: 0px; margin: 0px; display: inline; }
#menu ul li a { float: left; display: block; height: 27px; padding: 5px 0 0 0; margin: 0 17px 0 16px ; font-size: 14px; text-align: center;	text-decoration: none; color: #fff;	font-weight: bold; outline: none; border: none; }
#menu ul li a:hover, #tooplate_menu ul li .current { color: #fec823; }
#menu ul li .current {color: #fec823;}

#wrapper_banner { width: 100%; height: 280px;	background: url(../images/wrapper_banner.jpg) no-repeat top center; }
#slider { width: 970px; height: 280px; padding: 0; margin: 0 auto;}
#slider-holder {	background:url(../images/slider-bg.jpg) no-repeat 0 0;	width:968px; height:278px;	position:relative;}
#slider-holder .slider {	width:970px; height:280px; position:relative; z-index:2; overflow:hidden; }
#slider-holder .slider .jcarousel-clip {	width:970px; height:280px; }
#slider-holder .slider ul { list-style-type:none;	height:300px;}
#slider-holder .slider ul li { float:left; display:inline; width:970px; height:280px; position:relative;}
#slider-holder .slider ul li .image img { display:block; padding-top:1px;}
#slider-nav {position:absolute; right:17px;	bottom:18px; z-index:3;}
#slider-nav ul {	list-style-type:none;}
#slider-nav ul li {	float:left;	display:inline;	padding-right:3px;	height:100%;	width:18px;}
#slider-nav ul li a {float:left;display:inline;	font-size:0;	line-height:0;	text-indent:-4000px;}
#slider-nav ul li a {background:url(../images/slider-nav-btn.png) no-repeat 0 0;	width:18px;	height:18px;}
#slider-nav ul li a:hover, #slider-nav ul li a.active {	background-position:0 bottom;}

#main {clear: both; width: 930px; padding: 10px 30px 0px 30px; margin: 0 auto;}

#sidebar { float: left; width: 250px; }
#sidebar .left{width:272px; float:left; border:solid 1px #a1c7fa; border-radius:5px; margin-bottom:15px;}
#sidebar .left_h1{width:260px;float:left; margin:3px 3px 6px 3px; background-color:#2a6180; color:#FFFFFF;border-radius:5px; padding:5px 0px 5px 5px; font-size:16px;}
#sidebar .left_content{width:260px; float:left; text-align:center; font-size:16px; color:#000000; line-height:18px; margin-bottom:8px;}
#sidebar img{margin-bottom:10px;}
.list_notice ul{list-style: none; padding:0px 0px 0px 15px;}
.list_notice li { font-size:15px; text-align:justify; line-height: 1.5em;}
.list_notice li b { color:#ef7716;}
.list_notice li a { text-decoration: none;}
.list_notice li a:hover { text-decoration: underline; }
.list {	margin: 20px 0;	padding: 0 0 0 25px;	list-style: none;}
.list li { background: transparent url(../images/list.png) no-repeat scroll 0 0px; font-size:13px; margin:0 0 10px; padding:0 0 0 25px;	line-height: 1.2em; text-align:left;}
.list li a { text-decoration: none;}
.list li a:hover { text-decoration: underline; }

#footer_wrapper {width: 100%; border-top: 1px solid #fff; padding-top: 1px; background: #28556e; }
#footer { width: 900px; margin: 0 auto; padding: 20px 35px;	text-align: center;	color: #8ab6d1;}
#footer a {	color: #b4d8ee;}

#content-index { float: right; width: 600px;}
#content-index h1{font-size:30px; color:#2a6180; font-family: Arial, Helvetica, sans-serif; line-height: 1em; text-align:center; margin-bottom:0px;}
#content-index h2{font-size:25px; color:#ef7716; font-family: Arial, Helvetica, sans-serif; text-align:center; margin-top:0px; margin-bottom:0px;}
#content-index .left{width:100%; border:solid 1px #a1c7fa; border-radius:5px; margin-bottom:25px; }
#content-index .left_h1{width:98%;float:left; margin:3px 3px 6px 3px; background-color:#ef7716; color:#FFFFFF;border-radius:5px; padding:5px 0px 5px 5px; font-size:18px;}
#content-index .left_content{text-align:justify; padding:10px;}
#content-index .left img{float:left; padding-left:5px; padding-right:9px;}
#content-index .left p{padding-right:5px; margin-top:0px; margin-bottom:0px; font-size:16px;  margin-bottom:8px; line-height:22px;}

#content_about { float: right; width: 600px;}
#content_about h1{font-family:Arial Black,Gadget,sans-serif; font-variant: small-caps; font-size:32px; text-decoration:underline; border-radius:5px;  padding:10px; color:#2a6180; text-align:center; margin:0 auto;}
#content_about .left{width:100%; border:solid 1px #a1c7fa; border-radius:5px; margin-bottom:25px; box-shadow:0 0 5px #000;}
#content_about .left_h1{width:98%;text-align:center; margin:3px 3px 6px 3px; background-color:#ef7716; color:#FFFFFF;border-radius:5px; padding:5px 0px 5px 5px; font-size:18px;}
#content_about .left_content{text-align:justify; padding:10px;}
#content_about .left p{padding-right:5px; margin-top:0px; margin-bottom:0px; font-size:16px;  margin-bottom:8px; line-height:32px;}

#content_staff{width: 100%;}
#content_staff h1{font-family:Arial Black,Gadget,sans-serif; font-variant: small-caps; font-size:32px; text-decoration:underline; border-radius:5px;  padding:10px; color:#2a6180; text-align:center; margin:0 auto;}
#content_staff .content{border:solid 1px #a1c7fa; border-radius:5px; margin-bottom:25px; padding:10px; box-shadow:0 0 5px #000;}
#content_staff table{width:80%; margin-top:30px; border-radius:20px; background:#39708f;}
#content_staff th {width: 180px; padding:10px; color:white; font-size:25px; font-weight:bold; } 
#content_staff th img{width:150px; height:150px; border-radius:100%; border:5px solid white;}
#content_staff td {color:#39708f; font-size:20px; font-weight:bold; text-align:left; padding:5px 10px;}
#content_staff a {color:#39708f;  text-decoration:none;}

#content_courses{float: right; width: 600px;}
#content_courses h1{font-family:Arial Black,Gadget,sans-serif; font-variant: small-caps; font-size:32px; text-decoration:underline; border-radius:5px;  padding:10px; color:#2a6180; text-align:center; margin:0 auto;}
#content_courses .content{border:solid 1px #a1c7fa; border-radius:5px; margin-bottom:25px; padding:10px; box-shadow:0 0 5px #000;}
#content_courses th {width: 100px; padding:5px 0px 5px 15px; color:#39708f; font-size:25px; font-weight:bold;} 
#content_courses th img{width:100px; margin-bottom:15px; box-shadow:0 0 5px #000;}
#content_courses td {color:#39708f; font-size:22px; font-weight:bold; padding-left:20px; text-align:center;  background-color:transparent;}
#content_courses td span{ font-size:18px; font-weight:normal;}

#content_facilities{float: right; width: 600px;}
#content_facilities h1{font-family:Arial Black,Gadget,sans-serif; font-variant: small-caps; font-size:32px; text-decoration:underline; border-radius:5px;  padding:10px; color:#2a6180; text-align:center; margin:0 auto;}
#content_facilities .content{border:solid 1px #a1c7fa; border-radius:5px; margin-bottom:25px; padding:10px; box-shadow:0 0 5px #000;}
#content_facilities table{width:95%; margin-top:30px; border:3px solid #39708f;}
#content_facilities th {padding:5px 0px 5px 15px; color:white; font-size:25px; font-weight:bold;background:#39708f; border:3px solid transparent;} 
#content_facilities td {color:#39708f; font-size:22px; font-weight:bold; padding-left:20px; text-align:center;  background-color:transparent;}

#content_attendance{width: 100%;}
#content_attendance h1{font-family:Arial Black,Gadget,sans-serif; font-variant: small-caps; font-size:32px; text-decoration:underline; border-radius:5px;  padding:10px; color:#2a6180; text-align:center; margin:0 auto;}
#content_attendance .content{border:solid 1px #a1c7fa; border-radius:5px; margin-bottom:25px; padding:10px; box-shadow:0 0 5px #000;}
#content_attendance table{width:95%; background:#28556e; border:3px solid #28556e;}
#content_attendance th{text-align:center; vertical-align:middle; border:3px solid #28556e; color:white; font-size:20px; font-weight:bold; }
#content_attendance td{border:3px solid #28556e; background-color:#e1e1e1; color:black; font-size:20px; text-align:center; font-weight:bold; padding:10px;}
#content_attendance a{text-decoration:none; color:#28556e;}

#content_document{width: 100%;}
#content_document h1{font-family:Arial Black,Gadget,sans-serif; font-variant: small-caps; font-size:32px; text-decoration:underline; border-radius:5px;  padding:10px; color:#2a6180; text-align:center; margin:0 auto;}
#content_document .content{border:solid 1px #a1c7fa; border-radius:5px; margin-bottom:25px; padding:10px; box-shadow:0 0 5px #000;}
#content_document table{width:95%; background:#28556e; border:3px solid #28556e;}
#content_document th{text-align:center; vertical-align:middle; border:3px solid #28556e; color:white; font-size:20px; font-weight:bold; }
#content_document td{border:3px solid #28556e; background-color:#e1e1e1; color:black; font-size:20px; text-align:center; font-weight:bold; padding:10px;}
#content_document a{text-decoration:none; color:#28556e;}
#content_document .button{background-color:green; color:white; padding:2px 10px; border-radius:20px;}
#content_document .button a{color:white; padding:2px 10px;  border-radius:20px; text-decoration:none;}

#content-contact { float: right; width: 600px;}
#content-contact h1{font-size:30px; color:#2a6180; font-family: Arial, Helvetica, sans-serif; line-height: 1em; text-align:center; margin-bottom:0px;}
#content-contact h2{font-size:22px; color:#ef7716; font-family: Arial, Helvetica, sans-serif; text-align:center; margin-top:0px; margin-bottom:0px;}
#content-contact .left{width:100%; border:solid 1px #a1c7fa; border-radius:5px; margin-bottom:25px; height:400px;}
#content-contact .left_h1{width:98%;float:left; margin:3px 3px 6px 3px; background-color:#ef7716; color:#FFFFFF;border-radius:5px; padding:5px 0px 5px 5px; font-size:16px;}
#content-contact .left_content{width:600px; float:left; text-align:justify; font-size:16px; color:#000000; line-height:18px; margin-bottom:8px;}
#content-contact th,td{text-align:left; background-color:white;}
#content-contact table {padding:20px; margin-top:20px; background-color:#356989;}
.button a{clear: both;display: block;width: 170px;height: 27px;padding: 6px 0 0 12px;margin: 15px 0 0 90px;background:  url(../images/button.png) no-repeat;	color: #fff;font-weight: bold;text-align: center;	text-decoration: none; float:left;}
.button a:hover {background: url(../images/button_hover.png) no-repeat;}
#content-contact .submit_button{ clear: both;display: block;width: 170px;height: 36px;padding: 0px 0 0 25px; font-size:15px; margin: 15px 0 0 0px;background:  url(../images/button.png) no-repeat;	color: white;font-weight: bold;text-align: center;	text-decoration: none; }
#content-contact .submit_button:hover{ background: url(../images/button_hover.png) no-repeat;}

#content_tutorial { width: 100%;}
#content_tutorial h1{font-family:Arial Black,Gadget,sans-serif; font-variant: small-caps; font-size:32px; text-decoration:underline; border-radius:5px;  padding:10px; color:#2a6180; text-align:center; margin:0 auto;}
#content_tutorial a{background-color:green;color: white; border:none; width:100px; border-radius:10px; transition-duration: 0.4s;cursor: pointer;padding: 3px 15px;text-align:center;text-decoration:none;}
#content_tutorial a:hover{background-color:#333332 ;color: white;}
#content_tutorial fieldset{width:500px; border:3px solid #39708f; align:center; margin-top:30px;}
#content_tutorial legend{color:#39708f ; font-size:14px; font-weight:bold;}
#content_tutorial select{background-color:#39708f;color: white; border:none; width:300px; border-radius:5px; height:40px; border-radius:5px; font-size:18px; font-weight:bold; margin:20px;}
#content_tutorial input{background-color:#4587ab;color: white; padding-left:10px; border:none; width:100px; border-radius:5px; height:40px; font-size:18px; font-weight:bold;}
#content_tutorial .left{width:100%; border:solid 1px #a1c7fa; box-shadow:3px 3px #2A3030;border-radius:5px; margin-bottom:25px;}
#content_tutorial .left_h1{width:99%;float:left; margin:3px 3px 6px 3px; background-color:#ef7716; color:#FFFFFF;border-radius:5px; padding:5px 0px 5px 5px; font-size:16px;}
#content_tutorial .left_content{width:auto; text-align:justify;}
#content_tutorial table{width:900px; margin-top:50px; box-shadow:0 0 5px #000; border-radius:5px; background:#39708f;}
#content_tutorial th {padding:10px; color:white; font-size:25px; font-weight:bold; } 
#content_tutorial td {color:#39708f; font-size:20px; font-weight:bold; margin:0 auto; text-align:center; border-radius:5px;}

#admission {width:100%; border:solid 1px #a1c7fa; box-shadow:3px 3px #2A3030;border-radius:5px; margin-bottom:25px;}
#admission h3{margin-top:30px; color:#f15019; font-size:34px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;} 
#admission h2{color:#043943; font-size:22px; } 
#admission hr{width:550px;}
#admission table{width:90%;}
#admission img{width:120px; height:120px; border:10px dotted #cccccc; border-radius:100px; box-shadow:0 0 5px #043943; margin:0 auto;}
#admission th{font-size:22px; color:#cccccc; padding:20px;}
#admission td{padding:20px; background:#043943; color:white; text-align:center; border-radius:100px; box-shadow:0 0 5px #000;}
#admission a{font-size:22px; color:white; text-decoration:none;}

#registration {width:100%; border:solid 1px #a1c7fa; box-shadow:3px 3px #2A3030;border-radius:5px; margin-bottom:25px;}
#registration h3{margin-top:30px; color:#f15019; font-size:34px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;} 
#registration h2{color:black; font-size:20px; }
#registration hr{width:550px;}
#registration table{width:900px; margin-top:50px; box-shadow:0 0 5px #000; border-radius:20px; background:#39708f;}
#registration th {padding:10px; color:white; font-size:25px; font-weight:bold; } 
#registration td {color:black; background:#e1e1e1; font-size:20px; font-weight:bold; margin:0 auto; text-align:center; }
#registration a{font-size:20px; color:red; text-decoration:none;}

#search { width: 100%;}
#search h1{font-family:Arial Black,Gadget,sans-serif; font-variant: small-caps; font-size:32px; text-decoration:underline; border-radius:5px;  padding:10px; color:#2a6180; text-align:center; margin:0 auto;}
#search fieldset{width:500px; border:3px solid #39708f; align:center; margin-top:30px;}
#search legend{color:#39708f ; font-size:14px; font-weight:bold;}
#search select{background-color:#39708f;color: white; border:none; width:300px; border-radius:5px; height:40px; border-radius:5px; font-size:18px; font-weight:bold; margin:20px;}
#search input{background-color:#4587ab; color: white;padding-left:10px; border:none; width:300px; border-radius:5px; height:40px; border-radius:5px; font-size:18px; font-weight:bold; margin:20px;}
#search .left{width:100%; border:solid 1px #a1c7fa; box-shadow:3px 3px #2A3030;border-radius:5px; margin-bottom:25px;}
#search .left_h1{width:99%;float:left; margin:3px 3px 6px 3px; background-color:#ef7716; color:#FFFFFF;border-radius:5px; padding:5px 0px 5px 5px; font-size:16px;}
#search .left_content{width:auto; text-align:justify;}
#search table{width:900px; margin-top:50px; box-shadow:0 0 5px #000; border-radius:5px; background:#39708f;}
#search th {padding:10px; color:white; font-size:25px; font-weight:bold; } 
#search td {color:#39708f; font-size:20px; font-weight:bold; margin:0 auto; text-align:center; border-radius:5px;}
#search a{background-color:#39708f; padding:5px 15px; margin:15px; font-size:18px; text-decoration:none;  text-align:center; color:white; border-radius:20px;}


#content-gallery { width: auto;}
#content-gallery h1{font-size:30px; color:#2a6180; font-family: Arial, Helvetica, sans-serif; line-height: 1em; text-align:center; margin-bottom:0px;}
#content-gallery h2{font-size:22px; color:#ef7716; font-family: Arial, Helvetica, sans-serif; text-align:center; margin-top:0px; margin-bottom:0px;}
#content-gallery .left{width:100%; border:solid 1px #a1c7fa; box-shadow:3px 3px #2A3030;border-radius:5px; margin-bottom:25px;}
#content-gallery .left_h1{width:99%;float:left; margin:3px 3px 6px 3px; background-color:#ef7716; color:#FFFFFF;border-radius:5px; padding:5px 0px 5px 5px; font-size:16px;}
#content-gallery .left_content{width:auto; text-align:justify;}
#content-gallery .left p{padding-right:5px; margin:18px; font-size:17px; line-height:27px; }

/*Stacks CSS for Gallery ----------------------------------------------------------------------------------------------------------- */

.gallery{
	padding: 40px 0px 0px 30px;  margin:15px 0 0 0;padding: 30px 0 0 40px;
}
/*Float clearing goodness from Handcrafted CSS book ------------------------------------------------------------- */
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* Layout */
.stack { float: left; width: 21%; margin: 0 4% 4% 0; position: relative; z-index: 10; }

/* Image styles */
.stack img { width: 180px; height: 180px; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type { margin-right: 0; }

/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-webkit-transition: 0.3s all ease-out;
	-moz-transition: 0.3s all ease-out;
	transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */	
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before { 
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	transform: rotate(2deg);
}
.stack.rotated:after { 
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}	

/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}	
.stack.twisted:after {
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	transform: rotate(-4deg);
}	

/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.stack.rotated-left:after {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(-6deg);
	-moz-transform: rotate(-6deg);
	transform: rotate(-6deg);
}

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}