/* Online2do Stylesheets */

/* Hallo Marco, dieser Code setzt bei allen Elmenten auf der Site den Innen- und Außenabstand auf 0 */
* {
margin: 0;
padding: 0;
}

/* Body ist der sichbare bereich der Website. Die Schrift-Attribute werden auf andere Elemente vererbt */
body{
background:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
letter-spacing:0.005em;
text-align:center;
font-size:12px;
color:#444444;
}

/* Im Container befindet sich die Website */
#container{
margin-right:auto;
margin-left:auto;
width:1006px;
text-align:left;
}

/*--------------------------------NAVI-----------------------------------------------*/
#navi-top{
width:1006px;
height:42px;
margin:20px 0px 0px 0px;
}

#navi-top ul li{
display:inline;
list-style-position: inside;
list-style:none;
}

/* BUTTONS */
.btn-links a, #btn-links a:link, #btn-links a:visited{ display:block; float:left; width:168px; height:31px; text-align:center; background: url(images/bg-navi.png) 0px 0px no-repeat; font-size:16px; color:#fff; text-decoration: none; padding-top: 11px;}
.btn-mitte a, #btn-mitte a:link, #btn-mitte a:visited{ display:block; float:left; width:168px; height:31px; text-align:center; background: url(images/bg-navi.png) -168px 0px no-repeat; font-size:16px; color:#fff; text-decoration: none; padding-top: 11px;}
.btn-rechts a, #btn-rechts a:link, #btn-rechts a:visited{ display:block; float:left; width:166px; height:31px; text-align:center; background: url(images/bg-navi.png) -336px 0px no-repeat; font-size:16px; color:#fff; text-decoration: none; padding-top: 11px;}

