body{  margin:auto; background:url(../images/bg.png) #F3F3F3  repeat-x ;}
#wrapper{ width:1060px; height:auto; margin:auto;}
.clear {clear:both; height:0;}

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

nav{	padding-left: 100px; padding-top:8.5px;}
nav ul {padding: 0;	margin: 0;	list-style: none;  	}
nav li{	float: left; padding-right: 15px;}
nav a{
	float: left;
    color: #eee;
    margin: 0 5px;
    padding: 3px;
    text-decoration: none;
	border: 1px solid #831608;
	font: bold 17px Arial, Helvetica; 	
    background-color: #831608;
    background-image: -moz-linear-gradient(#bb413b, #831608);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));    
    background-image: -webkit-linear-gradient(#bb413b, #831608);
    background-image: -o-linear-gradient(#bb413b, #831608);
    background-image: -ms-linear-gradient(#bb413b, #831608);
    background-image: linear-gradient(#bb413b, #831608);
    -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: #bb413b;
    background-image: -moz-linear-gradient(#831608, #bb413b);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));      
    background-image: -webkit-linear-gradient(#831608, #bb413b);
    background-image: -o-linear-gradient(#831608, #bb413b);
    background-image: -ms-linear-gradient(#831608, #bb413b);
    background-image: linear-gradient(#831608, #bb413b);
}
nav a:active{
    background: #bb413b;
    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 15px;
	cursor: pointer;	
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#d4463c, #aa2618);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));      
    background-image: -webkit-linear-gradient(#d4463c, #aa2618);
    background-image: -o-linear-gradient(#d4463c, #aa2618);
    background-image: -ms-linear-gradient(#d4463c, #aa2618);
    background-image: linear-gradient(#d4463c, #aa2618);
}
nav a:hover span{	
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#aa2618, #d4463c);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));      
    background-image: -webkit-linear-gradient(#aa2618, #d4463c);
    background-image: -o-linear-gradient(#aa2618, #d4463c);
    background-image: -ms-linear-gradient(#aa2618, #d4463c);
    background-image: linear-gradient(#aa2618, #d4463c);
}
/* END Navigation */



/* START Slider */
#image-slider{
	width:1040px;
	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:1000px;
	height:298px;
	margin:0 auto;
	overflow:hidden;
	z-index:2;
}
/* START Slider */

#content-box { background: #FFF; width:1060px; min-height:500px; height:auto;}

.content-left{width:260px;height: 500px;margin-left:10px;margin-right:10px;float:left;}
.content-left #tab tr{  background:url(../images/tab1.png) no-repeat center; height:40px;}
.content-left #tab tr:hover{ background:url(../images/tab2.png) no-repeat center; }
.content-left #tab a{ font-size:18px; font-weight:bold; text-transform:capitalize; text-decoration:none; color:#000;}
.content-left #tab a:hover {	color: #FF9016;}

.content-right{width:250px;height: 500px;margin-left:10px;margin-right:10px;float:right;}
.content-right marquee{width:205px; height:370px;}
.notice { background:url(../images/notice.png); 	margin-top:0px;  height:40px;}
.notice i{ font-size:30px; font-weight:bold; text-transform:capitalize; text-decoration:none; color:#000; }
.content-home{margin-left:10px;	margin-right:10px; width:510px; height:480px; margin-left:280px;}
.content-home img{border:4px solid #800000 ; width:140px; height:170px; float:left; margin:10px 10px 20px 0; }
.content-home h1{font-size:22px; text-align:center; color:#ca3e33; margin-top:0px; height:30px; }
.content-home h2{font-size:20px; font-weight:bold; text-align:left; color:#ff9016; margin-top:0px; text-decoration:underline;}
.content-home p{font-size:16px; text-align:justify;}

#footer { background:url(../images/foot.png) no-repeat center; width:1060px; height:60px;}


#content-box-about { background: #FFF; width:1060px; min-height:500px; height:auto;}
.about{padding:10px 20px;}
.about h1{text-align:center; color:#ca3e33; margin-top:0px; height:30px; text-decoration:underline;}
.about p{color:black; font-size: 22px;  line-height:1.8em; text-align:justify; padding:0 20px;}
.about img{width:1020px;margin-bottom:-10px;}

#content-box-academic { background: #FFF; width:1060px; min-height:500px; height:auto;}
.academic{padding:10px 20px;}
.academic h1{text-align:center; color:#ca3e33; margin-top:0px; height:30px; text-decoration:underline;}
.academic p{color:black; font-size: 22px;  line-height:1.8em; text-align:justify; padding:0 20px;}
.academic img{width:200px;}

#content-box-course { background: #FFF; width:1060px; min-height:500px; height:auto;}
.course{padding:10px 20px;}
.course h1{text-align:center; color:#ca3e33; margin-top:0px; height:30px; text-decoration:underline;}
.course table{border:3px solid #ca3e33; width:90%;margin:20px;}
.course tr{border:3px solid #ca3e33;}
.course th{border:3px solid #ca3e33;background-color:#ca3e33; color:white; font-size:22px; text-align:center; font-weight:bold;padding:10px;}
.course td{border:3px solid #ca3e33; background-color:#fffd28; color:black; font-size:20px; text-align:center; font-weight:bold; padding:10px;}

#content-box-faculty { background: #FFF; width:1060px; min-height:500px; height:auto;}
.faculty{padding:10px 20px;}
.faculty h1{text-align:center; color:#ca3e33; margin-top:0px; height:30px; text-decoration:underline;}
.faculty p{color:black; font-size: 22px;  line-height:1.8em; text-align:justify; padding:0 20px;}

#content-box-contact { background: #FFF; width:1060px; min-height:500px; height:auto;}
.contact{padding:10px 30px;}
.contact h1{text-align:center; color:#ca3e33; margin-top:0px; height:30px; text-decoration:underline;}
.contact h2{text-align:center; color:white; margin-top:0px; height:30px; text-decoration:underline;}
.contact th{font-weight: bold; font-size:20px; color:white;}
.contact tr{font-weight: bold; color:white;}
.contact a{font-weight: bold; color:white; text-decoration:none;}
.contact .textfield {width:250px; height:40px; margin:10px 10px; border:2px solid #800000;}
.contact .msgfield{width:250px; height:70px; margin:10px 10px; border:2px solid #800000;}
.contact .button{text-decoration:none; color:#ca3e33; padding:5px 20px; background-color:white; border:4px solid #800000; margin-left:40px; border-radius:20px}

#content-box-attendance { background: #FFF; width:1060px; min-height:500px; height:auto;}
.attendance{padding:10px 20px;}
.attendance h1{text-align:center; color:#ca3e33; margin-top:0px; height:30px; text-decoration:underline;}
.attendance table{border:3px solid #ca3e33; width:90%;margin:20px;}
.attendance tr{border:3px solid #ca3e33;}
.attendance th{border:3px solid #ca3e33;background-color:#ca3e33; color:white; font-size:22px; text-align:center; font-weight:bold;padding:10px;}
.attendance td{border:3px solid #ca3e33; background-color:#fffd28; color:black; font-size:20px; text-align:center; font-weight:bold; padding:10px;}

#content-box-gallery { background: #FFF; width:1060px; min-height:500px; height:auto;}
.gallery{padding:0px 0px 30px 20px;}
.gallery h1{text-align:center; color:#ca3e33; margin-top:0px; height:30px; text-decoration:underline;}

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

#body-gallery
{	
	border: thin dotted #f2f2f2;
	height: auto;
	background-color: #f2f2f2;	
	float:center;
	width:1010px;
}
.box{width:100%; border:solid 1px #333333; box-shadow:3px 3px #2A3030;border-radius:5px; margin-bottom:-15px;}
.box_h1{width:99%; text-align:left; font-weight:bold; margin:3px 3px 6px 3px; background-color:#a3a3a3; color:#333333; border-radius:5px; padding:5px 0px 5px 5px; font-size:16px;}
.left_content{width:auto; text-align:justify;}
.p_h1{padding-right:5px; margin:18px; font-size:17px; line-height:27px; color:black; }

/*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);
}