/* ###################### OVERALL SETTINGS ###################### */

body {
	color: #222;
	background: #ffffff;
	font-family: Verdana, Geneva, Arial, sans-serif;
	margin: 0;
	padding: 0;
	font-size: 13px;	
	line-height: 150%;
}

p {
	color: #222;
	background: #ffffff;
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: 13px;	
	line-height: 150%;
}

h1 {
	background: #fff;
	color: #000;
	border-top: 2px dotted #eee;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin: 0;
	padding: 20px 0 0;
	text-align: left;
}

h2 {
	margin: 15px 0 -3px;
	font-size: 13px;
	color: #111;
	background: #ffffff;
	border-top: 1px solid #eee;
	padding-top: 15px;	
	letter-spacing: 1px;
}

h3 {
	color: #000099;
	background: #ffffff;
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: 15px;	
	line-height: 150%;
}


/* definiert den roten streifen oben. */
#head {
	height: 125px;
	text-align: left;	
	background: #3A47F4;
	color: #222;
	margin: 0;
	padding: 0;
	position: relative;
}

/* bestimmt den abstand des logos von oben und links */
#head img {
	
	position: absolute;
	top: 45px;
	left: 20px;
}

/* definiert die anderen blöcke */
#center {
	margin: 0 20%;
	background-color: #ffffff;
	color: #222;
	clear: both;
}

/* die rechte seite für die fotos */
.fotocol 
	{
	font-size: 15px;
	font-style: italic;
	padding: 0 0 0 2%;
	width: 15%;
	float: right;
	clear: right;
	}

/* definiert wo unten der copyright satz steht */
.end {
	color: #000;
	background-color: #ffffff;
	margin: 20px;
	text-align: left;
	font-size: small;
	border-top: solid 1px #eee;
}

/* definiert den roten streifen unten. */
#bottom {
	height: 80px;
	text-align: left;	
	color: #000;
	background: #3A47F4;
	margin: 0;
}

/* ###################### LINKS ###################### */

a {
	color: #3A47F4;
	background-color: #ffffff;
	border-bottom: 1px dashed #3A47F4;
	padding: 0 2px 1px;
	font-weight: bold;
	margin: 0 -1px;
	font-size: 13px;
}

a:hover {
	color: #111;
	background-color: #ffffff;
	border-color: #333;
}

/* ###################### LISTEN ###################### */


#center ul {
	list-style:none;
	padding: 0;
	margin-left: 3em;
}

#center li {
	background-image: url(img/hippolist.jpg);
	background-repeat: no-repeat;
	background-position: 0 8px;
	padding-left: 11px;
	margin: 12px 0;
}

/* ###################### NAVIGATIONSLEISTE ###################### */

/* top positioniert das ding von oben und right den abstand von rechts */
#gmenu {

	margin: 0 0 35px 0;
	padding: 0 20% 0 0;
	list-style: none;
	float: right;
	width: 340px;
}

/* positioniert es horizontal statt vertikal. padding zieht es auseinander */
#gmenu li {

	float: left;
	padding: 0;
	margin: 0;
}

/* gibt dem ganzen einen neuen link style der sich vom normalen link unterscheidet, die breite der roten box um den navlink wird durch das padding bestimmt und sieht im IE anders aus */
#gmenu li a {

	border: none;
	text-decoration: none;
	font-weight: normal;
	color: #000000;
	background-color: #ffffff;
	padding: 10px;
	display: inline;
	float: left;
	margin: 0 0 0 4px;
}

/* macht die schrift bei mouseover weiss und umrahmt mit roter box */
#gmenu li a:hover {

	color: #fff;
	background: #3A47F4;
}

* html #gmenu li a, * html #gmenu li {
height:1%;
}

#gmenu li.selected a {
color: #fff;
background: #3A47F4;
}