/*  =========================================================
Stylesheet zur Formatierung am Bildschirm
Datei:  layout.css
Datum:  01. Mai 2009
Autor:  Stefan Brockhaus
Aufbau  1. SEITENAUFBAU
        2. INHALTSAUFBAU
        3. NAVIGATION
        4. INHALT
        5. FUSSBEREICH
        6. KONTAKTFORMULAR
        7. SONSTIGE FORMATIERUNGEN
========================================================== */

@media screen {

/* ======================================
   1. SEITENAUFBAU
   ====================================== */

/* Bildlaufleiste im Firefox immer zeigen */
html { height: 101%;
}

html, body {
 margin:0;
 padding:0;
 text-align:center;
 background-color:#E6E6E6;
}

#wrapper {
 width:770px;
 text-align:left;
 margin-left:auto;
 margin-right:auto;
 background-image:url(../upload/bgtop.gif); background-repeat:repeat-x;
 background-color:#6B6B6B;
}
/* *** Kopfbereich Anfang *** */
#header {
 float: left;
 display:inline;
 position:relative;
 height:200px;
 width:670px;
 margin:37px 50px 5px 50px;
 z-index:1;
}
/* *** Kopfbereich Ende *** */

#logo {
 float:left;
 display:inline;
 position:relative;
 height:200px;
 width:123px;
 margin:-235px 0px 0px 0px;
 z-index:999;
}

#content {
 background-color: #e6e6e6;
 float: right;
 display:inline;
 position: relative;
 width:670px;
 margin:0 50px 0px 50px;
 }

#menue {
 background-color: #6B6B6B;
 float: left;
 display:inline;
 position: relative;
 z-index:1000;
 height:45px;
 width:670px;
 margin:0 50px 0 50px;
 }

 #footer2 {
 height:25px;
 background-color:#6B6B6B;
 clear:both;
 position: relative;
 width:670px;
 margin:0 50px 0 50px;
 }


 #footer {
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   padding: 10px 20px 20px 20px;
    clear:both;
   position: relative;
   color: #FFFFFF;
    height:25px;

}



 /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
 content: ".";
 display: block;
  height: 0;
 clear: both;
 visibility: hidden;
 }

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */

/* ======================================
   2. AUFBAU DER EINZELNEN INHALTE
   ====================================== */

#text {
 background-color: #e6e6e6;
 float: left;
 display:inline;
 position: relative;
 width:385px;
 margin:0 0 15px 0;
 padding:20px 5px 0 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

  #text_breit{
 background-color: #e6e6e6;
 float: left;
 display:inline;
 position: relative;
 width:620px;
 margin:0 0 15px 0;
 padding:20px 5px 0 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }


.mainbox {
	width:620px;
	text-align:center;
/*	border:1px dotted lightgrey;	*/
	overflow:auto;
	padding: 0px;
}

.imagebox {
	width: 145px;
	margin:4px;
	padding:0px;
/*	border:1px solid black;	*/
	float:left;
  }




 #text_breit_impressum {
 background-color: #e6e6e6;
 float: left;
 display:inline;
 position: relative;
 width:620px;
 margin:0 0 15px 0;
 padding:20px 5px 0 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 }

 #bilder {
 background-color: #e6e6e6;
 float: right;
 display:inline;
 position: relative;
 width:230px;
 height:auto;
 margin:0 0 0 0;
 padding:15px 22px 10px 0px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }


 #history {
 background-color: #e6e6e6;
 float: right;
 display:inline;
 position: relative;
 width:230px;
 height:450px;
 margin:0 0 0 0;
 padding:15px 22px 10px 0px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

.bild { border: solid 3px #6B6B6B; margin-bottom:8px;}

 #referenz {background-color: #e6e6e6;
  float: left;
  width:670px;
  height:190px;
 }
/* ======================================
   2. ARTIKELLISTE
   ====================================== */
 .referenz_foto {
 background-color: #e6e6e6;
 float: left;
 position: relative;
 width:150px;
 margin:0 0 0 0;
 padding:15px 22px 10px 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

 .referenz_no_foto {
 background-color: #e6e6e6;
 float: left;
 position: relative;
 width:150px;
height:100px;
 margin:0 0 0 0;
 padding:15px 22px 10px 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

 .referenz_date {
  background-color: #e6e6e6;
 float: left;
 position: relative;
 width:230px;
 margin:0 0 0 0;
 padding:15px 22px 10px 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

 .referenz_headline {
 background-color: #e6e6e6;
 float: left;
 position: relative;
 width:230px;
 margin:0 0 0 0;
 padding:35px 22px 10px 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 }

 .referenz_text {
 background-color: #e6e6e6;
 float: left;
 position: relative;
/* vertical-align:middle;*/
 width:370px;
 height:auto;
 margin:0 0 15px 0;
 padding:0px 5px 0 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

 .referenz_link {
 background-color: #e6e6e6;
 float: left;
 display:inline;
 position: relative;
/* vertical-align:middle;*/
 width:370px;
 height:auto;
 margin:0 0 15px 0;
 padding:0px 5px 10px 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

 .back a,
 .referenz_link a {
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
	background: #fff;
	border: 1px solid #6B6B6B;
	text-decoration: none;
	padding: 0.2em 0.5em;
display:inline;
}

#back {
margin: 10px 5px 10px 0px;
}

 .back a {
	background: #fff;
	border: 1px solid #9AAFE5;
	text-decoration: none;
	padding: 0.2em 0.5em;
display:inline;
}

 /* ENDE ARTIKELLISTE */

 #news_foto {
 float: left;
 display:inline;
 position: relative;
 width:230px;
 margin:0 0 0 0;
 padding:15px 22px 10px 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

 #news_text {
 float: left;
 display:inline;
 position: relative;
/* vertical-align:middle;*/
 width:370px;
 height:100px;
 margin:0 0 15px 0;
 padding:80px 5px 0 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

 #techni {background-color: #e6e6e6;
  float: left;
  width:670px;
  height:190px;
 }

 #techni_foto {
 background-color: #e6e6e6;
 float: left;
 display:inline;
 position: relative;
 width:230px;
 margin:0 0 0 0;
 padding:15px 22px 10px 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

 #techni_text {
 background-color: #e6e6e6;
 float: left;
 display:inline;
 position: relative;
/* vertical-align:middle;*/
 width:370px;
 height:160px;
 margin:0 0 15px 0;
 padding:80px 5px 0 20px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 }

/* ======================================
   3. NAVIGATION / MENUE
   ====================================== */

ul#menu {
 margin:0;
 padding:0;
 list-style-type:none;
 width:670px;
 position:relative;
 display:block;
 height:30px;
 font-size:12px;
 font-weight:bold;
  background-color:#ffcf01;
/* background:transparent url(../upload/verlauf.jpg) repeat-x top left;*/
 font-family:Arial, Helvetica, sans-serif;
}

ul#menu li {
 display:block;
  position:relative;
 float:left;
 height:30px;
 margin:0;
 padding:0;
 border-right:solid 1px #6B6B6B;
}

