/* ----------------------------------------------------
author:   Ralph Scholze - http://www.webpixelkonsum.de
email:    info@webpixelkonsum.de
title:    Stylesheet Medium Sreen
version:  26.o7.2oo8 Version 2oo8.7
website:  http://www.holzformwerk-dresden.de

Inhaltsverzeichnis

o1. Allgemeiner Teil
o2. Layout
o3. Navigation
o4. Lightbox
------------------------------------------------------- */

/* o1. ________ Allgemeiner Teil ________  */

* { 
	border: 0;
	margin: 0;
	padding: 0;
}
html {
	background: #fff url(../images/streifen-300.gif) repeat-x;
}

body {
	background-color: #fff;
	color: #000;
	font: 16px Verdana, Tahoma, Geneva, sans-serif !important;
	direction: ltr;
}

#side-image {
	background: #fff url(/images/streifen-300.gif) repeat-x;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;	
}

h1 {
	background-color: transparent;
	color: #d30;
	font-weight: 100;
	font-size: 1.2em;
	letter-spacing: 1px;
	margin-bottom: -.25em;
	padding: .70em 0 0 .4em;
}

h2 {
	background-color: transparent;
	color: #313131;
	font-weight: 100;
	font-size: 1.0em;
	letter-spacing: .1em;
	margin: -.1em 0 -.4em 0;
	padding: .5em 0 0 .45em;
}

a:link, a:visited { 
	background-color: transparent;
	color: #313131;
	padding: .1em;
	text-decoration: underline;
}

a:hover, a:active {
	background-color: transparent;
	padding: 0 .1em;
	text-decoration: none;
}

/* o2. ________ Layout ________ */

#mainbody { 
	background-color: #fff;
	border-left: .5em solid #fff;
	border-right: .5em solid #fff;
	margin-left: -5.6em;
	position: relative;
	top: 3.8em;
	width: 59.00em;
	}
	
#head {
	height: 1.5em;
	width: 100%;
}

#head #bildgalerie {
	background-color: #313131;
	border-right: 1px solid #dadada;
	height: 1.5em;
	width: 22.0em;
	position: relative;
}

#head #bildgalerie img {
	border-right: .1em solid red;
	margin-left: -.1em;
	width: 23%;
	position: absolute;
    top: 0;
    left: .1em;
}

#streifen_vertikal {
	background-color: #272727;
	color: #fff;
	height: 35.9em;
	left: 5%;
	position: relative;
	width: 23.0em;
}

#Logo { 	 
	background: transparent url(../images/streifen-quer-weiss-300.gif) repeat-y;
	height: 100%;
	left: 5.6em;
	position: absolute;
	top: 0;
	z-index: 0;
}

#Logo img.img {
	border: none;
	margin: 1.6em 0 0 4.8em;
	width: 6.1em;
	z-index: 5;
}

#maincontent { 
	background: url(/images/bg_navigation.png) repeat-x top left;
	height: 23.5em;
	position: relative;
}

#content { 
	background: transparent;
	color: #000;
	border: 1px solid #dadada;
	border-left: none;
	border-bottom: none;
	float: right;
	height: 23.1em;
	width: 36.8em;
}

#content #left {
	float: left;
	width: 14.0em;
}

#content #right {
	float: right;
	width: 22.0em;
}

#content #right p {
	font-size: .7em;
	margin-top: .7em;
	padding-left: .7em;
	width: 95%;
}

#content #right ul {
	margin: .4em 0 0 1.80em;
}

#content #right ul li { 
	font-size: .8em;
	list-style: none;
	list-style-position: outside;
	list-style-image: url(/images/ul_right.gif);
	width: 95%;
}

#sidebar { 
	border-left: 1px solid #dadada;
	float: left;
	height: 23.15em;
	width: 22.0em;
}

#sidebar img {
	border: 1px solid #dadada;
	float: right;
	margin-top: .5em;
	padding: .5em;
	width: 75%;
}

#mainbody_Fehler { 
	background-color: #fff;
	border-left: .5em solid #fff;
	border-right: .5em solid #fff;
	margin-left: .1em;
	position: relative;
	top: 10.60em;
	width: 59.30em;
	}

#Logo_Fehler { 	 
	background-color: #272727;
	height: 35.7em;
	left: 5.6em;
	position: relative;
	width: 23.0em;
}

#fehler { 	
	border-left: 1px solid #dadada;
	float: left;
	height: 100%;
	width: 22.0em;
}

#fehler p.fehler img {
	border: 0;
	padding: 2.5em 2.5em 2.5em 3.5em;
	width: 75%;
}

#fehler p.fehler img a:link, img a:hover {
	background-color: transparent;
}

.clearone {
	border-top: 1px solid #dadada;
	clear: both;
	height: 0;
}

/* o3. ________ Navigation ________ margin-right: .2em; */

#navigation {
	float: right;
}

#navigation li {
	float: right;
	list-style: none;
	height: 1.5em;
	width: 7.38em;
}

#navigation a:link, #navigation a:visited {
	background:  url(/images/bg_navigation.png) repeat-x top left;
	border-left: 1px solid #dadada;
	border-right: 1px solid #dadada;
	border-top: .2em inset #313131;
	color: #313131; 
	display: block;
	font-size: .9em;
	font-weight: 100;
	height: 1.3em;
	margin: 0 0 0 .1em;
	padding: .1em 0 .1em .5em;
	text-decoration: none;
	width: auto; 
}

