/* TS-Webdesign Stuttgart
CSS für www.visuell.de

Container 626px / 626px
Start: 09.02.2009
Letzte Aenderung: 
Browserprüfung: Internet Explorer: 5.5 ; 6 ; 7  /  Firefox 3.0  /  Safari-PC 3.2  /  Netscape 7.1  /  Opera 9.6  /  Google Chrome 1.0  */  

/* Farbschema
--------------------------------------------------------------------------------------- */

/*
Farbton (Seitenhintergrund): #CDCDCD
Farbton (container): #fff
Farbton (Schriftfarbe): #000000
Farbton (Link): #505050
Farbton (Link hover): #F56600
*/

/*--------------------------------------------------------------------------------------- 
    R E S E T
--------------------------------------------------------------------------------------- */
* {
	padding: 0;
	margin: 0;
	border: 0;
}

/*--------------------------------------------------------------------------------------- 
    G L O B A L S   U N D   T Y P O 
--------------------------------------------------------------------------------------- */

html {
	/* 
Hintergrundfarbe und Hintergrundgrafik für den Seitenhintergrund
*/	
	background-color: #9F9F9F; /* Hintergrundfarbe für Seite */
	background-image: url(../bilder/grafik/bg.gif); /* Schraffur im Seitenhintergrund */
	background-repeat: repeat;
}

body {
	text-align: center; /* Container zentrieren für IE 5.x */
	font-size: small; /* Schriftgröße für standardkonforme Browser */
	margin: 30px 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}

/* Textelemente wieder links ausrichten (wegen Container zentrieren für IE 5.x) */  
body div{	
	text-align: left;
}

/* Hintergrundtext unsichtbar */ 
#container #inhalt #center_c p,
#container #inhalt #center_c h2,
#container #inhalt #center_c h3,
#container #inhalt #center_c h4 {
	color: #FFF;
}
p {
	font-size: 85%;
}
h3 {
	font-size: 85%;
}

/* Bilder und verlinkte Bilder ohne Rahmen 
--------------------------------------------------------------------------------------- */
img, a img {
	border: 0;
}

/* Links 
--------------------------------------------------------------------------------------- */
a:link, a:visited {
	color: #505050;
	text-decoration: none;
}

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

/* Macht die gepunktete Linie um geklickte Links unsichtbar (Firefox) */
a:focus { 
	outline: none;
}

/*--------------------------------------------------------------------------------------- 
    L A Y O U T 
--------------------------------------------------------------------------------------- */
#container {
	margin: 0 auto; /* Container zentrieren */
	position: relative;
	width: 634px;
}

#inhalt {
	height: 634px;
	width: 634px;
	background-image: url(../bilder/grafik/schatten.png); /* Hintergrund-Schatten */
	background-position: bottom right;
}
#top {
	clear: both;
	height: 92px;
	position: relative;
	background-color: #FFFFFF;
	width: 628px;
}

#center_c {
	position: absolute;
	width: 628px;
	height: 536px;
	background-color: #FFFFFF;
	display: block;
	visibility: visible;
}
 
/*--------------------------------------------------------------------------------------- 
    M A S T H E A D 
--------------------------------------------------------------------------------------- */

/*  Hauptnavigation
--------------------------------------------------------------------------------------- */
#top #hauptnav {
	list-style: none;
	position: absolute;
	left: 30px;
	top: 43px;
}

#top #hauptnav a {
	text-decoration: none;
	color: #505050;
}
#top #hauptnav a:hover {
	text-decoration: none;
	color: #F56600;
}
#top #hauptnav li, #hauptnav li em {
	height: 45px;
	overflow: hidden;
}
#top #hauptnav li  {
	float: left;
	position: relative;
	font-size: 0.8em;
}
#top #hauptnav em  {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

/*  Links allgemein */
#top #hauptnav .visuell em,
#top #hauptnav .kommunikation em,
#top #hauptnav .szenografie em,
#top #hauptnav .fotografie em,
#top #hauptnav .designwiese em {
	background-image: url(../bilder/grafik/hauptnav.png);
	cursor: pointer;
	background-repeat: no-repeat;
}

/*  Link VISUELL */
#top #hauptnav li.visuell, #top #hauptnav li.visuell em {
	width: 70px;	
}
#top #hauptnav .visuell em{
	background-position: 0 0;
}
#visuell #hauptnav .visuell em, #top #hauptnav .visuell :hover em, #top #hauptnav .visuell a:hover em { /* Seite aktiv - hover - a:hover für IE 5.5 und IE6 - */
	background-position: 0 -45px;
}

