/*------------------------------------------------
CSS for Hiddings Joinery

-----------------------------------------------*/

/* General Styles
-----------------------------------------------*/
*
{
	margin: 0;
	padding: 0;
}

a
{
  outline: none;
}

.clear
{
	clear: both;
	width: 100%;
	height: 1px;
	background: transparent;
	margin: -1px 0 0;
}

ul
{
	list-style: none;
}

a:link {
	color: #5E89C1;
	font-weight:bold;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	font-weight:bold;
	color: #5E89C1;
}
a:hover {
	text-decoration: none;
	font-weight:bold;
	color: #EE7D11;
}
a:active {
	text-decoration: none;
	font-weight:bold;
	color: #EE7D11;
}

body
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", geneva, verdana, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #000;
	background: #fff;
}

#wrapper
{
	position: relative;
	width: 780px;
	margin: 0 auto;
	background: #fff;
	z-index: 2;
}

/* Company logo
-----------------------------------------------*/
#branding
{
	position: relative;
	width: 100%;
	height: 150px;
	background: #EE7D11;
	padding: 10px 0 0;
} 

#branding h1
{
	display: block;
	margin: 0 auto;
	width: 750px;
	height: 85px;
	text-indent: -9999px;
	background: url(images/hiddings_logo.gif) no-repeat 20px bottom;
}

/* Primary navigation
-----------------------------------------------*/
#primaryNav
{
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 750px;
	margin-left: -375px;
	padding: 10px 0 0;
	background: url(images/hiddings_lines.gif);
	z-index: 1;
}

#primaryNav ul
{
	float: right;
	margin-right: 30px;
	display: inline; /* Fixes left margin blow out in IE Windows */
}

#primaryNav ul li
{
	float: left;
	display: inline; /* Fixes left margin blow out in IE Windows */
	margin-left: 2px;
	background: url(images/nav_right.gif) no-repeat top right;
}

#primaryNav ul li a 
{
	font: bold 16px "Trebuchet MS", "Arial", "Verdana", sans-serif; /* Eventually replace link text with images or sIFR text */
	display: block;
	float: left;
	padding: 0 20px;
	line-height: 30px;
	background: url(images/nav_left.gif) no-repeat top left;
}

#primaryNav ul li a:link
{
	color: #000;
}

#primaryNav ul li a:visited
{
	color: #000;
}

#primaryNav ul li a:hover
{
	color: #666;
}

/* Navigation highlight
-----------------------------------------------*/
.home #primaryNav ul a#home, .joinery #primaryNav ul a#joinery, .about #primaryNav ul a#about, .contact #primaryNav ul a#contact, .gallery #primaryNav ul a#gallery
{
	color: #EE7D11;
	cursor: default;
}
	

/* Drop shadows
-----------------------------------------------*/
#leftShadow
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 15px;
	height: 400px;
	background: url(images/leftShadow.gif) no-repeat right top;
}

#rightShadow
{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 15px;
	height: 400px;
	background: url(images/rightShadow.gif) no-repeat left top;
}

/* Company propaganda
-----------------------------------------------*/
#banner
{
	float: left;
	display: inline; /* Fixes left margin blow out in IE Windows */
	margin: 15px 0 0 30px; 
}

.home #banner h2
{
	width: 730px;
	height: 223px;
	background: url(images/hiddingsH_banner.jpg) no-repeat right top;
	text-indent: -9999px;
}

.home #banner h3, .joinery #banner h3, .about #banner h3, .contact #banner h3
{
	width: 150px;
	height: 150px;
	text-indent: -9999px;
	background: url(images/hiddings_burst.png) no-repeat center; /* png no good in IE Win - see IE Hacks @ bottom of page */
	margin: -290px 0 140px -10px;
}

.joinery #banner h2, .about #banner h2, .contact #banner h2, .gallery #banner h2
{
	width: 730px;
	height: 223px;
	background: url(images/joinery_banner.jpg) no-repeat right top;
	text-indent: -9999px;
}

.about #banner h2
{
	background: url(images/about/about_banner.jpg) no-repeat right top;
}

.contact #banner h2
{
	background: url(images/contact/contact_banner.jpg) no-repeat right top;
}

.gallery #banner h2
{
	background: url(images/gallery/gallery_banner.jpg) no-repeat right top;
}

#banner ul li a
{
	display: block;
	width: 123px;
	height: 40px;
	text-indent: -9999px;
	margin: -57px 0 22px 565px; /* Reset bottom margin to 7px fixes IE - see IE Hacks @ bottom of page */
	background: url(images/rm_banner.gif) no-repeat center;
}

