/* Global Styles */
html {
font: 100% arial, sans-serif;
margin: 0;
padding: 0;
}
body  {
font: 100% arial, sans-serif;
color: #333333;
background: #d6d1be url(images/bodyBack.jpg) left top repeat-x;
margin: 0;
padding: 30px 0;
}
#pageContainer {
font-size: .75em;
color: #333333;
background: #ffffff url(images/navBack.jpg) left top repeat-y;
width: 736px;
margin: auto;
border: 2px solid #ffffff;
}
.clear {
height: 1px;
clear: both;
overflow: hidden;
}
p {
margin: 0;
padding: 0;
}
form {
margin: 0;
padding: 0;
}
img {
border: none;
}


/* Header */
#header {
background: #ffffff url(images/logo.jpg) left top no-repeat;
text-align: right;
height: 97px;
position: relative;	
}
#logoLink {
display: block;
height: 95px;
width: 190px;
position: absolute;
top: 0;
left: 0;	
}
#contactInfo {
border: 2px solid #d1d1d1;
width: 11em;
padding: .4em .5em;
background: #ffffff;
float: right;
}
#contactInfo address {
font-size: .9em;
font-weight: bold;
font-style: normal;	
}
#contactInfo a:link, #contactInfo a:visited {
color: #194b91;
background: #ffffff;
text-decoration: none;
font-weight: bold;
}
#contactInfo a:hover, #contactInfo a:visited:hover {
color: #ffffff;
background: #194b91;
text-decoration: none;
font-weight: bold;
}


/* Main Navigation */
#mainNav {
float: left;
width: 190px;	
}
#mainNav ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainLink, .mainLink:visited {
border-bottom: 2px solid #ffffff;
display: block;
padding: .3em .5em;
color: #194b91;
background: #d9d9d9;
text-decoration: none;
font-weight: bold;
}
.mainLink:hover, .mainLink:visited:hover {
border-bottom: 2px solid #ffffff;
display: block;
padding: .3em .5em;
color: #ffffff;
background: #194b91 url(images/linkStar.jpg) right center no-repeat;
text-decoration: none;
font-weight: bold;
}
#portfolioLinks {
background: #e5eaf1;
border-bottom: 2px solid #ffffff;
padding: .5em;
font-weight: bold;
}
#portfolioLinks a:link, #portfolioLinks a:visited {
color: #194b91;	
text-decoration: none;
}
#portfolioLinks a:hover, #portfolioLinks a:visited:hover {
color: #194b91;	
text-decoration: underline;
}
#quoteLink, #quoteLink:visited {
border-bottom: 2px solid #ffffff;
display: block;
padding: .5em;
color: #ffffff;
background: #7693b5 url(images/quoteBack.jpg) left top repeat-x;
text-decoration: none;
font-weight: bold;
}
#quoteLink:hover, #quoteLink:visited:hover {
border-bottom: 2px solid #ffffff;
display: block;
padding: .5em;
color: #ffffff;
background: #194b91;
text-decoration: none;
font-weight: bold;
}
#colorPicker, #colorPicker:visited {
display: block;
background: #fff0d7 url(images/colorPicker.jpg) right top no-repeat;
padding: .8em 5.5em .8em .5em;
border-bottom: 2px solid #ffffff;
text-decoration: none;
color: #333333;
}
#colorPicker:hover, #colorPicker:visited:hover {
display: block;
background: #fff0d7 url(images/colorPicker.jpg) right top no-repeat;
padding: .8em 5.5em .8em .5em;
border-bottom: 2px solid #ffffff;
text-decoration: none;
color: #007843;
}
#colorPicker span {
display: block;
font-weight: bold;	
}
#affiliations {
margin: 8px;	
}
#quoteRequestContainer {
padding: 8px;
background: #7693b5 url(images/quoteBack.jpg) left top repeat-x;
color: #ffffff;	
}
#quoteRequestContainer strong {
color: #ffffff;
display: block;	
}
#quoteRequestContainer label {
display: block;		
}
#zip_required {
width: 45%;
border: none;
font: 1em arial, sans-serif;	
}
#zipSubmit {
background: #ebebeb;
border: 0;
color: #194b91;
font: bold .9em arial, sans-serif;
padding: .2em;
margin: 0;
cursor: pointer;
}


