/* CSS Document */

@import url("navigation.css");
@import url("flowplayer/scrollable-playlist.css");

/***** METRO ATLANTA PROJECT CSS *****/

/* THE BIG GUYS */
* {margin:0;padding:0}

html, body {
	padding: 0 0 5em;
	margin: 0;
	background: #b69e6b;
	}

body {
	font:.8em "frutiger linotype","lucida grande",arial,helvetica,sans-serif; line-height: 1.5;
	}

/***** TEXT ******/
br {clear:both;}


/* LINKS */
a,a:link,a:hover {text-decoration:underline;} 
a:link {color:#333333} 
a:visited {color:#333333} 
a:hover,a:active {color:#333333;}

h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link {
	text-decoration: none;
	}

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
	text-decoration: none;
	}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
	text-decoration: underline;
	}

/* TYPOGRAPHY */
p {margin: 0 0 1em}
ul, ol {
	margin: 0.5em 0 0.75em 0;
	}

ul {
	list-style-type: none;
	}

li {margin: 0 0 0.15em 2em; }

li.list-section-header {font-weight: bold; margin-top: 1em;}

h1, h2, h3, h4, h5, h6 
{
	letter-spacing: -1px;
	margin: 0.5em 0 .3em;
	color:#333333;
	padding: 0.1 0 0 0.1em;
	clear: both;
}

h1 {font-size: 156%;}
h2 {font-size: 136%}
h3 {font-size: 126%}
h4 {font-size: 116%}
h5 {font-size: 106%}
h6 {font-size: 96%}

.text_header_01 {
	background:url('/css/images/text_header_bg_01.gif');
	background-repeat: no-repeat;
	background-position:bottom left;
	padding: 35px 50px 15px 60px;}

.site-announcement {
	background-color:#FFFF99;
	border: 0.1em #FFDF26 solid;
	padding: 0.5em;
	font-size:0.75em;
	margin: 0.5em 0;
	}
	
.site-announcement strong {font-size:1.5em; color:#c00; margin-right: 1em;}

.mission-statement {
	font-size: 0.75em;
	}

.mission-statement strong {font-size: 1.2em}

/*.sidebar-block {
	background-color:#FFFFFF;
	border: 0.1em #999999 solid;
	padding: 0.5em;
	font-size:0.75em;
	margin: 0.5em 0;
	}*/

.sidebar-block {
	background-color: transparent;
	border-top: 1px #999 dotted;
	padding: 0.7em 0.1em 0.3em 0.1em;
	font-size:0.75em;
	margin: 0.5em 0;
	}

.sidebar-block-top {
	background-color: transparent;
	border-top: 0px #fff solid;
	padding: 0.3em 0.1em 0.3em 0.1em;
	font-size:0.75em;
	margin: 0.5em 0;
	}

.sidebar-block strong{
	font-size: 1.2em;
	color:#333333;
	}

.homepage-focus h1 {
	color: #FFFFFF;
	font-size: 150%;
	letter-spacing: .1em;
	}
	
.homepage-focus {
	background-color:#BDCD27;
	color: #999999;
	margin: 1.5em 0;
	padding: 0.75em;
	text-align: center;
	}
	
.spreadsheet {
	padding: 2px 2px 2px 20px;
	background:url('/css/images/spreadsheet_icon.gif');
	background-repeat:no-repeat;
	background-position: left center;
	}
	
.help {
	padding: 2px 2px 2px 20px;
	background:url('/css/images/help_icon.gif');
	background-repeat:no-repeat;
	background-position: left center;
	}

.highlight {background-color:#FFFF99; padding: 2px;}
.subdued {color:#999}
.small {font-size: 0.75em}
.error, .error_message {color:#FF3333;font-weight:bold}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:0.5em;}
.date {font: bold 82% arial;color:#C6279C;display:block;letter-spacing: 1px}
.time {color:#F5E2AA; font: 1em Georgia, "Times New Roman", Times, serif; letter-spacing:0.05em}
.mini-link {font: 0.75em; font-family:Arial, Helvetica, sans-serif;}
.total {color: #990000; font-size: 1.25em;}
.Male {background-color:#B7CFD5;}
.Female {background-color: #FFCCCC;}
.small {font-size: 0.75em;}
.mini-menu {font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding: 0.25em 0; color:#FFFFFF; text-transform: lowercase; text-align: left; margin: 0.25em 0;}
.mini-menu a, .mini-menu a:link {color: #BDCD27;}

/********** CONTAINERS **********/

/***** HEADER ****/
#header {
	background-color: #BDCD27;
	width: 900px;
	margin: 0 auto;
	}

	#site-name {
		background:url(/css/images/city_house_banner.gif);
		background-position: bottom right;
		background-repeat: no-repeat;
		font: 200% arial;letter-spacing: 0em;
		margin:0 0 0 0.5em;
		padding: 0.25em 0 0.5em 0;
		height: 115px;
		}

	span.site-tagline {
		font: 45% Arial, Helvetica, sans-serif;
		letter-spacing: 0.1em;
		margin: 0 2em;
		color: #FFFFFF;
		text-align:right;
		}

	span.site-tagline a:link, span.site-tagline a:visited {text-decoration:none; color:#fff;}

	span.site-tagline a:hover {text-decoration:underline;}

/***** NAVIGATION *****/

/*** MAIN-NAVIGATION ***/

#main-navigation {
	font-size: 1.2em;
	color: #ffffff;
	}

/*** SUB-NAVIGATION ***/

#sub-navigation {
	}

/*** FOOTER-NAVIGATION ***/

#footer-navigation
{
	text-align: center;
	background: #583c00;
	color: #FFFFFF;
	padding: 0.2em 0;
	margin: 0 auto;
	width: 900px;
}

.footer ul.contact {margin:1em; list-style: none; font-size: 0.75em;}
.footer ul.contact li {margin: 0.25em;}

/*** HEADLINE INFOMRATION ***/
div.headline-information {
	width: 100%;
	height: 125px;
	border: #696969 solid 0.1em;
	clear: both;
	}
/*div.headline-information {
	width: 900px;
	height: 125px;
	border: #696969 solid 0.1em;
	clear: both;
	}*/

div.headline-information .supplemental-content {
	padding: 1em;
	width: 30%;
	float: right;
	}

div.headline-information .main-content {
	padding: 1em;
	width: 50%;
	float: left;
	}


/*** FORM-PROCESS-PREVIEW ***/
div.form-process-preview {
	clear: both;
	margin: 0.5em 0;
	}
	
div.form-process-preview p {
	}


/********** CONTENT ***********/

#container {
	width: 900px;
	margin: 0 auto;
	border-left: 2px solid #583c00;
	border-right: 2px solid #583c00;
	border-bottom: 2px solid #583c00;
	display: table;
	background: #f0f2dc;
	}

/*#content {max-width: 1500px;}*/
#content {
	width: 900px;
	margin: 0 auto;
	display: table;
	clear: both;
	}

#content-box {
	background-color:#ffffff;
	padding: 1em;
	}

/*#content-box-left {
	float:left;
	width: 75%;
	background:#fff;
	border-right:2px solid #696969;
	border-bottom:2px solid #696969;
	margin: 0 0 1em 0;
	padding: 1em;
	}*/
#content-box-left {
	float:left;
	width: 600px;
	background:#fff;
	border-right:1px solid #583c00;
	margin: 0;
	padding: 1em;
	}

/* hide this one from IE */
/* html>body #content-box-left {height:auto; min-height: 30em;} */

/*#content-box-right {
	float: left;
	width: 18%;
	padding: 1em 0 0.15em 1em;
	}*/
#content-box-right {
	float: left;
	width: 240px;
	padding: 1em .5em 0.15em .7em;
	margin: 0 0 0 3px;
	}
	
/*#content-box-left div.news-story p {
	width:75%;
	}*/

#content-box-right p {
	
	}
	
div.clear {
	clear: both;
	}


.footer {clear: both; width: 900px; margin: 0 auto;}

.footer-text {padding: 1em; clear: both; /*width: 50%*/}

#wrap {}

/********* HOMEPAGE **********/
#sponsorship, #about {
	float: left;
	width: 325px;
	height: 300px;
	color:#FFFFFF;
	}

#sponsorship {
	background: #BDCD27;
	margin: 0 0 1em 1em;
	border: 0.1em #999999 solid;
	float: right;
	}

#about {
	background: #CCCCCC;
	margin: 0 1em 1em 0;
	border: 0.1em #999999 solid;
	}

