/* Orange #D07427 */
/* Blau #32469E */
/* Gruen #289560 */
/* Grau hell #F4F4F4 */
/* Grau mittel #CCCCCC */
/* Grau dunkel #919191 */
/* Schwarz #000000 */

/* zuerst IE6/7/8 */
@font-face {
   font-family: Matusik;
   src: url('../lib/cantarell-regular-webfont.eot');
}
/* dann fuer alle anderen Browser */
@font-face {
   font-family: Matusik;
   src: url('../lib/Cantarell-Regular.ttf');
}
/* jetzt laesst sich der Font wie jede andere Schrift benutzen, z.B.: */

img, div { 
	behavior: url(iepngfix.htc);
}

html {
	overflow-y: scroll;
}

body {
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	background: #E8E8E8 url(../images/hg-weisser-balken.jpg) center repeat-y;
	font-size: 14px;
}

img {
	border: 0;
}

#content {
	position: relative;
}

#wrapper {
	position: relative;
	width: 900px;
	margin: 0 auto;
	background-color: #fff;
	padding: 0 30px;
}

#header {
	position: relative;
	height: 68px;
	padding-top: 13px;
}

#menu {
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	height: 58px;
	z-index: 96;
	width: 908px;
	margin-left: -4px;
	position: relative;
	z-index: 8;
}

.orange #menu {
	background: #919191 url(../images/menu-o.png) left top no-repeat;
}

.blue #menu {
	background: #919191 url(../images/menu-b.png) left top no-repeat;
}

.green #menu {
	background: #919191 url(../images/menu-g.png) left top no-repeat;
}

#visual {
	height: 294px;
	z-index: 1;
	width: 908px;
	margin-left: -3px;
	position: relative;
}

.green #visual {
	margin-left: -4px;
}

#visualtext {
	position: absolute;
	bottom: 50px;
	left: 25px;
	width: 255px;
}

#visualtext h1 {
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	color: #fff;
	font-size: 42px;
	font-weight: bold;
	line-height: 40px;
}

#visualtext span {
	font-size: 25px;
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	font-weight: normal;
}

#headline {
	background: #fff;
	border-bottom: 1px solid #ccc;
	margin-bottom: 25px;
	position: relative;
	margin-left: 23px;
	z-index: 8;
}

#headline h2 {
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	color: #919191;
	font-size: 24px;
	font-weight: normal;
	margin: 6px 23px 10px 0;
	line-height: 32px;
	letter-spacing: -0.05em;
}

#stupid-dot {
	position: absolute;
	left: -20px;
	top: 9px;
	width: 12px;
	height: 10px;
}

.orange #stupid-dot {
	background: url(../images/punkt-o.png) no-repeat;
}

.blue #stupid-dot {
	background: url(../images/punkt-b.png) no-repeat;
}

.green #stupid-dot {
	background: url(../images/punkt-g.png) no-repeat;
}

#content {
	font-family: Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	width: 900px;
}

#content h3 {
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	font-weight: bold;
	text-decoration: none;
	margin-bottom: 0.5em;
	font-size: 1.3em;
}

.orange h3 {
	color: #D07427;
}

.blue h3 {
	color: #32469E;
}

.green h3 {
	color: #289560;
}

#content h4 {
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	font-weight: bold;
	text-decoration: none;
	margin-bottom: 0.5em;
	font-size: 1.3em;
}

#content p {
	margin-bottom: 1em;
	line-height: 17px;
	font-size: 14px;
}

#content ul {
	margin-bottom: 1em;
	line-height: 17px;
	font-size: 12px;
}

.contentbox img {
	margin-bottom: 11px;
	margin-top: 2px;
}

#content a {
	font-weight: normal;
	font-size: 12px;
	color: #000;
	text-decoration: underline;
}

.orange #content a {
	color: #D07427;
}

.blue #content a {
	color: #32469E;
}

.green #content a {
	color: #289560;
}

.contentbox {
	position: relative;
	width: 300px;
	float: left;
	background: #F4F4F4 url(../images/schatten-319.png) bottom repeat-x;
	margin: 0 25px 25px 0;
	font-family: Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	padding: 10px;
	color: #919191;
}

#infobox {
	position: relative;
	width: 190px;
	float: right;
	margin: 0 0 24px 0;
	color: #fff;
	padding: 10px;
}

#infobox a {
	color: #fff !important;
}

body.orange #infobox {
	background: #D07427 url(../images/schatten-212.png) bottom repeat-x;
}

body.green #infobox {
	background: #289560 url(../images/schatten-212.png) bottom repeat-x;
}

body.blue #infobox {
	background: #32469E url(../images/schatten-212.png) bottom repeat-x;
}

.gallerybox {
	position: relative;
	float: left;
	width: 898px;
	margin: 0;
	font-family: Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	padding: 0;
	color: #919191;
	margin-bottom: 25px;
	z-index: 22;
}

.gallerybox ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.gallerybox ul li {
	display: inline;
	width: 393px; 
	height: 170px;
	float: left;
	padding: 9px;
}

.gallerybox img {
	border: 5px solid #F4F4F4;
	width: 393px;
	height: 170px;
	float: none !important;
	cursor: crosshair;
}

.gallerybox img:hover {
	width: 560px;
	height: 280px;
	margin-left: -85px;
	margin-top: -85px;
	position: relative;
	border: 1px solid #919191;
}

div.clear {
	clear: both;
}

#footer {
	position: relative;
	height: 60px;
	text-align: right;
	background: url(../images/footer.png) no-repeat top center;
	border: 1px solid #fff;
	z-index: 4;
	margin-bottom: 15px;
}

#footer p {
	font-family: Matusik, Arial, "Lucida Sans", "DejaVu Sans Light", sans-serif;
	font-size: 11px;
	margin: 9px 35px 0 0;
}

#footer img {
	margin: 0 10px 0 0;
}