/*	-------------------------------------------------------------
	Beispiel eines hellen Layouts
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          .datei         index.html
          .kapitel       4
	-------------------------------------------------------------	*/

/*	-------------------------------------------------------------
	Farben
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	dunkelblau - #0c648a
	hellgrï¿½n - #bcf183
	hellblau - #1295cf
	hellgrï¿½n - #c1f887
	dunkelgrï¿½n - #67af1e
	hell (headers)- #d1f4ff
	-------------------------------------------------------------	*/
	
/* 
          Inhalt: 
     
          	1. Global Reset
          	2. Struktur
          	3. ALLGEMEINE ATTRIBUTE
          	4. Links
          	5. Rechtes Navigationsmenï¿½ (#content-related)
          	6. Typografie
          	7. Header (#header)
          	8. Horizontales Navigationsmenï¿½ (#topnav)
          	9. Banner (#imageintro)
          	10. Footer (#footer)
          	11. Clearfix
*/

/*	-------------------------------------------------------------
	1. GLOBAL RESET
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
               /* Margin und Padding werden auf 0 gesetzt*/
               *
               {
               	margin: 0;
               	padding: 0;
               }
     
/*	-------------------------------------------------------------
	2. STRUKTUR
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
               /* Layout fester Breite wird zentriert */
               body
               {
               	font: 0.75em/1.55em Verdana,sans-serif;
               	width: 770px;
               	background:#dfdee2;
               	
               	
               	background-position: 0 10px;
               	color: #fff;
               	margin: 0 auto;
               	padding: 0;
               
               }
        
               #begin
               {
	/* Abschlieï¿½ung des Layouts im oberen Seitenbereich */
               	margin-right: auto;
	margin-left: auto;
	width: 760px;
	background-image: url('media/header1.jpg');
	background-repeat: no-repeat;
	height: 30px;
	background-position: 0 10px;
}
#container
               {
	/* Vertikale Wiederholung des Hintergrundbildes zur Abschlieï¿½ung des Layouts */
    background-repeat: repeat-y;
	margin-right: auto;
	margin-left: auto;
	width: 720px; /* Horizontaler Abstand links und rechts soll ein einheitliches Seitenbild erzeugen */;
	padding-right: 20px;
	padding-left: 20px;
	background: url(media/linie1.jpg);
}

               #end
               {
                    /* Abschlieï¿½ung des Layouts im unteren Seitenbereich */
               	margin-right: auto;
               	margin-left: auto;
               	background-image: url(media/footer1.jpg);
               	background-repeat: no-repeat;
				width: 760px;
               	height: 30px;
               }
               #columnwrap
               {
                    /* Allgemeines Container fï¿½r sï¿½mtliche Seiteninhalte */
               	background-color: #ffffff;
               	padding-bottom: 0;
               	display: block;
               }
               
               #subwrap
               {
                    /* Ein Subcontainer innerhalb des allgemeinen Containers */
               	background-color: #fee49e;
               	width: 718px;
               	float: left;
               	padding-bottom: 6px;
               	display: block;
               	border: 1px solid #a88422;
               	border-width: 1px 1px;
               	color: #333;
               }
          
               #content-main
               {
                    /* Inhaltsbereich der Seite */
               	float: right;
               	width: 74%;
               	
				        /*background: url(media/Hintergrund1.png) right 40px no-repeat;*/
                padding-right: 6px;
				color: #333;
                 
              
               }
               #content-maingesamt
               {
                    /* Inhaltsbereich der Seite */
               	background-color: #fee49e;
               	width: 691px;
               	float: left;
               	padding-bottom: 6px;
               	/*display: block;*/
               	border: 1px solid #a88422;
               	border-width: 1px 1px;
               	color: #333;
               	padding-left:27px;
               
               
               	
               	
                
              
               }
               
               #content-main *
               {
                    /* Alle Kinderelemente des Inhaltsbereichs sollen ï¿½ber einen ï¿½uï¿½eren Abstand verfï¿½gen */
               	margin-right:10px;
               	margin-left:27px;
               }         
               #content-related
               {
                    /* linkes Navigationsmenï¿½ der Seite */
               	font-size: 92%;
               	float: left;
               	width: 25%;
               	border: 1px dashed #a88422;
               	border-width:0px 1px 1px 0;
               	background-color: #fee49e;
               }

