@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: #000000; /*Schriftfarbe*/
	/*color: #8c8c8c; Hintergrundfarbe*/
	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: #000000;}
a:visited {color: #e71d1d;}
a:hover, a:focus {
	border-bottom: 1px  solid #000000; /*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 #e71d1d /*#88a61c*/;
	margin-right: 10px;
	margin-bottom: 10px;
}

.bildrechts {
	float:right;
	padding: 3px;
	border: 3px solid #e71d1d /*#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: #00000;
	/*background-image: url(wrapper_ilona.jpg);*/
	background-color: #FFFfff;
	width: 800px; /*Breite des Inhaltsbereichs*/
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}

#kopfbereich {
   color: #00000; 
   background: #FFFfff;
   padding: 10px 20px 0 20px; 
}
   #kopfbereich p {
      padding: 5px 0 5px 0; 
      margin-bottom: 0; /* war 1em */
   }
		
	#kopfbereich p span {
		color: #00000; /*Schriftfarbe*/
		}
	
#navibereich { 
   text-align: right;  /* rechtsbündig */
   color: #00000;
   background: #FFFfFf; 
   padding: 5px 10px 4px 10px;  
   border-bottom: 1px solid #000000;
} 
   #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: #D1D1D1; 
      padding: 4px 8px; 
      border: 1px solid #000000;
   }  
   #navibereich a:hover,
   #navibereich a:focus,
   #startseite #navi01 a, 
   #programm #navi02 a,
   #partner #navi03 a,
   #kontakt #navi04 a { 
      color: #e71d1d; 
      background-color: #FFFfFf; 
      border-bottom-color: #ffffff; /* Rahmenlinie dklgrau */ 
   }  
   #navibereich a:active { 
      color: #000000;
      background-color: #FFFfFf; 
   }  

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

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

#fussbereich {
	padding-top: 10px; /*unterhalb Rahmenlinie*/
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border-top: 1px solid #000000; /*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
=======================================================================================*/