body
	{margin: 10px;
	background-color:#fff;
	font-family:Arial, sans-serif;
	font-size:14px;
	}

#container { /* haben alle Masken */
	width:960px;
	/* height:550px; keine fixe Höhe, damit sich container automatisch aus top + content bzw. contentindex + footer zzusammensetzt */
	margin:10px auto;
	padding-top:20px;
	padding-left:20px;
	padding-right:20px;
	border:1px dotted #666;
	background-color:#D9BBF5;   /* helles violett */
	}

#toplogo {   	/* kleines Logobild mit Läufern*/
	float:left;
	background-image:url(img/background.jpg); background-repeat:no-repeat;
	min-height:55px;
	min-width:150px;
	}

#topnavi {   	/* ist ohne Formatierung */
		}

/* alle ul´s, die innerhalb von element id="navi" liegen, werden angesprochen */
#navi ul {
	list-style-type:none;	/* keine Auflistungszeichen */
	padding-left:0px;
	margin-top:28px;
	margin-left:350px;} /* bei 5 Buttons 225 px */

/* alle li´s, die innerhalb von element id="navi" liegen, werden angesprochen */
#navi li {
	float:left;
	border:1px solid black;
	margin-right:0px;   /* zwischen den einzelnen Linkblöcken ist kein Abstand */
	line-height:25px;  /* durch line-height wird der Text vertikal zentriert */
	}

#navi a {
	text-decoration:none;   /*Links werden nicht unterstrichen */
	font-weight:bolder;
	display:block;   /*jeder der links wird ein Block, Grund für display:block: link ist inline element und daher nur so groß wie sein Inhalt --> man müsste auf Text klicken, als Block kann man überall innerhalb des Rahmens hinklicken */
	padding:0 15px;  /* dadurch ist der Text in seinem "Kasterl" von den Linien links und rechts entfernt */
	background-color:purple;
	}

	/* alle sind Pseudo-Elemente */
#navi a:link , #navi a:visited {
	text-decoration:none;
	color:silver;
	font-weight:bolder;
	}

#navi a:hover {
	text-decoration:none;
	background-color:#9900FF; /* etwas heller */
	color:white;
	font-weight:bolder;
	}

#content{	 /* für alle */
	margin:0px auto;
	}

#startseite{	/* content speziell für Startseite beinhaltet Hintergrundbild Schmetterling*/
	/* width:958px; Breite wird durch container festgesetzt*/
	min-height:470px;
	padding:0px;
	border:1px dotted #666;
	background-image:url(img/schmetterling.jpg); background-repeat:no-repeat;
	}

#andereseiten{	/* content speziell für alle anderen Seiten */
	/* width:958px; Breite wird durch container festgesetzt*/
	min-height:450px;
	padding:10px;
	}

#willkommen{   /* Willkommenstext auf index */
	position:relative;
	top:20px;
	left:20px;
	width:270px;
	/* height:140px;  auskommentiert */
    background-color:#D9BBF5;
	padding:10px;
	border:1px dotted #666;
	}

.floatstop {clear:both;}

h1	{
	color:purple;   /* dunkles violett */
	text-align:left;
	font-size:20px;
	line-height:40px;
	}

h2	{
	color:black;
	text-align:left;
	font-size:14px;
	}

select, table, th, td, input, button  {
	border:1px solid #5E655E; /* Standard RAHMENFARBE mittleres blaugrau - vererbt sich NICHT von table auf th und td  */
	padding:3px;
	}

select, table, input  {
	background-color:#CCFFFF;  /* Standard HINTERGRUNDFARBE helles blaugrau - vererbt sich von table auf td */
	}

th	{
	background-color:#99CCFF;  /* HINTERGRUNDFARBE für Tabellenköpfe, mittleres blaugrau  */
	}

tr:nth-child(odd) {
 	background-color:#E6FFFF;  /* HINTERGRUNDFARBE für Tabellenzeilen, helles blaugrau  */
	}

table  {  /* Formatierung für alle Tabellen, vererbt sich auf th und td */
	border-collapse:collapse;
	text-align:center;
	font-size:14;
	}

.labelleft	{	/* Labels auf Maske Person und Laufinfos , wegen float left anders definiert als andere Labels */
	float:left;
	width:15%;
	}

.button	{
	background-color:#99CCFF;  /* HINTERGRUNDFARBE für Buttons, mittleres blaugrau  */
	}

.message {    /* rosa Message für fehlende Eingaben bei Kalorienverbgrauch */
	color:#FF0066;
	font-size:14px;
	}

.meldung  {    /* schwarzer Satz im Fließtext mit Kalorienverbrauch */
	font-weight:bold;
	}

#footer {
	margin-top:3px;
	}