/*****************************************************************************************
/* File: layout.css
/* Purpose: This file defines all of the layout containers used within the various site
/* 			templates. This sheet utilizes the idea of CSS specificity when creating
/*			new templates. This means that the body of each template that is not the
/*			default will have an ID assigned to the body.  This ID is used in all
/*			CSS layout rules that ovveride items in the default layout as well as any
/* 			global styles.
/****************************************************************************************/


/* -----------------------------------------------------------------------------------*/
/* ----------------------------->>> DEFAULT LAYOUT <<<--------------------------------*/
/* -----------------------------------------------------------------------------------*/
#site{ 
	background-color:#fff;
	border:2px solid #fff;
	margin:20px auto;
	position:relative;
	padding-top:15px;
	text-align:center;
	width:803px; 
	}

#header{ margin-bottom:4px; }
#printHeader{ display:none; }

#googleBar{ 
	position:absolute; 
	right:8px;
	top:5px;  
	width:250px;
	}

#content{ 
	display:inline;
	float:left; 
	padding:20px 40px;
 	margin-top:5px; 
	text-align:left;
	width:459px; 
	}

#sidebar{ 
	float:left; 
	margin-top:5px; 
	min-height:500px; 
	text-align:left; 
	width:264px; 
	}

#footer{ 
	background:url(../images/bkrnd_footer.png) repeat-x;
	clear:both !important; 
	color:#181e62; 
	font-size:1.1em;
	padding:25px 10px 20px 10px;
	}
#footer a{ color:#181e62; font-weight:bold;}
#footer a:hover{ border-bottom:1px dotted #181e62;}

/* -----------------------------------------------------------------------------------*/
/* --------------------------->>> ONE COLUMN LAYOUT <<<-------------------------------*/
/* -----------------------------------------------------------------------------------*/

#oneCol #content{ width:723px; }

/* -----------------------------------------------------------------------------------*/
/* ------------------------------->>> INDEX LAYOUT <<<--------------------------------*/
/* -----------------------------------------------------------------------------------*/
#index #site{ padding-top:30px; }
#index #footer{ background-image:none; padding-top:15px;}

#portholes{ background:url(../images/bkrnd_porthole.png) repeat-y; margin:5px 0;}
	#portholes a:hover{cursor:pointer; }

