/* 25.08.2005
-------------------------------------------------------------- */

* {
padding : 0;
margin : 0;
}

html, body {
margin: 0; 
padding: 0;
font: small 'trebuchet ms', arial, helvetica, sans-serif; 
color: #330000;
font-size: x-small; /* IE5 Win */
voice-family: "\"}\""; 
voice-family: inherit;
font-size: small;
}
html>body { /* be nice to Opera */
font-size: small;
}

body {
padding-left: 10px;
}

a:link {
color: #00f;
}
a:visited {
color: #666;
}

img {
border: 0;
}

h1 a:link, h2 a:link, h1 a:visited, h2 a:visited {
text-decoration: none;
color: #666;
}

a.blaettern:link, a.blaettern:visited { /* Termine */
color: #ef1d25;
}


#header, #rubrik, #main, #footer {
width: 770px;
}


.skip a, .hidden {
position: absolute;
overflow: hidden;
top: -1000px;
width: 1px;
height: 1px;
}

.skip a:active, .skip a:focus {
position: absolute;
z-index: 1000;
overflow: visible;
width: auto;
height: auto;
color: #ef1d25;
top: 15px;
left: 350px;
}
	

/* LISTE IM HAUPTTEIL 
------------------------------------------------ */ 

#inhalt ul {
position: relative;
margin: 10px 0 0 0;
list-style: none;
}

#inhalt li {
margin: 0;
padding: 5px 0 8px 12px; /* nach nur acht wegen underline nach unten */
background: url(img/reddot.gif) 0 0.8em no-repeat;
border-bottom: 1px dashed #b1c4d7;
font-size: 85%;
line-height: 130%;
}

#inhalt li a { 
font-weight: bold;
}

/* AUSNAHME wenn h3 vor Liste steht, z.B. bei weitere Texte zum Thema */
ul.weitere li {
border-top: 1px dashed #b1c4d7;
border-bottom: 0 !important; /* schaltet allgem. regel ab */
}

#inhalt li ul {
margin: 0;
}

/* Sitemap 2. Ebene */
#inhalt li ul li {
padding-left: 25px;
padding-bottom: 5px;
background: transparent;
font-weight: normal;
border: none;
font-size: 100%;
}

/* Sitemap 3. Ebene */
#inhalt li ul li ul li {
padding-bottom: 0;
}


/* Kontakt | Impressum | Sitemap | */
ul#siteinfo { 
position: absolute; 
right: 15px; 
bottom: 7px;
list-style: none;
font-size: 85%;
}
ul#siteinfo li {
padding: 0 0 0 5px;
margin: 0;
background: transparent;
display: inline;
border: 0;
font-weight: normal;
}
html>body ul#siteinfo li { /* kein padding fuer Gecko */
padding: 0;}

ul#siteinfo li:after { /* funktioniert nur in Gecko */
content: " | ";
}

/* Liste Termine, Vorort und Personen */
dl.termine, dl.touretappen, dl.vorort, dl.person, .links dl {
margin: 0 0 0 0;
}
.termine dt, .touretappen dt, .vorort dt, .person dt, .links dt {
margin: 10px 0 0 0;
font-weight: bold;
}
.termine dd, .touretappen dd, .vorort dd, person dd, .links dd {
padding: 3px 0 3px 0;
border-bottom: 1px dashed #b1c4d7;
}


/* KOPF 
-------------------------------------------------- */

#header {
position: relative;
height: 100px;
}

#header a.logo { font-size: 200%; font-weight: bold; color: #fff;  } 

#header img { 
margin: 10px 0 0 18px;
background: #ef1d25; 
vertical-align: top;
}

/* Anzeigen */
#banner {
position: absolute;
right: 0;
top: 10px;
margin: 0;
padding: 0;
}
#banner img {
margin: 0;
padding: 0;
background: #fff;
}


/* RUBRIK und PROMO 
-------------------------------------------------- */

