/* Stylesheet für die-zeubelrieder.de */
/* =============================
	Stand 07.04.2010
	
	Datei: bildschirm.css
	Autor: Thomas Wimmer
	Credit: Peter Müller ( little Boxes )
    ============================= */

/* 1. Die wichtigsten Abstände
=================== */

p			{ margin-bottom: 1em;	}
				
ul ul       { margin-bottom: 0;	}

li			{ margin-bottom: 0.4em; }

br			{ margin-bottom: -0.8em; }


/* 2. Allgemeine Selektoren
================= */

*			{
			padding: 0;
			margin: 0;
			}
			
html        { height: 101%; }


body        {
			color: white;
			font: 0.9em "Helvetica", "Arial", sans-serif;
			}

h1,
h2,
h3,
h4,
h5,
h6			{
			font-weight: 100;
			font-family: "Georgia", serif;
			}



h1			{ font-size: 3em; }

h2,
h3,
h4	 		{
			font-size: 1.4em;
			margin-bottom: 0.6em;
			color: #172564;
			}

h5			{
			
			font-size: 1.2em;
			margin-bottom: 0.5em;
			}
			
h6			{
			font-size: 1em;
			margin-bottom: 0.5em;
			}

address     {
			color: #172564;
			text-align: center;
			letter-spacing: 1px;
			font-style: normal;
			line-height: 1.5em;
			margin: 0 3em;
			border-top: 1px dotted #555;
			padding: 10px 0 15px 0;
			}
			
img 		{
   			margin-right: 4px;
    		vertical-align: middle;
			float:none;
			}

hr  		{
   			margin: 1em 0;
			}

pre			{
			font-size: 1.3em;
			margin: 1em 0;
			}

table 		{
			border-collapse: collapse;
			} 

/* Hyperlinks
======== */

a					{
					text-decoration: none;
					}

a[href^="http:"]    {
					background: white url(src/linkextern.png) 100% 50% no-repeat;
					padding-right:15px;
					}

a[href^="http://www.die-zeubelrieder.de"],
a[href^="http://die-zeubelrieder.de"] 			{
												background: white;
												padding-right: 0px;
												}


#navigation a   {
				float: left;
				color: #333;
				font: 0.9em "Arial", sans-serif;
				display:block;
				background:url("src/norm_right.png") no-repeat right top;
				padding:5px 15px 4px 6px;
				}
				
/* Commented Backslash Hack hides rule from IE5-Mac \*/ 
#header a {float:none;} 
/* End IE5-Mac hack */


#navigation a:hover,
#navigation a:focus         {
							color: white;
							}

										
#textbereich a		{
					color: #0A55A3;
					border-bottom: 1px dotted #0A55A3;
					}
				
#textbereich a:hover
							{
							color: #0A55A3;
							border-bottom:1px solid #0A55A3;
							}
						
#fussbereich a				{
                            color: #AAA;
							border-bottom: 1px dotted #AAA;
							}
				
#fussbereich a:hover		{
							color: #333;
							border-bottom: 1px solid #333;
							}
					
.totop          			{
							float: right;
							}

/* Allgemeine Klassen und IDs
=================== */

.skiplink       {
				position: absolute;
				top: -2000px;
				left: -3000px;
				width: 0px;
				height: 0px;
				overflow: hidden;
				display: inline;
				}


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

#wrapper    {
			color: #172564;
			position: relative;
			display:block; 
			margin: 2em auto;
			width: 800px; /* Breite des Inhalts */
			border: 1px solid #777;
			}

#kopfbereich	{
                height: 110px;
				color: black;
				background:url("src/logobg.png") repeat-x bottom;
				}
				
#navigation		{
				float: left;
				background:url("src/navihg.png") repeat-x top;
				line-height: normal;
				margin-bottom: 1.5em;
				width: 100%;
				}
				
	#navigation ul 	{
					margin:0;
 					padding:0;
  					list-style:none;
  					padding: 0 4px;
  					} 
				
	#navigation li	{
					list-style-type: none;
	 				float:left;
	 				margin:0;
	  				padding:0 0 0 9px; 
					background:url("src/norm_left.png") no-repeat left top;
	  				}
	  
#startseite #navi01,
#ueberuns #navi02,
#neuigkeiten #navi03,
#termine #navi04,
#musiker #navi05,
#gb #navi06,
#kontakt #navi07,
#bilder #navi08,
#login #navi09,
#forum #navi10			{ background-image:url("src/norm_left_on.png"); }
	  	   						
#startseite #navi01 a,
#ueberuns #navi02 a,
#neuigkeiten #navi03 a,
#termine #navi04 a,
#musiker #navi05 a,
#gb #navi06 a,
#kontakt #navi07 a,
#bilder #navi08 a,
#login #navi09 a,
#forum #navi10 a			{
							background-image:url("src/norm_right_on.png"); 
	   						padding-bottom:5px;
	   						color: black;
	   						}

#newsflash			{
					margin: 1em 0;
					text-align: center;
					}

#newsflash label	{
					font-family: courier, serif;
    				color: #CE4F11;
					padding: 7px 0 1px 0;
					border-bottom: 1px solid #AAA;
    				letter-spacing: 1px;
					font-size: 1.1em;
					}


	