#navigation a:hover { 
	background-color: transparent;
	color: #313131; 
	display: block;
	font-weight: bold;
}

body#home #navigation li a.home,
body#home-inhaber #navigation li a.home,
body#home-firma #navigation li a.home,
body#home-werkstatt #navigation li a.home,
body#fertigkeiten-projektbau #navigation li a.fertigkeiten,
body#fertigkeiten-schiffsinnenausbau #navigation li a.fertigkeiten,
body#fertigkeiten-3D-Formen #navigation li a.fertigkeiten,
body#fertigkeiten-einzelfertigungen #navigation li a.fertigkeiten,
body#einfluesse-Fertigungstechniken #navigation li a.einfluesse,
body#einfluesse-Materialien #navigation li a.einfluesse,
body#einfluesse-Zeitgeist #navigation li a.einfluesse,
body#referenzen #navigation li a.referenzen,
body#kontakt-Kontaktformular #navigation li a.kontakt,
body#kontakt-Impressum #navigation li a.kontakt,
body#kontakt-Realisierung #navigation li a.kontakt,
body#kontakt-Rechtshinweise #navigation li a.kontakt {
	background-color: transparent;
	color: #313131;
	font-weight: bold;
}

body#home-inhaber #sub_nav li a.inhaber,
body#home-firma #sub_nav li a.firma,
body#home-werkstatt #sub_nav li a.werkstatt,
body#fertigkeiten-projektbau #sub_nav li a.projektbau,
body#fertigkeiten-schiffsinnenausbau #sub_nav li a.schiffsinnenausbau,
body#fertigkeiten-3D-Formen #sub_nav li a.formen,
body#fertigkeiten-einzelfertigungen #sub_nav li a.einzelfertigungen {
	background-color: transparent;
	color: #313131;
	font-weight: bold;
}

body#einfluesse-Fertigungstechniken #sub_nav li a.fertigungstechniken,
body#einfluesse-Materialien #sub_nav li a.materialien,
body#einfluesse-Zeitgeist #sub_nav li a.zeitgeist,
body#referenzen #sub_nav li a.referenzen,
body#kontakt-Kontaktformular #sub_nav li a.kontaktformular,
body#kontakt-Realisierung #sub_nav li a.realisierung,
body#kontakt-Impressum #sub_nav li a.impressum,
body#kontakt-Rechtshinweise #sub_nav li a.rechtshinweise {
	background-color: transparent;
	color: #313131;
	font-weight: bold;
}

body#fertigkeiten-projektbau #sidebar a.bildgalerielink,
body#fertigkeiten-schiffsinnenausbau #sidebar a.bildgalerielink,
body#fertigkeiten-3D-Formen #sidebar a.bildgalerielink,
body#fertigkeiten-einzelfertigungen #sidebar a.bildgalerielink,
body#einfluesse-Fertigungstechniken #sidebar a.bildgalerielink,
body#einfluesse-Materialien #sidebar a.bildgalerielink,
body#einfluesse-Zeitgeist #sidebar a.bildgalerielink,
body#referenzen #sidebar a.bildgalerielink,
body#kontakt-Kontaktformular #sidebar a.bildgalerielink,
body#kontakt-Realisierung #sidebar a.bildgalerielink,
body#kontakt-Impressum #sidebar a.bildgalerielink,
body#kontakt-Rechtshinweise #sidebar a.bildgalerielink {
	background-color: transparent !important;
	color: #fff;
	font-size: 1.5em;
	padding-left: 1.0em;
	text-decoration: none;
}

/* o3. ________ Sub - Navigation ________ */

#sub_nav {
	font-size: .9em;
	margin: 1.35em 0 0 1.8em;
}

#sub_nav ul li {
	margin: 0;
	list-style-image: url(../images/sub_nav_link.png);
}

#sub_nav ul li a:link, #sub_nav ul li a:visited {
	background-color: transparent;
	color: #313131; 
	display: block;
	font-size: .8em;
	margin: 0 1px 0 0;
	padding: .2em 0 .15em 0;
	text-decoration: none;
	width: 14.0em;
}

#sub_nav ul li a:hover { 
	background-color: transparent !important;
	color: #313131; 
	display: block;
	font-weight: bold;
}

/* o4. ________ Lightbox ________ */

#lightbox {	
	left: 0;
	line-height: 0;
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 100;
}

#lightbox img { 
	height: auto;
	width: auto; 
}

#lightbox a img { 
	border: none;
}

#outerImageContainer { 
	background-color: #fff;
	height: 250px;
	margin: 0 auto;
	position: relative; 
	width: 250px;
}

#imageContainer {
	padding: 10px;
}

#loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}

#hoverNav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}

#imageContainer>#hoverNav { 
	left: 0;
}

#hoverNav a {
	outline: none;
}

#prevLink, #nextLink {
	background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
	display: block;
	height: 100%; 
	width: 40%;
}

#prevLink { 
	float: left;
	left: 0;
}

#nextLink { 
 	float: right;
	right: 0;
}

#prevLink:hover, #prevLink:visited:hover { 
	background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover { 
	background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat;
}

#imageDataContainer{ 
position: relative;
font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.3em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }