@charset "utf-8";

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	z-index:0;
	background-color:#bbbaba;
}

/* Level 1: //  #container  */
#container {
	width:960px;
	margin:0 auto 1em auto;
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 10px;
}
	
/* Level 2: // ===== START: #top ===== */
  #top {
	border:1px solid #29226d;
	position: relative;
	text-shadow:1px 1px 1px #000;
	background-image: url(../../img/title.gif);
  }
  
  /* Level 3: // ===== #top-header ===== */
    #top-header {
	height: 90px;
	/*border:1px solid #366;*/
	}
	
	 #top .logo-big {
		  float: left;
		  display: inline-block;
		  margin: 15px 0 0 23px;
		  line-height: 0.8em;
		  font-size: 3.4em;
		  font-weight: bold;
	  }
	  #top .logo-big a, 
	  #top .logo-big a:hover {
		  color: #FFF;
		  text-decoration: none;
	  }
	  #top .logo-big span.small {
		  font-size: 0.5em;
	  }
		



/* Level 2: // ===== START: #main_content ===== */
	#mainContent {
	padding:13px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#FFF;
	border:1px solid #366;
	margin-top:20px;
	margin-bottom:10px;
	float: none;
  }

  /* Level 3: // ===== #subject_matter ===== */
  	#subject_matter { 
		margin: 0px 0px 0px 188px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
		padding: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
		width:742px; 
	}

  /* Level 3: // ===== #sidebar1 ===== */
  	#sidebar1 {
		float: left; /* since this element is floated, a width must be given. This div has to float in order for the following div to appear next to it */
		width: 175px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
		margin:0px; 
		padding:0;
	}
	
		/*Level 4: // side navMenu with dropDown css ===== */
		#navMenu {
			width:175px;
			border-style: solid; 
			border-color: #acacac; /*glay*/
			border-width: 1px 0 0 0;
		}
		#navMenu ul {
			margin:0;
			padding:0;
			/*line-height:30px; This should equal the value of the height of the link, in order to center the text vertically */
		}
		#navMenu li {
			margin:0;
			width:100%;
			height:30px;
			list-style:none;
			float:left;
			position:relative;
			background:#F0F0F0; /*Background color at rest for everything */
		}
		#navMenu ul li a {
			text-align:left;
			text-decoration:none;
			display:block; /* This is so the rollover affects take place when one rolls over anywhere in the box defined by the parameters above */
			border:0;
			border-bottom:1px solid #ACACAC;/*glay*/
			padding: 0.6em 0.8em 0.6em 0.8em;
			color: #10248c;
			font-size: 1em;
			font-weight: bold;
		}
		
		
		#navMenu ul li.menu-header1 {
			height:36px;
		}
		#navMenu ul li.menu-header1 a {
			text-align:left;
			text-decoration:none;
			display:block; /* This is so the rollover affects take place when one rolls over anywhere in the box defined by the parameters above */
			border:0;
			border-bottom:1px solid #ACACAC;
			padding: 0.6em 0.8em 0.6em 0.8em;
			color: white;
			font-size: 1.2em;
			font-weight: bold;
			background: #10248c;
		}
		
		#navMenu ul li ul {  /*This is the nested list */
			position:relative;
			visibility:hidden;
			left:175px;
			top:-2em; 
			z-index:1000;
		}
		#navMenu ul li:hover ul {
			visibility:visible;
			z-index:1000;
		}
		
		#navMenu ul li ul li {
			height:auto;
		}
		#navMenu ul li:hover ul li a:hover {
			background-color: #FFC;  /*This color depends on your color scheme*/
			color: #10248c;
		}
		
		#navMenu  a:hover {
			color: #10248c;
			background:#FFC;  /*This color depends on your color scheme*/
		}
		
		#navMenu li.menu-header1 a:hover {
			color: #10248c;
			background:#FFC;  /*This color depends on your color scheme*/
		}
		
		.clearFloat {
			clear:both;
			margin:0;
			padding:0;
		}
		/* ===== end of dropDown css  ===== */
		
		#sponsers {
			margin-top:36px;
			width:175px;
		}
		#sponsers ul {
			margin:0;
			padding:0;
			list-style:none;
		}
		#sponsers ul li {
			margin: 0 2px 0.75em 12px;
		}
		
		#sponsers ul li.menu-header3 {
			padding: 6px 27px 6px 12px; 
			margin: 1.6em 0 0.5em 0; 
			list-style:none;
			float:left;
			position:relative;
			background: #10248c; 
		}
		#sponsers ul li.menu-header3 a {
			text-align:left;
			text-decoration:none;
			display:block; /* This is so the rollover affects take place when one rolls over anywhere in the box defined by the parameters above */
			border:none;
		}
		#sponsers ul li.menu-header4 {
			padding: 0px 27px 0px 12px; 
			margin: 1.6em 0 0.5em 0; 
			list-style:none;
			float:left;
			position:relative;
			
		}

  
		
		/* Level 4: FEATURE */
		#feature {
			margin: 0 0 40px 0;
			overflow: hidden;
			width:100%;
			z-index:1;
		}
		#feature h1{
			font-variant:small-caps;
		}
		#feature h4{
			text-transform:uppercase;
		}
		  /* Level 5: picture */
			.pic {
				width:448px;
				float:left;
				border:1px solid #000;
			}
		  /* Level 5: description */
			.desc {
				width:279px;
				float:right;
				padding-left:0px;
			}
			.desc img {
				border:1px solid #000;
				text-align:center;
			}
		
		/* Level 4: MAIN-COLUMN */
		#main-column {
	position:relative;
	z-index:1;
	width:650px;
	padding:1px;
	float:left; /* This div has to float (b/c it comes first) in order for the following div to appear next to it. Unfortunatly this means the #right-colun div is holding the size of #subject_matter div. */
		}
		  #main-column p {
			  padding:0 1em 0 1em;
			  text-align:justify;
		  }
		  
		  table#program {
			  text-align:center;
			  width:441px;
			  margin-bottom:1em;
		  }
		  table#program th{
			  text-align:center;
		  }
		  
		  
		  table#students {
			  width:440px;
			  margin:1em 0 2em 0;
		  }
		  table#students th{
			  padding:1px 5px 0 5px;
		  }
		  table#students td{
			  padding:1px 5px 0 5px;
			  border:1px solid #999;
		  }
		  
		  
		  #instructors ul {
			  list-style:none;
			  margin: 0 0 1em 0;
		  }
		  #instructors img.head_pic {
				margin:2px 4px 2px 4px;
				z-index:1;
				float:left;
				border:solid 1px #000;
			}
		  
		  
		  /******************************* start of pic_menu ******************/
		  #pic_menu {
			  width:448px; /* = [a width (137) + li margin (2)] * [#of icons(3)] */
			  padding:0 5px 0 5px;
			  margin:0 0 4em 0;
			  z-index:1;
		  }
		  
		  #pic_menu ul {
			  margin:0;
			  padding:0;
			  line-height:12px; /* = font-size + 2px */
		  }
		  
		  #pic_menu li {
			  margin:1px;
			  padding:0;
			  list-style:none;
			  float:left;
			  position:relative;
			  background:none;
			  z-index:1;
		  }
		  
		  #pic_menu ul li a {
			  text-align:center;
			  text-decoration:none;
			  height:215px; /* = picture size (100) + border (3) + padding (4) + [8*line-height] + p margin (1em = 12px) */
			  width:146px; /* = picture size (120) + border (3) + padding (16) */
			  display:block; /* This is so the rollover affects take place when one rolls over anywhere in the box defined by the parameters above */
			  color:#333;
			  font-family:Arial, Helvetica, sans-serif;
			  font-size:10px;
			  font-style:italic;
			  border:none;
		  }
		  #pic_menu ul li a img{
			  padding:2px;
			  background-color:#FFF;
			  border-top:1px #CCC solid;
			  border-right:2px #999 solid;
			  border-bottom:2px #999 solid;
			  border-left:1px #CCC solid;
			  z-index:1;
		  }
		  
		  #pic_menu ul li a p{
			  margin:0.5em 0 0.5em 0;
			  text-align:center;
		  }
		  
		  #pic_menu a:hover p {
			  text-shadow:0px 1px 1px #333;
			  text-decoration:underline;
		  }
		  /******************************* end: pic_menu ******************/
		    /* Level 3: // ===== #top-nav ===== */
	#top-nav {
	padding: 1px;
	height:32px;
	/*border:1px solid #366;*/
	}
	  
	  

	  #top-nav-body {
		  height: 32px;
	  }
	  
	  #top-nav h3 {
		  float: right !important;
		  margin: 8px 4px 0 23px !important;
		  font-size: 1.5em !important;
		  font-weight: bold !important;
		  color: #FFF !important;
	  }
	  
	  /*  ===== end: #top-nav ===== */


		
		/* Level 4: RIGHT-COLUMN */
		#right-column {
	position:relative;
	width:279px;
	padding:0;
	margin:0;
	margin-left:650px; /* the left margin on this div element creates the column to the left side of the page for the main-column div.  */
			
		}
			.news-box{
				margin:0 10px 1em 10px;
				background: #fbf6d9;
				border:#fedc66 1px solid;
				margin-bottom:2em;
			}
			.news-box h3{
				background-color:#fedc66;
				padding:5px 0 0 10px;
			}
			
			.news-box p {
				padding:5px;
				font-size:11px;
			}
			.news-box li {	
				font-size:11px;
			}
			
			img.conf_icon {
				padding:2px;
				z-index:1;
				float:left;
			}
		
		
