/***********************************************************************************************/ /** * Komprimierung: http://floele.flyspray.org/csstidy//css_optimiser.php * * STYLESHEET: Filmpalast am ZKM - Hauptstylesheet * * @author Dominic Jacob * @copyright ©2008 Galileo Webdesign, Karlsruhe, Germany * @see http://www.galileo-webdesign.de * @date 2008-08-14 * @version 1.0 * @lastmodified 2010-03-10 */ /** * INHALT * * @ref Dokumentstruktur * @ref Druckansicht * @ref HTML-Elemente * @ref Navigation * @ref Inhaltselemente * @ref Typo3 * @ref Typo3-Extensions * @ref Formulare */ /** * FARBKARTE * * @colordef #002235; dunkelblau; Seitenhintergrund * @colordef #00334E; dunkelblau; Hauptüberschrift, aktive Buttons * @colordef #006699; blau; Links, Überschriften (H2-H4), inaktive Buttons * @colordef #AAD7EF; hellblau; Border für Boxen und Tabellen * @colordef #D4EBF7; blassblau1; Hintergrund für Boxen und Tabellen * @colordef #edf4f8; blassblau2; Hintergrund für Boxen und Fieldset * @colordef #333333; dunkelgrau; Standardtext, Überschrift (H5), Navigation Formulare * @colordef #cccccc; grau; Border für Bilder * @colordef #E6E6E6; hellgrau; Helle Linie bei Überschriften und HRs * @colordef #F7F7F7; blassgrau; Hintergrund im Contentbereich * @colordef #ffffff; weiss; Links der Hauptnavigation * */ /***********************************************************************************************/ /***********************************************************************************************/ /** * 1. DOKUMENTSTRUKTUR * * Definition der grundlegenden Dokumentstruktur mit DIV-Containern * * @section Dokumentstruktur * @media screen * @note Templatedatei: tpl_website.html * */ /***********************************************************************************************/ /* --- HTML UND BODY --- */ html {height:100%;} body {margin:0px; padding:0px;} /* --- Body Website --- */ .body_hg {height:100%; background-color:#002235; background-image:url(../_img/hg_body.png); background-position:top center; background-repeat:no-repeat;} /* --- Container - Nimmt alle Divs auf, horizontale Zentrierung --- */ #container {width:970px; margin-left:auto; margin-right:auto; background-color:#002235;} /* --- Kopfbereich --- */ #kopf {width:970px; position:relative; height:380px; background-image:url(../_img/hg_kopf.jpg); background-position:top center; background-repeat:no-repeat;} /* --- Kopfbereich: Browsersicheres Padding --- */ #kopf_padding {padding-left:60px; padding-right:140px; padding-top:107px;} /* --- Leiste - Logo und Previews --- */ #leiste {height:273px;} /* --- Previewbilder und -schatten --- */ #bild_1_schatten, #bild_2_schatten, #bild_3_schatten, #bild_4_schatten, #bild_5_schatten { position: absolute; z-index: 4; cursor:pointer; -moz-opacity:.90; filter:alpha(opacity=90); opacity:.90; } #bild_1_schatten {left:152px; top:209px;} #bild_2_schatten {left:250px; top:219px;} #bild_3_schatten {left:365px; top:229px;} #bild_4_schatten {left:512px; top:239px;} #bild_5_schatten {left:662px; top:244px;} /* --- Previewpopups --- */ #bild_1_popup, #bild_2_popup, #bild_3_popup, #bild_4_popup, #bild_5_popup { position: absolute; z-index: 10; left: 240px; top: 115px; width: 468px; height:84px; display: none; background-image:url(../_img/bildleiste/hg_bild_popup.gif); background-repeat:no-repeat; background-position:center top; } .bild_popup_padding {margin:10px 15px 10px 15px; height:64px; color:#ffffff; font-size:11px; line-height:15px; overflow:hidden;} #bild_1_popup h4, #bild_2_popup h4, #bild_3_popup h4, #bild_4_popup h4, #bild_5_popup h4 { color:#ffffff; font-size:12px; } /* --- Werbebanner 1 (480*60px) --- */ #banner1 {width:468px; height:60px; position:absolute; left:240px; top:20px; z-index:3; background-color:#FFFFFF; text-align:center; border:solid 1px #0f405b;} #banner1_overlay {width:468px; height:60px; position:absolute; left:240px; top:20px; z-index:4;} /* --- Werbebanner 2 (120*480px) --- */ #banner2 {width:120px; height:600px; position:absolute; left:850px; top:420px; z-index:3; background-color:#FFFFFF; text-align:center; border:solid 1px #0f405b;} #banner2_overlay {width:120px; height:600px; position:absolute; left:850px; top:420px; z-index:4;} /* --- Mitte - Enthält Navigation und Inhaltsbereich --- */ #mitte {width:970px; min-height:400px; overflow:auto; clear:left; background-image:url(../_img/hg_mitte.jpg); background-position:top center; background-repeat:repeat-y;} /* --- Mitte: Browsersicheres Padding --- */ #mitte_padding {padding-left:60px; padding-right:140px;} /* --- Container Navigation und linke Spalte --- */ #links {width:179px; float:left; min-height:400px;} /* --- Abstandshalter---- */ #nav_spacer {height:40px; background-image:url(../_img/hg_nav_spacer.jpg); background-position:bottom left; background-repeat:no-repeat;} /* --- Navigation 1. Ebene ---- */ #nav1 {} /* --- Navigation 2. Ebene ---- */ #nav2 {} /* --- Newsblock --- */ #newsblock {} /* --- Banner Links --- */ #banner_links {text-align:center; padding-top:25px;} /* --- Container Inhaltsbereich --- */ #rechts {width:591px; float:left;} /* --- Krümelnavigation --- */ #kruemelnav {width:545px; margin-left:16px; margin-right:auto; } /* --- Seitentitel --- */ #titel {width:555px; margin-left:14px; margin-right:auto;} /* --- Inhaltsbereich --- */ #inhalt {width:545px; margin-left:16px; clear:both; min-height:550px; padding-top:15px; margin-right:auto; padding-bottom:15px;} /* --- Iconleiste --- */ #iconleiste {width:555px; margin-left:16px; margin-right:auto; border-top: dotted 1px #cccccc; padding-top:3px;} /* --- Fußzeile --- */ #fuss {width:970px; margin-left:auto; margin-right:auto; background-image:url(../_img/hg_fuss.jpg); background-position:top center; background-repeat:no-repeat;} /* --- Fußzeile: Browsersicheres Padding --- */ #fuss_padding {padding-left:60px; padding-right:140px; padding-top:20px; padding-bottom:25px;} /* --- Fußzeile: Ausgelagerte Navigationspunkte --- */ #metanav {width:770px; height:24px; text-align:center;} /* --- Fußzeile: Inhalt --- */ #fuss_inhalt {text-align:center;} /***********************************************************************************************/ /** * 2. DRUCKANSICHT * * Definition der Dokumentstruktur der Druckansicht * * @section Druckansicht * @media screen * @media print * @note Templatedatei: tpl_website_print.html * */ /***********************************************************************************************/ /* --- Body Druckansicht --- */ .body_hg_druck {height:100%; background-image:none; background-color:#002235;} /* --- Hauptcontainer -- */ #container_druck {width:590px; margin-left:auto; margin-right:auto; background-color:#FFFFFF; padding:15px 0px 15px 0px;} /* --- Obere Leiste mit Druckschaltflächen --- */ @media screen { #druckleiste_oben {width:550px; margin-left:auto; margin-right:auto; padding-top:25px; padding-bottom:10px;} } @media print { #druckleiste_oben {display:none;} } /* --- Untere Leiste mit Druckschaltflächen --- */ @media screen { #druckleiste_unten {width:550px; margin-left:auto; margin-right:auto; padding-bottom:25px; padding-top:10px;} } @media print { #druckleiste_unten {display:none;} } /* --- Fusszeile --- */ #fuss_druck {width:550px; margin-left:25px; margin-right:15px; padding-bottom:10px; border-top:solid 1px #cccccc;} /***********************************************************************************************/ /** * 3. HTML-ELEMENTE * * Globale Formatierung von HTML-Elemnten und allgemeinen Klassen * * @section HTML-Elemente * @media screen * */ /***********************************************************************************************/ /* --- Standardtext-Formatierung --- */ div, p, table, td, ul, ol, li {font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333; font-weight:normal; line-height:18px;} div, table, td {} /* --- Anpassung des Abstands von P-Tags (Wichtig bei RTE-Nutzung) --- */ p {margin-top:0px; margin-bottom:0px;} /* --- Standardlink-Formatierung --- */ a {color:#0088cc; text-decoration:none;} a:link {color:#0088cc; text-decoration:none;} a:visited {color:#0088cc; text-decoration:none;} a:hover {color:#0088cc; text-decoration:underline;} a:active {color:#0088cc; text-decoration:underline;} /* --- Überschriften --- */ /* --- p.hx sind RTE-Klassen --- */ h1 {font-size:25px; font-weight:normal; font-weight:bold; color:#00334E; margin:0px; padding:0px; padding-bottom:3px; line-height:1.2em; letter-spacing:0px;} h2, p.h2 {clear:left; font-size:16px; font-weight:bold; font-style:normal; color:#006699; margin:0px; padding:0px; line-height:20px; letter-spacing:0px; border-bottom:solid 1px #E6E6E6; margin-bottom:5px;} h3, p.h3 {font-size:16px; font-weight:bold; font-style:normal; color:#006699; margin:0px; padding:0px; line-height:18px; letter-spacing:0px;} h4, p.h4 {font-size:13px; font-weight:bold; font-style:normal; color:#006699; margin:0px; padding:0px; line-height:18px; letter-spacing:0px;} h5, p.h5 {font-size:13px; font-weight:bold; font-style:normal; color:#333333; margin:0px; padding:0px; line-height:18px; letter-spacing:0px;} h6, p.h6 {font-size:12px; font-weight:bold; color:#006699; margin:0px; padding:0px; line-height:22px; background-color:#AAD7EF; padding-left:5px;} /* ---- Listen und Aufzählungen ---- */ ul {margin-bottom:1px; margin-top:1px;} ol {margin-bottom:1px; margin-top:1px;} li {padding-bottom:1px; line-height:18px; font-size:12px;} /* --- Bilder --- */ img {border-width:0px; padding:0px; margin:0px;} /* --- Horizontale Linie --- */ hr {width:100%; height:1px; border:none; border-top:dotted #E6E6E6 1px; padding-top:5px; padding-bottom:5px;} /* --- Sonstige Textformate --- */ br {} b {font-weight:bold;} i {font-style:italic;} u {text-decoration:underline;} /* --- Globale Hilfsklasse zum Aufheben von Floats --- */ .clearing {clear: both; font-size:height:.1px; font-size:0; line-height:0;} /***********************************************************************************************/ /** * 4. NAVIGATION * * Individuelle Formatierung von Navigationselementen * * @section Navigation * @media screen * */ /***********************************************************************************************/ /* --- 1. EBENE ----------------------------------------------------------------------------- */ /* --- Container des Navigationselements --- */ #nav1 div.navbox {height:auto; line-height:28px; font-size:12px; padding-left:10px; cursor:pointer; background-color:#00334e;} #nav1 div.navbox a {text-transform:uppercase;} /* --- Aktiver Zustand und Bildwechsel --- */ #nav1 div.an {color:#ffffff; background-image:url(../_img/nav1_an.jpg); background-position:bottom left; background-repeat:no-repeat;} #nav1 div.an a {color:#ffffff; font-weight:bold; text-decoration:none;} #nav1 div.an a:hover {color:#ffffff; font-weight:bold; text-decoration:none;} /* --- Inaktiver Zustand und Bildwechsel --- */ #nav1 div.aus {color:#ffffff; background-image:url(../_img/nav1_aus.jpg); background-position:bottom left; background-repeat:no-repeat;} #nav1 div.aus a {color:#ffffff; font-weight:bold; text-decoration:none;} #nav1 div.aus:hover {background-image:url(../_img/nav1_hover.jpg); background-position:bottom left; background-repeat:no-repeat;} #nav1 div.aus:hover a {color:#ffffff;} #nav1 div.aus a:hover {color:#ffffff; text-decoration:none;} /* --- 2. EBENE ----------------------------------------------------------------------------- */ /* --- Container des Navigationselements --- */ #nav2 div.navbox {height:auto; line-height:20px; padding-left:25px; font-size:12px; cursor:pointer; background-color:#004467;} #nav2 div.navbox a {text-transform:none;} /* --- Aktiver Zustand und Bildwechsel --- */ #nav2 div.an {color:#ffffff; background-image:url(../_img/nav2_an.jpg); background-position:bottom left; background-repeat:no-repeat;} #nav2 div.an a {color:#ffffff; font-weight:bold; text-decoration:none;} #nav2 div.an a:hover {color:#ffffff; font-weight:bold; text-decoration:none;} #nav2 div.an:hover {background-image:url(../_img/nav2_hover.jpg); background-position:bottom left; background-repeat:no-repeat;} /* --- Inaktiver Zustand und Bildwechsel --- */ #nav2 div.aus {color:#ffffff; background-image:url(../_img/nav2_aus.jpg); background-position:bottom left; background-repeat:no-repeat;} #nav2 div.aus a {color:#ffffff; font-weight:normal;} #nav2 div.aus:hover {background-image:url(../_img/nav2_hover.jpg); background-position:bottom left; background-repeat:no-repeat;} #nav2 div.aus:hover a {color:#ffffff;} #nav2 div.aus a:hover {color:#ffffff;} /* --- METANAVIGATION ------------------------------------------------------------------------ */ #metanav {font-size:11px; color:#ffffff;} #metanav a {color:#ffffff; text-decoration:none;} #metanav a:visited {color:#ffffff; text-decoration:none;} #metanav a:hover {color:#ffffff; text-decoration:underline; background-color:#006699;} /* --- KRÜMELNAVIGATION ----------------------------------------------------------------------- */ #kruemelnav {line-height:22px; font-size:11px;} #kruemelnav a {color:#666666; text-decoration:none;} #kruemelnav a:visited {color:#666666; text-decoration:none;} #kruemelnav a:hover {color:#666666; text-decoration:underline;} /***********************************************************************************************/ /** * 5. INHALTSELEMENTE * * Individuelle Formatierung von sonstigen Inhaltselementen * * @section Inhaltselemente * @media screen * */ /***********************************************************************************************/ /* --- Preview Popups --- */ .preview_popup {width:180px; background-color:#FFFFFF; color:#333333; font-size:10px; border:solid 1px #cccccc;} .preview_popup h3 {font-size:11px; color:#ffffff; background-color:#0088CC; line-height:20px; padding-left:3px;} /* --- Newsblock (Quicklinks!) --- */ #newsblock {margin-top:25px; background-image:url(../_img/hg_newsblock.png); background-position:top left; background-repeat:repeat-y;} #newsblock div.newsblock_kopf {color:#333333; line-height:20px; font-weight:bold; padding-left:20px; padding-top:5px; background-image:url(../_img/hg_newsblock_kopf.png); background-position:top left; background-repeat:no-repeat;} #newsblock div.newsblock_fuss {height:10px; background-image:url(../_img/hg_newsblock_fuss.png); background-position:bottom left; background-repeat:no-repeat;} #newsblock ul {list-style-type:none; padding-left:1.8em; margin-left:0px; padding-bottom:0px; padding-top:0px;} #newsblock ul li {background-image:url(../_img/li_bullet_3.gif); background-repeat:no-repeat; background-position:left top; padding-left:1.6em;} #newsblock a {color:#333333; text-decoration:none;} #newsblock a:link {color:#333333; text-decoration:none;} #newsblock a:visited {color:#333333; text-decoration:none;} #newsblock a:hover {color:#333333; text-decoration:underline;} #newsblock a:active {color:#333333; text-decoration:underline;} /* --- Umfrage --- */ #umfrage {margin-top:25px; background-image:url(../_img/hg_umfrage.png); background-position:top left; background-repeat:repeat-y;} #umfrage div.umfrage_kopf {color:#333333; line-height:20px; font-weight:bold; padding-left:20px; padding-top:5px; background-image:url(../_img/hg_umfrage_kopf.png); background-position:top left; background-repeat:no-repeat;} #umfrage div.umfrage_fuss {margin-top:5px; height:10px; background-image:url(../_img/hg_umfrage_fuss.png); background-position:bottom left; background-repeat:no-repeat;} #umfrage div.inhalt {padding-left:1.8em; padding-right:1.8em; margin-left:0px; padding-bottom:0px; padding-top:0px;} #umfrage ul li {background-image:url(../_img/li_bullet_3.gif); background-repeat:no-repeat; background-position:left top; padding-left:1.6em;} #umfrage a {color:#333333; text-decoration:none;} #umfrage a:link {color:#333333; text-decoration:none;} #umfrage a:visited {color:#333333; text-decoration:none;} #umfrage a:hover {color:#333333; text-decoration:underline;} #umfrage a:active {color:#333333; text-decoration:underline;} input.pollsubmit {width:100px; background-color:#006699; height:18px; color:#ffffff; font-weight:bold; border-color:#006699; margin-top:5px;} input.pollsubmit:hover {background-color:#00334E; color:#ffffff;} #umfrage .frage {padding-top:5px; padding-bottom:10px;} #umfrage .antwort {padding-bottom:10px;} #umfrage .ergebnis {padding-bottom:10px;} #umfrage p {font-size:11px; line-height:13px;} #umfrage .error {color:#cc0000; background-color: transparent; border: none; padding: 0px; width: auto;} #umfrage input.pollanswer {border:none;} /* --- Trailer-Box --- */ #trailer_box {margin-top:18px; background-image:url(../_img/trailer_box/hg_trailer_box.png); background-position:top left; background-repeat:repeat-y;} #trailer_box div.trailer_box-kopf {height:50px; background-image:url(../_img/trailer_box/hg_trailer_box_kopf.png); background-position:top left; background-repeat:no-repeat;} #trailer_box div.trailer_box-inhalt {padding:0px 1.8em 0px 20px; font-size:11px;} #trailer_box div.trailer_box-inhalt a {display:block; margin-bottom:5px; color:#333333; font-size:11px; line-height:14px;} #trailer_box div.trailer_box-fuss {height:35px; padding:0px 18px 0px 35px; background-image:url(../_img/trailer_box/hg_trailer_box_fuss.png); background-position:top left; background-repeat:no-repeat;} #trailer_box div.trailer_box-fuss a {display:block; padding:8px 0px 0px 0px; font-size:12px; font-weight:bold;} /* --- RSS-Box --- */ #rss_box {margin-top:18px; background-image:url(../_img/rss_box/hg_rss_box.png); background-position:top left; background-repeat:repeat-y;} #rss_box div.rss_box-kopf {height:50px; background-image:url(../_img/rss_box/hg_rss_box_kopf.png); background-position:top left; background-repeat:no-repeat;} #rss_box div.rss_box-inhalt {padding:0px 1.8em 0px 1.8em; font-size:11px;} #rss_box div.rss_box-inhalt a {display:block; margin-bottom:5px; color:#333333; font-size:11px; line-height:14px;} #rss_box div.rss_box-fuss {height:35px; padding:0px 18px 0px 35px; background-image:url(../_img/rss_box/hg_rss_box_fuss.png); background-position:top left; background-repeat:no-repeat;} #rss_box div.rss_box-fuss a {display:block; padding:8px 0px 0px 0px; font-size:12px; font-weight:bold;} /* --- Iconleiste --- */ #iconleiste {font-size:10px; text-align:right; line-height:14px;} #iconleiste a {font-size:10px; color:#333333} #iconleiste_text {line-height:26px; font-size:10px;} #iconleiste_buttons {} #iconleiste_buttons img.bookmark {border:solid 1px #cccccc; padding:1px; margin-bottom:-5px; margin-top:2px;} /* --- Fusszeile --- */ #fuss_inhalt {font-size:11px; color:#ffffff; padding-top:10px; line-height:14px;} #fuss_inhalt a {color:#ffffff;} /* --- Druckansicht (tpl_website.print.html) --- */ #fuss_druck {line-height:18px; font-size:10px; color:#000000; text-align:center;} #druckleiste_unten, #druckleiste_oben {text-align:center;} /* --- Anker "Nach oben" --- */ p.anker {background-image:url(../_img/button_anker.png); background-position:top left; background-repeat:no-repeat; padding-left:22px; margin-left:10px;} /* --- Pfeil "Weiter" --- */ p.rechts {background-image:url(../_img/button_rechts.png); background-position:top left; background-repeat:no-repeat; padding-left:22px; margin-left:10px;} /* --- Pfeil "Zurück" --- */ p.links {background-image:url(../_img/button_links.png); background-position:top left; background-repeat:no-repeat; padding-left:22px; margin-left:10px;} /***********************************************************************************************/ /** * 6. TYPO3 * * Formatierung von Systemklassen und Inhaltselementen des Typo3-Systems * Festlegung der im RTE nutzbaren Stildefinitionen * * @section Typo3 * @media screen * */ /***********************************************************************************************/ /* --- LINKS ------------------------------------------------------------------------------- */ /* --- Standardlinks des Typo3-Systems --- */ a.typolink, a.internal-link, a.internal-link-new-window, a.download, a.mail {color:#0088cc; text-decoration:none;} a.typolink:link, a.internal-link:link, a.internal-link-new-window:link, a.download:link, a.mail:link {color:#0088cc; text-decoration:none;} a.typolink:visited, a.internal-link:visited, a.internal-link-new-window:visited, a.download:visited, a.mail:visited {color:#0088cc; text-decoration:none;} a.typolink:hover, a.internal-link:hover, a.internal-link-new-window:hover, a.download:hover, a.mail:hover {color:#0088cc; text-decoration:underline;} /* --- Externe Links des Typo3-Systems --- */ a.external-link, a.external-link-new-window {color:#0088cc; text-decoration:none; border-bottom:dotted 1px #0088cc;} a.external-link:link, a.external-link-new-window:link {color:#0088cc; text-decoration:none; border-bottom:dotted 1px #0088cc;} a.external-link:visited, a.external-link-new-window:visited {color:#0088cc; text-decoration:none; border-bottom:dotted 1px #0088cc;} a.external-link:hover, a.external-link-new-window:hover {color:#0088cc; text-decoration:none; border-bottom:solid 1px #0088cc;} /* --- INHALTSELEMNTE ---------------------------------------------------------------------- */ /* --- Sitemap (Inhaltselement) --- */ div.csc-sitemap {overflow:auto;} div.csc-sitemap > div.sitemap_level1 {margin-left:5px; padding-left:5px; font-size:12px; font-weight:bold; letter-spacing:1px; color:#4B64D3; line-height:25px;} div.csc-sitemap > ul {list-style-type:none; padding-left:1.5em; margin-left:0px;} div.csc-sitemap > ul > li {font-size:14px; font-weight:bold; float:left; width:49%; margin-top:10px;} div.csc-sitemap > ul > li > ul {list-style-type:none; padding-left:1.5em; margin-left:0px;} div.csc-sitemap > ul > li > ul > li {background-image:url(../_img/li_bullet_3.gif); background-repeat:no-repeat; background-position:left top; padding-left:1.6em;} /* --- Dateiverweise (Inhaltselement) --- */ table.csc-uploads {border:solid 1px #AAD7EF; width:500px; margin-bottom:10px; margin-top:5px;} table.csc-uploads td {margin:0px; padding:0px; border:none;} table.csc-uploads tr.tr-even {background-color:#edf4f8;} table.csc-uploads tr.tr-odd {background-color:#F3F3F3;} table.csc-uploads td.csc-uploads-fileName {vertical-align:top; padding:0px; margin:0px; padding-left:5px;} table.csc-uploads td.csc-uploads-fileName a {font-size:11px;} table.csc-uploads td.csc-uploads-fileName p {padding-top:0px; margin-top:0px; margin-bottom:0px; font-size:11px;} table.csc-uploads td.csc-uploads-fileSize {vertical-align:top; padding:0px; margin:0px; padding-left:5px; width:50px;} table.csc-uploads td.csc-uploads-fileSize p {font-size:11px; padding:0px; margin:0px;} /* --- Bild und TextmitBild (Inhaltselement) --- */ div.csc-textpic dd.csc-textpic-caption {font-size:11px; text-align:center;} /* ---- Typo3 CSC-Mailforms (Inhaltselement) --- */ /* * Siehe Bereich Formulare * @ref Formulare */ /* --- Typo3-Bildrahmen überschreiben (BE-Funktion Rahmen) --- */ div.csc-textpic-border div.csc-textpic-imagewrap .csc-textpic-image img {border:2px solid #cccccc; padding:2px;} /* --- RTE-STYLES -------------------------------------------------------------------------- */ /* --- RTE: Farben, die im RTE zur Verfeugung stehen --- */ .hellblau {color:#73D0FF;} .blau {color:#0088CC;} .dunkelblau {color:#00334E;} .beige {color:#F0ECDB;} .hellgrau {color:#cccccc;} .grau {color:#666666;} .dunkelgrau {color:#333333;} .schwarz {color:#000000;} .weiss {color:#ffffff;} /* --- RTE: Zusätzliche P-Styles --- */ p.box1 {background-color:#D4EBF7; border:solid 1px #AAD7EF; padding:5px; margin-top:0px;} /* --- RTE: Listen-Styles --- */ ul.ul1 {list-style-type:none; padding-left:1.5em; margin-left:0px;} ul.ul1 li {background-image:url(../_img/li_bullet_1.gif); background-repeat:no-repeat; background-position:left top; padding-left:1.6em;} ul.ul2 {list-style-type:none; padding-left:1.5em; margin-left:0px;} ul.ul2 li {background-image:url(../_img/li_bullet_2.gif); background-repeat:no-repeat; background-position:left top; padding-left:1.6em;} ul.ul3 {list-style-type:none; padding-left:1.5em; margin-left:0px;} ul.ul3 li {background-image:url(../_img/li_bullet_3.gif); background-repeat:no-repeat; background-position:left top; padding-left:1.6em;} /* --- RTE: Tabellen-Styles --- */ /* --- Initialisieren der Styles --- */ table.table1 {width:100%;} table.table2 {width:100%;} tr.tr1 {} tr.tr2 {} td.td1 {} td.td2 {} /* --- Tabelle 1 --- */ table.table1 {margin:1em 0em; border-collapse:collapse; border-spacing:0px;} table.table1 p {padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; font-size:11px;} table.table1 th, table.table1 td {padding:3px 3px 3px 5px;} table.table1 th {color:#006699; background-color:#D4EBF7; border:solid 1px #AAD7EF; font-size:11px; font-weight:bold; text-align:center;} table.table1 td {color:#333333; border:solid 1px #AAD7EF; font-size:11px; line-height:14px;} table.table1 tr.tr1 td {color:#006699; background-color:#D4EBF7; border:solid 1px #AAD7EF; font-size:11px; font-weight:bold; text-align:center;} table.table1 tr.tr2 td {background-color:#F3F3F3;} table.table1 td.td1 {color:#006699; background-color:#D4EBF7; border:solid 1px #AAD7EF; font-size:11px; font-weight:bold; text-align:center;} table.table1 td.td2 {background-color:#F3F3F3;} /* --- Tabelle 2 --- */ table.table2 {margin:1em 0em; border-collapse:collapse; border-spacing:0px;} table.table2 p {padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; font-size:11px;} table.table2 th, table.table2 td {padding:2px 2px 2px 4px;} table.table2 th {color:#333333; background-color:#F0ECDB; border:solid 1px #D0C893; font-size:11px; font-weight:bold;} table.table2 td {color:#333333; border:solid 1px #D0C893; font-size:11px;} table.table2 tr.tr1 td {color:#333333; background-color:#F0ECDB; border:solid 1px #D0C893; font-size:11px; font-weight:bold;} table.table2 tr.tr2 td {background-color:#F7F6ED;} table.table2 td.td1 {color:#333333; background-color:#F0ECDB; border:solid 1px #D0C893; font-size:11px; font-weight:bold;} table.table2 td.td2 {background-color:#F7F6ED;} /* --- Bilder --- */ img.image1 {border:solid 1px #cccccc;} img.image2 {border:solid 2px #cccccc; padding:2px; margin:3px;} /***********************************************************************************************/ /** * 7. TYPO3-Extensions * * Formatierung von Extensions des Typo3-Systems * * @section Typo3-Extensions * @media screen * */ /***********************************************************************************************/ /* --- SPIELPLAN-TABELLE ------------------------------------------------------------------ */ table.spielplan {margin:0px 0px 0px 0px; border-collapse:collapse; border-spacing:0px;} table.spielplan td, table.spielplan th {padding:2px 2px 2px 4px; border:solid 1px #e4e0cf; line-height:13px;} table.spielplan td {text-align:center; font-weight:normal; font-size:11px;} table.spielplan th {text-align:center; font-weight:bold; font-size:11px; background-color:#F0ECDB;} /* --- SPIELPLANLISTE -------------------------------------------------------------------- */ #spielplan_liste {} #spielplan_liste a.spielplan_link {font-size:11px;} /* --- Übersicht --- */ #box_uebersicht {margin-bottom:25px;} #box_uebersicht div.box_oben {height:10px; background-image:url(../_img/spielplan_liste/box_oben.jpg); background-repeat:no-repeat; background-position:left top;} #box_uebersicht div.box_mitte {padding:5px 10px 5px 15px; background-image:url(../_img/spielplan_liste/box_mitte.jpg); background-repeat:repeat-y; background-position:left top;} #box_uebersicht div.box_unten {height:10px; background-image:url(../_img/spielplan_liste/box_unten.jpg); background-repeat:no-repeat; background-position:left bottom;} #box_uebersicht ul {list-style-type:none; padding-left:2.0em; margin-left:0px;} #box_uebersicht ul li {background-image:url(../_img/spielplan_liste/li_bullet_1.gif); background-repeat:no-repeat; background-position:left top; padding-left:1.6em;} #box_uebersicht h3 {margin-bottom:5px; color:#333333;} #box_uebersicht h4 {margin-top:15px; color:#333333;} #box_uebersicht a {color:#333333; text-decoration:none;} #box_uebersicht a:link {color:#333333; text-decoration:none;} #box_uebersicht a:visited {color:#333333; text-decoration:none;} #box_uebersicht a:hover {color:#333333; text-decoration:underline;} #box_uebersicht a:active {color:#333333; text-decoration:underline;} /* --- Programmpunkte ---*/ #box_programmpunkt {margin-bottom:15px;} #box_programmpunkt div.box_oben {height:29px; background-image:url(../_img/spielplan_liste/box_rund_oben.jpg); background-repeat:no-repeat; background-position:left top;} #box_programmpunkt div.box_mitte {min-height:180px; overflow:visible; padding:10px 12px 5px 12px; background-image:url(../_img/spielplan_liste/box_rund_mitte.jpg); background-repeat:repeat-y; background-position:left top;} #box_programmpunkt div.box_unten {clear:left; height:21px; background-image:url(../_img/spielplan_liste/box_rund_unten.jpg); background-repeat:no-repeat; background-position:left bottom;} #box_programmpunkt h4 {padding-left:35px; padding-top:8px; font-size:14px;} #box_programmpunkt h4 a {color:#333333; text-decoration:none;} #box_programmpunkt div.box_mitte_spalte1 {width:25%; float:left;} #box_programmpunkt div.box_mitte_spalte2 {width:50%; float:left;} #box_programmpunkt div.box_mitte_spalte3 {width:25%; float:left;} #box_programmpunkt div.box_mitte_spalte3_text {text-align:right; line-height:14px; font-size:11px; height:116px;} #box_programmpunkt div.box_mitte_spalte3_buttons {text-align:right;} #box_programmpunkt div.box_mitte_spalte3_buttons img {margin-top:5px;} /* --- Tabelle für Spielplan-Positionierung ---*/ #box_programmpunkt table.spielplan_position {border:none; margin:0px 0px 0px 0px; height:171px;} #box_programmpunkt table.spielplan_position td {padding:0px 0px 0px 0px; vertical-align:bottom;} /* --- SNEAK-PREVIEW ------------------------------------------------------------------- */ .box_sneak {margin-bottom:15px;} .box_sneak div.box_oben {height:29px; background-image:url(../_img/sneak_liste/box_rund_oben.jpg); background-repeat:no-repeat; background-position:left top;} .box_sneak div.box_mitte {min-height:160px; overflow:auto; padding:10px 12px 5px 12px; background-image:url(../_img/sneak_liste/box_rund_mitte.jpg); background-repeat:repeat-y; background-position:left top;} .box_sneak div.box_unten {clear:left; height:21px; background-image:url(../_img/sneak_liste/box_rund_unten.jpg); background-repeat:no-repeat; background-position:left bottom;} .box_sneak h4 {color:#333333; padding-left:35px; padding-top:8px; font-size:14px;} .box_sneak h4 a {color:#333333; text-decoration:none;} /* --- FILM-DETAILS -------------------------------------------------------------------- */ #film_detail {} #film_detail a.film_link {font-size:11px;} /* --- Filmbeschreibung ---*/ #box_beschreibung {margin-bottom:25px;} #box_beschreibung div.box_oben {height:10px; background-image:url(../_img/film_detail/box_oben.jpg); background-repeat:no-repeat; background-position:left top;} #box_beschreibung div.box_mitte {padding:5px 10px 5px 15px; overflow:auto; background-image:url(../_img/film_detail/box_mitte.jpg); background-repeat:repeat-y; background-position:left top;} #box_beschreibung div.box_unten {clear:left; height:10px; background-image:url(../_img/film_detail/box_unten.jpg); background-repeat:no-repeat; background-position:left bottom;} #box_beschreibung h2 {color:#333333; border-bottom:none;} #box_beschreibung h4 {color:#333333;} #box_beschreibung div.box_mitte_spalte1 {width:58%; float:left; text-align:justify;} #box_beschreibung div.box_mitte_spalte1 span {} #box_beschreibung div.box_mitte_spalte1 img {float:left; margin-right:10px;} #box_beschreibung div.box_mitte_spalte2 {width:42%; float:left;} #box_beschreibung div.box_mitte_spalte2_padding {padding:0px 0px 0px 23px;} #box_beschreibung div.programmtyp {margin:10px 0px; text-align:center;} /* --- Filmklappe ---*/ #filmklappe {width:193px; background-image:url(../_img/film_detail/filmklappe_oben.jpg); background-position:top left;} #filmklappe div.filmklappe_unten {height:10px; background-image:url(../_img/film_detail/filmklappe_unten.jpg); background-position:top left; background-repeat:no-repeat; background-color:#eeece2;} #filmklappe ul {list-style-type:none; margin:0px 0px 0px 0px; padding:60px 0px 0px 0px;} #filmklappe ul li {background-color:#141517; border-bottom:solid 1px #a7a7a8; margin:0px 0px 0px 0px; padding:3px 4px 3px 5px; color:#ffffff; font-size:10px; line-height:11px;} #filmklappe ul li span {font-size:10px; font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;} /* --- Boxen für Tickets, Trailer und Extras ---*/ #box_tickets, #box_trailer, #box_extras {margin-bottom:15px;} #box_tickets div.box_oben, #box_trailer div.box_oben, #box_extras div.box_oben {height:29px; background-image:url(../_img/film_detail/box_rund_oben.jpg); background-repeat:no-repeat; background-position:left top;} #box_tickets div.box_mitte, #box_trailer div.box_mitte, #box_extras div.box_mitte {min-height:160px; height:auto; overflow:visible; padding:5px 10px 5px 15px; background-image:url(../_img/film_detail/box_rund_mitte.jpg); background-repeat:repeat-y; background-position:left top;} #box_tickets div.box_unten, #box_trailer div.box_unten, #box_extras div.box_unten {clear:left; height:21px; background-image:url(../_img/film_detail/box_rund_unten.jpg); background-repeat:no-repeat; background-position:left bottom;} #box_tickets h3, #box_trailer h3, #box_extras h3 {padding-left:35px; padding-top:8px; font-size:14px; color:#333333;} /* Scrollbar bei Trailern vermeiden */ #film_detail #box_trailer div.box_mitte {min-height:325px;} /* --- Tickets ---*/ #box_tickets div.box_mitte_spalte1 {width:60%; float:left; line-height:16px;} #box_tickets table.spielplan {margin-top:10px;} #box_tickets div.box_mitte_spalte2 {width:40%; float:left;} #box_tickets div.box_mitte_spalte2_text {text-align:right; padding-top:30px; padding-bottom:15px; line-height:14px; font-size:11px;} #box_tickets h4 {font-size:13px;} #box_tickets div.box_mitte_spalte2_buttons {text-align:right; line-height:14px; font-size:11px;} #box_tickets div.box_mitte_spalte2_buttons img {margin-top:5px;} /* --- Trailer ---*/ #box_trailer div.box_mitte {padding:10px 0px 0px 14px;} /* --- Extras ---*/ #box_extras {} #box_extras ul {list-style-type:none; padding-left:0.5em; margin-left:0px;} #box_extras ul li {background-image:url(../_img/film_detail/li_bullet_1.gif); background-repeat:no-repeat; background-position:left top; padding-left:1.6em;} #box_extras h4 {color:#333333; margin-top:5px;} #box_extras div.box_mitte_spalte1 {width:60%; float:left;} #box_extras div.box_mitte_spalte1 img {float:left; margin-right:10px; margin-top:10px; margin-bottom:5px; border:solid 1px #D0C893;} #box_extras div.box_mitte_spalte2 {width:40%; float:left;} /* --- VORSCHAU-LISTE-------------------------------------------------------------------- */ #vorschau_liste {} #vorschau_liste h5 {font-size:12px; font-weight:bold; border-bottom:solid 1px #E6E6E6;} #vorschau_liste div.box_vorschau {margin-bottom:20px;} #vorschau_liste ul {list-style-type:none; padding-left:2.0em; margin-left:0px;} #vorschau_liste ul li {background-image:url(../_img/vorschau_liste/li_bullet_3.gif); background-repeat:no-repeat; background-position:left top; padding-left:1.6em;} /* --- TRAILER-LISTE -------------------------------------------------------------------- */ #trailer_liste {background-color:#D4EBF7; padding:0px; } #trailer_liste .box_trailer {margin-bottom:0px; height:26px; overflow:hidden; cursor:pointer;} #trailer_liste .box_trailer h3 {padding-left:35px; font-size:12px; color:#333333; line-height:26px; font-weight:normal;} #trailer_liste .box_trailer div.box_oben {height:26px;} #trailer_liste .box_trailer div.box_oben_even {background-image:url(../_img/trailer_liste/hg_oben_even.png); background-repeat:no-repeat; background-position:top left;} #trailer_liste .box_trailer div.box_oben_odd {background-image:url(../_img/trailer_liste/hg_oben_odd.png); background-repeat:no-repeat; background-position:top left;} #trailer_liste .box_trailer div.box_oben:hover {background-image:url(../_img/trailer_liste/hg_oben_hover.png); background-repeat:no-repeat; background-position:top left;} #trailer_liste .box_trailer div.box_oben_aktiv, #trailer_liste .box_trailer div.box_oben_aktiv:hover {background-image:url(../_img/trailer_liste/hg_oben_aktiv.png); background-repeat:no-repeat; background-position:top left;} #trailer_liste .box_trailer div.box_oben_aktiv h3 {font-weight:bold;} #trailer_liste .box_trailer div.box_mitte {position:relative; padding:15px 0px 5px 17px; min-height:160px; overflow:auto; background-color:#F7F6ED; border:solid 1px #F0ECDB; border-top:none;} #trailer_liste .box_trailer div.box_mitte img {margin-left:436px; margin-top:5px;} #trailer_liste .box_trailer div.box_unten {clear:left; height:21px; background-color:#F7F6ED;} /* --- STARTSEITE -------------------------------------------------------------------- */ #startseite {} #startseite_links {width:52%; float:left; margin-bottom:30px;} #startseite_rechts {width:47%; float:left; margin-bottom:30px;} /* --- Programmbox --- */ #startseite div.box_programm {margin-bottom:25px; overflow:visible;} #startseite div.box_programm img {} /* --- Box Special --- */ #startseite div.box_special {clear:left; margin-bottom:25px;} #startseite div.box_special img {float:left; margin-right:5px; padding:2px; border:solid 2px #cccccc;} /* --- Film der Woche --- */ #startseite div.box_filmderwoche {clear:left; margin-bottom:25px;} #startseite div.box_filmderwoche img {float:left; margin-right:5px; padding:2px; border:solid 2px #cccccc;} /* --- Diese Woche neu --- */ #startseite div.box_bundesstart {margin-bottom:0px; width:250px;} #startseite div.box_bundesstart ul {width:170px; list-style-type:none; padding-left:2.0em; margin-left:0px; padding-top:10px;} #startseite div.box_bundesstart ul li {font-size:12px; background-image:url(../_img/li_bullet_3.gif); background-repeat:no-repeat; background-position:left top; padding-left:2.0em;} #startseite div.box_bundesstart div.box_oben {} #startseite div.box_bundesstart div.box_mitte {min-height:108px; overflow:auto; padding:0px; background-image:url(../_img/startseite/box_mitte.jpg); background-repeat:no-repeat; background-position:left top;} #startseite div.box_bundesstart div.box_unten {height:14px; background-image:url(../_img/startseite/box_unten.jpg); background-repeat:no-repeat; background-position:left bottom;} /* --- Kinocharts --- */ #startseite div.box_top5 {margin-bottom:0px; width:250px;} #startseite div.box_top5 ol {width:160px; padding-left:50px; margin-left:0px; padding-top:10px; background-image:url(../_img/startseite/li_nr1.gif); background-position:left top; background-repeat:no-repeat;} #startseite div.box_top5 ol li {color:#006699; font-size:12px; font-weight:bold;} #startseite div.box_top5 ol li a {font-style:normal; font-weight:normal;} #startseite div.box_top5 ol li.nr1 {list-style-type:none;} #startseite div.box_top5 ol li.nr1 a {font-style:normal; font-weight:normal;} #startseite div.box_top5 div.box_oben {} #startseite div.box_top5 div.box_mitte {min-height:108px; overflow:auto; padding:0px; background-image:url(../_img/startseite/box_mitte.jpg); background-repeat:repeat-y; background-position:left top;} #startseite div.box_top5 div.box_unten {height:14px; background-image:url(../_img/startseite/box_unten.jpg); background-repeat:no-repeat; background-position:left bottom;} /* --- Newsbox --- */ #startseite div.box_news {margin-bottom:15px;} #startseite div.box_news span {font-size:12px;} #startseite div.box_news ul {list-style-type:none; padding-left:0px; margin-left:0px;} #startseite div.box_news ul li {clear:left; min-height:54px; padding-left:1.6em; padding-top:8px; padding-bottom:8px;} #startseite div.box_news ul li div.spalte1 {float:left; width:100px;} #startseite div.box_news ul li div.spalte2 {float:left; width:400px;} #startseite div.box_news ul li img {padding:2px; border:solid 2px #cccccc;} #startseite div.box_news ul li h5 {line-height:16px; margin-bottom:1px;} #startseite div.box_news ul li h5 a {text-decoration:none;} #startseite div.box_news ul li h5 a:hover {text-decoration:underline;} #startseite div.box_news ul li h5 {color:#0088cc;} /***********************************************************************************************/ /** * 8. Formulare * * Formatierung von Formularen und Buttons * * @section Formulare * @media screen * */ /***********************************************************************************************/ /* ---- Allgemein --- */ form {margin:0px; padding:0px;} fieldset {border:solid 1px #AAD7EF; background-color:#edf4f8;} input, select, textarea {font-family:arial; font-size:11px; line-height:16px; border:solid 1px #AAD7EF; color:#333333; margin:0px; padding:0px; padding-left:2px;} input:focus, textarea:focus {background-color:#F0ECDB; color:#333333;} label, legend {font-family:arial; color:#333333;} legend {padding-left:10px; font-weight:bold; font-size:12px;} /* ---- Standardklasse für Fehlermeldungen und Mitteilungen --- */ .error {background-color:#D4EBF7; border:solid 1px #AAD7EF; padding:10px; width:475px;} /* * @workaround Einheitliche Fieldsetdarstellung für IE6/IE7 */ fieldset {position:relative; padding-top:8px; padding-bottom:8px;} legend {position:absolute; top:-0.6em; left:0.5em;} /* ---- Typo3 CSC-Mailforms (Inhaltselement) --- */ div.tx-thmailformplus-pi1 form {width:500px;} div.tx-thmailformplus-pi1 div.hinweis {font-size:11px; padding-left:10px; padding-right:10px;} div.csc-mailform-field {clear:left; padding-bottom:3px; padding-top:3px; font-size:11px;} div.csc-mailform-field input {width:250px; height:16px;} div.csc-mailform-field textarea {width:250px; margin-bottom:5px;} div.csc-mailform-field label {width:150px; float:left; display:block; line-height:17px; padding-left:10px;} div.csc-mailform-field div.radio {float:left;} div.csc-mailform-field input.submit {width:100px; background-color:#006699; height:18px; color:#ffffff; font-weight:bold; border-color:#006699; margin-top:5px;} div.csc-mailform-field input.submit:hover {background-color:#00334E; color:#ffffff;} div.csc-mailform-field input.radio {width:auto; height:auto; border:none;} /* ---- Anpassungen für contact_form_filmwunsch.html --- */ #contact_form_filmwunsch {width:400px;} #contact_form_filmwunsch label {width:50px;} #contact_form_filmwunsch textarea {height:50px;} #contact_form_filmwunsch input.submit {width:125px;} #contact_form_filmwunsch p {padding:3px 10px;} div.tx-sremailsubscribe-pi1 {background-color:#edf4f8; border:solid 1px #AAD7EF; padding:10px; width:475px;} /* --- DRUCKANSICHT (tpl_website.print.html) --------------------------------------------------------------- */ #druckleiste_oben input, #druckleiste_unten input {width:150px; height:21px; color:#ffffff; background-color:#006699; text-align:center; font-weight:bold; border:solid 1px #006699; margin-left:24px; margin-right:25px;} #druckleiste_oben input:hover, #druckleiste_unten input:hover {background-color:#00334E; color:#ffffff;}