#rubrik {
height: 112px; 
background: #b1c4d7 url(img/rubrikpromo.gif) top left no-repeat;
position: relative;
clear: left;
}

#rubrik strong {
float: left;
margin: 40px 0 0 35px;
line-height: 1em;
font: normal 32px 'lucida console', 'trebuchet ms', arial, helvetica, sans-serif;
letter-spacing: 0.05em;
color: #fff;
}
#rubrik strong.zulang {
font-size: 28px;
}

dl#promo {
position: absolute;
top: 14px;
right: 0;
vertical-align: top;
}

dl#promo dt, dl#promo dd {
height: 70px;
}

dl#promo dt {
float: left;
width: 105px;
overflow: hidden; /* Schutz vor zu grossen Bildern */
}

dl#promo dd {
float: left;
/*width: 8em; */ /* fluide breite beim vergroessern der schrift */
/*background: #ef1d25;*/
margin-right: 15px;
display: table;
}

dl#promo dd p { /* um box model hack zu vermeiden */ 
padding: 0 5px;
font-size: 105%;
vertical-align: middle;
display: table-cell;
}

dl#promo dd a, dl#promo dd a:visited { /* verlinkte Schrift = weiss */
color: #fff;
text-decoration: none;
}

/* MAIN  
-------------------------------------------------- */
#main {
position: relative; 
clear: left;
margin-top: 20px;
}

/* Navigation 
--------------------- */
div#navigation {  /* div fuer ie 5.x absolute ul vertraegt er nicht */
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 140px;
}

ul#nav {
margin: 0; 
padding: 3px 0 0 0;
list-style: none;
font-size: 85%;
background: #b1c4d7;
}

#nav li { /* bezieht sich auch auf li li */
margin: 0 0 0 0;
padding: 0;
background: #b1c4d7; /* ie braucht einen bg um dashed zu kreieren */
width: 140px;
border-top: 1px dashed #fff;
}

#nav li a { /* fuer kompletten hover-Effekt */
padding: 4px 0px 3px 15px; /* kein margin sonst verschiebt sich der hover und die klickflaeche */
margin: 0;
display: block;
color: #000;
text-decoration: none;
font-weight: bold;
width: 140px; /* fuer ie 5.x box model prob */
voice-family: "\"}\""; 

voice-family: inherit;
width: 125px;
}
html>body #nav li a { /* be nice to Opera */
width: 125px;
}

#nav li a.standort { /*standortmarkierung nav */
background: #b1c4d7 url(img/marker.gif) 0 50% no-repeat;
}

#nav li a:hover {
color: #fff;
background: #b1c4d7 url(img/marker.gif) 0 50% no-repeat;
}

#nav li ul { /* zweite veschachtelte UL */
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li ul li a { /* li der unternav */
padding: 3px 0 3px 30px;
margin: 0;
font-weight: normal;
width: 140px: /* fuer ie 5.x box model prob */
voice-family: "\"}\""; 
voice-family: inherit;
width: 110px;
}
html>body #nav li a { /* be nice to Opera */
width: 110px;
}


/* INHALT / Mittelblock
------------------------ */

#inhalt {
position: relative; 
clear: left;
margin-left: 160px;
width: 438px;
}

.anreisser1, .anreisser2 {
display : inline;
float : left;
padding: 0;
width: 214px;
}


.anreisser1 {
clear: left; /* stop float des Aufmachers - neue Zeile fuer Unteraufmacher */
}

.anreisser2 {
margin-left: 10px; /* abstand zwischen beiden Unteraufmachern */
margin-right: 0;
}

p { 
margin: 10px 0 0 0; /* parallel zum image */
text-align: justify;
}

.anreisser1 p, .anreisser2 p {
clear: both;
}


p.vorspann {
font-weight: bold;
}

#gaestebuch p.vorspann {
border-top: 1px dashed #b1c4d7;
padding: 10px 0 0 0;
}

