BODY {
	/*this is shorthand and declares the background color */
	background:#FFFFFF;
	
	margin:0px 0px 0px 0px;
	/*margins are set to zero*/
	
	padding-top:0px;
	/*for Opera6*/
	
	line-height:15px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:100%;
	
	text-align:center;
	/*For Explorer - to align tables*/
}
      
p{
margin:10px 10px 10px;
text-align:left;
}

ul{
text-align:left;
}



/*This is the centered image code START*/

img {
border: 0;
margin-left: auto;
margin-right: auto;
display:block;}

/*Centered  Image code END*/

/*This aligns tables when the HTML has class="center"*/
 table.center {
 margin-left:auto; 
 margin-right:auto;
 }



 /*This sets the Horizontal Rule - both color and background-color are needed because of differing browsers*/
hr{
margin:10px 10px 10px; 
height: 2px; 
color: #0000ff; 
background-color: #0000ff;
} 

/* ================================================Here is the START of the Headline Fonts*/
H1{
	font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
	font-size:26px;
	color: #000000;
	text-align: center; MARGIN-TOP:20px; MARGIN-LEFT:10px; 
	line-height: 1.1em;
}


H2{
	font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
	font-size:20px;
	color: #000000;
	MARGIN-TOP:10px;
 MARGIN-LEFT:10px;   	text-align: center;	
}

H3 {
  font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
  font-size:18px;
 color: #000000;
 MARGIN-LEFT:10px; text-align: center
}

H4 {
  font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
  font-size:18px;
 color: #000000;
 MARGIN-LEFT:10px; text-align: left
}

H5 {
  font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
  font-size:16px;
 color: #000000;
 MARGIN-LEFT:10px; text-align: left
}

H6 {
  font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
  font-size:18px;
 color: #cc0000;
 MARGIN-LEFT:10px; text-align: center
} 

H7 {
  font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
  font-size:11px;
 color: #000000;
 MARGIN-LEFT:20px; 
 text-align: center
}

H8{
	font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
	font-size:20px;
	color: #000000;
	MARGIN-TOP:10px;
 MARGIN-LEFT:10px;   	text-align: left;
}

/*===========================================Here is the END of the Headline Fonts*/



#header {
	/* position:absolute; */
	/*top:0px;   */
	/*left:0px;   */
	margin-top:0px;
	margin-left:0px;
	width:100%;
	z-index:2;
	background-color:#ffffff;
        background-repeat: repeat-x;
        border-bottom: 2px solid #0000ff;
        height:103px;	
 	margin-bottom:0px;
	margin-right:0px;
}



#logo
{
  width: 950px;
  height:102px;
  margin-top: 1px;
  margin-left: 1%;
}






/*This is the Left Column======================*/
      
#navigation {
  /*  position:absolute;  */ /*The navigation on the left side, positioned absolutely*/
 /*   top:140px;  */
/*	left:5px;      */
/*	z-index:5;   */
    width:19%;
    
    float: left;
    
    font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
    line-height:75%;/*line-height set  in order to have the navigation elements better separated*/
	color:#000000;
	margin:0px 0px 0px 0px;
	text-align:left;
}
	
/*This is the Center Column====================*/
#content {
	/*  position:absolute;  */
	/*  top:140px;  */
	/*  left:190px;  */
	
	float: left;
	
	color:#000000;
	font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
	line-height:1.4em;
	width:53%;
/*	z-index:3;  */
}

div#content p{
line-height:1.4; 
font-size:13px
}

/*This is the Right Column========================*/
#extra {
	/*  position: absolute;  */
	/*  top: 140px;  */
	/*  left:73%;  */
	width: 26%;
	/*  z-index: 4;  */
	
	float:left;
	
	font-family: Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 13px;
	margin: 0px 0px 0px 0px;
	text-align: left;
	padding: 3px 5px 3px 5px;
}

div#extra p{
line-height:1.4; 
font-size:13px
}


/* Here's some clearing code that allows floats to work in all browsers===================*/

.clearfix:after {        
    content: ".";        
   display: block;        
    height: 0;        
    clear: both;        
    visibility: hidden;
}
.clearfix {display: inline-block;}        
* html .clearfix {height: 1%;}        
.clearfix {display: block;}        



/*=========================wrapper and footer================================*/

#wrapper {
 width:100%
 }




#footer {
   
   left: 1%;
   width: 100%;
	PADDING-RIGHT:0px;
	BORDER:#999999 1px solid;
	PADDING-LEFT:0px;
	FONT-SIZE:x-small;
	COLOR:#000000;
	PADDING-BOTTOM:3px;
	MARGIN:40px
	PADDING-TOP:6px;
	TEXT-ALIGN:center;
	line-height:16px;
	font-family:Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
	font-size:xx-small;
	background-color:#c0c0c0;
}	




/* MENU STARTS HERE */

#menu
{
  padding:0;
  margin-bottom: 10px;
  width: 180px;
  font-size:75%;
}

#menu ul
{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0; 
}

#menu li
{
  display:inline;
}

#menu ul.level-one a
{
  display: block;
  border: 1px solid #0000ff;
  padding: 4px;
  margin: 5px 0px 0px 10px;
  width: 150px !important;
  font-family: Verdana, Geneva, "Bitstream Vera Sans", Helvetica, sans-serif;
 font-weight: bold; color: #3C4B7B;
  background-color:#ffffff;
 text-decoration:none
}


