/* ## ---------------------------------------------- ## ## ---------------------------------------------- ## ## ----------- STYLESHEET-DEFINITIONEN ---------- ## ## ------ (c) 2002-2008 Galileo Webdesign ------- ## ## ---------- www.galileo-webdesign.de ---------- ## ## ---------------------------------------------- ## ## ---------------------------------------------- ## ## ---- Zuletzt gendert am: 07.04.2008, DJ ------ ## ## ## ---------------------------------------------- ## ## INHALT---------------------------------------- ## ## ---------------------------------------------- ## ## ## 1. Struktur der Website: Definition von DIV-IDs und Containern ## 2. Globale Formatierung: Formatierung von HTML-Elementen ## 3. Individuelle Formatierung: Formatierung von Inhaltselementen und Navigation ## 4. Typo3-Klassen: RTE-Klassen und Typo3-Anpassungen ## 5. Formulare: Individuelle Formatierung fr Formulare ## ## ---------------------------------------------- ## ## FARBKARTE ------------------------------------ ## ## ---------------------------------------------- ## ## ## Seitenhintergrund #f7f7f7 ## Standardlinks #cf2538 ## Standardtext #333333 ## Überschriften (H1) #cf2538 ## Überschriften (H2) #4B64D3 ## Hauptnavigation #ffffff/#ffffff ## Subnavigation #ffffff/#ffffff ## Subsubnavigation #333333/#ffffff ## Formulare (Input, Select) #333333 ## Formulare (Legend, Label) #333333 ## Linien #666666 ## */ /* ----------------------------------------------------------------------------------------------------------- */ /* 1. STRUKTUR DER WEBSITE ----------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------- */ /* --- DIVS UND CONTAINER FÜR TEMPLATE (tpl_website.html) --------------------------------------------------- */ /* --- Container - Nimmt alle Divs auf, erzeugt Schatten --- */ #container1 {width:800px; background-image:url(../_img/hg_container.gif); background-position:top left; background-repeat:repeat-y; margin-left:auto; margin-right:auto;} /* --- Container - Nimmt innere Divs auf --- */ #container2 {width:770px; margin-left:15px; margin-right:15px; text-align:left;} /* --- Kopfbereich- Logo und Extranavigation--- */ #kopf {width:770px; height:52px; background-image:url(../_img/hg_kopf.gif); background-position:top left; background-repeat:no-repeat;} /* --- Ausgelagerte Navigationspunkte --- */ #metanav {width:770px; height:24px; text-align:right;} /* --- Leiste - Nimmt Suche und Nav auf --- */ #leiste {width:770px; height:164px; background-image:url(../_img/hg_leiste.jpg); background-position:top left; background-repeat:no-repeat;} /* --- Hauptnavigation--- */ #nav {width:770px; height:23px; position:relative; padding-top:5px; margin-bottom:113px; text-align:right;} /* --- Krümelnavigation --- */ #kruemelnav {width:465px; float:left; margin-left:205px;} /* --- Iconleiste --- */ #iconleiste {width:100px; float:left; padding-top:0px; padding-bottom:0px; text-align:right;} /* --- Mitte - Enthält Subnavigation und Inhaltsbereich --- */ #mitte {width:770px; clear:left; overflow:auto; background-image:url(../_img/hg_mitte.gif); background-position:top left; background-repeat:no-repeat;} /* --- Container für Subnavigation 2. & 3. Ebene --- */ #links {width:192px; height:500px; float:left;} /* --- box für Subnavigation ---- */ #subnav {padding-top:2px;} /* --- box für SubSubnavigation ---- */ #subsubnav {} /* --- Container Inhaltsbereich --- */ #rechts {width:578px; float:left;} /* --- Seitentitel --- */ #titel {width:550px; margin-left:18px; margin-right:10px; margin-bottom:10px;} /* --- Inhaltsbereich --- */ #inhalt {width:550px; margin-left:18px; margin-right:10px; padding-bottom:15px;} /* --- Fußzeile --- */ #fuss {width:800px; height:50px; background-image:url(../_img/hg_fuss.gif); background-position:top left; background-repeat:no-repeat; margin-left:auto; margin-right:auto;} #fuss_inhalt {width:770px; padding-top:25px; font-size:11px; color:#666666; text-align:center;} /* --- DRUCKANSICHT (tpl_website.print.html) --------------------------------------------------------------- */ /* --- Template enthält nur #titel und #inhalt (siehe oben) --- */ /* --- Zustzlich folgende DIVs --- */ #container_druck {width:590px; margin-left:auto; margin-right:auto; background-color:#FFFFFF;} /* --- Obere Leiste mit Druckschaltfälchen --- */ @media screen { #druckleiste_oben {width:550px; margin-left:auto; margin-right:auto; margin-top:15px; 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; margin-bottom:15px; 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 #666666;} /* ----------------------------------------------------------------------------------------------------------- */ /* 2. GLOBALE FORMATIERUNG ----------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------- */ /* --- HTML UND BODY --- */ html {height:100%;} body {margin:0px; padding:0px; background-color:#f7f7f7;} /* --- Body Website --- */ .body_hg {height:100%; background-image:url(../_img/hg_body.gif); background-position:top left; background-repeat:repeat-x;} /* --- Body Druckansicht --- */ .body_hg_druck {height:100%; background-image:none; background-color:#f5f6fc;} /* --- Standardtext-Formatierung --- */ div, p, table, td, ul, ol, li {font-size:12px; font-family:arial; color:#333333; font-weight:normal; line-height:18px;} div, table, td {} /* --- Anpassung des Abstands von P-Tags (Wichtig bei RTE-Nutzung) --- */ p {margin-top:5px; margin-bottom:5px;} /* --- Standardlink-Formatierung --- */ a {color:#4B64D3; text-decoration:none;} a:link {color:#4B64D3; text-decoration:none;} a:visited {color:#4B64D3; text-decoration:none;} a:hover {color:#4B64D3; text-decoration:underline;} a:active {color:#4B64D3; text-decoration:underline;} /* --- Überschriften --- */ /* --- p.hx sind RTE-Klassen --- */ h1 {font-size:16px; font-weight:bold; letter-spacing:1px; color:#cf2538; margin:0px; padding:0px; line-height:50px;} h2, p.h2 {font-size:13px; font-weight:bold; color:#4B64D3; margin:0px; padding:0px; line-height:22px; letter-spacing:1px; margin-top:5px;} h3, p.h3 {font-size:13px; font-weight:bold; color:#4B64D3; margin:0px; padding:0px; line-height:22px; letter-spacing:1px; background-color:#f5f6fc; padding-left:3px;} h4, p.h4 {font-size:13px; font-weight:bold; color:#333333; margin:0px; padding:0px; line-height:22px; letter-spacing:1px;} h5, p.h5 {font-size:12px; font-weight:bold; color:#4B64D3; margin:0px; padding:0px; line-height:20px;} h6, p.h6 {font-size:12px; font-weight:bold; color:#4B64D3; margin:0px; padding:0px; line-height:20px; background-color:#f5f6fc; padding-left:3px;} h7, p.h7 {font-size:12px; font-weight:bold; color:#333333; margin:0px; padding:0px; line-height:20px;} /* ---- Listen und Aufzhlungen ---- */ 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 #cccccc 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;} /* ----------------------------------------------------------------------------------------------------------- */ /* 3. INDIVIDUELLE FORMATIERUNG ------------------------------------------------------------------------------ */ /* ----------------------------------------------------------------------------------------------------------- */ /* --- BILDLEISTE ------------------------------------------------------------------------------------------- */ /* --- Wechselnde Hintergrundbilder in Abhängigkeit des Seitenbereichs --- */ /* --- Über uns --- */ #leiste.area_2 {background-image:url(../_img/hg_leiste_area_2.jpg); background-position:top left; background-repeat:no-repeat;} /* --- Produkte --- */ #leiste.area_3 {background-image:url(../_img/hg_leiste_area_3.jpg); background-position:top left; background-repeat:no-repeat;} /* --- Schulung --- */ #leiste.area_4 {background-image:url(../_img/hg_leiste_area_4.jpg); background-position:top left; background-repeat:no-repeat;} /* --- Service --- */ #leiste.area_5 {background-image:url(../_img/hg_leiste_area_5.jpg); background-position:top left; background-repeat:no-repeat;} /* --- Engineering --- */ #leiste.area_6 {background-image:url(../_img/hg_leiste_area_6.jpg); background-position:top left; background-repeat:no-repeat;} /* --- Infocenter --- */ #leiste.area_24 {background-image:url(../_img/hg_leiste_area_24.jpg); background-position:top left; background-repeat:no-repeat;} /* --- HAUPTNAVIGATION -------------------------------------------------------------------------------------- */ /* --- Container des Navigationselements --- */ #nav div.navbox {height:23px; line-height:23px; float:right; cursor:pointer; padding-left:15px; padding-right:15px;} /* --- Aktiver Zustand und Bildwechsel --- */ #nav div.an {background-image:url(../_img/nav_an.jpg); background-position:top left; background-repeat:repeat-x;} #nav div.an a {color:#ffffff; font-weight:bold;} #nav div.an a:hover {color:#ffffff; font-weight:bold; text-decoration:none;} /* --- Inaktiver Zustand und Bildwechsel --- */ #nav div.aus {} #nav div.aus:hover {background-image:url(../_img/nav_hover.jpg); background-position:top left; background-repeat:repeat-x;} #nav div.aus a {color:#ffffff; font-weight:bold; text-decoration:none;} #nav div.aus a:hover {color:#ffffff; text-decoration:none;} /* --- SUBNAVIGATION ---------------------------------------------------------------------------------------- */ /* --- Container des Navigationselements --- */ #subnav div.navbox {height:auto; line-height:23px; padding-left:10px; border-bottom:solid 1px #7385d4; cursor:pointer;} /* --- Aktiver Zustand und Bildwechsel --- */ #subnav div.an {color:#ffffff; background-image:url(../_img/subnav_an.jpg); background-position:top left; background-repeat:no-repeat;} #subnav div.an a {color:#ffffff; font-weight:bold; text-decoration:none;} #subnav div.an a:hover {color:#ffffff; font-weight:bold; text-decoration:none;} /* --- Inaktiver Zustand und Bildwechsel --- */ #subnav div.aus {color:#ffffff; background-image:url(../_img/subnav_aus.jpg); background-position:top left; background-repeat:no-repeat;} #subnav div.aus a {color:#ffffff; text-decoration:none;} #subnav div.aus:hover {background-image:url(../_img/subnav_hover.jpg); background-position:top left; background-repeat:no-repeat;} #subnav div.aus a:hover {color:#ffffff; text-decoration:none;} /* --- SUBSUBNAVIGATION -------------------------------------------------------------------------------------- */ /* --- Container des Navigationselements --- */ #subsubnav div.navbox {height:auto; line-height:20px; padding-left:25px; font-size:11px; border-bottom:dotted 1px #999999; cursor:pointer;} /* --- Aktiver Zustand und Bildwechsel --- */ #subsubnav div.an {color:#ffffff; background-image:url(../_img/subsubnav_an.jpg); background-position:top left; background-repeat:no-repeat;} #subsubnav div.an a {color:#ffffff; font-weight:bold; text-decoration:none;} #subsubnav div.an a:hover {color:#ffffff; font-weight:bold; text-decoration:none;} /* --- Inaktiver Zustand und Bildwechsel --- */ #subsubnav div.aus {color:#333333; background-image:url(../_img/subsubnav_aus.jpg); background-position:top left; background-repeat:no-repeat;} #subsubnav div.aus:hover {background-image:url(../_img/subsubnav_hover.jpg); background-position:top left; background-repeat:no-repeat;} #subsubnav div.aus a {color:#333333; text-decoration:none; font-weight:normal;} #subsubnav div.aus a:hover {color:#333333; text-decoration:none; font-weight:normal;} /* --- METANAVIGATION -------------------------------------------------------------------------------------- */ #metanav {font-size:11px; color:#666666;} #metanav a {color:#666666; text-decoration:none;} #metanav a:visited {color:#666666; text-decoration:none;} #metanav a:hover {color:#666666; text-decoration:underline;} /* --- KRMELNAVIGATION -------------------------------------------------------------------------------------- */ #kruemelnav {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;} /* --- NEWSBLOECKE (auf der Startseite)--------------------------------------------------------------------- */ /* --- Newsblock1 (News und Events) --- */ #newsblock1 {background-image:url(../_img/hg_newsblock.jpg); background-position:top left; background-repeat:repeat-y; padding-bottom:3px;} #newsblock1 div.newsblock_kopf {padding-left:15px; margin-bottom:3px; color:#ffffff; font-weight:bold; line-height:22px; border-bottom:dotted 1px #ffffff;} #newsblock1 ul {margin-left:10px; padding-left:0px; list-style-type:none;} #newsblock1 li, #newsblock1 a, #newsblock1 p {font-size:11px; line-height:14px;} #newsblock1 li {margin-bottom:3px; padding-left:5px; padding-right:3px; background-color:#ffffff; background-image:url(../_img/hg_newsblock1_li.gif); background-position:top right; background-repeat:repeat-y; border-left:solid 1px #7485d1; border-top:solid 1px #7485d1; border-bottom:solid 1px #7485d1;} #newsblock1 a {color:#cf2538;} /* --- Newsblock2 (Messetermine) --- */ #newsblock2 {background-image:url(../_img/hg_newsblock.jpg); background-position:top left; background-repeat:repeat-y;} #newsblock2 div.newsblock_kopf {padding-left:15px; color:#ffffff; font-weight:bold; line-height:22px; border-bottom:dotted 1px #ffffff;} #newsblock2 ul {margin-left:25px; padding-left:0px;} #newsblock2 li, #newsblock2 a, #newsblock2 p {color:#FFFFFF; font-size:11px; line-height:14px;} #newsblock2 li {margin-bottom:0px;} /* --- 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;} /* ----------------------------------------------------------------------------------------------------------- */ /* 4. TYPO3-KLASSEN ------------------------------------------------------------------------------------------ */ /* ----------------------------------------------------------------------------------------------------------- */ /* --- Standardlinks des Typo3-Systems --- */ a.typolink, a.internal-link, a.internal-link-new-window, a.download, a.mail {color:#4B64D3; text-decoration:none;} a.typolink:link, a.internal-link:link, a.internal-link-new-window:link, a.download:link, a.mail:link {color:#4B64D3; text-decoration:none;} a.typolink:visited, a.internal-link:visited, a.internal-link-new-window:visited, a.download:visited, a.mail:visited {color:#4B64D3; text-decoration:none;} a.typolink:hover, a.internal-link:hover, a.internal-link-new-window:hover, a.download:hover, a.mail:hover {color:#4B64D3; text-decoration:underline;} /* --- Externe Links des Typo3-Systems --- */ a.external-link, a.external-link-new-window {color:#4B64D3; text-decoration:none; border-bottom:dotted 1px #cc0000;} a.external-link:link, a.external-link-new-window:link {color:#4B64D3; text-decoration:none; border-bottom:dotted 1px #cc0000;} a.external-link:visited, a.external-link-new-window:visited {color:#4B64D3; text-decoration:none; border-bottom:dotted 1px #cc0000;} a.external-link:hover, a.external-link-new-window:hover {color:#4B64D3; text-decoration:none; border-bottom:solid 1px #cc0000;} /* --- Sitemap (Inhaltselement) --- */ div.csc-sitemap {margin-top:25px;} 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; background-color:#f5f6fc;} div.csc-sitemap > ul {margin-left:0px; padding-left:30px; list-style-type:disc; padding-bottom:10px; background-color:#FFFFFF;} div.csc-sitemap > ul > li {line-height:18px; font-weight:bold; font-size:11px;} div.csc-sitemap > ul > li > ul {padding-left:20px; list-style-type:disc;} div.csc-sitemap > ul > li > ul > li {line-height:16px; font-size:11px;} /* --- Dateiverweise (Inhaltselement) --- */ table.csc-uploads {border:solid 2px #f5f6fc; 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:#ffffff;} table.csc-uploads tr.tr-odd {background-color:#f5f6fc;} 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;} /* --- IMAGE GALLERY PLUGIN (Inhaltselement) ---------------------------------------------------------------- */ /* --- Allgemein --- */ #image_gallery {padding-top:10px;} /* --- werden im Moment nicht benutzt #image_gallery #pfadnav {margin-bottom:15px;} #image_gallery #pfadnav img {margin-bottom:-3px;} */ #image_gallery #browse_back {margin-top:15px;} /* --- Listenansicht --- */ #image_gallery_list {} #image_gallery_list table {border:none;} #image_gallery_list table td {width:105px; font-size:11px; padding-bottom:25px;} #image_gallery_list img.ImageGallery_thumbnail_image {border:solid 1px #cccccc;} /* --- Datailansicht --- */ #image_gallery_detail {} #image_gallery_detail table td, #image_gallery_detail p {font-size:11px;} #image_gallery_detail table td#medium_image {padding:5px; background-color:#f5f6fc;} #image_gallery_detail table td#go_next {padding-top:25px; padding-left:5px;} #image_gallery_detail table td#go_previous {padding-top:25px; padding-right:5px;} /* ----------------------------------------------------------------------------------------------------------- */ /* 5. FORMULARE ---------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------- */ /* ---- Allgemein --- */ form {margin:0px; padding:0px;} fieldset {border:solid 1px #cccccc;} input, select, textarea {font-family:arial; font-size:11px; line-height:16px; border:solid 1px #cccccc; color:#333333; margin:0px; padding:0px; padding-left:2px;} input:focus, textarea:focus {background-color:#f5f6fc; color:#333333;} label, legend {font-family:arial; color:#333333;} legend {padding:10px; font-weight:bold; font-size:12px;} /* ---- 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 input.submit {width:100px; background-color:#4B64D3; height:18px; color:#ffffff; font-weight:bold; border-color:#4B64D3; margin-top:5px;} div.csc-mailform-field input.submit:hover {background-color:#f5f6fc; color:#4B64D3;} /* ---- Schulungsmodul --- */ #schulung_form fieldset {padding:10px;} #schulung_form label {width:175px;} #schulung_form select {width:160px;} #schulung_form .schulung_farbe {width:20px; float:left; margin-right:5px; margin-left:10px; text-align:center; font-size:11px;} #schulung_form .schulung_info {width:20px; height:25px; float:left; margin-right:5px;} #schulung_form .schulung_name {width:250px; float:left; margin-right:10px; font-size:11px;} #schulung_form .schulung_auswahl {width:175px; float:left; margin-right:10px;} #schulung_form .schulung_radio {width:auto; border:none; padding:0px; margin:0px;} #schulung_form .schulung_input {} /* ---- Schulungsmodul - Popupfenster --- */ #schulung_popup_buttons {padding-top:10px; padding-bottom:10px;} #schulung_popup_buttons input {width:150px; height:21px; color:#ffffff; background-color:#4B64D3; text-align:center; font-weight:bold; border:solid 1px #4B64D3; margin-left:24px; margin-right:25px;} #schulung_popup_buttons input:hover, #druckleiste_unten input:hover {background-color:#f5f6fc; color:#4B64D3;} /* --- DRUCKANSICHT (tpl_website.print.html) --------------------------------------------------------------- */ #druckleiste_oben input, #druckleiste_unten input {width:150px; height:21px; color:#ffffff; background-color:#4B64D3; text-align:center; font-weight:bold; border:solid 1px #4B64D3; margin-left:24px; margin-right:25px;} #druckleiste_oben input:hover, #druckleiste_unten input:hover {background-color:#f5f6fc; color:#4B64D3;}