/*Stylesheet Homepage Vorlage dreispaltig */
body {
    background-color:#FF2A00   ; /*Hintergrundfarbe */
    color: black; /* Schriftfarbe */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    padding: 10px;
    border: none;
    margin: 0px;
}
.dropcap span {    /* Initial Buchstabe gestalten */
    float: left;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 400%;
    line-height: 5;
    line-height: 0.5;
    text-transform: uppercase;    /* immer als Großbuchstabe darstellen */
    margin-right: 5px;
}
div#wrapper {
    position: relative; 
    background-color: #336666; 
    color: black;
    width: 95%; 
    min-width: 720px;
    min-height: 100em;
    padding: 20px 20px 5px 20px;
    border: 5px inset #336666;
    margin: 0px auto;
}

div#kopfbereich {           /*banner */
    position: relative;
    background-color: #336666;
    color: black;
    padding: 0px 0px 0px 0px;
    border: 0px outset #b1d8f5;
}
div#navibereich {
    float: left;
    width: 13em;
    background-color: #336666;
    padding:10px;
    border: 5px outset #b1d8f5;
    margin: 5px;
 
}
#navibereich ul { 
   border: none;
}
#navibereich li {
    display: block;
    list-style-type: none;
    text-align:  center;
    font-size: large;
    border: 5px outset #336666;
    margin: ;
}
#navibereich li ul {     /* 2.Ebene */
    font-size: 90%;

    
    margin: ;
}
#navibereich li li { /* 2.Ebene */  
    background-color:   #336666;  
    text-align: right;                
    padding-left: 15px;
    border : 1px outset #336666;  
    border-left: none;  
    
}
#navibereich a,
#navibereich strong {
    display: block; /* ganze Fläche anklickbar machen */
    font-weight: normal;
    text-decoration:  none;
    background-color: #336666;
    color: black;
    padding: 15px;   /* Kästchen-Abstand */
    border: 3px #336666;
    border-left:18px; 
    
}
#navibereich a:hover, /* Hyperlink unter dem Mauszeiger */
#navibereich a:focus /* Hyperlink per Tastatur aktiviert */
{   background-color: #b1d8f5;
    color: #FF2A00;
    
}
#navibereich li li a,
#navibereich li li strong {   /* 2. Ebene*/
    background-color: #b1d8f5;
    color: black;
    font-size:  90%;
    padding:10px 10px 10px 10px;
    border-top:5px inset #b1d8f5;
    border-bottom: 5px outset #b1d8f5;
   
    margin-left: 15px;
}
#startseite #navi01 strong,
#ueberuns #navi02 strong,
#dorie #navi03 strong,
#claire #navi04 strong,
#jose #navi05 strong,
#atilla #navi06 strong,
#wurfplanung #navi07 strong,
#welpen #navi08 strong,
#welpen-woche1 #navi0801 strong,
#welpen-woche2 #navi0802 strong,
#welpen-woche3 #navi0803 strong,
#welpen-woche4 #navi0804 strong,
#welpen-woche5 #navi0805 strong,
#welpen-woche6 #navi0806 strong,
#welpen-woche7 #navi0807 strong,
#welpen-woche8 #navi0808 strong,
#welpen-woche9 #navi0809 strong,
#welpen-woche10 #navi0810 strong,
#nachzucht #navi09 strong,
#wurf-2007 #navi0901 strong,
#wurf-2009 #navi0902 strong,
#wurf-2012 #navi0903 strong,
#wurf-2015 #navi0904 strong,
#wurf-2018 #navi0905 strong,
#wurf-2020 #navi0906 strong,
#deckrueden #navi10 strong,
#unvergessen #navi11 strong,
#aktuelles #navi12 strong,
#gaestebuch #navi13 strong,
#links #navi14 strong,
#kontakt #navi15 strong,
#impressum #navi16 strong  /* aktuellen Navigationspunkt optisch hervorheben */
{   background: #b1d8f5 url(pfote1.gif)  no-repeat left 50%;
    color: #ff2a00;
    border-bottom: none;
}

#welpen-woche1 #navi0801 a,
#welpen-woche2 #navi0802 a,
#wurf-2007 #navi0901 a,
#wurf-2009 #navi0902 a {  /* Menüpunkt auch hervorheben */
    background-color: #b1d8f5 ;    
    color: #FF2A00;   
           
}

 #navibereich a:active {  /* Hyperlink im Moment des Klicks*/
    color: #336666;
    background-color: transparent;
    border-bottom: none;
}

#counterbox {}


div#textbereich {
    background-color: #b1d8f5 ;
    
    padding: 10px;
    border:  5px  outset #006666  ;
    margin-top: 10px;
    margin-left: 17em;        /*vorher 200px */
    margin-right: 19em; 
    margin-bottom: 10px; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial,
        Helvetica, sans-serif;

}

