@charset "utf-8";  /* Dunkel - Style */
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #000000; /* schwarz */
	color: #FFFFFF;      /* weiss */
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
}
/* Accessiblility */
.hidden, .unseen
{
	display: inline;
	height: 0px;
	left: -3000px;
	position: absolute;
	top: -2000px;
	width: 0px;
	z-index: 200;
}
#accessible ul {  /*.unseen Versuch großen Abstand oben weg zu bekommen */
 	list-style-type: none;
	margin:-2em;
	padding: 0;
/*	text-decoration:none; */
}
ul li a.unseen:focus,li a.unseen:active {
	padding:0.5em;
	background:#FFFFFF;
	color:#000000;
	display:inline;
	height:2.5em;
	left:0;
	margin-top:0;
	padding-left:15px;
	position:absolute;
	top:0;
	width:13.8em;
}
	/* shadow */
	
/*DIV.shadow, DIV.shadow2, DIV.shadow3, DIV.shadow4, DIV.shadow5 {
   padding: 1px;
   border-radius: 10px;
   -moz-border-radius: 10px;
   } */
div.shadow {
   border: 1px solid transparent;
   margin: 0px;
   }
div.shadow2 {
   border: 1px solid #f6f6f6; /* fast weiss */
   margin: 0;
   }
div.shadow3 {
   border: 1px solid #e1e1e1; /* mittel grau */
   margin: 0;
   }
div.shadow4 {
   border: 1px solid #bebebe; /* dunkel grau */
   margin: 0;
   }
div.shadow5 {
   border: 1px solid #959595; /* ganz dunkel grau */
 }

#container {
	width: 80%;  /* Hierdurch wird ein Container mit einer Breite erstellt, die 80% der Browserbreite beträgt. */
	background: #333333;  /* dunkelgrau */ 
	margin: 10px auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
	border:	3px solid #EAEAEA; 	/* ganz hell grau */
	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
}	
#header {
/*	background: #333333;   dunkelgrau */ 
/*	padding: 0 10px 0 20px; 10px 10px 0 20px; Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
	overflow: hidden;
}

#header h1 {
	margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
	padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
	font-size: 1.5em;  /* 2em; */
	line-height:1em;
}

#header h2 {
	font-size:1.5em; 
	margin:-0.5em 0 1em 0;
}

#printtext { display: none; }

#logo .imglogo{
	margin: -10px 0 15px 20px;  /* 40px 0 0 10px; */
	padding:0;
	background: #333333 url(img/spectrum_logo_w.png) no-repeat top center;	
	width: 200px; 
	height: 144px;
	float:left;	/* headline umfließt das Bild */
	border:0;
}
#headline {
/*	float:left;  fontsize umfließt die Überschriften */
	float:right;
	width:64%;
	padding: 0; /*  0 2em; */
	margin: 25px 90px 0 0;  /*  margin: 60px 140px 0 0; */
/*	font-size:0.75em; */
}

#fontsize {
/*	float:right; */
/*	width: 14%; */
/*	line-height: 2em; */
	border:0;
	text-align:right;
	margin: 0;
	padding:-1em 0;
}

/* #fontsize h3, p {
	border:0;
	font-size:1em;
} 

#fontsize p a {
	margin:0;
	text-align: right;
}*/

#fontsize img { margin:3px; }

/* background-images */
/* #fontsize p a.larger {
background:none 
}

#fontsize p a.smaller {
background:none
}

#fontsize p a.reset {
background:none
}

#fontsize p a.larger:hover,#fontsize p a.larger:active,#fontsize p a.larger:focus {
background:#000;
color:#fff;
}

#fontsize p a.smaller:hover,#fontsize p a.smaller:active,#fontsize p a.smaller:focus {
background:#000;
color:#fff;
}

#fontsize p a.reset:hover,#fontsize p a.reset:active,#fontsize p a.reset:focus {
background:#000;
color:#fff;
}
*/

#clearspace {
	clear:left; 
	margin:0;
	padding:0;
/*	margin: 5px 0; */		
/*	border-buttom: 4px #FFFFFF solid; /*hellgrau */
}

#navi {
	margin: -5px 0 0 0; /* s.o. margin im #header */
	text-align: right;
	font-size:0.8em;
	border-top: 4px #EAEAEA solid; /* hellgrau */
}

#navi ul {
	background:#000000;
	display:block;
	margin: 0 0;  /* margin:-7px 0 -2px; */
	padding:5px 0;
	text-align:right;
	border-bottom: solid 5px #CCCCCC; /* dunkelgrau */
}

