/* ************************************************* */
/*            Copyright by Tango GRAZioso            */
/*                8020 Graz Austria                  */
/*            info(AT)tangograzioso(DOT)at           */
/* ************************************************* */
/*            Design by Gunter Jammernegg            */
/* ************************************************* */
/* Stile für Bildschirmausgabe und moderne Browser */

/* ganzen Bildschirm ausfüllen */
html, body {
    height: 100%; width: 100%;
    margin: 0; padding: 0;
    font-family: Arial, Helvetica, sans-serif; font-size: 13px;
    color: #CCC; background: #000;
}

/* Schriftstile */
h1 {
    margin: 10px 0 5px; padding: 0 0 10px;
    border-bottom: 0;
    font-size: 19px; font-weight: bold;
    color: #EEE; background: url(pix/ruler.gif) bottom no-repeat;
}
h1 strong { font-size: 24px; color: #A00; }
h2 { margin: 0 0 12px; font-size: 17px; font-weight: bold; color: #EEE; }
h2 strong { font-size: 21px; color: #A00; }
h3 { margin: 0 0 12px; font-size: 13px; font-weight: bold; color: #EEE; }
h3 strong { font-size: 16px; color: #A00; }
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding: 0 0 0 40px; text-indent: 0; list-style: outside disc; } /* 1.Ebene */
li ul { margin: 0; padding: 0 0 0 20px; list-style: outside circle; } /* 2.Ebene */
li { text-align: left; } /* Ausgleich von justify in div */

/* Tabellen, Bilder und iframe */
table { margin: 0 0 12px; table-layout:fixed; width: 100%; border: 0; border-spacing: 0; border-collapse: collapse; }
th, td { padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } /* Vererbung funktioniert nicht immer */
img { border: 0; }
iframe { margin: 0; border: 0; overflow: auto; }

/* Stile für Links mit Hintergrundbild, bei hover Farb- und Bildwechsel */
a { color: #FFC; text-decoration: none; padding-left: 16px; background: url(pix/arrow_right.gif) left no-repeat; }
a:hover, a:active { color: #FC0; background: url(pix/arrow_right_hover.gif) left no-repeat; }
a.aTop { background: url(pix/arrow_top.gif) left no-repeat; }
a.aTop:hover, a.aTop:active { background: url(pix/arrow_top_hover.gif) left no-repeat; }
a.aBottom { background: url(pix/arrow_bottom.gif) left no-repeat; }
a.aBottom:hover, a.aBottom:active { background: url(pix/arrow_bottom_hover.gif) left no-repeat; }
a.aLeft { background: url(pix/arrow_left.gif) left no-repeat; }
a.aLeft:hover, a.aLeft:active { background: url(pix/arrow_left_hover.gif) left no-repeat; }
a.aInfo { padding-left: 17px; background: url(pix/info.gif) left no-repeat; }
a.aInfo:hover, a.aInfo:active { background: url(pix/info_hover.gif) left no-repeat; }
a.aMagnify { padding-left: 19px; background: url(pix/magnify.gif) left no-repeat; }
a.aMagnify:hover, a.aMagnify:active { background: url(pix/magnify_hover.gif) left no-repeat; }
a.aMail { padding-left: 18px; background: url(pix/mail.gif) left no-repeat; }
a.aMail:hover, a.aMail:active { background: url(pix/mail_hover.gif) left no-repeat; }
a.aMap { padding-left: 18px; background: url(pix/map.gif) left no-repeat; }
a.aMap:hover, a.aMap:active { background: url(pix/map_hover.gif) left no-repeat; }
a.aWorld { padding-left: 20px; background: url(pix/world.gif) left no-repeat; }
a.aWorld:hover, a.aWorld:active { background: url(pix/world_hover.gif) left no-repeat; }
a.aPdf, a.aPdf:hover, a.aPdf:active { padding-left: 17px; background: url(pix/pdf.gif) left no-repeat; }
a.aAnchor, a.aAnchor:hover, a.aAnchor:active { padding-left: 0; background: transparent; }
a#AT { padding-left: 22px; background: url(pix/at.gif) left no-repeat; } /* Link zur deutschen Seite */
a#EN { padding-left: 22px; background: url(pix/en.gif) left no-repeat; } /* Link zur englischen Seite */
a span { display: none; } /* Texte in speziellen Links ausblenden: #header, aTop und ähnliche */

/* Textauszeichnungen */
strong { font-weight: bold; color: #EEE; }
em { font-style: italic; }
code { font-family: "Courier New", Courier, monospace; color: #FC0; }
acronym { border: 0; text-decoration: underline; cursor: help; }
.textHighlight { font-weight: bold; color: #FC0; }
.textAltHighlight { font-weight: bold; color: #A00; }
.textSizeNormal { font-size: 13px; font-weight: normal; }
.textSizeSmall { font-size: 11px; font-weight: normal; }
.textComment { color: #0080FF; } /* für Kommentare während der Entwicklungsphase */

/* Seitenkopf mit Tango GRAZioso-Logo */
#header {
    margin: 0;
    background: url(pix/head.jpg) 0 0 no-repeat;
}
#header a {
    display: block;
    width: 360px; height: 90px;
    margin-left: 20px; padding-left: 0; /* Standardformat von a überschreiben */
    background: transparent; /* Standardformat von a überschreiben */
}

/* Seitenkopf mit Tango GRAZioso-Logo (nicht öffentliche Testseiten) */
#headerTest {
    margin: 0;
    background: url(pix/head_test.jpg) 0 0 no-repeat;
}
#headerTest a {
    display: block;
    width: 360px; height: 90px;
    margin-left: 20px; padding-left: 0; /* Standardformat von a überschreiben */
    background: transparent; /* Standardformat von a überschreiben */
}

/* Navigationsmenü als unsortierte Liste mit hover-Effekt, Gesamtbreite 220px */
#navigation {
    position: absolute;
    top: 92px; left: 0px;
    width: 180px; height: 500px;
    margin: 0; padding: 14px 0 0 40px;
    list-style-type: none; 
    background: url(pix/navigation.jpg) 0 0 no-repeat;
}
#navigation li { height: 22px; font-weight: bold; }
#navigation li a { padding-left: 0; color: #CCC; background: transparent; } /* Standardformat von a überschreiben */
#navigation li a:hover, #navigation li a:active { color: #FC0; } /* Standardformat von a überschreiben */

/* klickbares Bild für La Fiesta */
#fiesta {
    position: absolute;
    top: 362px; left: 40px;
    margin: 0; padding: 0;
}
#fiesta a {
    display: block;
    width: 152px; height: 254px;
    padding-left: 0; /* Standardformat von a überschreiben */
    background: transparent; /* Standardformat von a überschreiben */
}

/* äußerer Container für Inhalt, mit Javascript festgelegte Größe und scrollbar */
#scroll {
    position: absolute;
    top: 92px; left: 220px;
    width: 642px;
}

/* innerer Container für Seiteninhalte */
#content { width: 612px; }

/* Container für Fußzeile */
#footer {
    width: 612px;
    padding: 10px 0;
    border-top: 0;
    font-size: 11px;
    clear: both;
    background: url(pix/ruler.gif) top no-repeat;
}

/* Container für Infotext */
#info, div.divInfo { display: none }

/* Container für Popups Stadtplan, Bilder und Textinhalte */
#popup {
    display: none;
    position: absolute;
    top: 40px; left: 100px;
    margin: 0;
    border: 1px solid #CCC;
    background: #000;
}
#popup a { padding-left: 0; background: transparent; }
#popuphead { /* Überschrift Popup */
    padding: 3px 0;
    border-bottom: 1px solid #CCC;
    text-indent: 6px;
    font-size: 14px; font-weight: bold;
    color: #EEE;
    background: url(pix/popuphead.jpg) right no-repeat;
}
#popupclose { position: absolute; top: 0; left: 0; height: 22px; } /* Klickbereich zum Schließen */
#popuptext { padding: 15px; text-align: justify; } /* Textbereich */

