/* CSS Stylesheet by dialog im netz http://dialog-im-netz.de
  orange: #eb6909                                  */
html,blockquote,body,div,dl,dt,dd,fieldset,form,
h1,h2,h3,h4,h5,h6,ol,p,ul,li,center,hr,pre,img,
table,tr,td,th,thead,tbody,tfoot,caption  {
margin:0;
padding:0;
border:0 none;
font-size: 1em;
}
@font-face {
	font-family: Bariol;
	src: url('../fonts/Bariol-Regular.eot');
	src: url('../fonts/Bariol-Regulard41d.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Bariol-Regular.woff') format('woff'),
		url('../fonts/Bariol-Regular.ttf')  format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: Bariol-b;
	src: url('../fonts/Bariol-Bold.eot');
	src: url('../fonts/Bariol-Boldd41d.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Bariol-Bold.woff') format('woff'),
		url('../fonts/Bariol-Bold.ttf')  format('truetype');
	font-weight: normal
	font-style: normal;
}
body {
color: black;
background-color: white;
font-family:Bariol,Arial, Helvetica, sans-serif;
font-size: 16px;
overflow-y: auto;
}
body#startseite {
background: #6f6e6f url(../img/bg/hg-start.jpg)  left bottom fixed no-repeat; 
}
body#innen {
background: #6f6e6f url(../img/bg/hg-infrastruktur.jpg) center top fixed no-repeat; 
}
a {
color: #eb6909;
border:none;
outline: none;
}
a:hover,
a:focus {
outline: none;
}
p a:hover,
p a.focus {
color: black;
}
#article1 p a {
color: black;
}
#article1 p a:hover {
color: #eb6909;
}
td {
vertical-align:top
}
h1 {
max-width: 500px;
margin: 30px 0 0 20px;
color: #eb6909;
font-family: Bariol-b, Arial,Helvetica,sans-serif
}
b,strong {
font-weight: normal;
font-family: Bariol-b, Arial,Helvetica,sans-serif
}
p,ul{
margin: 0 0 1em 0
}
h2{
font-size: 30px;
font-weight: normal;
margin-bottom: .5em
}

table {
border-collapse: collapse
}
.tc {
text-align: center
}
.tr {
text-align: right
}
#toplink {
display: none;
padding: 0 20px 20px;
}
#toplink a {
display: block;
text-align: right;
text-decoration: none
}
.embed-container {
	display: block;
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

ul {
padding-left: 16px
}
li {
vertical-align:middle
}
.hide, .h0,
.preload {
display:none
}
img{
display: block;
border: none;
height: auto;
 -ms-interpolation-mode: bicubic; 
}

sub {
position: relative; 
font-size: 9px; 
bottom: -4px;
font-weight: normal;
}
sup {
position: relative; 
font-size: 9px; 
top: -2px;
font-weight: normal;
}

.abstand0 {
clear: both;
height: 0
}
.clear {
clear: both
}
.bildlinks,
#content img.bildlinks,
.floatleft {
display: inline-block;
width: auto;
float: left;
margin: 0 10px 5px 0
}
.bildrechts,
.floatright,
#content img.bildrechts {
display: inline-block;
width: auto;
float: right;
margin: 0 0 5px 10px
}
#content img.inline-left {
width: auto;
}
#content img.inline-left:hover {
outline: 1px solid #eb6909;
}
.klein{
font-size:11px;
}
.rot,
.red {
color: red
}
.error {
position: fixed;
top: 15%;
left: 50%;
width: 300px;
margin-left: -150px;
background-color: white;
padding: 15px;
font-size: 20px;
font-weight: bold;
box-shadow: 0 6px 10px 0 #000
}


div,
nav,
main,
section,
header,
article,
footer,
#head {
display: block;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

/* DIVS */ 
#wrapper {
margin:0;
max-width:1400px;
height:auto;
}
#head {
height: auto;
padding-bottom:10px;
}
#logo {
width:500px;
}
/* Startseite */
#startseite #content section {
padding: 0 5% 200px 136px;
}
#startseite #content section article{
float: left;
width: 50%;
hyphens: auto;
padding: 0 0 0 50px;
 -moz-hyphens: auto;
 -webkit-hyphens: auto;
