/* Basics */

body {
	font: normal 12px Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #eee;
}

h1 {
	font-size: 16px;
}

p {
	margin: 0;
	padding: 0;
	line-height: 18px;
}

/*Absatz nach Absatz mit erhöhtem Abstand*/

p + p {
	margin: 10px 0 0 0;
}

/* Absatz nach div mit Bild mit Beschreibung */

.image + p {
	margin: 10px 0 0 0;
}

p  + .image  {
	margin-left: 10px;
}

.image + .image {
		
		margin: 15px;
}

.imagenebeneinander {
	margin: 20px 0 10px 0;
	padding: 10px;
	border: 1px solid #aaa;
}

.imagenebeneinander img {
	margin: 0;
}

.imagenebeneinander p {
	margin: 10px 0 0;
	font-size: 10px;
	line-height: 10px;
}

.imagenebeneinander + .imagenebeneinander {
	margin-left: 5px;
	margin-top: 20px;
}

blockquote {
	font-style: italic;
}

/*Tabellenkopf*/

th {
	padding: 6px 10px;
	text-align: left;
	vertical-align: top;
}

/*Tabellenzelle mit innerem Abstand oben/unten und links/rechts sowie grüner Linie oben*/

td {
	padding: 6px 10px;
	border-top: 1px solid #439620;
	text-align: left;
	vertical-align: top;
}

/*Bilder mit äußerem Abstand 10px*/

img {
	margin: 10px;
}

/*Bild innerhalb eines div-Containers ohne Außenabstand, da .image bereits Innenabstand hat*/

.image img {
	margin: 0;
}

/*falls zwei divs mit Bildern nacheinander (nebeneinander), reduzierter Abstand links*/

.image + .image {
	margin-left: 0;
}

/*Link grün und nicht unterstrichen*/

a {
	text-decoration: none;
	color: #439620;
}

/*Link unter Maus wird unterstrichen und heller*/

a:hover{
	text-decoration: underline;
	color: #73c44d;
}

/*Prä-formatierter Text (Monospace Font)*/

pre {
	margin: 10px;
	padding: 10px;
	border: 1px dashed #aaa;
}

/*Bereich über dem Inhaltsbereich*/
/*Außenabstand oben/unten 0, links/rechts auto, damit es in der Mitte steht*/
/*Innenabstand oben 14px, sonst 0*/

#header {
	margin: 0 auto;
	padding: 14px 0 0;
	width: 760px;
}

/*H1 mit Id Title: "Digitaler Farbatlas 5.0" im Head */
/*wird zu einem Inline-Element, damit die grüne Unterstreichung (border-bottom) nur den Text betrifft*/
/*leicht gesperrt*/

h1#title {
	font-size: 16px;
	color: #fff;
	display: inline;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-bottom: 1px solid #49a421;
}

/*Link in Überschrift1 muss explizit auf weiß gesetzt werden */

h1#title a {
	color: #fff;
}

/*Link in der Überschrift1 wird nicht unterstrichen bei Mouseover*/

h1#title a:hover {
	text-decoration: none;
	color: #fff;
}

/*Absatz mit ID subtitle: "Hilfesystem"*/

p#subtitle {
	font-size: 12px;
	color: #fff;
	letter-spacing: 1px;
}

/*Link innerhalb Absatz mit id subtitle */

p#subtitle a {
	color: #fff;
}

p#subtitle a:hover {
	text-decoration: none;
	color: #fff;
}

/* Menu */
/* unsorted list mit ID menu */

ul#menu {
	margin: 0;
	padding: 0;
	float: right;
	font-size: 100.01%;
	font: normal 10px Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
	text-transform: uppercase;
	text-align: center;
}

/* Listenelement in der unsorted List mit ID Menu */
/* kein Aufzählungszeichen */
/* positon: relative wird benötigt für die Ausrichtung der Unterpunkte */

ul#menu li {
	list-style: none;
	float: left;
	position: relative;
}

/* unsorted list innerhalb eines Listenelements innerhalb des Menüs (--> Untermenü) */
/* "display: none": normalerweise unsichtbar */

ul#menu li ul {
	margin: 0;
	padding: 0;
	position: absolute;
	display: none;
}

/* Untermenü */
/* wird sichtbar bei Mouseover über dem betr. Listenpunkt */

ul#menu li:hover ul {
	display: block;
}

/*Listenpunkt im Untermenü*/
/*???*/

ul#menu li ul li {
	float: none;
	display: block;
}

/* Jeder Menüpunkt wird auf die gleiche Breite gesetzt */

ul#menu a {
	display: block;
	width: 160px;
	text-decoration: none;
	color: #fff;
	background-color: #333;
	padding: 2px 0;
}

/*Menüpunkt bei Mouseover, ???, Link mit ID aktuell in einer Liste */

ul#menu a:hover, ul#menu span, li a#aktuell {
	color: #fff;
	background-color: #49a421;
	text-shadow: #fff 0 0 5px;
}

#content ul li {
	margin: 4px 0 0;
	padding: 0;
	line-height: 18px;
	list-style-type: disc;
}

#content ol li {
	margin: 4px 0 0;
	padding: 0;
}

#footer a {
	color: #49a421;
}

#footer a:hover{
	color: #79d251;
}

.clear {
	clear: both;
}