/*---- Aufbau der Seite ---- */
body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-image: url(../grafiken/BG_color.jpg);
}

#main{
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#BG{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: url(../grafiken/BG.jpg) center center;
}

#content_box {
	position: absolute;
	left: 50%;
	margin-left: -425px;  /* Um die Hälfte der Breite nach links schieben */
    top: 50%;
    margin-top: -251px;   /* Um die Hälfte der Höhe nach oben schieben */
	width: 850px; 
	height: 502px;
	z-index: 5;
}

#navi_wrapper {
	position: absolute;
	top: 0px;
	left: 15px;
	width: 850px;
	height: 50px;
	z-index: 10;
}

#navi_bar_home {
	position: relative;
	top: 0px;
	left: 0px;
	width:160px;
	height: 43px;
	z-index: 10;
	float: left;
}

#navi_bar_philo {
	position: relative;
	top: 0px;
	left: 8px;
	width:190px;
	height: 43px;
	z-index: 10;
	float: left;
}

#navi_bar_spektrum {
	position: relative;
	top: 0px;
	left: 20px;
	width:215px;
	height: 43px;
	z-index: 10;
	float: left;
}

#navi_bar_ueber_uns {
	position: relative;
	top: 0px;
	left: 32px;
	width:255px;
	height: 43px;
	z-index: 10;
	float: left;
}

/* ----- Content ---- */

#content_wrapper {
	position: absolute;
	top: 50px;
	width: 850px;
	height:	400px;
	z-index:10px;
}

#content_pic {
	position: relative;
	top: 7px;
	left: 5px;
	width:310px;
	height:390px;
	float: left;
	z-index: 10;
}

#content_bereich {
	position: relative;
	top: 0px;
	left: 0px;
	width: 540px;
	height: 400px;
	float: left;
	z-index: 10;
}

#logo_wrapper {
	position: absolute;
	top: 30px;
	left: 5px;
	width: 530px;
	height: 40px;
	float: left;
	z-index: 10;
}

.content_logo {
	position: relative;
	top: -3px;
	right: 12px;
	width: 140px;
	height: 40px;
	float: right;
	margin: 0px 40px 0px 0px;
}

#content_text_wrapper {
	position: relative;
	top: 70px;
	left: 5px;
	width: 530px;
	height: 327px;
	float: left;
	z-index: 10;
}


.content_text {
	position: relative;
	top: 0px;
	left: 30px;
	width: 500px;
	height: 300px;
	float: left;
	z-index: 10;	
}


.content_text_scroller {
	position: relative;
	top: 0px;
	left: 30px;
	width: 500px;
	height: 300px;
	float: left;
	z-index: 10;
	background-attachment: scroll;
}

.headline {
	position: relative;
	top: 0px;
	left: 10px;
	width: 250px;
	z-index: 10;
	text-align: left;
	color: #e07903;
	font: bold 21px "Century Gothic Bold", Arial, sans-serif;
}

.headline_else {
	position: relative;
	top: 0px;
	left: 0px;
	width: 250px;
	z-index: 10;
	text-align: left;
	color: #e07903;
	font: bold 21px "Century Gothic Bold", Arial, sans-serif;
	margin-top: 30px;
}

.text {
	position: relative;
	top: 10px;
	left: 10px;
	width: 450px;
	z-index: 10;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic", Arial, sans-serif;
	line-height: 18px;
}

.text_ul {
	position: relative;
	top: 0px;
	left: -40px;
	width: 450px;
	z-index: 10;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic", Arial, sans-serif;
	list-style-type: none;
	line-height: 18px;
}

.news_pfeil_back {
	position: relative;
	top: 0px;
	left: 0px;
	width: 20px;
	height: 20px;
}

.news_pfeil_forward {
	position: relative;
	top: 0px;
	left: 0px;
	width: 20px;
	height: 20px;	
}

.news_text {
	position: relative;
	bottom: 17px;
	left: 25px;
	width: 450px;
	z-index: 10;
	text-align: left;
	color: #e07903;
	font: 12px "Century Gothic", Arial, sans-serif;
}

#text_box_wrapper {
	position: absolute;
	top: 122px;
	left: 0px;
	width: 450px;
	height: 153px;
	z-index:10;
	overflow: hidden;
}

.left_box {
	width: 220px;
	height: 190px;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic", Arial, sans-serif;
	z-index: 10;
	float: left;
	background-color: #fff;
}

.right_box {
	width: 220px;
	height: 190px;
	margin: 0px 0px 0px 10px;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic", Arial, sans-serif;
	z-index: 10;
	float: left;
	background-color: #fff;
}

.text_box_wrapper_kontakt {
	position: absolute;
	top: 30px;
	left: 0px;
	width: 550px;
	height: 220px;
	z-index:10;
}

.left_box_kontakt {
	position: relative;
	left: 0px;
	width: 220px;
	height: 190px;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic", Arial, sans-serif;
	z-index: 10;
	float: left;
}

.right_box_kontakt {
	position: relative;
	left: -40px;
	width: 260px;
	height: 195px;
	z-index: 10;
	float: left;
}

