@charset "utf-8";
/*================================================================================
Stylesheet für die Übungsseiten aus dem Buch "Little Boxes"
Stand Ende Kap. 7 nach der Sortierung
Datei: bildschirm.css
Datum: 20.03.2009
Autor: Katja Exner
Aufbau: 1. Kalibrierung und allgemeine Styles
		2. Styles für Layoutbereiche
		3. Sonstige Styles
==================================================================================*/


/* ===============================================================================
	1. Kalibrierung und allgemeine Styles 
==================================================================================*/
/*Kalibrierung der wichtigsten Abstände*/
* {padding: 0; margin: 0;}

/*Abstand nach unten*/
h2, h3, p, ul, ol {margin-bottom: 1em;}
h3 {font-size: 110%;}

/*verschachtelte Listen ihne Abstand*/
ul ul {margin-bottom: 0;}

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

/*Allgemeine Selektoren*/
html {height: 101%;} /*erzwingt scrollbar im Firefox*/
body {/*Gestalte das HTML-Element mit dem Namen body*/
	color: #40403e; /*Schriftfarbe*/
	/*color: #8c8c8c; Hintergrundfarbe*/
	background-image: url(background_vier.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small; /*Schriftgröße*/
	
}

h1 { font-size: 150%;}
h2 { font-size: 130%;}

address {
	text-align: center; /*zentrieren*/
	font-size: 80%; /*etwas kleiner*/
	font-style: normal; /*mormale Schrift, nicht kursiv*/
	letter-spacing: 2px; /*Abstand zwischen den Buchstaben*/
	line-height: 1.5em; /*Zeilenabstand*/
}
/*Hyperlinks allgemein*/
a {
	text-decoration: none; /*Unterstreichung entfernen*/ 
	outline: none;
}
/*Achtung: Reihenfolge beachten!!!*/
a:link {color: #d9731a;}
a:visited {color: #d9731a;}
a:hover, a:focus {
	border-bottom: 1px  solid #88a61c; /*grüner Unterstrich*/
}
a:active {
	color: white;
	background-color: #88a61c;
}

/*Allgemeine Klassen und IDs*/
.clearing {clear: both;}

.bildlinks {
	float:left;
	padding: 3px;
	border: 3px solid #d98b2b /*#88a61c*/;
	margin-right: 10px;
	margin-bottom: 10px;
}

.bildrechts {
	float:right;
	padding: 3px;
	border: 3px solid #d98b2b /*#88a61c*/;
	margin-bottom: 10px;
	margin-left: 10px;
}

.clearing {clear: both;}

.skiplink {
	position: absolute;
	top: -2000px;
	left: -3000px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	display: inline;
}

#logo {
	padding: 10px;
	}

/*Styles für den Layoutbereich*/

#wrapper {/*Gestalte das HTML-Element mit der id="wrapper"*/
	color: #40403e;
	/*background-image: url(wrapper_ilona.jpg);*/
	background-color: #d9d3c1;
	width: 800px; /*Breite des Inhaltsbereichs*/
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}

#kopfbereich {
   color: #40403e; 
   background: #d9d3c1;
   padding: 10px 20px 0 20px; 
}
   #kopfbereich p {
      padding: 5px 0 5px 0; 
      margin-bottom: 0; /* war 1em */
   }
		
	#kopfbereich p span {
		color: #d90000; Schriftfarbe
		}
	
#navibereich { 
   text-align: right;  /* rechtsbündig */
   color: #40403e;
   background: #d9d3c1 url(farbverlauf.jpg) repeat-y top left; 
   padding: 5px 10px 4px 10px;  
   border-bottom: 1px solid #40403e;
} 
   #navibereich ul { margin-bottom: 0; } 
   #navibereich li { 
      display: inline;
      list-style-type: none; 
      list-style-position: inside;
      margin: 0 ; /* war vorher 10px für rechts */ 
   }
   #navibereich a { 
      color: #40403e; 
      background-color: #d98b2b; 
      padding: 4px 8px; 
      border: 1px solid #40403e;
   }  
   #navibereich a:hover,
   #navibereich a:focus,
   #startseite #navi01 a, 
   #programm #navi02 a,
   #termine #navi03 a,
   #presse #navi04 a,
   #musik #navi05 a,
   #lyrik #navi06 a,
   #video #navi07 a,
   #kontakt #navi08 a
    { 
      color: #40403e; 
      background-color: #d9d3c1; 
      border-bottom-color: #d9d3c1; /* Rahmenlinie dklgrau */ 
   }  
   #navibereich a:active { 
      color: #40403e;
      background-color: #d9d3c1; 
   }  

	
	
#textbereich {
	padding: 20px 10px 20px 20px;
}
	#textbereich a { /* betrifft nur die Hyperlinks im #textbereich*/
	border-bottom: 1px dotted #88a61c;
	}

	#textbereich a:hover,
	#textbereich a:focus {
	border-bottom: 1px solid #88a61c;
	}

#fussbereich {
	padding-top: 10px; /*unterhalb Rahmenlinie*/
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border-top: 1px solid #8c8c8c; /*Rahmenlinie oben, Farbe wie body*/
	margin-top: 20px; /*Außenabstand oben, oberhalb Linie*/
}

/*Die kleine Galerie*/
div.galerie {
	overflow: hidden; /*zum Umschließen der Floats*/
	padding: 25px 10px 10px 0;
	margin: 0 3px 3px 0;
}

div.galerie img {
	float: left;
	padding: 4px;
	border: 1px solid #ddd;
	border-right-color: #aaa;
	border-bottom-color: #aaa;
	margin-right: 15px;
	margin-bottom: 15px;
}

* html div.galerie {height: 1%;}

/*=====================================================================================
Ende des Stylesheets
=======================================================================================*/