/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #############################
** ######################################################################################################
** 
**  YAML Version: 2.5.2
**  css modified by peperoni werbeagentur / toni mamic
**
*/

/*-------------------------------------------------------------------
--- allgemeine styles ---
-------------------------------------------------------------------*/ 

/* Hiermit werden die Randabstaende und border aller HTML-Elemente auf Null gesetzt. Damit wird das       
** Aussehen der Webseite in unterschiedlichen Browsern vereinheitlicht. 
*/

* { margin:0; padding: 0; } 

/* Das zuruecksetzen der Innen- und Aussenabstaende verursacht zu kleine Selectboxen. Dies wird korrigiert */
option {padding-left: 0.4em}


html { height: 100% } 

body { 
 min-height: 101%;
/* Beseitigung des Rundungsfehlers bei Schriftgroessen im Opera sowie Standardformatierungen */
/* font-size: 100.01%; */
/* FIX: Verhindert, dass positionierte Elemente nicht verschoben werden when die Groesse des Browser Fensters geaendert wird. */
 position: relative; 
/* Vorgabe der Standardfarben und Textausrichtung*/     
 width : 100%;
 min-height : 101%;
 background:#fff;
 color: #000;        
 text-align: left; 
 font: normal 16px 'Lucida Grande', Tahoma, Georgia, sans-serif;
 } 
 
 
* html body { text-align: left;} /* text-align:center; wenn layout mittig (fuer ie)*/

h1,h2,h3,h4,h5,h6,p {
 font-size: 1em ;
 margin : 0;
 padding : 0;
 text-align:left;}

h2 { line-height: 1.25em;}
 
p {font-family: tahoma, verdana, sans-serif;}

ul, ol, li, dl, dd, dt {margin:0;}

pre {font-family: Courier New,Courier,monospace; color:red;}


/*-------------------------------------------------------------------
--- content-body ---
-------------------------------------------------------------------*/
#contbody { width: auto; margin:0;}


/*-------------------------------------------------------------------
--- HEADER ---
-------------------------------------------------------------------*/ 
#header {
 background: #ececec url(images/head_bg.jpg) top left repeat-x;
 width:100%;
 height:6.937em; 
 /*border-bottom:1px solid #898989 ;*/
}
* html #header { height: 112px; }
 

/*-------------------------------------------------------------------
--- HAUPTNAVIGATION ---
-------------------------------------------------------------------*/ 
#navigation { 
 position:absolute;
 top:4em;
 left:0em;
 z-index:10;
 }
/*-------------------------------------------------------------------
--- allgemeine linkstyles ---
-------------------------------------------------------------------*/ 
a:link,a:visited {
 text-decoration : none;
 color :#666;
 text-decoration : underline;
}
a:hover,a:active {
 text-decoration : underline;
 color :#f60;
}

#col3 p a {
 display:block; 
 font-size:.8em;
 line-height:1.5em;
}

/*-------------------------------------------------------------------
--- spalten ---

#seite definiert den inhaltsbereich ohne header und footer #seite umschliesst die content-spalten

-------------------------------------------------------------------*/
#seite {
 position:relative; /* wegen ie6 boxmodell*/
 top:3.5em;
 left:5em;
 margin:0;
 padding:0 0 3em 0; /* padding right collabiert mit dem ie7 boxmodell deshalb left:5em; */
 width:54em; 
 height:auto;
 color:#000;
 clear:both;
}

#col1 {
float: left;
width: 15em; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
}

.col2 {
float:right; 
width: 15em; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
}

#col3 {
width:auto;
/*border-left:.375em solid #efefef;*/
margin-left: 15em; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
margin-right: 15em; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden padding-top:2em;*/
}


/* Der z-Index verhindert, dass im Falle des noch bestehenden IE-Bugs die Texte vor 
** dem Spaltenhintergrund erscheinen. */
#col1 {z-index: 3; xbackground:#c00;}
#col2 {z-index: 5; xbackground:#f09;}
#col3 {z-index: 1; xbackground:#c00;}
#col1_inhalt {z-index: 4; xbackground:#0cf;}
#col2_inhalt {z-index: 6; xbackground:#f0c;}
#col3_inhalt {z-index: 2; xbackground:#fef;}

#col1_inhalt, #col2_inhalt, #col3_inhalt { position:relative; }

#seite #col1 {width:35em; }
#seite #col1 #col1_inhalt { padding: 0 1.5em 0 0;} /* abstand zur 2ten spalte */
#seite #col3 {margin-left:37em; margin-right:0;}


/*-------------------------------------------------------------------
--- 2spalte marginalspalte ---
-------------------------------------------------------------------*/

#col3_border { 
 padding:0;
 border-left-width:1px;
 border-left-style:solid;
 border-left-color: #ccc;
}



/*-------------------------------------------------------------------
--- Bildleiste (katipel quicknavi) ---
-------------------------------------------------------------------*/

#footer {
 margin-top:2em;
 clear: both;
 border-top:1px solid #ccc;
 width : 100%;
 height:auto;
 text-align:left;
 background:#fff  url(images/footer_verlauf.jpg) 0 1px   repeat-x;
}

#footer div {
 margin-top:0;
 padding:1em 0 3em 5em;
 height:auto;
}




/* ######################################################################################################
** ### Markupfreie CSS-Floatclearing-Loesungen ###########################################################
** ######################################################################################################
*/

/* Clearfix-Methode zum Clearen der Float-Umgebungen */
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}

/* Diese Angabe benoetigt der Safari-Browser zwingend !! */
.clearfix { display:block; } 

/* Overflow-Methode zum Clearen der Float-Umgebungen */
.floatbox { overflow:hidden; }

/* IE-Clearing: Benoetigt nur der Internet Explorer und ueber iehacks.css zugeschaltet */
#ie_clearing { display:none; }


/* ######################################################################################################
** ### Sprachumschalter ###########################################################
** ######################################################################################################
*/


#navigation ul.language {
   height:23px;
   left:710px;
   margin:0;
   padding:0;
   position:absolute;
   top:24px;
   width: 55px;
}
 
#navigation ul.language li a.de_button,
#navigation ul.language li a.en_button{
    text-indent: -9999px;
    padding: 0;
    width: 27px;
    height: 23px;
}

#navigation ul.language li a.de_button{
    background: transparent url(images/pebo_sprache_de_inaktiv.jpg) top left no-repeat;
}

#navigation ul.language li a.en_button{
    background: transparent url(images/pebo_sprache_en_inaktiv.jpg) top left no-repeat;
}

#navigation ul.language li a.de_button:hover {
    background: transparent url(images/pebo_sprache_de_rollover.jpg) top left no-repeat;
    border: none;
}

#navigation ul.language li a.en_button:hover {
    background: transparent url(images/pebo_sprache_en_rollover.jpg) top left no-repeat;
    border: none;
}

#navigation ul.language li.active a.de_button,
#navigation ul.language li.active a.de_button:hover {
    background: transparent url(images/pebo_sprache_de_aktiv.jpg) top left no-repeat;
    border: none;
    cursor: default;
}

#navigation ul.language li.active a.en_button,
#navigation ul.language li.active a.en_button:hover {
    background: transparent url(images/pebo_sprache_en_aktiv.jpg) top left no-repeat;
    border: none;
    cursor: default;
}