.headline2 {
	position: relative;
	top: 8px;
	left: 10px;
	width: 150px;
	height: 20px;
	z-index: 10;
	text-align: left;
	text-decoration: none;
	font: bold 15px "Century Gothic Bold", Arial, sans-serif;
	color: #e07903;
}

.image_team_wrapper {
	position: absolute;
	top: 0px;
	left: 35px;
	width: 100%;
	height: auto;
	z-index: 10;
	float: left;
}

.image_team_wrapper2 {
	position: absolute;
	top: 290px;
	left: 35px;
	width: 100%;
	height: auto;
	z-index: 10;
}

.image_team_wrapper3 {
	position: absolute;
	top: 580px;
	left: 35px;
	width: 100%;
	height: auto;
	z-index: 10;
}

.image_team_wrapper4 {
	position: absolute;
	top: 855px;
	left: 35px;
	width: 100%;
	height: auto;
	z-index: 10;
}

.image_team1 {
	position: relative;
	top: 0px;
	left: 0px;
	width: 150px;
	height: 185px;
	float: left;
	z-index: 10;
}

.image_team1 {
	position: relative;
	top: 0px;
	left: 0px;
	width: 150px;
	height: 185px;
	float: left;
	z-index: 10;
}

.image_team2 {
	position: relative;
	top: 0px;
	left: 55px;
	width: 150px;
	height: 185px;
	float: left;
	z-index: 10;
}

*html .image_team2 {
	position: relative;
	top: 0px;
	left: 45px;
	width: 150px;
	height: 185px;
	float: left;
	z-index: 10;
}

.image_team3 {
	position: relative;
	top: 0px;
	left: 55px;
	width: 150px;
	height: 185px;
	float: left;
	z-index: 10;
}

*html .image_team3 {
	position: relative;
	top: 0px;
	left: 75px;
	width: 150px;
	height: 185px;
	float: left;
	z-index: 10;
}

.image_team4 {
	position: relative;
	top: 0px;
	left: 55px;
	width: 150px;
	height: 185px;
	float: left;
	z-index: 10;
}

*html .image_team4 {
	position: relative;
	top: 0px;
	left: 35px;
	width: 150px;
	height: 185px;
	float: left;
	z-index: 10;
}

.image_team_text {
	position: relative;
	top: 10px;
	left: 0px;
	width: 100%;
	height: auto;
	z-index: 10;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic sans-serif", Arial;
	line-height: 15px;
}

.content_text2_wrapper {
	position: relative;
	top: 220px;
	left: 0px;
}

#print_lupe_wrapper{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 260px;
	height: 30px;
	z-index: 10;
	float: left;
}

.print_lupe {
	position: relative;
	top: 0px;
	left: 0px;
	width: 75px;
	height: 30px;
	float: right;
	z-index:10;
}

.kontakt_icons{
	position: relative;
	top: 10px;
	float: right;
	margin: 0px 0px 0px 10px;
}

/* ---- Content Ende -----*/

#footer_wrapper {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 850px;
	height: 52px;
	z-index: 10;
}

#footer_wrapper_klixx_imprint {
	position: relative;
	top: 20px;
	left: 0px;
	width: 663px;
	height: 52px;
	float: left;
	z-index:10;
}

#footer_bar_klixx {
	position: relative;
	top: 0px;
	left: 15px;
	width: 200px;
	height: 40px;
	float: left;
	z-index: 10;
}

#footer_bar_kontakt {
	position: relative;
	top: 0px;
	right: 10px;
	width: 200px;
	height: 40px;
	text-align: right;
	float: right;
	z-index: 10;
}

#footer_bar_icons {
	position: relative;
	top: 17px;
	left: 12px;
	width: 75px;
	height: 30px;
	float: left;
	z-index:10;	
}

#footer_newscenter {
	position: relative;
	top: 20px;
	left: 15px;
	right: 0px;
	width: 100px;
	height: 22px;
	float: right;
	z-index: 10;
}

/*---- Main Navigation -----*/

a.navigation_off {
	position: relative;
	top: 0px;
	left: 10px;
	width: 100px;
	height: 25px;
	z-index: 10;
	text-align: left;
	text-decoration: none;
	font:bold 16px "Century Gothic Bold", Arial;
	color: #633a28;
}

a.navigation_on {
	position: relative;
	top: 0px;
	left: 10px;
	width: 100px;
	height: 25px;
	z-index: 10;
	text-align: left;
	text-decoration: none;
	font: bold 16px "Century Gothic Bold", Arial;
	color: #e07903;
}

.navigation_sub_text {
	position: relative;
	top: 3px;
	left: 10px;
	width: 170px;
	z-index: 10;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic sans-serif", Arial;
}

/*----- Sub Navigation ----*/
a.subnavigation_off {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100px;
	height: 25px;
	z-index: 10;
	text-align: left;
	text-decoration: none;
	font: 11px "Century Gothic Bold", Arial;
	color: #633a28;
}

a.subnavigation_on {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100px;
	height: 25px;
	z-index: 10;
	text-align: left;
	text-decoration: none;
	font:11px "Century Gothic Bold", Arial;
	color: #e07903;
}

