/*  =========================================================
Stylesheet für die Einstiegsseite von BONESYTELE by DOG & STYLE
Stand:  01.00
Datei:  bildschirm.css
Media:  screen 
Datum:  21.07.2011
Autor:  Arne Friedrich
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; }
h2, h3, p, ul, ol { margin-bottom: 1em; padding: 0}  
ul ul { margin-bottom: 0; } 
li { margin-left: 1em; } 

/* Allgemeine Selektoren */

html {
	height: 101%;
} 
body { 
	color: black; 
	background-color: silver;
	/*background-image: url(back.jpg);*/
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: small; 
}
h1 { font-size: 150%; } 
h2 { font-size: 130%; }
h3 { font-size: 110%; }

/* Hyperlinks */
a { text-decoration: none; outline: none;} 
a:link { color: #d90000; } 
a:visited { color: #cc6666; }
a:hover, 
a:focus { 
	border-bottom: 1px solid #d90000 
}
a:active { 
	color: white; 
	background-color: #d90000; 
}

/* Allgemeine Klassen und IDs */
.skiplink { 
	position: absolute; 
	left: -3000px; 
	top: -2000px; 
	width: 0px; 
	height: 0px; 
	overflow: hidden; 
	display: inline; 
}
.bildlinks {
	float:left; 
	padding: 3px; 
	border: 5px solid #ccc; 
	margin-right: 10px; 
	margin-bottom: 10px; 
}
.bildrechts {
	float:right; 
	padding: 3px; 
	border: 5px solid #ccc; 
	margin-bottom: 10px;
	margin-left: 10px; 
}
.clearing { clear: both; }
#logo { 
	color: black;
	background-color: white;
	max-width: 60%;
}

/* ==================================== 
   2. Styles für die  Layoutbereiche 
   ==================================== */

#wrapper { 
	color: black; 
	background: steelblue;
	width: 90%;  
	margin: 30px auto;
}

#kopfbereich {
	position: relative;  /* Bezugspunkt für "position: absolute"
                            von "#kopfbereich p" */
	color: black; 
	background-color: steelblue;
	padding: 10px 5px 10px 20px; 
}
	#kopfbereich p {
		position: absolute;
		top: 10px ; 
		right: 10px;  
		font-weight: bold;
		font-size: 200%;
	}

#navibereich { 
	float: left; 
	width: 135px;
	background-color: steelblue;
	color: black;   
	padding-left: 20px; 
	padding-top: 20px; 
} 
	#navibereich ul { 
		width: 8.5em;
	} 
	#navibereich li { 
		list-style-type: none; 
		margin: 2px;
		height: 4em;
	}
	
	#navibereich #empty {
		border: none;
		border-top: 2px solid gray;
		background-color: steelblue;  /* wichtig um Farbe bei "active" zu begrenzen */
	}
	
	#navibereich a {					/* Feld für nicht aktive Seite */
		height: 2.5em;
		display: block;  
		text-decoration: none;
		color: black; 
		background-color: steelblue;
		padding: 4px; 
		border: 2px solid gray;
    } 
   
	#navibereich a:hover,			/* Maus über Feld */
	#navibereich a:focus {
		color: black;
		background-color: white;
		border: 2px solid gray;
	}
	
	#einstieg #navi01 a,				/* Feld für active Seite */
	#geschuetzt #navi02 a,
	#geschuetzt2 #navi03 a { 
		color: white;
		background-color: gray;
	}
	
	#navibereich a:active { 			/* Feld während dem Drücken */
		color: black; 
		background-color: green;
		border: 2px solid gray;
	}  

#textbereich {
	background-color: white;
	color: black;
	padding: 20px 0px 20px 20px; 
	margin-left: 155px; 
}
	
	/* Text */
	#text { 
		overflow: hidden; /* zum Umschließen der Floats */
	}
	/* für IE6 */
	* html #text { height: 1%; }

	#text img { 
		float: left; 
		padding: 5px;
		border: none; 
		margin-bottom: 10px;
		margin-right: 5px;   
		margin-left: 10px;
	}
	
	/* Bilder */
	#bilder { 
		overflow: hidden; /* zum Umschließen der Floats */
	}
	/* für IE6 */
	* html #bilder { height: 1%; }	
	
	#bilder  img{
		float: left; 
		padding: 5px;
		border: none; 
		margin-bottom: 10px;
		margin-right: 5px;   
		margin-left: 10px;	
	}
 
#fussbereich {
	clear: both; 
	color: black; 
	background-color: white; 
	text-align: center;
	padding: 10px 20px 5px 20px;
	border-top: 1px solid gray; 
}

/* ==================================== 
   3. Sonstige Styles 
   ==================================== */
   

/* ======================================= 
   E N D E   D E S   S T Y L E S H E E T S 
   ======================================= */