@charset "utf-8";

/************************************************************
		Screen-Stylesheet  frank-zeck.de
		Nadine Oberstein | Medienkonzeption - Mediengestaltung
		www.nadine-oberstein.de 
************************************************************/

* {
	margin: 0;
	padding: 0;	
}

body {		
	margin: 0 auto 0 auto;
	font: normal 0.71em arial, helvetica, sans-serif; 
	line-height: 140%;
	text-align: center;
	color: #444;	
	background: url(../images/css/bg.gif) no-repeat 25% 9em #fff;
}

img {
	border: none;	
}

a, a:link, a:visited, a:focus, a:hover, a:active {
	color: #707e41;	
	text-decoration: none;	
}

a:focus, a:hover, a:active {
	color: #333;
}

ul {
	list-style: none;
}

/***********************
				Struktur
***********************/

h6 {
	position: absolute;
	top: -200em;
	left: -200em;	
}

/***********************
		 Skiplinks
***********************/

#skiplinks a, #skiplinks a:link, #skiplinks a:visited, #skiplinks a:focus, #skiplinks a:hover, #skiplinks a:active {
	display: block;
	position: absolute;
	top: -200em;
	left: 0;
	padding: 0.1em 10px 0.1em 5px;
	font-size: 0.9em;
	color: #333;
	background: #f7faf0;
	border-bottom: 4px solid #e5e5e5;
}

#skiplinks a:focus, #skiplinks a:active {
	top: 92px;
	left: 20%;
	width: 200px;
}

/***********************
				Layout
***********************/

#header, #content, #footer {
	min-width: 760px;
	max-width: 990px;
	margin: 0 auto 0 auto;
	text-align: left;
}

#header {
	position: relative;
	margin-top: 7%;
}

#content {
	position: relative;
	min-height: 210px;
	margin-top: 4em;
	margin-bottom: 4em;
}

#footer {
	margin-bottom: 2em;
}

#maindecor, #subdecor {
	clear: right;
	width: 100%;
	border: none;
}

#content div, #content ul, h1, h2, form {
	position: relative;
	max-width: 50%;
	max-width: 421px;
	margin: 0 0 1em 50%;
	padding: 0.5em 25px 0.5em 20px;
}

/***********************
		  Marginal
***********************/

#marginal {
	position: absolute !important; 
	left: -400px;
	top: 2px;
	width: 315px;
	padding: 0 !important;
	background: none !important;
}

#marginal.referenzen {
	top: 9em;
	left: -350px !important; 
}

/***********************
				Menu
***********************/

#logo {
	height: 92px;
	width: 316px;
	margin-left: 9%;	
}

#menu {
	max-width: 496px;
	margin: 0 0 0.5em 49%;
}

#menu li {
	display: inline;
	padding-right: 1.6em;
	font-weight: bold;
	letter-spacing: 0.1em;
}

#menu li.active a {
	color: #333;
}

/***********************
		Farben, Decor
***********************/

#maindecor {
	height: 37px;
	background: url(../images/css/maindecor.jpg) repeat-x top left #fff;
}

#subdecor {
	height: 13px;
	background: url(../images/css/subdecor.jpg) repeat-x top left #fff;
}

span, h1 span span, #marginal h2 span {
	color: #707e41;
}

span span, h1 span span span, #marginal h2 span span {
	color: #ffc500;
}

h1 span {
	color: #707e41;
	background: #fff;
}

#content div, #content ul, form {
	background: #f7faf0;
}

/***********************
		   Typo
***********************/

#content a {
	border-bottom: 1px dotted #707e41;
}

h1, h2, h3 {
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0.1em;
}

h1 {
	position: relative;
	z-index: 2;
	height: 50px;
	max-width: 420px;	
	margin-left: 49%;
	padding: 2px 0 0 56px;
	text-indent: -1.5em;
	color: #707e41;	
	background-image: url(../images/css/signet_h1.gif);
	background-repeat: no-repeat;
	background-position: top left;
}

h2 {
	max-width: 425px;
	padding: 0 25px 0 16px;
	color: #4f4f4f;
}

#content div h2 {
	margin: 0 0 0.5em 0 !important;
	padding: 0;
	letter-spacing: 0;
}

p {
	margin-bottom: 0.5em;
}

#content div ul {
	width: 100%;
	margin: 0 0 0.5em 0;
	padding: 0;
}

#content ul li {
	display: inline;
}

#content .up ul {
	width: 85%;
}

