/* CSS Document */
* {
margin: 0;
padding: 0;
}

 /* 
 --------------------------------------
 Start HTML-Tag-Selektoren
 --------------------------------------
 */
 
html {  /* Scrollbar wird bei jeder Textlänge angezeigt -> Container "springt" in Firefox nicht*/
overflow: scroll; 
}
body {
background-color: #02364c;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #02364c;
}
h1 {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #066480; 
font-weight: bold;
text-transform: uppercase;
padding: 10px;
}
h2 {
font-size: 12px;
color: #02364c;
font-weight: bold;
padding-left: 10px;
padding-bottom: 2px;
}
p {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
line-height: 120%;
} 
a {
color: #066480;  
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #066480;
text-decoration: underline;
font-weight: bold;
}
img {
border: 0px;
}
address {
margin: 0 auto;
width: 800px;
height: 20px;
background-color: #02364c;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #a1b9c3;
text-align: center;
padding-top: 5px;
}
address a {
text-decoration: none;
font-weight: normal;
color: #a1b9c3;
}
address a:hover {
text-decoration: underline;
font-weight: normal;
color: #a1b9c3;
}

/* 
 --------------------------------------
 Ende HTML-Tag-Selektoren 
 --------------------------------------
*/ 
 

/* 
 --------------------------------------
  Start Grundgerüst (ohne Nav.)
 --------------------------------------
*/ 
 
#container {
width: 800px;
margin: 0 auto;
background-image: url(../pics/bgr_faux_columns.gif); /* Für Faux-Columns-Technik, damit Content und Sidebar mitwachsen */
background-repeat: repeat-y;
display: table; /* Für Faux-Colums im Firefox */
}
#spacing_top {
background-color: #02364c;
height: 30px;
width: 800px;
}
#header_logo {
top: 30px;
float: left;
width: 270px;
height: 240px;
cursor: pointer;
}
#header_image {
top: 30px;
float: right;
width: 530px;
height: 240px;
}
#content {
float: left;
width: 520px;
background-image: url(../pics/bgr_content.gif);
background-repeat: no-repeat;
background-color: #e2e1cd;
border-top: 10px solid #f4f2dd;
border-left: 10px solid #f4f2dd;
border-right: 10px solid #f4f2dd;
}
.sidebar_teaser {
float: right;
width: 250px;
height: 110px;
font-size: 11px;
background-image: url(../pics/bgr_sidebar_teaser.gif);
background-repeat: no-repeat;
background-color: #e2e1cd;
border-right: 10px solid #f4f2dd;
border-top: 10px solid #f4f2dd;
}
#sidebar_logo { 
float: right;
width: 250px;
height: auto;
background-image: url(../pics/bgr_sidebar_deco.gif);
background-repeat: no-repeat;
background-color: #a1b9c3;
border-right: 10px solid #f4f2dd;
border-top: 10px solid #f4f2dd;
}
#footer {
clear: both;
height: 33px;
background-image: url(../pics/footer.gif);
background-repeat: no-repeat;
}

/* 
 --------------------------------------
  Ende Grundgerüst ohne Nav. 
 --------------------------------------
*/  



/* 
 --------------------------------------
 Start Navigation 
 --------------------------------------
*/ 

#navbar {
clear: both;
height: 30px;
background-color: #f4f2dd;
border-left: 10px solid #f4f2dd;
border-right: 5px solid #f4f2dd;
}
#navbar ul {
list-style: none;
}
#navbar li {
position: relative; /* löst Problem des nicht angezeigten border-bottom in ie7*/
float: left;
width: auto;
border-bottom: 1px solid #f4f2dd;
}
#navbar a {
float: left;
width: auto;
background-image: url(../pics/bgr_nav_left.gif); /* Linker Bildtteil für Sliding-Doors-Technik */
background-repeat: no-repeat;
background-position: left top;
padding-left: 18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
color: #e2e1cd; 
border-right: 1px solid #f4f2dd;
}
#navbar a:hover {
background-position: 0% -150px;
color: #066480;
}
#navbar li.current {
border-bottom: 1px solid #a1b9c3;
}	   
#navbar li.current a {
background-position: 0% -150px;
color: #066480;
}
#navbar li.current a span {
background-position: 100% -150px;
}
#navbar a span {
float: left;
width: auto;
background-image: url(../pics/bgr_nav_right.gif); /* Rechter Bildteil für Sliding-Doors-Technik */
background-repeat: no-repeat;
background-position: right top;
padding-top:7px;
padding-bottom: 7px;
padding-right: 18px;
}
#navbar a:hover span {
background-position: 100% -150px;
cursor: pointer;
}

