@charset "UTF-8";
/**
 * Satyaseva Layout Styles
 * =======================
 *
 * -- Farben --
 * maroon #800000 - menu, strong ...
 * dimgray #696969
 * #e5e5e5 (alternaiv: whitesmoke #f5f5f5) - footer, ranke
 * whitesmoke #f5f5f5 - background
 * Weiß: #fff
 */

@media all
{

	body{
		color: dimgray;
		background-color: whitesmoke;
		margin-top:0;
		
		text-align: center;		
			
	    font-family:  Verdana, Helvetica, Arial, 'Trebuchet MS', sans-serif;
		font-size: 14px; 
	}
	
	#outer {
		width: 800px;
		background-color: white;
		margin-left: auto;
		margin-right: auto;
		
		text-align: center;
	}
	
	/*	Überschriften
	 *	font-weight: normal weil Verdana bold sehr fett ist 
	 */
	h1,h2,h3,h4,h5,h6 { 
    	font-family:  Verdana, Helvetica, Arial, 'Trebuchet MS', sans-serif;
  		font-weight: normal; 
		color: maroon;
  	}
	
	h1 {
		font-size: 18px;
	}
	
	h2 {
		font-size: 16px;
	}
	
	h3,h4,h5,h6 {
		font-size: 14px;
	}

	a {
		color:dimgray;
	}
	a:hover {
		color: maroon;
	}
	
	ul {
		list-style-position: inside;
		padding-left: 20px;
	}
	
	/* 	Sektionen
	 *	header, content, footer
	 */
	#header {
		width: 760px;
		height: 235px;
		margin-left: auto;
		margin-right: auto;

		position: relative;
		left: 0px;
		top: 0px;

		text-align: left;
		background-color: white;
	}
	/*	eine Höhenabsicherung ist auch nach clear: both; bei #content nötig, 
		da er browser die menuehöhe als 0 fehlinterpretiert und
		deshalb ohne höhenabsicherung das Hintergrundbildbild abschneidet
	*/

	#content {
		width: 740px;
		min-height: 370px;
		
		margin-left: auto;
		margin-right: auto;
		
		position: relative;
		left: 0px;
		top: 0px;
		clear: both;
		
		padding-left: 30px; 
		padding-right: 30px;
		
		background-color: white;
		text-align: left;
	}
	* html #content {
		\width: 800px;
	}

	#footer {
		width: 800px;
		height: 67px;
		margin-left: auto;
		margin-right: auto;
		
		background-color: #e5e5e5;
		clear: both;
	}
	
	#message_top {
		font-family: Verdana, Arial, "MS Trebuchet", sans-serif;
		font-size: 18px;
		font-style: italic;
		text-align: right;
		
		position:absolute;
		right: 10px;
		top: 50px;
		z-index: 4;
	}

	/* Menü 
	*/
	#menu_1 {
		font-size: 12px;
		color: dimgray;
	}
	
	#menu_1 a {
		text-decoration:none;
		color: 	dimgray;
	}
	#menu_1 a.active {
		color: maroon;
	}

	#menu_2 {
		font-size: 12px;
		text-align: right;
		padding-top: 5px;
		padding-right: 10px;
		color: maroon;
	}
	
	#main_menu {
		font-size: 12px;
		background-color: transparent; 
	}
	/* 	ggf. Breite beschränken
		width: 550px;
	*/
	#top_menu { margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; }

	#top_menu li { display: inline; margin: 0px; margin-left: 0px;
		border-style: solid; border-width: 0px; border-right-width: 1px; border-color: dimgray;
		padding: 5px 10px; float: left; background-color: transparent; 
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
	}
	#top_menu li a { 
		text-decoration: none;
		padding: 0px;
	}
	

	#top_menu li.current_page_item { background-color:  whitesmoke; }
	#top_menu li.current_page_ancestor { background-color: whitesmoke; }
	
	#top_menu li.current_page_item a{ color: maroon; }
	#top_menu li.current_page_ancestor a{ color: maroon; }
	

	#sub_menu { 
		clear: both;
		margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; 
		height: 26px;
	}	
	/*	für zweizeiliges sub_menu
		height: 52px;
	*/
	/*  for testing add ..
		border-style: solid;
		border-color: maroon;
		border-width: 0 1px 1px 0;
	*/

	#sub_menu li { 
		display: inline; margin: 0px; margin-left: 0px;
		border-style: solid; border-width: 0px; border-right-width: 1px; border-color: dimgray;
		background-color: whitesmoke;
		padding: 5px 10px; float: left; 
		
		text-align: center;
		text-decoration: none;
	}
	
	#sub_menu li a { 
		text-decoration: none;
		padding: 5px 0px;
	}
	
	#sub_menu li.current_page_item a { color: maroon;}
	#sub_menu li.current_page_ancestor a { color: maroon; }