.porthole{ float:left; width:199px; margin-right:2px;}
	.porthole p{ font-size:1.1em; font-weight:bold; padding:3px 10px;}
	.porthole a{ color:#fff; }
.last{ margin-right:0 !important;}
.navy{ color:#181e62 !important; }

/* -----------------------------------------------------------------------------------*/
/* ---------------------------------->>> NAVIGATION <<<-------------------------------*/
/* -----------------------------------------------------------------------------------*/

#nav{
	background-color:#ffd428; 
	border-top:4px solid #ffd428;
	border-bottom:4px solid #ffd428;
	text-align:left;
	width:100%; 
	}
	#nav ul{margin-left:7px;}
	#nav li{ float:left; margin-right:5px; }
	#nav a{ display:block; height:24px; background-position:top left; text-indent:-9999em;  }
	#nav a:hover{ background-position:bottom left; }
	
	/*.topLevel{ z-index:5; position:relative; } */
	#opt1{ background:url(../images/nav_about.png); width:89px; position:relative; }
	#opt2{ background:url(../images/nav_services.png); width:162px; position:relative; }
	#opt3{ background:url(../images/nav_support.png); width:100px;  position:relative; }
	#opt4{ background:url(../images/nav_volunteer.png); width:100px; position:relative; }
	#opt5{ background:url(../images/nav_work.png); width:128px; position:relative; }
	#opt6{ background:url(../images/nav_events.png); width:77px; position:relative; }
	#opt7{ background:url(../images/nav_press.png); width:103px; position:relative; }
	
	#nav li ul { position: absolute; left:-999em; }

/* 
	Drop Down Contents
	Each drop down contains another <ul> with two items, the first item holds
	the contents and the second item is used to display the bottom of the
	drop shadowed box.
*/
.dropdown{ width:324px; margin-left:-3px !important; margin-top:-1px;  }
	.dropdown li{ width:324px; } /* test removal in IE */ 

.twoCol{background:url(../images/nav_dropdown.png) repeat-y !important; line-height:normal;}

	/* Second Level Display Styles */
	.top h1 	{ color:#181e62;  font-size:1.1em; font-weight:bold; margin:auto auto 3px 2px; text-transform:uppercase; border-bottom:1px solid #181e62;}
	.top ul		{ position:static !important; margin:0 0 0 2px !important;  }
	.top li		{ color:#4e4845;  font-size:1.2em; text-align:left; width:auto !important; float:none !important; display:inline !important;}
	.top a		{ color:#181e62;  height:auto !important; padding:1px; text-decoration:none; text-indent:0 !important; }
	.top a:hover{ background-color: #e9d47f; }

	/* Containers for the Second Level Links */
	.leftCol	{ float:left; padding:10px 7px 0 15px; width:140px; }		
	.rightCol	{ float:left; padding:10px 15px 0 7px; width:140px; }

.bottom {background:url(../images/nav_dropdown.png) bottom left !important; width:324px; height:20px;}
/* Nav End */


.single{ width:162px !important; margin-left:-3px !important; margin-top:-1px;  }
	.single li{ width:162px; } /* test removal in IE */
	.bottomSingle {background:url(../images/nav_dropdown_single.png) bottom left !important; width:162px; height:20px;}
	.oneCol{background:url(../images/nav_dropdown_single.png) repeat-y !important; line-height:normal;}



/* -----------------------------------------------------------------------------------*/
/* ------------------------>>> SUB NAVIGATION - (IN PAGE) <<<-------------------------*/
/* -----------------------------------------------------------------------------------*/

#subnav{ 
	color:#fff;
	margin-left:0 !important;
	position:absolute; 
	right:0;  
	top:240px; 
	}
	#subnav li{ list-style-type:none; margin-bottom:0;}
	#subnav ul{ display:none; left:12px; padding-bottom:0; position:absolute; top:28px; width:141px; margin-left:0 !important; }
	#subnav ul li{ font-size:90%; }
	#subnav a{ color:#fff; display:block; font-weight:normal !important; padding:5px 0; padding-left:12px; background-color:#aa0314; }
	#subnav a:hover{ background-color:#c60015; border:none;}
	#subnav img{ padding:0; margin:0;}



/* -----------------------------------------------------------------------------------*/
/* ------------------------------->>> SIDEBAR PODS <<<--------------------------------*/
/* -----------------------------------------------------------------------------------*/

.pod{  color:#fff; display:block; padding:5px; margin-bottom:5px;}
	.pod div{ padding:5px; }
	.pod p{ color:#fff; font-size:1.1em; line-height:1.3em; margin:5px;}
	
.ltblue{ background-color:#51c3f5; }
.ltblue:hover{ background-color:#41b2e4; }
	.ltblue div{ border:1px solid #181e62; text-align:left; padding-left:10px; }
	
.green{ background-color:#8fb83e; }
.green:hover{ background-color:#7ea236; }
	.green div{ border:1px solid #b1ce74; text-align:left; padding-left:10px; }
	.green img{ height:16px; width:231px; }

.dkblue{ background-color:#181e62; }
.dkblue:hover{ background-color:#1f277b; }
	.dkblue div{ border:1px solid #0771d4;}
	.dkblue h1{ background:url(../images/sidebar_elist.png) no-repeat; width:143px; height:17px; margin:8px 5px; text-indent:-9999px;}
	
.red{ background-color:#c60015; }
.red:hover{ background-color:#b80619; }
	.red div{ border:1px solid #ffd428; }
	.red h1{ background:url(../images/sidebar_kids.png) no-repeat; width:121px; height:17px; margin:8px 5px; text-indent:-9999px;}
	
.blue{background-color:#0771d4;}
	.blue div {border:1px solid #181e62;}
	.blue a{ color:#fff; }
	.blue a:hover{ border-bottom:1px dotted #fff;}
	.blue ul{ list-style-type:disc; margin-left:15px; color:#181e62; margin-bottom:8px;}
	.blue li{ margin-bottom:3px; }
	.blue img{ height:35px; width:232px; }