/*---- Sonstiges ----*/
 
 #inputfield {
	position: relative;
	top: 70px;
	left: 150px;
}

 #inputfield_text2 {
	position: relative;
	left: 35px;
}

 #inputfield_text1 {
	position: relative;
	left: 25px;
}

 #inputfield_text_button {
	position: relative;
	left: 25px;
}
 
.clear {
	clear: left;
}

.inputfield_aussehen {
	width: 125px;
	height: 12px;
	border: 1px solid #633a28;
}


/* -----  Link Status ----*/

a.links:link {
	z-index: 10;
	text-decoration: none;
	font: 11px "Century Gothic Bold", Arial;
	color: #633a28;
}

a.links:hover {
	z-index: 10;
	text-decoration: none;
	font: 11px "Century Gothic Bold", Arial;
	color: #e07903 !important;
}

a.links:active {
	z-index: 10;
	text-decoration: none;
	font: 11px "Century Gothic Bold", Arial;
	color: #e07903;
}

a.links:visited {
	z-index: 10;
	text-decoration: none;
	font: 11px "Century Gothic Bold", Arial;
	color: #633a28;
}

a.navigation_off:link {
	text-decoration: none;
	font: bold 16px "Century Gothic Bold", Arial, sans-serif;
	color: #633a28;
	z-index: 10;
}

a.navigation_off:hover {
	text-decoration: none;
	font: bold 16px "Century Gothic Bold", Arial;
	color: #e07903;
	z-index: 10;
}

a.navigation_off:active {
	text-decoration: none;
	font: bold 16px "Century Gothic Bold", Arial;
	color: #e07903;
	z-index: 10;
}

a.subnavigation_off:hover {
	text-decoration: none;
	font: 11px "Century Gothic Bold", Arial;
	color: #e07903;
	z-index: 10;
}

/* ----- ENDE ----- */


/* MASKE CONTENT SCROLLER */


#content_text_wrapper_mask {
	position: relative;
	top: 65px;
	left: 35px;
	width: 530px;
	float: left;
	z-index: 10;
}

#clear{
	position: relative;
	clear: both;
}

.content_text2_wrapper_mask {
	position: relative;
	top: 30px;
	left: 0px;
	width: 530px;
	float: left;
	z-index: 10;
	height: auto;
}

.text_mask {
	position: relative;
	top: 10px;
	left: 10px;
	width: 450px;
	height: auto;
	z-index: 10;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic", Arial, sans-serif;
	line-height: 18px;
}

.text_mask_else {
	position: relative;
	top: 10px;
	left: 0px;
	width: 450px;
	height: auto;
	z-index: 10;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic", Arial, sans-serif;
	line-height: 18px;
}

.text_box_wrapper_kontakt_mask {
	position: relative;
	top: 30px;
	left: 0px;
	width: 550px;
	z-index:10;
}

.left_box_kontakt_mask {
	position: relative;
	left: 0px;
	width: 220px;
	height: 190px;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic", Arial, sans-serif;
	z-index: 10;
	float: left;
}

.right_box_kontakt_mask {
	position: relative;
	left: -40px;
	width: 260px;
	height: 195px;
	z-index: 10;
	float: left;
}

#text_box_wrapper_mask {
	position: relative;
	top: 0px;
	left: 0px;
	width: 450px;
	z-index:10;
	overflow: hidden;
}

.left_box_mask {
	position: relative;
	width: 220px;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic", Arial, sans-serif;
	z-index: 10;
	float: left;
	background-color: #fff;
}

.right_box_mask {
	position: relative;
	width: 220px;
	margin: 0px 0px 0px 10px;
	text-align: left;
	color: #633a28;
	font: 12px "Century Gothic", Arial, sans-serif;
	z-index: 10;
	float: left;
	background-color: #fff;
}

.content_logo_mask {
	position: absolute;
	top: 20px;
	right: 7px;
	width: 140px;
	height: 40px;
	float: right;
	z-index: 10;
	margin: 0px 40px 0px 0px;
}

.headline_mask {
	position: relative;
	top: 0px;
	left: 10px;
	width: 250px;
	z-index: 10;
	text-align: left;
	color: #e07903;
	font: bold 21px "Century Gothic Bold", Arial, sans-serif;
}

a.links_mask:link {
	z-index: 10;
	text-decoration: none;
	font: 12px "Century Gothic", Arial;
	color: #633a28;
}

a.links_mask:hover {
	z-index: 10;
	text-decoration: none;
	font: 12px "Century Gothic", Arial;
	color: #e07903 !important;
}

a.links_ueber_uns:link {
	z-index: 10;
	text-decoration: none;
	font: 12px "Century Gothic Bold", Arial;
	color: #633a28;
}

a.links_ueber_uns:hover {
	z-index: 10;
	text-decoration: none;
	font: 12px "Century Gothic Bold", Arial;
	color: #e07903 !important;
}

.email_padding {
	position: relative;
	top: 15px;
}

.email_padding2 {
	position: relative;
	top: 30px;
}

#image_around_wrapper {
	position: relative;
	top: 50px;
}