/* - - - - - - - - - - - - - - - - - - - - - - - - - - - -


Title:		Charity Works Styling Sheet
Purpose:	Styling for home and subpage templates
Author:		Interactive Creative Team, FKQ Marketing and Avertising.
Contact: 	727-643-7821
Modified: 	02/12/09 

Notes:		Indented styles exist within the styles above them.
 

	Colors used on website:

	color:#006699; - Blue used for Headlines
	color:#666666; - Grey used for copy
	
	background-color:#EAEAEA; - Darker Grey used for large containers
	background-color:#F6F6F7; - Lighter Grey used for small containers
	
- - - - - - - - */


/* -------------------Clearing default styles------------------------- */

@import url("css/menu.css");


/*-------- Default Style --------*/
body,th,td,div,p,table,h1,h2,h3,h4,h5,h6.Normal,.NormalDisabled,.Head,.SubHead,.SubSubHead, a:link, a:visited, a:hover, input{color:#666666; font-family:Verdana, Arial, Helvetica, sans-serif;}
body,th,td,div,p,table,.Normal,.NormalDisabled,.Head,.SubHead,.SubSubHead, a:link, a:visited, a:hover{font-size:12px;}
h1, h2, h3, h4, h5, h6{color:#02659B;}
h1, h3, h5, h1 input{font-weight:bold;}
h2, h4, h6{font-weight:normal}
h1, h2, h1 input{font-size:14px;margin:10px 0;}
h3, h4{font-size:12px;margin:8px 0;}
h5, h6{font-size:10px;margin:6px 0;}


a,a:link,a:visited,a:active{color:#02659B; text-decoration:none; font-weight:normal; }
a:hover{color:#D00; text-decoration:underline; }
.Head, .SubHead, .SubSubHead, .Normal, .NormalDisabled, .NormalDisabled, .NormalBold, .NormalRed, .NormalTextBox
{font-family:Verdana, Arial, Helvetica, sans-serif;}
.Head{color:#2E3D47;font-weight:bold;}
.SubHead {color:#4C6171;}
.SubSubHead{color:#6E8AA0;}
.NormalRed {color:#F00;}
/*-------- Default Style --------*/

body{background:url(images/page-background_03.jpg) repeat-x;
	margin: 0px;
	padding: 0px;
	text-align: center;
	}

p{ margin: 10px;}
img {
	border:none;
	}
		
hr { color:#EAEAEA;
	height:1px;
	margin-top: 10px;
	margin-bottom:10px;
	}
		
h1{font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color:#006699;
	padding-left:10px;
	margin:0px;
	text-transform: uppercase;
	}
	
h2{font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#006699;
	padding:0px;
	margin:0px 0px 5px 0px;
	text-transform: uppercase;		
	}
ul 
{
	list-style-image:url(images/Blue_arrow.gif);
}	


/*-------------------Main div holding entire template----------------- */

#maincontainer{
	background-color:#FFFFFF;
	border-width: 0 1px 0 1px;
	border-style: solid;
	border-color:#9E9E9E;
	margin-left: auto;
	margin-right: auto;
	width: 772px;
	text-align: left;
	}

#contentContainer {
	width: 772px;
	margin: 0;
	padding: 0;
	background-image:url(images/contentContainerBG.gif);
	}
		

/*--------- header styles: Logo and Main Navigation -------------------*/

#headerdiv{width: 772px;
	height: 161px;
	background: url(images/header_backgrd.jpg) no-repeat;
	vertical-align:top;
	}

#toplogo{width:456px;
		height: 106px;
		display:inline;
		}

#topnav{
		width: 772px;
		height: 40px;
   		margin-bottom: 15px;
		background:url(images/CharityWorks_NavBG.jpg) no-repeat;
		}

/*------------------ main BLUE area styles ---------------------- */
		
	/* HOMEPAGE main blue area */
		#BlueBackgrd{
			width:740px;
			height:262px;
			margin:0px 16px 0px 16px;
			background:url(images/blue-backgrd-740x262.jpg) no-repeat;
			}
		
		/* HOMEPAGE main blue area with white copy*/
		#Bluearea-left{
			width: 462px;
			height: 176px;
			vertical-align:bottom;
			margin:15px 0px 0px 15px;
			padding:0px;
			float: left;
			}
		
		/* HOMEPAGE right blue area with Donate Girl image*/
		#Bluearea-home-donate{
			width:238px;
			height: 193px;
			vertical-align:bottom;
			float:right;
			position: relative;
			background: url(images/donate-girl.jpg);
			display: block;
			}	
			
			
				
		/* Mission Subpage right blue area with Mom and Boy image*/
		#Bluearea-mom-boy{
			width:238px;
			height: 194px;
			vertical-align:bottom;
			float:right;
			position: relative;
			background: url(images/Mom-boy.jpg);
			display: block;
			}	

		/* HOMEPAGE & SUBPAGE: Style for Large White Headline in main blue box */
		.BlueareaHeadline{
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size: 22px;
			font-weight: bold;
			color:#FFFFFF;
			}
			
		/* HOMEPAGE & SUBPAGE: Style for White copy under the Headline in main blue box */
		.BlueareaCopy{
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size: 12px;
			color:#FFFFFF;
			margin: 10px 0px 0px 0px;
			}
	
		/* HOMEPAGE & SUBPAGE */
		#BlueareaQuickNav{
			width:740px;
			/*height:66px;*/
			height: 10px;
			margin:0px;
			padding:0px;
			float:  left;
			}
