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

CONTACT:
wilhelmine@semantic-coding.net
http://www.semantic-coding.net
Oktober 2008

last modified: 28/07/2010
*/

/*
key-rot: rot:#b71234; (r/g/b: 183/18/52)
key-grau: #4d4d4d; (r/g/b: 77/77/77)

hell-rot:#e2234b; (r/g/b: 226/35/75) ... hover
hell-grau: #777777; (r/g/b: 119/119/119)

hellgrau:#f5f5f5 ... html-bg
mittel-hellgrau:#CECECE; ... body-border
*/

/* ----------- Allgemeine HTML-Elemente ----------- */
html { background:#f5f5f5 url("img/kreis-gross.gif") no-repeat 10% 200px; }

body
{
 background:url("img/kreis-klein.gif") no-repeat 30% -20px;
 font-family:Verdana, sans-serif;
 font-size:0.9em;
 margin:auto;
 padding-top:110px;
 padding-bottom:20px;
 color:#4d4d4d;
 font-size:0.8em;
}

a { color:#b71234; text-decoration:underline; }
a:hover { color:#e2234b; }

h1, h2, h3, h4, h5, h6 { font-family:"Courier New", Courier, monospace; color:#b71234; font-weight:normal; line-height:1.2em; }

h1 { font-size:26px; margin-bottom:18px; }
h2 { font-size:14px; }
h3 { font-size:13px; }
h4 { font-size:12px; }
h5 { font-size:11px; }
h6 { font-size:10px; }

h2
{
 text-transform:uppercase; letter-spacing:1px;
 font-family:Verdana, sans-serif; 
 font-weight:normal;
 color:#777777;
 margin:8px 0 6px 0; padding:0;
}

h3 { font-family:Verdana, sans-serif;  margin:8px 0 6px 0; padding:0; }

p { margin:4px 0 4px 0; padding:0; }

ul { padding:0; margin:0; }
li { list-style:none; padding:0 0 0 12px; margin:0; background:url("img/bullet-li.gif") no-repeat 0 9px; }

/* ----------- Navigation ----------- */

body div#navigation
{
 font-family:"Courier New", Courier, monospace;
 font-size:16px;
 float:left;
 width:360px;
 position:absolute;
 top:240px;
}

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

#navigation li
{
 padding:8px 0 14px 20px; margin:0; background:none; position:relative;
 background:url("img/nav-line.gif") repeat-x 0 70%;
 position:relative;
}

#navigation li a
{
 display:block;
 text-decoration:none;
}

#navigation li ul
{
 position:absolute; display:inline;
 top:27px; right:0;
}
 
 #navigation li ul li
{
 line-height:14px;
 padding:0; margin:0 0 0 5px;
 background:none;
 display:inline;
}

#navigation li ul li 
{ font-family:Verdana, sans-serif;  font-size:12px;}

#navigation li ul li span
{
 background:#f5f5f5;
 border:1px solid #777777;
 padding:3px 5px 3px 5px;
 display:inline-block;
}

#navigation li ul li a
{
 background:#b71234;
 border:1px solid #b71234;
 padding:3px 5px 3px 5px;
 color:#FFFFFF;
 display:inline-block;
}

/* ----------- Content ----------- */
body div#content
{
 width:550px;
 height:400px;
 border:1px solid #CECECE;
 background:#ffffff url("img/red-dot.gif") no-repeat 480px 30px;
 margin:auto;
 margin-left:360px;
 overflow:auto;
 padding:100px 40px 0 18px;
 line-height:1.4em;
 position:relative;
}

div.image-foto { position:absolute; top:110px; width:360px; text-align:right; }

div.image-foto img { margin-left:5px; float:right; }

/* ----------- Inhalts-Elemente ----------- */
h2#header { position:absolute; top:10px; left:20px; }

h4#copy { margin:0; padding:0; margin-left:360px; width:608px; text-align:right; }

.outro, .intro { color:#b71234; }
.intro { padding-bottom:8px; }
.outro { padding-top:8px; padding-bottom:32px; }

/* ----------- Index ----------- */
body#index div#content
{ background:#ffffff url("img/kreis-rot.gif") no-repeat 90% 100px; }

body#index div#content h1, body#index div#content h2 { margin:0; padding:0; position:relative; }

body#index div#content h2 { padding-top:60px; }
body#index div#content h1 { margin-top:184px; font-size:32px; }

/* ----------- Kontakt ----------- */
p.semantic-coding a{ display:block; background:url("img/logo_wf.gif") no-repeat 0 0; padding:5px 0 4px 25px; color:#333333 !important; }
p.semantic-coding a:hover{ background-position:0 -25px; }