/* ========= Contact Form =============*/

/* id for the form itself */
form#my_form { 
  padding: 0;
  margin: 0;
}

/* section fieldsets - it's common to make this border : 0; */
fieldset { 
 padding: 10px;
 margin: 0 0 20px 0 ;
 border: 1px solid #ccc;
}
/* outer fieldset - it's common to make this border : 0; */
fieldset#formwrap { 
	padding:0;
	margin:0;
  	border: none;
  /* background-color : #fefefe; */
}
fieldset.left { 
 padding:0 10px 0 0;
 margin:0;
 border: none;
 width:220px;
 float:left;
}
fieldset.left2 { 
 padding: 10px 0 10px 10px;
 margin: 0 10px 20px 0 ;
 border: 1px solid #ccc;
 width:195px;
 float:left;
}
/* form legends and dt "heading" */
legend, dt { 
  color: #333;
  font: 1em Arial, Helvetica, Verdana, sans-serif;;
  padding: 0 8px;
  font-weight:bold;
}

/* form label text */
label { 
  color: #333;
  font: .9em Arial, Helvetica, Verdana, sans-serif;;
  padding: 10px 0 0 0;
}

/* all inputs, select, and textarea */
input.med, input.short, select.med, textarea.textbox { 
  font: .9em Arial, Helvetica, Verdana, sans-serif;
  color: #666; 
  padding: 4px 0 4px 4px; 
  margin: 0 0 5px 0; 
  background-color: #efefef;
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
}
/* hover and focus styling - the classes like .hover and .focus below are for the javascript for IE */
input.med:hover, input.med:focus, input.short:hover, input.short:hover, select.med:hover, select.med:focus, textarea.textbox:hover, textarea.textbox:focus, input.med.hover, input.med.focus, input.short.hover, input.short.focus, select.med.hover, select.med.focus, textarea.textbox.hover, textarea.textbox.focus { 
  font: .9em Arial, Helvetica, Verdana, sans-serif;
  color: #333; 
  padding: 4px 0 4px 4px; 
  margin: 0 0 5px 0; 
  background-color:#c6d6e3;
  border-top: solid 1px #999;
  border-left: solid 1px #999;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
}

/* to make focus stable in IE 6 */
* html input.button { 
  border-top: solid 1px #999;
  border-left: solid 1px #999;
  border-bottom: solid 1px #666;
  border-right: solid 1px #666;
  background-color:#ccc;
  padding: 4px;
  font-size: 1em;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  cursor: pointer;
}
* html input.button.hover { 
  border-top: solid 1px #666;
  border-left: solid 1px #666;
  border-bottom: solid 1px #999;
  border-right: solid 1px #999;
  background-color:#999;
  padding: 4px;
  margin: 0;
  font-size: 1em;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  cursor: pointer;
}
* html input.button.focus { 
  border-top: solid 1px #666;
  border-left: solid 1px #666;
  border-bottom: solid 1px #999;
  border-right: solid 1px #999;
  background-color:#999;
  padding: 4px;
  margin: 0;
  font-size: 1em;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  cursor: pointer;
}

input.button {
  border-top: solid 1px #999;
  border-left: solid 1px #999;
  border-bottom: solid 1px #666;
  border-right: solid 1px #666;
  background-color:#ccc;
  padding: 4px;
  margin: 0 0 10px 0;
  font-size: 1em;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  cursor: pointer;
}
input.button:hover { 
  border-top: solid 1px #666;
  border-left: solid 1px #666;
  border-bottom: solid 1px #999;
  border-right: solid 1px #999;
  background-color:#999;
  padding: 4px;
  margin: 0 0 10px 0;
  font-size: 1em;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  cursor: pointer;
  color:#fff;
}

/* set up relativity to position small Why? text */
small.whythis { 
  position : relative; 
}

/* Why? link style */
small.whythis a { 
  text-decoration : underline; 
  font-size : 0.95em;
}

small.whythis a:hover, small.whythis a:focus, small.whythis a:active { 
  text-decoration : none;
} 

/* hide the Why? text span */
small.whythis a span { 
  background-color : #fff; 
  padding : 0 4px 0 4px; 
  color : #fff;
  text-decoration : none; 
}

/* bring back Why? text span (title attribute backs this up for borwsers it doesn't function in */
small.whythis a:hover span, small.whythis a:focus span, small.whythis a:active span { 
  background-color : #fff; 
  color : #333;
  padding : 0 4px 0 4px; 
  margin: 0 0 0 10px;
  text-decoration : none; 
}

/* text that are options in form */
span.options { 
  color: #666; 
  font-weight:normal; 
  font-size:1em;
}

/* error heading weight and color - bold is for the error reason text */
span.errors, dt.errors, strong.errors { 
  color:#CC6600; 
  font-weight:normal; 
}

/* success heading color */
span.success { 
  color:#CC6600; 
  font-weight : normal; 
}