/*
---------------------------------------------------------
| container -> kopf		-> bild1						|
|						-> bild2						|
|           -> suche	-> text							|
|                    	-> senden						|	     
|           -> content	-> 								|
|			-> fuss										|
|														|
| ? CSS & HTML - Jan Pietruska, im September 2006 ? 	
| ? CSS Daniel Gercke, Januar 2007 |
---------------------------------------------------------
*/

 @import url("css_styled_content.css");

 @import url("csc-textpic.css"); 

HTML, BODY {
	margin: 0; 
	padding: 0;
	width: 100%;
	height: 100%;
	/*background-color: #B2DAB2;*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}

body.schule {
	background-image: url('bilder/folge_body-bg_schule.png');
}
body.schueler {
	background-image: url('bilder/folge_body-bg_schueler.png');
}
body.lehrer {
	background-image: url('bilder/folge_body-bg_lehrer.png');
}
body.news {
	background-image: url('bilder/folge_body-bg_news.png');
}
/*
???????????????????? VERTIKALE AUSRICHTUNG ????????????????????
*/
#abstand {
	height: 50%; 
	width: 100px;
	margin-bottom: -265px; 
	float: left; 
	}
/*
???????????????????? CONTAINER ????????????????????
*/
#container {
	width: 771px;
	height: 521px;
	clear:left;
	margin: auto;
	}
/*
???????????????????? KOPF ????????????????????
*/
	/* different background color tiles for the head area */
	body.schule #container .kopf {
		background-image: url('bilder/folge_bg_schule.png');
	}
	body.schueler #container .kopf {
		background-image: url('bilder/folge_bg_schueler.png');
	}
	body.lehrer #container .kopf {
		background-image: url('bilder/folge_bg_lehrer.png');
	}
	body.news #container .kopf {
		background-image: url('bilder/folge_bg_news.png');
	}

	#container .kopf {
		position: relative;
		height: 90px;
		/*background-color: #008600;*/
	}
		#container .kopf .logo {
			float: left;
		}
		#container .kopf .bild1 {
			float: left;
		}
		/* different background color tiles for the head area image */
		body.schule #container .kopf .bild2 {
			background-image: url('bilder/folge_bg_schule.png');
		}
		body.schueler #container .kopf .bild2 {
			background-image: url('bilder/folge_bg_schueler.png');
		}
		body.lehrer #container .kopf .bild2 {
			background-image: url('bilder/folge_bg_lehrer.png');
		}
		body.news #container .kopf .bild2 {
			background-image: url('bilder/folge_bg_news.png');
		}

		#container .kopf .bild2 {
			position: absolute;
			top: 0;
			right: 0;
			/*margin-left: 190px;*/
			border: 0;
			border-left: 1px solid white;
		}
		/* common styles for lists and items */
		#container .kopf ul.menu-lvl-2,
		#container .kopf ul.menu-lvl-3 {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		#container .kopf ul.menu-lvl-2 li,
		#container .kopf ul.menu-lvl-3 li {
			/*display: inline;*/
			float: left;
		}
		#container .kopf ul.menu-lvl-2 a img,
		#container .kopf ul.menu-lvl-3 a img {
			border: none;
		}
		/* individual styles for lists and items */

		/* different background images for the second level menu */
		body.schule #container .kopf ul.menu-lvl-2 {
			background-image: url('bilder/folge_menu-lvl2-bg_schule.png');
		}
		body.schueler #container .kopf ul.menu-lvl-2 {
			background-image: url('bilder/folge_menu-lvl2-bg_schueler.png');
		}
		body.lehrer #container .kopf ul.menu-lvl-2 {
			background-image: url('bilder/folge_menu-lvl2-bg_lehrer.png');
		}
		body.news #container .kopf ul.menu-lvl-2 {
			background-image: url('bilder/folge_menu-lvl2-bg_news.png');
		}

		#container .kopf ul.menu-lvl-2 {
			border-top: 1px solid white;
			/*border-bottom: 1px solid white;*/
			line-height: 28px;
			height: 28px;
		}
		#container .kopf ul.menu-lvl-2 li {
		}
		#container .kopf ul.menu-lvl-3 {
			margin-top: 26px;
			height: 35px;
			line-height: 35px;
		}
		/* different background images for third level menu items */
		/*body.schule #container .kopf ul.menu-lvl-3 li {
			background-image: url('bilder/folge_menu_oben-lvl3-before_schule.png');
		}
		body.schueler #container .kopf ul.menu-lvl-3 li {
			background-image: url('bilder/folge_menu_oben-lvl3-before_schueler.png');
		}
		body.lehrer #container .kopf ul.menu-lvl-3 li {
			background-image: url('bilder/folge_menu_oben-lvl3-before_lehrer.png');
		}
		body.news #container .kopf ul.menu-lvl-3 li {
			background-image: url('bilder/folge_menu_oben-lvl3-before_news.png');
		}*/
		#container .kopf ul.menu-lvl-3 li {
			line-height: 35px;
			height: 35px;
			background-position: 16px bottom;
			background-repeat: no-repeat;
			/*padding-left: 20px;*/
		}
		#container .kopf ul.menu-lvl-3 li img {
			margin: 0 5px 0 15px;
			float: left;
		}
		#container .kopf ul.menu-lvl-3 li a {
			/*display: block;*/
			vertical-align: top;
			line-height: 1em;
			font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
			font-size: 8pt;
			color: white;
			text-decoration: none;
		}
		body.lehrer #container .kopf ul.menu-lvl-3 li a {
			color: #68676b;
		}