#menu ul.level-one a:hover
{
  color:#FF6600;
  text-decoration:none;
  background-color:#DDD;
}



/* boxes */

.box h4, .externallinks h4
{
  font-family: Arial, Verdana, Geneva, "Bitstream Vera Sans", Helvetica, sans-serif;
  font-size: 94%;
  font-weight: bold;
  padding: 3px 0 4px 12px;
  margin:0 0 0 0;
  text-align: left;
  z-index: 0;
  color:#FFFFFF;
  -moz-border-radius-topleft: 11px;
  border-bottom: 5px solid #030675;    /* This is the shadow (below) color in the top of the right column boxes */
  background-color:#0000ff;                 /* This is the color in the top of the right column boxes */

}

#boxes {
  width: 240px;
  float:right;
  margin: 0 0 6px 20px;
}

#boxes .box, .externallinks 
{
  font-family: Arial, Geneva, "Bitstream Vera Sans", Helvetica, sans-serif;
  font-size:  98%;
  text-align: left;
  color: #000000;
  background-color: #0000ff;
  width: 230px;
  border: 1px solid #0000FF;
  z-index: 999;
  float:right;
  padding-bottom: 10px;
  list-style:none;
  margin: 6px;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 12px;
  background-color: #ffffff;
}


.more {
  text-align:right;
}

#content-body #boxes a.more {
  display:block;
  padding:3px 10px 0 0;
  border-bottom:0;
}

.box div {
  padding: 0 15px 0 15px;
}

#courselink {
  font-family: Arial, Geneva, "Bitstream Vera Sans", Helvetica, sans-serif;
  font-size:  14px;
  text-align: center;
  color: #3C4B6B;
  background-color: #ffffff;
  width: 500px;
  border: 1px solid #2D7BC3;
  padding-bottom: 10px;
 padding-left: 10px; padding-right: 10px; padding-top: 10px; list-style:none;
  margin: 6px;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-topright: 12px;
  -moz-border-radius-bottomleft: 12px;
  -moz-border-radius-bottomright: 12px;
  background-color: #ffffff;
}
#references {
  font-family: Arial, Geneva, "Bitstream Vera Sans", Helvetica, sans-serif;
  font-size:  11px;
  text-align: left; color: #3C4B6B;
  background-color: #ffffff;
  width: 500px;
  border: 1px solid #2D7BC3;
  padding-bottom: 10px;
 padding-left: 10px; padding-right: 10px; padding-top: 10px; list-style:none;
 margin: 6px;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-topright: 12px;
  -moz-border-radius-bottomleft: 12px;
  -moz-border-radius-bottomright: 12px;
  background-color: #ffffff;
}




/*---------- bubble tooltip #1 -----------*/
a.tt1{
    position:absolute;
    z-index:24;
    color:#3CA3FF;
	font-weight:bold;
    text-decoration:none;
}
a.tt1 span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt1:hover{ z-index:25; color: #aaaaff; background:;}
a.tt1:hover span.tooltip{
    display:block;
    position:absolute;
    top:-200px; left:0;
	padding: 15px 0 0 0;
	width:300px;
	color: #0000ff;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt1:hover span.top{
	display: block;
	padding: 30px 8px 0;
	background: url(images/bubble2.gif) no-repeat top;
   
}
a.tt1:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(images/bubble2_filler.gif) repeat bottom; 
}
a.tt1:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
	 background: url(images/bubble2.gif) no-repeat bottom;
   
}

/*---------- bubble tooltip #2 -----------*/
a.tt2{
    position:absolute;
    z-index:24;
    color:#3CA3FF;
	font-weight:bold;
    text-decoration:none;
}
a.tt2 span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt2:hover{ z-index:25; color: #aaaaff; background:;}
a.tt2:hover span.tooltip{
    display:block;
    position:absolute;
    top:-200px; left:0;
	padding: 15px 0 0 0;
	width:300px;
	color: #0000ff;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt2:hover span.top{
	display: block;
	padding: 30px 8px 0;
	background: url(images/bubble2.gif) no-repeat top;
   
}
a.tt2:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(images/bubble2_filler.gif) repeat bottom; 
}
a.tt2:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
	 background: url(images/bubble2.gif) no-repeat bottom;
   
}

/*=============START Unordered List Formatting=============*/
ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 2em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
background-color: #ffffff;
text-indent: 5px;
/*list-style-position: outside;*/
list-style-image: url(images/bullet.gif);
list-style-type: square;
padding: 6px;
margin: 2px;
}
/*=============END Unordered List Formatting=============*/

/*===========START Bottom of the Page Navigation Menu==========*/
#menubar
{
width: 800px;
margin-left: auto;
margin-right: auto;
}

#menubar a
{	width: 160px; height: 40px;
	display: block; 
	float: left;
	text-decoration: none;
	text-align: center; 
	margin: 0 0px;
	background: url(images/double_button1.png);
}

#menubar a:hover
{	background: url(images/double_button1.png) 0 -40px;
}

#menubar a span
{	font: bold 12px/12px arial; 
letter-spacing: 1px; color: #fff;
	position: relative; top: 12px;
}

.clear
{	clear: both;
}

/*===========END Bottom of the Page Navigation Menu==========*/