/* Container für Diashow */
#slides { width: 612px; margin: auto; padding: 6px 22px 12px; }

/* unsortierte Liste für Sitemap */
#sitemap { margin: 12px 0; padding: 0; list-style: none; }
#sitemap a { display: block; float: left; }
#sitemap ul { margin: 6px 0; padding: 0 0 0 22px; list-style: none; }
#sitemap ul li a { width: 122px; }
#sitemap ul li ul li a { width: 100px; }
#sitemap li { margin: 0 0 6px; }
#sitemap li a { width: 144px; }

/* Container für Spaltenlayout, maximale Breite wie bei #content */
div.divText { width: 475px; text-align: justify; } /* linke Spalte für 2-spaltiges Layout */
div.divLeft, p.pLeft { width: 95px; font-size: 11px; text-align: left; float: left; clear: left; } /* linke Spalte für 3-spaltiges Layout */
div.divCenter, p.pCenter { margin-left: 95px; width: 380px; text-align: justify; } /* mittlere Spalte für 3-spaltiges Layout */
div.divRight { width: 128px; margin: 3px 0 12px; text-align: right; float: right; } /* rechte Spalte, wegen IE-Problemen auf 128px beschränkt */

/* weitere Elemente zur Seitengestaltung */
p.pLink { /* Zeile mit Trennlinie für Links */
    margin: 0 0 12px; padding: 0 0 14px;
    border-bottom: 0;
    font-size: 11px;
    background: url(pix/ruler.gif) bottom no-repeat;
}
p.pLinkCenter { /* Zeile mit Trennlinie für Links, zentriert */
    margin: 0 0 12px; padding: 0 0 14px;
    border-bottom: 0;
    font-size: 11px; text-align: center;
    background: url(pix/ruler.gif) bottom no-repeat;
}
p.pLinkRight { width: 30px; font-size: 11px; text-align: right; float: right; } /* Zeile für Links rechtsbündig, mit pLinkCenter verwenden */
p.pLinkLeft { width: 30px; font-size: 11px; float: left; } /* Zeile für Links linksbündig, mit pLinkCenter verwenden */
p.pRuler { /* Zeile mit Trennlinie */
    height: 9px;
    margin: 0 0 12px;
    border-top: 0;
    font-size: 7px;
    clear: both;
    background: url(pix/ruler.gif) top no-repeat;
}
p.pRuler span { display: none; } /* Ersatztext in Trennzeilen ausblenden */
p.pRulerDouble { /* Zeile mit doppelter Trennlinie */
    height: 15px;
    margin: 0 0 12px;
    border-top: 0;
    font-size: 7px;
    clear: both;
    background: url(pix/ruler_double.gif) top no-repeat;
}
p.pRulerDouble span { display: none; } /* Ersatztext in Trennzeilen ausblenden */
p.pFloatRight { margin-left: 15px; float: right; text-align: right; } /* rechtsfließend */
p.pCentered { text-align: center; } /* zentrierte Zeile */
p.pCentered a { padding-left: 0; background: transparent; } /* Standardformat von a überschreiben */
p.pBlock { text-align: justify; } /* Zeile mit Blocksatz */

