body { background-color:#36240d; font-family: Verdana, Arial, Helvetica, sans-serif; color: #8C5C22; }

		
/* GENERAL MOJO AND MULA */
		
		h1 {
			font-family: Arial, Helvetica, sans-serif;
			font-weight: normal;
			font-size: 32px;
			color: #CC6633;
			margin-bottom: 30px;
			background-color: #FFF;
		}
		
		h2 {
			color: #666666;
			font-size: 16px;
			font-family: Arial, Helvetica, sans-serif;
			background-color: #FFF;
		}
		h3 {
			color: #019391;
			font-size: 12px;
			font-family: Arial, Helvetica, sans-serif;
			background-color: #FFF;
		}

		
		a {
			color:#ed6d00;
			text-decoration: underline;
		}

		a:hover {
			color:#ed6d00;
			background-color: #F5F5F5;
			text-decoration: none;
		}

/* 		
		form {
			float:right;
			margin-top: -45px;
			font-size: 9px;
		}
		
		input {
			background-color: #FFF;
			color: #999999;
			border: 1px solid #CCC;
			font-size: 11px;
			padding: 3px;
		}
		
		.button {
			padding: 2px;
		}
*/
		


/* NAVIGATION ELEMENTS */
	
		 #navigation ul {
			margin-left: 0;
			padding-left: 0;
			list-style-type: none;			
			float: left;
			width: 140px;
			background-color: #FFF;
		}

		#navigation a {
			display: block;
			padding: 5px;
			width: 140px;
			border-bottom: 1px solid #CCC;
		}

		#navigation a:link, #navlist a:visited {
			color:#ed6d00;
			text-decoration: none;
		}
		
		#navigation a:hover {
			background: #000000 url(pix/arrow.gif) 96% 50% no-repeat;
			background-color: #F5F5F5;
			color:#ed6d00;
		}

		
/* CONTENT ELEMENTS */

		#content {
			width: 362px;
			margin-left: 180px;
			margin-right: 200px;
			background-color: #FFF;
		}
		
		#content p {
			padding-bottom: 10px;
			border-bottom: 1px solid #DDDDDD; /* A faint grey line below the text */
		}
		
		#audiocontainer {
			width: 362px;
			margin: 0 auto;
			background-color: #FFF;
			border: 1px dotted #000000;}
			
		#audiocontainerleft {
		    float: left;
			width: 112px;
            background-color: #FFF;}
			
		#audiocontainerright {
			margin-left: 116px;
			background-color: #FFF;}
			
			
		#box {
		    color: #000000;
			background-color: #30200b;
			border: 1px dotted #9e6928;}

/* SIDEBAR ELEMENTS */

		#sidebar {
			float: right;
			width: 175px;
			background-color: #FFF;
		}
		
		#sidebar p {
			padding-bottom: 10px;
			border-bottom: 1px solid #DDDDDD;
		}

/* FOOTER ELEMENTS */

		#footer {
			margin-top: 20px;
			clear: both;
			background-color:#575352;
			padding: 0px 5px 0px 5px;
		}
		
		#footer p {
			color:#89817f;
			padding: 5px;
		}
		
		#footer p a {
			color: #89817f;
			border-bottom: 1px dotted #89817f;
		}
		
		#footer p a:hover {
			color: #FFFFFF;
			background-color:#575352;
		}
		
		/* And they lived happily ever after. The End. */
		
		
		
		
		
		
		


/*  haengt die Labels rechtsbuendig an 
    einer imaginaeren Mittelachse 5em 
    von links auf und kontrolliert den 
    Abstand zu den Kontrollelementen: */

label.left
{
    float            : left;
    text-align        : right;
/*  die naechsten zwei sind beliebig anpassbar,
    um in das jeweilige Gestaltungsraster (Sie 
    verwenden doch ein Gestaltungsraster, oder?) 
    zu passen. Bei Aenderungen aber nicht 
    vergessen, die margins bei input.right 
    entsprechend anzupassen: */
    width            : 5em;
    margin-right    : .3em;
}

/*  positioniert die Text- und 
    Auswahlboxen rechts daneben: */

input[type=text],
select
{
    float            : left;
}

/*  dann werden alle checkboxen und radiobuttons,
    die mit der Klasse "right" versehen wurden,
    um den errechneten linken Abstand der input
    und select-Elemente (s.o.) nach rechts
    verschoben: */

input.right
{
    float                    :    left;
    width                    :    auto;
    clear                    :    both;
    margin-left                :    5.3em;
    margin-right            :    .3em;
}

/*  Extrawurst fuer Mozilla, keine Ahnung, 
    warum das so ist. Feedback und 
    Loesungsvorschlaege willkommen */

input[type=checkbox].right,
input[type=radio].right,
input[type=submit].right
{
    margin-left                :    6.3em;
}

/*  Nicht vergessen, die floats wieder aufzuheben,
    sonst floatet es munter weiter */

form br
{
    clear                    :    both;
}

/*  fuer grafische UAs und DAUs der Hinweis, dass
    die Label anklickbar sind. Weil's so schoen ist, 
    die Kontrollelemente gleich mit. Mit einer Ausnahme: 
    fuer Textfelder macht der Pointer natuerlich keinen 
    Sinn, dort sollte nach wie vor die Text-Einfuegemarke 
    als Cursor erscheinen. Daher hier die Einschraenkung 
    auf die input-Elemente des Typs checkbox, radiobutton, 
    button und submit: */

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

/*  legt den vertikalen Abstand der 
    einzelnen Elemente zueinander fest */

form
{
    line-height                :    140%;
}