/* 3 column main content
-----------------------------------------------*/
#threeCol #left
{
	float: left;
	display: inline; /* Fixes margin blow out in IE Windows */
	margin: 0 3px 0 15px;
	padding: 0 0 5px 0;
	width: 248px;
	background: url(images/content_bg.gif) no-repeat center bottom;
}

#threeCol #middle
{
	float: left;
	display: inline; /* Fixes margin blow out in IE Windows */
	margin: 0;
	padding: 0 0 5px 0;
	width: 248px;
	background: url(images/content_bg.gif) no-repeat center bottom;
}

#threeCol #right
{
	float: left;
	display: inline; /* Fixes margin blow out in IE Windows */
	margin: 0 0 0 3px;
	padding: 0 0 5px 0;
	width: 248px;
	background: url(images/content_bg.gif) no-repeat center bottom;
}

/* 2 column main content 
-----------------------------------------------*/
#twoCol #left
{
	float: left;
	display: inline; /* Fixes margin blow out in IE Windows */
	margin: 0 15px 0 25px; /* 15px right margin forces column too far right. 0px margin fixes - see IE Hacks @ bottom of page */
	width: 460px;
	background: none;
}

#twoCol #middle
{
	display: none;
	float: left;
	margin: 0;
	width: 230px;
	background: #666;
}

#twoCol #right
{
	float: left;
	display: inline; /* Fixes margin blow out in IE Windows */
	margin: 0;
	padding: 0 0 45px 0;
	width: 248px;
	background: url(images/side_foot.gif) no-repeat center bottom;
}


/* 1 column main content
-----------------------------------------------*/
#oneCol #left
{
	float: left;
	display: inline; /* Fixes margin blow out in IE Windows */
	margin: 0 15px 0 65px; /* 15px right margin forces column too far right. 0px margin fixes - see IE Hacks @ bottom of page */
	width: 650px;
	background: none;
}

#oneCol #middle
{
	display: none;
	float: left;
	margin: 0;
	width: 230px;
	background: #666;
}

#oneCol #right
{
	float: left;
	display: inline; /* Fixes margin blow out in IE Windows */
	margin: 0;
	padding: 0 0 45px 0;
	width: 248px;
	background: url(images/side_foot.gif) no-repeat center bottom;
}

/* Three column main content read more links
-----------------------------------------------*/
#left ul li a, #middle ul li a, #right ul li a
{
	display: block;
	width: 90px;
	height: 26px;
	text-indent: -9999px;
	margin: -39px 0 0 150px;
	background: url(images/pic_rm.gif) no-repeat center;
}	

/* Main content text styles
-----------------------------------------------*/
#left h2, #middle h2, #right h2
{
	width: 248px;
	height: 40px;
	text-indent: -9999px; 
	background: url(images/joinery_header.gif) no-repeat left bottom;
}

#middle h2
{
	background: url(images/renovations_header.gif) no-repeat left bottom;
}

#right h2
{
	background: url(images/doors_header.gif) no-repeat left bottom;
}

#left p, #middle p, #right p
{
	margin: 10px 10px;
}

#left h3, #middle h3, #right h3
{
	width: 248px;
	height: 197px;
	text-indent: -9999px;
	background: url(images/kitchen_pic.jpg) no-repeat center;
	margin-bottom: 5px;
}

#middle h3
{
	background: url(images/renovations_pic.jpg) no-repeat center;
}

#right h3
{
	background: url(images/doors_pic.jpg) no-repeat center;
}

/* Two column main content styles
-----------------------------------------------*/
#twoCol #left h2 /* Left column main header */
{
	width: 100%;
	height: 47px;
	text-indent: -9999px;
	margin: 0 0 5px 0;
}

/* Page specific images for left column header */

#twoCol.joinery #left h2 
{
	background: url(images/joinery_header.gif) no-repeat -10px top;
}

#twoCol.about #left h2
{
	background: url(images/about/about_header.gif) no-repeat -10px top;
}

#twoCol.gallery #left h2
{
	background: url(images/gallery/gallery_header.gif) no-repeat -10px top;
}

.joinery #left h3, .about #left h3
{
	clear: left;
	font-weight: bold;
	font-size: 14px;
	text-transform: uppercase;
	color: #fff;
	background: #EE7D11;
	padding: 5px 0;
	margin: 10px 0 5px 10px; 
	text-indent: 10px;
	width: 450px;
	height: 25px; /* Need height value in IE Win - see IE Hacks @ bottom of page */
}

