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

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

last modified: 27/02/2009
*/

/*
Gelb: #F6DE60; (html)
Gruen: #82AC4E (h1)
Hellblau: #5F81A1
duenkler Blau: #283E62 (h2, body-border, nav-border-top)
Dunkelblau: #042447 (h1)
*/

/* -------- Allgemeine Elemente -------- */
html { background:#F6DE60 url("img/html-bg.gif") repeat 50% 120px; }

body
{
 width:650px;
 margin:auto; margin-bottom:40px;
 border:1px solid #283E62;
 border-top:none;
 font-family:Verdana, Helvetica, Arial, sans-serif;
 font-size:13px;
 position:relative;
 line-height:1.4em;
 padding:0 20px 40px 170px;
 background:#FFFFFF url("img/lines.gif") repeat-y 0 0;
}

h1
{
 margin:0;
 color:#042447;
 font-weight:normal;
 font-size:28px;
}

h1, h2 { font-weight:bold; margin:0; }

h2
{
 font-size:19px;
 color:#82AC4E;
 background:url("img/bullet-h2.gif") no-repeat 0 4px;
 padding:16px 0 18px 70px;
}

h3
{
 font-size:15px;
 color:#283E62;
 background:url("img/bullet-h3.gif") no-repeat 0 0;
 padding:16px 0 2px 40px;
}

h4 { font-size:12px; margin:10px 0 0 0; }

a { color:#283E62; }
a:hover { color:#4b6e8f; }
a img { border:none; }
strong { color:#283E62; }
p { margin:6px 0 8px 0; padding:0; }

img { border:1px solid #6e6e6e; }

/* -------- Off-Left -------- */
#clip h1 em,
ul.vcard .fn,
ul.vcard .org,
ul.vcard .url,
#navigation em
{ position:absolute; left:-9999px; }

/* -------- Lasche -------- */
#clip
{
 padding-top:20px;
 height:160px;
 background:url("img/clip.gif") no-repeat 0 6px;
 margin-left:-170px;
}

#clip h1
{ 
 background:url("img/logo_kreathek.gif") no-repeat 0 50%;
 height:100px;
 margin-left:20px;
 width:360px;
}

#clip h1 a
{
 display:block;
 height:100px;
 background:url("img/h1-kreathek.gif") no-repeat 70px 50%;
}

/* -------- Inhalt -------- */
#content
{
 margin:0 40px 0 40px;
 position:relative;
 min-height:547px;
}

#content ul#content-nav { margin:30px 0 0 0; padding:10px; text-align:center; }

#content ul#content-nav li
{
 margin:0 10px 0 10px;
 list-style:none;
 display:inline;
 border:2px solid #82AC4E;
 padding:8px;
 color:#042447;
 background:#5F81A1;
}

#content ul#content-nav li a { padding:2px; }

#content p.footnote { text-align:right; color:#747474; }
#content p.footnote em { display:block; }

/* -------- Navigation -------- */
#navigation
{
 background:#FFFFFF;
 position:absolute;
 left:0;
 top:180px;
 width:162px;
 border-top: 1px solid #283E62;
 border-bottom: 1px solid #283E62;
}

#navigation ul
{
 list-style:none;
 margin:0;
 padding:0 0 106px 0;
 text-align:center;
 background:#ECECEC url("img/nav-bg.gif") repeat-x 0 0;
}

#navigation li
{
 margin:0;
 padding:18px 0 18px 0;
 background:url("img/nav-neutral.gif") no-repeat 50% 50%;
}

#navigation li.home { background-image:url("img/nav-home_current.gif") !important; }
#navigation li.blog { background-image:url("img/nav-blog_current.gif") !important; }
#navigation li.kurse { background-image:url("img/nav-kurse_current.gif") !important; }
#navigation li.service { background-image:url("img/nav-service_current.gif") !important; }
#navigation li.atelier { background-image:url("img/nav-atelier_current.gif") !important; }
#navigation li.impressum { background-image:url("img/nav-impressum_current.gif") !important; }

#navigation li#home { background-image:url("img/nav-home.gif"); }
#navigation li#blog { background-image:url("img/nav-blog.gif"); }
#navigation li#kurse { background-image:url("img/nav-kurse.gif"); }
#navigation li#service { background-image:url("img/nav-service.gif"); }
#navigation li#atelier { background-image:url("img/nav-atelier.gif"); }
#navigation li#impressum { background-image:url("img/nav-impressum.gif"); }

#navigation a,
#navigation span
{
 text-decoration:none;
 font-size:14px;
 padding:20px;
 display:block;
 margin:0 24px 0 24px;
}

/* -------- Vcard -------- */
ul.vcard
{
 list-style:none;
 margin:0;
 padding:0;
 position:absolute;
 right:20px;
 top:30px;
 font-size:11px;
 text-align:right;
 color:#042447;
}

/* -------- Impressums-Link -------- */
p.semantic-coding { }
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; }

/* -------- Startseiten-News -------- */
ul.latest-news
{
 list-style:none;
 margin:0 0 12px 0; padding:0;
}

ul.latest-news li
{ border-bottom:1px solid #CCCCCC; }

ul.latest-news li li
{ border-bottom:none; }

ul.latest-news h3
{
 display:inline-block;
 background-position:100% 0;
 padding:18px 22px 2px 0;
 margin:0;
}

ul.latest-news span
{ display:block; }

ul.latest-news a {text-decoration:none; display:block; text-align:right; }
ul.latest-news a:hover {text-decoration:underline;}