/* =========================================================================
   Stylesheet für die Seiten der Buchhandlung LeseZeichen www.buchlesen.de
   Stand: September 2007
   Dateiname: screen.css

   Farbschema: rot/braun    
     #8b1a1a rot navi2
     #8b5a2b dunkelbraun header (kopf+navi1), fuss
        #FFA500 oder EE9A00 oder CD8500 oder 8B5A00 orange
     #d2b48c mittelbraun textcontainer
     #cdaa7d hellmittelbraun body
     #c0c0c0 grau Schrift (font), Ränder + Linien (border)

  Elementbeschreibung (Reihenfolge der Attribute):
   { clear: both; overflow: hidden;
     position: ; (top:; bottom:; left:;)
     float: ;
     text-align: ;
     width: ; 
     height: ;
     margin: ;
     padding: ;
     border: ;
     font: ;
     color: ;
     background-color: ;
     background-image: ;}
     
============================================================================= */


/* ===== 1. Kalibrierung und allgemeine Styles ===== */


   /* ===== 1.1. Kalibrierung Browser-Stylesheets ===== */


* { padding: 0; margin: 0; }

html { height: 101%; width: 100%; }


   /* ===== 1.2. Allgemeine Abstände und Positionen ===== */


body {
   height: 100%; width: 100%; 
   font-family: Verdana, Arial, Helvetica; 
   font-size: 95%; 
   color: black; 
   background-color: #cdaa7d; 
}

textarea, input { 
   font: 1em Verdana, Arial, Helvetica, monospace;
   cursor: pointer; 
   padding: 3px;
}


#kopf, #navi, #content, #fuss { font-size: 0.8em }

h1, h2, p, ul, ol { margin-bottom: 1em; }


h1 { font-size: 1.4em; font-weight: bold; }
h2 { font-size: 1.1em; }
h3 { font-size: 0.8em; }

li { margin-left: 1em; }
#best #rand li { margin-left: 0; }

/* ===== horizontale Linie rechts, HTML: <hr noshade="noshade" /> 

hr {                      
   width: 50%; 
   background: #000000;
   color: #000000; 
   border: #000000; 
   height: 1px;
}

.text1 hr {
    margin-left: 0;
    text-align: left;
}

.text2 hr {
    margin-right: 0;
    text-align: right;
} 

===== */

span { color: #8b1a1a; }

#kopf span, #navi span { color: #FF0000; }


.hell a {background-color: #d2b48c; } 
 

   /* ====== 1.3. Gestaltung der Hyperlinks und Formulare ===== */


a { text-decoration: none; outline: none; }

a:link, a:visited { color: #000000; }

a:hover, a:focus {
   border-bottom: 1px solid #000000;
}

a:active {
   color: #000000;
   background-color: #ffffff;
}


.top a {                       /* ===== Hyperlinks als Button in Farbe content ===== */
      padding: 3px;
      text-align: center;
      font-size: 0.8em;
      color: black;
      background-color: #cdaa7d;
      border: 1px solid #000000;
}

                                /* ===== Link "Nach oben", HTML:  ===== */
                                /* ===== <li class="top"><a href="#kopf">Nach oben</a> ===== */


   /* ===== 1.5. Gestaltung der Bilder und Grafiken ===== */


.bildlinks {
   float: left;
   padding: 10px 5px;
    
}

.bildrechts {
   float: right;
   padding: 10 px 5px; 
}

.cover {
   float: left;
   padding-right: 5px;  
}




/* ===== 2. Styles für die Layoutbereiche Kopf, Navigation, Content mit text und rand, Fuss ===== */


#kopf {
   text-align: right;
   margin: 5px 5px 0 5px;
   padding: 10px 20px 3px 20px; 
   border: 1px solid #c0c0c0;
   font-family: Courier New, Verdana, Arial, Helvetica;
   color: #ffffff;
   background-color: #8b5a2b;
   background-image: url(bilder/buchwand1.gif);
}

   #kopf h1 {
       font-size: 2.5em;
       font-weight: bold;
       margin-bottom: 0.2em;
}


   #kopf p {
       font-size: 1.8em;
       font-weight: bold;
       margin-bottom: 0.5em;
}

   #kopf ul { margin-bottom: 0; } 

   #kopf li {
       margin: 0;
       display: inline;
       list-style-type: none;
       font-family: Verdana, Arial, Helvetica;
       font-size: 0.9em;
}
   
   #kopf a,
   #kopf a:visited {
       color: #ffffff;
       padding: 5px; 
       border: 1px solid #c0c0c0;
       border-bottom: none;
}

   #kopf a:hover, 
   #kopf a:focus,
   #startseite  #navi101 a,
   #suche1  #navi102 a,
   #lesung #navi103 a,
   #kontakt  #navi104 a,
   #angebot #navi105a {
       color: black;
       background-color: #cdaa7d;
       border-bottom: 1px solid #cdaa7d;
}


