/* ==================================== */
/* == ELEMENT ATTRIBUTES FOR SCREENS == */
/* ==================================== */

/* ----------------- */
/* GENERAL SELECTORS */
/* ----------------- */

html, body {
	height: 100%; /* In combination with main div height adjustment, allows paper tile to repeat to end of page - keeps shadow from hanging out by itself */
	}
body {	
	margin-left: -5px; /* Fixes issue with folder top where background image ends 5px to the right of the edge of the page */
	padding-right: 50px;
	color: #343436;
	background: #fff url(../images/backgrounds/shadow-on-white.gif) right repeat-y;
	}
	h1 { 
		color: #97979c;
		}
	h2 { 
		color: #f89920; /* EDITED IN SECONDARY */
		}
	h3 {
		color: #4d4d4f;
		}	
	h4 {
		color: #343436;
		}
	a {
		color: #000;
		}
	a:hover {
		text-decoration: none;
		}
	.error {
		color: red;
		font-weight: bold;
		}
	td {
		border-bottom: 1px solid #97979c;
		}
	/* Accessibility skip link */
	.skip {
		display: none;
		}
	/* Final line in a given content area - needed for bottom piece of background image due to gradient and shadow */
	.last {
		margin-bottom: -10px;
		}
	/* Generic Columns */
	.column1 {
		float: left;
		width: 340px; /* Specific width for this site only */
		}
	.column2 {
		float: right;
		width: 340px; /* Specific width for this site only */
		}
	/* Generic navigation */
	ul.nav {
		margin: 0;
		padding: 0;
		}	
		ul.nav li {
			margin: 0;
			padding: 0;
			list-style-type: none;
			}	
	/* Forms */
	fieldset input {
		width: 250px;
		margin-bottom: 5px;
		}
	textarea {
		width: 705px;
		height: 75px;
		}
	div.submit {
		margin-top: 10px;
		}		
	/* Generic Forms */
	fieldset {		
		}
	fieldset div.input {
		width: auto;		
		}
	fieldset.multi div.input {
		width: 190px;	
		margin-right: 5px;	
		}		
		legend {
			padding: 0 2px; /* IE 7 EDIT */
			}						
	div.input {
		float: left;
		width: 201px;
		margin-bottom: 5px;
		padding-right: 12px;	
		}	
	form div.last {
		padding-right: 0px;
		}
		fieldset.multi div.input input, fieldset.multi div.input select {
			width: 186px;
			}		
		div.input input, div.input select {
			width: 198px;
			height: 1.5em;
			}
		div.input select {
			margin-bottom: 6px;
			}		
		div.input textarea {
			width: 586px;
			height: 3em;
			}
		div.input label span {
			white-space: nowrap; 
			}
	div.custom {
		width: auto;
		}
		div.custom input {
			width: auto;
			}
	div.auto {
		width: auto !important;
		height: auto !important;	
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		}
		div.auto input, div.auto select {
		 	width: auto;
			height: auto;			
			}
	div.zip {
		width: auto;
		}
		div.zip input, div.zip select {
			width: 5em;
			}
	div.checkbox, div.radio {
		clear: both;		
		float: none;
		width: auto;
		padding-top: 10px;
		}		
		div.checkbox input, div.radio input {
			width: auto;
			height: auto;
			margin-right: 5px;
			}		
	div.phone {
		clear: both;
		width: 100%;
		}
		div.phone input {
			width: auto !important;
			}
		div.phone fieldset {
			width: 586px; /* 610 without padding */
			}
	form div.phone3 {
		width: auto;
		}
		form div.phone3 input {
			width: 4em;
			}
	div.address {
		clear: both;
		width: 100%;
		}
		fieldset div.address input {
			width: 586px;
			}
		div.address input, div.address textarea {
			width: 586px;
			}
	div.comment {
		clear: both;
		width: 100%;
		}
		div.comment textarea {
			width: 610px;
			height: 6em;
			}
	div.submit {
		float: none;
		clear: both;
		margin-bottom: 20px;
		padding-top: 10px;
		}
		div.submit * {
			clear: both;
			}
	/* BUTTONS */
	/* Works for text-based buttons as well as form buttons */
	/* Does not allow button centering without a fixed size */
	div.button {		
		display: inline-block;	
		/* IE 6 EDIT - CUSTOM */
		padding-left: 15px;		
		line-height: 1em;
		background: transparent url(../images/buttons/cap-left-red.gif) no-repeat;			
		}
		div.button a, div.button input {	
			position: relative;	
			display: table; /* Firefox bug fix */		
			display: inline-block;
			width: auto;			
			height: 38px;
			line-height: 38px;
			padding-right: 15px;			
			font-size: 12px;			
			font-weight: bold;
			text-decoration: none;
			text-align: center;
			color: #fff !important;
			background: transparent url(../images/buttons/cap-right-red-extended.gif) right top no-repeat;
			border: none;			
			}
		div.button input[type=submit] {			
			margin-top: 0;		
			}
	/* Different button colors and sizes */	
	/* Orange button */	
	div.learn div.button, div#main div.b1 {
		background-image: url(../images/buttons/cap-left-orange.gif);
		}
		div.learn div.button a, div.learn div.button input, div#main div.b1 a, div#main div.b1 input {
			background-color: #f89b21;
			background-image: url(../images/buttons/cap-right-orange-extended.gif);
			}
	/* Red button */
	div.care div.button, div#main div.b2 {
		background-image: url(../images/buttons/cap-left-red.gif);
		}
		div.care div.button a, div.care div.button input, div#main div.b2 a, div#main div.b2 input {
			background-color: #da0202;
			background-image: url(../images/buttons/cap-right-red-extended.gif);
			}
	/* Blue button */
	div.give div.button, div#main div.b3 {
		background-image: url(../images/buttons/cap-left-blue.gif);
		}
		div.give div.button a, div.give div.button input, div#main div.b3 a, div#main div.b3 input {
			background-color: #393c98;
			background-image: url(../images/buttons/cap-right-blue-extended.gif);
			}
	/* Large red button */
	div.bb2 {
		padding-left: 19px; /* Width of left cap image */
		background-image: url(../images/buttons/cap-left-red-large.gif)
		}
		div.bb2 a {
			height: 53px; /* Height of background image */
			padding-right: 19px;	/* Width of left cap image */		
			line-height: 53px; /* Height of background image */
			font-size: 16px;
			background-color: #da0202;
			background-image: url(../images/buttons/cap-right-red-extended-large.gif);
			}
	/* Fixed-size buttons - for centering */
	div.bf1 {
		width: 100px;
		margin: 0 auto;
		}
		div.bf1 a { 
			width: 85px; /* Width minus cap image width */
			}
	div.bf2 {
		width: 200px;
		margin: 0 auto;
		}
		div.bf2 a { 
			width: 185px; /* Width minus cap image width */
			}	
	/* PSEUDO-SELECT MENU version 2 GML */
	/* Use with JavaScript */
	div.pseudo-select {
		width: 300px;
		height: auto;
		overflow: hidden;		
		margin-bottom: 20px;
		color: #000;	
		background-color: #fff;	
		border: 1px solid #7f9db9;		
		}
		div.pseudo-select p {
			min-height: 17px;
			margin: 0;
			padding-top: 2px;
			padding-left: 3px;
			overflow: visible;
			color: #000;
			background: #fff url(../images/indicators/pseudoselect-arrow.gif) right top no-repeat;														
			}
		div.pseudo-select ul {	
			display: block;	
			list-style-type: none;
			width: 300px;
			height: 130px;
			margin: 0;				
			overflow: auto;	
			overflow-x: hidden;
			overflow-y: auto;									
			}
			div.pseudo-select ul a {
				display: block;
				width: 280px;					
				padding-left: 3px;
				color: #000;
				text-decoration: none;
				}
				div.pseudo-select ul a:hover {
					background-color: #b2b4bf;
					}
		
