body { color: #3c3c3c; }

.clearleft { clear:left; }
.floatleft { clear:left; float:left; }
.nopadbot { padding: 10px 20px 0 20px; }
.pad10top { padding: 10px 20px 20px 20px; }

/* Typography */
h1 { margin: 20px 20px 0 20px; padding: 0 0 20px 0; font-size: 30px; font-family: "ITC Avant Garde Std XLt",Helvetica,Arial,Verdana,sans-serif; font-weight: normal; }
h2 { margin: 0; padding: 10px 20px 0px 20px;; font-size: 18px; font-family: "ITC Avant Garde Std XLt",Helvetica,Arial,Verdana,sans-serif; font-weight: normal; }
h3 { margin: 0; padding: 10px 20px 0px 20px; font-size: 18px; font-family: "ITC Avant Garde Std XLt",Helvetica,Arial,Verdana,sans-serif; font-weight: normal; }
h4 { margin: 0; padding: 10px 20px 0px 20px; font-size: 14px; font-family: "ITC Avant Garde Std XLt",Helvetica,Arial,Verdana,sans-serif; font-weight: normal; }

#index h1, #about h1, #about h2, #about h3, #about h4 { color: #f78f1e; }
#programs h1, #programs h2, #programs h3, #programs h4 { color: #6DC566; }
#helpout h1, #helpout h2, #helpout h3, #helpout h4 { color: #A9218E; }
#features h1, #features h2, #features h3, #features h4 { color: #524E86; }

h1 { border-bottom: 1px solid;}

p { padding: 10px 20px 10px 20px; font-size: 14px; line-height: 19px; }

a { font-weight: bold; text-decoration: none; color: #fff; }
a:hover { color: #fff; }


#about a { font-weight: bold; text-decoration: none; color: #f78f1e; }
#about a:hover { text-decoration: underline; }
#programs a { font-weight: bold; text-decoration: none; color: #6DC566; }
#programs a:hover { text-decoration: underline; }
#helpout a { font-weight: bold; text-decoration: none; color: #A9218E; }
#helpout a:hover { text-decoration: underline; }
#features a { font-weight: bold; text-decoration: none; color: #524E86; }
#features a:hover { text-decoration: underline; }

#contain { overflow: hidden; background: url(/media/images/container_background.gif) repeat-x #747474; }

/* INDEX */
#index #banner { height: 320px; }
#index #banner_logo { width:450px; height: 320px; margin-right: 10px; background: #fff; }
#index #banner_logo img.logo { float: left; margin: 0; padding:0; height: 220px; }
#index #banner_logo a { float:left; margin: 80px 0 0 20px; padding: 0; }
#index #banner_logo h2 { font-size: 32px; }
#index #banner_content { float: left; margin-right: 10px; width:215px; height: 240px; }
#index #banner_video { width: 420px;}


/* HEADER */
#header { margin: 10px; height: 50px; }
#header_text p { padding: 16px 20px; color: #fff; text-align: right; }
#header a { font-weight: bold; text-decoration: none; color: #fff; }
#header a:hover { text-decoration:none; }
#header a.facebook { padding: 7px 0 10px 33px ; background: url(/media/images/facebook_icon.png) 0 0 no-repeat; }
#header a.twitter { padding: 7px 0 10px 33px ; background: url(/media/images/twitter_icon.png) 0 0 no-repeat; }
#header a.youtube { padding: 7px 0 10px 33px ; background: url(/media/images/youtube_icon.png) 0 0 no-repeat; }
#index #header { background: #f78f1e; }
#about #header { background: url(/media/images/about_header_background.jpg) #f78f1e; }
#programs #header { background: url(/media/images/programs_header_background.jpg) #6DC566; }
#helpout #header { background: url(/media/images/help_header_background.jpg) #A9218E; }
#features #header { background: url(/media/images/features_header_background.jpg) #524E86; }

/* BANNER */
#banner { margin-bottom: 10px; height: 240px; }
#about #banner { background: url(/media/images/about_banner_background.jpg) #f78f1e; }
#programs #banner { background: url(/media/images/programs_banner_background.jpg) #6DC566; }
#helpout #banner { background: url(/media/images/help_banner_background.jpg) #A9218E; }
#features #banner { background: url(/media/images/features_banner_background.jpg) #524E86; }

#banner_logo { float:left; margin:0; padding:0; width:580px; height: 240px; }
#banner_video { float:left; margin:0; padding:0; width:320px; height: 240px; }

/* NAVIGATION */
#nav a { color: #fff; }
#nav a:hover, #nav a:active { color: #fff; }

#apps { float: left; margin-bottom: 10px; width: 230px; background: #fff; }
#apps h2 { margin: 10px; padding: 0; color: #f78f1e; }
#apps p { padding: 0px 10px 10px 10px; font-size: 11px; font-color: #333; }
#apps p a { color: #000; }
#apps p a:hover { color: #f78f1e; }

ul#nav { float: left; margin-left: -10px; padding: 0; font-family: Helvetica, Arial, Sans-serif; font-weight: bold; }
ul#nav li { margin: 0 0 10px 10px; padding: 10px; width: 210px; color: #fff; background: #d4d4d4; }
ul#nav li a { display: block; }
ul#nav li a:hover { text-decoration: none; }

ul#nav li#subpage { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: none; }
ul#nav li#subpage:hover { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav li#subpage a { display: block; font-family: Helvetica, Arial, Sans-serif; font-weight: normal; font-size: 14px; color: #d7d7d7; }
ul#nav li#subpage a:hover { color: #fff; text-decoration: none; }

ul#nav li#subsub { margin: -5px 0 5px 0; padding: 3px 0 5px 40px; width: 190px; color: #fff; background: none; }
ul#nav li#subsub:hover { margin: -5px 0 5px 0; padding: 3px 0 5px 40px; width: 190px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav li#subsub a { display: block; font-family: Helvetica, Arial, Sans-serif; font-weight: normal; font-size: 14px; color: #d7d7d7; }
ul#nav li#subsub a:hover { color: #fff; text-decoration: none; }


ul#nav.our-mission li#subpage.mission { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.our-mission li#subpage.mission a { font-weight: bold; color: #fff; }

ul#nav.history li#subpage.history { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.history li#subpage.history a { font-weight: bold; color: #fff; }

ul#nav.staff li#subpage.staff { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.staff li#subpage.staff a { font-weight: bold; color: #fff; }

ul#nav.how-to-reach-us li#subpage.contact { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.how-to-reach-us li#subpage.contact a { font-weight: bold; color: #fff; }

ul#nav.advocacy-education-policy li#subpage.advocacy-education { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.advocacy-education-policy li#subpage.advocacy-education a, ul#nav.jet-juvenile-court-education-task-force li#subpage.advocacy-education a, ul#nav.higher-education-initiative  li#subpage.advocacy-education a, ul#nav.foster-youth-education-support-seminars-for-social-workers  li#subpage.advocacy-education a { font-weight: bold; color: #fff; }

ul#nav.jet-juvenile-court-education-task-force li#subsub.jet { margin: -5px 0 5px 0; padding: 3px 0 5px 40px; width: 190px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.jet-juvenile-court-education-task-force li#subsub.jet a { font-weight: bold; color: #fff; }

ul#nav.higher-education-initiative li#subsub.hei { margin: -5px 0 5px 0; padding: 3px 0 5px 40px; width: 190px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.higher-education-initiative li#subsub.hei a { font-weight: bold; color: #fff; }

ul#nav.foster-youth-education-support-seminars-for-social-workers li#subsub.foster-education { margin: -5px 0 5px 0; padding: 3px 0 5px 40px; width: 190px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.foster-youth-education-support-seminars-for-social-workers li#subsub.foster-education a { font-weight: bold; color: #fff; }

ul#nav.youth-education-scholars-program-yes li#subpage.yes-program { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.youth-education-scholars-program-yes li#subpage.yes-program a, ul#nav.youth-education-scholars-program-yes li#subpage.yes-program a, ul#nav.middle-school-foster-youth-msfy-education-program-its-all-about-middle-school li#subpage.yes-program a, ul#nav.academic-enrichment li#subpage.yes-program a { font-weight: bold; color: #fff; }

ul#nav.higher-educationvocational-program li#subsub.academic-enrichment { margin: -5px 0 5px 0; padding: 3px 0 5px 40px; width: 190px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.higher-educationvocational-program li#subpage.yes-program a, ul#nav.higher-educationvocational-program li#subsub.academic-enrichment a { font-weight: bold; color: #fff; }

ul#nav.higher-education-vocational-program li#subsub.youth-education-scholarship { margin: -5px 0 5px 0; padding: 3px 0 5px 40px; width: 190px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.higher-education-vocational-program li#subpage.yes-program a, ul#nav.higher-education-vocational-program li#subsub.youth-education-scholarship a { font-weight: bold; color: #fff; }

ul#nav.middle-school-foster-youth-msfy-education-program-its-all-about-middle-school li#subsub.middleschool-foster-education { margin: -5px 0 5px 0; padding: 3px 0 5px 40px; width: 190px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.middle-school-foster-youth-msfy-education-program-its-all-about-middle-school li#subsub.middleschool-foster-education a { font-weight: bold; color: #fff; }

ul#nav.academic-enrichment li#subsub.academic-enrichment { margin: -5px 0 5px 0; padding: 3px 0 5px 40px; width: 190px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.academic-enrichment li#subsub.academic-enrichment a { font-weight: bold; color: #fff; }

ul#nav.ways-to-give li#subpage.give { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.ways-to-give li#subpage.give a { font-weight: bold; color: #fff; }

ul#nav.dream-makers li#subpage.dream-makers { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.dream-makers li#subpage.dream-makers a { font-weight: bold; color: #fff; }

ul#nav.partnerships li#subpage.partnerships { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.partnerships li#subpage.partnerships a { font-weight: bold; color: #fff; }

ul#nav.volunteer li#subpage.volunteer { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.volunteer li#subpage.volunteer a { font-weight: bold; color: #fff; }

ul#nav.volunteer-form li#subsub.volunteer-form { margin: -5px 0 5px 0; padding: 3px 0 5px 40px; width: 190px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.volunteer-form li#subsub.volunteer-form a { font-weight: bold; color: #fff; }

ul#nav.articles li#subpage.articles { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.articles li#subpage.articles a { font-weight: bold; color: #fff; }

ul#nav.events li#subpage.events { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.events li#subpage.events a { font-weight: bold; color: #fff; }

ul#nav.newsletters li#subpage.newsletters { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.newsletters li#subpage.newsletters a { font-weight: bold; color: #fff; }

ul#nav.spotlights li#subpage.spotlights { margin: -5px 0 5px 0; padding: 3px 0 5px 20px; width: 210px; color: #fff; background: url(/media/images/active_arrow.png) 0 0 no-repeat; }
ul#nav.spotlights li#subpage.spotlights a { font-weight: bold; color: #fff; }

#about ul#nav li#about, ul#nav li#about:hover { background: #f78f1e; }
#programs ul#nav li#programs, ul#nav li#programs:hover { background: #6DC566; }
#helpout ul#nav li#helpout, ul#nav li#helpout:hover { background: #A9218E; }
#features ul#nav li#features, ul#nav li#features:hover { background: #524E86; }


/* Layouts */
#content { padding-bottom: 20px; margin-bottom: 10px; background: #fff; min-height: 400px; }
#content img { margin: 10px 20px 10px 20px; background: #fff; }

#content ul { margin: 10px 20px; }

#article { margin: 10px 20px 0 20px; padding: 0; width: 660px; border-bottom: 1px solid #524E86; }
#article h3, #article h4 { margin: 5px 0; padding: 0; }
#article p { margin: 10px 0 20px 0; padding: 0; }
#article a { font-size: 11px; color: #524E86; }
#article a:hover { text-decoration: underline; }
#article p span.attachments { margin: 10px 0; padding: 5px; background: #ebe9ff; }

#content ul { padding: 0 20px 0 20px; }
#content ul li { margin: 5px 20px 5px 20px; list-style: square; font-size: 12px; line-height: 18px; }

ul#address { padding: 0 0 20px 0; }
ul#address li { margin: 0 20px 0 20px; list-style: none; font-size: 14px; line-height: 18px; }

#board_members { margin: 0 0 0 0; }
#board_members h1 { margin-bottom: 20px; }
#member { margin: 0 20px 0 20px; height: 120px; }
#member_exec { margin: 0 20px 0 20px; height: 100px; }

ul#staff { margin:0; padding: 0; }
ul#staff li { margin: 0; padding:0; list-style: none; font-size: 12px; line-height: 18px; }
ul#staff li.name { margin-bottom: 5px; font-size: 21px; line-height: 18px; }

ul#dreamlist { margin: 0 0 0 5px; padding:0; }
ul#dreamlist li { float: left; margin: 5px 15px; width: 140px; height: 30px; list-style: none; font-size: 12px; line-height: 16px; }

#dream { clear: left; }

table#event_list { margin: 0 20px 20px 20px; width: 660px; font-size: 12px; }
table#event_list tr { text-align: center; }
table#event_list tr.head { border-bottom: 1px solid #524E86; }
table#event_list tr.head td { font-size: 14px; padding: 10px 5px; color: #524E86; }
table#event_list tr.odd:hover, table#event_list tr.even:hover { color: #fff; background: #524E86; }
table#event_list tr.odd:hover a, table#event_list tr.even:hover a { color: #fff; }
table#event_list tr.odd { background: #fff; }
table#event_list tr.odd td { padding: 10px 5px; }
table#event_list tr.even { background: #ebe9ff; }
table#event_list tr.even td { padding: 10px 5px; }
table#event_list a { display: block; color: #333; }

#moreinfo p { padding: 10px 20px; }

#rightcol { margin: 20px 0; }
#map { margin: 0 0 10px 0; padding:0; width: 210px; height: 300px; }
#rightcol a { font-size: 11px; color: #524E86; }

#footer p { margin-left: 20px; padding: 10px;  }

/* Volunteer Form */
#volunteer_info {  }
#volunteer_info p { margin: 0 0 20px 0; }

#volunteer_form { width: 680px; }
#volunteer_form #errors { margin: 20px 20px 0 20px; padding: 5px; background: #A9218E; font-size: 12px; color: #fff; }
#volunteer_form ul { overflow: hidden; margin: 20px 0 0 0; }
#volunteer_form ul li { display: block; float: left; overflow: hidden; margin: 0 0 20px 0; width: 320px; }
#volunteer_form ul li label { float: left; width: 110px; margin: 5px 20px 0 0; text-align: left; font-size: 12px; font-weight: bold; }
#volunteer_form ul li.option { display: block; overflow: hidden; float: left; width: 190px; margin: 10px 20px 10px 0; }
#volunteer_form ul li.option label { float: left; width: 160px; margin: 5px 10px 0 0; text-align: left; font-size: 12px; font-weight: bold; }
#volunteer_form ul li.other { clear: left; margin: 0 0 20px 0; }
#volunteer_form ul li.body { display: block; overflow: hidden; clear: left; margin-top: 20px; width: 640px; }
#volunteer_form ul li.submit { width: 635px; }
#volunteer_form ul li #form_submit { float: right; }
#volunteer_form ul li label.error { color: #A9218E; }
#volunteer_form ul li input { float: left; }
#volunteer_form ul li textarea { float: left; width: 500px; height: 100px; }