@charset "utf-8";
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;   	/*background: #E5E2C5;  beige */ 
	/*color: #000000;  schwarz */	
	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 {
 	list-style-type: none;
	margin:-0.5em;
	padding:0;
}
ul li a.unseen:focus,li a.unseen:active {
	padding:0.5em;
	background:#000000;
	color:#FFFFFF;
	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 {
/*   background: #8e8e8e; */
   border: 1px solid #959595;
   margin: 0px;
   }
div.shadow2 {
/*   background: #aaa; */
   border: 1px solid #bebebe;
   margin: 0;
   }
div.shadow3 {
/*   background: #d1d1d1; */
   border: 1px solid #e1e1e1;
   margin: 0;
   }
div.shadow4 {
/*   background: #ededed; */
   border: 1px solid #f6f6f6;
   margin: 0;
   }
div.shadow5 {
/*   float: left; */
/*   background: #fcfcfc; */
   border: 1px solid transparent;
/*   margin: 10px 14px; */
   }

#container {
	width: 80%;  /* Hierdurch wird ein Container mit einer Breite erstellt, die 80% der Browserbreite beträgt. */
	background: #FFFFFF;  /* weiss */ 
	margin: 10px auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
	/* border:	3px solid #EAEAEA; 	 ganz hell grau  schlichter Rahmen anstatt Schatten-Rahmen */
	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
}	

#header {
	background: #FFFFFF;  /* #DDDDDD; */
/*	padding: 0 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:1.5em;
}

#header h2 {
	font-size:1.3em;  /* 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: #FFFFFF url(img/spectrum_logo.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%;  /*  50% */
	padding: 0; /*  0 2em; */
	margin: 25px 90px 0 0;  /*  margin: 25px 40px 0 0; bei 1024*768*/
/*	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:2em;
} 

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

#fontsize img { margin:3px; }

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

#fontsize p a.smaller { border:none;	}

#fontsize p a.reset { border:none; }

#fontsize p a.larger:hover,#fontsize p a.larger:active,#fontsize p a.larger:focus {
	border:	3px solid #000000; 
 background: #CCCCCC url(img/btplus.png) center top no-repeat;  
}

#fontsize a.smaller:hover,#fontsize a.smaller:active,#fontsize a.smaller:focus {
	border:	3px solid #000000; 	
}

#fontsize a.reset:hover,#fontsize a.reset:active,#fontsize a.reset:focus {
	border:	3px solid #000000; 	
}
*/

#clearspace {
	clear:left;  
	margin:0;
	padding:0;
/*	margin: 5px 0; */
/*	border-buttom: 4px red solid; #FFFFFF 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:#FFFFFF;
	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:#000;
	color:#fff; */
	display:inline;
/*	margin: 1px 1px 1px -7px;  Zwischenräume wegbekommen, klappt nicht für IE */
	text-align:center;
	list-style-type: none;	
/*	border-bottom: solid 5px #999999;  dunkelgrau */
}

#navi ul li a:link, #navi ul li a:visited {
	background:#FFFFFF;
	color:#000000;
	border-right:solid 1px #EAEAEA;  /* hellgrau  */
	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:#000000;
	color:#FFFFFF;
	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;
}
/* #mainContent p ul li{
	font-size:0.75em;
} */
#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:#0000CC;	/* blau */
}
#leftmainContent a.listheader:hover, a.listheader:active, a.listheader:focus {
	background:#000000;
	color:#FFFFFF;
/*	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:#0000CC;	/* blau */	
}

a.email:link, a.email:visited, a.link_class:link, a.link_class:visited{
	text-decoration:underline;
}
.farbe      { color: #0000CC; }	/* blau */
.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: 0 0 -0.7em 0; } /* 1.5em 0 -0.7em 0; */
#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:#FFFFFF;
	color:#000000; */
	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;  #FFCC00;  gelb */
	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:#000000;
	color:#FFFFFF;
	text-decoration:none;
}

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