﻿
.updates {
	float:left;
	padding:5px 0 0 14px;
	margin: 0;
}
.updates label {
	text-transform: uppercase;
	font-family:'lucida grande', "Arial" sans-serif;
	color:#7b8daf;
	font-size:80%;
	padding-top:4px;
	margin:0 9px 0 0;
}
.updates label,.updates input {
	float:left;
}
.updates .email {
	padding:3px 0 3px 5px;
	margin: 0 0 5px 0;
	font-size:12px;
	width:175px;
	background-color: #FFF;
	border: #d1d1d1 1px solid;
	color: #364049;
	float:left;
}
.updates .zip {
	padding:3px 0 3px 5px;
	margin: 0 0 5px 0;
	font-size:12px;
	width:95px;
	background-color: #FFF;
	border: #d1d1d1 1px solid;
	color: #364049;
}
.updates-button {
	position:relative;
	left:6px;
	border:0;
	background: url("../img/updates.jpg") no-repeat top center;
	font-size:0;
	line-height:0;
	text-indent: -4000px;
	color:white;
	width:73px;
	height:23px;
	cursor:pointer;
}
.updates-button a {
	display: block;
	text-decoration: none;
}
.volunteer_boxes {
	padding:0 0 7px 0;
	margin: -5px 0 0 0;
	color: #364049;
}
.volunteer_form {
	padding:0;
	margin: 0;
	color: #99b7d5;
}
.volunteer_form h3 {
	margin: 0;
	padding: 0 0 15px 0;
	color: #364049;
	font-size: 140%;
	font-family: Georgia, sans-serif;
	font-weight: normal;
}

/** *************************************************************************

 * Base form styles

 */



/* Zero out padding and margin, adjust where needed later */

form, fieldset, label, input, .checkbox, textarea, select, option, form div {

	padding: 0;
	margin: 0;
}

fieldset {
	margin: 1em 0;
	padding: 0 0 0 0px;
	border: none;	
}

legend {
	font-weight: bold;
	margin: 0 2% .5em 0;
	padding: .2em .5em;
}
input.text, textarea, select { 
	padding: 10px 0 0 0;
}
option {
	float: none;
	clear: both;
	margin-right: 2em;
}
input.radio, input.checkbox { 
	margin-right: .5em;
}
/* Create a bit of padding for text inputs and selects */
input.text, input.button, textarea, select {
	padding: .2em;
}
input.button { 
	margin-right: 1em;
	padding: .2em .6em;
}
.readonly {	
	color: #999;
	background: #e7e7e7;
}
/* standard widths */
.w12 { width: 12% }
.w25 { width: 25% }
.w37 { width: 37% }
.w50 { width: 50% }
.w62 { width: 62% }
.w75 { width: 75% }
.w87 { width: 87% }
.wauto { width: auto; }


/** *************************************************************************
 * Provide proper vertical alignment for expanded and compact forms
 */

.expandedform .row div, 
.compactform div div label {
	padding-top: .5em;
}




/** *************************************************************************
 * Compact form layout styles
 */

.compactform { 
	overflow: hidden; 	
	margin: 0;
	padding: 0 0 0 35px;
 } 
.compactform div, 
.compactform label, 
.compactform input, 
.compactform select, 
.compactform textarea {

	float: left;

}

.compactform input.text, 

.compactform select{

	/* set width: auto to allow form element content 

	to set width otherwise 90% is a good setting */

	/*width: 90%; determines space between form elements */

}

.compactform textarea {

	/* set width: auto to allow form element content 

	to set width otherwise 90% is a good setting */

	width: 460px; /* determines space between form elements */
	height:200px;

}

.compactform div {
	width: 99%;
	margin-bottom: 10px; /* space between rows */
	clear: both;
}

.compactform .oneper input.text, 
.compactform .oneper textarea {
	/*width: 95%;*/
	width: 440px;
}

/* Increase width of elements in twoper 
   columns to provide better alignment */
.compactform .oneper select#cardname{
	/*width: 95%;*/
	width: 50px;
}


/* Increase width of elements in twoper 
   columns to provide better alignment */
.compactform .twoper input.text, 
.compactform .twoper select, 
.compactform .twoper textarea {
	/*width: 95%;*/
	width: 205px;
}

/* Increase width of elements in twoper 
   columns to provide better alignment */
.compactform .twoperwide input.text, 
.compactform .twoperwide select, 
.compactform .twoperwide textarea {
	/*width: 95%;*/
	width: 280px;
	height: 15px;	
	vertical-align:middle;	
}


