/*

AUTHOR+COPYRIGHT:
Wilhelmine Freudenthal
Barrierefreies Webdesign / Semantischer Code

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

Mai 2006
last modified: 30/10/2009

*/

/* --------------------------------------*/
/* --- allgemeine HTML-Elemente --- */

body
{
 font-family:Verdana, sans-serif;
 font-size:0.8em;
 width:68%;
 margin:auto;
 padding-top:160px;
 position:relative;
 color:#2B2B2B;
 background:url("img/vcard.gif") no-repeat top left;
}

h1
{
 font-size:1.2em;
 border:1px dotted #DBDBDB;
 color:#125A75;
 margin:40px 0 0.2em 0;
 background:#F9F9F9 url("img/h-gradient.gif") repeat-x bottom left;
 padding:4px;
 clear:both;
}

#sidebar h1{ margin-bottom:0; }

h3
{
 font-size:1em;
 margin-bottom:0;
 padding:0;
 color:#82AF4A;
}

p{ margin:0.4em 0 0.4em 0; }

acronym, abbr{ cursor: help; border-bottom:1px dotted; }
strong{ font-weight:bold; }
em{ font-style:italic; }

a{ cursor: pointer; color:#82AF4A; }
a:hover{ color:#ACD27D; }

ul{ list-style:none; padding:0; margin:0; }
ul li{ padding:0; margin:0; }

/* --- Navigation --- */
#nav a{ color:#636363; }
#nav a:hover{ color:#B6B6B6; }
#nav
{
 color:#636363;
 text-transform:uppercase;
 position:absolute;
 top:14px;
 right:0;
 font-weight:bold;
}

#nav ul li
{
 display:inline;
 padding:4px;
 margin-right:10px;
 background-color:#FCFCFC !important;
 border:1px dotted #DBDBDB;
 line-height:34px;
}

#nav ul li.active
{
 padding-left:18px;
 font-weight:normal;
 background:url("img/active.gif") no-repeat center left;
}

/* --- Inhaltsbereich: content + sidebar --- */
#content{ width:40%;}
#content ul{ padding-left: 16px;}
#sidebar
{
 width:55%;
 position:absolute;
 top:5em;
 right:0;
 padding:0 0 40px 16px;
 background:#FFFFFF url("img/border-pattern.gif") repeat-y top left;
}

#sidebar h1{ margin-top:0; }

div.vorteile ul li, #content ul li
{
 display:list-item;
 padding-bottom:0.2em;
 list-style:url("img/bullet.gif") outside;
}

img.float-foto { float:left; margin-right:6px; }

/* --- image --- */
#butterfly-image, #ladybird-image, #bee-image, #ant-image, #stagbeetle-image
{ position:absolute;}

#butterfly-image{ top:36em; right:0; }
#ladybird-image{ position:fixed; bottom:0; right:0; z-index:0;}
#bee-image{ left:-10%; }
#ant-image{ left:0; }
#stagbeetle-image{ right:0; margin-top:40px;}

/* --- vcard --- */
ul.vcard
{
 font-size:0.9em;
 padding:10px 0 6px 0;
}

ul.vcard li.org { text-transform:uppercase; margin-bottom:0.6em;}
ul.vcard li.url { text-transform:none; }

div.vcard { position:absolute; left:-10000px; }

/* ::: index.html ::: */
#index h1{ background:none; border: none; margin:0 0 0.8em 0;}
#index #content{ width:64em; font-size:0.9em; height:19em; position:absolute; top:220px; }

#index div.index-box
{
 width:210px;
 border:1px dotted #DBDBDB;
 padding:10px 10px 0 10px;
 background:#F9F9F9 url("img/idx-gradient.gif") repeat-x bottom center;
 float:left; 
 position:relative;
}

#index div.center-box{ margin:0 12px 12px 12px; }
#index div.index-box p{ line-height:1.5em; min-height:12em; }

#index div.index-box a
{
 display:block;
 text-align:right;
 padding-bottom:14px;
}

/* ::: infos.html ::: */
div.vorteile ul
{
 padding:10px 22px 10px 22px;
 border:1px solid #F0F0F0;
 background:#FAFAFA url("img/vorteile-gradient.gif") repeat-x top center;
 z-index:10;
}

/* ::: projekte.html ::: */
#projekt-liste ul
{
 /*border:1px dotted #DBDBDB;
 border-top:none;
 background:#FAFAFA url("img/vorteile-gradient.gif") repeat-x top center;
 padding:10px 0 14px 10px;
 height:164px;
 display:block;
 margin-bottom:18px;*/
}

#projekt-liste ul li
{
 /*border:1px solid #999999;
 height:77px;
 width:57px;
 float:left;
 margin:1px 3% 1px 0;
 margin-bottom:10px;*/
}

/*#projekt-liste img{ border:none; }
#projekt-liste span{ position:absolute; left:-10000px; top:0px; }
#projekt-liste li.active{ border:none; margin:0 1.5% 0 0; width:69px; height:85px; }
*/
#projekt-liste a, #projekt-liste li
{
 /*display:block;
 height:77px;
 width:57px;
 background: url("img/projekte/projekte-std.gif") no-repeat center center;*/
}

/*#projekt-liste li a:hover{ background-position:100% 0% !important; }

#projekt-liste li.mellow a{ background: url("img/projekte/mellow-bw.gif") no-repeat 0% 0%;}
#projekt-liste li.mellow{ background: url("img/projekte/mellow-active.gif") no-repeat top center; }

#projekt-liste li.evident a{ background: url("img/projekte/evident-bw.gif") no-repeat 0% 0%;}
#projekt-liste li.evident{ background: url("img/projekte/evident-active.gif") no-repeat top center; }

#projekt-liste li.wko a{ background: url("img/projekte/wko-bw.gif") no-repeat 0% 0%;}
#projekt-liste li.wko{ background: url("img/projekte/wko-active.gif") no-repeat top center; }

#projekt-liste li.michaelhof a{ background: url("img/projekte/michaelhof-bw.gif") no-repeat 0% 0%;}
#projekt-liste li.michaelhof{ background: url("img/projekte/michaelhof-active.gif") no-repeat top center; }

#projekt-liste li.gartenpur a{ background: url("img/projekte/gartenpur-bw.gif") no-repeat 0% 0%;}
#projekt-liste li.gartenpur{ background: url("img/projekte/gartenpur-active.gif") no-repeat top center; }

#projekt-liste li.grenzoff a{ background: url("img/projekte/grenzoff-bw.gif") no-repeat 0% 0%;}
#projekt-liste li.grenzoff{ background: url("img/projekte/grenzoff-active.gif") no-repeat top center; }

#projekt-liste li.federspiel a{ background: url("img/projekte/federspiel-bw.gif") no-repeat 0% 0%;}
#projekt-liste li.federspiel{ background: url("img/projekte/federspiel-active.gif") no-repeat top center; }

#projekt-liste li.lm-cluster a{ background: url("img/projekte/lm-cluster-bw.gif") no-repeat 0% 0%;}
#projekt-liste li.lm-cluster{ background: url("img/projekte/lm-cluster-active.gif") no-repeat top center; }

#projekt-liste li.bewman a{ background: url("img/projekte/bewman-bw.gif") no-repeat 0% 0%;}
#projekt-liste li.bewman{ background: url("img/projekte/bewman-active.gif") no-repeat top center; }*/

/*div#active, div.inactive, div#projekt-liste{ clear:both; }
div#active ul, div.inactive ul{ position:relative;}
div#active li, div.inactive li{ width:100%; position:relative; padding:3px 0 3px 0; }
div#active li h1, div.inactive li h1{ width:220px; margin:40px 0 40px 170px !important; }
div#active li img, div.inactive li img{ position:absolute; left:0; top:0; }

div.inactive{ position:absolute; left:-10000px; top:0;}*/


ul#logo-liste,
ul#logo-liste li{ margin:0; padding:0; list-style:none; }

#logo-liste { text-align:center; width:100%; margin:16px 0 16px 0; }
#logo-liste li { display:inline; }
#logo-liste li img { border:1px solid #BBBBBB; margin:2px 1px 1px 1px; }

#projekt-liste li { line-height:1.8em; padding-left:8px; background:url("img/bullet.gif") no-repeat 0 2px; border-bottom:1px solid #CCCCCC; }
#projekt-liste li a { text-decoration:none; white-space:nowrap; }
#projekt-liste li img { border:none; display:inline-block; height:16px; width:16px; vertical-align:middle; } 

/* ::: kontakt.html ::: */
form{ position:relative; margin:1em 0 1em 0; }
form ul{ position:absolute; top:0; right:0; }
form ul li{ margin:4px 0 4px 0; list-style:none; }
form input, form textarea
{
 font-family:Verdana, sans-serif;
 font-size:1em;
 font-style:italic;
 color:#B6B6B6;
 padding:2px;
}

form input.button
{
 color:#616161;
 font-style:normal;
  cursor: pointer;
}