/* ===========================================================
   Stylesheets - Architekturbüro, Birckenau, Susanne Obermeyer
   
   Datum: 30. Juli 2010
   Autor: Verzhiniya Kostadinov
   
   Aufbau: 1. Allgemeinen Styles
   		   2. Style für Layoutbereiche
   ====================================== */

/* ======================================
   1. Allgemeinen Styles
   ====================================== */
  
* {padding:0; margin:0;}
h1, h2, p, ul, ol {margin-bottom: 0;}
ol, ul {margin: 0;}
li {margin-left: 0;}
img {border: 0;}

body {
	overflow-y: scroll;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.5em;
	color: #333;
	background-color: #112;	
}

h1 {
	font-size: 110%;
	line-height: 1.8em;
	margin: 10px 0 5px 0;
	color: #fc7500;
}

h2 {
	font-size: 100%;
	line-height: 1.8em;
	margin: 5px 0;
	color: #333;
}


/* ======================================
   2. Style für Layoutbereiche
   ====================================== */  
#cookie-bar {
	width: 100%;
	background-color: #fc7500;	
	padding: 10px 20px;
	text-align: center;
}
#cookie-bar .wrapper {
	max-width: 890px;
	position:relative;
	margin: 0 auto;	
}
#cookie-bar a {
	color: #333;
	text-decoration: none;
	font-weight: bold;
}
#cookie-bar a:hover {
	text-decoration: underline;
}
#cookie-bar a.closeButton {
	padding: 3px;
	border: 1px solid #333;
	font-weight: normal;
}
#cookie-bar a.closeButton:hover {
	background: #333;
	color: #fff;
	text-decoration: none;
}
#wrapper {
	width: 890px;
	position: relative;
	margin: 0 auto;
}


#navi{
	position: absolute;
	top: 6px;
	left: 0;
	font-size: 115%;
	background-image: url(../img/naviBG_blue.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	width: 100%;
	padding: 0;
	margin: 0;
}

#navi li{
	float: left;
	list-style: none;
	padding: 0;
	margin: 0;
	height: 22px;
	border-right: 1px solid #123;
	border-left: 1px solid #113;	
}

#navi li#willkommen{
	width: 104px;
}
#navi li#projekte{
	width: 84px;
}
#navi li#actuel{
	width: 84px;
}
#navi li#ib{
	width: 141px;
}
#navi li#architektin{
	width: 126px;
}
#navi li#presse{
	width: 72px;
}
#navi li#links{
	width: 62px;
}
#navi li#kontakt{
	width: 82px;
}
#navi li#impressum{
	width: 101px;
}
#navi li#datenschutzerklaerung {
	width: 166px;
}

#navi li.firstli{
	border-left: 0;
}

#navi li.lastli{
	border-right: 0;
}

#navi li a {
	text-align: center;
	padding: 4px 0px;
	color: #fff;
	text-decoration: none;
	display: block;
}

#navi a:link,
#navi a:visited {
	
}
#navi span,
#navi li a.active,
#navi li a:focus,
#navi li a:hover,
#navi li a:active{
	color: #333;
	background-image: url(../img/naviBGactiv.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	padding: 4px 0px;
	display: block;
	text-align: center;
	height: 18px;
}
 
#header {
	position: absolute;
	top: 32px;
	left: 0;
	width: 890px;
	height: 360px;
	background-color: #fc7500;
}

#header img#print{
	display: none;
}

#header .pictures{
	width: 525px;
	height: 350px;
	background-color: #fff;
	padding: 0;
	position: absolute;
	top: 20px;
	left: 300px;
	z-index: 5;
	
}

#header .status{
	width: 12px;
	position: absolute;
	top: 5px;
	left: 544px;
	
}

#slides{
	height: 350px;
	width: 525px;
	overflow: auto;
	position: relative;
	background: #112;
}

#img{
	height: 350px;
	width: 525px;
	overflow: hidden;
	position: relative;
	background: #112;
}

#header ul{
	height: 350px;
	width: 6000px;
	position: relative;
	top: 0;
	left: 0;
	 
}

#header ul li{
	list-style: none;
	
}

#header #slides ul li{
	height: 350px;
	width: 525px;
	float: left;
	position: relative;
	padding: 0;
}

#header #slides ul li div{
	width: 485px;
	padding: 10px;
	background-image: url('../img/whitetansparent.png');
	background-repeat: repeat;
	position: absolute;
	color: #111;
	bottom: 0;
	left: 10px;
}

#header #slides ul li div.left{
	width: 225px;	
}

#header #slides ul li div.right{
	margin-left: 260px;
	width: 225px;
}

#header ul.status li{
	height: 7px;
	background-image: url('../img/statuspoint.png');
	background-repeat: no-repeat;
	background-position: left top;
	margin: 10px 0;
}

