/* Global Styles */
html,body{
	margin:0;
	padding:0
}
body{
	font: 76% Arial, Verdana, serif, sans-serif; 
	background-color: black;
}
hr.Gold {
	border:0;
	background-color: #FFD700;
	height: 2px;
}
/* TEXT STYLES */
p{
	padding:0 5px 0px; 
	font-size: 1em; 
	line-height: 1.3em; 
	letter-spacing: 1px;
}
h1 { 
	font-size: 2.5em; 
	margin-top: 0;  
	text-transform:uppercase;
	border-bottom: 2px solid Gold;
}
h2 { font-size: 2em; line-height: 1.3em; letter-spacing: -1px;}
h3 { font-size: 1.5em;}
h4 { font-size: 1.25em;}
h5 {font-size: 1em; font-weight:bold;}
h1,h2,h3,h4,h5 {padding:0px 5px 0px;}
#navigation p, #extra p {color:White;}
a:link { color: blue; text-decoration:none; border-bottom: 1px solid darkorange; padding:1px;}
a:visited {color: blue; text-decoration:none; border-bottom: 1px solid darkorange; }
a:hover {background-color: black; color:yellow; }
a.none:link, a.none:visited, a.none:hover {border: 0px !important; background-color: transparent;}
a.phone:link, a.phone:visited, a.phone:hover {color: yellow; border: 0px !important; background-color: transparent; font-size: 1.25em;}
acronym {border-bottom: 1px dotted LightGrey; cursor:help; } 
label.header {
	font-size:2.5em; color: LightGrey; font-weight:bold;
	/*border-bottom: 2px solid;*/ margin-bottom: 0; padding-bottom:0; 

} 
   /* label.header is the label for the search box but can be used for other forms by using class="header" in a label */
form,submit { padding:0; margin:0; } /* removes extraneous padding around the form */
code { border: 1px dotted SaddleBrown; border-left: 3px solid Black; background-color: white; padding: 1em; margin-left: 3ex; color: Black;}
blockquote { border: 2px solid Gold; background-color: White; margin: 3ex; font-style:italic; width: 90%;}

/* HEADER SECTION */
/* this first line places the image along the right side */
div#header {margin:0; padding:0; background: transparent url(images/duck.png) no-repeat right center; height:8em;}
div#header h1 a{ height: 3em; min-height:8em; line-height:80px;margin:0; color: white; border-bottom: none; padding:0;}
div#header h1 a:hover {background-color: transparent; border-bottom: none; color: Gold;}
div#header p#headerlink a{position: absolute; top: 65px; right: 140px; margin:0; padding: 0; color: White !important}
div#header p#phone{font-size: 1.2em; position: absolute; top: 45px; right: 140px; margin:0; padding: 0; font-weight: bold; color: Gold !important}

/* CONTENT SECTION */
div#wrapper{float:left;width:100%;}
div#content{
	margin: 0 0 0 250px; 
	padding-bottom: 2em; 
	background-color: white; 
	color: Black; 
	min-height:900px; 
	height:auto !important; 
	height:900px; 
	min-width:850px; 
	width:auto !important; 
	width:850px; 
}
div#content p{line-height:1.4;}
div#content h2#topper {
	background:#dda; 
	color: DarkGoldenRod; 
	margin-top:0; 
	padding-top:0; 
	margin-bottom:0;
	min-width:850px; 
	width:auto !important; 
	width:850px;
}
/*div#content a:visited {color: blue; text-decoration:none; border-bottom: 1px solid darkorange; }*/

