/* OVERAL STYLE NOTES:

Styles are organized into the following sections:
		NORMALIZE & GLOBAL STYLING
		-------------
		TYPOGRAPHY, GLOBAL
		TYPOGRAPHY, RESOURCES
		TYPOGRAPHY, ARTICLES
		TYPOGRAPHY, SMARTSHEETS
		--------------
		LAYOUT, GLOBAL
		LAYOUT, HOME
		LAYOUT, AGE GROUPS MAIN
		LAYOUT, RESOURCES
		LAYOUT, ARTICLES
		LAYOUT, SMARTSHEETS
------------------------------------------------------------*/



/* NORMALIZE & GLOBAL STYLING
these styles normalize some tags and set global body styles

note on font sizing: to make sure that font sizes display consistently accross browsers,
p font size is set to 1.0em, body font size to 76%, and all font sizes from there are
set as percentages.
------------------------------------------------------------*/
html {
	text-align: center;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif; }
	
table { border-style: none; }
	
form, fieldset {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif; }
	
ul { list-style: none; }

p { font-size: 1.0em;
	color: #5f574f;
	margin: 0px; }
	
h1, h2, h3, h4, h5, h6, br, p, pre, dd, dt, blockquote, ul, ol, dl, address {
	font-size: 1.0em;
	margin: 0;
	padding: 0;
	text-align: left;
	font-weight: normal; }

body {
	text-align: center;
	background-color: #CBC7BF;
	margin-top: 25px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:76%;
	color: #5f574f;
	margin: 0;
	padding: 0; }


/* TYPOGRAPHY: GLOBAL, LANDING & RESOURCES PAGES
note: colors for some styles vary by section--
these styles are indented beneath each global style.
------------------------------------------------------------*/
a:link { color: #5F574F; text-decoration:none; }
a:visited { color: #5F574F; text-decoration:none; }
a:hover { color: #EAAB00; text-decoration:none; }
a:active { text-decoration: none; outline: none; }

#age20to30 p {font-size: 100%; line-height: 150%; padding: 0px 110px 1.25em 250px;}
#age30to50 p {font-size: 100%; line-height: 150%; padding: 0px 110px 1.25em 250px;}
#age50to65 p {font-size: 100%; line-height: 150%; padding: 0px 110px 1.25em 250px;}
#age65plus p {font-size: 100%; line-height: 150%; padding: 0px 110px 1.25em 250px;}
#home p { font-size: 100%; line-height: 150%; color: #FFFFFF; padding: 30px 330px 1.25em 75px;}

.callout {/*this style is used for the large, bold text in the intro paragraphs on the index and landing pages*/
	font-size: 150%;
	color: #FFFFFF;
	font-weight: bold;
	height: 50%;
	line-height: 153%; }
	#age20to30 .callout { color: #589199; }
	#age30to50 .callout { color: #8E9300; }
	#age50to65 .callout { color: #83334A; }
	#age65plus .callout { color: #B2541A; }
		
h3 {/*h3 is used for the large links on the landing pages*/
	color: #FFFFFF;
	font-weight: bold;
	font-size: 130%;
	padding: 10px 5px 10px 0px; }
	h3 a:link {color: #FFFFFF;}
	h3 a:visited {color: #FFFFFF;}
	h3 a:hover {color: #EAAB00;}
	h3 a:active {text-decoration: none; outline: none; }
	
h4 {/*h4 is used for the footer text (tagline, disclaimer, or text of clients' choosing)*/
	color: #FFFFFF;
	font-size: 95%;
	text-align: left;
	padding: 20px 35px 20px 35px; }
	h4 a:link {color: #FFFFFF; text-decoration: underline; }
	h4 a:visited {color: #FFFFFF; text-decoration: underline;}
	h4 a:hover {color: #EAAB00;}
	h4 a:active {outline: none; text-decoration: underline; }
	
h5 {/*h5 is used for navigation elements*/
	font-size: 80%;
	color: #5F574F;
	text-transform: uppercase;
	text-align: right;
	text-indent: 0px;
	vertical-align: top;
	padding: 10px 35px 20px 0px;
	margin: 0px; }
	#20to30 h5 { color: #589199;}
	#30to50 h5 { color: #8E9300;}
	#50to65 h5 { color: #83334A;}
	#65plus h5 { color: #B2541A;}

h6 {/*h6 is used for legal & disclaimer text*/
	font-style: italic;
	font-size: 100%;}
	#home_footer h6 {padding: 20px 30px 20px 75px;}
	
.copyright {font-size: 80%;}	

/* TYPOGRAPHY, RESOURCES PAGES 
------------------------------------------------------------*/

#resources h1 {font-size: 280%;
	color: #FFFFFF;
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	margin: 0px;
	padding: 0px 0px 15px 35px; }
	
#resources h5 { color: #FFFFFF;}
#resources h5 a:link {color: #FFFFFF;}
#resources h5 a:visited {color: #FFFFFF;}
#resources h5 a:hover {color: #EAAB00;}
#resources h5 a:active {text-decoration: none; outline: none; }
#resources1_top h5 { color: #ACC2C5;}
#resources2_top h5 { color: #C0C2A0;}
#resources3_top h5 { color: #BBA4A9;}
#resources4_top h5 { color: #D2ABA1;}
	
#resources ul {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style-type: none;}
	#resources_3column ul { width: 235px; }
	#resources_2column ul { width: 330px; }
		
#resources li {
	padding: 5px 10px 5px 14px;
	margin: 0px 0px 0px 0px;}
		
#resources .subhead {
	font-size: 105%;
	font-weight: bold; 
	background-color: #CBC7BF;
	margin: 0px 0px 0px 0px;
	padding: 8px 0px 8px 8px;
	background-image: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EAAB00;}

#resources .bulleted {
	background-image: url(images/smallarrow.gif);
	background-repeat: no-repeat;
	background-position: 5px 9px; }


/* TYPOGRAPHY, ARTICLES 
------------------------------------------------------------*/
#article p { padding: 0px 35px 1.5em 50px;}
#article ul { padding: 0px 35px 1em 50px; } 
#article li {
	padding: 0px 0px 0.5em 10px;
	background: url(images/bullet.gif) no-repeat 0px 6px;}
#article h1 {
	color: #ffffff;
	font-size: 150%;
	font-weight: normal;
	padding: 0px 0px 0px 50px;
	line-height: 120%;
	margin: 0px;}
#article h2 {
	color: #589199;
	font-size: 125%;
	line-height: 125%;
	padding: 30px 35px 1.5em 50px; }
#article h3 {
	color: #8E9300;
	font-weight: bold;
	font-size: 110%;
	line-height: 110%;
	padding: 0px 35px 0.65em 50px; }
#article h5 { color: #5F574F; text-align: left; padding: 10px 0px 50px 50px;}
#article h6 {padding: 0px 35px 1em 50px;}
#article sup { font-size: 75%;}
#article table { /*this style is used for article html charts*/
	padding: 0px 0px 0px 0px;
	margin: 0px auto 20px;
	border: 1px solid #589199;}
#article table h3 { /*this style is used for chart headers*/
	color: #5F574F;
	font-weight: bold;
	font-size: 110%;
	text-transform: uppercase;
	text-align: left;
	vertical-align: top;
	padding: 10px 10px 10px 10px;
	margin: 0px;}