#header ul.status li.activ{
	background-image: url('../img/statuspoint.png');
	background-position: left bottom;
}

#header #play {
	position: absolute;
	top: 300px;
	left: 556px;
	width: 28px;
	height: 16px;
	background-color: #fff;
	padding: 4px;
	cursor: pointer;
}

#header #prev,
#header #next{
	position: absolute;
	top: 300px;
	left: 554px;
	width: 10px;
	height: 16px;
	background-color: #fff;
	padding: 4px;
	cursor: pointer;
}

#header #next{
	left: 574px;
}

#header #siebens{
	position: absolute;
	top: 150px;
	left: 52px;
	width: 450px;
	height: 250px;
}

#header #siebens div{
	background-image: url('../img/sieben_s.png');
	background-position: 0 -150px;
	background-repeat: no-repeat;
	width: 20px;
	height: 150px;
	float: left;
	margin-right: 44px;
	cursor: pointer;
	
}

#header #siebens #saule{
	position: absolute;
	top: -115px;
	left: -15px;
	background: none;
	width: 200px;
	height: 50px;
	color: #fff;
	font-weight: bold;
	font-size: 110%;
}

#header #siebens #saule2{
	background-position: -20px -150px;
	margin-right: 48px;
}

#header #siebens #saule3{
	background-position: -40px -150px;
	margin-right: 47px;
}

#header #siebens #saule4{
	background-position: -60px -150px;
	margin-right: 47px;
}

#header #siebens #saule5{
	background-position: -100px -150px;
	margin-right: 49px;
}

#header #siebens #saule6{
	background-position: -80px -150px;
	margin-right: 45px;
}

#header #siebens #saule7{
	background-position: -120px -150px;
	margin-right: 0;
}

#header #siebens #saule:hover,
#header #siebens #saule.activ{
	color: #ffbb00;
}

#header #siebens #saule1:hover,
#header #siebens #saule1.activ{
	background-position: 0 0;
}

#header #siebens #saule2:hover,
#header #siebens #saule2.activ{
	background-position: -20px 0;
}

#header #siebens #saule3:hover,
#header #siebens #saule3.activ{
	background-position: -40px 0;
}

#header #siebens #saule4:hover,
#header #siebens #saule4.activ{
	background-position: -60px 0;
}

#header #siebens #saule5:hover,
#header #siebens #saule5.activ{
	background-position: -100px 0;
}

#header #siebens #saule6:hover,
#header #siebens #saule6.activ{
	background-position: -80px 0;
}

#header #siebens #saule7:hover,
#header #siebens #saule7.activ{
	background-position: -120px 0;
}

#header .ref{
	width: 890px;
	height: 60px;
	background-image: url('../img/BGReflection_blue.jpg');
	background-repeat: repeat-x;
	background-position: left top;
	position: absolute;
	top: 364px;
	left: 0;
}

#header .pictures .ref{
	width: 525px;
	top: 354px;
	background-image: url('../img/FotosReflection_blue.jpg');
}

#content {
	position: absolute;
	top: 409px;
	left: 0;
	z-index: 5;
}

#content img {
	margin: 10px 20px 20px 0;
	float: left;
}

#content p{
	margin: 5px 0;
	text-align: justify;
}

#content span{
	font-weight: bold;
	color: #555;
}

#content .sidebar {
	margin: 10px 38px;
	width: 200px;
	background-image: url('../img/sidebarBG_blue.jpg');
	background-repeat: repeat-y;
	background-position: left top;
	float: left;
}

#content .sidebar ul li {
	list-style: none;
	height: 150px;
	border-bottom: 1px solid #123;
	border-top: 1px solid #112;
}

#content .sidebar ul li a{
	color: #fff;
	text-decoration: none;
}

#content .sidebar ul li a:hover{
	color: #fc7500;
}

#content .sidebar ul li a img{
	margin: 0px 40px;
}

#content .sidebar ul li a p{
	margin:  10px 0 10px 40px;
}

#content .contentcenter {
	margin: 10px 0;
	background-color: #fff;
	float: right;
	width: 560px;
	padding: 10px 25px;
	min-height: 588px;
}

#content .contentcenter ul{
	margin-left: 40px;
	list-style-type: square;
}

#content .contentcenter a{
	color: #fc7500;
	text-decoration: none;
}

#content .contentcenter a:hover{
	text-decoration: underline;
}
.clear{
	clear: both;
}
.facebook{
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 25px;
	right: 25px;
}

#footer {
	width: 850px;
	padding: 5px 20px;
	background-image: url(../img/BGfooter.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	clear: both;
}

#footer a{
	color: #333;
	text-decoration: none;
}

#footer a:hover{
	text-decoration: underline;
}

   

/* ======================================
    Ende
   ====================================== */