body { 
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
background: #d0e2ff;
}

TD {
	font-family: Arial;
	font-size: 12px;
	color: #003366;
	line-height: 20px;
	
}

.blacktext { 
font-family: Verdana; 
color : #090602; 
font-size: 11px; 
}

.blacktext2 { 
font-family: Arial; 
color : #000000; 
font-size: 12px; 
}

.redtext2 { 
font-family: Arial; 
color : #cc0000; 
font-size: 12px; 
}

.whitetext2 {
	font-family: Arial;
	color : #003366;
	font-size: 9px;
}

.blacktextsmall { 
font-family: Arial; 
color : #2F5A91; 
font-size: 9px; 
}

.contenttext { 
font-family: Arial; 
color : #003366; 
font-size: 9px; 
}

.categorytext { 
font-family: arial; 
color : #333333; 
font style: bold;
font-size: 11px; 
}

#containerTop { 

padding: 0px; 
width: 879px; 
height: 334px; 
background: url(/images/header.jpg); 
background-repeat: no-repeat; 
} 


#containerTop2 { 

padding: 0px; 
width: 879px; 
height: 334px; 
background: url(images/header2.jpg); 
background-repeat: no-repeat; 
} 

#containerTop3 { 

padding: 0px; 
width: 879px; 
height: 334px; 
background: url(images/header3.jpg); 
background-repeat: no-repeat; 
} 

#containerTop4 { 

padding: 0px; 
width: 879px; 
height: 334px; 
background: url(images/header4.jpg); 
background-repeat: no-repeat; 
} 

#containerTop5 { 

padding: 0px; 
width: 879px; 
height: 334px; 
background: url(images/header5.jpg); 
background-repeat: no-repeat; 
} 

#containerCenter { 
 
padding: 0px; 
width: 879px; 
background: url(images/middle.jpg); 
background-repeat: repeat-y; 
} 

#containerCenter2 { 
 
padding: 0px; 
width: 879px; 
background: url(images/middle3_nav.jpg); 
background-repeat: repeat-y; 
} 
 
#containerBottom { 

padding: 0px; 
width: 879px; 
height: 36px; 
background: url(images/footer.jpg); 
background-repeat: no-repeat; 
} 

#containerBottom2 { 

padding: 0px; 
width: 879px; 
height: 36px; 
background: url(images/footer3_nav.jpg); 
background-repeat: no-repeat; 
} 

#specialsback {
	padding: 0px;
	width: 347px;
	height: 273px;
	background: url(images/specialsback.jpg);
	background-repeat: no-repeat;
}

#newsback {
	padding: 0px;
	width: 347px;
	height: 273px;
	background: url(images/newsback.jpg);
	background-repeat: no-repeat;
}

.specialstext {
	padding: 0px;
	text-align: center;
	margin-left: 33px;
	margin-right: 33px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;


}

img.b
{
 background-color: #f7d8a9;
 padding: 8px; 
 border: 1px solid #6f3d29;
}

img.c
{
 background-color: #eeeeee;
 padding: 3px; 
 border: 1px solid #eeeeee;
}

hr {color: #fff; background-color: #fff; border: 1px dotted #4A3200; border-style: none none dotted; }


td.leftborder {
	border-left: 1px solid #666666;
}
td.leftborder2 {
	border-left: 1px solid #666666;
}

td.rightborder {
	border-right: 1px solid #666666;
}
td.rightborder2 {
	border-right: 1px dotted #003366;
}

td.leftbottomborder {
	border-left: 1px solid #666666;
	border-bottom: 1px solid #666666;
}

td.lefttopborder {
	border-left: 1px solid #666666;
	border-top: 1px solid #666666;
}

td.topborder {
	border-top: 1px solid #cccccc;
}

.bottomborder {
	border-bottom: 1px solid #697a8d;
}
.bottomborder2 {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #4A3200;
}

.bottomborder3 {
	border-bottom: 1px dotted #003366;
}

.topborder3 {
	border-top: 1px dotted #90a6c8;
}

.leftbottomborder3 {
	border-left: 1px solid #677ca6;
    border-bottom: 1px dotted #213c7a;
}


.rightbottomborder3 {
	border-right: 1px dotted #f9b30d;
    border-bottom: 1px dotted #f9b30d;
}

.leftborder3 {
	border-left: 1px solid #677ca6;
    
}

.rightborder3 {
	border-right: 1px dotted #90a6c8;
    
}

.leftrightborder3 {
	border-right: 1px solid #677ca6;
    border-left: 1px solid #677ca6;
}

.leftbottomrightborder3 {
	border-bottom: 1px dotted #213c7a;
	border-right: 1px dotted #213c7a;
    border-left: 1px solid #677ca6;
}

td.leftrightborder {
	border-left: 1px solid #666666;
	border-right: 1px solid #666666;
}
td.leftbottomrightborder {
	border-left: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-right: 1px solid #666666;
}

td.lefttoprightborder {
	border-left: 1px solid #666666;
	border-top: 1px solid #666666;
	border-right: 1px solid #666666;
}

td.rightbottomborder {
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}
td.allsides {
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}

td.32border {
	
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
}

.myforms { 
background-color:#ffffff; 
color : #000000 ;
font-family: arial, helvetica, veranda; 
font-size: 12px; 
BORDER-RIGHT: #6297D2 1px solid;
BORDER-TOP: #6297D2 1px solid;
BORDER-LEFT: #6297D2 1px solid;
BORDER-BOTTOM: #6297D2 1px solid;
}


.button { 
background-color:#3F79CB; 
color : #E9EDF6 ;
font-family: arial, helvetica, veranda; 
font-size: 14px; 
font style: bold;
}

.redtextbold { 
font-family: arial, helvetica, veranda; 
color : #CC3300; 
font-size: 12px; 
font-weight: bold; 
line-height: 120%
}

.whitetextbold { 
font-family: arial; 
color : #ffffff; 
font-size: 12px; 
font-weight: bold; 
line-height: 120%
}


#coolmenu{
border: ;
width: 100%;
background-color: ;
}