#article table p { /*this style is used for chart text*/
	color: #000000;
	font-size: 100%;
	text-align: left;
	vertical-align: center;
	padding: 5px 10px 5px 10px;
	margin: 0px;}
#article table h4 { /*this style is used for chart exphasis text*/
	color: #589199;
	font-size: 110%;
	text-align: left;
	vertical-align: center;
	padding: 10px 10px 10px 10px;
	margin: 0px;}
#article table h6 {/*h6 is used for article legal & source text*/
	color: #000000;
	font-style: normal;
	font-size: 95%;
	padding: 10px 10px 10px 10px;
	margin: 0px;}
#article table ul { padding: 0px 10px 5px 10px; } 
#article table li {
	color: #000000;
	font-size: 100%;
	padding: 0px 0px 0px 10px;
	background: url(images/bullet_blue.gif) no-repeat 0px 6px;}
#articlecontent img { /*this style is used for article charts that are placed images*/
	padding: 0px 0px 0px 0px;
	margin: 0px auto 20px;}
	
	
/* TYPOGRAPHY, SMART SHEETS 
------------------------------------------------------------*/
#smartsheet p { padding: 0px 35px 1.5em 50px;}
#smartsheet ul { padding: 0px 35px 1em 50px; } 
#smartsheet li {
	padding: 0px 0px 0.5em 10px;
	background: url(images/bullet.gif) no-repeat 0px 6px;}
#smartsheet h1 /*h1 is used for the smartsheet title*/{
	color: #ffffff;
	font-size: 150%;
	font-weight: normal;
	padding: 0px 0px 0px 50px;
	line-height: 120%;
	margin: 0px;}
#smartsheet h2 /*h2 is used for the smartsheet intro paragraph*/{
	color: #589199;
	font-size: 125%;
	line-height: 125%;
	padding: 30px 35px 1.5em 50px; }
#smartsheet h3 /*h3 is used for smartsheet subheads*/{
	color: #8E9300;
	font-weight: bold;
	font-size: 110%;
	line-height: 110%;
	padding: 0px 35px 0.65em 50px; }
