/********************************************************************************************** CSS on Sails Title: Zuger Kantonsspital Ausbildung Author: XHTMLized (http://www.xhtmlized.com/) Date: August 2009 *********************************************************************************************** 1. BASE 1.1 Reset 1.2 Accessibility Navigation & Hide 1.3 Clearfix 1.4 Default Styles 2. LAYOUT 2.1 Structure 2.2 Header 2.3 Navigation 2.4 Content 2.5 Secondary Content 2.6 Sidebar 2.7 Footer ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1 Reset -----------------------------------------------------------------------------------------------*/ html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; } q { quotes: none; } q:before, q:after { content: ""; content: none; } a, ins, del { text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; } th, td { vertical-align: top; } th { text-align: left; } /* 1.2 Accessibility Navigation & Hide -----------------------------------------------------------------------------------------------*/ ol#accessibility-nav, .hide, #suche label { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; } /* 1.3 Clearfix -----------------------------------------------------------------------------------------------*/ .clearfix:after, #navigation:after, .featured:after, .container:after, #secondary-content .module:after, .termine:after, .breadcrumb:after, .sub-nav:after, .module.links:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* 1.4 Default Styles -----------------------------------------------------------------------------------------------*/ body { background: #fff; color: #7d7d7d; font: 62.5%/1.4 Verdana, "Arial", "Helvetica", sans-serif; text-align: left; } hr { display: none; } strong { font-weight: bold; } em { font-style: italic; } del { text-decoration: line-through; } th { font-weight: normal; } address, cite, dfn { font-style: normal; } li { list-style: none; } abbr, acronym { border-bottom: 1px dotted #999; cursor: help; } input, textarea, select { font-family: Verdana, "Arial", "Helvetica", sans-serif; } a, a:visited { color: #222; text-decoration: underline; } a:hover, a:active { color: #ff306a; text-decoration: underline; } /* 2. LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 2.1 Structure -----------------------------------------------------------------------------------------------*/ .wrapper { width: 980px; position: relative; margin: 0 5px 0 15px; text-align: left; font-size: 1.1em; padding-top: 31px; } .content-wrap { float: left; width: 100%; } #secondary-content, #sidebar { float: left; position: relative; } #footer { clear: both; } .three-cols { padding-top: 17px; } .three-cols #content { margin: 0 191px 0 200px; } .three-cols #secondary-content { width: 200px; margin-left: -980px; } .three-cols #sidebar { width: 190px; margin-left: -191px; } body.home .three-cols { padding-top: 0; } body.home .three-cols #content { margin: 0 181px 0 396px; } body.home .three-cols #secondary-content { width: 378px; } body.home .three-cols #sidebar { width: 180px; border-left: 1px solid #e0e4e0; margin-left: -181px; } /* 2.2 Header -----------------------------------------------------------------------------------------------*/ #header .logo, #header .logo span { display: block; overflow: hidden; height: 21px; width: 353px; } #header .logo { position: relative; } #header .logo span { position: absolute; top: 0; left: 0; z-index: 10; background: url(../images/logo.png) no-repeat; } #header a.logo span { cursor: pointer; } .site-tools { float: right; padding-bottom: 14px; padding-top: 1px; font-size: 1.1em; } .site-tools li { background: url(../images/bg-tools-li.png) no-repeat center right; padding: 0 10px 0 9px; float: left; } .site-tools li.last { background: none; padding-right: 0; } .site-tools a.external { background: url(../images/ico-external.png) no-repeat center right; padding-right: 20px; } .site-tools a, .site-tools a:link, .site-tools a:visited, .site-tools a:active, .site-tools a:hover { color: #717171; text-decoration: none; } .site-tools a:hover { color: #ff306a; } #header form { float: right; margin-top: 3px; width: 180px; } form input { border-top: 1px solid #7c7c7c; border-right: 1px solid #c3c3c3; border-bottom: 1px solid #ddd; border-left: 1px solid #c3c3c3; background: #fff url(../images/bg-input.png) no-repeat top left; padding: 3px 3px 2px; font-size: 1em; color: #999; width: 149px; float: left; height: 13px; } form input[type=file], form input[type=submit] { height: 20px; } form textarea { font-size: 1em; } form input.submit { border: 0; padding: 0; background: none; vertical-align: middle; margin: 0 0 0 3px; width: auto; height: 13px; } #header form input:focus { color: #333; } form#searchform input, form.wpcf7-form input { color: #222; } form#searchform input { display: block; margin-bottom: 9px; } /* 2.3 Navigation -----------------------------------------------------------------------------------------------*/ #navigation { clear: both; border-top: 1px solid #9D9A9B; border-bottom: 1px solid #9D9A9B; margin: 0 0 12px; font-size: 1.1em;} body.home #navigation { margin-bottom: 17px; } #navigation ul { float: left; margin-top: -1px; } #navigation li { float: left; text-transform: uppercase; margin-right: 33px; position: relative; line-height: 1.1; border-left: 1px solid #fff; } #navigation li span { position: absolute; width: 13px; height: 13px; display: block; top: 8px; right: 0; background: url(../images/ico-arrow.png) no-repeat top left; } #navigation li:hover span, #navigation li.hover span { background-position: bottom left; cursor: pointer; } #navigation li a { color: #717171; display: block; padding: 8px 0 7px 3px; } #navigation li a, #navigation li a:hover { text-decoration: none; } #navigation li a:hover, #navigation a.current { color: #ff306a; } #navigation li.nav-1 { width: 169px; } /* Match zgks.ch +15px */ #navigation li.nav-2 { width: 126px; } /* +11px */ #navigation li.nav-3 { width: 163px; } /* +15px */ #navigation li.nav-4 { width: 172px; } /* +16px */ #navigation li ul { left: -999em; } #navigation li:hover ul, #navigation li.open ul { left: 0; } #navigation li li { float: none; text-transform: none; border: 0; padding: 0 0 0 4px; background: none; margin: 0 0 10px; line-height: 1.4; } #navigation li li a { background: url(../images/ico-arrow-small.png) no-repeat 0 5px; padding: 0 0 0 9px; } #navigation li li a:hover, #navigation li li a.current { background: url(../images/ico-arrow-small-pink.png) no-repeat 0 5px; } #navigation ul ul { float: none; margin: 0 0 0 -1px; border-left: 1px solid #9D9A9B; border-bottom: 1px solid #9f9f9f; padding: 10px 5px 0 0; position: absolute; background: #fff url(../images/bg-dropdown-ul.png) no-repeat top right; } #navigation li.open { border-left: 1px solid #9D9A9B; background: url(../images/bg-dropdown.png) no-repeat top right; margin-right: 0; padding: 0; } #navigation li.open span { right: 33px; } #navigation li.open.nav-1 { width: 202px; } /* +15 */ #navigation li.open.nav-2 { width: 159px; } /* +11 */ #navigation li.open.nav-3 { width: 196px; } /* +15 */ #navigation li.open.nav-4 { width: 205px; } /* +16 */ #navigation li.nav-ie6 { width: auto; } #navigation li.nav-1 ul { width: 197px; } #navigation li.nav-2 ul { width: 154px; } #navigation li.nav-3 ul { width: 191px; } #navigation li.nav-4 ul { width: 200px; } #navigation li.nav-1 ul a { width: 184px; } #navigation li.nav-2 ul a { width: 133px; } #navigation li.nav-3 ul a { width: 177px; } #navigation li.nav-4 ul a { width: 185px; } /* 2.4 Content -----------------------------------------------------------------------------------------------*/ h2, h3, h2 a, h3 a { margin: 0 0 11px; color: #000; font-weight: bold; } h1 { font-size: 1.4em; font-weight: bold; padding: 0 0 4px 10px; color: #222; } body.home h1 { padding: 0; } #content h2 { color: #e1306a; font-weight: bold; font-size: 1.2em; line-height: 1.3; padding: 0 0 6px; } a.pdf, a[href$='.pdf'] { background: url(../images/ico-pdf.png) no-repeat 0 1px; padding-left: 15px; } #content .module div, #content p, #sidebar p { color: #222; padding: 0 0 19px; } #content div { color: #222; } .section { background: url(../images/ico-arrow-small-pink2.png) no-repeat center left; padding-left: 10px; margin-left: 5px; } .fade { color: #7d7d7d; } #content .module { padding-right: 50px; } body.home #content .module, body.home #sidebar .module { padding-right: 0; } body.home #content h2 { font-size: 1em; padding: 0; } .fleft { float: left; margin: 0 10px 5px 0; display: block; } li.external a { background: url(../images/ico-external-dark.png) no-repeat bottom right; padding-right: 20px; } .module { padding: 7px 10px; } .image { padding-right: 0; } #sidebar .image p { padding-right: 10px; } .breadcrumb { padding: 0 0 34px 4px; } .breadcrumb li { float: left; margin-right: 5px; color: #222; } .breadcrumb li a, .breadcrumb li a:link, .breadcrumb li a:visited, .breadcrumb li a:active { background: url(../images/ico-arrow-small.png) no-repeat 100% 4px; padding-right: 15px; text-decoration: none; color: #555; } .breadcrumb li a:hover { color: #ff306a; } .featured { margin: 4px 0 8px; } .featured li { width: 91px; float: left; margin-right: 8px; font-size: .8em; line-height: 1.2; overflow: hidden; position: relative; font-family: Arial, Helvetica, sans-serif; } .featured li.last { margin-right: 0; width: 89px; } .featured li img, .featured li a, .featured strong { display: block; } .featured strong { font-weight: normal; padding-top: 2px; } .featured a, .featured a:link, .featured a:visited, .featured a:active { color: #333; text-decoration: none; } .featured a strong { color: #fff; } .featured a span { width: 91px; height: 55px; position: absolute; top: 0; left: 0; background: url(../images/bg-overlay.png) repeat; cursor: pointer; overflow: hidden; } .featured a:hover span, .featured a.hover span { display: none; } .featured a:hover strong, .featured a.hover strong { color: #333; } .termine dt, .termine dd { float: left; display: block; padding-bottom: 4px; } .termine dt { width: 145px; } .termine dd { width: 230px; } dl.list dd { padding: 1px 0 17px 16px; } dl.list dt a, .ddsg-wrapper ul ul li, .list-alt li, li.list-alt, li a.list-alt, ol li { padding: 0 0 0 16px; background: url(../images/ico-arrow-pink.png) no-repeat 0 2px; } dl.list dd ul { margin: 9px 0 0 13px; } dl.list dd ul li { color: #e1306a; list-style: disc; } /* dd.excerpt p, ul, ul li div, ol, ol li div, dl.list dd ul li span { color: #7d7d7d !important; } */ ul.list li, ul li.list, li a.list { background: url(../images/ico-arrow-grey.png) no-repeat center left; padding-left: 16px; margin-bottom: 7px; } .list-alt li, li.list-alt, li a.list, ol li { margin-bottom: 9px; } .ddsg-wrapper ul, .list-alt, ol { padding-bottom: 10px; } .sub-nav { width: 980px; height: 195px; margin-bottom: 3px; } .sub-nav img { float: right; width: 800px; } .sub-nav ul { background: #bfdbe6; padding-top: 11px; float: left; height: 184px; font-size: 1.1em; width: 180px; } .sub-nav a, .sub-nav a:link, .sub-nav a:visited, .sub-nav a:active { color: #555; text-decoration: none; display: block; padding: 3px 10px 4px; width: 160px; } .sub-nav a:hover, .sub-nav a.current { color: #e1306a; } .sub-nav a.current { font-weight: bold; } .content { display: none; } .active { display: block; } /* 2.5 Seconday Content -----------------------------------------------------------------------------------------------*/ body.home #secondary-content .module { background: #eaedea; } #secondary-content .module .image { width: 170px; float: left; margin-right: 15px; } #secondary-content .module .desc { width: 160px; float: left; } .play { position: relative; display: block; cursor: pointer; } .play img { display: block; } .play span { position: absolute; top: 0; left: 0; background: url(../images/ico-play.png) no-repeat center center; width: 100%; height: 100%; display: block; } #secondary-content dd { padding-bottom: 7px; } .kontakt h3 { margin: 0 0 1px; } .contact_box img, img.padd { margin-top: 11px; display: block; } .module-sep { margin-top: 14px; } #secondary-content .play span { width: 170px; height: 100px; } /* 2.6 Sidebar -----------------------------------------------------------------------------------------------*/ body.home #sidebar .module { padding-right: 0; } #sidebar li { margin: 0 0 5px; } #sidebar .links { padding-top: 10px; } #sidebar .links li { margin: 0 0 8px; } #sidebar .module img { margin: 8px 0 5px; } #sidebar .play span { width: 180px; height: 105px; } /* 2.7 Footer -----------------------------------------------------------------------------------------------*/ #footer { padding: 37px 0 7px; line-height: 1; } #footer a { text-decoration: none; color: #7d7d7d; } #footer a:hover { color: #ff306a; } /* Added body.home .three-cols li { display: block; float: left; } body.home .three-cols li li { float: none; } -----------------------------------------------------------------------------------------------*/ .post_dynamic { list-style: none; } .post_dynamic li { position: absolute; top: -100em; left: -100em; } .post_dynamic li.current { position: static; } #navigation li.nav-single { border: 0; background: none; } #navigation li.nav-single span { display: none; } a.more { color: #ff306a; text-decoration: none; } a.more:hover { color: #ff306a; text-decoration: underline; } dd.excerpt p { display: inline; } form.wpcf7-form input[type=text], form.wpcf7-form textarea { width: 60%; } div#content div.ddfmwrap { width: 100% } form.ddfm p.fieldwrap label { width: 30%; } form.ddfm p.fieldwrap select { width: 50px; } form.ddfm p.fieldwrap input[type=text], form.ddfm p.fieldwrap textarea { width: 200px; } .module dt {padding-bottom:4px;} dl.termine dt span.location { display: none } img#wpstats {display: none};