/************************************************
Website: http://www.pentzek.org
Autor: Pentzek.org
Datei: styles-screen.css
Datum: 07.05.2010
************************************************/
html,
body{
heigth:101%;
color: black;
background-color: white;
font-family:Arial,'Times New Roman',Times,serif;
font-size: small;
line-height: 1.5;
}


h2,
h3,
h4,
h5,
h6{
color: #990033;
background-color: white;
}

#wrapper{
width: 80%;
margin-top: 2%;
margin-right: auto;
margin-left: auto;
}

#header{
width: 100%;
float: left;
}
#header img{
max-width: 50%;
max-height: 50%;
}


#bild-interview{
width: 255px;
float: right;
}

/*************Navigation*************************/
/* Navi allgemein */
#navi{
clear: left;
margin: 0 auto;
width: 100%;
padding-top: 10px;
z-index: 100;
}

.nav {
font-family: arial, sans-serif;
font-size:12px;
width:100%;
margin:0 auto;
}

.nav,
.nav ul{
list-style-type:none;
margin:0;
padding:0;
}

.nav a {
text-decoration:none;
/*background:url(/img/trans.gif);*/
filter: alpha(opacity=70);
opacity:0.7;
}

/* Navipunkte ohne Unternavi */
.nav a b {
background:#999;
border:1px solid #000;
border-color:#ddd #333 #333 #ddd;
color:#fff;
font-weight:normal;
display:block;
padding:5px 10px;
}

.nav a:hover b {
background-color:#aaa;
color:#800;
cursor:pointer;
}

.nav .fly .main b {
background:#999;
}
.nav .down b {
background:#999;
}

.nav .right ul b {
text-align:right;
}

.nav .right ul .main b {
background:#999;
text-align:right;
}


/*Link-Breite*/
.nav .drop,
.nav a {
width:130px;

}
.nav ul li {max-width:130px;} /* fix for IE8 */

/* set the left flyout position here */
.nav ul ul {left:120px;}

/* make this WIDTH - 1px */ /* or WIDTH - 0.063em if using em sizing */
.nav a {margin-right:-129px;}

/* ----------------------------------------------------------------------------        */

/* Einstellungen */
.nav li {float:left;} /* fixes IE related bugs, and allows for clearing */
.nav ul {float:left; position:relative; z-index:20;} /* necessary for float drop and to stack the <ul>s */
.nav ul li {clear:left;} /* must clear the floated list item inside sublist */
.nav a {position:relative; display:block;} /* needs to have a position above the rest */
.nav a.main {float:left; /* necessary for float drop */
    margin-top:10000px;} /* bring the top level links back into view */
.nav .drop,
.nav .fly {margin-top:-10000px;} /* hide the sub links and their containers, opera has low upper limits */
.nav ul {margin-bottom:-5000px;} /* avoid any interaction between the subs, can be any large size */

/* Subnavi */
.nav a:hover,
.nav a:focus,
.nav a:active {margin-right:0; z-index:10; outline:0}

.nav a:focus b,
.nav a:active b {background:#aaa; color:#800;} /* for tabbing */

/* für Opera */
.nav ul:hover,
.nav ul ul:hover {clear:left;} /* to stop intermittent sub link :hover problems */


/*************Braedcrumb*************************/
#breadcrumb{
position: relative;
left: 15px;
bottom: 35px;
font-size: small;
clear: left;
width: 100%;
float: left;
}

             #breadcrumb span{
         color: black;
         text-decoration:none;
         font-weight: bold;
         }
           #breadcrumb a{
         color:#666666;
         text-decoration:none;
         font-weight: bold;
         }


/************* main *************************/
#main{
         min-width: 750px;
         border: 1px solid red;
         padding: 0;
         float: left;
         -moz-border-radius-topleft: 0px;
         -moz-border-radius-topright: 0px;
         -moz-border-radius-bottomright: 15px;
         -moz-border-radius-bottomleft: 15px;
         -webkit-border-top-left-radius: 0px;
         -webkit-border-top-right-radius: 0px;
         -webkit-border-bottom-left-radius: 15px;
         -webkit-border-bottom-right-radius: 15px;
}

#main span {
font-weight: bold;
}
#main a {
color: black;
font-weight: bold;
}

#einleitung{
width: 95%;
float: left;
margin: -2% 1% 0 1%;
}

#content1{
width: 42%;
float: left;
margin: 0 2% 2% 2%;
}
#content2{
width: 42%;
float:right;
margin: 0 2% 2% 2%;
}
#content3{
width: 42%;
margin: 0 2% 2% 2%;
}
#content4{
width: 42%;
margin: 0 2% 2% 2%;
}

.bild{
float: left;
margin: 2% 1% 2% 1%;
}

p img{
float: none;
max-width: 100%;
max-height: 100%;
margin: 2% 1% 2% 1%;
}

/*************Footer*************************/

#footer{
clear: both;
float: left;
width: 100%;
min-width: 750px;
margin-top: 5px;
}

#footerbg{
left: 0;
width: 100%;
height: 88px;
margin:0;
background-image: url(/img/footer-bg.png);
background-repeat:repeat-x;
}

#subheader{
clear: both;
float: left;
width: 100%;
margin: 0;
padding: 0;
}

#subheaderbg{
left: 0;
width: 100%;
height: 274px;
margin:0;
background-image: url(/img/subheader-bg.png);
background-repeat:repeat-x;
}

.imageleft{
float: left;
}
.imageright{
float: right;
}
#angebot{
background-image: url(/img/existenzgruender-angebot.png);
position: relative;
right: 0;
top: 40px;
width:   469px;
height: 248px;
background-repeat: none;
float: right;
}

#angebot-text{
width: 250px;
height: 190px;
margin: 10px 0 10px 35px;
}

#angebot-text h3{
color: black;
background-color: transparent;
}

.skiplink {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}


#visit-us {
  display: none;
}

.clear{
clear: both;
}

/*************Screens unter 500px*************************/
@media screen and (max-width: 500px) {
         #subheader{
         display: none;
        }

#wrapper{
width: 100%;
margin-top: 2%;
margin-right: auto;
margin-left: auto;
}

#navi{
clear: left;
float: left;
}

         ul#navigation{
         margin: 0;
         padding: 0;
         }

         ul#navigation li{
         float: none;
         display: block;
         margin: 0;
         padding: 0;
         width: 95px;
         height: auto;
         padding-top: 0;
         text-align:left;
         }

         ul#navigation li a{
         color:#666666;
         text-decoration:none;
         font-weight: bold;
         }

         ul#navigation li:hover{
         background-image: none;
         text-decoration: underline;
         }
#main{
         min-width: 20px;
}

#content1{
width: 90%;
float: left;
}
#content2{
width: 90%;
float:left;
}
#content3{
width: 90%;
}
#content4{
width: 90%;
}

.bild{
float: left;
margin: 2% 1% 2% 1%;
}


#footer{
display: none;
}

.imageleft{
float: left;
}
.imageright{
float: right;
}


.skiplink {
  position: relative;
  top: 5px;
  left: 0;
  width: auto;
  height: 18px;
  font-size: small;
  line-height: 1.5;
}



#visit-us {
  display: none;
}}
@media screen and (max-width: 1000px) {
         #angebot{
         display: none;
        }}