.datum {
font-size: 85%;
color: #666;
margin: 0;
padding: 0;
}

#gaestebuch .datum {
font-size: 100%;
font-weight: normal;
}

.mehr { 
margin: 0;
}

.mehr a:after { /* Artikel-lesen-Link */
content: "\00A0\203A\203A";
}

/* Suchergebnisse
------------------- */
p.suche { /* suchergebnisse - strichellinie als trenner */
margin: 0;
padding: 0;
padding-bottom: 20px;
border-bottom: 1px dashed red;
}

#suche p em { /* suchergnisse - markiertes Wort */
background: #b1c4d7;
font-style: normal;
}

.weiter { /* Weiter-Navigation z.B. unter Suchergebnisliste */
clear: left;
padding-top: 8px;
text-align: right;
}



/* Trennlinie 
-----------------*/
hr {
clear: left; 
margin: 20px 0 0 0;
height: 1px; 
color: #fff; 
background-color: #fff; 
border-top: 1px #f00 dashed; /* prob: firefox macht immer ein 1px grau */
}
html>body hr { /* nur fuer firefox und co. mit background image */
border: none;
padding: 20px 0 0 0;
margin: 0;
background: #fff url(img/reddashed.gif) left bottom repeat-x;
}


/* Bilder 
--------------- */

#inhalt img.image {
float: left; 
margin: 15px 10px 0px 0;
}

.anreisser1 img, .anreisser2 img {
display: block;
float: none;
clear: both;
padding-bottom: 8px;
}

#inhalt img.icon { /* print icon */
float: right; 
margin: 0;
padding: 0;
}

dl.bild { /* Bild mit Bildunterzeile */
float: left;
/* margin: 5px 10px 2px; */
margin: 0 -10px 2px 0; /* fuer ie */
padding: 0;
}
html>body dl.bild {
margin-right: 10px; /* entgegen ie vererbungs-bug */
}

dl.bildrechts {
float: right;
margin: 0 0 0 10px;
padding: 0;
}

dl.bild img, dl.bildrechts img {
float: none;
display: block;
margin: 0; 
padding: 3px;
border: 1px dashed #b1c4d7;
}
dl.bild dt, dl.bildrechts dt {
margin: 0;
padding: 0;
}
dl.bild dd, dl.bildrechts dd {
clear: both;
margin: 2px 0 0 0;
padding: 2px 4px;
font: 85%/1.2em 'trebuchet ms', verdana, sans-serif;
background: #b1c4d7;
}


/* Fotogalerie 
------------------------------------- */

/* Index */

.fotos {
float: left;
margin: 10px 25px 0px 0px; /* abstand nach oben wie p */
padding: 3px;
border: 1px dashed #b1c4d7;
width: auto;
height: 108px; /* vorher auto */
}

.qf img {
width: 100px;
height: 75px;
margin: 12px 0px;
padding: 0;
border-size: 0;
}

.hf img {
width: 75px;
height: 100px;
margin: 0px 12px;
padding: 0;
border-size: 0;
}

/* Fotoansicht */

#foto {
width: 438px;
position: relative;
padding: 9px 0 0 0;
margin: 35px 0 0 0;
border-top: 1px dashed #b1c4d7; 
border-right: 1px dashed #b1c4d7; 
border-left: 1px dashed #b1c4d7; 
}

#foto img {
margin: 0 9px 9px 9px;
text-align: center;
margin: 0 auto 9px auto;
display: block;
}


#prev {
position: absolute;
top: -25px;
left: 0;
}

#next {
position: absolute;
top: -25px;
right: 0;
}

#fototext, #fototext em {
background: #b1c4d7;
text-align: center;
font-style: normal;
}

.fotodate, .fotonumber {
display: block; 
color: #666;
font-size: 85%;
}





/* UEBERSCHRIFTEN 
-------------------------------------------------- */


h1 {
font-size: 145%;
}