#navi ul li {
/*	background:#FFFFFF;
	color:#000000; */
	display:inline;
	text-align:center;
	list-style-type: none;	
/*	border-bottom: solid 5px #999999;  dunkelgrau */
}

#navi ul li a:link, #navi ul li a:visited {
	background:#000000;
	color:#FFFFFF;
	border-right:solid 1px #EAEAEA;  /*#666;  */	
	line-height:1.5em;	
	text-decoration:none;	
	padding:5px 10px;
	font-weight:bold;
}
/*:first-child+html #merker { wird von IE 7 interpretiert ???!!!
    font-weight: normal;
} */

#navi ul li a.navi_class1:hover, #navi ul li a.navi_class1:focus,  #navi ul li a.navi_class1:active {
	border-bottom: solid 5px #FF0000; /* rot */
}
#navi ul li a.navi_class2:hover, #navi ul li a.navi_class2:focus,  #navi ul li a.navi_class2:active {
	border-bottom: solid 5px #FF9900; /* orange */
}
#navi ul li a.navi_class3:hover, #navi ul li a.navi_class3:focus,  #navi ul li a.navi_class3:active {
	border-bottom: solid 5px #FFFF00; /* gelb */
} 
#navi ul li a.navi_class4:hover, #navi ul li a.navi_class4:focus,  #navi ul li a.navi_class4:active {
	border-bottom: solid 5px #00FF00; /* grün */
}
#navi ul li a.navi_class5:hover, #navi ul li a.navi_class5:focus,  #navi ul li a.navi_class5:active {
	border-bottom: solid 5px #0000FF; /* blau */
}
#navi ul li a.navi_class6:hover, #navi ul li a.navi_class6:focus,  #navi ul li a.navi_class6:active {
	border-bottom: solid 5px #6600FF; /* lila */
} 

#navi ul li a.navi_class1_on {
	border-bottom: solid 5px #FF0000; /* rot */
}
#navi ul li a.navi_class2_on{
	border-bottom: solid 5px #FF9900; /* orange */
}
#navi ul li a.navi_class3_on {
	border-bottom: solid 5px #FFFF00; /* gelb */
} 
#navi ul li a.navi_class4_on {
	border-bottom: solid 5px #00FF00; /* grün */
}
#navi ul li a.navi_class5_on {
	border-bottom: solid 5px #0000FF; /* blau */
}
#navi ul li a.navi_class6_on {
	border-bottom: solid 5px #6600FF; /* lila */
} 

#navi ul li a:hover,#navi ul li a:active,#navi ul li a:focus
{
	background:#FFFFFF;
	color:#000000;
	font-weight:bold;
}

#mainContent {
	padding: 10px 30px; /* 0 20px padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
	overflow: hidden;
/*	border: 2px solid #000000; */
}

#mainContent h1{
	font-size:1.3em;
}
#mainContent h2{
	font-size:1.1em;
	margin:2em 0 0.75em 0;
}
#mainContent h3{
	font-size:1em;
	font-weight:bold;	
}
#mainContent h4{
	font-size:1em;
	margin:2em 0 0.5em 0;
}

#leftmainContent {
	width:70%;
	float:left;
}
#leftmainContent ul{
	list-style-type:square;
}

#leftmainContent a.listheader:link, a.listheader:visited {
/*	color:#000000; */
	text-decoration:none;
	font-weight:bold;	
	color:#FFFF00;	/* gelb */
}
#leftmainContent a.listheader:hover, a.listheader:active, a.listheader:focus {
	background:#FFFFFF;
	color:#000000;
	text-decoration:none;
}

#leftmainContent img.foto{
	float:left;
	border:	3px solid #EAEAEA; 	/* ganz hell grau */
}
#leftmainContent img.button{
	border:0;
	vertical-align:middle;
	width:1.5em;
	height:1.5em;
}
#leftmainContent p, li{line-height:1.4em;}
#leftmainContent p.img-kontakt, h3.img-kontakt{
	float:right;
	margin: 0.5em 1em 0 0;
	width: 48%;
	line-height:1.4em;
}
#leftmainContent h3.img-kontakt{ 
	font-weight:bold;	
	color:#FFFF00;	/* gelb */	
}