-ms-hyphens: auto;
}
#startseite #content section article:first-of-type {
padding: 0 25px 0 0px
}

/* INNEN */
#innen #logo {
width: 500px;
}
#innen #head {
padding-bottom:0px;
}
#mainh2 {
margin-top:-4px;
height: 130px
}
#mainh2 h2 {
font-size: 30px;
margin-left: 144px;
color: white;
margin-bottom: .5em;
}
#mainh2 p {
color: white;
margin-left: 144px;
max-width: 400px
}

#innen #content section {
float:right;
width: calc(100% - 420px);
background: transparent url(../img/trans-80.png) 0 0 repeat; 
margin:0 0 0 0;
padding:0;
}
#innen #content section article,
#results {
width: 50%;
padding: 20px;
float:left;
-moz-hyphens: auto;
hyphens: auto;
}
#content img {
width: 100%;
max-width:770px;
height: auto;
margin-bottom: .5em
}
#right {
display: none
}
#footer {
clear:both;
background-color: transparent
} 
/* NAVIGATION */
#startseite #nav {
margin: 20px 5% 20px 136px;
}
#startseite #nav ul {
list-style: none;
padding:0;
margin: 0 -1% ;
}
#startseite #nav li {
float:left;
width: 14.66666%;
height: auto;
margin: 1%;
padding:0;
}

#startseite #nav a {
display: block;
height: 100%;
}
#startseite #nav a img{
display: block;
}

/* NAV INNEN */
#innen #nav {
float:left;
width: 90px;
}
#innen #nav ul {
list-style: none;
padding:0 ;
margin:0;
}
#innen #nav li {
overflow: hidden;
margin: 8px 0;
box-shadow: 2px 3px 5px 0 #000 
}
#innen #nav li:first-of-type {
margin-top:0
}
#innen #nav a {
width: 90px;
height: 40px;
font-size: 15px;
font-weight: bold;
background: transparent url(../img/trans-grau.png) 0 0 repeat;
color: black;
display: block;
padding:5px 5px 0;
text-decoration: none;
}
#innen #nav li a:hover,
#innen #nav li.active a {
background: transparent url(../img/trans-80.png) 0 0 repeat;
}
#innen #nav li.active a{
color: #eb6909
}
#innen #nav ul ul {
position: absolute; 
top: -4px;
margin-left: 144px;
width: 260px;
background-image: none;
}
#innen #nav ul li.active ul li {
margin: 0;
overflow: visible;
box-shadow: 0 0 0;
}
#innen #nav ul li.active ul a {
background-color: transparent;
background-image: none;
width: auto;
height: auto;
color: white;
white-space: nowrap;
padding: 8px 0  ;
letter-spacing: .05em;
}


#innen #nav ul li.active ul a:hover {
text-shadow: 1px 2px 2px #000;
margin: -0.05em   0 0 -0.02em

}
#innen #nav ul li ul li.active a{
text-shadow: 2px 2px 3px #000;
color: #eb6909;
}
/* FORMULAR */
form {
}
label, input, textarea, select,button {
box-sizing: border-box;
moz-box-sizing: border-box;
margin:0 0 10px 0  ;
}
input, textarea,select {
border-width: 1px; 
padding: 2px 4px;
width:60%;
min-width: 200px;
}
input[type="checkbox"] {
width: 20px; 
background-color: transparent
}
label {
float: left;
width:40%;
min-width: 140px;
display: block;
clear: left;
}
form div {
clear: both;
}

input.short {
width: 80px;
}
input:hover,
textarea:hover,
select:hover {
background-color: #ffffff;
}
input.button {
width: 310px;
}

.meldung,
.meldungok {
font-weight: bold;
font-size: 1.3em;
text-align:left
}
.meldungok {
color: #4e9618;
}

