/* 
Author: [American Metal Roofs of Northern Ohio] 
Created Date: 08/21/2006
Last Modified Date: 08/023/2006
Purpose: Main Stylesheet 
*/


/* GENERAL BASE -------------------------------------------------------------------
------------------------------------------------------------------------- */

/* REMOVE INCONSISTENT (AMONG BROWSERS) PADDING AND MARGIN  */
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, dd, dt, img, blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td, a, form, input, textarea, fieldset, pre { margin:0; padding:0;}

/* AVOID BROWSER DEFAULT INCONSISTENT FONT-SIZES */
h1,h2,h3,h4,h5,h6,pre,code {font-size:1em;}

/* KILL BORDER ON IMG LINKS */
a img, :link img, :visited img {border: none;}

/* HARMONIZE LIST-BULLET TYPE */
ul, ol, dl {list-style-type: none;} 

/* REMOVE BROWSERS DEFAULT TABLE BORDERS */
table {border-collapse: collapse;}

/* SITE SPECIFIC BASE -----------------------------------------------------  
--------------------------------------------------------------------------*/

/* SET BODY ATTRIBUTES */
body {
font: 11px/1.5em Verdana, Helvetica, sans-serif;
color: #000;
background-color:#c2bf98;
}


/* SITE CONTENT -------------------------------------------------------------
---------------------------------------------------------------------------*/
div#WRAPPER {width:760px; margin:0 auto; border:1px solid #fff; border-width:0 1px 0 1px; background-color:#fff;}
div#LeftColumn {float:left; display:inline; width:552px;}
div#RightColumn {float:right; display:inline; width:208px;}

/* HEADER */
div#mastHead {background:#fff url(/elements/images/masthead_bg.gif) no-repeat top left; height:104px;}
	div#logo {position:absolute; z-index:100;}
	div#tagline {position:absolute; z-index:99;}