/*	-------------------------------------------------------------
	3. ALLGEMEINE ATTRIBUTE
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

               a img
               {
               	/* Entferne Rahmen von verlinkten Bildern */
               	border: 0;
               }
               
               strong, p.bold
               {
               	font-weight: 700;
               }
               
               em {
                    font-style: italic;
               }
               
               p,ul,dl
               {
               	margin-top: .6em;
               	margin-bottom: .8em;
               }
               
               ul
               {
               	padding-left: 1px;
               }
                   
               ol
               {
               	padding-left: 30px;
               }
               
               ul li
               {
               	list-style-type: square;
               	margin-bottom: .4em;
               }

               dt
               {
               	font-weight: 400;
               	margin-top: .5em;
               	color: #999;
               	font-size: 1.1em;
               }
               
               dd
               {
               	margin-bottom: .8em;
               }
               td { vertical-align:top;}

/*	-------------------------------------------------------------
	4. LINKS
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

               /* Verweise in Inhaltsbereich und Footer werden mit einem Icon versehen */
              
               #content-main a:link
               {
               	text-decoration: none;
               	color: #333;
               	font-weight: 700;
				font-size:90%;
               	/*text-decoration: underline;*/
               	background: url(media/marker.gif) left center no-repeat;
               	padding: 2px 14px 2px 20px;
               	margin: 0;
               }
               #content-maingesamt a:link
               {
               	text-decoration: none;
               	color: #333;
               	font-weight: 700;
				font-size:100%;
               	/*text-decoration: underline;*/
               	background: url(media/marker.gif) left center no-repeat;
               	padding: 2px 14px 2px 20px;
               	margin: 0;
               }
                #top a:link
               {
               	text-decoration: none;
               	
               	color: #5f5f5f;
               	font-weight: 700;
				font-size:120%;
               	/*text-decoration: underline;*/
               	background: url(media/Pfeil.png);
               	padding: 10px 10px 2px 20px;
               	margin: 0;
				
               	
               }
               
               #top a:hover
               {color: #c00;
               	background-color: #000000;
               }
                #footer a:link
                {
                text-decoration: none;
               	
               	color: #5f5f5f;
               	font-weight: 200;
				font-size:110%;
               	/*text-decoration: underline;*/
               	
               	padding:0 0 0 2px;
               	margin: 0;}
 #top.right
               {
               	 text-align:right;
               	
               
               	
               }

		#nolte a:link
               {
               	text-decoration: none;
               	color: #333;
               	font-weight: 700;
				font-size:78%;
               	/*text-decoration: underline;*/
               	background: url(media/marker.gif) left center no-repeat;*/
               	padding: 2px 14px 2px 20px;
               	
               	margin: 0;
               }   		
               	
               
     
               #footer .footerright a:link {
                    background: none;
               }
               
               #content-main a:focus,
               #footer a:focus
               {
                    background-color: #115599;
                    color: #fff;
               }

               /* Hover-Zustand soll fï¿½r besuchte wie noch nicht besuchte Seiten gleich sein */
               #content-main a:hover, #content-main a:visited:hover,
               #footer a:hover, #footer a:visited:hover, {
                    color: #c00;
               	background-color: #fff0f7;
               }
          #footer a:visited 
               {
               	color: #5f5f5f;
               	text-decoration: none;
				border: 0;
               	background: url(media/check.gif) left center no-repeat;
               	padding: 0px 3px 0px 12px;
               	margin: 0;
               	font-size: 97%;
				margin-bottom: 8px;
               	font-weight: bold;
               }    
               /* Bereits besuchte Seiten werden entsprechend hervorgehoben */
               #content-main a:visited
               {
               	color: #666;
               	text-decoration: none;
				border: 0;
               	background: url(media/check.gif) left center no-repeat;
               	padding: 2px 14px 2px 20px;
               	margin: 0;
               	font-size: 90%;
				margin-bottom: 10px;
               	font-weight: bold;
               }
               #content-maingesamt a:visited
               {
               	color: #666;
               	text-decoration: none;
				border: 0;
               	background: url(media/check.gif) left center no-repeat;
               	padding: 2px 14px 2px 20px;
               	margin: 0;
               	font-size: 100%;
				margin-bottom: 10px;
               	font-weight: bold;
               }    
                

               #content-main a:active, 
               #footer a:active 
               {
                    /* Focus und Active: in diesen Zustï¿½nden soll sich ein Verweis deutlich hervorheben */
               	background-color: #999;
               	color: #fff;
               }    
               #top a:visited
                {
               	text-decoration: none;
               	
               	color: #5f5f5f;
               	font-weight: 700;
				font-size:120%;
               	/*text-decoration: underline;*/
               	background: url(media/Pfeil.png);
               	padding: 10px 10px 2px 20px;
               	margin: 0;
				
               	
               }
               #content-maingesamt a:hover, #content-maingesamt a:visited:hover, 					#content-related a:focus, #content-related a:visited:focus
               {
                    /* Hover und Focus: in diesem Fall werden beide Zustï¿½nde identlisch gestaltet */
               	background-color: #df573f;
               	color: #fff;
               	}

                     