#content ul li span {
	font-family: verdana, helvetica, sans-serif; 
}

.up {
	margin-top: -32px !important;
}

#kontakt {
	padding-bottom: 24em !important;
	border: none;
	color: #fff;
}

.lead {
	text-indent: 35px;
}

.accent {
	font-weight: bold;
}

.error {
	color: #C4043E !important;
	border-color: #C4043E !important;
}

#marginal h2 {
	margin: 0 0 1em 1em;
	padding: 0 !important;
	color: #707e41;	
}

#marginal  dl {
	margin: 0em 0em 0 2.4em;
}
 
#marginal dt {
	display: block;
	float: left;
	width: 6em;
	margin: 0em;	
	color: #707e41;	
}
 
#marginal dd {
	display: block;
	margin: 0em 0em 0em 6em;	
}

#marginal hr {
	margin: 0.5em 0 0.5em 1em;
	border-top: 1px dotted #707e41;	
	border-right: none;
	border-bottom: none;
	border-left: none;		
}

#marginal ul {
	width: 300px !important;
	padding: 0.3em 0 0.3em 1em !important;
	line-height: 160%;
	background: none;
	border-top: 1px dotted #707e41;		
	border-bottom: 1px dotted #707e41;			
}

.space {
	border: none !important;
	margin: 1em 0 1em 0  !important;
}

h3.brand {
	margin: 2em 0 0 2.4em;
	padding: 0 !important;
	letter-spacing: 0;
	color: #c2c2c2;
	font-weight: normal;
}

p.brand {
	margin: 0 0 1em 2.4em;
	color: #c2c2c2;	
}

p.brand a {
	color: #c2c2c2;
	border: none !important;
}

/***********************
		Bilder
***********************/

#large {
	position: absolute;
	bottom: 0;
	left: -400px;
	height: 168px;
	width: 315px;
}

.top {
	top: -30px;
}

#marginal .top {
	position: relative;
	left: 0;
}

#marginal #large {
	margin: 0 0 1em 0 !important;
	position: static !important;	
}

.referenzen #large {
	top: 1em;
}

.referenzen img {
	padding-bottom: 1.2em;
}

/***********************
		Galerie
***********************/

#galerie {
	position: relative;
	max-width: 466px !important;	
	padding: 1em 0 0 0 !important;
	background: #fff !important;
}

#galerie a, #marginal.referenzen a  {
	border: none;
}	

#galerie a img {
	height: 48px;
	width: 90px;
	padding-left: 6.9%;
}

#galerie img.first, #marginal.referenzen img.first {
	padding-left: 0;
}

#galerie #large {
	position: absolute;
	bottom: 0.5em;
	left: -400px;
}

#galerie.referenzen {
	margin-bottom: 0em;
}

#marginal.referenzen a img {
	padding-left: 6%;
}

#marginal.referenzen #large {
	padding-top: 0.1em;
	padding-bottom: 1.1em;
}

/***********************
		    Form
***********************/

form {
	padding-bottom: 0;
}

legend {
	padding-right: 0.5em;
	padding-left: 0.5em;
	color: #707e41;		
}

fieldset {
	margin-bottom: 0.5em;
	padding: 0.5em;
}

label {
	display: block;
	float: left;
	width: 6em;
	margin-bottom: 0.3em;
	padding-right: 1em;
	text-align: right;
}

input, textarea {
	width: 18em;
	margin-bottom: 0.3em;
	padding-right: 0.2em;
	padding-left: 0.2em;
	font: normal 1em arial, helvetica, sans-serif; 
	color: #999;

}

fieldset br {
	clear: left;
}

#action {
	border: none;
}

#submit {
	width: 10em;
	color: #333;
}


/***********************
				Popup
***********************/

#popup {
	background-position: -3em -4em;
}

#popup #footer, #popup #content, #popup #subdecor {
	min-width: 200px;
	max-width: none !important;
}

#popup #content div, #popup #content ul, #popup h1, #popup h2 {
	position: relative;
	width: 350px;
	margin: 0 0 1em 4em !important;
	padding: 0.5em 25px 0.5em 20px;
}

#popup h1 {
	font-size: 1.1em;
	padding: 2px 0 0 60px;
}

#popup .lead {
	text-indent: 0px !important;
}

#popup #content div ul {
	width: 300px  !important;
	margin: 0 !important;
}

#popup ul li {
	display: block;
}

#popup .close {
	text-align: right;
	font-weight: bold;
}

#popup #footer {
	padding-left: 6em;
}