
body {margin-top:0px ;font-family: Verdana, Geneva, sans-serif; font-size:12px; line-height:20px; color:#989c86;  background:url(../images/body_bg.png) repeat-x; }

.main {width:1060px;padding:0;margin:0 auto;}

.clear {clear:both;width:100%;line-height:0;font-size:0;}

/* header =========================================================== */

header { background:url(../images/header_bg.jpg) 50% 0 no-repeat;padding:80px 0 0 0px;}
header h1{ float:left;width:376px;}
header .search{ float:right; margin-right:20px; padding-top:17px;}
header .search input{ background:#4b5e57;border: 1px solid #637a70;width:143px; padding: 4px 7px 5px 8px;color:#CCCCCC; font-family:Verdana, Geneva, sans-serif;font-size: 11px;}


/* Navigation ======================================================== */

#nav {
    	float: left;
   	    font: bold 12px Arial, Helvetica, Sans-serif;
    	border: 1px solid #121314;
    	border-top: 1px solid #2b2e30;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	overflow: hidden;
}

#nav ul {
	margin:0;
	padding:0;
	list-style:none;
}

#nav ul li {
	float:left;
}

#nav ul li a {
   	float: left;
	color:#d4d4d4;
    	padding: 10px 36.5px;
	text-decoration:none;
    	background:#3C4042;
 	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
	background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
	background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
	border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
 	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav ul li a:hover, 
#nav ul li:hover > a {
    	color: #252525;
    	background:#3C4042;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
	background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
	background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover, 
#nav ul li li:hover > a  {
    color: #2c2c2c;
  	background: #5C9ACD;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
	background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
	background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
    	border-bottom: 1px solid rgba(0,0,0,0.6);
    	border-top: 1px solid #7BAED9;
    	text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}



#nav li ul {
    	background:#3C4042;
    	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
    	background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	border-radius: 0 0 10px 10px;
    	-moz-border-radius: 0 0 10px 10px;
    	-webkit-border-radius: 0 0 10px 10px;
    	left: -999em;
    	margin: 35px 0 0;
    	position: absolute;
    	width: 190px;
    	z-index: 9999;
    	box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
    	left: auto;
}

#nav li ul a {
    	background: none;
    	border: 0 none;
    	margin-right: 0;
    	width: 115px;
    	box-shadow: none;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	border-bottom: 1px solid transparent;
    	border-top: 1px solid transparent;
}

#nav li li ul {
    	margin: -1px 0 0 160px;
    	-webkit-border-radius: 0 10px 10px 10px;
    	-moz-border-radius: 0 10px 10px 10px;
    	border-radius: 0 10px 10px 10px;
    	visibility:hidden;
}

#nav li li:hover ul {
    	visibility:visible;
}

#nav ul ul li:last-child > a {
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
}

#nav ul ul ul li:first-child > a {
	-moz-border-radius:0 10px 0 0;
	-webkit-border-radius:0 10px 0 0;
	border-radius:0 10px 0 0;
}



/* Content ======================================================== */

#content {padding:0px 0px 0px 0px; background-color: #f2f2f2; }

#body-main
{	
	border: thin dotted #f2f2f2;
	height: auto;
	background-color: #f2f2f2;
}
#bodyArea
{border: thin dotted #f2f2f2;
	background-color: #f2f2f2;
	height:900px;
}
#body-top
{
	width:auto;
	margin-left:50px;
	margin-right:50px;
	margin-top:30px;
}
#body-bottom
{
	width:auto;
	height: auto;
}
.bodyleft
{
	width:615px;
	margin-left:50px;
	height: 780px;
	float:left;
}
.bodyLeft h3 {
    color: #5a6daa;
    font-size: 24px;
    line-height: 20px;
    margin-bottom: 20px;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-transform:capitalize;
	font-style:italic;
	text-decoration:underline;
}
.bodyLeft p{
	color:#333333;
	   font-size: 12px;
	   text-align:justify;
}

.bodyright
{
	width:320px;
	height: auto;
	margin-right:10px;
	float:right;
}
.bodyright img
{
	margin-left:20px;
	margin-top:5px;
}
.p2{color:Gray;}
.p2:hover{color:Black;}

.p1{ color:Gray; font-size:12px;}

.p1 a {
	color: Gray;
	text-decoration: none;
}
.p1 a:hover {
	color: black;
	text-decoration: none;
}
ul{list-style:none;margin:0px;padding:0px;}
.h2 {
    color: #5a6daa;
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-transform:capitalize;
	font-style:italic;
}

.notice {
	margin:0 20px;
}
.notice b{
	color:black; 
}
.notice img
{
	margin-left:0px;
}
.notice marquee{
	width:280px;
	height:200px;
	margin:0px;
	padding:0px;
}

#list_box
{
	background-color: #333333;
	margin-bottom: 15px;
	height: 250px;
}
.column-left
{
	background-color: #333333;
	width:475px;
	margin-left:0px;
	float:left;
}
.column-right
{
	background-color: #333333;
	width:583px;
	margin-right:0px;
	float:right;
}
.column-content
{
	margin-left:200px;
	margin-top:20px;
	float:left;
}
.column-content a {
	text-decoration: none;
}
.list li{ margin-bottom:10px;}
.list a{font-size: 11px; line-height: 5px; color:#b68585;}
.list a:hover{color:white;}

h3{font-size: 13px; line-height: 20px; color:#989c86; margin-bottom:20px;}


#footer {background:none; text-align:center;}
#footer a{font-size: 11px; color:#555555;text-decoration: none;}
#footer a:hover{ color:#000;	text-decoration: none;}



/* Contact Page Css ======================================================== */


#contact {padding:10px 0px 0px 0px; background-color: #f2f2f2; }
#bodyform
{	
	border: thin dotted #f2f2f2;
	height: 620px;
	background-color: #f2f2f2;
}
#bodyform h3 {
	padding-left:50px ;
    color: #5a6daa;
    font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
}
#bodycontact
{	
	border: thin dotted #f2f2f2;
	height: 500px;
	background-color: #f2f2f2;
}
.contactleft
{
	width:615px;
	margin-left:50px;
	margin-top:20px;
	height: auto;
	float:left;
}
.contactright
{
	width:330px;
	height: auto;
	margin-right:10px;
	margin-top:20px;
	float:right;
}

.contactright h3 , .contactleft h3 {
    color: #5a6daa;
    font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-decoration:underline;
}
.button{ background:url(../images/button.jpg) repeat-x; display:inline-block; font-style:italic; color:black;font-size: 20px; line-height: 24px; margin: 17px 0px 0; padding:0px 12px 7px; height:20px; }
.button:hover{ background-color:#bbbea2; background-position: 0 -27px; color:#333333;}



/* about college Css ======================================================== */


#about {padding:0px 0px 0px 0px; background-color: #f2f2f2; }

#body-history
{	
	border: thin dotted #f2f2f2;
	height: 740px;
	background-color: #f2f2f2;
}
#body-vm
{	
	border: thin dotted #f2f2f2;
	height: 500px;
	background-color: #f2f2f2;
}
.hed-about
{
	margin-left:50px;
	margin-top:20px;
	height: auto;
	float:left;
}
.hed-about h3 {
    color: #5a6daa;
    font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-decoration:underline;
}
.detail-about
{
	width:700px ;
	margin-left:100px;
	margin-top:30px;
	padding-bottom:30px;
	height: 620px;
	float:left;
	color: black;
	font-size: 16px;
	line-height: 1.4em;
	text-align:justify;
}
.detail-about span
{ color: red;
  font-weight: bold;
}


/* Course Offered Css ======================================================== */


#course {padding:0px 0px 0px 0px; background-color: #f2f2f2; }

#body-course
{	
	border: thin dotted #f2f2f2;
	height: auto;
	background-color: #f2f2f2;
	padding-bottom:50px;
}
.hed-course
{
	margin-left:50px;
	margin-top:20px;
	height: auto;
	float:left;
}
.hed-course h3 {
    color: #5a6daa;
    font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-decoration:underline;
}
.content-course
{
	width:900px ;
	margin-left:75px;
	margin-top:125;
	height: 625px;
	float:center;
}
.content-course p {
	   color:#333333;
	   font-size: 16px;
	   text-align:justify;
}
.content-course span {
	   margin-right:150px;
}



/* Facilities Offered Css ======================================================== */


#facilities {padding:0px 0px 0px 0px; background-color: #f2f2f2; }

#body-facilities
{	
	border: thin dotted #f2f2f2;
	height: auto;
	background-color: #f2f2f2;
	padding-bottom:50px;
}
.hed-facilities
{
	margin-left:50px;
	margin-top:20px;
	height: auto;
	float:left;
}
.hed-facilities h3 {
    color: #5a6daa;
    font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-decoration:underline;
}
.content-facilities
{
	width:900px ;
	margin-left:75px;
	margin-top:125;
	height: auto;
	float:center;
}
.content-facilities table{width:760px;}
.content-facilities th{background-color:#333333; font-weight:bold; color:white; text-shadow: 1px 1px 2px black, 0 0 25px orange, 0 0 5px gray; text-align:center;box-shadow:3px 3px black; font-style: oblique; border-radius:5px; font-size:20px; padding:5px 0;}
.content-facilities td{padding:3px; text-align:center; background-color:#a3a3a3; color:black; border-radius:5px;box-shadow:3px 3px black; font-size:16px; padding:5px;}



/* COVID 19 Css ======================================================== */


#covid {padding:0px 0px 0px 0px; background-color: #f2f2f2; }

#body-covid
{	
	border: thin dotted #f2f2f2;
	height: auto;
	background-color: #f2f2f2;
	padding-bottom:50px;
}
.hed-covid
{
	margin-left:50px;
	margin-top:20px;
	height: auto;
	float:left;
}
.hed-covid h3 {
    color: #5a6daa;
    font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-decoration:underline;
}
.content-covid
{
	width:900px ;
	margin-left:75px;
	margin-top:125;
	height: auto;
	float:center;
}
.content-covid table{width:920px;}
.content-covid th{background-color:#333333; font-weight:bold; color:white; text-shadow: 1px 1px 2px black, 0 0 25px orange, 0 0 5px gray; text-align:center;box-shadow:3px 3px black; font-style: oblique; border-radius:5px; font-size:20px; padding:5px 0;}
.content-covid td{padding:3px; text-align:center; background-color:#a3a3a3; color:black; border-radius:5px;box-shadow:3px 3px black; font-size:16px; padding:5px;}


/* Tutorial Css ======================================================== */


#tutorial {padding:0px 0px 0px 0px; background-color: #f2f2f2; }

#body-tutorial
{	
	border: thin dotted #f2f2f2;
	height: auto;
	background-color: #f2f2f2;
	padding-bottom:50px;
}
.hed-tutorial
{
	margin-left:50px;
	margin-top:20px;
	height: auto;
	float:left;
}
.hed-tutorial h3 {
    color: #5a6daa;
    font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-decoration:underline;
}
.content-tutorial
{
	width:900px ;
	margin-left:75px;
	margin-top:125;
	height: auto;
	float:center;
}
.content-tutorial table{width:920px;}
.content-tutorial th{background-color:#333333; font-weight:bold; color:white; text-shadow: 1px 1px 2px black, 0 0 25px orange, 0 0 5px gray; text-align:center;box-shadow:3px 3px black; font-style: oblique; border-radius:5px; font-size:20px; padding:5px 0;}
.content-tutorial td{padding:3px; text-align:center; background-color:#a3a3a3; color:black; border-radius:5px;box-shadow:3px 3px black; font-size:16px; padding:5px;}


/* Staff Css ======================================================== */

#staff {padding:0px 0px 0px 0px; background-color: #f2f2f2; }

#body-staff
{	
	border: thin dotted #f2f2f2;
	background-color: #f2f2f2;
	height: auto;
	padding-bottom:50px;
}
.hed-staff
{
	margin-left:50px;
	margin-top:20px;
	height: auto;
	float:left;
}
.hed-staff h3 {
    color: #5a6daa;
    font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-decoration:underline;
}
.content-staff
{
	width:900px ;
	margin-left:75px;
	margin-top:125;
	float:center;
	color:black;
	height:auto;
	margin-bottom:50px;
	border:solid 1px #a1c7fa; box-shadow:3px 3px #2A3030;border-radius:5px; margin-bottom:25px;
}


/* Gallery Css ======================================================== */

#gallery {padding:0px 0px 0px 0px; background-color: #f2f2f2; }

#body-gallery
{	
	border: thin dotted #f2f2f2;
	height: auto;
	background-color: #f2f2f2;
}
.hed-gallery
{
	margin-left:50px;
	margin-top:20px;
	height: auto;
	float:left;
}
.hed-gallery h3 {
    color: #5a6daa;
    font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-decoration:underline;
}
.content-gallery
{
	width:900px ;
	margin-left:75px;
	margin-top:125;
	height: auto;
	float:center;
}

.box{width:100%; border:solid 1px #333333; box-shadow:3px 3px #2A3030;border-radius:5px; margin-bottom:25px;}
.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; }

/*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 { 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);
}