/*	-------------------------------------------------------------
	5. LINKES NAVIGATIONSMENï¿½ (#CONTENT-RELATED)
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/     

               #content-related h2
               {
               	font-size: 1.2em;
               	margin-top: .8em;
               }    
               #content-related h3
               {
               	color: #333;
               }                                 
               
               #content-related a:hover, #content-related a:visited:hover, 					#content-related a:focus, #content-related a:visited:focus
               {
                    /* Hover und Focus: in diesem Fall werden beide Zustï¿½nde identlisch gestaltet */
               	background-color: #df573f;
               	color: #fff;
               	}
               
               #content-related a:visited
               {
               	color: #666;
               	padding-right: 12px;
               }

               #content-related h2
               {
               	background-color: #ffc934;
				font-weight: 700;
               	color: #333;
               	border: 1px solid #000000;
               	border-width: 1px 0;
               	padding: 6px;
				font-variant: small-caps;
				letter-spacing: 2px;
               }
               
               #content-related h2 a,
               #content-related h2 a:hover,
               #content-related h2 a:visited 
               {
               	font-variant: small-caps;
               	letter-spacing: 2px;
               	color: #000000;
               	text-decoration: none;
               	background-color: #ffc934;
               }
                    
               .homelist
               {
                    /* Abstï¿½nde fï¿½r die ungeordnete Liste ul.homelist */
               	padding-bottom: .6em;
               	padding-right: 12px;
               	padding-left: 12px;
               }
               
               #content-related .homelist li
               {
               	list-style-type: none;
				display: block;
               	color:  #000000;
               	font-size: 10px;
		              	
               	text-align:center;
               	
               	border-bottom: 1px dashed #a88422;
               ;
               	
				
                  /* Ein 'kï¿½nstlicher' Listenmarker soll sich rechts befinden */
               	
               
               }
               
               #content-related ul.homelist li
               {
               	padding-bottom: 1px;
               }
               
               #content-related li a, #content-related li a:visited
               {
                    /* Gestaltung der Verweise: Verweis wird zum Block deklariert und mit einer festen Breite versehen */
                    /* Dadurch wird es dem Nutzer leichter fï¿½llen, einen Verweis anzuklicken. */
               	display: block;
               	color:  #000000;
               	font-size: 11px;
		               	
               	font-weight: 600;
               	text-decoration: none;
               	
               	text-align: left;
               	width: 120px;
                  /* Ein 'kï¿½nstlicher' Listenmarker soll sich rechts befinden */
               	background: transparent url(media/marker.gif) no-repeat 3% 50%;
               	padding: 0 5px 4px 28px;
               }

               #content-related li.current a,
               #content-related li.current a:visited,
               #content-related li.current a:visited:hover 
               {
                    /* Der aktuelle Seitenbereich wird durch seine Hintergrundfarbe markiert */
               	background-color: #de5138;
               	color: #fff;
               	border: 2px solid #7d8da6;
               }

                    /* Beim Bedarf kann man angeklickte Bereiche mit CSS automatisch hervorheben */

               #content-related li a:visited {
                    background: url(media/check.gif) left center no-repeat;
					
               	   	
               	text-decoration: none;
               	background-color: #ffc934;
               }