/* BUTTONS (rollover) */
.btn-links a:hover{ display:block; float:left; width:168px; height:31px; text-align:center; background: url(images/bg-navi.png) 0px -84px no-repeat; font-size:16px; color:#444444; text-decoration: none; padding-top: 11px;}
.btn-mitte a:hover{ display:block; float:left; width:168px; height:31px; text-align:center; background: url(images/bg-navi.png) -168px -84px no-repeat; font-size:16px; color:#444444; text-decoration: none; padding-top: 11px;}
.btn-rechts a:hover{ display:block; float:left; width:166px; height:31px; text-align:center; background: url(images/bg-navi.png) -336px -84px no-repeat; font-size:16px; color:#444444; text-decoration: none; padding-top: 11px;}


/* BUTTONS (active) */
.btn-links-active a{ display:block; float:left; width:168px; height:31px; text-align:center; background: url(images/bg-navi.png) 0px -42px no-repeat; font-size:16px; color:#fff; text-decoration: none; padding-top: 11px;}
.btn-mitte-active a{ display:block; float:left; width:168px; height:31px; text-align:center; background: url(images/bg-navi.png) -168px -42px no-repeat; font-size:16px; color:#fff; text-decoration: none; padding-top: 11px;}
.btn-rechts-active a{ display:block; float:left; width:166px; height:31px; text-align:center; background: url(images/bg-navi.png) -336px -42px no-repeat; font-size:16px; color:#fff; text-decoration: none; padding-top: 11px;}

/* BUTTONS (active rollover) */
.btn-links-active a:hover{ display:block; float:left; width:168px; height:31px; text-align:center; background: url(images/bg-navi.png) 0px -42px no-repeat; font-size:16px; color:#fff; text-decoration: none; padding-top: 11px;}
.btn-mitte-active a:hover{ display:block; float:left; width:168px; height:31px; text-align:center; background: url(images/bg-navi.png) -168px -42px no-repeat; font-size:16px; color:#fff; text-decoration: none; padding-top: 11px;}
.btn-rechts-active a:hover{ display:block; float:left; width:166px; height:31px; text-align:center; background: url(images/bg-navi.png) -336px -42px no-repeat; font-size:16px; color:#fff; text-decoration: none; padding-top: 11px;}


/* ---------------------------NAVI ENDE------------------------------------------------- */


/*------------------------------CONTENT--------------------------------------------------*/

#content{
width:1006px;
margin:12px 0px 0px 0px;
}

/*---------------------------LINKE SPALTE------------------------------------------------*/
#content-left{
width:168px;
margin:0px 0px 0px 0px;
float:left;
}

/* Boxen in der linken und der rechten Spalte */
.box{
width:168px;
margin:0px 0px 10px 0px;
}

/* Oberer Abschluss der Box */
.box-header{
width:168px;
height:6px;
background:url(images/bg-boxheader.gif) no-repeat;
margin:0px 0px 0px 0px;
}

/* Boxinhalt */
.box-content{
width:160px;
border-left: #cccccc 1px solid;
border-right: #cccccc 1px solid;
padding:3px;
margin:0px 0px 0px 0px;
}

/* Unterer Abschluss der Box */
.box-footer{
width:168px;
height:6px;
background:url(images/bg-boxfooter.gif) no-repeat;
margin:0px 0px 0px 0px;
}

/* Abstände der Elemente in der Box */
.box-content img, .box-content p{
margin:10px 0px 0px 10px;
}

/* Styles für die Navigation (Liste) in der Box */
.box-content ul{
margin: 20px 0px 10px 10px;
}

.box-content ul li{
list-style:none;
font-size:14px;
line-height:25px;
}

.box-content ul li a{
text-decoration:none;
color:#444444;
display:block;
}


.box-content ul li a:hover{
text-decoration:none;
color:#000;
}

/* Aktivzustand der Navigationselemente in der Box */
.active {
text-decoration:none;
color:#e2007a;
}


/*--------------------HAUPTINHALT (des, wos wichtig is)-----------------------------*/
#maincontent{
width:574px;
float:left;
margin:0px 40px 0px 40px;
padding:0px 8px 0px 8px;
}



/*------------------------------ANIMAL-BOXEN---------------------------------------------*/

/* Das Element mit dem Leo-Hintergrund */
#animal-box-home{
width:574px;
background:url(images/bg-home_leo.png) no-repeat;
background-position:left bottom;
margin-top:36px;
}

/* Das Element mit dem Elefant-Hintergrund */
#animal-box-leistungen{
width:574px;
background:url(images/bg-leistungen_elefant.png) no-repeat;
background-position:left bottom;
margin-top:36px;
}

/* Das Element mit dem Nashorn-Hintergrund */
#animal-box-webseite{
width:574px;
background:url(images/bg-webseite_nashorn.png) no-repeat;
background-position:left bottom;
margin-top:36px;
}

/* Das Element mit dem Büffel-Hintergrund */
#animal-box-webshop{
width:574px;
background:url(images/bg-webshop_bueffel.png) no-repeat;
background-position:left bottom;
margin-top:36px;
}

/* Das Element mit dem Löwen-Hintergrund */
#animal-box-optimierung{
width:574px;
background:url(images/bg-optimierung_loewe.png) no-repeat;
background-position:left bottom;
margin-top:36px;
}

/* Das Element mit dem Giraffen-Hintergrund */
#animal-box-marketing{
width:574px;
background:url(images/bg-marketing_giraffe.png) no-repeat;
background-position:left bottom;
margin-top:36px;
}



/* Eigenschaften der Überschrift erster Ordnung */
h1{
color:#444;
font-size:18px;
font-weight:bold;
margin-bottom:20px;
}

/* Eigenschaften der Überschrift zweiter Ordnung */
h2{
color:#444;
font-size:14px;
font-weight:bold;
}

/* Eigenschaften der Überschrift dritter Ordnung */
h3{
color:#e10173;
font-size:13px;
font-weight:normal;
}

/* Eigenschaften des Absatztextes */
p{
margin-bottom:20px;
line-height:18px;
}

/* Eigenschaften der Links */
p a{
color:#444;
text-decoration:none;
font-weight:bold;
}

/* link rollover */
a:hover{
color:#e2007a;
}

h2 a{
color:#444;
text-decoration:none;
}

a img{
border:none;
}


/* Eigenschaften einer Standard-Tabelle */
table{
border:none;
margin-bottom:10px;
}

/* Eigenschaften einer Überschrift erster Ordnung auf Unterseiten */
.text h1{
margin-top:36px;
}

