@charset "utf-8";
/**
 * arborday.org Forms Stylesheet
 *
 * Form styles for arborday.org.
 *
 * @project				Arbor Day Foundation
 * @version				1.0
 * @author				Justin McDowell
 * @copyright			2010 by the Arbor Day Foundation
 * @cssdoc				version 0.2.22
 * @media					all
 * @site					arborday.org
 *
 * @colordef	#006b3f; Arbor Day green
 * @colordef	#c8b98f; header tan
 * @colordef	#fefae9; nav yellow
 * @colordef	#cccccc; light gray
 * @colordef	#808080; medium gray
 * @colordef	#0000ff; link blue
 * @colordef	#45458d; visited link blue
 *
 * TABLE OF CONTENTS
 *
 *	1. General Form Appearance
 *	2. No-wrap-content Form Design 
 *	3. Page-content Form Design
 *	4. Sidebar Form Design
 *	5. Checkbox & Radio Styles
 *	6. Miscellaneous Forms
 *	7. Ross Box
 *  8. Mobile Overrides
 */

/************************************************/
/********** 1. GENERAL FORM APPEARANCE **********/
/************************************************/
/* Don't be playing with the box model here. */
form{margin-bottom:1.4em;}

form fieldset{padding:0;}

form ol{
	list-style-type:decimal;
}
form > ul,								/*Forms in  list format.*/
form .form-list{
	margin:0;								/*box model*/
	padding:0;
	
	list-style-type:none;		/*list styles*/
}
form li{
	margin-bottom:1.4em;
	clear:left;
}
.area{
	clear:none;
	float:left;
}

select,
input,
textarea{
	border:1px solid #666;
}

input,
textarea{
	border-radius:4px;
	-moz-box-shadow:0 2px 2px hsla(0, 0%, 75%, .85) inset;
	-webkit-box-shadow:0 2px 2px hsla(0, 0%, 75%, .85) inset;
	box-shadow:0 2px 2px hsla(0, 0%, 75%, .85) inset;
}
input[type=checkbox],
input[type=radio],
input[type=image]{border-width:0;}

.radio-list li{margin:0; clear:left;}
.radio-list input[type="radio"],
.radio-list input.radio{vertical-align:text-bottom;}
.radio-list label{}

input[type=submit],
input[type=button]{
	border-color:#999;
	-moz-box-shadow:0 1px 2px hsla(0,0%,0%,.25);
	box-shadow:0 1px 2px hsla(0,0%,0%,.25);
	background-color:#eee;
	background-image: -webkit-gradient(	/*Current Safari implementation.*/
		linear,
		left top,
		left bottom,
		color-stop(0, rgb(238,238,238)),
		color-stop(0.25, rgb(255,255,255)),
		color-stop(1, rgb(238,238,238))
	);
	background-image: -webkit-linear-gradient(	/*Future Safari implementation.*/
		center top,
		rgb(238,238,238) 0%,
		rgb(255,255,255) 25%,
		rgb(238,238,238) 100%
	);
	background-image: -moz-linear-gradient(
		center top,
		rgb(238,238,238) 0%,
		rgb(255,255,255) 25%,
		rgb(238,238,238) 100%
	);
	color:#000; text-shadow:0, 1, 0, #fff;
}

input[type="submit"]:active{	/*Hide shadow on press.*/
	background:#eee none;
	-moz-box-shadow:0 0 0 #fff;
	box-shadow:0 0 0 #fff;
}

label + input,
label + textarea,
label + select{
	display:block;
}

label.warning-message{display:block;}

.label ul,
.note ul{list-style-type:disc;}
.label ul,
.label ol,
.note ul,
.note ol{margin-bottom:1.4em; padding-left:0;}
.label ul,
.note ul{margin-left:1.4em;}
.label ol,
.note ol{margin-left:2em;}

.label li,
.note > li:last-child,
.warning-message > li:last-child{margin-bottom:0;}

.clarification,
.clarification p{font-size:9pt; line-height:1.4;}

ul.text-list{margin-left:15px; list-style-type:disc;}	/* For text-based-lists that need bullets */
ul.text-list li{margin-bottom:0;}

/****************************************************/
/********** 2. NO-WRAP-CONTENT FORM DESIGN **********/
/****************************************************/
/* Form design using the full 559px #no-wrap-content (or .content) area. No funny business */
/*fieldset{width:330px;}*/

form ol{margin-left:32px;}

legend{padding:0 1.4em 0 0;}

input.text,
input[type=text],
input[type=email],
input[type=password],
input[type=file]{width:328px;}
input.locality,
input[type=number],
input[type=tel]{width:171px;}

textarea{height:200px; width:328px;}

form ol input.text{width:306px;}
form ol textarea{width:308px;}

input.date{
	width:78px;
}

input.postal-code,
input.small-number
{
	width:68px;
}

input.cc-number{	/*Credit card numbers.*/
	width:242px;
}
input.cc-expire{
	width:100px;
}

/*.radio-list label{width:309px;}*/

/*************************************************/
/********** 3. PAGE-CONTENT FORM DESIGN **********/
/*************************************************/
/* Form design using the 330px #page-content (and .page-content) area of pages with sidebar.*/
#page-content form{width:330px;}

#page-content input.text,
.page-content input.text,
.page-content input[type=text]{
	width:328px;
}

#page-content textarea,
.page-content textarea{height:200px; width:306px;}

