@charset "UTF-8";
/* CSS Document */

html, body, div, h1, h2, h3, h4, h5, h6, p, a, ul, li, img  {margin:0px; padding:0px;}

html {
	background: #4c4946 url(/images/WERKEN-BG.jpg) no-repeat 50% 0%;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:90%;
	font-weight:100;
	color:#a7a9ac;
	width:100%; 
	height:100%; 
}

a:link, a:visited {
	color:#fff;
	font-weight:normal;
	text-decoration:none;
}

a:hover, a:active {
	color:#ffcd67;
	font-weight:normal;
	text-decoration:none;
}

img {
	border:none;
}


/* EVERYTHING FITS IN THE CONTAINER TO CENTER HORIZONTALLY AND VERTICALLY 
________________________________________________________________________*/
#horizontal_container { 
	position:absolute;
	width:100%; 
	height:700px; 
	top:50%;
	left:0; 
	margin-top:-350px; 
	text-align:center; 
	margin-left:0; 
	margin-right:0; 
	padding:0; 
	z-index:10;
}

/* BANNER CONTAINS THE LOGO AND MENU
________________________________________________________________________*/

#banner {
	position:absolute;
	left:50%;
	width:950px;
	margin-left:-475px;
	height: 50px;
	margin-top:75px;
	text-align:left;
}

#logo {
	margin-left:25px;
}

#menu {
	position:absolute;
	top:10px;
	right:25px;
}

#menu ul {
	display:inline;
}

#menu ul li {
	display:inline;
	list-style:none;
	border-right:1px solid #999;
	margin:0;
	padding:0 1.5em;
}

#menu ul li.close {
	border-right:none;
	padding-right:0;
}

#menu a {
	line-height:0.8em;
}

/* PORTFOLIOS, TEXT FIT IN CONTENT BOX (imageBox + imageNav for portfolios 
________________________________________________________________________*/

#content_box {
	position:absolute; 
	left:50%;
	margin-top: 150px; 
	margin-left:-450px;
	width:900px; 
	height:400px;
	text-align:left;
	z-index:35;
}

#content_box h1,
#content_box h2,
#content_box h3,
#content_box p,
#content_box ul {
	margin-left:150px;
	margin-right:40px;
}

#content_box h1 {
	line-height:2.5em;
	font-size:1.5em;
	font-weight:100;
}

.highlight {
	color:#fff;
}

#content_box h2 {
	line-height:2em;
	font-size:0.75em;
	text-transform:uppercase;
	color:#fff;
	padding-top:0.5em;
	padding-bottom:0.25em;
}

#content_box h3 {
	
}

#content_box ul {
	padding:0.5em 0;
}

#content_box ul li {
	font-size:0.9em;
	line-height:1.65em;
	padding-left:0.25em;
	list-style-position:inside;
}
.linkList {
	list-style:none;
}

#content_box p {
	line-height:1.65em;
	font-size:0.9em;
	font-weight:100;
	padding-bottom:0.5em;
}

#content_box p.quote {
	font-weight:bold;
	color:white;
}

.xtraSpace {
	padding-right:2em;
}

#content_box.splash {
	background-image: none;
	height:350px;
} 

#content_box.circle {
	background-image: url(/images/W-contentBG-circle.jpg)
} 

#content_box.drill {
	background-image: url(/images/W-contentBG-drill.jpg)
} 

#content_box.ian {
	background-image: url(/images/W-contentBG-ian.jpg)
} 

#content_box.pipe {
	background-image: url(/images/W-contentBG-pipe.jpg)
} 
#content_box.short {
	background: url(/images/W-contentBG-short.jpg) no-repeat 100% 0;
}

#content_box.short h1,
#content_box.short h2,
#content_box.short h3,
#content_box.short p,
#content_box.short ul {
	margin-left:0;
	margin-right:10px;
}

/* IMAGE BOX CONTAINS PORTFOLIO IMAGES 
________________________________________________________________________*/

#imageBox {
	width:604px;
	height:400px;
	text-align:right;
}

/* IMAGE NAV contains links to galleries, images links and link to Flickr 
________________________________________________________________________*/

#imageNav {
	position:absolute;
	top:0;
	right:0;
	width:265px;
	height:400px;
	text-align:left;
}

#imageNav ul li a {
	line-height:2.5em;
}

/* BOX NAV is the squares for image nav 
________________________________________________________________________*/
#boxNav {
	margin-top: 4em;
}

#boxNav a {
	padding-right:12px;
}

#boxNav li {
	display:inline;
	list-style:none;
	width:12px;
	height:12px;
	background:url(/images/navBoxWht.jpg) no-repeat 3px 3px;
}


/*DESIGN BOX HAS THE BRUSHED METAL TEXTURE
It is wrapped with DESIGN_BOX_WRAP to control border colors (bevels)
________________________________________________________________________*/
#design_box_wrap {
	position:absolute; 
	left:50%; 
	margin-left:-476px; 
	width:950px; 
	height:452px; 
	margin-top:125px;
	background-color:#333;
	border-top:1px solid #666; 
	border-right:1px solid #333; 
	border-bottom:1px solid #333;	 
	border-left:1px solid #666;
	z-index:25;
}

#design_box {
/*	position:absolute; 
	left:50%; 
	margin-left:-475px; */
	width:950px; 
	height:450px; 
/*	margin-top:125px; */
	background:url(/images/WERKEN-BG-brushed.jpg) no-repeat 0 0; 
/*	border-top:1px solid #fff; 
	border-right:1px solid #fff; 
	border-bottom:1px solid #333;	 
	border-left:1px solid #333;*/
	z-index:26;
}

/* FOOTER
________________________________________________________________________*/

#footer {
	position:absolute;
	left:50%;
	width:950px;
	margin-left:-475px;
	height: 25px;
	margin-top:585px;
	text-align:center;
}

#footer p {
	color:#999;/*808285*/
	font-size:0.75em;
	line-height:3em;
	text-transform:uppercase;
}

#footer a:link,
#footer a:visited {
	color:inherit;
}

#footer a:hover {
	color:#ffcd67;
}

.wideSpace {
	padding-left:1.5em;
	padding-right:1.5em;
}

/* LEFT and RIGHT METAL have textures extending off left and right
________________________________________________________________________*/


#left_metal {
	position:absolute; 
	left:0; height:450px;
	width:30%; 
	margin-top:125px; 
	background: url(/images/WERKEN-BG-panel-1.jpg) -200px -300px;
	border-top:2px solid #666;
	border-bottom:2px solid #333;
	z-index:20;
}
#right_metal {
	position:absolute; 
	right:0; height:450px; 
	width:30%; 
	margin-top:125px; 
	background: url(/images/WERKEN-BG-panel-2.jpg);
	border-top:2px solid #666;
	border-bottom:2px solid #333;
	z-index:20;
}