/*stylesheet für das Übungsbeispiel*/
/*Datei: bildschirm.css*/
/*erstellt am 22.11.2013*/
/*Aufbau:
Style für die index.html*/

html {height: 101%;}   /*Scrollbar im Firefox erzwingen     */

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

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

/*linker Abstand von List*/
li {margin-left: 1em;

}

h1,h2         {
font-family: Verdana, sans-serif;
}

h1         {
        font-size: 150%;
		color: #f18e04;

        }

h2         {
        font-size: 130%;
        }

a         {
        text-decoration: none; /* Unterstreichung entfernen */
        }

/* normaler Link */
a:link {
        color: #B02B2C;
        }

a:visited {
        color: #FF0084; /* besuchter Link */
}

a:hover, a:focus {
        border-bottom: 1px solid #B02B2C; /* gezeigter Link*/
        }

a:active {
        color: white; /* aktiver Link */
        background-color: #B02B2C;
        }

.skiplink        {    /* skiplink ausblenden  */
        position: absolute;
        top: -2000px;
        left: -3000px;
        width: 0px;
        height: 0px;
        overflow: hidden;   /*Inhalt verstecken*/
        display: inline;     /*Inhalt wird nicht angezeigt + kein Platzhalter*/
                }


body        {
        font-size:        small;
        font-weight:        normal;
        font-family:        Verdana, Arial, Helvetica, sans-serif;
        color: white;/* Schriftfarbe */
        background-image: url(bilder/background.jpg);
        color: white;
        font-family: Verdana, Arial, Helvetica,        sans-serif;
        font-size: small; /* Schriftgröße */

        /*Margin = Rand/Abstand für oben, rechts, unten und links*/
        margin-top:        1.58em;
        margin-left:        8%;
        margin-right:        5%;
        margin-bottom:        1.58em;

        /* Innenabstand zwischen Elementinhalt und den vier Elementgrenzen oben, rechts, unten und links*/
        padding:        0;
        border:        0;   /*kein Rand*/
        width:        auto;
                /* end body box */
        }

#logo         {
        color: black;
        padding-top: 10px; /*ebenfalls weiß*/
		position: relative;
		width: 500px;
		height: 80px;
		top: -45px;
		padding-left: 50px;
		
		
        }


#wrapper        {
        color: black;
        /*background-color: #ffffff; *Background Fußbereich*/
        width: 1000px; /*feste Breite vom ganzen HTML-Dokument*/
        margin-top: 10px;
        margin-right: auto;    /*durch auto links und recht - zentriert Dokument*/
        margin-bottom: 10px;
        margin-left: auto;
        }

#kopfbereich        {
        color: black;
        /*background-color:#ffff99;*/
        padding: 10px 20px 0px 20px;        /*unterschiedliche Seiten: „³trouble!  */
        }

#kopfbereich p        {
        padding: 5px 0;
        margin-bottom: 0; /*war 1em*/
        }

#navibereich {

        font-family:arial, verdana, sans-serif;
        font-size:13px;
        text-align: right; /*rechtsbündiges Menü*/
        color: black;
        width:980px;
		        /*border-bottom:1px solid black ;*/
        padding: 5px 10px 4px 10px;
        /*background: #ffff99;*/
		margin: 0 0 0 -20px;
		position: absolute;
		top: 100px;

        }

#navibereich li        {
        display: inline; /*Horizontales Menü*/
        list-style-type: none; /*keine Aufzählungszeichen*/
        margin: 0 17px 0 0; /*rechts - Abstand Menü immer gleich breit*/
		font-size: 2em;
        }

#navibereich ul        {
        margin-bottom: 0;
        }

#navibereich a        {
        color: white; /*Schriftart Schwarz*/
        
        padding: 4px 8px;
        border: 0px solid #36393D; /*Rand um Menüpunkte*/
        }

#navibereich a:hover,
#navibereich a:focus
#startseite #navi01 a,
#kontaktseite #navi02 a { /*zeigt andere Farbe auf welchem Menüpunkt
ich mich befinde bzw. wenn ich über den Menüpunkt fahre mit der Maus-Hover-Effekt*/
        background-color:white;
		border-color: black;
        color: black;
        }

#navibereich a:active {
        color : black;
        background-color: white;
        }


#textbereich{
        padding: 20px 10px 0 30px;
        background-color:white;
        color:black;
		height: 615px;
		
		border-bottom-left-radius: 2px;
		border-bottom-right-radius: 2px;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
				}
				
#profil {
		position: relative;
		width: 300px;
		height: 615px;
		top: 0px;
		left: 600px;
		}
		
#text {
		position: relative;
		width: 500px;
		top: -500px;
		padding: 0 20px 0 0;
}


#textbereich li {
 
		margin-bottom: 10px;
	
}

#fussbereich{
        border-top: 0px solid #36393D;
        margin-top: 8px; /*über die Linie*/
        padding: 5px;
		text-align: center;
		background:white;
        }

form {
		background-color: #EEE;
		width: 370px;
		padding: 20px;
		border: 1px solid #36393D;
		}

label { /* Beschriftung in eigener Zeile */
		display: block;
		cursor: pointer; /* Handzeiger */
		}	

input#absender, textarea {
		width: 300px;
		border: 1px solid #36393D;
		margin-bottom: 1em;
		}

textarea{
		height: 7em;
		}
	
input#absender:focus,
textarea:focus{
		background-color: #DDD;
		}