
/*====================================================
CSS Stylesheet mit Hilfe von Little Box im Praxis
Beispiel angewendet
Stand: 18.11.2010
Author: Stefan Wippel
Aufbau: 1 Kalibirierung des Bildschirms
        2 Style für den Layoutbereich
		  3 Sonstige Styles
=====================================================*/

/*~~~~~~~~1 Kalibirierung des Bildschirms~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*Kalibrierung der wichtigsten Abstände*/
* {padding: 0; margin: 0;}

/* Abstand nach unten */
h2, p, ul, ol {margin-bottom: 1em;}

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

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

ul li {	list-style-type: circle;}


/*Allgemeine Selektoren*/
html { height: 101%} /*erzwingt bei Firefox eine Bildlaufleiste*/

body { /* Gestaltet das html- Element mit dem Namen body */
	color: white; /* Schriftfarbe */
	background-color: #8c8c8c; /* Hintergrundfarbe */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: small; /*Schriftgröße*/
   }

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


address {
	text-align: center; /* Text zentrieren*/
	font-size: 80%; /*Text etwas kleiner*/
	font-style: normal; /*normale Schrift nicht kursiv*/
	letter-spacing: 2px; /*Abstand zwischen den Buchstaben*/
	line-height: 1.5em; /*Zeilenabstand*/
	}

/*Hyperlink allgemein*/
a {text-decoration: none;} /*Hypelink unterstreichung weg*/

a:link {	color: #0C0C0C; }
a:visited {	color: #0C0C0C; }

a:hover, a:focus {
    color: White;
	background-color: #000;
 }

 a:active {
 	color: White;
	background-color: #000;
 }

 
/*Allgemeine Klassen und ID's*/ 

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

/*
#logo {
	color: #005FBB;
	background-color: #005FBB;
 }
*/

/*~~~~~~~~~~~~2 Styles für Layoutbereich~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#wrapper {
	/*Gestalte das html- element mit der id-wrapper */
	color: Black;
	background-color: #FFE1BB;
	width: 780px; /*Breite des Inhaltsbereichs */
	margin-top: 10px;
	margin-right: auto; /*Abstand rechts automatisch*/
	margin-bottom: 10px;
	margin-left: auto; /*Abstand links automatisch*/
}

#kopfbereich {
	color: Black;
	/*background-color: #FB8A00; /* Glau */
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	background-image: url(../lernen_Bilder/bg_titel.jpg);
}

	#kopfberreich p {
		padding: 5px 0 5px 0;
      margin-bottom: 0; /*war vorher 1em*/		
	}
	
#navibereich {
   text-align: right;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
  }
  #navibereich ul { margin-bottom: 0;}
  #navibereich li {
  	display: inline;
	list-style-type: none;
	margin: 0 10px 0 0; /*rechts 10px, sonst 0*/
  }
  #navibereich a {color:black;}
  #navibereich a:hover,
  #navibereich a:focus{
  	color: black;
	background-color: #f3c600;
  }
  #navibereich a:active {
  color: black;
  background-color: white; 
  }
#textbereich {
	height: 450px;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	background-image: url(../lernen_Bilder/bg_text.jpg);
	text-align: left;
	vertical-align: middle;
}
   	#textbereich p {
		text-align: justify;
   	}
		#textbereich h2 {
		   font-style: oblique;
			color: white;
			background: #FB8A00;
		}
		#textbereich a {
   	
	   }
      #textbereich a:hover,
      #textbereich a:focus {
	   
      }
		
#fussbereich {
	padding-top: 10px; /* unterhalb Rahmenlinie*/
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border-top: 1px solid #8c8c8c; /*Rahmenlinie oben*/
	margin-top: 20px; /*Außenabstand oben, oberhalb Linie*/
   }

     #fussbereich a {
	   color: black;
	   font-style: italic;
	   border-bottom: black;
	   background-color: transparent;
      }

/*=======================================
~~~~~~~~~-ende des stylesheet ~~~~~~~~~~~
=======================================*/