#page-content .radio-list label,
.page-content .radio-list label,
#page-content .checkbox-list label,
.page-content .checkbox-list label{max-width:309px;}

.locality-area,
.region-area,
.postal-code-area,
.cc-number-area,
.cc-expire-area{
	clear:none; float:left;
}
.locality-area,
.region-area,
.cc-number-area{
	margin-right:16px;
}
.locality-area{
	width:173px;
}
.locality-area .locality{
	width:171px;
}
.region-area{
	width:55px;
}
.postal-code-area{
	width:70px;
}
.cc-number-area{	/*Credit card number list items.*/
	width:244px;
}
.cc-expire-area{	/*Credit card expiration date list items.*/
	width:70px;
}

/********************************************/
/********** 4. SIDEBAR FORM DESIGN **********/
/********************************************/
/* Form design using the 200px #sidebar (and .sidebar) area of pages with page-content. */

.sidebar fieldset{border-top-width:0;}
.sidebar legend{font:bold 9pt/1.4 Arial, Helvetica, sans-serif;}

#sidebar input.text,
.sidebar input.text,
.sidebar input[type=text],
.sidebar input[type=password],
.sidebar input[type=email]{width:198px;}

#sidebar input.submit,
.sidebar input.submit,
.sidebar input[type=submit],
.sidebar input[type=checkbox],
.sidebar input[type=radio]{width:auto;}

/*****************************************************/
/********** 5. COLUMN1, COLUMN2 FORM DESIGN **********/
/*****************************************************/

.column1 input[type=text],
.column1 input[type=password],
.column2 input[type=text],
.column2 input[type=password]{width:270px;}

.column1 .ross-box input[type=text],
.column1 .ross-box input[type=password],
.column2 .ross-box input[type=text],
.column2 .ross-box input[type=password]{width:236px;}

.column1 .ross-box input.small-number{width:68px;}	/*Specificity war.*/

/* Overrides probably not necessary with attribute selectors. */
/*.column1 input[type=submit],
.column2 input[type=submit]{width:auto;}*/

/************************************************/
/********** 5. CHECKBOX & RADIO STYLES **********/
/************************************************/
.checkbox-list fieldset,
.radio-list fieldset{border-width:0; margin-bottom:1.4em;}

.checkbox-list legend,
.radio-list legend{font:normal 9pt/1.4 Arial, Helvetica, sans-serif;}

.checkbox-list li,
.radio-list li{margin:0;}

/*******************************************/
/********** 6. MISCELANEOUS FORMS **********/
/*******************************************/
/* This section should not be that big. Only for COMMONLY recurring form elements that get screwed up by the above styles. */

/* Header search form. */
form#searchform{
	margin:0;
}
#criteria{
	float:left;
	width:100px;
}
#gobutton{
	border-width:0; -moz-border-radius:0; border-radius:0; background-image:none;
}

/* Left nav text fields. */
#left-nav input[type="text"]{
	width:143px;
}

/*********************************/
/********** 7. ROSS BOX **********/
/*********************************/
/* Based on Ross's embossed form design */
.body-1column fieldset{border-width:0; padding:0;}
.body-1column fieldset legend{margin:0; padding:0; font:bold 9pt/1.4 Arial, sans-serif;}

/* Ross created this style using graphics. This is a nice CSS3 way to do it. */
.ross-box{														/* Ross's box rocks like a boss. */
	border:1px solid #ccc;							/*box model*/
	margin:1.4em 0;
	padding:0 16px;
	
	/*background gradient*/
	background-image: -moz-linear-gradient(
    center top,
    rgb(245,245,245) 0%,
    rgb(255,255,255) 30px
	); /* FF3.6 */
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, rgb(245,245,245)),
		color-stop(0.25, rgb(255,255,255))
	);  /*Saf4+, Chrome */
	background-image: -webkit-linear-gradient(
    center top,
    rgb(245,245,245) 0%,
    rgb(255,255,255) 30px
	); /* New Safari context */
	
	border-radius: 7px;
	
	/*box-shadow for IE8 and all modern browsers*/
	box-shadow: 0px 1px 3px #ccc;
	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color='#cccccc',direction=180,strength=2), progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ffffff')";	/* IE8 */
	
	overflow:hidden;
}

/******************************************/
/*********** 8. MOBILE OVERRIDES **********/
/******************************************/
/* Designed for the standard smartphone width of at 300px max-width */
@media screen and (max-width:802px){
	#page-content form{width:auto;}

	#page-content input[type="text"],
	.page-content input[type="text"],
	#sidebar input[type="text"],
	.sidebar input[type="text"],
	#page-content input[type="password"],
	.page-content input[type="password"],
	#sidebar input[type="password"],
	.sidebar input[type="password"]{
		width:298px;
	}
	
	#page-content textarea,
	.page-content textarea{
		height:200px;					/*box model*/
		width:306px;
	}
	
	#page-content .radio-list label,
	.page-content .radio-list label,
	#page-content .checkbox-list label,
	.page-content .checkbox-list label{
		max-width:309px;
	}
	
	.locality-area,
	.region-area,
	.postal-code-area{
		clear:none; float:left;
	}
	.locality-area,
	.region-area{
		margin-right:16px;
	}
	.locality-area{
		width:173px;
	}
	.locality-area .locality{
		width:171px;
	}
	.region-area{
		width:55px;
	}
	.postal-code-area{
		width:70px;
	}
}