#smartsheet h5 /*h5 is used for navigation elements */{ color: #5F574F; text-align: left; padding: 10px 0px 50px 50px;}
#smartsheet h6 /*h6 is used for smartsheet legal, disclaimer, or notes text*/{padding: 0px 35px 1em 50px;}
#smartsheet sup { font-size: 75%;}
#smartsheet table { /*this style is used for smartsheet html charts*/
	padding: 0px 0px 0px 0px;
	margin: 0px auto 20px;
	border: 1px solid #589199;}
#smartsheet table h3 { /*this style is used for smartsheet chart headers*/
	color: #5F574F;
	font-weight: bold;
	font-size: 110%;
	text-transform: uppercase;
	text-align: left;
	vertical-align: top;
	padding: 10px 10px 10px 10px;
	margin: 0px;}
#smartsheet table p { /*this style is used for smartsheet chart text*/
	color: #000000;
	font-size: 100%;
	text-align: left;
	vertical-align: center;
	padding: 5px 10px 5px 10px;
	margin: 0px;}
#smartsheet table h4 { /*this style is used for smartsheet chart exphasis text*/
	color: #589199;
	font-size: 110%;
	text-align: left;
	vertical-align: center;
	padding: 10px 10px 10px 10px;
	margin: 0px;}
#smartsheet table h6 {/*this style is used for legal & source text of smartsheet charts*/
	color: #000000;
	font-style: normal;
	font-size: 95%;
	padding: 10px 10px 10px 10px;
	margin: 0px;}
#smartsheet table ul { padding: 0px 10px 5px 10px; } 
#smartsheet table li {
	color: #000000;
	font-size: 100%;
	padding: 0px 0px 0px 10px;
	background: url(images/bullet_blue.gif) no-repeat 0px 6px;}
#smartsheetcontent img { /*this style is used for smartsheet charts that are placed images*/
	padding: 0px 0px 0px 0px;
	margin: 0px auto 20px;}	
	
	
/* LAYOUT, GLOBAL
------------------------------------------------------------*/
	
div#container {
width : 800px; 
margin : 0 auto; 
padding : 0; 
text-align : left; }

div#header {
background-color : #928B81;
width : 800px;
height: 70px;
margin : 0; 
padding : 0; }

div#header_title {
float: left;
width : 550px;
height: 70px;
margin : 0; 
padding : 0;}

div#header_logo { float : right }


/* LAYOUT, HOME
------------------------------------------------------------*/
div#home { width : 800px; background-color : #ffffff; overflow : auto; }
div#home_top { width : 800px; height: 260px; margin : 0; padding : 0; background-color : #ffffff; background-image: url(images/home_main.jpg); background-repeat: no-repeat; }
div#home_bottom { width : 800px; height: 220px; margin : 0; padding : 0; background-color : #ffffff; }
div#home_footer {width : 800px; margin : 0; padding : 0; background-color : #928B81; }


/* LAYOUT, AGE GROUPS MAIN
note: the styles for the age group divs are identical except for
the background images in the top section and
the background colors on the bottom section and footers.
------------------------------------------------------------*/
div#age20to30 { width : 800px; overflow: auto; background-color : #ffffff; }
div#age20to30_top { width : 800px; height: 300px; margin : 0; padding : 0; background-image:url(images/camera.jpg); background-repeat: no-repeat;}
div#age20to30_bottom { width : 800px; height: 180px; margin : 0; padding : 0; background-color : #589199; }
div#age20to30_footer { width : 800px; margin : 0; padding : 0; background-color : #589199; }

div#age30to50 { width : 800px; overflow: auto; background-color : #ffffff; }
div#age30to50_top { width : 800px; height: 300px; margin : 0; padding : 0; background-image:url(images/family1.jpg); background-repeat: no-repeat;}
div#age30to50_bottom { width : 800px; height: 180px; margin : 0; padding : 0; background-color : #8E9300; }
div#age30to50_footer { width : 800px; margin : 0; padding : 0; background-color : #8E9300; }

div#age50to65 { width : 800px; overflow: auto; background-color : #ffffff; }
div#age50to65_top { width : 800px; height: 300px; margin : 0; padding : 0; background-image:url(images/bumpercars.jpg); background-repeat: no-repeat;}
div#age50to65_bottom { width : 800px; height: 180px; margin : 0; padding : 0; background-color : #83334A; }
div#age50to65_footer { width : 800px; margin : 0; padding : 0; background-color : #83334A; }

