* { outline: none; }

body, html {
	padding: 0px; margin: 0px;
	width: 100%; height: 100%;
}

body {
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	line-height: 150%;
	background: #e3e3e3;
}

/* ************ general format ************ */

div#container {
	width: 100%;
	float: left;
}

p { margin-top: 0px; margin-bottom: 8px; }

h2 {
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	margin: 10px 0px 8px 0px;
}

hr {
	display: block;
	width: 700px;
	height: 2px;
	border-width: 1px 0px 1px 0px;
	border-top-color: #d9d9d9;
	border-bottom-color: #FFFFFF;
	float: left;
	clear: right;
	margin: 15px 0px;
}

h3 {
	display: block;
	width: 699px; height: 70px;
	line-height: 70px;
	margin: 0px 0px 35px 0px;
	background-color: #5b5b5b;
	color: #FFFFFF;
	font-weight: normal;
	font-size: 22px;
	text-indent: 17px;
}

h4 {
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 10px; margin-top: 0px;
}

a {
	color: #ff6600;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

a img { border: 0px; }

/* ************ head ************ */

div#headContainer {
	width: 100%;
}

div#head {
	width: 980px; height: 280px;
	margin: 0px auto;
	position: relative;
}

h1#branding {
	width: 202px; height: 158px;
	padding: 0px; margin: 0px;
	position: absolute; top: 40px; right: 30px;
	background: transparent url(../images/branding_bjh-metall-design.jpg) 0px 0px no-repeat;
}
	h1#branding a { 
		display: block;
		width: 100%; height: 100%; 
		overflow: hidden; 
		text-indent: -5000px; 
	}

div#flashContainer {
	width: 700px; height: 210px;
	position: absolute;
	top: 0px; left: 0px;
	
	/* background: transparent url(../images/flash_platzhalter.jpg) 0px 0px no-repeat; */
}

ul#navigation {
	display: block;
	width: 980px; height: 70px;
	padding: 0px; margin: 0px;
	list-style-type: none;
	position: absolute;
	bottom: 0px; left: 0px;
}
	ul#navigation li {
		display: block;
		float: left;
		width: 139px; height: 70px;
		margin-right: 1px;
	}
	ul#navigation li.last { margin: 0px; width: 140px; }
		ul#navigation li a {
			display: block;
			width: 100%; height: 100%;
			line-height: 70px;
			color: #FFFFFF;
			text-decoration: none;
			background-color: #464275;
			text-align: center;
		}
			ul#navigation li a:hover,
			ul#navigation li.active a { background-color: #db8100; }
			
	ul#navigation li.metalink a { background-color: #5b5b5b; }
	ul#navigation li.metalink a:hover,
	ul#navigation li.metalink.active a { background-color: #707070; }


/* ************ middle ************ */

div#middleContainer {
	width: 100%; height: 279px;
	background: transparent url(../images/metalltextur.jpg) center top repeat-x;
	margin-top: 1px;
}

div#middle {
	width: 982px; height: 279px;
	margin: 0px auto;
	background: #E3E3E3;
	position: relative;
}

div#titleImageContainer {
	width: 699px; height: 278px;
	position: absolute;
	top: 0px; left: 1px;
	background-position: center center;
	background-repeat: no-repeat;
}

ul.gallery {
	display: block; width: 699px; height: 278px;
	overflow: hidden;
	padding: 0px; margin: 0px;
	list-style-type: none;
}

div#rightColumn {
	width: 280px; height: 278px;
	position: absolute; top: 0px; right: 1px;
}

div#contactColumn,
div#directionsColumn {
	width: 250px;
	background: #FFFFFF;
	overflow: hidden;
	padding-left: 30px;
	position: relative;
}

div#contactColumn {
	height: 152px;
	margin-bottom: 1px;
}

div#directionsColumn {
	height: 125px;
}

a#contactLink, 
a#imprintLink,
a#directionsLink {
	position: absolute;
	display: block;
	width: 139px; height: 25px; 
	line-height: 25px; 
	text-align: left;
	text-indent: 20px;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #4e4e4e;
}
	a#contactLink:hover, a#imprintLink:hover, a#directionsLink:hover { background-color: #707070; }

a#contactLink { bottom: 0px; right: 0px; }
a#imprintLink { bottom: 26px; right: 0px; }
a#directionsLink { bottom: 1px; right: 0px; }

div#contactColumn a.active,
div#directionsColumn a.active {
	background-color: #707070;
}



/* ************ content ************ */

div#contentContainer { width: 100%; height: auto; }

div#content {
	width: 700px; height: auto;
	margin: 0px auto;
	padding-right: 280px;
	padding-bottom: 35px;
}

div.smallContentLeft,
div.smallContentRight {
	width: 330px;
	float: left;
}

div.smallContentLeft { padding-right: 20px; }
div.smallContentRight { padding-left: 20px; }

div.bigContent {
	width: 700px; height: auto;
	float: left;
}


div#fertigung {
	width: 700px;
	height: 880px;
	position: relative;
	background: transparent url(../images/fertigung/fertigung-bg.jpg) 0px 40px no-repeat;
}

div.fertigungBox {
	width: 325px;
	padding: 5px;
	position: absolute;
	background-color: #f2f2f2;
	border: 1px solid #cf0003;
}

div#fertigung ul {
	padding-left: 15px;
	margin: 0px;
}

div#fertigung h4 {
	margin-bottom: 3px;
	color: #024770; 
}

div#fertigung_blechverarbeitung { top: 0px; left: 0px; height: 160px; }
div#fertigung_drahtverarbeitung { top: 0px; right: 0px; height: 160px; }
div#fertigung_schweissen { top: 188px; left: 183px; border-color: #2d7bc5; }
div#fertigung_saegen { top: 388px; left: 183px; border-color: #2d7bc5; }
div#fertigung_stanzen { top: 537px; left: 183px; border-color: #2d7bc5; }
div#fertigung_drehen { top: 652px; left: 183px; border-color: #2d7bc5; }
div#fertigung_pulverbeschichtung { top: 743px; left: 183px; }


div.verschiedenesBilder img {
	float: left;
	margin: 3px;
}

a.verschiedenesDownload,
a.verschiedenesLink {
	display: block;
	padding: 5px;
	background-color: #FFFFFF;
	margin-top: 2px;
}