a.email:link, a.email:visited, a.link_class:link, a.link_class:visited{
	text-decoration:underline;
}
.farbe      { color: #FFFF00; }  /* gelb */
.grau       { border: 3px solid #EAEAEA; } /* grau */
.start      { border: 3px solid #FF0000; } /* rot */
.team       { border: 3px solid #FF9900; } /* orange */
.wohnen     { border: 3px solid #FFFF00; } /* gelb */
.mobilitaet { border: 3px solid #00FF00; } /* grün */
.termine    { border: 3px solid #0000FF; } /* blau */
.links      { border: 3px solid #6600FF; } /* lila */
#kontakt {
	width:23%;
	float:right; 
	margin: 1.5em 0;  /* 1.5em 0; */
	padding: 10px; 
	font-weight:bold;	
}
#kontakt p { 
	font-size:0.8em; 
	margin: 1.5em 0; 
	line-height:1.3;
}
#kontakt h3{ font-size:1.1em; margin: 1.5em 0 -0.7em 0; } /* 0.3em; */
#kontakt img{ 
	border:2px solid #EAEAEA;
    display: block;
    margin: 0 auto;
}

#kontaktdetail {
	width:23%;
	float:right;  
	margin: 1.5em 0;  /* 1.5em 0; */
	padding: 10px; 
}
#kontaktdetail p { font-size:0.8em; margin: 1.5em 0; }
#kontaktdetail ul { 
	font-size:0.8em; 
	margin-top: 1.5em; 
	margin-left:0.3em; 
	padding-left:0.3em;
	list-style-type:square;
}
#kontaktdetail h3{ font-size:1.1em; margin: 1.5em 0 -0.7em 0; } /* 0.3em; */
#foto { 
	width:23%;
	float:right;  
	padding: 10px; 
}
#foto img{ 
	border:2px solid #EAEAEA;
    display: block;
    margin: 0 auto;
}

.clr {clear: both; margin: 0; padding: 0;}

#colorbar {
/*	clear:left; */
	margin: 0; /* s.o. margin im #header */
	text-align: right;
	font-size:0.8em; 
}

#colorbar ul
{
	border-top: 5px #CCCCCC solid; /* dunkelgrau */
	border-bottom: 4px #EAEAEA solid; /* hellgrau */
	padding:5px 0;
}

#colorbar ul li {
	display:inline; /* macht's in eine Reihe horizontal */
/*	background:#fff;
	color:#000; */
	font-weight:bold;
	border-right:solid 1px #EAEAEA; 
	padding:5px 10px; 
	line-height:1.5em; 
}

/* Fläche davor rot */
#colorbar ul li.navi_class0 {
	background:#FF0000;
	color:#FF0000;
/*	border-right:solid 1px #FF0000; */
}

/* rot */
#colorbar ul li.navi_class1 {
	background:#FF0000;
	color:#FF0000;
/*	border-right:solid 1px #FF0000; */
}

/* orange */
#colorbar ul li.navi_class2 {
	background:#FF9900; 
	color:#FF9900;
/*	border-right:solid 1px #FF9900; */
}
/* gelb */
#colorbar ul li.navi_class3 {
	background:#FFFF00;
	color:#FFFF00;
/*	border-right:solid 1px #FFFF00; */
}
/* grün */
#colorbar ul li.navi_class4 {
	background:#00FF00;
	color:#00FF00;
/*	border-right:solid 1px #00FF00; */
}
/* blau */
#colorbar ul li.navi_class5 {
	background:#0000FF;
	color:#0000FF;
/*	border-right:solid 1px #0000FF; */
}
/* lila */
#colorbar ul li.navi_class6 {
	background:#6600FF;
	color:#6600FF;
/*	border-right:solid 1px #6600FF; */
}

#footer { 
/*	padding: 0 10px;  Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
/*	background: #FFFFFF; */
	font-size: 0.8em;
}
#footer p {
	margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
	padding: 10px 0;  /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
}
#footer ul li {
	margin: 0;
	padding:10px 0;
	list-style-type: none;
	display:inline; /* -block; */
	margin-top: 5px; 
	margin-bottom: 5px;	 
	padding-right: 3em; 
} 

#footer li a:link, #footer li a:visited { padding:10px 15px; }
#footer li a:hover, #footer li a:active, #footer li a:focus { padding:10px 15px; }
#footer a.navi_class_on {
	background:#FFFFFF;
	color:#000000;
	text-decoration:none;
}

a:link,a:visited
{
	color:#FFFFFF;
	text-decoration:none;
}
a:hover,a:active,a:focus
{
	background:#FFFFFF;
	color:#000000;
	text-decoration:none;
}