div#mastFeature {width:551px;}
	
	div.featureimage {border:4px solid #e1dfc2; border-width:4px 0 0 0;}
	
	div.featuretitle {border:1px solid #f1eadb; border-width:0 0 1px 0;height:32px; background:#fff url(/elements/images/feature_image2.jpg) no-repeat top left;  padding:0 20px 0 30px;}
		div.featuretitle h1 {font:normal 18px/32px Georgia, serif; color:#584d38;}
	
	div.featurebutton {height:25px; background:#ba974a url(/elements/images/btn_feature.gif) no-repeat top left; color:#fff;}
		div.featurebutton h1 {font:normal 10px/25px Verdana, sans-serif; color:#584d38; text-transform:uppercase; text-align:right; height:25px;}
		
		div.featurebutton a, 
		div.featurebutton a:link, 
		div.featurebutton a:visited {color:#fff; text-decoration:none; display:block; height:25px; padding:0 10px 0 20px; margin:0 4px 0 0;}
		
		div.featurebutton a:hover, 
		div.featurebutton a:focus, 
		div.featurebutton a:active {color:#fff; background-color:#dea933;}
 
/* Main Menu */
div#mainMenu {background:#e1dfc2 url(/elements/images/pnm_header_bg.gif) no-repeat top left; padding:30px 0 20px 0;}
	
	div#mainMenu ul {margin:0;}
		
		div#mainMenu ul li {font:normal 18px/1em Georgia, serif; display:inline;} 
			
			div#mainMenu ul li a,
			div#mainMenu ul li a:link,
			div#mainMenu ul li a:visited {display:block; font:normal 18px/1em Georgia, serif; padding:8px 10px; background-color:#e1dfc2; color:#584d38; border-left:3px solid #e1dfc2; border-bottom:1px solid #e1dfc2; text-decoration:none; width:185px;}
			
			div#mainMenu ul li a:hover,
			div#mainMenu ul li a:focus,
			div#mainMenu ul li a:active {background-color:#fff; border-left:3px solid #584d38; border-bottom:1px solid #c6c2a6;}
			
			div#mainMenu ul li a.selected,
			div#mainMenu ul li a.selected:link,
			div#mainMenu ul li a.selected:visited {background-color:#fff; border-left:3px solid #584d38; border-bottom:1px solid #c6c2a6;}
			
			div#mainMenu ul li a.selected:hover,
			div#mainMenu ul li a.selected:focus,
			div#mainMenu ul li a.selected:active {color:#dea933;}
						 
/* Sub Category Menu cascading under the main menu */
			
			div#mainMenu ul ul {margin:0 0 0 10px;}	
			
			div#mainMenu ul ul li a,
			div#mainMenu ul ul li a:link,
			div#mainMenu ul ul li a:visited {display:block; font:normal 12px/1em Georgia, serif; padding:4px 11px; background-color:#edecdc; color:#584d38;border-left:1px solid #e1dfc2; border-bottom:1px solid #e1dfc2; text-decoration:none; width:175px;}
			
			div#mainMenu ul ul li a:hover,
			div#mainMenu ul ul li a:focus,
			div#mainMenu ul ul li a:active {background-color:#fff;border-left:1px solid #584d38; border-bottom:1px solid #c6c2a6;}
			
			div#mainMenu ul ul li a.selected,
			div#mainMenu ul ul li a.selected:link,
			div#mainMenu ul ul li a.selected:visited {background-color:#fff; border-left:1px solid #584d38; border-bottom:1px solid #c6c2a6;}
			
			div#mainMenu ul ul li a.selected:hover,
			div#mainMenu ul ul li a.selected:focus,
			div#mainMenu ul ul li a.selected:active {color:#dea933;}
			 


/* Address Right Column */
div#address {background-color:#f1f0e1; color:#ba974a; border:1px solid #dedbd7; border-width:1px 0 1px 0; padding:20px 10px;}
	div#address p {line-height:1.75em;}

/* CONTENT */
div#content {padding:20px 20px 20px 30px;}
	
	div#content a, 
	div#content a:link, 
	div#content a:visited {color:#dea933; text-decoration:none;}
	
	div#content a:hover, 
	div#content a:focus, 
	div#content a:active {color:#fff; background-color:#dea933;}
	

/* Header - add more if needed but h4 to h6 have the same styles. Also added links to the headers so that any links applied to the header copy would sustain the its color. */	
	div#content h1 {font:normal 18px Georgia, serif; color:#ba974a; margin-bottom:1em;}
		div#content h1 a, div#content h1 a:link, div#content h1 a:visited {color:#ba974a;}
		div#content h1 a:hover, div#content h1 a:focus, div#content h1 a:active {color:#fff;}
	div#content h2 {font:bold 14px Verdana, sans-serif; color:#584d38; margin-bottom:1em;}
		div#content h2 a, div#content h2 a:link, div#content h2 a:visited {color:#584d38;}
		div#content h2 a:hover, div#content h2 a:focus, div#content h2 a:active {color:#fff;}
	div#content h3 {font:bold 11px Verdana, sans-serif; color:#666666; margin-bottom:1em;}
		div#content h3 a, div#content h3 a:link, div#content h3 a:visited {color:#666666;}
		div#content h3 a:hover, div#content h3 a:focus, div#content h3 a:active {color:#fff;}	
	
	div#content p {margin:0 0 1.5em 0;}
			
	div#content ul {list-style-type:disc; list-style-image:url(/elements/images/star.gif); margin:0 3em 1.5em 3em;}
		div#content ul ul {list-style-type:circle; list-style-image:none; margin-top:.5em;}
			div#content ul ul ul {list-style-type:square; list-style-image:none; margin-top:.5em;}
	
	div#content ol {list-style-type:decimal; margin:0 3em 1.5em 3em;}
		div#content ol ol {list-style-type:upper-alpha; list-style-image:none; margin-top:.5em;}
			div#content ol ol ol {list-style-type:lower-alpha; list-style-image:none; margin-top:.5em;}
		
		div#content li {line-height:1.25em; margin:0 0 .5em 0;}
	
	

/* FOOTER */

div#FOOTER {border:1px solid #e1dfc2; border-width:1px 0 0 0; background-color:#f1f0e1; padding:10px 20px 60px 30px;}

	div#FooterMenu {margin:0 0 10px 0;}
		
		div#FooterMenu li {font:normal 14px/1.5em Georgia, serif; color:#584d38; display:inline; margin:0 2px 0 0;}
		
		div#FooterMenu li a,
		div#FooterMenu li a:link,
		div#FooterMenu li a:visited {color:#584d38; text-decoration:none;}
		
		div#FooterMenu li a:hover,
		div#FooterMenu li a:focus,
		div#FooterMenu li a:active {color:#cc9933;}

	div#CopyRight {}
	
		div#CopyRight p {color:#999; font:normal 10px Verdana, Arial, Helvetica, sans-serif; margin:0 0 1.5em;}
		
		div#CopyRight a, 
		div#CopyRight a:link,
		div#CopyRight a:visited {color:#999; text-decoration:none;}
		
		div#CopyRight a:hover,
		div#CopyRight a:focus,
		div#CopyRight a:active {color:#dea933;}



/* Photo Gallery */
div.album {margin:0 0 10px 0;}
	div.slide {margin:0 0 5px 5px; padding:5px; background-color:#e1dfc2; border:1px solid #666; float:left; display:block;}
	div.slide img {border:1px solid #333;}

/* Image frame adjacent to copy */
div.floatimage {margin:0 0 5px 5px; padding:5px; background-color:#e1dfc2; border:1px solid #666; float:right; display:block;}
	div.floatimage img {border:1px solid #333;}

/* FORMS */
div.form_wrapper {border:1px solid #f1f0e1; padding:5px; width:480px;}
	table.form_table {width:100%;}
		div#content table.form_table h3 {color:#584d38;}
		
		table.form_table th {padding:10px 5px; background-color:#e1dfc2;}
			th.form_header {text-align:left;}
			
		table.form_table td {padding:5px;}
			td.form_label {background-color:#f1f0e1; text-align:right; border:1px solid #fff; border-width:0 1px 1px 0;}						
			td.form_input {border:1px solid #f1f0e1; border-width:0 1px 1px 0;}
			td.form_input input, td.form_input textarea {border:1px solid #c2bf98;}
			td.form_input input {width:150px;}
			td.form_input textarea {width:300px; height:75px;}

			th.form_footer {text-align:right;}
			th.form_footer input.submit {background-color:#fff; font:normal 12px/1em Verdana, Helvetica, sans-serif; color:#584d38; height:20px; width:120px; padding:0px;border:1px solid #c2bf98;}
span.required {color:#990000; font-weight:bold;}

/* MISC */
div.divider {border-bottom:1px solid #e1dfc2; margin:0 0 10px 0;}
span.bold {font-weight:bold;}
span.italic {font-style:italic;}


/* FLOAT CLEARING FIX ----------------------------------------------------*/
/* Apply [class]:after to float containers */
.clearfix:after {color:#FFFFFF;content:"";display:block;height:0;clear:both;}
/* APPLIED FOR FIXING IE/MAC RENDER */	
.clearfix{display: inline-table; zoom:1;} 
/* Hides from IE Mac and Applied to IE/WIN Only \*/ 
* html .clearfix {height: 1%;}
.clearfix {display:block;} 
/* FLOAT CLEARING FIX ----------------------------------------------------*/