/* ---------------- Quick Nav Styles ------------*/




/*------------------ QuickNav for Mission Page -----------------*/

#menu .Programs {
  width: 358px;
  height: 66px;
  background: url(images/quickNav/missionpg-learnprograms.jpg) no-repeat;
  left: 0px;
  top: 0px;
}

#menu .Directors {
  width: 382px;
  height: 66px;
  background: url(images/quickNav/missionpg-meetdirectors.jpg) no-repeat;
  left: 358px;
  top: 0px;

}


/*------------------ LEFT SIDE content containers -----------------*/

		/* darker grey box beneath light grey box*/
		#leftparentcontainer{
			background-color:#EAEAEA;
			width:484px;
			display: inline;
			float: left;
			margin: 10px 16px 10px 16px;
			padding:0px;
			}

		/* lighter grey TOP box with content in it*/ 
		#lefttop{
			background-color:#F6F6F7;
		    width: 434px;
			margin: 0 0 0 31px;
			padding: 10px;
			}
		
		/* HOMEPAGE: lighter grey BOTTOM box with content in it */
		#leftbottom{
			background-color:#F6F6F7;
		    width:434px;
			margin: 0 0 0 31px;
			padding: 10px;
			}

			
			
		 /*  HOMEPAGE & SUBPAGE: styles for copy inside left side containers */
		.leftCopy{
			font-family: Arial, Helvetica, sans-serif;
			font-size: 12px;
			margin: 0px;
			padding:0px;
			width:434px;
			color:#666666;
			}

		#greySpacer {
			width: 485px;
			}
		
		#whiteSpacer {
			width: 772px;
			}	
			
		#gBoxContainer {
			height: 130px;
		}
		
		#gBox {
			width: 122px;
			height: 100px;
			margin:5px;
			padding:6px;
			background-color:#EAEAEA;
			float:left;
			position:relative;
			}
			
		/*  HOMEPAGE: styles for the news boxes */
		#newsbox{
			font-family: Arial, Helvetica, sans-serif;
			background-color:#F6F6F7;
			width:425px;
			height: 100px;				
			font-size: 12px;	
			margin: 5px;
			color:#666666;
			}

		.newsbox-img{
			float:left;
			width:141px;
			height:56px;					
				}
					
		.newsbox-copy{
			font-family: Arial, Helvetica, sans-serif;
			width:259px;				
			font-size: 12px;
			margin: 0px 0px 15px 10px;
			color:#666666;
			float: left;
				}	
					
	
/* -------- Right side content containers on home and subpage ----------*/

		/* Right column */
		#rightparentcontainer{
			background-color:#FFFFFF;
			width:230px;
			min-height:493px;
			float: right;
			margin: 0;
			padding: 0 16px 0 0;
			}
			
		/* Blue Headline - Right column*/
		.rightHeading-home{
			font-family: Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 14px;
			color:#006699;
			padding: 5px 5px 10px 5px;
			}
			
		/*  HOMEPAGE */
		.rightCopy-home{
			font-family: Arial, Helvetica, sans-serif;
			font-size: 12px;
			color:#000000;
			padding: 5px;
			}
		
		.rightBtn-home {
			margin: 0 0 0 140px;
			width: 80px;
			}
		
		/* SUBPAGE: Top image - Right column*/
		#rightimage{
		    width:225px;
			padding: 0px 0px 10px 3px;
			}
		
		/* SUBPAGE: */
		.rightCopy-sub{
			font-family: Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 11px;
			color:#000000;
			}
		
		/* SUBPAGE: */
		.rightCopyRed-sub{
			font-family: Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 11px;
			color: #D72B1C;
			}

/*--------- Footer Container: blue box on bottom ----------- */

		#footerContainer{
			background-color:#027ea2;
			width:772px;
			margin: 0px;
			padding: 10px 0px 10px 0px;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 11px;
			color:#FFFFFF;
			text-align:center;
			clear:both;
			}

/* ------------------- link stlyes --------------------------*/

a:link{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#006699;
	text-decoration:underline;
	}
	
	
a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #424242;
	text-decoration:underline;
	}


a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #424242;
	text-decoration:underline;
	}
	
	
a:active{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #424242;
	text-decoration:underline;
	}
	
.links
{
	text-transform:uppercase;
}

#footerContainer a:link{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#FFFFFF;
	text-decoration:none;
	}


#footerContainer a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #C0C0C0;
	text-decoration:none;
	}
	
#footerContainer a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#C0C0C0;
	text-decoration:none;
	}


#footerContainer a:active{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #C0C0C0;
	text-decoration:none;
	}