/* =========================================================================
   Stylesheet für die Seiten der Buchhandlung LeseZeichen www.buchlesen.de
   Stand: September 2011
   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; 
}

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

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

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; }

span { color: #8b1a1a; }

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

 
/* ===== 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;
} 

===== */

	/* ====== 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 {						
		padding: 3px;
		text-align: center;
		font-size: 0.8em;
		color: black;
		background-color: #cdaa7d;
		border: 1px solid #000000;
}								/* == Hyperlinks als Button in Farbe content/text1 == */
                                /* == Link "Nach oben", HTML:  == */
                                /* == <li class="top"><a href="#kopf">Nach oben</a> == */

	.hell a {background-color: #d2b48c; }	 /* == Hyperlinks in Farbe text/text2 == */


	/* ===== 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 #navi105 a {
		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 {					/*in Farbe content */
		min-height: 250px;
		height: auto !important;
		height: 250px;
		margin: 0;
		padding: 10px;
		text-align: right;
		background-color: #cdaa7d;
	}   

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

	.text2r {					/*in Farbe text, heller als content */
		min-height: 250px;
		height: auto !important;
		height: 250px;
		margin: 0;
		padding: 10px;
		text-align: right;
		background-color: #d2b48c;
	}

	.text2l {					/*in Farbe text, heller als content */
		min-height: 250px;
		height: 250px;
		height: auto !important;
		margin: 0;
		padding: 10px;
		text-align: left;
		background-color: #d2b48c;
	}  

	.text1 {					/*in Farbe content */
		overflow: hidden;
		padding: 10px;
		background-color: #cdaa7d; 
	}

	.text2 {					/*in Farbe text, heller als content */
		overflow: hidden;
		padding: 10px;
		text-align: right;
		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;
}

#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;
	}

/* ========= 3. Besondere Styles für einzelne Seiten ===== */
	/* ===== 3.1 Kontaktformular Seite kontakt.html =====*/

#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.2 Formular Seite suche.html =====*/
	
#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;
}
	/* ===== 3.3 Iframe für Buchkatalog =====*/

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

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

	/* ===== 3.4 Definitionslisten Seiten link.html /tipp.html =====*/

#link dl,
#tipp dl { padding: 10px 0 20px 0; }         

#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; }

	/* ===== 3.5 Hyperlinkgestaltung Seite angebot.html =====*/

#suchen #content a,
#angebot #content a,                    
#impressum #content a  { 
	font-size: 105%;
	font-weight: bold;
}

	/* ===== 3.6 Gestaltung Textboxen Bestseller 1-3 Seite best.html =====*/

#box1, #box2, #box3 { width: 33%; }      

#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; }

	/* ===== Abstände Überschriften Startseite ===== */
.start1 { padding-top: 2em; }
.start2 { padding-top: 3em; }
.start3 {margin-bottom: 1.2em; }

.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;
}