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

CONTACT:
wilhelmine@semantic-coding.net
http://www.semantic-coding.net
Juni 2006

last modified: 30/06/2009
*/

/* --------------------------------------*/
/* ------- allgemeine HTML-Elemente ------- */
body{
 font-family:Verdana; font-size:0.8em; margin:auto; padding:0; width:890px; background:#F9F9F8 url("img/site-bg.gif") repeat-y top center; position:relative;}

h1{ font-family:"Century Gothic", Verdana; background:#517b09 url("img/logo.jpg") no-repeat top right; height:102px; margin:0; padding:10px 0 0 16px; font-size:1.2em; font-weight:normal; color:#F0F5EB; border:1px solid #3F7F05; border-top:none; position:relative; }

h1 span{ position:absolute; left:-3000px;}
h1 strong{ color:#FFFFFF; display:block; padding-bottom:10px;}
h1 em { letter-spacing:0.02em; font-style:normal; }
h1 em.adr { font-size:0.9em; letter-spacing:0; }

h2{ font-family:"Century Gothic", Verdana; color:#8CC919; margin:0; padding:0; font-size:1.4em; text-align:center; font-weight:normal;}
h3{ font-family:"Century Gothic", Verdana; color:#8CC919; }
p{ margin:4px 0 4px 0; padding:0;}
cite{ color:#3F7F05; display:block; font-size:1.2em; font-style:normal; text-align:center;}strong{ font-weight:bold; }
em{ font-style:italic; }
abbr{ border-bottom:1px dotted; cursor:help;}

a{ color:#000000; cursor:pointer;}
a:visited{ color:#3F7F05; }
a:hover, li a:hover .ci{ color:#F56438 !important; }

a img{ border:none; }
li{ list-style-image:url("img/bullet.gif"); }

/* ------- allgemeine Klassen und IDs ------- */
.ci{ font-family:"Century Gothic", Verdana !important; color:#8CC919 !important; font-style:normal !important; }
.ci em{ font-style:normal; }
a .ci{ text-decoration:underline; }
a:hover .ci{ color:#F56438; }
.important, .footnote{ text-align:center; margin:16px 17% 16px 17%; }
.footnote{ font-size:0.9em; }
.back-link{ padding:10px 0 10px 8px; background:url("img/bullet-back.gif") no-repeat 0 50%; display:block; }

p.back-link { padding:0; margin:8px 0 8px 0; background:none; }
p.back-link a { padding:2px 0 2px 8px; background:url("img/bullet-back.gif") no-repeat 0 50%; display:block; }
/* ------- navigation ------- */
div#nav{ position:absolute; top:6.66em; left:0; color:#8CC919; font-family:"Century Gothic", Verdana; font-weight:bold; font-size:1.2em; padding-top:20px; background:url("img/gradient-top.gif") repeat-x top; width:890px; text-align:center;}
div#nav ul{ list-style:none; margin:0; padding:0;}
div#nav li{ display:inline; margin:0 41px 0 41px; padding:0; line-height:1.2em;}
div#nav a{ color:#8CC919; font-weight:normal;}

/* ------- content ------- */
div#content{ position:relative; margin:5.5em 24px 60px 24px;}

/* ------- index.html ------- */
#index div#content { height:530px; background:url("img/idx_bg.jpg") no-repeat 50% 0; margin-top:30px; }
#index h2 { text-align:center; }
#index h2 strong { font-weight:normal; }
#index div#content ul.vcard { position:absolute; left:-3000px; }

#design{position:absolute; bottom:0; right:8px; }
#design a{background:url("img/logo_wf.gif") no-repeat center left; padding:10px 0 10px 25px; color:#BBBBBB;}
#design a:hover{background:url("img/logo_wf_hover.gif") no-repeat center left; color:#666666;}

#index #gruenfinger
{
 position:absolute;
 width:890px; height:174px;
 left:-24px; top:101px;
 margin:0; padding:0;
 background:url("img/idx-badge_gruenfinger.jpg") no-repeat 50% 50%;
}

#index #gruenfinger h2,
#index #gruenfinger h3
{ color:#000000; text-align:left; margin:0; padding:0; margin-left:240px; font-weight:bold; font-size:28px; }

#index #gruenfinger h3 { font-weight:normal; font-size:20px; margin-top:80px; }

#index #karenz
{
 position:absolute;
 width:890px; height:195px;
 left:-24px; top:120px;
 margin:0; padding:0;
 background:url("img/idx-badge_karenz.jpg") no-repeat 50% 50%;
 font-weight:bold;
}

#index #karenz h2, #index #karenz h3 
{ padding:0 40px 0 40px; color:#FFFFFF; text-align:left; }

#index #karenz h2 { font-size:1.6em; background:#8CC919; margin-top:30px;}
#index #karenz h3 { font-size:1.5em; font-weight:normal; padding-right:100px; color:#000000; }

/* ------- aktuell.html ------- */
#aktuell #monats-tipps
{
 background:#EAFFBF;
 width:250px;
 float:left; 
 position:relative; 
 border:1px solid #D3F78C; 
 padding:10px 4px 10px 4px; 
 margin-bottom:20px;
}

#aktuell #monats-tipps h2{ float:right; }
#aktuell #monats-tipps ul{margin:0 0 0 10px; padding:0;}
#aktuell #monats-tipps li{ padding-bottom:12px;}
#aktuell #monats-tipps li { list-style:none; }
#aktuell #monats-tipps li li { list-style:disc; margin:4px; padding:0; }
#aktuell #monats-tipps li h3{ background:url("img/bullet-leave.gif") no-repeat 0 50%; display:inline-block; margin:0; padding:1px 0 3px 26px; }
#aktuell #monats-artikel,#aktuell #monats-boxen{ margin-left:280px; }#aktuell #monats-artikel{ margin-bottom:30px; }
#aktuell #monats-boxen{ position:relative; }
#aktuell #monats-boxen div{ background:#EAFFBF; width:260px; min-height:196px; padding:4px; margin:0; border:1px solid #D3F78C; position:absolute; left:290px; top:0; }
#aktuell #monats-boxen .monats-foto{ position:static; }

/* ------- portrait.html ------- */
#curriculum li{padding:0 0 8px 6em; text-align:left; position:relative;}
#curriculum li span{width:6em; position:absolute;top:0; left:0;}

/* ------- kontakt.html ------- */
#kontakt #content{text-align:left; position:relative;}
/*form{ width:340px; height:255px; margin-left:140px;} ohne banner*/
form{ width:340px; height:255px; margin-left:250px;}
form ul{ margin:0; padding:0; text-align:center;}
form ul li{ margin:4px 0 4px 0; padding:0; list-style:none; list-style-image:none; }
form input, form textarea{ font-family:Verdana, sans-serif; font-size:1em; font-style:italic; color:#B6B6B6; padding:1px; border:1px solid #434343; width:20em; }
form input.button{ color:#616161; font-style:normal; cursor:pointer; width:16em; margin-top:7px; }

/*#kontakt #content p, #kontakt ul.vcard { position:absolute; top:0; right:140px; width:220px; } ohne banner */
#kontakt #content p, #kontakt ul.vcard { position:absolute; top:0; right:40px; width:220px; }
#kontakt #content p { color:#555555; }
ul.vcard { margin:0; margin-top:8em; padding:0; }
ul.vcard li { list-style:none; list-style-image:none; }

.disclaimer{ position:relative; margin-top:4em; color:#707070; }
.disclaimer a { color:#575757; }
#kontakt #content .disclaimer p { width:840px; position:relative; margin:6px 0 6px 0; padding:0; right:0; color:#707070; }

.error
{
 background:#FFF6C2 url("img/bullet-alert.gif") no-repeat center left; padding:4px 4px 4px 49px;
 line-height:33px;
 border:1px solid #CC550A;
 margin-bottom:20px;
}

.success
{
 background:#E7F4C1 url("img/bullet-success.gif") no-repeat center left; padding:4px 4px 4px 49px;
 line-height:33px;
 border:1px solid #3F8120;
 margin-bottom:20px;
}

/* ------- portfolio.html ------- */
#portfolio div#content{ padding-left:240px; background:url("img/portfolio.jpg") no-repeat 0 0; height:455px;}
#portfolio h2{ text-align:left; }
#portfolio div#content ul{ margin:10px 0 30px 8px; padding:0; }
#portfolio div#content ul li{ margin-bottom:12px; color:#434343; font-style:italic;}
#portfolio div#content ul li span, #portfolio div#content ul li a{ display:block; font-style:normal; }
#portfolio div#content ul li span{ color:#000000; }
#pf-detail #content #project-facts{ background: url("img/portfolio/portfolio_bg.gif") no-repeat center top; padding:80px 20px 0 60px; margin:0; height:608px; overflow:hidden; position:relative;}
#pf-detail #content img{ position:absolute; top:90px; right:20px;}

/* ------- service.html ------- */
ul.service-sub li { margin:0 0 10px 0; }

ul.service-sub { margin-bottom:3em; }

ul.service-sub li li, ul.service-sub span
{
 color:#434343;
 font-family:Verdana;
 margin:0;
}

div.anfrage
{
 margin:3em 0 0 25px;
 padding:10px 0 10px 42px;
 background:url("img/anfrage-pfeil.gif") no-repeat 0 50%;
 display:inline-block;
}

div.feedback
{ 
 width:560px;
 color:#333333;
 background:#FBFBFB url("img/quotes.gif") repeat-y 0 0;
 font-family:"Century Gothic";
 font-size:1.05em;
 margin:auto;
 margin-bottom:20px;
}

div.fb-even
{ background:#FBFBFB url("img/quotes-right.gif") repeat-y 0 0; }

div.feedback p
{
 padding:16px 16px 0 16px;
 margin:0 0 0 46px;
}

div.fb-even p { margin:0 46px 0 0; }

div.feedback p.fb-author
{
 text-align:right;
 padding:10px 16px 20px 0;
 margin:0 0 0 30px;
 background:url("img/fb-verlauf.gif") repeat-x 0 100%;
 font-style:italic;
 border-right:none;
}

div.fb-even p.fb-author
{ margin:0 30px 0 0; }