/* www.vogelundpiepmatz.de */
/* (c) Nicolai Schwarz, textformer mediendesign, April 2008 */

/* Ganz allgemein */

body, img, h1, h2, h3, h4, h5, p, li, a, ul, ol, input, textarea {
border: 0;
margin: 0;
padding: 0;
}

ul {
margin: 0 10px 0 23px;
list-style: square;
}

input, textarea {
margin: 2px 0 8px 0;
border: 1px solid #317B8E;
}


hr {
display: none;
}


/* Die Hauptboxen */

body	{
color: #000;
font-family: Verdana, Helvetica, sans-serif;
font-size: 62.50%;
background-color: #fff;
text-align: center;
/* text-align sorgt dafür, dass der IE5/Win den Inhalt in die Mitte setzt */
}

div#wrap0 {
position: absolute;
margin: -225px 0 0 0;
height: 450px;
top: 50%;
left: 0%;
width: 100%;
background-color: #317B8E;
}

div#wrap1 {
position: relative;
margin: 5px auto;
height: 440px;
width: 840px;
background-color: #fff;
}

div#header {
position: absolute;
width: 260px;
height: 170px;
top: 0;
left: 0;
}

.skiplinks { display: none; }

#header h1 {
text-indent: -9999px;
background: transparent url(logo_markusfraedrich.gif) 0px 0px no-repeat;
width: 260px;
height: 170px;
}

#navi {
position: absolute;
left: 0;
top: 190px;
margin: 0;
width: 260px;
height: 78px;
}

#navi li {
text-indent: -9999px;
list-style: none;
width: 260px;
height: 30px;
margin: 0;
padding: 0;
overflow: hidden;
}

#navi li#fernsehen {margin-bottom: 30px; }

#navi li a {
display: block;
width: 260px;
height: 30px;
margin: 0;
padding: 0;
}

#navi li#print a {background: transparent url(menu.gif) 0px 0px no-repeat; }
#navi li#radio a {background: transparent url(menu.gif) 0px -30px no-repeat; }
#navi li#web a {background: transparent url(menu.gif) 0px -60px no-repeat; }
#navi li#fernsehen a {background: transparent url(menu.gif) 0px -90px no-repeat; }
#navi li#startseite a {background: transparent url(menu.gif) 0px -120px no-repeat; }
#navi li#kurzvita a {background: transparent url(menu.gif) 0px -150px no-repeat; }
#navi li#impressum a {background: transparent url(menu.gif) 0px -180px no-repeat; }

#navi li#print a:hover {background: transparent url(menu.gif) 0px -210px no-repeat; }
#navi li#radio a:hover {background: transparent url(menu.gif) 0px -240px no-repeat; }
#navi li#web a:hover {background: transparent url(menu.gif) 0px -270px no-repeat; }
#navi li#fernsehen a:hover {background: transparent url(menu.gif) 0px -300px no-repeat; }
#navi li#startseite a:hover {background: transparent url(menu.gif) 0px -330px no-repeat; }
#navi li#kurzvita a:hover {background: transparent url(menu.gif) 0px -360px no-repeat; }
#navi li#impressum a:hover {background: transparent url(menu.gif) 0px -390px no-repeat; }

body.print #navi li#print a {background: transparent url(menu.gif) 0px -420px no-repeat; }
body.radio #navi li#radio a {background: transparent url(menu.gif) 0px -450px no-repeat; }
body.web #navi li#web a {background: transparent url(menu.gif) 0px -480px no-repeat; }
body.fernsehen #navi li#fernsehen a {background: transparent url(menu.gif) 0px -510px no-repeat; }
body.default #navi li#startseite a {background: transparent url(menu.gif) 0px -540px no-repeat; }
body.kurzvita #navi li#kurzvita a {background: transparent url(menu.gif) 0px -570px no-repeat; }
body.impressum #navi li#impressum a {background: transparent url(menu.gif) 0px -600px no-repeat; }


div.zitat, div#kontakt {
position: absolute;
top: 40px;
left: 275px;
width: 250px;
height: 390px;
background-color: #fff;
}

div.z1 {background: #fff url(zitate_arbeit.jpg) 0 0 no-repeat;}
div.z2 {background: #fff url(zitate_eile.jpg) 0 0 no-repeat;}
div.z3 {background: #fff url(zitate_kultur.jpg) 0 0 no-repeat;}
div.z4 {background: #fff url(zitate_schnee.jpg) 0 0 no-repeat;}
div.z5 {background: #fff url(zitate_schwierig.jpg) 0 0 no-repeat;}
div.z6 {background: #fff url(zitate_vorlieben.jpg) 0 0 no-repeat;}
div.z7 {background: #fff url(zitate_worte.jpg) 0 0 no-repeat;}

div#content {
position: absolute;
top: 40px;
left: 550px;
width: 260px;
background-color: #fff;
}


/* Die Schriftinformationen */

h1, h2, h3, h4, h5, p, ul, li, a  {
text-align: left;
font-weight: normal;
font-family: Verdana, Helvetica, sans-serif;
background: transparent;
text-decoration: none;
}

h1, h2, h3, h4, h5 {
font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif;
font-weight: bold;
}

h2 {
padding: 0;
margin: 0 0 0.5em 0;
font-size: 1.5em;
line-height: 1.5em;
color: #000;
}

h3 {
margin: 0 0 1em 0;
padding: 0;
font-size: 1.3em;
line-height: 1.3em;
letter-spacing: 0.05em;
color: #000;
}

p, li {
margin: 0 0 10px 0;
font-size: 1em;
line-height: 1.4em;
}

div#inhalt p, div#inhalt li {
font-size: 1.2em;
line-height: 1.6em;
}

a  {
text-decoration: underline;
color: #317B8E;
}

a:hover {
text-decoration: none;
color: #000;
}

ul li {
font-size: 1em;
line-height: 1.6em;
}

/* Kontaktformular */

form {
padding: 0;
border: 0;
margin: 0;
margin-top: 10px;
text-align: left;
}

form fieldset {
padding: 0;
border: 0;
margin: 0;
}

form fieldset legend {
display: none;
}

form label {
margin: 15px 0 -10px 0;
display: block;
}

form input#E-Mail, form input#Name {
padding: 4px;
width: 230px;
display: block;
border: 1px solid #317B8E;
}

form input.zemSubmit {
padding: 4px;
display: block;
border: 1px solid #317B8E;
background-color: #317B8E;
color: #fff;
}

form input.zemSubmit:hover {
border: 1px solid #317B8E;
background-color: #fff;
color: #317B8E;
}

form input#E-Mail:hover, form input#Name:hover, form textarea:hover {
border: 1px solid #317B8E;
}


/* Diese beiden Felder sind nur Spam-Honeypots */
form input#phone, form input#mail  {
width: 230px;
height: 1px;
display: inline;
float: left;
}

form textarea {
padding: 4px;
width: 230px;
height: 100px;
margin-bottom: 16px;
border: 1px solid #317B8E;
}

ul.zemError {
margin-top: 10px;
}

ul.zemError li {
color: #f00;
}