/*
   ----------------------------------------------------------------
   GBCF-V3 DEFAULT STYLE SHEET - MIKE CHERIM HTTP://GREEN-BEAST.COM
   Modified 1/20/2013  by Diane Fredericks
   ----------------------------------------------------------------
*/

/* === form div and elements ======================================= */
/*** form div  is the whole form */
#form-div {             
  font-family : verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  font-size: 12px;
  /* width : 85%;  /*** Seems like a good size  */
  margin: auto;   /*** centers form in container */
  color: #ffe101; /*** yellow */  /***  for Form main legend and for closure text at very bottom of form  <<<<<<<<<<< Change >>>>>>> */
  line-height : 1.5em;
}

#form-div p.form-footer {
  margin : -35px 2px 20px 13px;
 }

#form-div p.form-footer a { 
  color : #669900; 
}

#form-div p.form-footer a:hover, #form-div p.form-footer a:focus, #form-div p.form-footer a:active { 
  color : #000; 
  text-decoration : none; 
}

#form-div p.form-footer a:focus, #form-div p.form-footer a:active { 
  background-color : #eee; 
}


/* === form div link styles ======================================== */

#form-div a { 
  color : #669900; 
}
  
#form-div a:hover, #form-div a:focus, #form-div a:active { 
  color : #000; 
  text-decoration : none; 
}

#form-div a:focus, #form-div a:active { 
  background-color : #eee; 
}


/* === success and error message/results box ======================= */

/**************<<<<<<<<<< Change these sections at end of file >>>>>>>>>>>>>>>> ******************/
/*
#form-div p.success, #form-div p.error, #form-div p.center { 
  color : #fff;
  border : 1px solid #000; 
  background-color : #669900;  
  margin : 10px 3px;
  padding : 1px 4px; 
  text-align : center;
}

#form-div p.error { 
  background-color : #bb0000; 
}

#form-div p.error a, #form-div p.success a {
  color : #ffff7f;
}
*/

#form-div p.center {
  text-align : center;  /************   hum go left?  NOthing seemed to change when align left was used ***/
  background-color : yellow;  /*  #edbaba;  */   /****   hum, nothing seemed to change   ***/
  color : orange; /*  inside text boxes?? Nope - not sure.   was #000;  */
  margin-top : -3px;
  padding : 0px 4px; 
}


/* === structural form elements ==================================== */

form#gbcf-form { }

fieldset.main-set,
fieldset.req-set,
fieldset.opt-set { 
  border : 1px solid green;     /***** outline (border) of each sections (sub and main legends) <<<<<<<<<<< Change >>>>>>>  ****************/
  padding : 0px;
  margin:0px;  
}
fieldset.req-set-1{
	padding-top:20px;        /************ Adds space at top of form - above 1st field and below main legend.  I added new class -set-1  DF  ***/
}

/* === textural form elements ====================================== */

#form-div legend { 
  font-weight : bold;
  margin-left:4px;
  padding-left:2px;
}

#form-div legend span {  }


/**************<<<<<<<<<< Change this - legend.main-legend color - at end of file >>>>>>>>>>>>>>>> ******************/
legend.main-legend { 
  /*color : orange;  /*** Main form title - the one at the very top.  Ex: Contact Form, Feedback Form. << Change >>  Uses form-div if not noted here */
  /*  margin-left:2px;    /*** not being used - I placed under the #form-dive legend span instead (see above) ****/
  /*  font-size : 110%;   /*** don't believe this is being used ***/
}

legend.req-legend,
legend.opt-legend { 
  color : #666;    /*** Sub-section titles; Those containing required and optional fields */
}

legend.main-legend span { }
legend.main-legend { }

legend.req-legend span { }
legend.req-legend {
  margin-left : -2px;
}

legend.opt-legend span { }
legend.opt-legend { 
  margin-left : -2px;
}
/*   <<<<<<<<<<<<<<<<<<<<<<<<< change this section at bottom of page  >>>>>>>>>>>>>>>>>>>>>>>>>>> 
label.req-label, label.opt-label {
	color:blue; 
	float:left;
	width:150px;
	text-align:right;
	clear:left;
	margin-right:8px;
	margin-bottom:12px;
} */

/*** I've added the fieldset styles...   and it doesn't look like it does anything 
fieldset {
	float: left;
	clear: left;
	width: 100%;
	margin: 0 0 1.5em 0;
	padding: 0;
	border: 0px solid orange;
}	
/***   *********************  */
label.opt-label.check {
  float : right;
  padding : 0;
  margin : 1px 4px;
  cursor : pointer;
}

label.opt-label.main-label {
  margin : 0 2px;
  font-weight : bold;
}

label.opt-label.main-label span {
  font-weight : normal;
  color: purple;   /*** not sure what this does */
}

label.opt-label.main-label span.req, label span.req  {
  font-weight : bold;
  color : orange;   /*** Not sure what this does */
}


/**************<<<<<<<<<< Change this label.req-label.explain at end of file >>>>>>>>>>>>>>>> ******************/
/*
label.req-label.explain {  
  color : #525252;
  font-size : .8em;
}
label.req-label.explain:hover {
  color : #000;
}
*/


/* === control and interface form elements ========================= */
/*
  note: In this section you will see the hover/focus styles for the 
  inputs. For example: input:hover, input:focus. You will also see 
  these names applied as classes: input.hover, input,focus, for 
  example. This is not done by mistake. Those classes are needed for 
  the JavaScript focus script (files/focus.js) for IE 7 and older.
*/

input.text-long.address, input.text-long.address:hover, input.text-long.address:focus,
input.text-long.address.hover, input.text-long.address.focus {
  border-bottom : 0;
  margin-bottom : 0;
  padding-bottom : 2px;
  border-bottom : 1px dotted #bbb;
}