h2 {
margin-top: 10px;
font-size: 115%;
line-height: 115%;
clear: left;
}

#termine h2, #touretappen h2, #jusosvorort h2, #vorstand h2, #kandidatinnen h2, #links h2, #barrierefrei h2, #landesbuero h2 { 
margin-top: 30px; 
padding: 0 5px;
background: #ef1d25;
color: #fff;
font-size: 100%;
}

#suche h2 a { /* Suchergebnisse Ueberschriften */
text-decoration: underline;
color: #00f;
line-height: 1.5em;
}
#suche h2 a:visited {
color: #666;

}

/* Rubriken-Kicker */ 
h1 em, h2 em {
text-transform: uppercase;
font-style: normal;
font-weight: bold;
display: block;
color: #ef1d25;
background-color: #fff;
}
h1 em {
font-size: 58%; /* relativ zur h1 */
}
h2 em {
font-size: 74%; /* relativ zur h2 */
margin-top: 20px; /* Abstand nach oben */
}

/* themen / aktuelles weitere texte  */
#inhalt h3 {
clear: left;
padding: 10px 0 0 0;
margin: 0;
text-transform: uppercase;
font-size: 85%;
color: #666;
}

#service h3 { /* service-randspalte */
font-size: 100%;
margin: 0 5px;
text-transform: uppercase;
}


/* Randspalte 
-------------------------------------------------- */

#service {
position: absolute;
top: 0;
right: 0;
width: 148px;
background: #b1c4d7;
font-size: 85%; /* globale schriftgroesse randspalte */
}
#service img {
margin: 5px 5px 5px 5px;
border: 1px dashed #fff;
}

#fotowelcome {
margin: 5px 5px 5px 5px;
width: 135px;
height: 60px;
overflow: hidden;
border: 1px dashed #fff;
}
#fotowelcome img {
margin: 0;
border: 0;
}

#box1 {
padding-top: 8px;
padding-bottom: 35px; /* background image dreieck 30px hoch */
background: url(img/dreiecku.gif) bottom left no-repeat;
}

#box2, #box2links {
padding-top: 36px; /* background image dreieck 30px hoch */
background: url(img/dreiecko.gif) top left no-repeat;
}

#box3, #box4, #box5 {
padding-top: 8px;
border-top: 28px solid #fff;
}

#boxlast {
padding-top: 8px;
padding-bottom: 35px; /* background image dreieck 30px hoch */
border-top: 28px solid #fff;
background: url(img/dreiecku.gif) bottom left no-repeat;
}

#service p {
margin: 5px 5px 10px 5px;
}

#service ul {
margin: 3px 5px 5px 5px; /* oben -2px / unten -5px wg. li */
list-style: none;
}

#service li {
margin: 2px 0 5px 0;
padding: 0;
background: transparent;
font-weight: normal;
}

#service ul em { /* Termine Datum dd.mm. */
font-style: normal;
font-weight: bold;
background: #fff;
padding: 1px 3px 0 3px;
border-right: 1px dashed #666;
border-bottom: 1px dashed #666;
margin-right: 2px;
}

#service ul.links li { /* linklisten, themen-nav */
margin: 0;
padding: 2px 0 4px 11px; 
line-height: 130%;
background: url(img/gdot.gif) 0 0.6em no-repeat;
}


/* FORMULARFELDER

-------------------------------------------------- */
input {
font: 100% 'trebuchet ms', arial, verdana, helevetica, geneva, sans-serif;
}
input#suchbox:focus, input#newsletter:focus, #uebermich input:focus, #kontakt textarea:focus, input#shopsuche:focus {
border: 1px inset #ccc;
}
input#suchbox {
width: 100px;
border: 1px solid #666;
padding: 1px;
margin: 5px 0;
}
input#newsletter {
width: 134px;
margin-bottom: 0;
border: 1px solid #666;
padding: 1px;
margin: 5px 0;
}
input.button {
width: auto;
border: 1px outset #666;
background: #999;

vertical-align: top;
margin: 5px 0;
padding: 0 2px;
}

