/*Erstellt von Thomas Gantenbein*/

/*Allgemeine Elemente*/
html *{
margin:0;
padding:0;
}


body{
font-family: "Trebuchet MS", Arial, sans-serif;
font-size:100%;
border:0;
padding:0;
background-color:#d5d5dc;
}


h1, h2, h3, h4{
padding-top:0.2em;
padding-bottom:0.3em;
border:0;
margin:0;

}


h1{
font-size:140%;

}

h2{
font-size:100%;
}

h3{
font-size:90%;
}

p{

border:0;
padding-bottom:1em;
line-height:1.5em;
font-size:90%;
}

hr{
margin-top:0;
background-color:#d5d5dc;
margin-bottom:1em;
height:2px;
}

.kopf{
margin-right:auto;
margin-left:auto;
margin-top:2.5em;
width:53.4em;

}


.kopfgrafik{
width:53.4em !important; 
margin:0em;
border:0em !important;
padding:0em !important;
}


.wrapper{

margin-right:auto;
margin-left:auto;
margin-top:1em;
margin-bottom:2em;
width:53.5em;
padding-bottom:2em;
padding-top:0em;
background-color:white;
border:1px solid #0356b0;
}



/*Tabellen*/

table{
border-collapse:collapse;
font-size:90%;
}


/*beide table h2 und #vorstand table td speziell für die Vorstandsseite*/
table h2 {
margin-bottom:-0.8em;
}

#vorstand table td{
height:1.5em;
}

td{
padding-right:1em;
padding-left:0.3em;
height:1.6em;
border:none;
vertical-align:top;

}

/*für CD-Shop*/
td.fett{
font-weight:bold;
}

td.time{
text-align:right;
}

#shop table{
width:37em;
margin-bottom:1em;
}

th{
font-weight:bold;
padding-bottom:0.5em;
padding-top:1em;
text-align:left;
}




/*Bilder*/

/*für alle Browser ausser Explorer 6*/
#slide img.querformat{
padding:3px;
border:1px solid #9b9b9b;
background-color:#d3d3d3;
height:30em;
width:auto;
}

#slide img.hochformat{
padding:3px;
border:1px solid #9b9b9b;
background-color:#d3d3d3;
height:40em;
width:auto;
}


/*für Explorer 6, weil er sonst die Bilder verzerrt*/
* html #slide img.querformat{
padding:3px;
border:1px solid #9b9b9b;
background-color:#d3d3d3;
width:42em;
height:27.6em;
}

* html #slide img.hochformat{
padding:3px;
border:1px solid #9b9b9b;
background-color:#d3d3d3;
width:25em;
height:38em;
}



#slide p{
margin-right:auto;
margin-left:auto;
text-align:center;
width:50em;

}

#slide h1{
margin-top:2em;
padding-bottom:1em;
text-align:center;
}


img{ 
margin-bottom:1em;
width:38em;
}

.portraet{
float:left;
width:8em;
margin-right:1em;
margin-bottom:0;
margin-top:0.3em;
}

.cd{
width:16em;
}

#galerie img, #album img{
width:8.8em;
padding:3px;
border:1px solid #9b9b9b;
background-color:#d3d3d3;
vertical-align:middle;
}

.albenmehrspaltig{
float:left;
margin-right:2em;
}

#album h2, #shop h2{
border-top:1px dashed #9b9b9b;
padding-top:0.5em;
margin-top:0.4em;
}

#rodel img{
margin-bottom:1em;
width:38em;
border:0;
padding:0;
}


/*Navigation*/

#navigation{
float:left;
width:5em;
margin-right:-13em; /*sonst spinnen Explorer und Firefox*/
margin-left:2em;
white-space:nowrap; /*ohne diese Angabe spinnt Opera, wenn "Konzerte/Anlässe" fett wird*/
margin-top:1.5em;
background-color:white;
padding-top:0.3em;
}



#navigation *{
list-style-type:none;
}


#navigation a{
color:#0356b0;
}


#navigation li{
padding:0;
margin:0;
padding-bottom:0.5em;

}


#navigation li ul {
display:none;
}

#navigation li ul.visible{
display:block;
padding-bottom:0.1em;
padding-top:0.3em;
margin-top:-0.1em;
}


#navigation li ul.visible li{
background-color:white;
padding-left:1em;
padding-bottom:0.4em;
line-height:1.2em;
font-size:80%;
}


/*Inhaltsbox*/
#inhalt{
margin-left:13em;
padding:0em;
padding-top:0.5em;
width:34.75em;
background-color:white;
border-left:1px solid #0356b0;
padding-left:0.5em;
min-height:20em;
}


* html #inhalt{ /*für Internet-Explorer bis Version 6 (interpretiert kein min-height)*/   
padding-bottom: 5em;   
}




#inhalt ul{
padding-left:1em;
padding-bottom:1em;
}


/*Balken über Inhaltsbox*/
#balken{
margin-top:1.5em;
margin-left: 13em;
width:34.75em;
height:1.5em;
padding-left:0.5em;
padding-top:0.1em;
padding-bottom:0.1em;
background-color:#0356b0;
color:white;
border-left:1px solid #0356b0;
}

#balken a{
color:white;
font-size:80%;
}

#balken a:hover{
text-decoration:none;
}

/*Links*/

a:hover {
text-decoration:underline !important;
}

a:visited, a:link{
color:#0356b0;
text-decoration:none
}

/*Link vor der Navigation, damit Screenreader die Navigation überspringen können*/
a.invisible {
position:absolute;
left:-1000px;
color:#d5d5dc;
}


/*Folgender Absatz sorgt für die Einfärbung des aktuellen Navigationspunktes. Beispiel:  
direktion.htm schliesst den Inhalt in div ein, das mit "direktion" bezeichnet ist. Jeder  
Navigationslink hat ausserdem eine gleichnamige Klasse. Sobald sich der Link der Klasse "direktion"  
im div-Bereich namens "direktion" befindet, wird er schwarz.*/

#home .home, #anlaesse .anlaesse, #konzertkalender .konzertkalender, #jubilaeum .jubilaeum, #presse .presse, 
#verein  .verein, #direktion .direktion, #besetzung .besetzung, #praesidium .praesidium, #vorstand .vorstand,  
#goenner .goenner, #musikkommission .musikkommission, #intern .intern, #adressliste .adressliste,  
#probenplan .probenplan, #repertoire .repertoire, #diverses .diverses, #album .album, #absenzmeldung  
.absenzmeldung, #service .service, #notenblatt .notenblatt, #shop .shop, #galerie .galerie,  
#gaestebuch .gaestebuch, #kontakt .kontakt{
color:#0356b0 !important;
text-decoration: none;
font-weight:bold;
}