@charset "utf-8";

body {
	font: 100%/1.4 Arial, Helvetica, sans-serif;
	/*background: url(assets/page_content_bg_co662.png) center top no-repeat (662 px center oben) bg-content-1024.png) center top repeat-y, url(assets/page_bg_wgw_712.gif) left top no-repeat, url(assets/page_bg_g_670.gif) left bottom no-repeat, url(assets/page_bg_t_500.gif) right top repeat-y, url(assets/bg-footer-gt-200.gif) center bottom no-repeat;
	background:  url(assets/page_bg_low_662.gif) left top no-repeat, url(assets/page_bg_t_500.gif) right top no-repeat, url(assets/page_bg_lug780.gif) left bottom repeat-y;*/ 
	
	background-color: #006a7d;/* #006a7d; türkis, dcdeda grau*/
	background:#006a7d url(assets/page_bg_lug.gif) left bottom repeat-y;
	margin: 0;
	padding: 0;
	color: #000;
	overflow:scroll;
}
/*body.body_leistungen {
	font: 100%/1.4 Arial, Helvetica, sans-serif;
	/*background: url(assets/page_content_bg_co662.png) center top no-repeat (662 px center oben) bg-content-1024.png) center top repeat-y, url(assets/page_bg_wgw_712.gif) left top no-repeat, url(assets/page_bg_g_670.gif) left bottom no-repeat, url(assets/page_bg_t_500.gif) right top repeat-y, url(assets/bg-footer-gt-200.gif) center bottom no-repeat;*/
	/*background:  url(assets/page_bg_low_1180_leistungen.gif) left top no-repeat, url(assets/page_bg_lug780.gif) left bottom repeat-y, url(assets/page_bg_t_500.gif) right top no-repeat;
	background-color: #006a7d; /*#006a7d; türkis, dcdeda grau*/
/*	margin: 0;
	padding: 0;
	color: #000;
}*/
@media only all and (max-width: 1024px) and (max-height: 768px) {
  body { 
   	background: url(assets/bg-content-1024.png) left top repeat-y
  }
}
/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass diese Angaben auch für die .nav-Liste gültig sind, wenn Sie keinen spezifischeren Selektor festlegen. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* Durch Entfernen des oberen Randes wird ein Problem vermieden, bei dem Ränder aus dem umgebenden Block entweichen. Der verbleibende untere Rand sorgt für den Abstand von allen folgenden Elementen. */
	padding-right: 15px;
	padding-left: 15px; /* Hinzufügen von Auffüllungswerten für beide Seiten jeweils enthaltener Blockelemente statt für die Blöcke macht Box-Modell-Berechnungen unnötig. Alternativ kann auch ein untergeordneter Block mit Auffüllung an den Seiten verwendet werden. */
}
h2, h4 {
  font-size: 16px;	
  font-weight: normal;
  letter-spacing: 1px
}
h2 {
 line-height: 24px; 	
}
a img { /
	border: none;
}
/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a, a:link, a:visited {
	color: #dadada;
	text-decoration: none; 
}

a:hover, a:active, a:focus { 
	color:#c6c6c6;
}
/*kennzeichnung externer Links*/
a[href^="http:"]:after,
a[href^="https:"]:after,
a[href^="ftp:"]:after {
    content: ' ↗';
   }
/*kennzeichnung gilt nicht für interne Links */
a[href^="http://www.ingenieurbuero-imhoff.de"]:after,
a[href^="http://ingenieurbuero-imhoff.de"]:after {
    display: none
}
/*kennzeichnung gilt nicht für interne Links */
a[href^="https://www.ingenieurbuero-imhoff.de"]:after,
a[href^="https://ingenieurbuero-imhoff.de"]:after {
    display: none
}


/* ~~ Dieser Container fester Breite umgibt alle anderen Blockelemente. ~~ */
.container {
	width: 1024px;
	background: /*#d1d3d4*/url("assets/bg-content-1024.png") left top repeat-y;
	margin: 0; 
}