/* Content */
#content {
float: right;
width: 543px;
padding-bottom: 3em;
}
#adSpace {
background: #000000;
height: 120px;	
}
#zipSearch {
padding: 80px 280px 0 17px;
color: #ffffff;
}
#zip {
background: #ffffff url(images/zipBack.jpg) left top repeat-x;
border: 0;	
font: 1em arial, sans-serif;
color: #333333;
padding: .2em;
}
#content h1 {
margin: 1.5em 40px .2em 40px;
padding: 0;	
color: #1c3f81;
font-size: 1.7em;
}
#content h2 {
margin: 1.5em 40px .2em 40px;
padding: 0;
color: #007647;
font-size: 1.3em;	
}
#content p {
margin: 0 40px 1em 40px;
text-align: justify;	
}
.highlightContainer {
background: #fff0d7;
margin: 0 40px 1em 40px;
padding: 1px;
}
#content .highlightContainer img {
float: left;
margin: 20px;
position: relative;
}
#content .highlightContainer h2 {
margin: 18px 20px .2em 240px;
position: relative;	
}
#content .highlightContainer p {
margin: 0 20px 1em 240px;
position: relative;
}
#content ul {
list-style: square;
margin: 0 40px 1em 40px; 	
}



/* Color Picker */
#colorPickerContent {
background: #ffffff;
padding-bottom: 3em;
width: 100%;
}
#colorPickerContent h1 {
padding: 1.5em 40px .2em 40px;
margin: 0;	
color: #1c3f81;
font-size: 1.7em;	
}
#colorPickerContent h2 {
margin: 1.5em 40px .2em 40px;
padding: 0;
color: #007647;
font-size: 1.3em;	
}
#colorPickerContent p {
margin: 0 40px 1em 40px;
text-align: justify;	
}
#colorPickerContent ul {
list-style: square;
margin: 0 40px 1em 40px; 	
}
#colorPickerContainer {
background: #f0f0f0;
padding: 8px;
}
#pickerBackground {
height: 480px;
width: 722px;
background: url(buildImages/background.jpg) left top no-repeat;
position: relative;
}
#colorPickerOptions {
margin-top: 8px;
background: url(buildImages/optionsBack.jpg) left center no-repeat;	
}
.optionsTitle {
font-weight: bold;
color: #1c3f81;
}
.optionsTitle span {
font-weight: normal;
color: #888888;
}
#wallColor {
position: absolute;
top: 0;
left: 0;
height: 480px;
width: 722px;
}
#roofColor {
position: absolute;
top: 0;
left: 0;
height: 480px;
width: 722px;
}
#trimColor {
position: absolute;
top: 0;
left: 0;
height: 480px;
width: 722px;
}
#landscape {
position: absolute;
top: 0;
left: 0;
}
#pickerButtons {
padding: 8px 0 0 0;
float: left;
width: 208px;
text-align: center;
cursor: pointer;
}
#pickerLandscapeButtons {
padding: 8px 0 0 0;
float: right;
width: 208px;
text-align: center;
cursor: pointer;
}
.pickerButton {
cursor: pointer;	
}
#colorSwatches {
padding: 8px 0 0 0;
float: left;
width: 300px;
text-align: center;
}
.activeSwatch {
border: 1px solid #000000;
cursor: pointer;	
}
.swatch {
border: 1px solid #ffffff;
cursor: pointer;	
}
#colorPickerContent .descTitle {
font-weight: bold;
margin: 1em 0 .2em 0;
padding: 0;
font-size: 1.1em;
}
#colorPickerContent .descBody {
margin-left: 0;
padding-left: 0;
}



/* Footer */
#footer {
text-align: right;
margin-bottom: -1.8em;
color: #777777;	
}
#legalLink, #legalLink:visited {
color: #222222;
text-decoration: none;
}
#legalLink:hover, #legalLink:visited:hover {
color: #222222;
text-decoration: underline;
}