/*
???????????????????? SUCHE ????????????????????
*/
		#container .suche {
		height: 38px;
		background-color:#FFFFFF;
		font-size: 0.7em;
		padding-left: 5px;
		color: #797978;
	}
		#container .suche FORM {
			margin: 0;
			padding: 0;			
		}
			#container .suche FORM INPUT{
				font-family: Verdana, Arial, Helvetica, sans-serif;			
				color: #797978;	
				border: 1px solid #797978;
			}		
			#container .suche FORM INPUT.text {
				padding: 0;
				height: 15px;
				margin: 9px 4px 1px 4px; _margin-bottom: 0;
				font-size: 0.95em;
				_font-size: 1em;
			}
			#container .suche FORM INPUT.senden {
				height: 17px;
				font-size: 0.9em;
				_font-size: 1em;
				margin: 0; padding: 0;
				background-color: #FFFFFF;
				}
/*
???????????????????? CONTANT/MITTE ????????????????????
*/
	#container .content {
		height: 372px;
		background-color:#FFFFFF;
	}

		#container .content .links {
			float: left;
			margin: 30px 24px 0 11px; _margin-left: 5px;
			height: 319px;
			weight: 190px;
		}
			#container .content .links UL {
				height: 258px;
				width: 190px;
				font-size: 0.7em;
				padding: 0px; margin: 0;
				padding-top: 10px;
				margin-left: 10px; margin-right: -10px;
				list-style:none;
				}
			#container .content .links UL LI {
				margin-bottom: 10px;
				padding: 0;
				}
			#container .content .links UL LI A {
				color: #000000;
				text-decoration: none;
				width: 100%;
				}			
			#container .content .links UL LI A:HOVER, #container .content .links UL LI A.aktiv {
				color: #0077a9;
				}
		#container .content .mitte {
			float: left;	
			width: 413px;	
			height: 349px;
		}
			#container .content .mitte .ecke { 
				float: left;
			}

			/* different colors for the 4 main areas */
			body.schule #container .content .mitte .clickstream {
				background-color: #c4e3be;
				border-top: 1px solid #3ba328;
				border-right: 1px solid #3ba328;
				color: #3ba328;
			}
			body.schueler #container .content .mitte .clickstream {
				background-color: #b2dbed;
				border-top: 1px solid #0087c2;
				border-right: 1px solid #0087c2;
				color: #0087c2;
			}
			body.lehrer #container .content .mitte .clickstream {
				background-color: #FFF8C9;
				border-top: 1px solid #ffed00;
				border-right: 1px solid #ffed00;
				color: #68676b;
			}
			body.news #container .content .mitte .clickstream {
				background-color: #f7b2b3;
				border-top: 1px solid #e60003;
				border-right: 1px solid #e60003;
				color: #e60003;
			}

			#container .content .mitte .clickstream {
				float: left;
				width: 393px;
				height: 28px;
				font-size: 0.7em;
			}

			/* different colors for the 4 main areas */
			body.schule #container .content .mitte .clickstream a {
				color: #3ba328;
			}
			body.schueler #container .content .mitte .clickstream a {
				color: #0087c2;
			}
			body.lehrer #container .content .mitte .clickstream a {
				color: #68676b;
			}
			body.news #container .content .mitte .clickstream a {
				color: #e60003;
			}

			#container .content .mitte .clickstream A {
				text-decoration: none;
				line-height: 29px;
			}

			/* different colors for the 4 main areas */
			body.schule #container .content .mitte .inhalt {
				border-right: 1px solid #3ba328;
				border-bottom: 1px solid #3ba328;
				border-left: 1px solid #3ba328;