#logo {
   width: 8em;
   height: 8em;
   padding: 2px;
   margin: 5px;
   margin-top: 20px;
   border: 2px solid #ffffff;
   color: black;
   background-color: #990000;
}

#navi {
   z-index: 4;
   position: absolute;
   top: 0;
   left: 0;
   width: 12em; 
   margin: 25px 12px;
   padding: 5px;
   text-align: center;
   color: #c0c0c0;
   background-color: #8b1a1a;
}
   

   #navi ul {
      margin-top: 2.5em;
      margin-bottom: 3em; 
}

   #navi li {
       list-style-type: none;
       margin-left: 0;
       padding-bottom: 4px;
}

   #navi a { 
       color: #c0c0c0;
       background-color: #8b1a1a;
}

   #navi a:hover,
   #navi a:focus {
       color: #ff0000;
       background-color: #8b1a1a;
       border-bottom: 1px solid #c0c0c0; 

}

   #quicksearch input { width: 120px;
    margin-bottom: 1em; }                /* === Feld Schnellsuche in der Navigation === */ 

   #startseite #navi201 a,
   #suche1 #navi202 a,
   #suche2 #navi202 a,
   #lesung #navi203 a,
   #kontakt #navi207 a,
   #tipp #navi204 a,
   #angebot #navi206 a,
   #best #navi209 a,
   #impressum #navi208 a,
   #link #navi205 a {
       font-weight: bold;
       border-bottom: 1px solid #c0c0c0;
}

   * html #navi { position: absolute; }

   * html #content { position: relative; }

   * html #text1 {height: 1%; }

   * html #fuss { position: relative; }        



#content {
   z-index: 2;
   position: relative;
   left: 14em;
   width: 80%;
   margin: 5px;
   color: black; 
   background-color: #cdaa7d; 
}


#text {
   float: left;
   width: 69%;
   margin: 0;
   padding: 0;
   color: black;
   background-color: #d2b48c;
}

#startseite #text, #impressum #text, #agb #text { 
   width: 58%;
}


#rand {
   float: right;
   overflow: hidden;
   width: 31%;
   color: black;
}


#startseite #rand, #impressum #rand, #agb #rand { width: 42%; }

 
.text1r {
   min-height: 250px;
   height: auto !important;
   height: 250px;
   margin: 0;
   padding: 10px;
   text-align: right;
   background-color: #cdaa7d;
}   


.text1l {
   min-height: 250px;
   height: auto !important;
   height: 250px;
   margin: 0;
   padding: 10px;
   text-align: left;
   background-color: #cdaa7d;
}   

.text2r {
   min-height: 250px;
   height: auto !important;
   height: 250px;
   margin: 0;
   padding: 10px;
   text-align: right;
   background-color: #d2b48c;
}

.text2l {
   min-height: 250px;
   height: 250px;
   height: auto !important;
   margin: 0;
   padding: 10px;
   text-align: left;
   background-color: #d2b48c;
}  

.linr {
   float: right;
   width: 50%;
   margin: -0.5em 0 0.5em 0;
   padding: 0;
   height: 1px;
}

.linl {
   float: left;
   width: 50%;
   margin: -0.5em 0 0.5em 0;
   padding: 0;
   height: 1px;
}

.clear { clear: both; }

.clr { clear: right; }

.cll { clear: left; }


hr {        
   background: #000000;
   color: #000000; 
   border: #000000; 
   height: 1px;
}


.text1 { 
   overflow: hidden;
   padding: 10px;
   background-color: #cdaa7d; 
}


.text2 {                       /*heller als content */
   overflow: hidden;
   padding: 10px;
   text-align: right;
   background-color: #d2b48c;          
}



#fuss {
   clear: both;
   bottom: 0; left: 0;
   width: 100%;
   border-top: 1px solid #ffffff;
   color: #000000; 
   background-color: #8b5a2b;
   background-image: url(bilder/buchwand1.gif);
}


#fuss a:hover, fuss a:focus { color: #ff0000; }

address {
   text-align: center;
   font-size: 0.8em;
   font-style: normal;
   font-weight: bold;
   line-height: 1.5em;
}

#copy { 
   float: right;
   margin: 10px 5px;
   padding: 2px;
   font-size: 0.8em;
   background-color: #c0c0c0;
}


#agb { 
   float: left;
   margin: 10px 5px;
   padding: 2px;
   font-size: 0.8em;
   background-color: #c0c0c0;
}

