/* Cascading Stylesheet, Definition by WorldWideWeb Consortium, www.w3.org */

/* stylesheet, text/css, (WEINROT), fuer whydate.de: /styles/rot.css, in CSS-2, Revision 11.02.2007 Dre */




/* ----------------- Layout BODY ------------------------- allgemeine Vorder- u. Hintergrundfarbe, allgemeine Schriftgroesse und Schriftart: hier koennen selbst Laien nicht viel kaputt machen :x -- */

body {color: #666666; background-color: #FFFFFF; margin: 5px; border: 0px; padding: 0px; font-size: small; font-family: Arial, sans-serif;}









/*  ----------- !!  WICHTIG  !! ---------------- Ab hier sollten Sie wissen was Sie tun. Moechten Sie Layout fuer neuen Inhalt, der noch nicht ausreichend erfasst wird, erstellen, erweitern Sie zunaechst das Layout um weitere Klassen bzw. "classes" (.class {property: parameter;}) und lassen bestehendes unveraendert -- */




/* ----------- Layout index.html, Startseite -------------------- */


/* index.html: Hintergrundbild, Abmessungen, Schriftart, und -groesse */
body.start {background: url(../pics/hintergrund2.jpg) transparent fixed; color: #000000; margin: 125px 125px auto 125px; border: 0px; padding: 0px; font-size: medium; font-family: Arial, sans-serif;} 


/* index.html: Textfeld-Layout, Abmessungen, Umrandungen, Vorder- und Hintergrundfarbe, Schriftfarbe, Schrift-Zentrierung, Zeilenabstand */
.first {border: 5px outset #CC0000; padding: 30px; background-color: #FFFFFF; color: #666666; text-align: center; line-height: 1.3em;}

/* index.html: Link-Layout */
.first a:link, .first a:visited {color: #0099FF; text-decoration: underline; padding: 2px;} 
.first a:hover, .first a:active {color: white; text-decoration: none; background-color: #CC0000; padding: 2px;} 

/* index.html: Ueberschriftenfarbe */
.first h1, .first h2 {color: #CC0000;} 

/* index.html: Kursivtext */
.kursiv {font-family: 'Times New Roman', Times, serif; font-size: medium; font-style: italic;} 

.klein {font-size: x-small;}

/* ----- ENDE index.html Layout ---------- */





/* --------- Content Layout (Hauptzelle s.u.)------------- */ 

/* Image-Layout */ 

img {border: 0px; margin: 0px; padding: 0px;} 
.left {float: left; padding: 10px 10px 10px 0px;} 
.right {float: right; padding: 10px 0px 10px 10px;} 
.linksoben {float: left; padding: 5px 10px 10px 0px;} 
.highlight {border: red dashed 3px; margin: 0px; padding: 0px;} 



/* Link-Design allgemein */

a:link, a:visited {
	color: #0099FF; 
	text-decoration: underline; 
	padding: 2px; 
	} 

a:hover, a:active {color: #FFFFFF; 
	text-decoration: none; 
	padding: 2px; 
	background-color: #CC0000; 
	}
	
	

	

/* Listen-Design: z.B. bei den Liedtexten OL, sowie Linklisten der Sidebar UL s.u.  */ 

ol {margin: 0px; padding: 10px; clear: left;} 
ol li {padding: 10px 0px 10px 0px; list-style-type: decimal;} 

ul {padding: 10px 5px 10px 15px; margin: 0px; clear: left; line-height: 1.5em; } 
ul li {list-style-type: square;} 


.grau {color: #CCCCCC;}
.rot {color: #CC0000;} 
.grun {color: #33FF00;} 
.schwarz {color: #000000;}


h1, h2, h3, h4, h5 {clear: left;} 



/* TABLE: animierte Buttons in "Personal" + "Musik", in Hauptzelle s.u. */


table.persobutton {margin: 0px; border: 0px; padding: 0px; background-color: transparent; color: #000000; border-collapse: separate;} 
.persobutton td {margin: 0px; border: 0px; padding: 0px; vertical-align: middle; text-align: center; width: 100px; height: 100px;} 



/* TABLE: Mitarbeitervergleich, innerhalb einer Hauptzelle s.u. */
table.ergebnis {border-collapse: separate; border: 0px; margin: 0px; padding: 0px; background-color: #666666;}
.ergebnis td {padding: 5px; text-align: left; vertical-align: top; color: #000000; font-size: x-small;}
.ergebnis th {padding: 5px; text-align: left; vertical-align: top; color: #FFFFFF; background-color: #CC0000; font-weight: normal;}

.dark {background-color: #CCCCCC;}
.light {background-color: #FFFFFF;}


/* ----------- ENDE Content Layout ------------ */








/* -------------- Struktur Layout -------------------------- */

/*  ------------- (1) DIV Ganze Seite Abmessung  ------------------------  */
#container {width: 60em; padding: 0px; margin: 0px; border: 0px;}




/* --------------------------- (2) DIV Abschnitt Oben BANNER TITEL------------------------------- */

#oben {vertical-align: middle; text-align: left; width: 60em; padding: 0px; margin: 0px; border: 0px; background-color: transparent; color: #666666;}


/* Banner */
.titel {padding: 10px 10px 10px 30px; background-color: #CC0000; color: #FFFFFF; font-size: medium;} 

.titel h1 {font-weight: normal; font-size: 2em;}



/* Kopfzeile */ 
.kopf {padding: 5px 5px 5px 30px; border-bottom: 1px solid #666666;} 

.kopf a:link, .kopf a:visited {color: #666666; text-decoration: none; padding: 2px; } 
.kopf a:hover, .kopf a:active {color: #FFFFFF; 
	text-decoration: none; 
	background-color: #CC0000; 
	padding: 2px; 
	}





/* --------------------- ENDE Abschnitt Oben ------------------------- */





/* --------------------- (3) DIV Abschnitt Mitte CONTENT------------------------------- */

#mitte {vertical-align: top; text-align: left; width: 45em; float: left; overflow: auto; padding: 0px; margin: 0px; border: 0px; background-color: transparent; color: #666666;}


/* Hauptzelle */ 
.haupt {padding: 10px 10px 10px 30px;} 
.haupt p {line-height: 1.3em; padding: 0px 20px 0px 0px;}




.haupt h1, .haupt h2 {color: #CC0000; padding: 40px 0px 0px 0px;} 
.haupt h3 {color: #666666; padding: 10px 0px 0px 0px;}



/* -- ENDE Hauptzelle -- */
	



/* Fakultativ: 2. Hauptzelle Schwarz-Gruen, Monospace  -- */
.haupty {border: 0px; padding: 30px; background-color: #000000; color: #33FF00;}

.haupty h2 {background-color: #000000; color: #33FF00; font-family: Monaco, Monospace;} 
.haupty p {background-color: #000000; color: #33FF00; font-family: Monaco, Monospace;} 

/* --ENDE 2. Hauptzelle -- */




/* Fusszeile */ 
.fuss {padding: 5px; text-align: center;} 

.fuss a:link, .fuss a:visited {color: #666666; text-decoration: none; padding: 2px;} 
.fuss a:hover, .fuss a:active {color: #FFFFFF; 
	text-decoration: none; 
	background-color: #CC0000; 
	padding: 2px;}




/* -- ENDE Fusszeile -- */



/* ---------------------------- ENDE Abschnitt Mitte ------------------------- */







/* ----------------------------- (4) DIV Abschnitt Rechts - SIDEBAR------------------------- */

#rechts {vertical-align: top; text-align: left; width: 15em; float: right; overflow: auto; padding: 0px; margin: 0px; border: 0px;}



/* Sidebar rechts */
.bar {padding: 20px 0px 20px 20px; border-left: 1px solid #999999;} 


.bar a:link, .bar a:visited {
	color: #666666; 
	text-decoration: none; 
	padding: 2px; 
	} 

.bar a:hover, .bar a:active {
	color: #FFFFFF; 
	text-decoration: none; 
	background-color: #CC0000; 
	padding: 2px; 
	} 
 
.bar h3 { 
	    padding: 5px 0px; 
		margin: 20px 0px 0px 0px;
		border-bottom: 1px solid #999999; 
		}
		


/* -- ENDE Sidebar rechts -- */



/* ----------------- ENDE Abschnitt Rechts ----------------- */
/* ----------------- ENDE Struktur Layout -------------------- */