/* Formularfelder im Innenbereich */
#inhalt form br { 
clear: left; 
}
#inhalt fieldset {
margin: 10px 0;
padding: 10px;
border: 1px dashed #b1c4d7;
}
legend {
background: #b1c4d7;
color: #fff;
padding: 0 5px;
margin: 5px 0;
}
#uebermich input, #post input, textarea {
margin-bottom: 0.5em; 
}

.left { /* alle Labels LINKS der Mittelachse */
display: block;
float: left; 
text-align: right; 
width: 95px; /* Breite der Label-Spalte */
margin-right: 10px; /* Abstand zwischen Label und Input-Feld */
display: block;
float: left;
}

.right { /* alle Input-Felder RECHTS der Mittelachse */
float: none;
display: inline; 
margin-left: 105px;  /* Felder links bis zur Mittelachse einruecken (= width + margin-right von label.left) */
vertical-align: middle; /* mit Label auf eine Linie bringen */
}

#uebermich input, #post input, #inhalt textarea {
width: 290px;
border: 1px solid #666;
font-family: courier, 'courier new', monospace; 
padding: 2px 1px;
font-size: 100%;
}
input#plz { 
width: 45px; 
}
input#absenden { /* kontaktformular submit */
width: 90px;
border: 1px outset #666;
background: #999;
margin-top: 10px;
font: 100% 'trebuchet ms', arial, verdana, helevetica, geneva, sans-serif;
}


/* FOOTER 
-------------------------------------------------- */

#footer {
clear: left;
padding-top: 5px;
}

#footer p {
border-top: 1px dashed #b1c4d7;
margin: 20px 168px 20px 160px /* gleicher Abstand wie #inhalt */; 
padding-top: 2px; 
font-size: 85%;
}
#start #footer {
background: #b1c4d7; 
padding-top: 2px;
margin: 20px 0 20px 0;
}
#start #footer p {
margin: 0;
padding: 2px 20px 0 20px;
border-top: 1px dashed #fff;
}

/* KALENDER
--------------------------------- */

table#kalender { /* kalender in der randspalte */
width: auto;
margin: 5px 0px 12px 5px; /* 5px 5px 12px 5px; */
border-collapse: collapse;
font-size: 100%;
}
#kalender th, #kalender td {
text-align: center;
vertical-align: middle;
line-height: 110%;
padding: 3px;
border: 1px dashed #fff;
}
#kalender caption {
text-align: left;
padding: 5px 5px 5px 5px;
}
#kalender .heute {
background: #fff;
}

kbd  { 
font-size: 110%; 
padding: 0 2px; 
border: 1px outset #ccc; 
}


/* SHOP 1.0 TABELLE
-------------------------------- */

table#shop {
margin-top: 20px;
text-align: left;
width: auto;
border-collapse: collapse;
}
#shop th, #shop td {
text-align: left;
vertical-align: middle;
line-height: 110%;
padding: 0.5em 0.5em;
border: 1px dashed #b1c4d7;
}
#shop tr.row1 {
background-color: #b1c4d7;
}
#shop tr.row2 {
background-color: #fff;
}


/* SHOP 2.0
-------------------------------- */
table#shop {
margin-top: 20px;
text-align: left;
width: 100%;
border-collapse: collapse;
font-size: 100%; /* fuer ie 5.5 */
}
#shop th, #shop td {
text-align: left;
line-height: 110%;
padding: 0.5em 0.5em;
background-color: #fff;
border: 1px dashed #b1c4d7;
}
table#shop td.produkt {