#textbereich	{
				background-color: white;
				padding: 1.5em 2em 1em 2em;
				}


	#textbereich p		{ line-height: 1.6em; }

	#textbereich ul		{
						list-style-type: square;
						margin: 1em 0 1.8em 3em;
						}
	
	#textbereich ol		{ margin: 1em 0 1.8em 3em; }
					
		
				
#fussbereich    {
				width: 100%;
				clear: both;
				background-color: white;
				}

#small  {
		font-size: 80%;
		line-height: 1.3em;
		}

/* =======================================================
	Formulare
======================================================= */

select, 
input[type=checkbox],
input[type=radio],
input[type=button],
input[type=submit],
input[type=reset]   {
  					cursor: pointer;
					}

input,
textarea 		{
    			padding: 3px;
    			margin: 5px 0;
				}

.error 			{
    			border: 1px solid red;
    			}

.fontredbold	{
				font-weight: bold;
				color: red;
				}		

/* Styles für das Kontaktformular
==================== */

form                    {
						margin-bottom: 2em;
						width: 400px;
						}

form.kontaktformular label	{
							display: block;
							cursor: pointer;
							background-color: #4B4C3C;		
							color: white;
							padding: 3px 3px 3px 5px;
							} 



/* Sonstige Styles 
=========== */
.geschriebenvon	{
				font-size: 0.9em;
				padding: 3px;
				}
				
.geschriebenvon	label	{
						letter-spacing: 1px;
						font-size: 1.2em;
						}
					
.kleingrau 		{
    			font-size: 80%;
				text-align: right;
				}

.symboltb img 	{
    			margin-right: 2px;
    			vertical-align: text-bottom;
				}

.logout 		{
    			font-size: 80%;
    			float: right;
				}

.logout img 	{
    			margin-right: 2px;
    			vertical-align: text-bottom;
				}

.letztesupdate 	{
    			font-size: 80%;
    			}

.letztesupdate img 	{
    				margin-right: 2px;
    				vertical-align: text-bottom;
					}

.zeubelforum 		{
					table-layout: auto;
    				border-collapse: collapse;
					margin-bottom: 1em;
					}

.zeubelforum td 	{
    			text-align: left;
    			padding: 5px 1em;
    			border: 1px solid #AAA;
				}

.courier	{
			font-family: "Courier", monospace;
			border: 1px solid #AAA;
			padding: 5px;
			color: 5a5a5a;
			}

.termin			{
				position: relative;
				font-size: 100%;
				}
			
.termin td 		{
				color: #172564;
    			text-align: left;
    			vertical-align: top;
	 			}

.meldung 		{
	 			color: red;
				}
				
.meldungpos		{
	 			color: #339933;
				}	


.headline 		 	{
    				color: #CE4F11;
					cursor: default;
					text-decoration: underline;
					}

	
.gbseiten 	{
			padding: 5px 0 16px 0;
   			margin: 1em 0;
			}
	
	
.gbseiten a 		{
					font-size: 1.2em;
	 				border: 1px solid #AAA;
					background-color: white;
    				font-weight: normal;
	 				padding: 3px 6px;
	 				margin-right: 5px;
	 				letter-spacing: 0;
	 				}

.gbseiten a:hover	{
    				color: white;
    				border: 1px solid #AAA;
    				background-color: #1E006B;
    				font-weight: normal;
    				letter-spacing: 0;
					}

.grosseschrift label	{
						font-size: 2em;
						color: black;
    					border-bottom: 1px solid #AC9E6B;
    					background-color: #EDEBD5;
    					letter-spacing: 1px;
						}
						
.tabellemitbildern		{ float: left; }

.fragebogen				{ float: left; }

					
.tabellemitbildern img,
.floatleft	{
			float: left;
			border: 1px solid #AAA;
			padding: 1px;
			margin: 0 8px 1em 0;
			}

.tabellemitbildern td	
			{
			min-width: 380px;
			}

.tabellemitbildern label
			{
			font-weight: bold;
			font-size: 1.1em;
			}
			
.quiz td	{
			vertical-align: top;
			}
			
.quiz label {
 			color: #CE4F11;
			font-family: "Courier", monospace;
			cursor: default;
			font-size: 1.2em;
   			}
		
.quiz img	{
			float: left;
			border: 1px solid #AAA;
			padding: 1px;
			margin: 0 8px 1em 0;
			}
			
			
img.hintergrundbild {
min-height: 100%;        /*  Diese zwei Zeilen setzen die Regeln um den Hintergrund zu füllen  */
min-width: 1024px;
width: 100%;             /*  Die Regeln, welche für die Skalierung sorgen  */
height: auto;
position: fixed;         /*  Die Positionierung  */
top: 0;
left: 0;
}


@media screen and (max-width: 1024px) {
img.hintergrundbild {
left: 50%;                /*  Ohne diese Angaben funktioniert es nicht  */
margin-left: -512px; }
}


div#inhalt {
position: relative;       /*  Diese Angabe ist extrem wichtig, da ansonsten der Inhalt nicht angezeigt wird!  */
}