div#sidebar {
    float: right;
    top: 0;
    right: 0;
    width: 200px;
    background-color: #336666;
    padding: 10px;
    border: 5px inset #b1d8f5;
    margin: 5px;
}
div.galerie-links {
    overflow: hidden; /* zum Einschließen der Floats */
    padding: 10px 10px 10px 10px;
    margin: 0 3px 3px 0;
}
div.galerie-links img {
    float:left;
    padding: 4px;
    border: 2px  dashed #FF2A00;
    margin-right: 10px;
    margin-bottom: 10px; 
} 
div.galerie-rechts{
    overflow: hidden; /* zum Einschließen der Floats */
    padding: 25px 10px 10px 0;
    margin: 0 3px 3px 0;
}
div.galerie-rechts img {
    float:right;
    padding: 4px;
    border: 2px solid #006666;
    margin-right: 10px; 
    margin-bottom: 10px;
}
 
div#fussbereich {
    clear: both;
    color: black;
    padding: 10px 20px 0px 20px; /* unterhalb Rahmenlinie */
    border-top: 10px; /* Linie oben */

}
img#logo {
    background-color: white;
    padding: 10px;
    border: 10px solid #ff2a00;
}
h1 { font-size: 300%;
    text-align: center;
    padding-top: 20px;}


h2 { font-size: 160%}
h3 { font-size: 110%;}

.bildlinks {
    float: left;
    text-align: center;
    padding: 3px;
    margin-right: 10px;
    margin-bottom: 10px;
}
span.bildtext {
    display: block;
    font-size: 85%;
    margin-top: 4px;
}
.bildrechts {
    float: right;
    text-align: center;
    padding: 20px 20px 10px 10px;
    border: ;
    margin-bottom: 0.5px;
    margin-left: 10px;
}

.tabellerechts {
    float: right;
    text-align: center;
    padding: 5px 10px 10px 10px;
    border : 5px 10px 10px 10px;
}
.tabellelinks {
    float: left;
    text-align: center;
    padding: 5px 20px 10px 30px;
    border : 5px 10px 20px 10px;

}
.tabellemitte {
    
    text-align: center;
    padding: 5px 20px 10px 30px;
    border : 5px 10px 20px 10px;

}
address {
    text-align: center;   /* zentrieren */
    font-size: 80%;  /* etwas kleiner als der Rest */
    font-style: normal;
    letter-spacing: 2px; /*Abstand zwischen den Buchstaben */
    line-height: 1.5;   /* Zeilenabstand, ohne Einheit */
}
a {
    text-decoration: none; /*Unterstreichung entfernen */
 }
a:link { color: #006666;}
a:visited { color:#336666;}  /* Link-Farbe und Rand vom ASCD Logo */
a:hover,
a:focus { border-bottom: ;}
a:active {      /*Link im Moment des Anklickens */
    color: #b1d8f5;
    background-color: transparent;
}
div#textbereich a:hover,
div#textbereich a:focus { /* Link im Text untere Randfarbe*/
    border-bottom: 1px solid #b1d8f5;
}
/* Abstand nach unten  */
h2, h3, p, ul, ol { margin-bottom: 1em;}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul li h3 {
    line-height: 1;
    margin-top: 0;
}
/*Listenelemente relativ positionieren */
ul li {
    position: relative;
    min-height: 0;
    padding: 0;
    margin: 0;
}
/* Lücke für die Bilder schaffen */
ul li h3,
ul li p {
    padding-left: 260px;
}
/* Bilder in die Lücke schieben */
ul li img {
    position: absolute; /* Bezugspunkt ist li wg. position:relative */
    top: 0;
    left: 0;
}  

/* Verschachtelte Listen ohne Abstand */
ul ul { margin-bottom: 0;}

/* Abstand von links */
li { margin-left: 1em;}


table {
    background-color: #b1d8f5;
    border-collapse: collapse;   /*keine Zwischenräume zwischen den Zellen */
    color: black;
    border: 1px solid;
}
caption {
    font-size: 120%;
    font-weight: bold;
    background-color: #b1d8f5;
    color: black;
    text-align: center;
    padding: 1em;
    padding-left: 0;
}
thead {    /*Kopfleiste */
    background-color: #336666;
    font-size: ;

}
tfoot {     /* Fussleiste */
    background-color: #FFFF00;
    font-size: 80%;
    border-top: 1px solid #999;
}
td,th {
    text-align:  left;
    padding: 0.5em 1em;
    border: 0.5px solid black;
}
form {  /* Das Kontaktformular */
    background: #eee;
    width: 670px; /* Breite des Forumulars */
    padding: 20px;
    border: 1px solid #8c8c8c;
}
label {     /* Beschriftung auf eigener Zeile */
    display: block;
    cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#absender,
textarea {
    width: 300px;
    border: 1px solid #8c8c8c;
    margin-bottom: 1em;
}
input:focus,
textarea:focus {
    background-color: #d9d9d9;
}