/*------------------------------------------------------------------ Stylesheet für verschiedene Medientypen (all, print) [Inhalt] 0. Initialisierung 1. Body / body #wrapper 2. Header / #header 3. Navigation / #nav 4. Content / #content 5. Sidebar 1 / #sidebar1 6. Sidebar 2 / #sidebar2 7. Footer / #footer 8. Search / #search 9. Print Styles alle properties sind jeweils alphabetisch sortiert [Farben] hellgrau ----- #999 ------ typo text, navigation, content-link orange ------- #FF8200 --- typo h1, active, hover [Typo] Verdana -------------------------------------------------------------------*/ @media all { /*------------------------------------------------------------------ -0. Initialisierung -------------------------------------------------------------------*/ /* reset styles */ html, body { margin: 0; padding: 0; border: 0; vertical-align: baseline; border-left: 0; } /* hide from IE mac \*/ html {min-height: 100%; margin-bottom: 1px;} /* end hiding from IE mac */ div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, a, abbr, acronym, del, dfn, em, font, img, small, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; margin: 0; padding: 0; vertical-align: baseline;} ol, ul {list-style: none;} table {border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;} :focus {outline: 0;} address {font-style: normal;} /* end reset styles */ /* ---------------- wrapper ------------------- */ #wrapper { color: #999; font: 62.5%/75% Verdana, Arial, Helvetica, sans-serif; /* ab jetzt ist 1 em = 10px */ margin-left: auto; margin-right: auto; text-align: left; width: 870px; } /* ---------------- skip navigation ------------------- */ #skipnav {position: absolute; z-index: 2; width: 10em; overflow: hidden; top: -100px; left: -1000px;} #skip a, #skip2 a {} #skip1 a:focus, #skip2 a:focus, #skip1 a:active, #skip2 a:active {z-index: 99; text-decoration: underline; color: #000; background: #FFF;} #blah:active {} /* Internet Explorer can be a little flaky showing the skip-navigation link. #blah:active is an empty selector because it has no properties or values. Oddly this dummy selector makes Internet Explorer behave itself and show the skip-navigation link consistently. */ /*------------------------------------------------------------------ -1. Body -------------------------------------------------------------------*/ body {background-color: #FFF; color: #666; text-align: center; /* hack fuer zentrierung */} p, h1, h2, h3, h4, h5, h6, ul, ol {font-weight: normal; margin-bottom: 15px;} h1, h2, h3, h4, h5, h6 {color: #FF8200;} h1 {font-size: 2.8em; line-height: 1; margin-bottom: 25px;} h2 {font-size: 1.5em; margin-top: 40px;} h3 {font-size: 1.2em;} h3 a:link, h3 a:visited, h3 a:hover {color: #FF8200; text-decoration: none;} h4 {color: #999; font-size: 1.2em; margin-bottom: 0;} p {font-size: 1.2em; line-height: 1.5} p.intro {font-size: 1.4em; margin-bottom: 20px;} strong {font-weight: bold;} em {font-style: italic;} table {border-collapse: collapse; border-spacing: 5px; font-size: 1.1em;} td, th {border-bottom: 1px solid #999; padding: 5px 15px 5px 0; vertical-align: top;} td {text-align: left;} th {border-top: 1px solid #999; text-align: left; font-weight: bold;} form label {display: block; cursor: pointer; margin-top: 20px; margin-bottom: -10px;} textarea, input {width: 400px; background: #ECF3F9;} textarea {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em;} input {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em;} input#reset, input#submit {width: auto; margin-right: 20px; margin-top: 20px; background: none;} input:focus, select:focus, textarea:focus {background: #D9E6F3;} img {border: none; font: 80%/100% Verdana, Arial, Helvetica, sans-serif;} /* fuer browser ohne bilddarstelllung */ a img {border: none; color: #666;} abbr[title] {border-bottom: 1px #666 dotted; cursor: help;} /*------------------------------------------------------------------ -2. Header, Navigation -------------------------------------------------------------------*/ #header, #headerhome {height: 120px; padding: 0 10px; position: relative;} #headerhome {height: 120px;} #logo {position: relative; top: 35px; width: 220px;} /* css-sprites2 für wayfinder */ ul.nav {left: 290px; margin: 0; padding: 0; position: absolute; top: 42px; width: 380px;} ul.nav li a {display: block; float: left; height: 25px; text-indent: -9000px; text-decoration: none;} /* home */ ul.nav li#nav1 a, .nav li#nav1 a:visited {background-image: url(../images/basic/bg-nav.gif); background-repeat: no-repeat; background-position: 0 0; width: 61px;} ul.nav li#nav1.active a, ul.nav li#nav1.active a:hover {background-position: 0 -121px;} ul.nav li#nav1 a:hover {background-position: 0 -40px;} ul.nav li#nav1 a:active {background-position: 0 -80px;} /* agentur */ ul.nav li#nav2 a, .nav li#nav2 a:visited {background-image: url(../images/basic/bg-nav.gif); background-repeat: no-repeat; background-position: -61px 0; width: 83px;} ul.nav li#nav2.active a, ul.nav li#nav2.active a:hover {background-position: -61px -121px;} ul.nav li#nav2 a:hover {background-position: -61px -40px;} ul.nav li#nav2 a:active {background-position: -61px -80px;} /* services */ ul.nav li#nav3 a, .nav li#nav3 a:visited {background: url(../images/basic/bg-nav.gif); background-repeat: no-repeat; background-position: -144px 0; width: 81px;} ul.nav li#nav3.active a, ul.nav li#nav3.active a:hover {background-position: -144px -121px;} ul.nav li#nav3 a:hover {background-position: -144px -40px;} ul.nav li#nav3 a:active {background-position: -144px -80px;} /* portfolio */ ul.nav li#nav4 a, .nav li#nav4 a:visited {background: url(../images/basic/bg-nav.gif); background-repeat: no-repeat; background-position: -225px 0; width: 85px;} ul.nav li#nav4.active a, ul.nav li#nav4.active a:hover {background-position: -225px -121px;} ul.nav li#nav4 a:hover {background-position: -225px -40px;} ul.nav li#nav4 a:active {background-position: -225px -80px;} /* kontakt */ ul.nav li#nav5 a, .nav li#nav5 a:visited {background: url(../images/basic/bg-nav.gif); background-repeat: no-repeat; background-position: -310px 0; width: 70px;} ul.nav li#nav5.active a, ul.nav li#nav5.active a:hover {background-position: -310px -121px;} ul.nav li#nav5 a:hover {background-position: -310px -40px;} ul.nav li#nav5 a:active {background-position: -310px -80px;} /*------------------------------------------------------------------ -4. Content, Main -------------------------------------------------------------------*/ #content {font-size: 1em; line-height: 1.5em; padding: 0 10px;} /* link-styles */ #content p a:link, #portfolio p a:link, #portfolio a:link.back, a.ajaxSearch_resultLink, .ajaxSearch_paging a:link, #content a:link.paging1Prev, #content a:link.paging1Next, #content table a:link, #portfolio table a:link {border-bottom: 1px dotted #FF8200; color: #FF8200; text-decoration: none;} #content p a:visited, #portfolio p a:visited, #portfolio a:visited.back, a.ajaxSearch_resultLink:visited, .ajaxSearch_paging a:visited, #content a:visited.paging1Prev, #content a:visited.paging1Next, #content table a:visited, #portfolio table a:visited {border-bottom: 1px dotted #FF8200/*#FC9*/; color: #FF8200/*#FC9*/; text-decoration: none;} #content p a:hover, #portfolio p a:hover, #portfolio a:hover.back, a.ajaxSearch_resultLink:hover, .ajaxSearch_paging a:hover, #content a:hover.paging1Prev, #content a:hover.paging1Next, #content table a:hover, #portfolio table a:hover {border-bottom: none; color: #FF8200; text-decoration: none;} #content table a:link.imglink, #portfolio table a:link.imglink {border: none;} #portfolio a.back {margin-left: 668px;} /* buttons */ #content a:link.btn, #content a:visited.btn {background-image: url(http://www.drewsdesign.de/assets/templates/dd-template-2009/images/basic/btn-all.png); background-repeat: no-repeat; background-position: 0 0; border: none; display: block; font-size: 1.2em; float: left; height: 35px; margin: 30px 30px 10px 0; outline: none; overflow: hidden; text-indent: -9000px; width: 125px;} #content a:link.portfolio, #content a:visited.portfolio {background-position: 0 0;} #content a:hover.portfolio {background-position: 0 -40px;} #content a:link.services, #content a:visited.services {background-position: -150px 0;} #content a:hover.services {background-position: -150px -40px;} #content a:link.kontakt, #content a:visited.kontakt {background-position: -300px 0;} #content a:hover.kontakt {background-position: -300px -40px;} #content a:link.agentur, #content a:visited.agentur {background-position: -450px 0;} #content a:hover.agentur {background-position: -450px -40px;} #content a:link.referenzen, #content a:visited.referenzen {background-position: -600px 0; width: 140px;} #content a:hover.referenzen {background-position: -600px -40px; width: 140px;} #content a:link.index, #content a:visited.index {background-position: -765px 0; width: 105px;} #content a:hover.index {background-position: -765px -40px; width: 105px;} #content .leftcolumn {float: left; margin-right: 30px; width: 300px;} #content .rightcolumn {float: left; width: 300px;} #content ul {} #content ul li {font-size: 1.2em; padding-bottom: 5px;} #content ul.checklist {margin: 0;} #content ul.checklist li {background: url(../images/basic/check.gif) 0 0 no-repeat;} #content ul.servicelist {line-height: 1.3;} #content ul.servicelist li {border-top: 2px dotted #CCC; display: block; line-height: 1.4; padding-bottom: 25px; padding-top: 5px; width: 500px;} #content ul.servicelist li h2 {line-height: 1.1; margin-bottom: 4px; margin-top: 0;} #content ul.servicelist li em {display: block; margin-bottom: 5px;} /* formatierung der captions */ #portfolio #caption {float: left; margin-top: 30px; width: 600px;} #portfolio #caption h2 {margin-top: 0;} #portfolio #captionmargin {float: right; margin-top: 30px; width: 235px;} #portfolio #captionmargin h2 {margin-left: 25px; margin-top: 0;} #portfolio #captionmargin ul.checklist {margin: 14px 0 0 10px;} #portfolio #captionmargin ul.checklist li {background: url(../images/basic/check.gif) 0 0 no-repeat; font-size: 1.2em; line-height: 1.2; padding: 2px 0 6px 25px;} #portfolio table.portfolioindex {margin: 20px 10px; width: 850px;} #portfolio table.portfolioindex thead tr {background-color:#F4F4F4; height: 30px;} #portfolio table.portfolioindex thead tr th {padding-top: 10px;} #portfolio table.portfolioindex tbody tr:first-child td {padding-top: 15px;} #portfolio table.portfolioindex tr:hover {background-color:#F4F4F4;} #portfolio table.portfolioindex td {line-height: 1.4;} #portfolio table.portfolioindex td a {line-height: 1.4;} #portfolio table.portfolioindex td img {margin: 3px 0 3px;} #content .small {font-size: 0.9166em; line-height: 1em;} #content .totop {font-size: 0.9166em; margin-top: 20px;} #content .totop a:link {font-weight: normal;} #content .nospace {margin-bottom: 0;} #content .smallspace {margin-bottom: 5px;} #content .bigspace {height: 130px;} #homeanimation {background: url(../images/basic/bg-home.gif) top left no-repeat; height: 450px; margin-bottom: 20px; padding: 0;} #homeanimation ul {margin: 0; padding: 0;} #main {float: left; width: 630px;} #fourcolumn {float: left; width: 850px;} .foliobox, .folioboxright {float: left; height: 255px; margin-bottom: 20px; width: 190px;} .foliobox h3, .folioboxright h3 {margin-bottom: 5px;} .foliobox p, .folioboxright p {margin-bottom: 0;} .foliobox img, .folioboxright img {margin-bottom: 10px;} .foliobox {margin-right: 30px;} /*------------------------------------------------------------------ -5. Sidebar 1 -------------------------------------------------------------------*/ #sidebar1 {font-size: 1.2em; float: left; margin: 73px 0 0 28px; width: 180px;} #sidebar1 p {font-size: 1em; margin-bottom: 10px; margin-left: 25px;} #sidebar1 h3 {margin-left: 25px;} #sidebar1 a:link {border-bottom: 1px dotted #FF8200; color: #FF8200; text-decoration: none;} #sidebar1 a:visited {border-bottom: 1px dotted #999; color: #999; text-decoration: none;} #sidebar1 a:hover {border-bottom: none; color: #FF8200; text-decoration: none;} #sidebar1 ul {} #sidebar1 ul li {font-size: 1em; padding: 0 0 10px 25px;} #sidebar1 ul + ul {margin-top: 20px;} #sidebar1 p > a:link.btn {margin-top: 0;} /*------------------------------------------------------------------ -6. Sidebar 2 -------------------------------------------------------------------*/ /*------------------------------------------------------------------ -7. Footer -------------------------------------------------------------------*/ #footer {clear: both; font-size: 1.1em; height: 50px; line-height: 1.6; padding: 80px 10px 20px 10px;} #footer a:link {border-bottom: none; color: #999; text-decoration: none;} #footer a:visited {border-bottom: none; color: #999; text-decoration: none;} #footer a:hover {border-bottom: none; color: #FF8200; text-decoration: none;} #footer .boxleft, #footer .box, #footer .boxright {padding: 2px 0;} #footer .boxleft {float: left; margin-right: 20px;} #footer .box {border-left: 1px solid #999; float: left; margin-right: 20px; padding-left: 20px;} #footer .boxright {float: right; width: 165px;} /*------------------------------------------------------------------ -8. Search -------------------------------------------------------------------*/ /* modx-snippet ajaxsearch */ #search {background: url(../images/basic/bg-search.jpg) no-repeat; height: 30px; margin: 3px 0 0 680px; width: 160px;} /*#search {background: url(../images/basic/bg-search.jpg) no-repeat; height: 30px; position: absolute; top: 37px; left: 680px; width: 160px;}*/ #ajaxSearch_form {background-color: transparent; float: left; margin-top: 0; margin-left: 6px; width: 160px;} #ajaxSearch_form label {padding-top: 7px; margin: 0;} #ajaxSearch_input {background-color: transparent; border: medium none; color: #999; float: left; height: auto; margin-right: 5px; padding-top: 0; width: 118px;} /*#ajaxSearch_input {background-color: transparent; border: medium none; color: #999; float: left; margin-right: 5px; padding-top: 7px; padding-left: 3px; width: 115px;}*/ #ajaxSearch_submit {background-color: transparent; border: none; float: left; margin-top: -10px; width: 31px;} /*#ajaxSearch_submit {background-color: transparent; border: none; float: left; width: 31px;}*/ /*#ajaxSearch_submit {background: transparent; border: none; float: left; height: auto; width: 31px;}*/ div.AS_ajax_resultsIntroFailure {font-size: 1.2em; font-weight: bold; margin-bottom: 100px;} /* fehlermeldung zur suche: keine ergebnisse, zu kurze eingabe, etc. */ p.ajaxSearch_resultsInfos {font-weight: bold; margin: 0} /* text "20 ergebnisse gefunden..." */ span.ajaxSearch_resultsDisplayed {display: none;} span.ajaxSearch_grpResultsDisplayed {display: none;} div.ajaxSearch_grpResultName {margin: 5px 0;} div.paging1 {margin: 5px 0 20px;} /*#prev_site_wide {margin-right: 10px;}*/ /* nicht verwendet, nur wichtig, wenn &pagingType=`1` */ /*#next_site_wide {margin-left: 10px;}*/ /* nicht verwendet, nur wichtig, wenn &pagingType=`1` */ span.ajaxSearch_highlight, span.ajaxSearch_highlight1, span.ajaxSearch_highlight2 {border-bottom: 2px solid #F09; font-weight: bold; z-index: 99;} /* hervorhebung der suchbegriffe, die hervorhebung der portfolio-thumbs findet per jQuery direkt im chunk footer-portfolio-dd statt */ span.ajaxSearch_paging {display: block; font-size: 1.2em; margin-bottom: 30px;} /* zeile "ergebnisseiten 1 | 2 | 3" etc. */ span.ajaxSearch_paging:last-child {margin-top: 30px;} span.ajaxSearch_currentPage {font-weight: bold;} /* hervorhebung der aktuellen seite in der o.g. zeile */ div.ajaxSearch_result {} /* ergebnislisten-eintrag */ a.ajaxSearch_resultLink {font-size: 1.2em;} /* link zur gefundenen seite, die styles sind oben bei den allgemeinen link-styles zu finden */ span.ajaxSearch_resultDescription {font-size: 1.2em;} /* zeigt die modx-description der gefundenen seite */ div.ajaxSearch_resultExtract {margin-top: 5px;} /* extract der gefundenen seite mit dem suchbegriff */ } @media print { /*------------------------------------------------------------------ -9. Print Styles -------------------------------------------------------------------*/ * {background: #FFF; color: #000;} body {font: 90%/100% Verdana, Arial, Helvetica, sans-serif;} body, #wrapper, #footer {background: none;} #header, #nav {display: none;} p, h1, h2, h3, h4, h5, h6, ul, ol {color: #000;} #content, #footer p {margin-left: 20px;} #content {width: auto;} }