#coolmenu a{
font: 11px Arial;
font style: ;
padding-left: 0px;
display: block;
width: 100%;
height: 20px;
color: #000066;
text-decoration: none;
border-right: 1px solid #cccccc;
}

#coolmenu a{
width: auto;
}

#coolmenu a:hover{
background-color: #ffffff;
filter:alpha(opacity=80);
-moz-opacity:30;
color: #000000;
}




#coolmenua{
border: ;
width: 100%;
background-color: ;
}

#coolmenua a{
font: 11px Arial;
font style: ;
padding: 2px;
padding-left: 0px;
display: block;
width: 100%;
height: 20px;
color: #000066;
text-decoration: none;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
}

#coolmenua a{
width: auto;
}

#coolmenua a:hover{
background-color: #ffffff;
filter:alpha(opacity=80);
-moz-opacity:30;
color: #000000;
}



#coolmenub{
border: ;
width: 100%;
background-color: ;
}

#coolmenub a{
font: 11px Verdana;
font-style: bold;
padding: 4px;
padding-left: 0px;
display: block;
width: 100%;
height: 20px;
color: #ffffff;
text-decoration: none;
border-right: 0px solid #cccccc;
border-right: 0px solid #cccccc;
border-bottom: 0px solid #cccccc;
}

#coolmenub a{
width: auto;
}

#coolmenub a:hover{
background-color: #728CCB;
filter:alpha(opacity=100);
-moz-opacity:30;
color: #ffffff;
}





#coolmenuc{
border: ;
width: 100%;
background-color: ;
}

#coolmenuc a{
font: 11px Arial;
font style: ;
padding: 3px;
padding-left: 0px;
display: block;
width: 100%;
height: 20px;
color: #000066;
text-decoration: none;
border-top: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#coolmenuc a{
width: auto;
}

#coolmenuc a:hover{
background-color: #ffffff;
filter:alpha(opacity=80);
-moz-opacity:30;
color: #000000;
}









   A:link {
	text-decoration: underline;
	color: #003366;
} A:visited {
	text-decoration: underline;
	color: #003366;
}
   A:hover {
	color: #003366;
	text-decoration: none;
}