/*	-------------------------------------------------------------
	6. TYPOGRAFIE
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
               h1
               {
               	line-height: 1.3em;
               	font-family: "Trebuchet MS",sans-serif;
               	font-weight: 400;
               	font-size: 218%;
               	margin-top: .1em;
               	margin-bottom: 0.1em;
               	color: #333;
               	font-variant: small-caps;
               	border: 1px dashed #5f5f5f;
               	border-width:  0 0 1px 0;	
               
               }
               
               h2
               {
               	font-family: "Trebuchet MS", Verdana,"Trebuchet MS",sans-serif;
               	font-size: 1.5em;
               	margin-bottom: .6em;
               	line-height: 1.22em;
               	color: #333;
               }
               
               h3
               {
               	font-family: Verdana, sans-serif;
               	font-size: 0.9em;
               	font-weight: 700;
               	margin-bottom: .2em;
               	color: #333;
               	text-transform: uppercase;
               	letter-spacing: 1px;
               	background-color: #a8b3c1;
               	padding: 2px 3px 2px 10px;
               }    
				h4
				{
					display: block;
               	color:  #000000;
               	font-size: 11px;
		               	
               	font-weight: 600;
               	text-decoration: none;
               	
               	text-align: left;
               	width: 120px;
                  /* Ein 'kï¿½nstlicher' Listenmarker soll sich rechts befinden */
               	background: transparent url(media/marker.gif) no-repeat 3% 50%;
               	padding: 0 5px 4px 32px;
				}
				h5
				{
					color:  #000000;
               	font-size: 9px;
		               	
               	font-weight: 600;
               	text-decoration: none;
               	font-variant: small-caps;
               	text-align: left;
               	width: 120px;
				}
               
			   #content-main h2, #content-main h3
               {
               	margin-top: 1.2em;
               }
         #content-main b
         {font-weight: 700;
				 	padding: 0px 0px 0px 0px;
         	margin: 0;}
      #content-main img
         {border:0;
				 	padding: 0px 0px 0px 0px;
         	margin: 0;}
         	#content-main table
         {border:0;
				 	padding: 20px 20px 20px 20px;
         	margin: 0;}
    #content-maingesamt p
    {text-align:justify;
    padding-right:27px;}
    #redaktion table
    { padding:0 0 0 0;}
   
/*	-------------------------------------------------------------
	7. HEADER (#header)
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

		body#home #header               
                {
                    /* Zugï¿½nglichkeit: auch ohne CSS-Stile soll die Seite gut benutzbar sein. Ein Verweis 
                    wird durch ein Bild ersetzt, indem er horizontal als Inline-Element prï¿½sentiert und um
                    9999px nach links verschoben wird. Suchmaschinen sehen den Verweis trotzdem. */
               	height: 160px;
               	background: #fff url(media/Forum.png);
			
               }
                body#tacheles #header
               {
                    /* Zugï¿½nglichkeit: auch ohne CSS-Stile soll die Seite gut benutzbar sein. Ein Verweis 
                    wird durch ein Bild ersetzt, indem er horizontal als Inline-Element prï¿½sentiert und um
                    9999px nach links verschoben wird. Suchmaschinen sehen den Verweis trotzdem. */
               	height: 160px;
               	background: #fff url(media/tacheles.png);
               }
               #header h1
               {
               	display: inline;
               	
               }
               
               #header h1 a
               {
               	text-indent: -9999px;
               	display: block;
               	width: 510px;
               	height: 86px;
               	margin: 0;
               }    
     
/*	-------------------------------------------------------------
	8. HORIZONTALES NAVIGATIONSMENï¿½ (#TOPNAV)
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/     
     
     
     #suche {
                background-color: #ffc934;
                color:  #000000;
               }
     
     
     
   #navbar {
                float:left;
                width:100%;
				background: url(media/Navi.png);
                      
				height:35px;
                
               }
               #navbar ul {
                     margin:0;
					 padding:6px;
                     text-align: center;
					 
                     

                          
                     
               }
               #navbar li{
                     display:inline;
					 
                     
               }
               #navbar a{
               text-decoration:none;
               font-weight:bold;
               
			   color: #333;
			   border-style: none solid none solid;
                     border-color: #a88422;
                     border-width: 1px;
                     padding:8px;
                     list-style: none;
					 
               }
               #navbar li a:hover { 
background: url(media/nai-rot.png) repeat ;
padding:8px 8px;
color:#fff;

}
				#navbar a.on
               {
                    /* Die aktuelle Rubrik wird besonders markiert */
               	background: url(media/nai-rot.png) repeat ;