/*
	old: point-list-style
	#sub_menu ul li.current_page_item a{ color: maroon; }
	#sub_menu ul li.current_page_item ul li a{ color: dimgray; }
	#sub_menu ul li.current_page_item ul li.current_page_item a{ color: maroon; }
*/	
	#bot_menu {
		font-size: 12px;
		text-align: right;
		padding-top: 5px;
		padding-right: 10px;
		color: maroon;
	}
	
	#bot_menu ul {
		margin: 0px;
	}

	#bot_menu ul li { display: inline; margin: 0px; margin-left: 0px;
		border-style: solid; border-width: 0px; border-left-width: 1px; border-color: maroon;
		padding: 0px 5px; float: right;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
	}
	#bot_menu ul li a { 
		text-decoration: none;
		color: maroon;
	}
	
	#bot_menu ul li.current_page_item a { color: dimgray; }
	#bot_menu ul li.current_page_ancestor a { color: dimgray; }
	
	#pages {
		padding: 50px 0px 50px 250px;
		clear: both;
	}
	
	#pages a.current_page_no { color: maroon; }

	/* specials tags: home
	*/
	#content_home {
		width: 760px;
		height: 401px;
		margin-left: auto;
		margin-right: auto;
		
		position:relative;
		left:0px;
		top:0px;
		
		background-color: white;
	}
	
	#message_1 {
		font-family: Verdana, Arial, "MS Trebuchet", sans-serif;
		font-size: 18px;
		font-style: italic;
		text-align: right;
		
		position:absolute;
		right: 10px;
		top: 80px;
		z-index: 4;
	}

	span.very_big {
		font-size: 24px;
	}
	span.colored {
		font-size: 20px;
		color: maroon;
	}
	
	#message_extra {
		font-family: Verdana, Arial, "MS Trebuchet", sans-serif;
		font-size: 18px;
		text-align: left;
		background-color: #F5F5F5;
		
		border-color: maroon;
		border-width: 1px;
		border-style: solid;		
		
		padding: 10px;
		
		position:absolute;
		right: 10px;
		top: 160px;
		z-index: 5;
	}

	#message_2 {
		font-style: oblique;
		font-size: 18px;
		
		position:absolute;
		left: 264px;
		top: 330px;
		z-index: 3;
	}
	
	#omega_oben {
		position: absolute;
		left: 0px;
		bottom: 0px;
		z-index: 1;
	}
	
	#omega_unten {
		float: left;
		margin-left:20px;
	}
	#klang_home {
		position:absolute;
		right: 0px;
		top: 50px;
		z-index: 2;
	}
	
	/* image stuff
	*/
	img.left {
		float: left;
	}
	img.right {
		float: right;
	}
	
	img.width_100 {
		width: 100px;
	}
	img.width_150 {
		width: 150px;
	}	
	img.width_200 {
		width: 200px;
	}
	img.width_250 {
		width: 250px;
	}
	img.width_300 {
		width: 300px;
	}
	
	img.height_100 {
		height: 100px;
	}
	img.height_200 {
		height: 100px;
	}
	
	img.pad_rb_10 {
		padding-right: 10px;
		padding-bottom: 10px;
		border-width: 0px;
	}
	img.pad_lb_10 {
		padding-left: 10px;
		padding-bottom: 10px;
		border-width: 0px;
	}	
	img.pad_rb_20 {
		padding-right: 20px;
		padding-bottom: 20px;
		border-width: 0px;
	}
	img.pad_lb_20 {
		padding-left: 20px;
		padding-bottom: 20px;
		border-width: 0px;
	}
	
	/* spezialformat für Schwierigkeitsstufen */
	img.pad_l20b1 {
		padding-left: 20px;
		padding-bottom: 1px;
		border-width: 0px;
	}
	/* spezialformat für LehrerInen */
	img.pad_xxx {
		padding-left: 20px;
		padding-right: 100px;
		padding-bottom: 1px;
		border-width: 0px;
	}
	
	/* spezialformat für Preise, .. */
	img.pad_xxx2 {
		margin-left: 20px;
		margin-right: 100px;
		margin-bottom: 1px;
		border-width: 1px;
	}
	
	img.allmost_transparent {
  	/* for IE */
  	filter:alpha(opacity=20);
  	/* CSS3 standard */
  	opacity:0.2;
	}
	
	/* indent
	*/
	.indent_50 {
		padding-left: 50px;
	}
	
	/* clearing 
	*/
	div.clear_20 {
		clear: both;
		height: 20px;
	}
	div.clear_10 {
		clear: both;
		height: 10px;
	}	
	div.clear_0 {
		clear: both;
		height: 0px;
	}
	hr.clear_0	{
		clear: both;
		height: 0px;
	}
	
	.clear_left {
		clear: left;
	}
	
	.clear_right {
		clear: right;
	}
	
	.clear_both {
		clear: both;
	}
}