/* 
 --------------------------------------
 Ende Navigation 
 --------------------------------------
*/




/* 
 --------------------------------------
 Start Subnavigation 
 --------------------------------------
*/

#subnavbar {
clear: both;
width: auto;
height: 30px;
background-color: #a1b9c3;
border-left: 10px solid #f4f2dd;
border-right: 10px solid #f4f2dd;
}
#subnavbar_no_link {    /* Schmale Subnavigation, wenn keine Links */
clear: both;
width: auto;
height: 10px;
background-color: #a1b9c3;
border-left: 10px solid #f4f2dd;
border-right: 10px solid #f4f2dd;
}
#subnavbar ul {
list-style: none;
}
#subnavbar li {
float: left;
width: auto;
}
#subnavbar li a {
float: left;
padding-top: 7px;
padding-left: 18px;
padding-right: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #02364c;
text-decoration: none;
}
#subnavbar li a:hover {
color: #066480;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
#subnavbar li.current a {
color: #066480;
font-weight: bold;
text-decoration: none;
}

/* 
 --------------------------------------
 Ende Subnavigation 
 --------------------------------------
*/


/* 
 --------------------------------------
 Start div. Classes zu Textteilen
 ---------------------------------------
*/

.h2_teaser {
font-size: 11px;
color: #02364c;
font-weight: bold;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 2px;
}

.list {     /* Weil li-Tag schon bei Navigation verwendet wurde, wird undefinierter Liste hier Klasse gegeben */
padding-left: 30px;
padding-top: 5px;
}
ul.list li {
padding-bottom: 10px;
}

/* 
 --------------------------------------
 Ende div. Classes zu Textteilen
 ---------------------------------------
*/



/* 
 --------------------------------------
 Start Classes für div. Bilder
 ---------------------------------------
*/

.contentpic_big {  /* Grosses 200px-Inhaltsbild rechtsbündig */
width: 200px;
float: right;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
.contentpic_small {  /* Kleines 125px-Inhaltsbild linksbündig */
width: 125px;
float: left;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
.contentpic_small_pop {  /* Kleines 125px-Inhaltsbild linksbündig, mit Pointer */
width: 125px;
float: left;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
cursor: pointer;
}
.logopic {  /* Logos im Sidebar-Logo-Bereich sollen zentriert sein */
text-align: center;
}
.teaserpic {  /* Kleines 90px-Bild für Teaser */
float: right;
width: 90px;
padding: 10px;
}
.popuppic {   /* Pop-Up mit 400px-Bild und hellem Rahmen */
height: 440px;
background-color: #f4f2dd;
border-top: 10px solid #f4f2dd;
border-left: 10px solid #f4f2dd;
border-right: 10px solid #f4f2dd;
}
.popuppic p {    /* Platziert Icon und Text fürs Fenster schliessen */
padding-top: 5px;   
padding-right: 0px;
text-align: right;
}

/* 
 --------------------------------------
 Ende Classes für div. Bilder
 ---------------------------------------
*/



/* 
 --------------------------------------
 Start Classes für zweispaltige Tabellen-ähnliche Layouts und Kontaktformular
 ---------------------------------------
*/

.table_data_left {
width: 150px;
height: 30px;
float: left;
}
.table_data_right {
width: 370px;
height: 30px;
float: right;
position: relative;
}
.table_data_right_comments {   /* Diese Klasse ist höher und so ideal für Mitteilungs-Feld in Formular */
width: 400px;
height: 120px;
float: right;
position: relative;
}
.form_color {
background-color: #f4f2dd;
border: 1px solid #a1b9c3;
}
.button {
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
color: #02364c; 
font-weight: bold;
cursor: pointer;
}

/* 
 --------------------------------------
 Ende Classes für zweispaltige Tabellen-ähnliche Layouts und Kontaktformular
 ---------------------------------------
*/




#mapcontainer {  /* Start Spezielle ID für Einbindung map.search.ch */
float: left;
width: 500px;
height: auto;
margin-left: 10px;
}