/* CSS Document */
body{font: 80% Verdana, Arial, Helvetica, sans-serif; color:#666;background:#fff;}
#container{width: 975px;margin: 0px auto;background-color: #fff; background:url(images/container-bg.gif) top left repeat-y;color: #333;border: 1px solid gray;}
#top{margin-left:230px;max-width: 60em; width:745px; height:278px;}
#caption{padding: .5em;background-color:#636;margin-left:230px;max-width: 60em; color:#cf9; font-size:16px;}
#left{float: left;width: 230px;margin: 0;padding: 0;background-color:#C9C;}
.leftlogo{padding:0px;}
.leftgoals{padding: .5em; background-color:#C9C; color:#fff;}

#navs{height:77px;background:url(images/nav-bg.gif) top left repeat-x;border-top: 1px solid gray;border-bottom: 1px solid gray; }
div#container_menu {width: 500px;height:77px;float:left;}							
a#menu_about { width: 80px; height: 77px; display: inline-block; background: url('images/aboutus.gif') top; }
a#menu_about:hover { background: url('images/aboutusOVER.gif') bottom; }
a#menu_donate { width: 60px; height: 77px; display: inline-block; background: url('images/donate.gif') top; }
a#menu_donate:hover { background: url('images/donateOVER.gif') bottom; }
a#menu_tax { width: 60px; height: 77px; display: inline-block; background: url('images/taxinfo.gif') top; }
a#menu_tax:hover { background: url('images/taxinfoOVER.gif') bottom; }
a#menu_auctions { width: 59px; height: 77px; display: inline-block; background: url('images/auctions.gif') top; }
a#menu_auctions:hover { background: url('images/auctionsOVER.gif') bottom; }
a#menu_contact { width: 115px; height: 77px; display:inline-block; background: url('images/contact.gif') top; }
a#menu_contact:hover { background: url('images/contactOVER.gif') bottom; }

.navRight {float:right; margin:20px 10px 0;}

#content{margin-left: 230px;padding: .5em;max-width: 60em;}
.box1{background:#FCF; width:225px; height:120px; float:left; padding:5px; border:1px solid #ccc; margin-left:5px; margin-bottom:10px;}
.box2{background:#FCF; width:225px; height:120px; float:left; padding:5px; border:1px solid #ccc; margin-left:5px; margin-bottom:10px;}
.box3{background:#FCF; width:225px; height:120px; float:left; padding:5px; border:1px solid #ccc; margin-left:5px; margin-bottom:10px;}

#footer{clear: both;margin: 0;padding: .5em;color: #fff;background-color: #666;border-top: 1px solid gray;}
p { margin: 0 0 1em 0; }
h1 { margin: 0 0 .5em 0; color:#636; font-size:16px;}
h2 { margin: 0 0 .5em 0; color:#636; font-size:14px;}
.imgLeft {float:left; border:none;}
.imgRight {float:right; border:none;}
a:link{color:#636;}
a:hover{color:#cf6;}
a:active, a:focus{color:#c0c;}

/* FORM STYLING */
form label {display: block; float: left; width: 100px; padding: 0; margin: 5px 0 0 0; text-align: right; }
form input, form textarea {width:auto; margin:5px 0 0 10px; }
form input#reset {margin-left:0px;}
textarea { overflow: auto; }
form .small {display: block; margin: 0 0 5px 160px; padding: 1px 3px; font-size: 88%;}
form .required{font-weight:bold;} /* uses class instead of div, more efficient */
form br {	clear:left;} /* setting clear on inputs didn't work consistently, so brs added for degrade */

/* VALIDATION BOX STYLING */
.checkboxRequiredMsg, .checkboxMinSelectionsMsg, .checkboxMaxSelectionsMsg,.textfieldRequiredMsg,.textfieldInvalidFormatMsg, .textfieldMinValueMsg,.textfieldMaxValueMsg,.textfieldMinCharsMsg,.textfieldMaxCharsMsg,.textfieldValidMsg {	display: none;}

.checkboxRequiredState .checkboxRequiredMsg,
.checkboxMinSelectionsState .checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState .checkboxMaxSelectionsMsg,
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{display: inline;color: #CC3333;border: 1px solid #CC3333;}

.textfieldValidState input, input.textfieldValidState {	background-color: #B8F5B1;}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {	background-color: #FFFFCC;}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText {color: red !important;}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {/*color: red !important;*/}