#formular { padding: 5px 0; }


#formular fieldset { border: none; }


#formular ol { list-style-type: none; }

#formular li { 
   padding-left: 3em; 
   padding-bottom: 0.3em; }

#formular li label {
    display: block;
    /* display: inline-block, -moz-inline-box; */
    width: 10em;
    float: left;
    vertical-align: middle;
    font-weight: bold;
}

#formular input { 
    padding: 2px; 
    }

#anrede, #vorname, #name, #strasse, #plz, #ort, #absender, 
#fon, #fax { 
   width: 25em;
   height: 1.2em;
}

#betreff { 
   width: 30em;
   height: 1.2em;
}

#vorname, #strasse, #plz, #ort, #fon, #fax, 
#betreff, #nachricht, #sent, #reset { 
   border: 1px solid #cdaa7d;
}

#name, #absender { border: 1px solid #8b1a1a; }

#nachricht { 
   width: 30.3em;
   height: 15.5em;
   vertical-align: top;
   padding: 2px;  
}


#sent, #reset {
   margin: 0.5em 1.5em 0 0; 
   border: 1px solid #000000;    
   background-color: #cdaa7d;
}  
   

/* ===== 3. Besondere Styles für einzelne Seiten ===== */


.start1 { padding-top: 2em; }

.start2 { padding-top: 3em; }

.start3 {margin-bottom: 1.2em; }


#buchkatalog {
  height: 600px;
  margin-left: 170px;
}


iframe {
   height: 99%;
   width: 100%;
   border: none; /* 1px solid #cdaa7d; */
}

#link dl,
#tipp dl { padding: 10px 0 20px 0; }         /* === Definitionslisten Seite link.html === */

#angebot dl { margin-bottom: 1em; }

#link dt,
#angebot dt {
     font-size: 110%;
     font-weight: bold;
     font-style: italic;
}

#tipp dt { 
     font-size: 105%;
     font-style: italic;     
 }
     
#tipp dd a {font-weight: bold;}

#link dd,
#tipp dd,
#angebot dd,
.platz1 dd,
#best #rand .top
    { padding-left: 3em; }

.platz2 dd
    { padding-right: 3em; }


#suchen #content a,
#angebot #content a,                     /* === Hyperlinkgestaltung Seite angebot.html === */
#impressum #content a  { 
   font-size: 105%;
   font-weight: bold;
}

#box1, #box2, #box3 { width: 33%; }      /* === Gestaltung Textboxen Bestseller 1-3 === */

#box1 { float: left; }

#box3 { float: right; }

#box2 { margin-left: 32%;
    margin-right: 32%;
    
 }

#topbox {
     min-height: 220px;
     height: auto !important;
     height: 220px;
     padding-right: 10%;
     padding-left: 10%;
}
  
 /* ===== 4. Klassen zur Absatzgestaltung ===== */


.zitat { 
     font-style: italic;
     font-size: 0.9em;
}


.links { text-align: left; }

.mitte { text-align: center; }

.rechts { text-align: right; }


.n {font-weight: normal; }

.b {font-weight: bold; }

.leer { 
      margin-bottom: 1em;
      padding-bottom: 0;
}

.leer2 { 
   margin-top: -1.3em;
   font-weight: bold;
   font-size: 1.1em;
 }

.leer3 { 
   margin-top: -2.5em;
 }

.unten { margin-bottom: 2.5em; }

.weit1 {margin-top: 1em; }

.weit { margin-top: 1.5em; }

.weit2 { margin-top: 2em; }

.weit3 { margin-top: 3em; }

.tipp li { 
       list-style-type: none; }


.tipp2 li {
       margin-left: 0;
       display: inline;
       list-style-type: none;
}

.autor, .titel { 
   font-size: 1.1em;
   font-weight: bold; 
} 

#best #rand .autor,
#best #rand .titel  { 
   font-size: 1em;
   font-weight: bold; 
} 


#tipp .autor
    { margin-top: 2em; }


.schnell {
    margin: 10px auto;
    padding: 20px 10px;
    text-align: left;
    background-color: #cdaa7d;
}

#suchen label { 
    display: -moz-inline-box;
    display: inline-block;
    width: 12em;
    font-weight: bold;
}

#suchen fieldset {
    margin-bottom: 1em;
    padding: 5px 10px 5px 3em;
}

#suchen fieldset input
    { width: 22em; }

#suchen fieldset legend {
     vertical-align: bottom;
     color: #000000;
}

#suchen fieldset p 
     { margin-top: 5px; }

#suchen #submit {
     width: 8em;
     font-size: 0.9em;
     color: #000000;
     background-color: #d2b48c;
}