/* Tabellenlayout für Terminseiten */
th.thLeft { width: 95px; font-weight: normal; vertical-align: top; text-align: left; } /* linke Spalte für 3-spaltiges Layout */
td.tdCenter { width: 380px; vertical-align: top; text-align: justify; } /* mittlere Spalte für 3-spaltiges Layout */
td.tdRight { width: 137px; padding: 3px 0 12px; vertical-align: top; text-align: right; } /* rechte Spalte */
td.tdRuler { /* Zeile mit Trennlinie */
    height: 21px;
    font-size: 7px;
    border-top: 0;
    background: url(pix/ruler.gif) top no-repeat;
}
td.tdRuler span { display: none; } /* Ersatztext in Trennzeilen ausblenden */
td.tdRulerDouble { /* Zeile mit doppelter Trennlinie */
    height: 27px;
    font-size: 7px;
    border-top: 0;
    background: url(pix/ruler_double.gif) top no-repeat;
}
td.tdRulerDouble span { display: none; } /* Ersatztext in Trennzeilen ausblenden */

/* Layout für das Kalenderblatt auf den Terminseiten */
p.pDateMonth { /* Container für Monatsnamen */
    width: 75px;
    margin: 3px 0 0;
    border: 1px solid #999;
    text-align: center;
    font-size: 11px; font-weight: bold;
    color: #EEE; background: #222;
}
p.pDateDay { /* Container für Datum */
    width: 75px;
    margin: 0;
    border: 1px solid #999; border-top: 0; border-bottom: 0;
    text-align: center;
    font-size: 28px; font-weight: bold;
    color: #EEE; background: #444;
}
p.pDateWeekday { /* Container für Wochentag */
    width: 75px;
    margin: 0;
    border: 1px solid #999; border-top: 0;
    text-align: center;
    font-size: 11px; font-weight: bold;
    color: #EEE; background: #444;
}
p.pDateTime { /* Container für Uhrzeit */
    width: 75px;
    margin: 3px 0 0;
    border: 1px solid #999;
    text-align: center;
    font-size: 11px; font-weight: bold;
    color: #EEE; background: #444;
}
p.pDateAdmission { /* Zeile mit Eintritt */
    width: 75px;
    margin: 3px 0 0;
    border: 1px solid #000;
    text-align: center;
    font-size: 11px;
    color: #EEE;
}