#form1 {
transform: rotate(-2deg);
margin-left: 60px
}
#form2 {
transform: rotate(2deg);
max-width: 180px;
margin-left: 10px;
}
#form3 {
transform: rotate(3deg);
}
#form4 {
transform: rotate(-2deg);
margin-left: -4px;
max-width: 190px
}

#form5 {
transform: rotate(-5deg);
}
#form6 {
transform: rotate(2deg);

}
#form7 {
transform: rotate(-8deg);
max-width: 80px;
margin-left: -30px;
background-color: #eb6909;
}
/* Suchformular auf den Seiten */
#searchform{
display: none!important;
width:95px;
}
#searchform input {
background-color: transparent;
float:left;
}
#searchform input#search_term{
width:90px;
min-width:90px;
padding-left: 26px;
transition: all .6s ease;
}
#searchform:hover,
#searchform:focus{
width:220px
}
#searchform input#search_term:hover,
#searchform input#search_term:focus{
background: transparent url(../img/trans-80.png) 0 0 repeat;
width:200px
}
#searchform input#submit_search:hover,
#searchform input#submit_search:focus{
background-color: #eb6909;
}
#searchform input#submit_search{
min-width: 18px;
width:18px;
clear: none;
background-color: #eb6909;
border-radius: 8px;
position:absolute;
left: 2px;
}

/* SUCHFORMULAR auf Ergebnisseite */
#content #navigation_searchform_top {
padding: 10px;
}
#navigation_searchform_top input {
width: 200px;
}
#navigation_searchform_top input[type=submit] {
width: auto
}

/* Suchergebnisse */
#results{
width:100%
}
#results ul,
.pagination ul,
ul#search_result {
list-style: none;
}
#results h3 {
margin: .5em 0 1em 
}
#search_result li a {
color: #eb6909;
font-weight: bold;
text-decoration: none;
display: block;
margin: 0 0 .5em
}

#printlogo {
display: none;
}


/* Kleinere Monitore */
@media screen and (max-width: 880px) {
#innen #content section {
float:none;
clear: both;
width: 100%;
margin: 0 
}

#innen #nav ul ul {
margin-left: 144px;
}
}
@media screen and (max-width: 800px) {
#startseite #nav li {
width: 31.3333%;
}
#nav .clear1 {
clear:left;
}
}


@media screen and (max-width: 555px) {
body#Startseite{
background-image: url(../img/bg/hg-start_small.jpg);
}
#startseite #content section,
#startseite #content section article,
#innen #content section article,
#startseite #nav {
width:100%;
float: none;
margin: 0;
}
#startseite #content section{
padding-left: 10px;
margin-bottom: 200px;
background-color: rgba(255,255,255, .8)
}
#startseite #content section article {
	padding-left: 0
}
#startseite #content section article:first-of-type {
padding: 0 0 1em 0
}
#startseite #nav li {
width: 46%;
margin:2%
}
#startseite #logo ,
#innen #logo {
width:100%;
max-width: 360px;
margin: 10px -15px
}
/* Innen */
body#innen {
	background-position: top center;
}
h1 {
	margin-top: 10px
}

#innen #head {
height: 70px
}

#mainh2 h2,
#mainh2 p  {
margin-left: 20px
}
#innen #nav ul li.active ul {
	margin-left: 100px;
	overflow: hidden;
	width: 180px;
	max-width: 300px;
	margin-top: 4px
}

#innen #nav ul li.active ul {
background-color: RGBA(50,50,50,.5);
}

#innen #nav ul li.active ul  li {

}
#innen #nav ul li.active ul a {
	color: white;
	padding-left: 10px;
	white-space: normal
}
#innen #content section {
padding: 0
}
#nav .clear1 {
clear: none
}
#nav .clear2 {
clear:left;
}
}
@media print {
nav,
#innen #logo {
display: none
}
a {
color: black;
}
#innen #content section {
float:none;
width: 100%
}
#printlogo {
display: block;
}
h1{
margin: 0 0 0 0;
}
#mainh2 {
margin-left: -0.2cm;
}

}