/*==================================================================== CSS MCM GROUP stylesheet für die Website der MCM Group Stand: Anfang Datei: template.css Datum: 01. Dezember 2010 Autor: Cermusoni ID, Ursula Volkart Aufbau: 1. Kalibrierung und RESET - reset - start 2. Layout Positionierung 3. Menugestaltung 4. Typografie 5. Module 6. Login/Editor 7. Joomla diverse 8. Error CSS ====================================================================*/ /*----------------------------------------------------------------/ 1. Kalibrierung und RESET -----------------------------------------------------------------*/ /* reset */ *{border:0; font-size:1em; margin:0; padding:0;} a {outline:none; text-decoration:none;} ul, ol, li {list-style:none} table {border-collapse:collapse; border-spacing:0;} del, ins {text-decoration:none;} caption, th {text-align:left;} h1, h2, h3, h4, h5, h6 {font-weight:normal;} q:before, q:after {content:'';} abbr, acronym {font-variant:normal;} sup, sub {vertical-align:baseline;} legend {color:#000;} input, button, textarea, select, optgroup, option {font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit;} input, button, textarea, select {font-size:1em;} /* start */ html {height:100%; margin-bottom:1px; background-color:#fff;} /*background-color:#45617A;*/ body {background-color:#fff; color:#534741; font:normal normal normal .8em/1.8em "Lucida Sans","Lucida Grande",sans-serif; text-align:left;} /*----------------------------------------------------------------/ 2. Layout Positionierung -----------------------------------------------------------------*/ div#overall {height:100%; width:960px; margin:auto; padding-top:20px;} div#container {background-color:#fff; width:960px; text-align:left; position:absolute;} /* Modul-Positionen -------------------------------------------------------------------- */ div#navi {width:145px; margin: 0px 0 0 45px; float:left;} div#content {width:400px; margin:70px 0 50px 50px; float:left; overflow:hidden;} div#main {float:left; overflow:hidden;} div#galery {float:right; width:230px; margin:0px 15px 20px 0; overflow:hidden;} div#footer {bottom:0px; height:45px; overflow:hidden;} div#footer2 {bottom:0px; text-align:center; overflow:hidden;} /* Floats -------------------------------------------------------------------- */ .floatLeft {float:left;} .floatRight {float:right;} .floatClear {clear:both;} /*Innenabstände -------------------------------------------------------------------- */ div.innavi {padding:0;} div.incontent {padding:0;} div.inmain {padding:0;} div.ingalery {padding:0;} div.infooter {padding:0;} /*----------------------------------------------------------------/ 3. Menugestaltung -----------------------------------------------------------------*/ ul.menu li a {width:100%;} /*Gepunktete Linien --------------------------------*/ ul.menu li.liniennav {background: url(img/puenktli.png) repeat-x 0 0px; padding-top:20px; margin-top:183px;} /*Linie oberhalb Hauptmenu, generiert mit Bild*/ /*ul.menu + ul.menu {padding-top:24px; border-top:dotted 3px;} Linie unterhalb Hauptmenu, generiert mit Linie*/ /* ul.menu {background: url(../images/puenktli.png) repeat-x bottom; padding-bottom:10px;} /*Linie unterhalb Hauptmenu, generiert mit Bild*/ /* ul.menu li.item18 {background: url(../images/puenktli.png) repeat-x left bottom; padding-bottom:5px;} /*Linie unterhalb Portraitmenu, generiert mit Bild*/ /* Startseite-Button -------------------------------*/ ul.menu li.logo a {background: url(img/logo.png) no-repeat left top; display:block; width:130px; height:75px; overflow:visible; text-indent:-9000px; margin-bottom:166px;} /*Hauptnavigation -------------------------------------------------------------------- */ /*normal*/ ul.menu li a {text-decoration:none; color:#45617A; font-weight:bold; font-size:1.3em; line-height:1.3em; letter-spacing:-.01em; display:block; height:32px;} /*hover, pressed und active*/ ul.menu li a:hover, ul.menu li a:active, ul.menu li#current a {color:#6A5A54;} /*pressed*/ ul.menu li a:active {font-size:1.25em;} /*Subnavigation -------------------------------------------------------------------- */ /*normal*/ ul.menu li ul li a {color:#998675; font-size:0.95em; font-weight:normal; display:block; height:25px; letter-spacing:-.03em;} /*hover, pressed und active*/ ul.menu li ul li a:hover, ul.menu li ul li a:active, ul.menu li ul li#current a {color:#6A5A54; font-weight:bold; letter-spacing:-.03em;} /*pressed*/ ul.menu li li a:active {font-size:0.87em; font-weight:bold;} /*Portrait-Navigation -------------------------------------------------------------------- */ ul.menu li.item17 a, ul.menu li.item18 a {font-size:0.85em; height:25px; letter-spacing:-.05em; word-spacing:-0.13em;} ul.menu + ul.menu {margin-top:5px;} /*Abstand zum oberen (dem Haupt-)Menu*/ /*Footer -------------------------------------------------------------------- */ div.footer {color:#45617A; font-weight:bold; text-decoration:underline; font: 0.85em/1em "Lucida Sans","Lucida Grande",sans-serif; letter-spacing:0.03em; padding:15px 0; } /*Login-Navigation -------------------------------------------------------------------- */ div.infooter ul.menu li a {color:#45617A; font-weight:bold; text-decoration:underline; font: 0.85em/1em "Lucida Sans","Lucida Grande",sans-serif; letter-spacing:0.03em; padding:15px 0;} div.infooter ul.menu li#current a {color:#45617A;} #footer div.infooter ul.menu li a:hover {text-decoration:none; color:#6A5A54;} #footer div.infooter ul.menu li a:active {color:#6A5A54;} #footer div.infooter ul.menu {height:0px; float:right;} #footer div.infooter p.legend + ul.menu {padding:5px 75px 5px 0;} /*Weblinks bearbeiten -Navigation -------------------------------------------------------------------- */ ul.menu li.item20 a {font-size:0.85em; height:25px; letter-spacing:-.05em; word-spacing:-0.13em;} ul.menu + ul.menu + ul.menu {margin-top:5px; border-top:0px;} ul.menu li.item20 {border-top:none; background: url(/imgs/puenktli.png) repeat-x left bottom; padding-bottom:5px;} /*----------------------------------------------------------------/ 4. Typografie -----------------------------------------------------------------*/ div p {margin: 12px 0 20px 0; } p sup {vertical-align:super; font-size:80%;} p sub {vertical-align:sub; font-size:80%;} /*Überschriften -------------------------------------------------------------------- */ h1 {font:bold 2.8em/1em "Times New Roman", "Times", serif; color: #6D625C; letter-spacing:-0.6px;} h1 a {text-decoration:none; color: #6D625C;} h1 {display:table-cell; vertical-align:bottom; height:160px; padding-bottom:15px;} /*display:table-cell --> damit vertical-align wirkt in Box*/ h2 {font:bold 1.3em "Lucida Sans","Lucida Grande",sans-serif; letter-spacing:-.01em; color:#45617A;} /*wie Navigation*/ h3 {font:bold 2.5em/1em "Times New Roman", "Times", serif; letter-spacing:-.3px; color:#534741;} /*ähnlich h1*/ h4 {font-size:1em; font-weight:bold; line-height:1.2em; margin-top:14px;} h5 {font:bold 1em/1em "Times New Roman", "Times", serif;} h6 {font-size:0.85em; font-weight:bold;} /*Klassen Formate -------------------------------------------------------------------- */ .zitat {font:normal normal normal 1.7em/1em "Times New Roman", "Times", serif; color:#45617A; background: url(img/puenktli.png) repeat-x 0 0px; padding:20px 0 0 0;} .zitat-ohne-linie {font:normal normal normal 1.3em/1.2em "Times New Roman", "Times", serif; color:#45617A; padding:0;} .legend {color:#998675; font: normal normal normal 0.95em/0.1em "Lucida Sans","Lucida Grande",sans-serif ; letter-spacing:0.03em; margin-bottom:10px; text-align:right;} .content-image img {padding-bottom:5px; width:400px; height:auto;} #footer {background: url(img/puenktli.png) repeat-x 0 0px; padding-top:5px;} #footer .legend {color:#6A5A54; font:normal normal normal 0.85em/1em "Lucida Sans","Lucida Grande",sans-serif; letter-spacing:0.03em; float:left; text-indent:225px; } #footer2 .legend {color:#6A5A54; font:normal normal normal 0.85em/1em "Lucida Sans","Lucida Grande",sans-serif; text-align:left; letter-spacing:0.03em; padding:10px 325px 10px 225px;} .ganzunten .legend {color:#6A5A54; font:normal normal normal 0.85em/1em "Lucida Sans","Lucida Grande",sans-serif; text-align:left; letter-spacing:0.03em; padding:10px 0 0 0; margin:0;} div.ganzunten {padding:400px 0 0 0; margin:0;} .erster {background: url(img/puenktli.png) repeat-x left top; padding-top:20px; margin-top:12px;width:400px;} h4.erster, h4.wir-basteln-gern-am-layout {padding:20px 0px 15px 0px; margin-top:12px; font:normal 1.35em/1.7em "Lucida Sans","Lucida Grande",sans-serif; letter-spacing:-.05em; color:#45617A; } .wir-basteln-gern-am-layout {font:normal 1.35em/1.7em "Lucida Sans","Lucida Grande",sans-serif; letter-spacing:-.04em; color:#45617A;} div.liste{width:400px;} h4.erster + p.wir-basteln-gern-am-layout {margin-top:0; line-height:1.1em; padding-bottom:18px;} p.wir-basteln-gern-am-layout a {font-size:0.85em;} .liste h4, .liste div{margin-left:30px; padding-right:20px;} .liste p{padding-left:30px;} .listetitel {border-top:2px dotted #998675; padding-top:23px;} p.listentext {margin-bottom:11px;} div.liste p.zitat {padding:12px 0; margin:18px 0 0 30px;} .listelink {padding-bottom:12px;} .horizontal {text-align: justify; width:400px;} ul.horizontal li {display: inline;} ul.horizontal {padding-bottom:15px;} .schlusslinie{background: url(img/puenktli.png) repeat-x left bottom; overflow:hidden; padding-bottom:5px; width:400px;} /* Links -------------------------------------------------------------------- */ a:link, a:visited {color:#45617A; font-weight:bold; text-decoration:underline;} a:hover {color:#6D625C; text-decoration:none;} a img {vertical-align: -4px;} /*----------------------------------------------------------------/ 5. Module -----------------------------------------------------------------*/ /*Sidebar Galery -------------------------------------------------------------------- */ div#galery {background: url(img/puenktli.png) repeat-x 0 0px;} div.ingalery {padding-top:25px;} div.ingalery h2{padding-bottom:15px;} div.image_tn{padding-top: 5px;} div.inimage_tn{height:135px; width:180px;overflow:hidden;} /*Bildausschnitt-Fenster: die Bilder werden im bildgalerie.php auf eine Grösse von width=180px verkleinert*/ #galery .legend a{color:#998675; text-decoration:none; font: normal normal normal 0.89em/0.5em "Lucida Sans","Lucida Grande",sans-serif; letter-spacing:0.03em; text-align:right; } #galery .legend {margin-top:10px; padding-right:48px;} /*Weblinks -------------------------------------------------------------------- */ div.weblinks .description, p.linkinfo {font: .93em/1.6em "Lucida Sans","Lucida Grande",sans-serif; color:#534741;} div.weblinks .category, div.joomla h4.linktitel {font: bold 1.1em/1.5em "Lucida Sans","Lucida Grande",sans-serif;} h4.linktitel {padding-top: 15px; margin-top:2px;} h4.linktitel + h4.linktitel {margin-top:18px;} h4.linktitel + p.linkinfo {margin:3px 0 14px 0;} div.weblinks tr {vertical-align: baseline;} div.weblinks .filter {text-align: right; font: .93em/1.6em "Lucida Sans","Lucida Grande",sans-serif; color:#534741;background: url(img/puenktli.png) repeat-x 0 0px; padding-top:8px; margin-top:12px;} tr.even td, div.joomla tr.odd td {background:#fff; border-bottom:2px dotted #998675; padding:10px 10px 15px 10px;} div.weblinks label.label-left {display:block; float:left; width:150px;} /*----------------------------------------------------------------/ 7. Error CSS -----------------------------------------------------------------*/ #outline {margin:0px; padding:0px; padding-top:60px; padding-bottom:60px; width:814px;} #errorboxoutline {background-color:#fff; border:1px solid #000000; width:600px;} #errorboxheader {background:#E44249; border-bottom:1px solid #000000; color:#fff; font-weight:bold; font-size:18px; line-height:26px; text-align:center; width:600px;} #errorboxbody { text-align:left;} #errorboxbody ol {list-style:none;} #errorboxbody ul {list-style:none; margin:0px 25px;} #errorboxbody p {padding:10px;} #techinfo {border:1px solid #ccc; color:#ccc; margin:10px; padding:10px; text-align:left;} #techinfo p {color:#ccc;}