/* Level 2: // ===== START: #footer ===== */

  #footer {
	border:1px solid #705353;
	background-color:#366;
	position: relative;
  }

#footer-body {
	color: #fff;
	background: #366;
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	border:#FFF 1px solid;
	height: 50px;
}

#footer a {
	color: #fff;
}
#footer a:hover {
	color: #fff;
	text-decoration:none;
}
#footer li.l-bord {
	border-left: 1px solid #FFF;
	padding-left: 0.6em;
}


ul.footer-top-text {
	list-style: none;
	margin:0;
	padding-top:10px;
	padding-left:0;
	padding-bottom:0;
	padding-right:25px;
}
ul.footer-top-text li {
	display: inline;
	padding: 0 0.6em 0 0;
	margin:0;
}


ul.footer-text  {
	float: left;
	line-height:24px;
	margin:0;
	margin-top:20px;
	font-size: 0.9em;
	color: #fff;
}
.footer-text li {
	margin-left:0;
	margin-right:25px;
	float: left;
	display:inline;
	list-style:none;
}
.footer-text a {
	display: block;
	float:left;
	color: #fff;
}
div.footer-text a img {
	float: left;
	margin:0;
	padding: 0 !important;
}


ul.footer-nav {
	float: right;
	list-style: none;
	margin: 20px 0 0 0;
	padding: 0 25px 0 0;
	text-transform: uppercase;
	font-weight: bold;
	color: #fff;
}
ul.footer-nav li {
	display: inline;
	float: left;
	padding: 0 1em;
}



/*========== END: footer ==========*/


p.menu {
	font-family: "Arial, Helvetica, sans-serif";
	font-size: 12px;
	background-color: #366;
	text-align: center;
	margin: 0px;
	height: 2em;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}
p.menu a {
	line-height: 2em;
	color: #FFF;
	text-decoration: none;
	display: block;
	float: left;
	width: 13.25em;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
}
p.menu2 {
	font-family: "Arial, Helvetica, sans-serif";
	font-size: 12px;
	background-color: #366;
	text-align: center;
	margin: 0px;
	height: 2em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
}
p.menu2 a {
	line-height: 2em;
	color: #FFF;
	text-decoration: none;
	display: block;
	float: left;
	width: 13.25em;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
	background-image: url();
}

p.menu a:hover {
	background-image: url();
}