padding: 6px;
			}
			body.schueler #container .content .mitte .inhalt {
				border-right: 1px solid #0087c2;
				border-bottom: 1px solid #0087c2;
				border-left: 1px solid #0087c2;
padding: 6px;
			}
			body.lehrer #container .content .mitte .inhalt {
				border-right: 1px solid #ffed00;
				border-bottom:  1px solid #ffed00;
				border-left:  1px solid #ffed00;
padding: 6px;
			}
			body.news #container .content .mitte .inhalt {
				border-right: 1px solid #e60003;
				border-bottom: 1px solid #e60003;
				border-left: 1px solid #e60003;
padding: 6px;
			}

			#container .content .mitte .inhalt {
				clear: both;
				width: 398px;
				height: 318px;
				overflow:auto;
				
				font-size: 0.7em;

				scrollbar-base-color:#B2DBB3;
				scrollbar-face-color:#B2DBB3;
				scrollbar-track-color:#B2DBB3;				

				scrollbar-3d-light-color:#FFFFFF;
				scrollbar-arrow-color:#FFFFFF;
				scrollbar-darkshadow-color:#000000;
				scrollbar-highlight-color:#FFFFFF;
				scrollbar-shadow-color:#000000;
				}		
			#container .content .mitte .inhalt P {
				margin: 5px;
				}	
		#container .content .rechts {
			float: left;		
		}				

/*
???????????????????? FUSS ????????????????????
*/
	/* different background color tiles for the footer area */
	body.schule #container .fuss {
		background-image: url('bilder/folge_bg_schule.png');
	}
	body.schueler #container .fuss {
		background-image: url('bilder/folge_bg_schueler.png');
	}
	body.lehrer #container .fuss {
		background-image: url('bilder/folge_bg_lehrer.png');
	}
	body.news #container .fuss {
		background-image: url('bilder/folge_bg_news.png');
	}

	#container .fuss {
		height: 16px;
		border-top: 5px solid white;
		background-color: #008600;
		color: #ffffff;
		font-size: 0.65em;
		text-align:right;
	}
		#container .fuss UL {
			list-style: none;
			margin: 1px 5px 0 0;
		}
		#container .fuss UL LI {
			display: inline;
			margin-left: 30px;
		}
		#container .fuss UL LI A {
			text-decoration: none;
			color: #ffffff;
		}
		/* different color definition for teacher area */
		body.lehrer #container .fuss ul li a {
			color: #68676b;
		}