div.insider {
	padding: 0 1em;
	}

.button {
	margin: 10px 30px;
	}


/********** MESSAGES **********/
.form-errors {	
	padding: 1em;
	margin: 0 0 1em 0;
	border: 1px solid #FF3333;
	background: #FF9999;
	color: #000000;
	}

/********** ARTICLES **********/
div.article {
	margin: 1em 0 1em 0;
	clear:both;
	}

div.article img {float: left; margin: 1em}

div.article-body {
	font: 0.75em Arial, Helvetica, sans-serif;
	}

.article-date {
	font: bold 82% arial;color:#696969	;letter-spacing: 1px;
	}

/********** IMAGES **********/
a img {border:none; text-decoration:none;}

/** CORPORATE LOGOS **/
.logo_01 img {padding: 20px 20px 20px 10px}
.logo_02 img {padding: 10px}
.logo_03 img {padding: 10px}

/** FORMS **/

option {padding: 0 0.5em;}

fieldset {
    font: 0.9em "Helvetica Neue", helvetica, arial, sans-serif;
    color: #666;
    background: transparent;
	padding: 0.5em 0.5em 0.5em 0.5em;
    border: solid 0.1em #d3d3d3;
    width: 95%;
    margin: 1.5em 0;
	}

legend {
    font-size: 136%;
	letter-spacing: 1px;
	color:#333333;
	padding: 0.5em 0.25em 0.25em 0.25em;
	}