#twoCol #left h4, .gallery #left h4, .joinery #left h4
{
	font-weight: lighter;
	font-size: 16px;
	line-height: 22px;
	text-indent: 0px;
	width: 100%;
	height: inherit;
	background: transparent;
	margin: 5px 10px;
}

.joinery #right h2, .contact #right h2
{
	background: url(images/recent_header.gif) no-repeat left bottom;
}

.about #right h2
{
	background: url(images/about/factory_header.gif) no-repeat left bottom;
}

.gallery #right h2
{
	background: url(images/gallery/quality_finish.gif) no-repeat left bottom;
}


.contact #right h2
{
	background: url(images/contact/offices_header.gif) no-repeat left bottom;
}

.contact #left h2
{
	background: url(images/contact/contact_header.gif) no-repeat -10px top;
}

.contact #left h3
{
	font-weight: normal;
	font-size: 14px;
	color: #EE7D11;
	height: 25px;
	border-bottom: 1px solid #ccc;
	background: none;
	text-indent: 0;
	padding: 5px 5px 5px 0;
	width: 90%;
	margin: 10px 0 5px 10px;
}

#twoCol #right h4
{
	font-weight: bold;
	font-size: 20px;
	color: #EE7D11;
	text-indent: 0px;
	width: inherit;
	height: inherit;
	background: transparent;
	margin: 15px 10px 10px;
}

#right img
{
	width: 248px;
	margin: -5px 0 -10px;
}

.joinery #left img, .about #left img, .gallery #left img
{
	display: inline;
	float: left;
	width: 200px;
	padding: 5px;
	margin: 5px 0 20px 10px;
	border: 1px #ccc solid;
	background: #eee;
}

.about #left img.factory
{
	width: 430px;
}

/* Image Rotator
-----------------------------------------------
#twoCol.about #left a, #twoCol.joinery #left a, #twoCol.gallery #left a, #twoCol.contact #left a 
{
	color: #fff;
}

.dw
{
	color: #fff;
}*/

/* Footer
-----------------------------------------------*/
#footer
{
	position: relative;
	width: 100%;
	height: 150px; /* It would be better if padding were used to give vertical dimension */
	background: #EE7D11;
	margin: 15px 0 0; /* 15px margin doubles in IE Win - see IE Hacks @ bottom of page */
} 

#footer a
{
	color: #fff;
}



#copyright
{
	position: absolute;
	top: 0;
	left: 50%;
	width: 750px;
	margin-left: -375px;
	float: left;
	padding: 10px 0;
	background: url(images/hiddings_lines.gif);
	font-size: 10px;
}

#copyright p
{
	float: left;
	margin: 0 0 0 15px;
	color: #fff;
}

#copyright ul
{
	float: right;
	margin: 0 15px 0 0;
}

#copyright ul li
{
	display: block;
	float: left;
}

#copyright ul a
{
	display: block;
	float: left;
	padding: 0 5px;
	color: #fff;
}

#copyright ul li span
{
	display: none;
}

address
{
	position: absolute;
	float: right;
	right: 46%;
	margin: 60px -375px 0 0;
	padding: 0 185px 0 0;
	font-size: 10px;
	line-height: 15px;
	text-align: right;
	font-style: normal;
	color: #fff;
	background: url(images/hiddings_logoS.gif) no-repeat 270px center;
	top: 22px;
}

/* IE Win Hacks - make these @import later
-----------------------------------------------*/
/* commented backslash hack v2 \*/
* html body #banner ul li a
{
	margin-bottom: 7px; 
}

* html body.home #banner h3, * html body.joinery #banner h3, * html body.about #banner h3, * html body.contact #banner h3
{
	display: none;
}

* html body.joinery #wrapper #left, * html body.about #wrapper #left
{
	margin: 0 0 0 25px; 
}

* html body.joinery #left h3, * html body.about #left h3, * html body.contact #left h3
{
	height: 20px;
}

* html body #footer
{
	margin-top: 0; 
} 
/* end hack */

/* IE Mac Hacks - make these @import later
-----------------------------------------------*/
/* Resets for IE Mac only */
/*\*//*/
#banner ul li a
{
	margin-bottom: 7px; 
}

* html body.home #banner h3, * html body.joinery #banner h3
{
	display: block;
}

* html body.joinery #left h3
{
	height: inherit;
}
/**/

/* Form
-----------------------------------------------*/
textarea {
margin-top:3px;
}