vertical-align: middle;
}
table#shop td.anzahl, table#shop th.anzahl {
vertical-align: middle;
text-align: center;
}
table#shop td.preis, table#shop th.preis {
white-space: nowrap;
text-align: right;
}
table#shop td.loeschen {
text-align: center;
}
td.anzahl input { 
text-align: right; 
}
#shop tfoot th, #shop tfoot td {
background: #b1c4d7;
border-bottom: 1px dashed #fff;
border-right: 1px dashed #fff;
}
#shop td a {
font-size: 85%;
}

table#shop h2 em {
font-size: 74%; /* relativ zur h2 */
margin-top: 0px; /* allg Abstand nach oben abgestellt */
}
table#shop h2 {
font-size: 100%;
font-weight: bold;
color: #330000;
margin-top: 0px; /* allg Abstand nach oben abgestellt */
clear: none;
margin: 0;
display: inline;
}

table#shop h2 a {
color: #330000;
}
table#shop p {
margin: 0;
display: inline;
}
table#shop h2, table#shop p {
margin: 0 0.5em 0 0;
line-height: 135%;
}

td img {
float: left;
margin: 0.3em 0.5em 0.3em 0;
padding: 0;
}

table#shop ul {
clear: left;
margin: 0.2em 0 0.2em 0;
padding: 0;
list-style: none;
line-height: 135%;
}
table#shop li {
margin: 0;
padding: 0;
border: none;
background: #fff;
font-size: 100%;
}
li.label, li.kategorie {
text-align: left;
display: inline;
}
li.preis {
text-align: right;
}


/* SHOP - Produkte
------------------------------- */

#kategorien {
margin: 20px 0;
border: 1px dashed #b1c4d7; 
position: relative;
}
#kategorien h3 {
margin: 0 0.5em 0.5em 1em;
font-style: normal;
font-size: 100%;
font-weight: bold;
text-transform: none;
color: #330000;
}
#kategorien h3 a { /* toggle-Link */
font-weight: normal;
font-size: 85%;
}
ul#erste, ul#zweite, ul#dritte {
float: left;
margin: 0;
list-style: none;
width: 32.9%;
}
ul#erste, ul#zweite {
border-right: 1px dashed #b1c4d7;
}
#kategorien li {
margin: 0 0.5em 0 1em;
padding: 3px 0 3px 12px;
background: url(img/reddot.gif) 0 50% no-repeat;
border-bottom: 0; /* stellt allgemeines li ab */
font-size: 100%;
line-height: 130%;
}
#kategorien li a {
font-weight: normal; /* stellt allgemeines li ab */
}

#kategorien p.alle {
clear: left; /* stoppt float der beiden Listen */
text-align: right;
padding: 0.5em 0.5em 0.5em 0
}

#kategoriesuche {
clear: left;
padding: 1em 0.5em 0.5em 1em;
}

/* weiter Button */
.weiter input, #shop input.absenden {
background: #369;
color: #fff;
font-weight: bold;
padding: 2px 6px;
margin-bottom: 5px;
border: 1px outset;
font-size: 115%;
width: auto; 
overflow: visible;
}
/* weiter Button Adresseformular */
#shop input#absenden {
background: #369;
color: #fff;
font-weight: bold;
padding: 2px 6px;
margin-bottom: 5px;
}
#shop .weiter, #shop fieldset p {
font-size: 85%;
}

/* schritt-formular - der weg durch den shop */

#shop ul.stepbystep {
margin: 0 0 20px 0;
padding: 0 0 2px 0;
background: #fff;
border: 0;
color: #000;
border-bottom: 1px dashed #b1c4d7;
}
#shop ul.stepbystep li {
margin: 0 5px 0 0;
padding: 0 0 0 0;
background: #fff;
border: 0;
color: #b1c4d7;
font-size: 85%;
display: inline;
}
#shop ul.stepbystep li.done {
padding-right: 12px;
margin-right: 5px; /* fuer ie */
background: transparent url(img/done.gif) 100% 50% no-repeat;
}
#shop ul.stepbystep li.step { /* aktueller Schritt beim Bestellen */
color: #330000;
font-weight: bold;
}