/* Forms */
.formContainer {
margin: 2em 40px 1.5em 40px;
padding: 1.5em;
background: #ffffff;
color: #333333;	
}
.formContainer em {
color: #b40000;
background: #ffffff;
font-size: .9em;
}
fieldset {
border: 2px solid #ebebeb;
margin: 0;
padding: 0;
}
legend {
font-weight: bold;
margin: 0;
padding: 0;	
color: #1c3f81;
font-size: 1.7em;
}
.formInstructions {
padding: .4em;
color: #333333;
background: #ffffff;
}
.formList {
list-style: none;
margin: 0;
padding: 0;
}
.formRow {
clear: both;
border-top: 1px solid #dee2e8;
padding: .2em .4em;
margin: .1em 0;
height: 2.5em;
}
.formRowImage {
clear: both;
border-top: 1px solid #dee2e8;
padding: .2em .4em;
margin: .1em 0;
height: 11em;
}
.formRowTextarea {
clear: both;
border-top: 1px solid #dee2e8;
padding: .2em .4em;
margin: .1em 0;
height: 5em;	
}
.formRowFull {
clear: both;
border-top: 1px solid #dee2e8;
padding: .2em .4em;
margin: .1em 0;	
}
.formColumnLeft {
float: left;	
width: 48%;
}
.formColumnRight {
float: right;
width: 48%;	
text-align: right;
}
.formElementLabel {
width: 100%;
}
.formElementInput {
font: 1em arial, sans-serif;
color: #333333;
background: #ffffff;
border: 1px solid #333333;
width: 100%;
}
.formElementTextarea {
font: 1em arial, sans-serif;
color: #333333;
background: #ffffff;
border: 1px solid #333333;
width: 100%;
}
.formElementSelect {
font: 1em arial, sans-serif;
color: #333333;
background: #ffffff;
border: 1px solid #333333;
width: 100%;	
}
.formElementButton {
font: bold 1em arial, sans-serif;
color: #333333;
background: #eeede9;
border: 1px solid #333333;
cursor: pointer;	
}
#formMessage {
text-align: right;
font-weight: bold;
color: #ffcc00;
background: #ffffff;
}



/* Contextual Help */
.contextualHelp {
background: #555555;
color: #ffffff;
font-size: .8em;
font-weight: bold;
padding: 8px;
position: absolute;
top: 0px;
left: 0px;
width: 250px;
z-index: 99;
border: 1px solid #ffffff;	
}



/* Other Styles */
.inlineLink, .inlineLink:visited {
color: #194b92;
text-decoration: none;
cursor: pointer;
}
.inlineLink:hover, .inlineLink:visited:hover {
color: #194b92;
text-decoration: underline;
cursor: pointer;
}
.backLink, .backLink:visited {
color: #194b92;
text-decoration: none;
cursor: pointer;
}
.backLink:hover, .backLink:visited:hover {
color: #194b92;
text-decoration: underline;
cursor: pointer;
}
.backLinkContainer {
padding: .5em;
text-align: right;	
}
.previousLinkContainer {
float: left;
width: 30%;
margin: 0 40px;
font-weight: bold;
}
.nextLinkContainer {
float: right;
width: 30%;	
text-align: right;
margin: 0 40px;
font-weight: bold;
}
.previousLink, .previousLink:visited, .nextLink, .nextLink:visited {
color: #194b92;
text-decoration: none;
position: relative;
}
.previousLink:hover, .previousLink:visited:hover,.nextLink:hover, .nextLink:visited:hover {
color: #194b92;
text-decoration: underline;
position: relative;
}

#overheadDoorList .clear {
height: 1px;
clear: both;
overflow: hidden;
}
#overheadDoorList .formRowDoor {
border-top: 1px solid #dee2e8;
padding: .2em .4em;
margin: .1em 0;
height: 9em;
}
#overheadDoorList strong {
display: block;
margin: .5em 0;
}