/* ------------------ */
/* SPECIFIC SELECTORS */
/* ------------------ */

/* Outer container */
div#main {
	position: relative;
	min-width: 1056px; /* IE 6 EDIT */
	min-height: 100%; /* In combination with main div height adjustment, allows paper tile to repeat to end of page - keeps shadow from hanging out by itself */
	padding-bottom: 50px;
	background: #bc9c7d url(../images/backgrounds/paper-tile.jpg);
	}
	/* Header */
	div#header {
		width: 100%;
		height: 160px;
		text-align: center;
		background-color: #fff;
		border-right: 5px solid #fff; /* To cover up background shadow on body */
		}
		/* Logo */
		div#header img.logo {
			position: relative;
			top: 13px;
			left: -284px;
			}
		/* Header links */
		div#header-links {
			position: relative; /* Added 9/24/09 GML */		
			width: 694px;
			margin: -102px auto 0 auto;			
			}
			/* Donate button */
			div#header-links #button-donate { 
				float: right;
				}
			/* Social Media buttons */
			div#social-media {
				position: absolute;
				z-index: 99999999;				
				top: 16px;
				left: 356px;
				white-space: nowrap;
				/* ORIGINAL
				top: 150px;
				left: 776px;
				*/
				}
				a#link-twitter {
					position: relative;
					top: -2px;
					left: 19px;
					}
		/* Flash donation meter */
		div#meter {	
			position: absolute;
			top: 207px;
			left: -100px; /* Updated on secondary pages */
			z-index: 999999999;				
			width: 96px;
			text-align: center;
			height: 270px;			
			margin: 0 auto;			
			}
			div#meter object, div#meter embed {
				width: 96px;				
				margin: 0 auto;
				text-align: center;			
				}				
	/* Folder - design element only */
	div#folder {
		position: relative;
		left: 5px;
		width: 100%;
		height: 60px; /* Height of folder image 66px */
		overflow: visible; /* Required for nested tab image */		
		background-color: inherit;
		background-image: inherit;
		}
		div#folder-top {
			position: relative;
			top: -6px;
			width: inherit;
			height: 66px;
			background: transparent url(../images/navigation/folder-top-transparent.gif) bottom right no-repeat; /* Default - for home page */
			}
		div#folder div.learn {
			background-image: url(../images/navigation/folder-top-orange.png);
			}
		div#folder div.care {
			background-image: url(../images/navigation/folder-top-red.png);
			}
		div#folder div.give {
			background-image: url(../images/navigation/folder-top-blue.png);
			}
	/* Content */
	div#content {
		position: relative; /* Needed for image positioning */
		width: 807px;
		min-height: 500px; /* FOR TESTING ONLY */
		margin: -25px auto 0 auto; /* EDITED IN SECONDARY */
		}
		/* Rich-media area */
		div#promo {	
			position: relative;
			width: 654px; /* Total 684px - EDITED IN SECONDARY */
			height: 293px; /* Total 333px - EDITED IN SECONDARY */
			margin: 0 auto;
			padding: 20px 15px;
			text-align: center;
			background: transparent url(../images/backgrounds/paper-promo-home.png) no-repeat; /* IE 6 EDIT - EDITED IN SECONDARY */
			}
			div#promo div.alt-text {				
				width: 600px;
				height: 270px;
				overflow: auto;
				margin: 0 auto;
				padding-top: 20px
				}	
			div#promo img {
				position: absolute;
				top: 20px;
				left: 20px;
				}	
		/* Features/callouts */
		div#features {	
			width: 694px; /* Actual width of nested feature containers added together */
			margin: 15px auto 0;
			background: transparent url(../images/backgrounds/paper-features-tile-home.png) repeat-y; /* IE 6 EDIT - EDIT IN SECONDARY */
			}
			div#features img.head { 
				margin-bottom: 10px;
				}
			div.home div#features h1 { 
				font-size: 1.5em;
				}				
			div#features div.feature {
				float: left;
				width: 224px; /* EDIT IN SECONDARY */
				margin-right: 11px;
				}
			div#features div.last {
				margin-right: 0;
				}
				div#features div.body {
					padding: 0 28px;	/* EDIT IN SECONDARY */							
					}
			div#features div.foot {
				position: relative;
				top: 23px; /* Push down below background of parent element - EDIT IN SECONDARY */
				width: 694px; /* EDIT IN SECONDARY */
				height: 23px; /* EDIT IN SECONDARY */
				background: transparent url(../images/backgrounds/paper-features-bottom-home.png) bottom no-repeat; /* IE 6 EDIT - EDIT IN SECONDARY */
				}				
				div#features div.foot div.button { 
					position: relative;
					top: -33px; /* Height of shadow minus 10 - see parent elements */
					}	
		/* Primary content */
		div#primary {
			clear: both;
			position: relative;
			width: 694px; /* EDIT IN SECONDARY */		
			margin: 0 auto; /* EDIT IN SECONDARY */			
			}
			div#primary div.head {
				clear: both;
				width: 693px; /* EDIT IN SECONDARY */
				height: 5px; /* EDIT IN SECONDARY */
				padding-top: 35px; /* Whitespace set here due to Opera 9 bug with margin on parent element - add extra whitespace for relative position of footer on previous element */
				background: transparent url(../images/backgrounds/paper-primary-top-home.png) bottom no-repeat; /* IE 6 EDIT - EDIT IN SECONDARY */
				}
			div#primary div.body {
				min-height: 100px; /* TEMP - FOR TESTING */
				padding: 28px 37px 8px;
				background: transparent url(../images/backgrounds/paper-primary-tile-home.png) repeat-y; /* IE 6 EDIT - EDIT IN SECONDARY */
				}
			/* Clear fix for all but IE */
			div#primary div.body:after {
				content: "."; 
				display: block; 
				height: 0; 
				clear: both; 
				visibility: hidden;
				}
			div#primary div.foot {
				clear: both;
				width: 692px;
				height: 35px;
				background: transparent url(../images/backgrounds/paper-primary-bottom-home.png) no-repeat; /* IE 6 EDIT - EDIT IN SECONDARY */
				}
		/* Navigation */
		div#navigation {
			text-align: center;
			height: 65px;
			overflow: visible; /* Needed for tabs */
			background: transparent url(../images/backgrounds/paper-footer-home.png) center no-repeat; /* For footer navigation - IE 6 EDIT - EDIT IN SECONDARY */
			}		
			/* Tab (top) navigation */
			li.tab {
				position: absolute;
				top: -80px; /* IE 6 EDIT - EDITED IN SECONDARY */
				left: 0px;
				z-index: 9 !important; /* Added 9/17/09 GML */
				}
			div#navigation li.selected {
				z-index: 10 !important;
				}
				li.tab a {					
					display: block;				
					width: 251px;
					height: 26px; /* Total 45 */
					padding-top: 19px;
					background-repeat: no-repeat;
					}
				li.tab a.selected {
					height: 35px;
					}	
				/* Home page icon (link) - hidden by default, shown on secondary pages */
				li#nav-home {
					display: none;
					}
				/* Specific tabs */					
				li#nav-learn {
					z-index: 3;
					left: 50px;
					}
					li#nav-learn a {						
						background-image: url(../images/navigation/tab-orange.png); /* IE 6 EDIT */
						}		
					li#nav-learn a.selected {						
						background-image: url(../images/navigation/tab-orange-w-edge.png); /* IE 6 EDIT */
						}			
				li#nav-care {
					z-index: 2;
					left: 275px;
					}
					li#nav-care a {
						background-image: url(../images/navigation/tab-red.png); /* IE 6 EDIT */
						}
					li#nav-care a.selected {						
						background-image: url(../images/navigation/tab-red-w-edge.png); /* IE 6 EDIT */
						}
				li#nav-give {
					z-index: 1;
					left: 500px;
					}
					li#nav-give a {
						background-image: url(../images/navigation/tab-blue.png); /* IE 6 EDIT */
						}	
					li#nav-give a.selected {						
						background-image: url(../images/navigation/tab-blue-w-edge.png); /* IE 6 EDIT */
						}		
			/* Standard text (footer) navigation */			
			li.footer {
				position: relative;
				top: 25px;
				display: inline;
				}
				li.footer a {
					margin-left: 12px;
					padding-right: 12px;
					color: #666;
					border-right: 1px solid #666;
					text-decoration: none;
					text-transform: uppercase;
					}
				li.footer a.last {
					border: none;
					}