/* ************************************************* */
/*            Copyright by Tango GRAZioso            */
/*                8020 Graz Austria                  */
/*            Design by Gunter Jammernegg            */
/* ************************************************* */
/* Stile für Bildschirmausgabe und moderne Browser   */

/* ganzen Bildschirm ausfüllen */
html, body {
	height: 100%; max-height: 100%;
	margin: 0;
}
body {
    padding: 0;
    color: #CCC; background: #000;
}

/* Basis-Schriftgröße festlegen, Vererbung funktioniert nicht in allen Browsern */
body, th, td, input, select, textarea { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-size: 13px; }

/* Schriftstile */
h1 {
    margin: 8px 0 5px; padding: 0 0 11px; /* Abstände: Text-Grundlinie zu ruler 12px, ruler zu nachfolgendem Text 12px */
    font-size: 19px; font-weight: bold;
    color: #EEE; background: url(pix/ruler.gif) bottom no-repeat;
}
h1:first-letter { font-size: 125%; color: #A00; }
h2 { margin: 0 0 12px; font-size: 17px; font-weight: bold; color: #EEE; }
h2:first-letter { font-size: 125%; color: #A00; }
h3 { margin: 0 0 12px; font-size: 14px; font-weight: bold; color: #EEE; }
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, Trennlinien 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; text-align: left; }
img { border: 0; }
hr { display: none; }
iframe { margin: 0; border: 0; overflow: auto; }

/* Stile für Links mit Hintergrundbild, bei hover Farb- und Bildwechsel */
a { text-decoration: none; padding-left: 17px; color: #FFC; background: url(pix/icon_right.gif) no-repeat left; }
a:hover, a:active { color: #FC0; background-image: url(pix/icon_right_hover.gif); }
a.aTop { background-image: url(pix/icon_up.gif); }
a.aTop:hover, a.aTop:active { background-image: url(pix/icon_up_hover.gif); }
a.aBottom { background-image: url(pix/icon_down.gif); }
a.aBottom:hover, a.aBottom:active { background-image: url(pix/icon_down_hover.gif); }
a.aLeft { background-image: url(pix/icon_left.gif); }
a.aLeft:hover, a.aLeft:active { background-image: url(pix/icon_left_hover.gif); }
a.aWorld { background-image: url(pix/icon_world.gif); }
a.aWorld:hover, a.aWorld:active { background-image: url(pix/icon_world_hover.gif); }
a.aMail { background-image: url(pix/icon_mail.gif); }
a.aMail:hover, a.aMail:active { background-image: url(pix/icon_mail_hover.gif); }
a.aInfo { background-image: url(pix/icon_info.gif); }
a.aInfo:hover, a.aInfo:active { background-image: url(pix/icon_info_hover.gif); }
a.aMagnify { background-image: url(pix/icon_magnify.gif); }
a.aMagnify:hover, a.aMagnify:active { background-image: url(pix/icon_magnify_hover.gif); }
a.aMap { background-image: url(pix/icon_map.gif); }
a.aMap:hover, a.aMap:active { background-image: url(pix/icon_map_hover.gif); }
a.aPdf { background-image: url(pix/icon_pdf.gif); }
a.aPdf:hover, a.aPdf:active { background-image: url(pix/icon_pdf_hover.gif); }
a.aAnchor, a.aAnchor:hover, a.aAnchor:active { padding-left: 0; background: transparent; }
a#AT { padding-left: 22px; background-image: url(pix/icon_at.gif); } /* Link zur deutschen Seite */
a#AT:hover, a#AT:active { background-image: url(pix/icon_at_hover.gif); }
a#EN { padding-left: 22px; background-image: url(pix/icon_en.gif); } /* Link zur englischen Seite */
a#EN:hover, a#EN:active { background-image: url(pix/icon_en_hover.gif); }
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 { padding: 0 2px; font-family: "Courier New", Courier, monospace; font-size: 11px; color: #03F; background: #CCC; }
acronym { border: 0; text-decoration: underline; cursor: help; }
.textHighlight { color: #FC0; }
.textAltHighlight { color: #A00; }
.textSizeNormal { font-size: 13px; font-weight: normal; }
.textSizeSmall { font-size: 11px; font-weight: normal; }
.textComment { color: #07F; } /* für Kommentare während der Entwicklungsphase */

/* Seitenkopf mit Tango GRAZioso-Logo (head.jpg) */
/* saisonal: head_xmas.jpg oder head_newyear.jpg oder head_20.jpg*/
#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 */
    color: #CCC; background: transparent; /* Standardformat von a überschreiben */
}
#header a:hover, #header li a:active { color: #FC0; }

/* Navigationsmenü als unsortierte Liste mit hover-Effekt, Gesamtbreite 220px */
#navigation {
    position: absolute;
    top: 92px; bottom: 0; left: 0;
    width: 180px;
    margin: 0; padding: 14px 0 0 40px;
    border: 0;
    background: url(pix/navigation.jpg) 0 0 no-repeat;
    list-style-type: none;
    overflow: auto;
}
#navigation li { height: 22px; }
#navigation li:first-child { margin-bottom: 22px; }
#navigation li a { padding-left: 0; font-weight: bold; color: #CCC; background: transparent; } /* Standardformat von a überschreiben */
#navigation li a:hover, #navigation li a:active { color: #FC0; }
#navigation li a#home { padding-left: 17px; font-weight: normal; background: url(pix/icon_home.gif) no-repeat left; } /* Hintergrund Home */
#navigation li a#home:hover, #navigation li a#home:active { background-image: url(pix/icon_home_hover.gif); }
#navigation li a#mobile { padding-left: 17px; font-weight: normal; background: url(pix/icon_mobile.gif) no-repeat left; } /* Hintergrund Mobile */
#navigation li a#mobile:hover, #navigation li a#mobile:active { background-image: url(pix/icon_mobile_hover.gif); }

/* Update-Hinweis für IE 7.0 */
#navigation li a#IE {
    padding-left: 25px; 
    font-style: italic;
    color: #07F; background: url(pix/ie6.jpg) no-repeat left;
}

/* 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 mit Scrollbalken */
#scroll {
    position: absolute;
    top: 92px; bottom: 0; left: 220px; right: 0;
    max-width: 642px;
    overflow: auto;
}

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

/* Container für Fußzeile */
#footer {
    width: 612px;
    padding: 14px 0; /* Abstand: ruler zu nachfolgendem Text 12px */
    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 { /* ganzes Fenster ausfüllen, sensitive Fläche mit Close-Link */
    display: none;
    position: fixed; z-index: 1000;
    top: 0; right: 0; bottom: 0; left: 0;
}
#popup a { /* Standardformat von a überschreiben */
    display: block;
    width: 100%; height: 100%;
    padding-left: 0; 
    background: transparent;
    font-size: 14px; font-weight: bold;
    color: #EEE;
}
#popuplight { /* Hintergrund abblenden */
    position: fixed; z-index: -1;
    width: 100%; height: 100%;
    background: #000; opacity: 0.5;
}
#popupwindow { /* Popup-Fenster */
    position: fixed;
    top: 40px; left: 100px;
    margin: 0;
    border: 1px solid #CCC;
    background: #000;
}
#popuphead { /* Popup-Überschrift */
    padding: 3px 0;
    border-bottom: 1px solid #CCC;
    text-indent: 6px;
    background: url(pix/popuphead.jpg) right no-repeat;
}
#popupbody div { padding: 15px; text-align: justify; } /* Textbereich im Popup */

/* 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 */
/* |                          612px                            | */
/* |                    475px                    |    137px    | */
/* |  95px  |                380px               |    137px    | */
.colText { margin: 0 0 12px; width: 475px; text-align: justify; } /* linke Spalte für 2-spaltiges Layout */
.colLeft { margin: 0 14px 12px 0; width: 81px; font-size: 11px; text-align: left; float: left; clear: left; } /* linke Spalte für 3-spaltiges Layout */
.colCenter { margin: 0 0 12px 95px; width: 380px; text-align: justify; } /* mittlere Spalte für 3-spaltiges Layout */
.colRight { width: 123px; margin: 0 0 12px; font-size: 11px; text-align: right; float: right; } /* rechte Spalte für 2- oder 3-spaltiges Layout */
.colRight img { margin-top: 3px; } /* Ausrichtung mit nebenstehendem Text */
ul.colText { width: 435px; } /* Padding von ul abziehen */
ul.colCenter { width: 340px; } /* Padding von ul abziehen */

/* weitere Elemente zur Seitengestaltung */
p.pLink { /* Zeile mit Trennlinie für Links */
    margin: 0 0 12px; padding: 0 0 14px; /* Abstände: Text-Grundlinie zu ruler 12px, ruler zu nachfolgendem Text 19px */
    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; /* Abstände: Text-Grundlinie zu ruler 12px, ruler zu nachfolgendem Text 19px */
    font-size: 11px; text-align: center;
    background: url(pix/ruler.gif) bottom no-repeat;
}
p.pLinkRight { margin: 0 0 12px 12px; font-size: 11px; text-align: right; float: right; } /* Zeile für Links rechtsbündig, mit pLinkCenter verwenden */
p.pLinkLeft { margin: 0 12px 12px 0; font-size: 11px;  float: left; } /* Zeile für Links linksbündig, mit pLinkCenter verwenden */
p.pCentered { text-align: center; } /* zentrierte Zeile für Diashow */
p.pCentered a { padding-left: 0; background: transparent; } /* Standardformat von a überschreiben */
p.pBlock { text-align: justify; } /* Zeile mit Blocksatz */
div.divRuler { /* Container mit Trennlinie */
    height: 9px;
    margin: 0 0 12px; /* Abstände: Text-Grundlinie zu ruler 19px, ruler zu nachfolgendem Text 19px */
    background: url(pix/ruler.gif) top no-repeat;
    clear: both;
}
div.divRulerDouble { /* Container mit doppelter Trennlinie */
    height: 15px;
    margin: 0 0 12px; /* Abstände: Text-Grundlinie zu ruler 19px, ruler zu nachfolgendem Text 19px */
    background: url(pix/ruler_double.gif) top no-repeat;
    clear: both;
}

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

/* Layout für Übersichtstabellen, maximale Breite des Hintergrundbilds 612 px */
table.tableSum {
    display: block; /* Workaround für Firefox-Bug: table margins don't collapse */
    width: 475px;
    margin: 24px 0;
    table-layout: auto;
    border: 1px solid #CCC;
    border-collapse: separate;
}
table.tableSum th {
    width: 451px; /* Workaround für Firefox-Bug: table margins don't collapse */
    padding: 3px 12px;
    border-bottom: 1px solid #CCC;
    vertical-align: middle;
    font-size: 14px; font-weight: bold;
    color: #EEE; background: url(pix/tablehead.jpg) right no-repeat #900;
}
table.tableSum td {
    padding: 4px 6px;
    border: 1px solid #000; border-top-width: 0; /* ohne oberen Rand */
    color: #EEE; background: #555;
}
table.tableSum td.tdSumSingle { border-left-width: 6px; border-right-width: 6px; } /* einzige Zelle in der Zeile */
table.tableSum td.tdSumLeft { border-left-width: 6px; border-right-width: 0; } /* Zelle am linken Rand */
table.tableSum td.tdSumCenter { border-right-width: 0; } /* Zelle am rechten Rand */
table.tableSum td.tdSumRight { border-right-width: 6px; } /* Mittelzelle */
table.tableSum td.tdSumTop { border-top-width: 6px; } /* erste Zeile, zusätzlich anwenden */
table.tableSum td.tdSumBottom { border-bottom-width: 6px; } /* letzte Zeile, zusätzlich anwenden */
table.tableSum td.tdSumNoBottom { border-bottom-width: 0; } /* ohne unteren Rand, zusätzlich anwenden */
table.tableSum td.tdSumBack9 { background: #999; } /* Hintergrundfarbe, zusätzlich anwenden */
table.tableSum td.tdSumBack7 { background: #777; } /* Hintergrundfarbe, zusätzlich anwenden */
table.tableSum td.tdSumBack3 { background: #333; } /* Hintergrundfarbe, zusätzlich anwenden */
table.tableSum td.tdSumPadding12 { padding: 12px 6px; } /* Zeilenhöhe, zusätzlich anwenden */
table.tableSum td.tdSumSystem { width: 50%; height: 70px; text-align: center; } /* gleichmäßige Aufteilung, zusätzlich anwenden */
table.tableSum td.tdAlignTop { vertical-align: top; } /* vertikale Ausrichtung oben, zusätzlich anwenden */

/* 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, maximale Breite wie bei #colText       */
/* |                   #colText: 475px                         | */
/* | |               fieldset: 1+10+453+10+1                 | | */
/* |  | p: 90  |           input: 1+4+353+4+1               |  | */
form { margin: 0; }
fieldset {
    margin: 0 0 12px;
    padding: 10px 10px 6px;
    border: 1px solid #CCC;
    background: #333;
}
input, select, textarea { 
    display: block;
    width: 350px; /* 3px weniger als möglich, ältere Opera addieren falsch */
    margin: 0 0 4px;
    padding: 0 4px;
    border: 1px solid #FFF;
    color: #000; background: #AAA;
    float: left;
}
textarea { overflow: auto; }
p.pForm { margin: 0 0 4px; }
p.pLabel { width: 90px; margin: 0 0 4px; font-weight: bold; color: #EEE; clear: left; float: left; }
p.pRadio { margin: 0 0 4px; float: left; }
.formLastField { margin-bottom: 12px; }
.formError { color: #CCC; background: #900; }
.formComment { color: #A00; font-weight: bold; }
input.inputZip { width: 52px; margin-right: 6px; }
input.inputCity { width: 282px; } /* inputZip + inputCity = input */
input.inputNormal {
    display: inline;
    float: none;
    width: 20px;
	margin: 0 6px 0 0;
    padding: 0;
    vertical-align: baseline;
    text-align: center;
}
input.inputStud {
    display: inline;
    float: none;
    width: 20px;
	margin: 0 6px 0 18px;
    padding: 0;
    vertical-align: baseline;
    text-align: center;
}
input.inputHidden { display: inline; width: auto; float: none; border: 0; }
input.button {
    display: inline;
    float: none;
    width: 80px;
    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 */


/* Formate für verschiedene Meldungen */
h3.h3Alert { /* Absatz für Fehlermeldungen */
    padding: 10px 10px 10px 36px;
    border: 1px solid #CCC;
    font-weight: bold;
    color: #EEE; background: url(pix/icon_alert.gif) 10px center no-repeat #900;
}
h3.h3Message { /* Absatz für Hinweise */
    padding: 10px 10px 10px 36px;
    border: 1px solid #CCC;
    font-weight: bold;
    color: #FC0; background: url(pix/icon_message.gif) 10px center no-repeat #333;
}
div.divBoxGrey { /* graue Meldungsbox */
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid #CCC;
    background: #333;
}
div.divBoxBlue { /* blaue Meldungsbox */
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid #CCC;
    background: #039;
}
div.divBoxRed { /* rote Meldungsbox */
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid #CCC;
    background: #900;
}
div.divBoxGrey h2:first-letter { font-size: 100%; color: #EEE; }
div.divBoxBlue h2:first-letter { font-size: 100%; color: #EEE; }
div.divBoxRed h2:first-letter { font-size: 100%; color: #EEE; }
.lastLine { margin-bottom: 0; }

/* Formate für die Linkseite */
#linkmap { margin-right: 14px; float: left; }
div.divIndent { margin: 0 0 12px 20px; text-align: left; } /* eingerückter Bereich */

/* Formate für die Fehlerseiten */
#error { margin: 20px 22px 0; max-width: 612px; } /* maximale Breite der Trennlinie 612 px */
#error h1 {
    margin: 0 0 12px;
    padding: 5px 5px 5px 43px;
    border: 1px solid #CCC;
    font-size: 17px;
    background: url(pix/icon_alert.gif) 14px center no-repeat #900;
}
#error h1:first-letter { font-size: 100%; color: #EEE; }