input, textarea {background-color: #F2F2F2; display: block}
select {background-color: #F2F2F2; display: inline;}
input, textarea {margin: 0 0 1em; 0; font-size: 1em}
input, label {font-size: 1em}
form .inline {margin: 0.25em 0.75em 0.25em 0; display:inline}

div.checkbox {margin: 5px 0; padding: 5px 0; }
div.checkbox label {display:block; width: 250px; float: left; padding-right: 5px;}
div.checkbox input {padding-left: 5px; display:block; float:left; clear:right; }


form .city {display: block; width: 20em; float: left; margin-right: 1em}
form .state {display: block; width: 3em; float: left; margin-right: 1em}
form .zip {display: block; width: 10em; float: left; clear: right; margin-right: 0.75em}
form .first_name {display: block; width: 20em; float: left; margin-right: 1em}
form .last_name {display: block; width: 20em; float: left; margin-right: 1em}

.form-progress-bar {
	color:#999999;
	padding: 10px;
	margin: 20px 0;
	border: solid #CCCCCC 2px;
	}
.form-in-progress {
	color: #333333;
	border-bottom: solid #BDCD27 3px;
	padding: 2px
	}

div.form_column1 {width: 450px; float:right; padding: 0.5em;}
div.form_column2 {width: 350px; float:left; padding: 0.5em;}


#content-box-right fieldset {background-color: #FFFFFF; width: auto; margin-right: 1em;}

button {padding: 3px; margin: 10px 5px 10px 5px; font-size:14px; background-color:#CCCCCC; border: #999999 solid 2px;}

/*************  TABLES  *************/
td {padding: 0.25em 0.5em;}

.row-contrast {
	background-color: #ECECEC;
	}
	
/* Data table */
table.type1 {
	
	}

table.type1 td, th {
		padding: 0.25em 0.5em;
		border: 1px #999999 solid;
	}
	
	
/************  VOLUNTEERS  **********/

/**** VOLUNTEERS PROJECTS ****/
.project-container {
	width: 270px;
	height: 105px;
	float: left;
	background-color: #E5E9B6/* Cream #F9D37F */;
	border: 0.1em #333333 solid;
	padding: 0;
	margin: 0 0 1em .8em; 
	font-size:0.85em;
	color: #000000;
	}
	
.project-container ul {
	margin: 0;
	padding: 1em 0.75em 0.25em 0.25em;
	}
	
.project-container li {
	margin-bottom: 0.2em;
	}
	
.project-summary {
	}
	
.project-time {
	}

.project-title {
	margin: 0;
	padding: 0;
	font-size:1.2em;
	color:#FFFFFF;
	background-color: #333333;
	margin-right: 1em;
	width: 100%;
	}

.project-title p {
	margin: 0;
	padding: 0.1em;
	}

/**********  REPORTS  **********/

/****  YOUTH DETAILS REPORT ****/
div.youth_roofing_information {
	width: 500px;
	height: 200px;
	float: left;
	}

div.youth_quick_glance_block {
	width: 200px;
	height: 150px;
	float: left;
	}

div.youth_quick_glance_block li.grade {
	font-size: 3em;
	margin-left: 0.5em;
	}

div.registration-column1 {
	width: 350px;
	float: left;
	margin: 0 3em 0 0;
	}

div.registration-column2 {
	width: 350px;
	float: left;
	margin: 0;
	}

/****  ADULT VOLUNTEER REPORTS ****/
a:link.yes, a:visited.yes {color:#CCCCCC; text-decoration:none;}
a:hover.yes {color:#003300; text-decoration: underline;}
a.no, a:visited.no {text-decoration:none}
a:link.no span, a:visited.no {color: #FFFFFF; padding: 4px;}
a:hover.no {text-decoration:underline; color: #FFFFFF; padding: 4px;}
a:hover.no span {color:#c00; margin-left: -15px; text-decoration: underline;}

/****  GENERAL REPORTS ****/
div.column-A-1 {
	width: 300px;
	float: left;
	margin: 0 3em 0 0;
	}

div.column-A-2 {
	width: 350px;
	float: left;
	margin: 0 3em 0 0;
	}

/**********  Editable Lists  **********/
li.editable {margin: 0.25em 0}
li.editable a.edit_link, li.editable a.edit_link:visited, li.editable a.edit_link:active  {color:#FFFFFF; font-size: 0.75em; margin: 0 0.5em;
}

li.editable:hover a.edit_link {color:#999; font-size: 0.75em; margin: 0 0.5em;
}