/* Layout für Übersichtstabellen, maximale Breite des Hintergrundbilds 612 px */
table.tableSum {
    width: 475px;
    margin: 12px 0 24px 0;
    table-layout: auto;
    border: 1px solid #CCC;
    border-collapse: separate;
}
table.tableSum th {
    padding: 3px 0;
    border-bottom: 1px solid #CCC;
    text-align: left; text-indent: 10px;
    vertical-align: middle;
    font-size: 14px; font-weight: bold;
    color: #EEE;
    background: url(pix/tablehead.jpg) right no-repeat;
}
table.tableSum td {
    padding: 4px 6px;
    border: solid #000;
    color: #EEE; background: #666;
}
table.tableSum td.tdSumSingle { border-width: 0 6px 1px 6px; }
table.tableSum td.tdSumLeft { border-width: 0 0 1px 6px; }
table.tableSum td.tdSumCenter { border-width: 0 0 1px 1px; }
table.tableSum td.tdSumRight { border-width: 0 6px 1px 1px; }
table.tableSum td.tdSumTop { border-top-width: 6px; }
table.tableSum td.tdSumBottom { border-bottom-width: 6px; }
table.tableSum td.tdSumNoBottom { border-bottom: 0; }
table.tableSum td.tdSumBack999 { background: #999; }
table.tableSum td.tdSumBack888 { background: #888; }
table.tableSum td.tdSumBack777 { background: #777; }
table.tableSum td.tdSumBack555 { background: #555; }
table.tableSum td.tdSumBack444 { background: #444; }
table.tableSum td.tdSumBack333 { background: #333; }
table.tableSum td.tdSumPadding12 { padding: 12px 6px; }
table.tableSum td.tdSumSystem { width: 25%; height: 70px; text-align: center; color: #EEE; }
table.tableSum td.tdAlignTop { vertical-align: top; }

/* Layout für Fotoalbum (Thumbnails) */
table.tableGallery td { width: auto; height: 170px; vertical-align: middle; text-align: center; }
table.tableGallery a { padding-left: 0; background: transparent; } /* Standardformat von a überschreiben */
table.tableGallery a:hover img { border: 1px solid #FC0; }

/* Formate für Formulare */
form { margin: 0; }
.formLastField { margin-bottom: 8px; }
fieldset {
    margin: 0 0 12px;
    padding: 6px 10px 10px;
    border: 1px solid #CCC;
    background: #333;
}
input, select, textarea { 
    display: block;
    width: 350px;
    margin: 4px 0 0;
    padding: 0 4px 0 4px;
    border: 1px solid #FFF;
    font-family: Arial, Helvetica, sans-serif; font-size: 13px; /* Vererbung funktioniert nicht immer */
    color: #000; background: #AAA;
    float: left;
}
textarea { overflow: auto; }
p.pForm { margin: 6px 0 0; }
p.pLabel { width: 90px; margin: 6px 0 0; font-weight: bold; color: #EEE; clear: left; float: left; }
p.pLabelLong { width: 110px; margin: 6px 0 0; font-weight: bold; color: #EEE; clear: left; float: left; }
p.pRadio { margin: 6px 0 0; float: left; }
p.pRadioLastField { margin: 6px 0 10px; float: left; }
input.inputZip { width: 52px; margin-right: 6px; }
input.inputCity { width: 282px; }
input.inputHidden { display: inline; width: auto; float: none; border: 0; }
input.button { display: inline; width: 80px; float: none; margin: 0 6px 0 0; border-color: #CCC; color: #EEE; background: #666; }
input.checkbox, input.radio {
    display: inline;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    color: #FC0; /* Workaround für Opera */
    background: transparent;
}
input.radio { background: #333; } /* Workaround für Opera */
input.readonly { border-color: #CCC; color: #AAA; background: #666; }

/* Formate für verschiedene Meldungen */
h3.h3Alert { /* Absatz für Fehlermeldungen */
    border: 1px solid #CCC;
    padding: 5px 5px 5px 43px;
    font-weight: bold;
    color: #EEE;
    background: url(pix/alert.gif) 14px center no-repeat #900;
}
h3.h3Message { /* Absatz für Hinweise */
    border: 1px solid #CCC;
    padding: 5px 5px 5px 43px;
    font-weight: bold;
    color: #FC0;
    background: url(pix/message.gif) 14px center no-repeat #333;
}
div.divBox { /* allgemeine Meldungsbox */
    margin: 0 0 12px;
    padding: 6px 10px 10px;
    border: 1px solid #CCC;
    background: #039;
}
div.divBoxAlt { /* alternative Meldungsbox */
    margin: 0 0 12px;
    padding: 6px 10px 10px;
    border: 1px solid #CCC;
    background: #900;
}
div.divBox h2 { margin: 0; }
div.divBoxAlt h2 { margin: 0; }

/* Formate für die Linkseite */
#linkmap { float: left; }
#linklist { margin-left: 360px; }
div.divLinklist { margin: 0 0 12px 20px; }
div.divLinklist h3 { margin: 0 0 12px; width: 100px; float: left; clear: left; }
div.divLinklist p { margin-left: 100px; }
div.divIndent { margin: 0 0 12px 20px; } /* eingerückter Bereich */

/* Formate für die Fehlerseiten */
#error { margin: 20px 0 0 22px; }
#errorbar { background: #A00; }
#errortext { margin-left: 20px; padding-left: 10px; background: #000; }