/*
AUTHOR+COPYRIGHT:
Wilhelmine Freudenthal
Barrierefreies Webdesign / Semantischer Code

CONTACT:
wilhelmine@semantic-coding.net
http://www.semantic-coding.net
April 2007

last modified: 07/05/2007
*/

/* ----- Allgemeine HTML-Elemente ----- */
html
{ background:#9AB53B url("img/html-bg.gif") repeat-y 50% 0; }

body
{
 font-family:Verdana, Tahoma, sans-serif;
 font-size:0.8em;
 margin:auto;
 width:808px;
 padding:0 10px 0 10px;
 background:#FFFFFF url("img/body-bg.gif") no-repeat 50% 0;
 position:relative;
}

h1 { margin:0; padding:0; }
h2 { color:#5B6E18; font-size:1.2em; }
h3 { color:#333333; font-size:1em; }

a { color:#888888; }
div#content a { color:#F38A21; }

img { border:4px solid #F6C71C; }

/* ----- Off-Left-Elemente ----- */
h1 em,
ul#nav li span
{ position:absolute; left:-9999px; }

/* ----- Header ----- */
h1, h1 a
{
 display:block;
 width:120px;
 height:128px;
 background:url("img/logo_bewusst-essen.gif") no-repeat 50% 10px;
}

/* ----- Navigation ----- */
ul#nav
{
 margin:0;
 padding:0 10px 0 0;
 position:absolute;
 width:810px;
 top:110px;
 height:58px;
 right:0;
 text-align:right;
 background:url("img/nav-bg.gif") no-repeat 100% 100%;
}

ul#nav li
{
 list-style:none;
 display:inline;
 margin-left:1px;
 margin-right:1px;
 padding:13px 0 6px 0;
}

ul#nav li a, ul#nav li.current
{
 background-position:50% 0;
 background-repeat:no-repeat;
 padding:0 52px 19px 52px;
 display:inline-block;
 height:11px;
}

ul#nav li.diplomarbeit a, #diplomarbeit ul#nav li.current { padding-right:62px; padding-left:62px; }
ul#nav li.leistung a, #leistung ul#nav li.current { padding-right:78px; padding-left:78px; }
ul#nav li.kontakt a, #kontakt ul#nav li.current { padding-right:36px; padding-left:36px; }
ul#nav li.home a, #index ul#nav li.current { padding-right:10px; padding-left:10px; }

ul#nav li a { background-position: 50% 6px; }

ul#nav li.beruf a { background-image:url("img/nav-berufsbild.gif"); }
ul#nav li.lebenslauf a { background-image:url("img/nav-lebenslauf.gif"); }
ul#nav li.diplomarbeit a { background-image:url("img/nav-diplomarbeit.gif"); }
ul#nav li.leistung a { background-image:url("img/nav-leistungen_honorar.gif"); }
ul#nav li.kontakt a { background-image:url("img/nav-kontakt.gif"); }
ul#nav li.home a { background-image:url("img/nav-home.gif"); }

#beruf ul#nav li.current { background-image:url("img/nav-berufsbild_curr.gif"); }
#lebenslauf ul#nav li.current { background-image:url("img/nav-lebenslauf_curr.gif"); }
#diplomarbeit ul#nav li.current { background-image:url("img/nav-diplomarbeit_curr.gif"); }
#leistung ul#nav li.current { background-image:url("img/nav-leistungen_honorar_curr.gif"); }
#kontakt ul#nav li.current { background-image:url("img/nav-kontakt_curr.gif"); }
#index ul#nav li.current { background-image:url("img/nav-home.gif"); background-position:50% 6px; }

/* ----- Inhalt ----- */
div#content
{
 margin:40px 0 0 164px;
 padding:10px 10px 100px 20px;
 border-left:2px solid #5B6E18;
 position:relative;
 text-align:justify;
 min-height:410px;
}

div#content .cite
{
 margin:20px; 
 padding:20px;
 background:#FAFAFA url("img/quotation.gif") no-repeat 8px 36px;
 border:1px solid #E2E2E2;
 min-height:110px;
 width:340px;
}

div#content .cite strong
{
 font-weight:normal;
 display:block;
 margin-top:20px;
 margin-bottom:40px;
 font-size:1.2em;
 text-align:center;
}

div#content .cite em
{
 text-align:right;
 display:block;
}

div#content .foto
{
 float:right;
 margin-left:14px;
 margin-bottom:10px;
}

div#content table
{ width:612px; }

div#content table, div#content table td, div#content table th
{ border:1px solid #DDDDDD; border-collapse:collapse; padding:2px; text-align:left; }

/* ----- Spalte ----- */
div.col
{
 position:absolute;
 top:240px;
 left:10px;
 width:150px;
 padding-top:28px;
 font-size:0.9em;
 color:#888888; 
}

div.col h2
{
 color:#000000;
 font-size:1em;
 position:relative;
 margin-bottom:0;
 font-weight:normal;
}

div.col p, div.col ul
{
 margin:8px 0 8px 0;
 padding:0;
}

div.col li
{
 list-style:none;
 padding-left:8px;
 background:url("img/bullet.gif") no-repeat 0 6px;
}

div.contact-data { top:140px; }

div.contact-data h2 { padding-bottom:1.4em; }

div.contact-data h2 strong
{
 display:block;
 color:#888888;
 position:absolute;
 top:1.3em;
 font-weight:normal;
}

div.contact-data a { display:block; }
div.contact-data p { margin:0; padding:0; }

div.col p.img-leiste { margin-top:40px; text-align:center; }

/* ----- kontakt.html ----- */
#kontakt #content p { margin:0; padding:0; }

#design{ color:#BBBBBB !important; margin-top:120px !important; padding-top:5px !important; padding-bottom:4px !important;}
#design a{ background:url("img/logo_wf.gif") no-repeat 0 0; padding:5px 0 4px 25px; color:#BBBBBB !important; }
#design a:hover{ background-position:0 -25px; color:#666666 !important; }