.lcolors:link {color: #003366; text-decoration: underline;} 
.lcolors:visited {color: #003366; text-decoration: underline;} 
.lcolors:active {color: #003366; text-decoration: underline;} 
.lcolors:hover {color: #000000; text-decoration: none;} 

.lcolors2:link {color: #FF9900; text-decoration: underline;} 
.lcolors2:visited {color: #FF9900; text-decoration: underline;} 
.lcolors2:active {color: #FF9900; text-decoration: underline;} 
.lcolors2:hover {color: #eeeeee; text-decoration: underline;} 

.lcolors3:link {
	color: #003366;
	text-decoration: none;
	font-family: Arial;
	font-size: 9px;
} 
.lcolors3:visited {
	color: #003366;
	text-decoration: none;
	font-family: Arial;
	font-size: 9px;
} 
.lcolors3:active {
	color: #003366;
	text-decoration: none;
	font-family: Arial;
	font-size: 9px;} 
.lcolors3:hover {
	color: #003366;
	text-decoration: underline;
	text-align: right;
	font-family: Arial;
	font-size: 9px;
} 

.lcolors4:link {color: #C1D3F5; text-decoration: none;} 
.lcolors4:visited {color: #C1D3F5; text-decoration: none;} 
.lcolors4:active {color: #C1D3F5; text-decoration: none;} 
.lcolors4:hover {color: #C1D3F5; text-decoration: none;} 

.lcolors6:link {color: #000000; text-decoration: none;} 
.lcolors6:visited {color: #000000; text-decoration: none;} 
.lcolors6:active {color: #000000; text-decoration: none;} 
.lcolors6:hover {color: #000000; text-decoration: none;} 

.lcolors7:link {color: #003366; text-decoration: underline; font: 12px Arial;} 
.lcolors7:visited {color: #003366; text-decoration: underline; font: 12px Arial;} 
.lcolors7:active {color: #003366; text-decoration: underline; font: 12px Arial;} 
.lcolors7:hover {color: #003366; text-decoration: none; font: 12px Arial;} 


.hidden {
	display: none;
}


/* Now the problem we have, is that we also want the header image to change based on what page we are viewing. So we need to modify the #header rule */
body.about #header {
	height: 150px;
	background: #db6d16 url(images/header.jpg);
}

body.services #header {
	height: 150px;
	background: #db6d16 url(images/header.jpg);
}


/* sidebar floating to the right */
#sidebar-a {
	float: right;
	width: 320px;
	line-height: 18px;
}

#sidebar-a .padding {
	padding: 25px;
}

#sidebar-b {
	clear: both;
	width: 320px;
	line-height: 18px;
}

#sidebar-b .padding {
	padding-left: 100px;
	padding-top: 20px;
	
}

/* give margin-right the same width as the floating div to the right of it  */
#content {
	margin-right: 320px;
	line-height: 25px;	
}

/* padding as child div due to IE problems */
#content .padding {
	padding-left: 100px;
	padding-top: 20px;
	padding-right: 50px;
}



#content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	color: #42552F;
}


/* clear means that the footer will be below the right float colum */
#footer {
	clear: both;
	font-family: Arial;
	font-size: 10px;
	color: #c9c9c9;
	border-top: 1px solid #efefef;
	padding: 13px 25px 25px;
	line-height: 18px;
}

#footer a {
	color: #c9c9c9;
	text-decoration: none;
}

#footer a:hover {
	color: #db6d16;
}

/* Note that floated elements must have a width specified to work properly, so set the width to slightly larger than the nav actually needs, and set the text alignment to right so the text sits where it should */
#footer #altnav {
	width: 350px;
	float: right;
	text-align: right;
	padding-right: 40px;
}

#copyright {
	width: 350px;
	text-align: left;
	padding-right: 40px;
	padding-left: 40px;
	color: #42552F;
}



/* padding-right instead of margin-right because of IE bugs */
h1 {
	margin: 0;
	padding: 0;
	float: right;
	margin-top: 57px;
	padding-right: 31px;
}

/* Main Navigation */
/* This sets the main-nav div height to 50px, and strips all margins from the datalist. */
#main-nav { height: 65px; }
#main-nav dl { margin: 0; padding: 0; }



/* IE5 Mac Hack \*/ 
#main-nav {
	padding-left: 90px;
	padding-top:60px;
} 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */


/* This sets the definition titles (our individual nav item containers) to float left, which stacks them left to right, instead of one under the other. */
#main-nav dt { float: left; }


/* Sets the link to the same dimensions as its surrounding container, and hides the text using the overflow property. */
#main-nav dt a {
	display: block;
	height: 0px !important;
	height /**/:65px; /* IE 5/Win hack */ 
	padding: 65px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Sets the background position to move up 65px when a link is hovered. */
#main-nav dt a:hover {
	background-position: 0 -65px;
}

/* Sets the individual widths of each nav item, and the paths to each image.

Now if all your images are named as they are above, and are saved in the correct place, your navigation should work.

Last thing we need to do to make the navigation work, is to get the selected button states to show up when you are on the corresponding page.
 */

#main-nav dt#home,
#main-nav dt#home a { width: 115px; background-image: url(images/button_home.png); }

#main-nav dt#about,
#main-nav dt#about a { width: 95px; background-image: url(images/button_about.png); }

#main-nav dt#faq,
#main-nav dt#faq a { width: 95px; background-image: url(images/button_faq.png); }

#main-nav dt#activities,
#main-nav dt#activities a { width: 115px; background-image: url(images/button_activities.png); }

#main-nav dt#students,
#main-nav dt#students a { width: 115px; background-image: url(images/button_students.png); }

#main-nav dt#contact,
#main-nav dt#contact a { width: 115px; background-image: url(images/button_contact.png); }

#main-nav dt#logout,
#main-nav dt#logout a { width: 115px; background-image: url(images/button_logout.png); }

#main-nav dt#swaplist,
#main-nav dt#swaplist a { width: 115px; background-image: url(images/button_swaplist.png); }

#main-nav dt#calendar,
#main-nav dt#calendar a { width: 115px; background-image: url(images/button_calendar.png); }

#main-nav dt#members,
#main-nav dt#members a { width: 115px; background-image: url(images/button_members.png); }

body.home dt#home,
body.home dt#home a,
body.about dt#about,
body.about dt#about a,
body.faq dt#faq,
body.faq dt#faq a,
body.activities dt#activities,
body.activities dt#activities a,
body.students dt#students,
body.students dt#students a, 
body.logout dt#logout,
body.logout dt#logout a,
body.swaplist dt#swaplist,
body.swaplist dt#swaplist a,
body.calendar dt#calendar,
body.calendar dt#calendar a,
body.members dt#members,
body.members dt#members a,
body.contact dt#contact,
body.contact dt#contact a {
	background-position: 0 -133px;
}