/* 
secondary styles features areas local to pages or individual sections
when needed, this page can be modified and assembled for section content and then reassembled in the linked css file
This will only occcur when the subsection has multiple div tags to avoid adding uneccessary weight to this file*/

/* -- Contact area styles -- */
#contactArea {
	padding: 1em 0 1em 1.2em;
	}
#contactArea h1{
	font: bold 1.4em/1.8em "Trebuchet MS", Helvetica, sans-serif;
	text-transform: uppercase;
	color: #d52e36;
	}
#contactArea h2{
	font: 1.4em/1.8em "Trebuchet MS", Helvetica, sans-serif;
	color: #028925;
	}
#contactArea p{
	/*font: .9em/1.4em Georgia, "Times New Roman", Times, serif;*/
	color: #333;
	margin-bottom:1em;
	}
#contactArea a{
	color: #d52e36;
	text-decoration: none;
	border-bottom: dotted 1px #d52e36;
	}
#contactArea a:hover{
	border-bottom-style: solid;
	}
#contactArea img{
	float:left;
	padding-right:1em;
	}
/* -- Forms styles --*/

/* uncomment these out for form structuring exercise */
fieldset {
	margin-top: 30px;
	margin-bottom: 25px;
	margin-left: 10px;
	display: block;
	padding-left: 15px;
	
}

legend {
	font: bold 16px Georgia, "Times New Roman", Times, serif;
	text-transform: lowercase;
	padding: 2px 5px;
	color: #663300;
	margin-bottom: 20px;
	margin-left: -18px;
	margin-top: -2px;
	display: inline;
}
.submit {
	margin-left: 10px;
	}
.clear {
	clear:both;
	}

input {
	width: 200px;
	
	
	}
/* reset width for non-text inputs     */

input.radio, input.checkbox, input.submit, input.cc_form_basic_Button, input.cc_form_basic_DisplayMain, input.textarea {
	width: auto;
	
	}
	
/*  display labels next to form elements, add a class for when you want them to stack     */
label {
	float: left;
	margin-right: 2em;
	width: 120px;
	}

label.top {
	display: block;
	float: none;
	}
	
#estimateType  {
	margin: 20px 0;
	}
	
/*  display labels inline with checkboxes    */
#estimateType label, #estimateinfo label {
	float: none;
	display: inline;
	padding-left: 5px;
	}
	
/*  align columns of checkboxes or radio buttons   */
div.group1, div.group2, div.group3 {
	float: left;
	width: 15em;
	padding-left: 5px;
	}

/* style feedback message   */
label .feedback {
	position:absolute;
	margin-left: 6em;
	left: 360px;
	font-weight: bold;
	color:#760000;
	padding: 0 0 5px 20px;
	/*  width for IE   */
	width: 200px;
	background-image: url(../images/notice.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}	
	
/* contain interior floats */
#docform {
	float:left;
	}
#docform p{
	position: relative;
	width: 100%;
	}
#docform form {
	border: 1px solid #CCCCCC;
	width: 540px;
	margin-left: 30px;
	margin-top: 20px;
}

/*  ------  these styles use attribute selectors and the focus pseudo-class selector to style form elements in DOM compliant browsers.  Other browsers, such as IE 6 will ignore these styles and render the default. ------------ */

fieldset[id=personalinfo] {
	border: 3px ridge #000;
	background-color: #FFFF99;
	}
	
fieldset[id=estimateinfo]  {
	border: 3px ridge #000;
	background-color: #CCFFFF;
	}

fieldset[id=searchinfo]  {
	background: #ccc;
	border: 3px ridge #000;
	}
		
legend[class=perlegend]  {
	border-top: 3px ridge #000;
	border-right: 3px ridge #000;
	border-left: 3px ridge #000;
	background-color: #FFFF99;
	}
legend[class=estimatelegend]  {
	border-top: 3px ridge #000;
	border-right: 3px ridge #000;
	border-left: 3px ridge #000;
	background-color: #CCFFFF;
	}
	
legend[class=searchlegend]  {
	background: #ccc;
	border-top: 3px ridge #000;
	border-right: 3px ridge #000;
	border-left: 3px ridge #000;
	}
	
input:focus, textarea:focus {
	border: 2px solid #67836A;
	}