header {
	/*background: #d1d3d4 url("assets/bg_sidebar_top.png") no-repeat left top*/;
	border-bottom: 6px solid #006a7d;
	margin-top: 90px;
}
img#logo, img.herenologo {
   	margin-bottom: 30px;
	padding-left: 20px
}

.sidebar1 {
	float: left;
	width: 451px;
	
}
aside {
	float: right;
   width:278px;
   min-height: 362px;
   padding-bottom: 94px;
   padding-top:0;	
}
h3 {
   text-align: center;
   color: #006a7d;
   font-size: 18px;
   line-height: 18px
 
}
aside img {
 margin: 50px auto;
 display: block;
 margin-bottom: 66px	
}
/* ~~ Stile für die Navigationslisten  ~~ */
ul.nav {
	float: left;
	width: 160px;
	list-style: none; 
	margin-top: 50px;
	margin-bottom: 15px; /*  Abstand zwischen den Navigationselementen und den darunter angeordneten Inhalten  */
}
ul.nav li {
	font-size: 18px; 
	line-height: 26px;
	font-weight: bold;
	
}
ul.nav a, ul.nav a:visited { 
	padding: 15px 0px 5px 18px;
	display: block; /*  Blockeigenschaften für Hyperlinks angegeben, sodass das gesamte umschließende LI-Element ausgefüllt und auf einen Mausklick reagiert. */
	width: 130px;  /*Mit dieser Breite reagiert die gesamte Schaltfläche in IE6 */
	text-decoration: none;
	background-color: #fff;
	color: #9d9d9c;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus, ul.nav .selected { /* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
	color: #006a7d;
}

ul.subnav {
	float: left;
	width: 142px;
	list-style: none; 
	margin-top: 15px; /*um ungefähr auf Höhe von Leistungen zu kommen */
	margin-bottom: 5px; 
}
ul.subnav li {
	font-size: 12px; 
	line-height: 20px;
	font-weight:normal;
	color: #706f6f;
	
}
ul.subnav a, ul.subnav a:visited { 
	padding: 15px 0px 5px 15px;
	display: block; 
	width: 240px;  
	text-decoration: none;
	background-color: #d1d3d4;
	color: #706f6f;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus, ul.nav a.selected, ul.subnav a.selected { 
	color: #006a7d;
	font-weight:bold
}
ul.subsubnav {
 width: 100%;	
 list-style: none;
	margin: 0 5px; /*Einrückung zum hauptlink */
}
ul.subsubnav li {
	font-size: 10px; 
	line-height: 12px;
	font-weight:normal;
}
ul.subsubnav a, ul.subsubnav a:visited { 
	padding: 5px 0;
	display: block; 
	text-decoration: none;
	background-color: #d1d3d4;
	color: #006a7d;
}
ul.subsubnav a:hover, ul.subsubnav a:active, ul.subsubnav a:focus, ul.subsubnav a.selected { 
	font-weight: bold
}

.content {
	padding: 0;
	width: 567px;
	float: right;
	color: #fff;
	/*background:#006a7d url(assets/bg_content_line.png) repeat-y left top ;*/
}

/* ~~ Mit diesem gruppierten Selektor werden die Listen im .content-Bereich angesprochen. ~~ */
.content ul, .content ol {
	padding: 0 15px 0px 40px;
	list-style-type:square; 
}
p.vor_li {
 margin: 0;	
}
.content li {
 font-size: 12px;	
}
table {
width: 95%;
border: 0;
margin-left: 12px;	
}
table.projektdaten {
 width: 430px;
 margin-top: 429px;
 border: 0;
 margin-left: 12px;
 postion: absolut;	
}