/*  Link KOMMUNIKATION */
#top #hauptnav li.kommunikation, #top #hauptnav li.kommunikation em {
	width: 105px;	
}
#top #hauptnav .kommunikation em{
	background-position: -70px 0;
}
#kommunikation #hauptnav .kommunikation em, #top #hauptnav .kommunikation :hover em, #top #hauptnav .kommunikation a:hover em { /* Seite aktiv - hover - a:hover für IE 5.5 und IE6 - */
	background-position: -70px -45px;
}

/*  Link SZENOGRAFIE */
#top #hauptnav li.szenografie, #top #hauptnav li.szenografie em {
	width: 80px;	
}
#top #hauptnav .szenografie em{
	background-position: -175px 0;
}
#szenografie #hauptnav .szenografie em, #top #hauptnav .szenografie :hover em, #top #hauptnav .szenografie a:hover em { /* Seite aktiv - hover - a:hover für IE 5.5 und IE6 - */
	background-position: -175px -45px;
}
/*  Link FOTOGRAFIE */
#top #hauptnav li.fotografie, #top #hauptnav li.fotografie em {
	width: 73px;	
}
#top #hauptnav .fotografie em{
	background-position: -255px 0;
}
#fotografie #hauptnav .fotografie em, #top #hauptnav .fotografie :hover em, #top #hauptnav .fotografie a:hover em { /* Seite aktiv - hover - a:hover für IE 5.5 und IE6 - */
	background-position: -255px -45px;
}
/*  Link DESIGNWIESE */
#top #hauptnav li.designwiese, #top #hauptnav li.designwiese em {
	width: 90px;	
}
#top #hauptnav .designwiese em{
	background-position: -328px 0;
}
#designwiese #hauptnav .designwiese em, #top #hauptnav .designwiese :hover em, #top #hauptnav .designwiese a:hover em { /* Seite aktiv - hover - a:hover für IE 5.5 und IE6 - */
	background-position: -328px -45px;
}


/*  Visuell - Logo 
--------------------------------------------------------------------------------------- */
h1 {
	position: absolute;
	right: 0px;
	font-size: 80%;
	width: 180px;
	height: 92px;
	overflow: hidden; /* verhindert, dass der versteckte Text beim Vergrößern sichtbar wird */

}

h1 span{
	position: absolute;
	z-index: 1;
	padding: 30px 15px 4px 6px;
	bottom: 0px;
}
h1 img{
	position: absolute;
	z-index: 2;
}

/*------------------------------------------------------------------------------------- 
    S E I T E N I N H A L T - allgemein
--------------------------------------------------------------------------------------- */

#center_c h3  {
	position: relative;
	font-size: 80%;
	height: 18px;
	overflow: hidden; /* verhindert, dass der versteckte Text beim Vergrößern sichtbar wird */
	font-weight: normal;
}
#designwiese #center_c h3  {
	padding: 100px 0 0 27px;
}
#center_c h3 span{
	position: absolute;
	width: 100%;
	height: 100%;
}
#center_c h4  {
	position: relative;
	font-size: 80%;
	height: 18px;
	overflow: hidden; /* verhindert, dass der versteckte Text beim Vergrößern sichtbar wird */
	font-weight: normal;
}
#designwiese #center_c h4  {
	padding: 0 0 0 27px;
}

#center_c h4 span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
}
.seite_info #center_c h4 {
	display: none;
}
#center_c img {
	position: absolute;
}
#center_c #bildposition1{
	top: 0px;
	left: 0px;
}
#center_c p,
#center_c dl{
	position: absolute;
	overflow: hidden;
	margin: 0;
	padding: 0;
	line-height: 1.5em;
}
#center_c p span,
#center_c dl span{
	position: absolute;
	width: 100%;
	height: 100%;
}
#center_c .links_zum_kunden {
	position: absolute;
}

/*------------------------------------------------------------------------------------- 
    Seitenwahl
--------------------------------------------------------------------------------------- */
#center_c #seitenwahl { /* Standard Positionierung */
	top: 368px;
	left: 45px;
	position: absolute;
	list-style: none;
}
#visuell #center_c #seitenwahl { /* Standard Positionierung */
	top: 511px;
	left: 598px;
	z-index: 1000;
}
#center_c #seitenwahl a {
	text-decoration: none;
	color: #505050;
}
#center_c #seitenwahl a:hover {
	text-decoration: none;
	color: #F56600;
}
#center_c #seitenwahl li  {
	float: left;
	position: relative;
	font-size: 0.8em;
}
#center_c #seitenwahl li, #center_c #seitenwahl li em {
	height: 25px;
	overflow: hidden;
}
#center_c #seitenwahl em  {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