input.text-long.address2, input.text-long.address2:hover, input.text-long.address2:focus,
input.text-long.address2.hover, input.text-long.address2.focus {
  border-top : 0;
  margin-top : 0;
  padding-top : 2px;
  border-top : 1px dotted #bbb;
}

input.checkbox {
  border : 1px solid #999;
  width : .9em;
  height : .9em;
  padding : 0;
  margin : 0;
  cursor : pointer;
}

input.checkbox:hover, input.checkbox.hover,
input.checkbox:focus, input.checkbox.focus {
  border : 1px solid #666;
}

input.text-short, 
input.text-med, 
input.text-long,
select.select,
textarea.textarea {
  /*font : 1em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  border : 1px solid #999;
  background-color: #fffffe;
  color: blue;   */  /**************<<<<<<<<<< Change this section at end of file >>>>>>>>>>>>>>>> ******************/
  cursor : text;
  padding : 1px 2px;
  margin-bottom:12px;  /*********** This should be the same as the label margin-bottom DF  **********************/
  float:left;    /************************  moves text inputs to the left next to labels !!!!  DF ******************************/
}

select.select {
  padding : 1px 0;
}

input.text-short {
  width : 100px;
}

input.text-med, select.select {
  width : 250px;
}

input.text-long {
  width : 250px;   /* for address line - was easier to change width here than to change the class for address1 and address2 to text-med class  DF */
}

textarea.textarea {
  width : 250px;
  height : 100px;
}

select.select, select.select option {
  cursor : pointer;
}

input.text-short:focus, input.text-short.focus, 
input.text-med:focus, input.text-med.focus,
input.text-long:focus, input.text-long.focus,
select.select:focus, input.select.focus,
textarea.textarea:focus, textarea.textarea.focus {
  border : 1px solid #666;
  background-color : #ffe;
}

input.button { 
  font : 1.1em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  font-weight : bold;
  margin-top : 8px;
  margin-bottom: 20px;   /**** I added this  DF    *****/
  padding : 1px 10px;
  cursor : pointer;
  /* float : right;          I remarked this out  - want it to be centered DF */
  clear : both;
  /*  color : blue;   /**************<<<<<<<<<< Change color at end of file >>>>>>>>>>>>>>>> ******************/  
}

input.button:hover, input.button.hover,
input.button:focus, input.button.focus {
  color : #333;
}

/* because IE6 sucks - if you have a conditionally served IE6 style sheet add this to it */
* html input.button {
  border : 1px solid #666;
}

/* EOF - Created by Mike Cherim @ http://green-beast.com =========== Modified and chopped up by DF  */

/*** =============================================================================================================================== ***/
/*** =========================================== Common setting changes for Contact Form =========================================== ***/
/*** =============================================================================================================================== ***/
#formWrap{
     width:250px;
	 margin: auto;
	 border:0px solid white;
}
/*.note{
	font-size:12px;
} */
.asterisk{
	font-weight:bold;
	font-size:10px;
	color:#dc9c1b;   /*  gold color of asterisk   Note: Change config ? file for error code asterisk color */
}
/* ==========================  Overrides default.css  ============================= */
#form-div fieldset.main-set,
#form-div fieldset.req-set,
#form-div fieldset.opt-set { 
  border : 0px solid #ffe101;  /* yellow */   /* sub and main legend */
}
input.text-short, 
input.text-med, 
input.text-long,
select.select,
textarea.textarea {
  font : 1em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  border : 1px solid #999;
  background-color: #fffffe;
  color: #333;  /* grey */
}
label.req-label, label.opt-label {
	color: #dc9c1b; /* gold */
	font-weight:bold;   /* note: req-label bold style is set at element level.... somehow.  And color set in config file */
	float:left;
	width:250px;
	text-align:left;
	clear:left;
	margin-right:0px;
	margin-bottom:0px;
}

/*  Puts label on same line as text input area  */
/* label.req-label, label.opt-label {
	float:left;
	width:150px;
	text-align:right;
	clear:left;
	margin-right:8px;
	margin-bottom:12px;
} */
legend.main-legend { 
  color :#ffe101;  /* yellow */
}
/*  === Spam question ===== */
label.req-label.explain {
	color:#999;
    float: none;      /* To place below input line, float left  */
    padding-left: 5px;
    text-align: left;
	font-size : .8em;
}
label.req-label.explain:hover {
  color : #999;
}
input.button { 
  color:#dc9c1b;;  /* gold */
}
/* =================== success and error message/results box ======================= */
#form-div p.success, #form-div p.error, #form-div p.center { 
  color:#820024; /* logo maroon */  
  border : 2px #dc9c1b double;
  background-color:#dc9c1b;
  background-image:url(../../../images/tri-color-line.gif);
  background-repeat:repeat-x; 
  text-align : center;
  z-index:99;
/*	-webkit-box-shadow: 0px 4px 12px #333;
	-moz-box-shadow: 0px 4px 12px #333;
	box-shadow: 0px 4px 12px #333; */
}
#form-div p.success {
	position: absolute;
	padding : 45px 0px 25px 0px; 
    height: 112px;
    left: 645px;
    top: 370px;
    width: 280px;
}
#form-div p.error {
	position:relative;
	width:270px;
	padding: 25px 10px 15px 10px;
	margin-left:-13px;
	margin-bottom:0px;
}
/*  ===========  hyperlink  ===============*/
#form-div p.error a, #form-div p.success a {
  color:#820024;
}
#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active, 
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
  color : #fefefe;
  background-color:#820024;
}