table.vita {
margin-bottom: 10px;	
}
caption {
 font-size: 12px;	
  font-weight: normal;
  line-height: 20px; 
  letter-spacing: 1px;
  width: 100%;	
  text-align: left;
  color: #dadada;
  padding-top: 10px;
  padding-bottom: 10px
}
.projekt {
 color: #fff;
 letter-spacing: 3px;	
}
td {
 font-size: 12px;	
 vertical-align: top;
 color:#fff;
}
td.daten {
color: #c6c6c6	
}
td:nth-child(2n)
{
padding-left: 3px;
}
td {
 font-size: 12px;	
 vertical-align: top;
}

/* ~~ Fußzeile ~~ */
footer {
	/*padding: 3px 5px 4px 5px;
	height: 286px;
	background:url(assets/bg_below_foooter.fw) left 23px  no-repeat;*/
	width: 1023px;
	position: relative;/* Liefert "hasLayout" für Internet Explorer 6, zum korrekten Rücksetzen der schwebenden Ausrichtung. */
	clear: both; /* Diese "clear"-Eigenschaft ermöglicht es dem .container-Block, das Ende der Spalten zu erkennen und sie korrekt zu umschließen. */
}
address{
	font-size: 10px;
	letter-spacing: 2px;
	font-style: normal;
	text-align: right;
	padding: 3px 30px 4px 3px;
	/*padding-right: 5px;*/
	background:#fff;
}
address .impressum {
 	padding-left: 20px;
	font-size: 10px;
	letter-spacing: normal;
  }
  .impressum a {
	color: #006a7d;
	text-decoration: none;
	font-weight: bold   
  }
/*Unterstützung für HTML 5 - Legt für die neuen HTML 5-Tags die Eigenschaft "display:block" fest, damit die Tags in den Browsern korrekt dargestellt werden. */
header, section, footer, aside, article, figure, header img {
	display: block;
}
.content h2 {
 padding-top: 40px;
 color: #dadada;
 margin-bottom: 6px	
}
.content h4 {
 color: #dadada;
 margin-top: 28px;
 margin-bottom: 6px;
 line-height: 16px
}
.content p {
font-size: 12px;	
}
article {
padding-bottom: 0;
margin-bottom: 0	
}

section.diesesprojekt {
 position: relative;
 min-height: 212px	
}
div#gallery-switch {
	font-size: 0;
	width: 74px;
	margin: 0;
	position: absolute;
	left: 470px;
	top: 8px }
div#gallery-switch a { display: block;
padding-top: 3px }
div#gallery-switch img, div#gallery-base img { max-width: 100%; }


div#gallery-base { width: 567px;
position: relative; 
top: -44px;/*top: -16px; */
left:-44px } /* margin-left: 20%;*/

div#gallery-base figure {
	position: absolute;
	opacity: 0;
	padding: 0;
	/*transition: .5s opacity linear;*/
	width: 100%; 
	color: #fff; }
div#gallery-base figure#bild1,
div#gallery-base figure:target { opacity: 1; }

div#who {
padding: 4px 0 0 5px

}
div#who img {
	margin: 0;
padding: 0;
}
div#gallery-start { 
width: 570px;
position: relative;
top: 180px;
left: -5px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0;
margin: 0}
div#gallery-start img {
width: 188px;
float: left;
padding: 0;
margin: 0;
border: 1px solid #fff	
}
#nicepicture{
 width: 567px;
 padding:0;
 margin:0;
 border: 0;
 position: relative;
top: 180px;
 left: -5px	;
}
/*div#gallery-start img.innen {
 border-left: 1px solid #fff;
 border-right: 1px solid #fff	
}*/

.datenschutz {
	max-width: 570px;
	/*margin-top: 90px;*/
	padding: 0 10px 0 0;
	height: 600px;
    overflow: auto;
   /* margin: 40px auto;*/}


.datenschutz h4 {text-align: left;
padding-bottom: 30px;
}
.datenschutz ul {position: relative;
      top: 10px;
      left: 0;
      list-style: none;
	  padding: 0 0 18px 0;
}
.datenschutz ul li {
line-height: 1.1em;
font-size: .9em;
padding-left: 8px
}