@import url("css/reset.css");
@import url("css/typography.css");


/* The Big Stuff */

body { font-family: arial, sans-serif; font-size: 62.5%; text-align: center; background: #194708; }
div#body { width: 974px; background: url('images/pagebg.gif') bottom left no-repeat white; text-align: left; margin: 0 auto 10px auto; padding-bottom: 40px; }
div#header { background: url('images/header.jpg') top left no-repeat; width: 974px; height: 199px; position: relative; }
div#frame { }

/* Header (Logo, mainly)  */

div#header h1 { width: 426px; height: 49px; display: block; text-indent: -999em; background: url('/Websites/whatcomlawns/Images/logo.gif') top left no-repeat; float: left; margin: 40px 0 0 180px; }
div#header h1 a { display: block; width: 426px; height: 49px; }

/* Links */
a { }
a:hover { }
a:visited {}

/* Navigation */
div#header ul.globalRootMenu { float: left; margin-top: 64px; width: 750px; margin-left: 10px; }
div#header ul.globalRootMenu li, div#header ul.globalRootMenu li a { display: inline; color: white; }
div#header ul.globalRootMenu li a { font-size: 1.2em; background: url('images/nav_divider.gif') top right no-repeat; padding-right: 5px; margin-right: 0px; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left:0; }

/* Search in Header */
div#header div.search { overflow: hidden; display: block; position: absolute; top: 15px; right: 115px; width: 175px; _width: 160px; }
div#header div.search input.searchInput { width: 105px; border: 1px solid #660000; float: left; font-size: 1em; margin-right: 10px; }
div#header div.search input.searchButton { overflow: hidden; width: 45px; height: 15px; display: block; text-indent: -999em; background: url('images/search.gif') top left no-repeat #660000; border: 0; margin-left: 10px; _float: right; }
*div#header div.search input.searchButton, * html div#header div.search input.searchButton { padding-left: 999em; }


/* Extras (Mainly things that are always hidden.) */
.hide { display: none; }
div.breadCrumb { display: none; }
a.button { display: block; width: 77px; height: 27px; background: url('images/learnmore.gif') top left no-repeat; text-indent: -999em; margin: 8px; }
a.button:hover { background: url('images/learnmore.gif') top right no-repeat; }
a.right { float: right; }
a.left { float: left; }

/* Content */
div#mainCol { margin-left: 7px; position: relative; bottom: 26px; margin-right: 0px; margin-bottom: -15px; }
body.home div#mainCol { height: 300px; overflow: hidden; }
div#flash { width: 500px; float: left; }
body.home div#mainCol div.box { float: left; width: 260px; }
div#mainCol div#image { margin-top: 20px; float: left; width: 191px; }
div#mainCol div#image a.button { float: right; position: relative; bottom: 10px; }
body.home div#mainCol div.box { background: #b7ccdf; color: black; font-size: 1.2em; height: 300px; overflow: hidden; padding-top: 10px; }
body.home div#mainCol div.box div.container { background: none; }
body.home div#mainCol div.box h1 { font-family: 'times new roman', serif; color: black; font-size: 1.2em; text-transform: uppercase; font-style: italic; }
body.home div#mainCol div.box p { font-weight: normal; font-size: 1em; }
div#maincontent { margin-left: 8px; font-size: 1.2em; }
div#maincontent p { font-size: 1.1em; line-height: 1.4em; }
div#maincontent h1 { font-size: 1.1em; font-weight: bold; margin: 12px 0 12px 0; text-transform: uppercase; font-style: italic; font-family: 'times new roman', serif; }

/* Inside Pages */
body.inside div#main { margin-right: 16px; width: 630px; float: right; }
body.inside div#sideBar { margin-left: 10px; width: 300px; float: left; }
body.inside div#mainCol { bottom: 11px; }
body.inside div#sideBar { margin-top: 12px; }

/* Footer and Inside Sidebar */
div#footer { margin: 0 0 0 17px; clear: both; }
body.home div#footer div.box, body.inside div#sideBar div.box { position: relative; margin-bottom: 15px; height: 150px; overflow: hidden; border: 1px solid #003333; background: white; font-size: 1.2em; float: left; width: 300px; margin-right: 15px; padding-bottom: 8px; }
div.box div.container { background: #194708; color: white; }
div.box div.container h1 { font-size: 1.5em; font-weight: bold; padding: 4px 0 7px 10px; }
div.box p { color: #003333; font-size: 1.1em; line-height: 1.5em; font-weight: bold; margin: 8px; }

div.box a.button { position: absolute; bottom: 0; left: 0; }

div#footermenu { line-height: 2em; color: #b5b5b7; padding-top: 50px; font-size: 1.3em; clear: both; background: url('images/footerdash.gif') top left repeat-x; text-align: center; width: 940px; font-weight: bold; }
div#footermenu ul li, div#footermenu ul li a { display: inline; }
div#footermenu ul li a { font-weight: bold; color: #b5b5b7; text-decoration: none; padding-right: 12px; margin-right: 8px; background: url('images/footerlinkdash.gif') right 3px no-repeat; }
div#footermenu ul li a.last { background: none; }

/* Admin */
body.editing div#maincontent { margin: 20px 0 20px 0; width: 85%; float: none; margin-left: 8%; }

/* IE6 Fix */
*body.inside div#mainCol { margin-left: 8px; bottom: 26px; }
* html body.inside div#mainCol { position: relative; }
* html div.search input.searchButton { position: relative; bottom: 15px; left: 9px; }
* html div#body { width: 962px; }
* html body.home div#footer div.box { margin-right: 12px; }
* html body.inside div#main { margin-right: 2px; bottom: 0px; position: relative; }
* html body.inside div#sideBar { position: absolute; z-index: 9999; margin-left: 0; top: 0; left: 7px; }


/* Icebrrg Forms */

.fieldLabels 
{
	display : block;
	font-weight : bold;
}

.xsmallField
{
	width : 50px;
}

.smallField
{
	width : 150px;
}

.medField
{
	width : 250px;
}

.largeField
{
	width : 350px;
}

textarea.medField
{
	height : 100px;
}

textarea.largeField
{
	height : 200px;
}

.fieldInstructions
{

}

.fieldItem
{

}

.fieldError
{
	color: #FFF;
	background: #F00;
}

#errorSummary {
	color: #FFF;
	padding: .5em 1em 1em 1em;
	background: #F00;
	}

.fieldSelected
{
	background: #E2DCCF;
	
	padding: 0.6em 0.2em;
	border: 1px solid #CAAF9F;
	border-left: none;
	border-right: none;
}

.formHeader {
	font-weight: normal;
	}

.formHeader h2 {
	margin: .55em 0 0 0;
	padding: 0;
	font-size: 160%;
	}

.formHeader p {
	margin-top: 0;
	}

#fieldList {
		
	}
                                                                     
                                                                     
                                                                     
                                             
/*

--------------------------------------------------------*/



.xfb-form-container {  }



/*

--------------------------------------------------------*/







.xfb-form-container #formHeader { margin: 0; padding: 0 0.5em; }



.xfb-form-container #formTitle {margin: 1em 0 0.375em 0; padding: 0; font-size: 2.0em; }

.xfb-form-container #formDescription { margin: 0 0 1.5 0; padding: 0; font-size: 1.1667em; }



.fieldItemEven { }

.fieldItemOdd { }





/* Field Item

--------------------------------------------------------*/



.fieldItem { display: block; border: 1px solid transparent; }

* html .fieldItem {border: none;}

.fieldItemInner { display: block; padding: 0.5em 0.5em 0.125em; }



* html .fieldItemInner { height: 1%; } /* IE 6 */

.fieldItemInner:after { content: '.'; height: 0; display: block; visibility: hidden; clear: both; } /* FF / Moz */



/* Selected */

.fieldSelected { border: 1px solid #caeaf9; background-color: #eaf5fa; }



/* Title */

.fieldItem .fieldTitle { padding: 0 0 0.1em; display: block; font-size: 1em; font-weight: bold; }



.fieldItem .fieldTitle .req { color: #990000; font-size: 1.2em; margin-left: 0.5em;}

.fieldItem .fieldTitle .uni { font-size: 0.9em; font-weight: normal; }



/* Content */

.fieldItem .fieldContent { font: 1em Arial, Helvetica, sans-serif; }

.fieldItem .fieldRow { margin: 0; padding: 0.2em 0 0.4em; display: block; clear: both; }

.fieldItem .fieldBlock { padding: 0.3em 0.6em 0.3em 0; display: block; float: left; }

.fieldItem .fieldName { display: block; font-weight: normal; }

.fieldItem .fieldNote { display: block; font-size: 1em; color: #666; font-style: normal; }

.fieldItem .textField { }

.fieldItem label {font-weight: normal;}



/* Fields */

.xsmallField .textField,

.xsmallField.type-phone .textField.phone-international,

.xsmallField .dropdown {width: 100px;}

.xsmallField.type-address .textField {width: 210px;}

.xsmallField.type-name .textField {width: 80px;}

.xsmallField.type-address .dropdown.country {width: 92px;}

.xsmallField.type-address .textField.city,

.xsmallField.type-address .dropdown,

.xsmallField.type-address .textField.state {width: 78px;}

.xsmallField.type-name .textField.prefix,

.xsmallField.type-name .textField.suffix,

.xsmallField.type-address .textField.zip {width: 35px;}

.xsmallField.type-time .textField,

.xsmallField.type-phone .textField,

.xsmallField.type-date .textField {width: 27px;}

.xsmallField.type-date .dropdown,

.xsmallField.type-time .dropdown,

.xsmallField.type-price .textField {width: 60px;}



.smallField .textField,

.smallField.type-phone .textField.phone-international,

.smallField .dropdown {width: 150px;}

.smallField.type-address .textField {width: 250px;}

.smallField.type-name .textField {width: 98px;}

.smallField.type-address .dropdown.country {width: 119px;}

.smallField.type-address .textField.city,

.smallField.type-address .dropdown,

.smallField.type-address .textField.state {width: 98px;}

.smallField.type-name .textField.prefix,

.smallField.type-name .textField.suffix,

.smallField.type-address .textField.zip {width: 35px;}

.smallField.type-phone .textField,

.smallField.type-time .textField,

.smallField.type-date .textField {width: 27px;}

.smallField.type-price .textField,

.smallField.type-date .dropdown,

.smallField.type-time .dropdown {width: 60px;}



.medField .textField,

.medField.type-phone .textField.phone-international,

.medField .dropdown {width: 250px;}

.medField.type-name .textField,

.medField.type-address .dropdown.country {width: 119px;}

.medField.type-address .textField.city,

.medField.type-address .dropdown,

.medField.type-address .textField.state {width: 98px;}

.medField.type-name .textField.prefix,

.medField.type-name .textField.suffix,

.medField.type-time .textField,

.medField.type-date .textField,

.medField.type-phone .textField,

.medField.type-address .textField.zip {width: 35px;}

.medField.type-date .dropdown,

.medField.type-time .dropdown,

.medField.type-price .textField {width: 74px;}



.largeField .textField,

.largeField.type-phone .textField.phone-international,

.largeField .dropdown {width: 400px;}

.largeField.type-name .textField,

.largeField.type-address .dropdown.country {width: 194px;}

.largeField.type-address .textField.city,

.largeField.type-address .dropdown,

.largeField.type-address .textField.state {width: 156px;}

.largeField.type-name .textField.prefix,

.largeField.type-name .textField.suffix,

.largeField.type-address .textField.zip {width: 68px;}

.largeField.type-time .textField,

.largeField.type-phone .textField,

.largeField.type-date .textField {width: 35px;}

.largeField.type-date .dropdown,

.largeField.type-time .dropdown {width: 74px;}

.largeField.type-price .textField {width: 124px;}





/* Instructions */

.fieldItem .fieldInstructions { padding: 0.2em 0 0.8em; display: block; clear: both; font-size: 0.9em; }



.fieldItem .radio-container .choice-option,

.fieldItem .checkbox-container .choice-option { padding: 0.3em 0; display: block; }



.choice-option label {display: inline;}





/* Field Specific

--------------------------------------------------------------*/



.fieldItem .dropdown-country { }

.fieldItem .dropdown-country select { float: left; }

.fieldItem .dropdown-country .flag-container { width: 16px; height: 11px; display: block; margin: 0.3em 0 0 0.6em; float: left; }



.type-price .fieldName,

.type-price .textField,

.type-price .fieldNote { float: left; }

.type-price .fieldNote, .type-price .fieldName {margin: 0.25em 0;}

.type-price .textField {margin: 0 0.5em;}



.dropdown { font-size: 1em; }



.dropdown-image-container { }

.dropdown-image { padding: 0.4em; }





/* Submit Button

--------------------------------------------------------------*/



.submitButtonContainer { padding: 0.4em 0.5em; display: block; }

.submitButtonContainer .submitButton { font-size: 1.2em; margin: 0; }





/*

--------------------------------------------------------------*/



.errorSummary { margin-bottom: 0.1em; padding: 0.8em 1.4em; background: #FFFFCC; border: 1px solid #E6D8A2; }

.errorSummary strong { color: #000; }

.errorSummary p { margin: 0; color: #990000; }





.fieldItemError { background: #FFEAEB; border-color: #ffccce; }

.fieldItemError .fieldItemInner .errorDescription { padding-left: 2em; font-size: 1em; color: #990000; font-style: italic; }



.fieldItemError .fieldTitle { /*font-style: italic;*/ color: #CC0000; }

.fieldItemError .fieldRowError { border-left: 1px solid #990000; }



.fieldItemError .fieldBlockError { }

.fieldItemError .fieldBlockError .fieldName { color: #990000; }

div.fieldItemError span.fieldBlockError em.fieldNote { color: #CC0000; }

.fieldItemError .fieldBlockError .error { border: 1px solid #ffccce; }



/* Lightbox

--------------------------------------------------------------*/



.lightbox { background-color: #000; opacity: 0.5; filter: alpha(opacity=50); }

#lightbox_content { position: absolute; left: 0; top: 0; z-index: 9999; }



.lightbox-content { width: 600px; height: 400px; display: block;}





/* Confirmation Message

--------------------------------------------------------------*/



.confirmation-content { width: 600px; height: 400px; display: block; background: #FFF; }

.confirmation-content-inner { padding: 2em 0 0 0; }



.confirmation-content .text { width: 90%; margin: 0 auto; display: block; overflow: auto; padding: 0.2em 0.3em; background: #FFF url(/themes/light/images/input_bg.gif) top repeat-x; border: 1px solid #CCC; border-top: 1px solid #999; border-left: 1px solid #999; font: 1.1em Verdana, Arial, Helvetica, sans-serif; }



.confirmation-content .save-options { padding: 1em 2em; display: block; text-align: right; }

.confirmation-content .save-options .button { font-size: 0.9em; font-family:Verdana; font-weight:bold; }

.confirmation-content-message { padding: 10px; font-family:Verdana; font-size: 12px;}



/* Button controls

--------------------------------------------------------------*/



.save-options .button { margin: 0.3em 0.3em 0.2em auto; padding: 0.4em 0.8em; font-size: 1.1em; text-decoration: none; color: #FFF; overflow: hidden; text-align: center; background: #B9B9B9; border: 1px solid #CCC; border-right-color: #999; border-bottom-color: #999; text-align: center; }



.save-options .button-save:hover { background: #9BC191; border-color: #ACD1A7; border-right-color: #76A965; border-bottom-color: #76A965; }

.save-options .button-save:active { background: #76A965; border-color: #ACD1A7; border-right-color: #76A965; border-bottom-color: #76A965; }



.save-options .button-cancel:hover { background: #DF8A8A; border-color: #E7B0AD; border-right-color: #C25454; border-bottom-color: #C25454; }

.save-options .button-cancel:active { background: #C25454; border-color: #E7B0AD; border-right-color: #C25454; border-bottom-color: #C25454;}



/* View Form Password

--------------------------------------------------------------*/



.passwordRequirement { text-align: center; }

.passwordRequirement .passwordContainer { margin: auto; text-align: left; display:inline-block; width: 500px; }

.passwordRequirement .passwordContainer p { font-family: Verdana; font-size: 12px; margin: 8px 0px 8px 0px; display:block; line-height: 14px; }



/* Date Picker 

--------------------------------------------------------------*/

.datePickerImage { cursor: pointer; }

#FBDatePicker { width: 184px; font-family: 'Arial'; font-size: 12px; z-index: 9999; background-color: #EEE; padding: 3px; border: solid 1px #999; color: #000; }

#FBDatePicker .fbdMove { width: 50px; float: left; cursor: pointer; }

#FBDatePicker .fbdTitle { width: 75px; float: left; }

#FBDatePicker .fbdRow { clear: both }

#FBDatePicker .frbDayBlock { float: left; width: 25px; text-align:center; padding: 2px 0px 2px 0px; cursor: pointer; display: block; }

#FBDatePicker .fbdDateFieldsRow { float: right; }



/* Price Fields

--------------------------------------------------------------*/

span.choicePrice { display: none; }

.paymentForm span.choicePrice { display: inline; }