body{  margin:auto; background-color:#f4f4f4 ;}
#wrapper{ width:950px; margin:auto;}
.clear {clear:both; height:0;}
.left{float:left;}
.right{float:right}

#top_header{background-color:#026b8a; margin-top:0px; height:30px;}
#top_header .contact{color:white; font-size:18px; float:left; margin-left:20px;}
#top_header .slinks{float:right;}
#top_header a{text-decoration:none; margin-right:20px;}
#top_header img{ background-color:white; width:20px; margin-top:5px;}
#top_header img:hover{background-color:#0ac6fc;}


#header{background-color:#171717; margin-top:0px;}
#header .title{text-align:center;}
#header .navigation{text-align:center; height:50px;}

#slider{background-color:#01546b; height:320px; padding:15px 0px;}

#main{background-color:#171717; padding:10px; }
.note table{width:100%; padding:0px 15px;}
.note th{color:white; background-color:#01546b; border-radius:20px 0px 0px 20px; padding:7px; font-size:14px;}
.note td{color:white; border-radius:0px 20px 20px 0px; border:3px solid #01546b; padding:7px;}

#home{background-color:#ffffff; padding:10px; border-radius:20px; height:auto; margin:10px 15px;}
.left-panel{float:left; width:250px; border-right:1px dotted #01546b;}
.left-panel table{width:230px;  border:3px solid #01546b; border-radius:20px 20px 5px 5px; background-color:#01546b;}
.left-panel tr{border-radius:20px;}
.left-panel th{background-color:#01546b; font-size:22px; border-radius:20px 20px 0px 0px; color:white; padding:5px;}
.left-panel td{background-color:#ffffff; font-size:16px; border:3px solid #01546b; border-radius:5px; padding:2px; color:#01546b; text-decoration:none; font-weight:bold;}
.left-panel td:hover{background-color:#171717; color:#ffffff;}
.left-panel table a{color:#01546b; text-decoration:none; font-weight:bold;}
.left-panel table a:hover{background-color:#171717; color:#ffffff;}
.left-panel form{width:230px;  border:3px solid #01546b; border-radius:20px; background-color:#ffffff; height:250;  margin-bottom:0px;}
.left-panel h3{background-color:#01546b; font-size:22px; border-radius:10px 10px 0px 0px; color:white; padding:5px; margin:0px;}
.left-panel marquee{padding:5px; height:200px; text-align:justify;}

.right-panel {width:630px; height:640px;  float:right;}
.right-panel img{border:4px solid #01546b ; width:140px; height:170px; float:left; margin:10px 10px 20px 0; }
.right-panel h1{font-size:22px; text-align:center; color:#ca3e33; margin-top:0px; height:30px; }
.right-panel h2{font-size:20px; font-weight:bold; text-align:left; color:#01546b; margin-top:25px; text-decoration:underline;}
.right-panel p{font-size:18px; text-align:justify;  letter-spacing:1.1px; line-height:30px;}

#footer{background-color:#01546b; }
#footer span{color:white; padding:10px 15px; letter-spacing:1.2px;}
#footer a{text-decoration:none; color:white;}

#about{background-color:#ffffff; padding:10px 20px; border-radius:20px; height:auto; margin:10px 15px; }
#about h1{text-align:center; color:#01546b; margin-top:0px; height:30px; text-decoration:underline;}
#about p{color:black; font-size: 22px; letter-spacing:1.3px; line-height:32px; text-align:justify; padding:0 20px;}
#about img{width:880px;}

#course{background-color:#ffffff; padding:10px 20px; border-radius:20px; height:auto; margin:10px 15px; }
#course h1{text-align:center; color:#01546b; margin-top:0px; height:30px; text-decoration:underline;}
#course table{border:3px solid #01546b; width:90%;margin:20px; background-color:#01546b; border-radius:10px;}
#course tr{border:3px solid #01546b;}
#course th{border:3px solid #01546b; background-color:#01546b; color:white; font-size:22px; text-align:center; font-weight:bold; padding:10px;}
#course td{border:3px solid #01546b; background-color:#d6d6d6; color:#171717; font-size:20px; text-align:center; font-weight:bold; padding:10px; border-radius:10px;}

#faculty{background-color:#ffffff; padding:10px 20px; border-radius:20px; height:auto; margin:10px 15px; }
#faculty h1{text-align:center; color:#01546b; margin-top:0px; height:30px; text-decoration:underline; padding-bottom:20px;}
#faculty p{color:black; font-size: 22px; letter-spacing:1.3px; line-height:32px; text-align:justify; padding:0 20px;}

#academic{background-color:#ffffff; padding:10px 20px; border-radius:20px; height:auto; margin:10px 15px; }
#academic h1{text-align:center; color:#01546b; margin-top:0px; height:30px; text-decoration:underline;}
#academic p{color:black; font-size: 22px; letter-spacing:1.3px; line-height:32px; text-align:justify; padding:0 20px;}
#academic img{width:200px;}

#contact{background-color:#ffffff; padding:10px 20px; border-radius:20px; height:auto; margin:10px 15px; }
#contact h1{text-align:center; color:#01546b; margin-top:0px; height:30px; text-decoration:underline;}
#contact h2{text-align:center; color:white; margin-top:0px; height:30px; text-decoration:underline;}
#contact form{background:#017192; border-radius:10px; height:450px;width:425px; border:4px solid #01546b;}
#contact td{font-weight:thin; font-size:16px; color:white; letter-spacing:1.3px;}
#contact tr{color:white;}
#contact a{font-weight: bold; color:white; text-decoration:none;}
#contact .textfield {width:250px; height:40px; margin:10px 10px; border:2px solid #01546b;}
#contact .msgfield{width:250px; height:70px; margin:10px 10px; border:2px solid #01546b;}
#contact .button{text-decoration:none; color:#01546b; padding:5px 20px; background-color:white; border:4px solid #01546b; margin-left:40px; border-radius:20px}

#attendance{background-color:#ffffff; padding:10px 20px; border-radius:20px; min-height:500px; height:auto; margin:10px 15px; }
#attendance h1{text-align:center; color:#01546b; margin-top:0px; height:30px; text-decoration:underline;padding:10px;}
#attendance table{border:3px solid #01546b; width:90%;margin:20px; background-color:#01546b; border-radius:10px;}
#attendance tr{border:3px solid #01546b;}
#attendance th{border:3px solid #01546b;background-color:#01546b; color:white; font-size:22px; text-align:center; font-weight:bold;padding:10px;}
#attendance td{border:3px solid #01546b; background-color:#d6d6d6; color:#171717; font-size:20px; text-align:center; font-weight:bold; padding:10px; border-radius:10px;}
#attendance a{text-decoration:none; color:#01546b;}

#e_learning{background-color:#ffffff; padding:10px 20px; border-radius:20px; min-height:500px; height:auto; margin:10px 15px; }
#e_learning h1{text-align:center; color:#01546b; margin-top:0px; height:30px; text-decoration:underline;padding:10px;}
#e_learning table{border:3px solid #01546b; width:90%;margin:20px; background-color:#01546b; border-radius:10px;}
#e_learning tr{border:3px solid #01546b;}
#e_learning th{border:3px solid #01546b;background-color:#01546b; color:white; font-size:22px; text-align:center; font-weight:bold;padding:10px;}
#e_learning td{border:3px solid #01546b; background-color:#d6d6d6; color:#171717; font-size:20px; text-align:center; font-weight:bold; padding:10px; border-radius:10px;}
#e_learning a{text-decoration:none; color:#01546b;}

#document{background-color:#ffffff; padding:10px 20px; border-radius:20px; min-height:500px; height:auto; margin:10px 15px; }
#document h1{text-align:center; color:#01546b; margin-top:0px; height:30px; text-decoration:underline;padding:10px;}
#document table{border:3px solid #01546b; width:90%;margin:20px; background-color:#01546b; border-radius:10px;}
#document tr{border:3px solid #01546b;}
#document th{border:3px solid #01546b;background-color:#01546b; color:white; font-size:22px; text-align:center; font-weight:bold;padding:10px;}
#document td{border:3px solid #01546b; background-color:#d6d6d6; color:#171717; font-size:20px; text-align:center; font-weight:bold; padding:10px; border-radius:10px;}
#document a{text-decoration:none; color:#01546b;}

#gallery{background-color:#ffffff; padding:10px 20px; border-radius:20px; height:auto; margin:10px 15px; }
#gallery{padding:0px 0px 30px 20px;}
#gallery h1{text-align:center; color:#01546b; margin-top:0px; height:30px; text-decoration:underline; padding:10px;}

#error{background-color:#ffffff; padding:10px 20px; border-radius:20px; min-height:300px; height:auto; margin:10px 15px; }
#error h1{text-align:center; color:#01546b; margin-top:0px; height:30px; text-decoration:underline; padding-bottom:20px;}
#error p{color:black; font-size: 22px; letter-spacing:1.3px; line-height:32px; text-align:justify; padding:0 20px;}

/* START Navigation */
.menu-bar {background-image:url(../images/bgh.png); height:59px; }

nav{ padding-top:0px; padding-left:15px;}
nav ul {padding: 0;	margin: 0;	list-style: none;}
nav a{
	float: left;
    color: #eee;
    margin: 0 6.5px;
    padding: 3px;
    text-decoration: none;
	border: 1px solid #026b8a;
	font: bold 17px Arial, Helvetica; 	
    background-color: #026b8a;
    background-image: -moz-linear-gradient(#01546b, #026b8a);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#01546b), to(#026b8a));    
    background-image: -webkit-linear-gradient(#01546b, #026b8a);
    background-image: -o-linear-gradient(#01546b, #026b8a);
    background-image: -ms-linear-gradient(#01546b, #026b8a);
    background-image: linear-gradient(#01546b, #026b8a);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8);    
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;	
}
nav a:hover{
    background-color: #01546b;
    background-image: -moz-linear-gradient(#026b8a, #01546b);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#026b8a), to(#01546b));      
    background-image: -webkit-linear-gradient(#026b8a, #01546b);
    background-image: -o-linear-gradient(#026b8a, #01546b);
    background-image: -ms-linear-gradient(#026b8a, #01546b);
    background-image: linear-gradient(#026b8a, #01546b);
}
nav a:active{
    background: #01546b;
    position: relative;
    top: 2px;    
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; 
}
nav span{
	border: 1px dashed #eba1a3;
    display: inline-block;
    padding: 4px 14px;
	cursor: pointer;	
    background-color: #01546b;
    background-image: -moz-linear-gradient(#026b8a, #01546b);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#026b8a), to(#01546b));      
    background-image: -webkit-linear-gradient(#026b8a, #01546b);
    background-image: -o-linear-gradient(#026b8a, #01546b);
    background-image: -ms-linear-gradient(#026b8a, #01546b);
    background-image: linear-gradient(#026b8a, #01546b);
}
nav a:hover span{	
    background-color: #01546b;
    background-image: -moz-linear-gradient(#01546b, #026b8a);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#01546b), to(#026b8a));      
    background-image: -webkit-linear-gradient(#01546b, #026b8a);
    background-image: -o-linear-gradient(#01546b, #026b8a);
    background-image: -ms-linear-gradient(#01546b, #026b8a);
    background-image: linear-gradient(#01546b, #026b8a);
}
/* END Navigation */



/* START Slider */
#image-slider{ 
	margin:0px 15px;
	width:900px;
	height:300px;
	padding:10px;
	position:relative;
	overflow:visible;
	background:url("../images/slider-frame.png") no-repeat center;
}
#image-slider .prev{
	position:absolute;
	z-index:3;
	left:-16px;
	top:140px;
}
#image-slider .next{
	position:absolute;
	z-index:3;
	right:-16px;
	top:140px;
}
#image-slider ul{
	position:relative;
	width:860px;
	height:300px;
	margin:0 auto;
	overflow:hidden;
	z-index:2;
}
/* START Slider */



/* Gallery Css ======================================================== */

#body-gallery
{	
	border: thin dotted #f2f2f2;
	height: auto;
	background-color: white;	
	float:center;
	width:880px;
}
.box{width:100%; border:solid 1px #01546b; box-shadow:3px 3px #01546b;border-radius:5px; margin-bottom:-15px; background-color:#d6d6d6;}
.box_h1{width:99%; text-align:left; font-weight:bold; margin:3px 3px 6px 3px; background-color:#01546b; color:white; border-radius:5px; padding:5px 0px 5px 5px; font-size:16px;}
.content{width:auto; padding-left:25px; }
.p_h1{padding-right:20px; margin:18px 0px; font-size:17px; line-height:27px; color:black; text-align:justify;}

/*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 { max-width: 100%; height: auto; 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);
}