ul#menu li a {
 display:block;
 float:left;
 color:#000000;
 text-decoration:none;
 font-weight:bold;
 padding:8px 13px 8px 13px;
}

ul#menu li a:hover{
 color:#ffffff;
 display:inline;
 height:25px;
 background-color:black;
/* background:transparent url(../upload/nav_bg.png) 0px -30px no-repeat;	*/
 float:left;
 margin:0;
/*background:transparent url(../upload/nav_bg.png) 0px -30px no-repeat;	*/
}

#index #index_nav a,
#leistungen #leistungen_nav a,
#news_blog #news_blog_nav a,
#referenzen #referenzen_nav a,
#referenzen_detail #referenzen_nav a,
#technik #technik_nav a,
#jobs #jobs_nav a,
#kontakt #kontakt_nav a,
#kontakt_formular #kontakt_nav a,
#impressum #impressum_nav a {
 color:#ffffff;
 display:inline;
 height:25px;
 background-color:black;
/* background:transparent url(../upload/nav_bg.png) 0px -30px no-repeat;	*/
 float:left;
 margin:0;
/*background:transparent url(../upload/nav_bg.png) 0px -30px no-repeat;	*/
}

/* ======================================
   3. KONTAKTFORMULAR
   ====================================== */

#form_auftraggeber .error {
background-color: #FF0000;
}
#form_auftraggeber .error_select {
background-color:#00FF00; border:2px solid #FF0000;
}

#form_auftraggeber input {
background-color:#eeeeee;color:#000; border:1px solid #929292;
width:80%;
}

#form_auftraggeber textarea {
background-color:#eeeeee;color:#000; border:1px solid #929292;
width:80%;
}

#form_auftraggeber select {
background-color:#eeeeee;color:#000; border:1px solid #929292;
width:80%;
}


/* ======================================
   3. SEITENNAVIGATION
      Scrolldiv
   ====================================== */

#divUpControl{position:absolute; width:230px; left:10px; top:10px; z-index:1; text-align: right;}
#divDownControl{position:absolute; width:230px; left:10px; top:245px; z-index:1; text-align: right;}
#divContainer{position:absolute;margin-top:12px; width:230px; height:200px; overflow:hidden; top:30px; left:10px; clip:rect(0px 230px 190px 0px); visibility:hidden;}
#divContent{position:absolute; top:0px; left:0px;}

#flashcontent2{
margin-top:-20px;
}

/* ======================================
   3. SEITENNAVIGATION
      Artikellisten
   ====================================== */

.pagebar {
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
	padding: 0.2em 0.5em;
	margin-right: 0.1em;
	margin-bottom: 1.0em;
/*	border: 1px solid #fff;*/
	text-decoration: none;
	text-align: center;
}

.pagebar a,.pageList .this-page {
	background: #fff;
	border: 1px solid #6B6B6B;
	text-decoration: none;
	padding: 0.2em 0.5em;
display:inline;
}

.pagebar a:visited {
	border: 1px solid #9AAFE5;
	text-decoration: none;
	padding: 0.2em 0.5em;
}

.pagebar .break {
	padding: 2px 6px 2px 6px;
	border: none;
	background: #000;
	text-decoration: none;
}

.pagebar .this-page {
	border: 1px solid #2E6AB1;
	padding: 0.2em 0.5em;
	font-weight: bold;
	background: #2E6AB1;
	color: #fff;
display:inline;
}

.pagebar a:hover {
	border-color: #2E6AB1;
}

.pagebar .inactive
{
   border: 1px solid #cccccc;
	 color: #ccc;
   text-decoration: none;
   padding: 0.2em 0.5em;
}

.block {
  display:block;
}

.reihe {
  clear: both;
  padding: 2px 0px;
}

} /* Ende @media screen - nicht löschen! */

/* ==================================
   ENDE DES STYLESHEETS
   =============================== */