/* VERTICAL NAVIGATION */
div#navigation{
	float:left; 
	width:250px;
	margin-left:-100%; 
	color:white;
}
.navcontainer { 
	width: 248px; 
	Padding:0; 
	margin-bottom: 1em; 
	background-color: transparent;
}
.navcontainer ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
	border: none; 
	width: 248px; 
	min-width:248px; 
}
.navcontainer li { margin: 0; }
html>body .navcontainer li a { width: auto;}
.navcontainer li a,.navcontainer li a:visited { 
	display: block;
	padding: 5px 5px 5px 0.5em; 
	border-left: 10px solid Black;
	border-right: 10px solid Black;
	border-bottom: none;
	background-color: Gold;
	text-decoration: none;
	font-weight:bold; 
	color: Black;
	
	/* For WebKit (Safari, Google Chrome etc) */
	background: -webkit-gradient(linear, left top, left bottom, from(#FF0), to(#FFA500)) !important;
	/* For Mozilla/Gecko (Firefox etc) */
	background: -moz-linear-gradient(top, #FF0, #FFA500);
	/* For Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF00, endColorstr=#FFFFA500);
	/* For Internet Explorer 8 */
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF00, endColorstr=#FFFFA500);
}
.navcontainer li a:hover{ 
	border-left: 10px solid grey !important; 
	border-right: 10px solid grey !important;
	/*text-transform: uppercase;*/ 
	color: dimgrey;/*
	background: white !important;
	/* For WebKit (Safari, Google Chrome etc) */
	/*background: -webkit-gradient(linear, left top, left bottom, from(#FF0), to(#FFA500)) !important;*/
	/*background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFF0FFF0)) !important;*/
	/* For Mozilla/Gecko (Firefox etc) */
	/*background: -moz-linear-gradient(top, #FFFFFF, #FFF0FFF0);*/
	/* For Internet Explorer 5.5 - 7 */
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#FFFFFAF0);*/
	/* For Internet Explorer 8 */
	/*-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#FFFFFAF0);*/
}
.navcontainer li a.current{ 
	border-left: 10px solid black; border-right: 10px solid black; 
	font-weight:bold; background: White !important;
	filter: none;
	-ms-filter: none;
}


.navcontainer li.menutitle {font-size:larger; color: Gold; font-weight:bold; padding-left: 2px; padding-bottom:1ex; border-bottom:none; text-transform:uppercase;}
/* the last one in the list (both main item and sub itmes) should get the id of 'last' in the list to remove the bottom border */
/*.navcontainer li#last a, .navcontainer li.active ul li#last a{ border-bottom:none;}*/

/* --- These are the subnavigation for sublinks. --- */
.navcontainer li ul li { display:block;} /* this expands all sublinks*/
.navcontainer li ul li a:link, .navcontainer li ul li a:visited {
	background: black !important;
	filter: none;
	-ms-filter: none;
	padding: 5px 0 5px 11px;
	Color: Yellow; 
	font-weight:normal; 
	/*text-transform: lowercase;*/
}
.navcontainer li ul li a:hover {
	border-left: 10px solid grey !important; 
	border-right: 10px solid grey !important;
	/*text-transform:uppercase;*/ color: lightgrey;
	background: Black !important;
}
.navcontainer li ul li a.current{
	font-weight:bold; color: black;
	background: White !important;
	filter: none;
	-ms-filter: none;
	border-left-color: black; border-right-color: black;
}

/*HEADER GRADIENT*/
.gradient {
	color: #FFF;
	height: 100px;
	/* For WebKit (Safari, Google Chrome etc) */
	background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000)) !important;
	/* For Mozilla/Gecko (Firefox etc) */
	background: -moz-linear-gradient(top, #333, #000) !important;
	/* For Internet Explorer 5.5 - 7 */
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#333, endColorstr=#000) !important;
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000, endColorstr=#FF000000) !important;*/
	/* For Internet Explorer 8 */
	/*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#333, endColorstr=#000)" !important;
	/*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF333333, endColorstr=#FF000000)" !important;*/
}

/* FOOTER SECTION */
div#footer{clear:left;width:100%; background-color: Gold;color: Black; border-bottom: 2px solid Black}
/* footer links */
div#footer a:link, div#footer a:visited { color:Black; border-bottom: 1px solid DarkGoldenRod; background-color: transparent;}
div#footer a:hover{ color:Blue;}
div#footer ul {list-style-type:none; margin:0; padding:.8em 0; text-align:center;}
div#footer ul li {display:inline; padding: 0 4px;}

/* phpinfo IFRAME stuff */
div.phpinfo{text-align: center;}
iframe.phpinfo{text-align: center; width: 95%; height: 15500px; border: 2px solid black;}


/* Form Styling*/

table.form{border: 1px solid black !important;}
label, input, textarea{padding-left:5px; font-weight: bold;}
label.formCol1 { position: absolute; text-align:right; width:130px; }
input.formCol2, textarea.formCol2 { margin-left: 140px; margin-bottom: 5px;}
span.req{color:coral; font-weight: bold;}
div#form{border: none;}
div#left{float:left;}
div#right{float:left; padding-left: 30px;}
div#formSubmit{clear: both; padding-left: 150px; padding-top: 5px;}
td.formCol1{width:150px !important; text-align:left;}
td.formCol2{text-align:left;}


/* General Image Stuff */
img.navimg {width: 170px; border: 0;}

/* TABLES */ 
table {border: 2px solid #452; border-collapse:collapse; width:90%; margin-left: 3ex; }
td {background-color: white; padding:3px; border: 1px solid white}
th {text-align:left;border: 1px solid white}
thead th {color:white; font-size:1.5em; background-color: #472 ; padding: 10px 6px}
tbody th {color:white; font-size:1.15em; background-color: #79B30B ; padding: 6px}
tbody th.sub {font-size: .90em; color:#000; background-color: #dda; padding: 6px}


/* Color Swatch Styling */ 
#content ul.swatch_list, #content ul#before_after_list {
	list-style: none;
    margin: 0px;
    padding: 0px;
}
ul.swatch_list li, ul#before_after_list li {
	float: left;
	width: 120px !important;
}
ul.swatch_list li p, ul#before_after_list li p {
	font-size: 0.9em;
    text-align: center;
    padding-top: 8px;
}
.swatch {
	width: 100px;
    height: 60px;
}
.clear {
	clear: both;
}