@import url("topnav.css");
@import url("sidenav.css");


body{		
text-align: center; /* to correct the centering IE bug*/
font-size:1em;
background-color:#3B5F7B;
margin:15px 0px 0px 0px;
font-family:"Century Gothic";
background-color:#3B5F7B;

}




/* Set the default margins for all tags
	- helps floated divs to line-up properly in all browsers */
*{
margin:0px; 
padding:0px;
clear:none;
}

/* Firefox hack to show the vertical scroll bar at all timeS 
	- prevents page from shifting */
html {
overflow: scroll;	
} 

/* Default image styles */
img {
border:none;
padding:0px;
margin:0px;
}

/*
// Paragraph styles
*/
p.iframebody{
font-family:"Century Gothic";
font-size: 1em; 
font-weight:normal; 
text-align:justify; 
vertical-align:top;
}

p.figure{
font-family:"Century Gothic";
font-size: 0.9em; 
font-weight:normal; 
text-align:center; 
vertical-align:top;
}


.bullet1 ul	{padding:0px; margin:0px;}
.bullet1 li	{list-style-type:none; font-weight:bold;  font-size:1em;}
.bullet1 li li{padding-left: 15px; list-style:square; list-style-position:inside; font-weight:normal; font-size:1em;}

.bullet2 ul	{padding:0px; margin:0px;}
.bullet2 li	{list-style-type:dot; list-style-position:inside; font-weight:bold;  font-size:1em;}
.bullet2 li li{padding-left: 15px; list-style:square; list-style-position:inside; font-weight:normal; font-size:1em;}

/* 
// Containers for the 3 main sections in the page 
*/
#containerHeader{
width: 750px;
height: 120px;
margin-left: auto; 
margin-right: auto; 
background-color: #3B5F7B; 
}
 
#containerBody{ 		/*div*/
width: 746px; /*Plus 4px for border */
/*height:300px; must specify pixel value for hack - (???) - causes problems in IE7 */
display:table;	/* FF hack .... to regulate div height in FF*/
min-height:150px;
margin-left: auto;
margin-right: auto; 
background-color: #7E99AE; 
border:2px #2F4C63 solid; 
border-top-width:0px; 
border-bottom-width:0px;
}

#containerBottom{
width: 750px; 
height:30px;
margin-left: auto; 
margin-right: auto; 
vertical-align:middle;
text-align:center;
background-color: #3B5F7B; 
padding-top:2px;
background-repeat:no-repeat;
background-image:url(../images/menu1.gif); 
}


/* 
// Sub-containers for the different parts of the page
*/
#header a{
width:200px; 
height:70px; 
float:left;
margin-top:0px;
margin-left:0px;
text-align:right;
vertical-align:bottom;
background-color:#3B5F7B; 
background-repeat:no-repeat; 
background-image:url('../images/kc.gif');
}

.topnav{
width:750px; 
height:30px; 
float:left;
margin:20px 0px 0px 0px; 
background-repeat:no-repeat;
background-image:url(../images/menu.gif); 
}

.aboutpage{ /* div */
background-color: #B7CCDF;
margin-top: 30px 	
}

.leftcell {
width:10%; 
text-align:left; 
vertical-align:top;
background-color:#7E99AE; 
}

.titlecell{
width:90%; 
height:50px;
background-color:#B7CCDF;
}

.bodycell {
width:90%; 
padding:20px;
text-align:justify;
background-color:#B7CCDF;
}


.sidenav{	/*div*/
width:130px; 
height:100%;
float:left;
padding:0px;
text-align:left;
font-size:1em;
font-family:Arial;
font-weight:bold;
background-color: #7E99AE; 
clear:none;		/* Resolves the issue where floated dives whould SOMETIMES appear on top of each other */
}

.pagetitle{
float:left;
width:616px;	/* 746-130 px*/ 
background-color: #B7CCDF; 
clear:none;		/* Resolves the issue where floated dives whould SOMETIMES appear on top of each other */
}

.pagebody{
float:left;
width:576px;	/* 746-130 - 20 - 20px*/ 
height:100%;
text-align:left;
padding: 10px 20px 20px 20px;
background-color: #B7CCDF; 
clear:none;		/* Resolves the issue where floated dives whould SOMETIMES appear on top of each other */
}



/*
//Index Specific Styles
*/

.indexImageContainer{
float:left;
margin-top:40px;
padding-left:104px;		/* ( 746px-538px ) / 2  */
background-color:#7E99AE;
}

.indexImage{
float:left;
padding-right:10px;
}

.indexImage img{
width:125px; 
height:125px; 
border:1px #2F4C63 solid;
}

.indexText{
width:538px;	/*(10+1+125+1)*4 - 10 = 538*/
float:left;
margin: 0px;	/*IE BUG --- doubles margin in floated divs, in the same direction of float -- use padding*/
padding:20px 0px 20px 104px;	/* ( 746px-538px ) / 2  */
text-align:justify;
font-weight:normal;
font-size:1.0em;
color:#2F4C63;
font-family:"Century Gothic";
background-color:#7E99AE;
}


/*
// Links setup (bottom)
*/

.bottom a{
color: #CDD6DD; 
text-decoration: none; 
font-family:"Century Gothic"; 
font-size: 1em; 
padding:5px;
}

.bottom a:hover{
text-decoration: underline; 
}