padding:8px 8px;
color:#fff
               }
               


         
/*	-------------------------------------------------------------
	9. BANNER (#IMAGEINTRO)
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/     
               #imageintro
               {
                    /* Eine horizontale Abgrenzung zwischen dem Banner und dem ï¿½brigen Inhalt */
               	border-bottom: 1px solid #939690;
               }
               
               #homepage #imageintro
               {
                    /* #homepage ist eine Body-ID, nach der ggf. unterschieden werden kï¿½nnen.
                    So kï¿½nnen unterschiedliche Seiten verschiedene Banner haben. Die Auswahl kann
                    mit CSS 'automatisch' erfolgen. So wird das Bild banner.png nur auf der Seite mit Body-ID
                    #homepage erscheinen, auf den anderen Seiten (mit anderen IDs) dagegen nicht. */
               	/*background: #55677d url(media/banner.png) no-repeat;*/
               }
               
               #homepage #imageintro h2
               {
               	border-top: 2px solid #d0d6de;
               	border-bottom: 2px solid #d0d6de;
               	text-indent: -5000px;
               	height: 130px;
               	width: 720px;
               	margin: 0;
               }
               
               #imageintro h2 a
               {
                    /* Die ganze Bannerflï¿½che (720px x 140px) soll angeklickt werden kï¿½nnen. */
               	display: block;
               	width: 720px;
               	height: 140px;
               	margin: 0;
               }
     
/*	-------------------------------------------------------------
	10. FOOTER (#FOOTER)
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/     
               #footer
               {
                    /* Footerbereich: damit auch Footer nicht gefloatet wird, wird es mit clear: left aus dem Fluï¿½ herausgerissen
                    und erscheint wie gewohnt unter dem ï¿½brigen Inhalt. */
               	clear: left;
               	color: #487858;
               	font-size: 90%;
               	padding: 10px 20px;
               }
                  
               .footerleft
               {
                    /* Linker Teil des Footers: fï¿½r den Text. clear: both ist notwendig, damit
                    das HIntergrundbild sowohl .fooerleft als auch .footerright noch umschlieï¿½t. */
               	min-height: 35px;
               	clear: both;
               	padding: 0 10px;
               }
               
               #footer p
               {
               	color: #5f5f5f;
               	font-size: 10px;
               	margin: 1px 1px 1px 0;
               	padding: 0;
               }
               
               .footerleft dl
               {
               	width: auto;
               	text-align: left;
               	font-size: 0.9em;
               	color: #333;
               	margin: 0 10px 0 0;
               	padding: 0;
               }
               
               .footerleft dl dt
               {
               	float: left;
               	clear: left;
               	width: 70%;
               	margin: 0 -1px 0 0;
               	padding: 0;
               }
               
               .footerleft dl dd
               {
               	width: 30%;
               	float: right;
               	clear: right;
               	margin: 0;
               	padding: 0;
               }
               
               .footerright
               {
                    /* Rechter Teil des Footers: fï¿½r das Bild. Innerhalb von .footerleft */
               	float: right;
               	width: 154px;
               }
               
               .footer a
               {
               	display: block;
               	width: 146px;
               	height: 31px;
               	padding: 4px;
               }
               .footerright dt
               {
               	margin: 0 10px 0 0;
               	padding: 0;
               }
               .footerright p
               {
               	color: #999;
               	font-size: 10px;
               	margin: 6px 20px 6px 0;
               	padding: 0;
               }
                   
               #footer p
               {
               	font-weight: 400;
               }
               
               .footerright img
               {
               	border: none;
               }     


/*	-------------------------------------------------------------
	11. CLEARFIX
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/     
	
               /* Notwendig fï¿½r die Umschlieï¿½ung des gesamten Seitenbereichs. */
               #columnwrap:after,#subwrap:after
               {
               	content: ".";
               	display: block;
               	height: 0;
               	clear: both;
               	visibility: hidden;
               }
-------------------------------------------------------------
	4. HACKS
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
               /* Commented Backslash Hack versteckt die
               folgende Anweisung von IE5-Mac \*/
               #navbar a span {
                    float: none;
               }
               /* End IE5-Mac hack */