/*-------FORMULAR--------- */

/* Grafik im Kopfbereich */
.form-header{
width:574px;
height:7px;
background:url(images/form-header.png) no-repeat;
}  

/* Formulareigenschaften */
form{
width:544px;
padding:15px;
background:#f8f8f8;
}

form table{
margin-bottom:0px;
}

/* Abstände der Überschriften und Absätze */
form p, form h2, form h3{
margin-bottom:10px;
}

/* Grafik im Fußbereich */
.form-footer{
width:574px;
height:7px;
background:url(images/form-footer.png) no-repeat;
margin-bottom:25px;
} 


/* Boxen in der Hauptspalte (Referenzen) */
.longbox{
width:574px;
margin:0px 0px 10px 0px;
}

/* Oberer Abschluss der Box */
.longbox-header{
width:574px;
height:5px;
background:url(images/longbox-header.gif) no-repeat;
margin:0px 0px 0px 0px;
}

/* Boxinhalt */
.longbox-content{
width:552px;
border-left: #b1b3b4 1px solid;
border-right: #b1b3b4 1px solid;
padding:10px;
margin:0px 0px 0px 0px;
}

/* Unterer Abschluss der Box */
.longbox-footer{
width:574px;
height:5px;
background:url(images/longbox-footer.gif) no-repeat;
margin:0px 0px 0px 0px;
}

/* Abstände der Tabelle und des Absatzes in der Box */
.longbox-content table, .longbox-content p{
margin-bottom: 0px;
}

.longbox-content a, .longbox-content a:hover{
text-decoration:none;
}

/* Eigenschaften einer ungeordneten Liste */
ul{
list-style-position:inside;
list-style-image:url(images/ul-bullet.gif);
margin-bottom:20px;
}

ul li{
line-height:22px;
}

ul li a{
text-decoration:none;
color:#444;
}

.eng p{
margin-bottom:10px;
}

.eng p a{
font-weight:normal;
}

.normal{
font-weight:normal;
}



/*-----------------------------------------RECHTE SPALTE-----------------------------------*/

/* Inhalt Rechts */
#content-right{
width:168px;
margin:0px 0px 0px 0px;
float:right;
}

#wp-content-right{
width:168px;
margin:0px 0px 0px 0px;
float:right;
}
/* Eigenschaften des ToDo-Button-Containers */
#todo-button{
width:168px;
height:203px;
margin-bottom:10px;
}

/* Eigenschaften des Plenty-Button-Containers */
.plenty-button{
width:168px;
height:69px;
margin-bottom:10px;
}

/* Klasse für breite Banner 160px */
.broad img{
margin:0px;
}

/* Klasse für schmalere Banner 120px */
.narrow{
text-align:center;
}

.narrow img{
margin:0px;
}

/* Klasse für mehrere Banner in einer Box */
.multi img{
margin-bottom:6px;
}


/* Blog edits */
.widget{
list-style: none;
}

/*-----------------------------------------FUSSBEREICH----------------------------------------------*/
#footer{
width:1006px;
height:14px;
background:url(images/bg-footer.png) no-repeat;
clear:both;
margin-bottom:20px;
text-align:center;
padding:14px;
color: #fff;
}

#footer a{
color:#fff;
text-decoration:none;
}

#footer a:hover{
color:#000;
text-decoration:none;
}

/*-----------------------------------------TWIN_BUTTONS----------------------------------------------*/

.twin-grafik, .twin-foto{margin-top:5px}

/*.twin-online {display:block; width:154px; height:52px; background:url(images/button-online.png) no-repeat 0px 0px; }*/

.twin-grafik a {display:block; width:154px; height:52px; background:url(images/button-grafikdesign.png) no-repeat 0px -52px; }
.twin-grafik a:hover {display:block; width:154px; height:52px; background:url(images/button-grafikdesign.png) no-repeat 0px 0px; }

.twin-foto a {display:block; width:154px; height:52px; background:url(images/button-fotografie.png) no-repeat 0px -52px; }
.twin-foto a:hover {display:block; width:154px; height:52px; background:url(images/button-fotografie.png) no-repeat 0px 0px; }