/*  Links allgemein */
#center_c #seitenwahl em {
	background-image: url(../bilder/grafik/auswahl.gif);
	cursor: pointer;
	background-repeat: no-repeat;
}

/*  Seiten-Link */
#center_c #seitenwahl li, #center_c #seitenwahl li em {
	width: 16px;	
}
#center_c #seitenwahl em{
	background-position: 0 0;
}

/*  aktive Seite markieren  */
.seite1 #center_c #seitenwahl .seite1 em,
.seite2 #center_c #seitenwahl .seite2 em,
.seite3 #center_c #seitenwahl .seite3 em,
.seite4 #center_c #seitenwahl .seite4 em,
.seite5 #center_c #seitenwahl .seite5 em,
.seite6 #center_c #seitenwahl .seite6 em,
.seite7 #center_c #seitenwahl .seite7 em {
	background-position: 0 -25px;
}
/*  Hover-Zustand  */
#center_c #seitenwahl :hover em,
#center_c #seitenwahl a:hover em{ /*- Eintrag a:hover für IE 5.5 und IE6 - */
	background-position: 0 -25px;
}

/*  Link zur Info-Seite */
#center_c #seitenwahl li.seite_info, #center_c #seitenwahl li.seite_info em {
	width: 16px;	
}
/*  Link zurück zur Menüauswahl */
#center_c #seitenwahl li.back, #center_c #seitenwahl li.back em {
	width: 30px;
}
#center_c #seitenwahl .seite_info em{
	background-position: -16px 0;
}
#center_c #seitenwahl .back em{
	background-position: -32px 0;
}
/*  aktive Info-Seite markieren  */
.seite_info #center_c #seitenwahl .seite_info em {
	background-position: -16px -25px;
}
/*  Hover-Zustand Info-Seite  */
#center_c #seitenwahl .seite_info :hover em,
#center_c #seitenwahl .seite_info a:hover em{ /*- Eintrag a:hover für IE 5.5 und IE6 - */
	background-position: -16px -25px;
}
/*  Hover-Zustand Info-Seite  */
#center_c #seitenwahl .back :hover em,
#center_c #seitenwahl .back a:hover em{ /*- Eintrag a:hover für IE 5.5 und IE6 - */
	background-position: -32px -25px;
}

/*------------------------------------------------------------------------------------- 
    Seitennavigation bei Designwiese
--------------------------------------------------------------------------------------- */
#center_c #seitennavi .vor { /* Standard Positionierung */
	top: 20px;
	left: 314px;
	position: absolute;
	list-style: none;
	height: 516px;
}
#center_c #seitennavi .zurueck  { /* Standard Positionierung */
	top: 20px;
	left: -20px;
	position: absolute;
	list-style: none;
	height: 516px;
}
/*  Links allgemein */
#center_c #seitennavi .vor em {
	background-image: url(../bilder/grafik/pfeil_vor.gif);
	cursor: pointer;
	background-repeat: no-repeat;
}
#center_c #seitennavi .zurueck em {
	background-image: url(../bilder/grafik/pfeil_zurueck.gif);
	cursor: pointer;
	background-repeat: no-repeat;
}
/*  Hover-Zustand  */
#center_c #seitennavi :hover em,
#center_c #seitennavi a:hover em{ /*- Eintrag a:hover für IE 5.5 und IE6 - */
	background-position: 0 -536px;
}
#center_c #seitennavi a {
	text-decoration: none;
	color: #505050;
	padding-left: 50px;
	line-height: 5em;
}
#center_c #seitennavi a:hover {
	text-decoration: none;
	color: #F56600;
}
#center_c #seitennavi li, #center_c #seitennavi li em {
	height: 536px;
	overflow: hidden;
}
#center_c #seitennavi em  {
	display: block;
	position: absolute;
	z-index: 1;
}
#center_c #seitennavi li, #center_c #seitennavi li em {
	width: 336px;	
}

/*--------------------------------------------------------------------------------------- 
    B O T T O M 
--------------------------------------------------------------------------------------- */
#bottom {
	clear: both;
}
#bottom p {
	margin: 0;
	padding: 0px 0 0 2px;
	color: #323232;
	line-height: 1.5em;
	font-size: 75%;
}
#bottom a {
	color: #323232;
}
#bottom a:hover, #visuell.kontakt .kontakt, #impressum .impressum, #datenschutz .datenschutz { /* aktive Seite darstellen */
	color: #F56600;
	text-decoration: none;
}