div#age65plus { width : 800px; overflow: auto; background-color : #ffffff; }
div#age65plus_top { width : 800px; height: 300px; margin : 0; padding : 0; background-image:url(images/bike1.jpg);	background-repeat: no-repeat;}
div#age65plus_bottom { width : 800px; height: 180px; margin : 0; padding : 0; background-color : #B2541A; }
div#age65plus_footer { width : 800px; margin : 0; padding : 0; background-color : #B2541A; }


/* LAYOUT, RESOURCES-GLOBAL
note: the styles for the divs resources1,2,3,&4 are identical except for 
the background image in the bottom section and
the background colors on the top section and footers.
------------------------------------------------------------*/
div#resources { width : 800px; background-color : #ffffff; overflow: auto; }

div#resources1_top { width : 800px; height: 90px; margin : 0; padding : 0; background-color : #589199; }
div#resources1_bottom { width : 800px; margin : 0; padding : 0; background-image: url(images/bluebar.gif); background-repeat: no-repeat; background-position: left top;}
div#resources1_footer { width : 800px; margin : 0; padding : 0; background-color : #589199; }

div#resources2_top { width : 800px; height: 90px; margin : 0; padding : 0; background-color : #8E9300; }
div#resources2_bottom { width : 800px; margin : 0; padding : 0; background-image: url(images/greenbar.gif); background-repeat: no-repeat; background-position: left top;}
div#resources2_footer { width : 800px; margin : 0; padding : 0; background-color : #8E9300; }

div#resources3_top { width : 800px; height: 90px; margin : 0; padding : 0; background-color : #83334A; }
div#resources3_bottom { width : 800px; margin : 0; padding : 0; background-image: url(images/purplebar.gif); background-repeat: no-repeat; background-position: left top;}
div#resources3_footer { width : 800px; margin : 0; padding : 0; background-color : #83334A; }

div#resources4_top { width : 800px; height: 90px; margin : 0; padding : 0; background-color : #B2541A; }
div#resources4_bottom { width : 800px; margin : 0; padding : 0; background-image: url(images/orangebar.gif); background-repeat: no-repeat; background-position: left top;}
div#resources4_footer { width : 800px; margin : 0; padding : 0; background-color : #B2541A; }


/* LAYOUT, RESOURCES--3 COLUMN VERSION
------------------------------------------------------------*/
#resources_3column {
	overflow: auto;
	padding: 0px 0px 20px 35px;
	vertical-align: top;
	text-align: left;
	margin: 0px 0px 20px 0px;}
	
#resources_3column_left {
	float: left;
	width: 235px;
	border: 1px solid  #EAAB00;
	padding: 0px 0px 15px 0px;
	margin: 0px 10px 0px 0px; }
	
#resources_3column_middle {
	float: left;
	width: 235px;
	border: 1px solid  #EAAB00;
	padding: 0px 0px 15px 0px;
	margin: 0px 10px 0px 0px; }
	
#resources_3column_right {
	float: left;
	width: 235px;
	border: 1px solid  #EAAB00;
	padding: 0px 0px 15px 0px;
	margin: 0px 0px 0px 0px; }
	
	
/* LAYOUT, ARTICLES
------------------------------------------------------------*/
div#article {
	background-color : #928B81;
	width : 700px;
	margin : 0 auto; 
	padding : 0;
	text-align : center;}

div#articleheader {
	width : 700px;
	height : 100px;
	margin : 0;
	padding : 0px 0px 0px 0px;
	background: url(images/gradientbar_100.gif) no-repeat left top;
	page-break-after: avoid;}
	
#articleheader table { /*this style is used for the title and logo area*/
	padding: 0px 0px 0px 0px;
	margin: 30px 0px 0px 0px;
	width: 700px;
	border-style: none;}

div#articlecontent {
width : 700px;
background-color : #ffffff; 
page-break-before: avoid; }

div#article_footer {
width : 700px;
margin : 0;
padding : 0;
background-color : #928B81; }


/* LAYOUT, SMART SHEETS
------------------------------------------------------------*/
div#smartsheet {
	background-color : #928B81;
	width : 700px;
	margin : 0 auto; 
	padding : 0;
	text-align : center;}

div#smartsheetheader {
	width : 700px;
	height : 100px;
	margin : 0;
	padding : 0px 0px 0px 0px;
	background: url(images/gradientbar_100.gif) no-repeat left top;
	page-break-after: avoid;}
	
#smartsheetheader table { /*this style is used for the title and logo area*/
	padding: 0px 0px 0px 0px;
	margin: 30px 0px 0px 0px;
	width: 700px;
	border-style: none;}

div#smartsheetcontent {
width : 700px;
background-color : #ffffff; 
page-break-before: avoid; }

div#smartsheet_footer {
width : 700px;
margin : 0;
padding : 0;
background-color : #928B81; }