/* Increase width of elements in twoper 
   columns to provide better alignment */
.compactform .threeper input#email,
.compactform .threeper input#email_volunteer, 
.compactform .threeper input#postalcode, 
.compactform .threeper textarea#state {
	/*width: 95%;*/
	width: 134px;
	height: 15px;
	vertical-align:middle;
}



/* Increase width of elements in twoper 
   columns to provide better alignment */

.compactform .threeper select#state 
{
	/*width: 95%;*/
	width: 134px;
	vertical-align:middle;		
}



/* Increase width of elements in twoper 
   columns to provide better alignment */
.compactform .threeper input#email, 
.compactform .threeper select#email, 
.compactform .threeper textarea#email {
	/*width: 95%;*/
	width: 280px;
}
.compactform .threeper input#email_volunteer, 
.compactform .threeper select#email_volunteer, 
.compactform .threeper textarea#email_volunteer {
	/*width: 95%;*/
	width: 280px;
}

/* Nested divs shouldn't clear floated elements */
/* keeps nested divs from compounding margin value */
.compactform div div {
	margin-bottom: 0; 
	clear: none;
}
/* Nested div label contents should determine their own width */
.compactform div div label {

	width: auto;
	white-space: normal;
	/* unccomment to stack form inputs inside a row */
	clear: left;
	margin-right: 1em;
	font-family:'lucida grande','lucida sans unicode';
	font-size: 90%;
	/*color: #333b71;*/
	color:white;
}

/* Fix paragraph white space in Safari */

.compactform div div p {
	margin: 0;
	padding: 0;
}

/* Compact layout - Set item width within rows */
.oneper label, .oneper div     { width: 400px; margin: 0 20px 0 0; } /* can't be 100%, IE bug */
.oneper label#cardtype     { width: 150px; margin: 0 20px 0 0; } /* can't be 100%, IE bug */
.twoper label, .twoper div     { width: 200px; margin: 0 20px 0 0;}
.twoperwide label    { width: 284px; margin: 0 10px 0 0;}
.twoperwide div     { width: 284px; margin: 0 10px 0 0;}
.twoperwide input, .threeper input     {border: 1px solid #999; margin-top: 3px;}
.threeper label#twentyfive, .threeper div#twentyfive { width: 137px;  margin: 0 10px 0 0;}
.threeper label#fifty, .threeper div#fifty { width: 285px;  margin: 0 0 0 0;}
.fourper label, .fourper div   { width: 23%; }
.fiveper label, .fiveper div   { width: 19%; }
.sixper label, .sixper div     { width: 15%; }
.sevenper label, .sevenper div { width: 13%; }
.eightper label, .eightper div { width: 11%; }
.nineper label, .nineper div   { width: 10%; }
.tenper label, .tenper div     { width: 8.7%; }

.oneper label, .oneper div, 

.twoper label, .twoper div, 

.twoperwide label, .twoperwide div, 

.threeper label, .threeper div, 

.fourper label, .fourper div, 

.fiveper label, .fiveper div, 

.sixper label, .sixper div, 

.sevenper label, .sevenper div, 

.eightper label, .eightper div, 

.nineper label, .nineper div, 

.tenper label, .tenper div {

	/*white-space: nowrap;*/

	border: none;
	border-collapse: collapse;
	font-family:'lucida grande','lucida sans unicode';
	font-size: 90%;
	font-weight:normal;
	color: #364049;
	/*color:white:*/
	padding-bottom: 10px;
	margin-bottom:10px;
}

/** ************************************************************************* 
 * Browser hacks
 */

/* Keep containers holding only floated elements from collapsing in Safari */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#wide h3 OLD {
	float: left;
	margin: 0;
	padding: 0 0 15px 0;	
	font-family:'lucida grande',"Arial" sans-serif;
	text-transform: uppercase;
	color: #333b71;
	font-weight: normal;
	font-size: 110%;
}

h5 {
	float: left;
	margin: 0;
	padding: 0 0 15px 0;	
	font-family:'lucida grande',"Arial" sans-serif;
	color: #333b71;
	font-weight: normal;
	font-size: 110%;
}	



.col4{
	float: left;
	width: 300px;
	padding: 4px 0 4px 0;
	text-align: left;
	font-family: 'lucida grande',"Arial" sans-serif;
	font-size: 90%;
	font-weight: normal;
}





