/* ------------------------------------------------------------ eckl-architektur.de, Stylesheet - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - .autor JANDA+ROSCHER (www.janda-roscher.de) .version 1.0 .url eckl-architektur.de .timestamp 23/08/2010 ------------------------------------------------------------- */ /* ------------------------------------------------------------- eckl-architektur.de, Inhaltsverzeichnis - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1. IMPORTANWEISUNGEN, SCHRIFTEN, BODY, HTML 2. HELFERKLASSEN 2.1 clearfix 3. STRUKTUR 4. NAVIGATIONEN 4.1 navInfo 4.2 navMain 4.3 navSub 5. ELEMENTE 5.1 Sidebar 5.2 Suche 5.3 BVM Logo 5.4 Links 5.5 Überschriften 5.6 Absatz 5.7 Listen 5.8 Spezielle Klassen 5.9 Tabelle 6. NEWS 8. CONTACT FORM 9. HOME PAGE 9.1 Tabs 9.2 Container 9.2.1 Navigation 9.2.2 Content ------------------------------------------------------------- */ /* ------------------------------------------------------------- 1. Importanweisungen, Schriften, body, html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* ------ Reset part ------ */ /* Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.4.1 */ /* assistant-regular - latin */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 400; src: url('../_fonts/assistant-v4-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Assistant'), local('Assistant-Regular'), url('../_fonts/assistant-v4-latin-regular-.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../_fonts/assistant-v4-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../_fonts/assistant-v4-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../_fonts/assistant-v4-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../_fonts/assistant-v4-latin-regular.svg#Assistant') format('svg'); /* Legacy iOS */ } html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym {border:0;font-variant:normal;} /* to preserve line-height and selector appearance */ sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} /*because legend doesn't inherit in IE */ legend{color:#000;} html, body, #wrap { height: 100%; } html { overflow-y: scroll; } body { font-family: arial, verdana, sans-serif; line-height: 18px; color: #7e8788; font-size: 12px; position: relative; } #wrap { width: 935px; margin: 0 auto; } body > #wrap { height: auto; min-height: 100%; } a, a.mail, a.internal-link, a.external-link-new-window { color: #77bad2; text-decoration: none; } a:hover, a:active { color: #000 ; } /* ------------------------------------------------------------- 2. Helferklassen - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* 2.1 clearfix */ .clear:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clear { display: inline-block; } /* Hide from IE Mac \*/ .clear { display: block; } /* End hide from IE Mac */ /* webfont loading */ .wf-loading #navMain { visibility: hidden; } .wf-active #navMain { visibility: visible; } /* ------------------------------------------------------------- 3. Struktur - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #header { position: relative; height: 96px; } #start #header { height: 111px; } #logo { position: absolute; left: 1px; top: 28px; } #imgWrapper { height: 388px; /* background: url("../_img/divider.gif") repeat-x bottom; */ margin-bottom: 22px; } #start #imgWrapper { background: none; height: 516px; } #bgReflection { background: url("../_img/bg-blue-start.png") repeat-x; position: absolute; top: 483px; height: 38px; width: 100%; z-index: 15; } /* ------------------------------------------------------------- 4. Navigationen - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* 4.1 navInfo */ #navInfo { position: absolute; right: 0; top: 60px; } #navInfo li { display: inline; } #navInfo li a { color: #a8a9aa; font-size: 10px; line-height: 12px; padding-left: 12px; } #navInfo li a:hover, #navInfo li a:active, #navInfo li a.active { color: #000; } /* 4.2 navMain */ #navMain { width: 154px; float: left; padding-right: 10px; text-transform: uppercase; margin-bottom: 40px; } #navMain li { float: left; width: 144px; margin-bottom: 10px; } #navMain li.first { } #navMain li.last { } #navMain li a { font-family: Assistant, Arial; color: #67726a; display: block; font-size: 15px; line-height: 18px; letter-spacing: 0.2em; } .wf-active #navMain li a { font-size: 15px; letter-spacing: 0.2em; } #navMain li.last a { } #navMain li a:hover, #navMain a.active, #navMain li.active a { color: #000; background: url("../_img/bg-link.png") no-repeat right 2px; } /* 4.3 navSub*/ #navSub { width: 141px; float: right; padding-right: 10px; } #navSub li { } #navSub li a { display: block; color: #8b8a8a; font-size: 12px; line-height: 16px; padding-bottom: 7px; } #navSub li a:hover, #navSub li a:active, #navSub li a.active { color: #000; } /* 4.3 navSubSub*/ #navSubSub { width: 160px; float: left; padding-right: 10px; } #navSubSub li { } #navSubSub li a { display: block; color: #8b8a8a; font-size: 12px; line-height: 16px; padding-bottom: 7px; } #navSubSub li a:hover, #navSubSub li a:active, #navSubSub li a.active { color: #000; } /* ------------------------------------------------------------- 5. Elemente - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #mainContainer { position: absolute; width: 935px; top: 521px; padding-bottom: 40px; z-index: 20; } #start #mainContainer { padding-bottom: 46px; } #mainContainerLeft { width: 315px; float: left; } #mainContainerRight { width: 619px; float: right; } #content { width: 430px; float: right; padding-right: 10px; padding-left: 9px; } h1 { padding-bottom: 10px; text-transform: uppercase; font-size: 16px; } h2 { font-weight: bold; } .news-single-item h2 { margin-bottom: 14px; } #content ul { margin-bottom: 16px; } #content ul li { background: url("../_img/bg-link.png") no-repeat left 4px; padding-left: 20px; } #content .csc-textpic-imagerow ul li { background: none; padding-left: 0; } .csc-textpic-imagerow .csc-textpic-image { margin-right: 12px !important; } #start #content { width: 482px; } #start #content p.starttext { margin-bottom: 0; } #start #content .csc-default { padding-left: 43px; padding-bottom: 49px; /*background: url("../_img/bg-news-latest.png") no-repeat left bottom transparent;*/ } #start #content #c14 { background: none; /*background: url("../_img/bg-news-latest.png") no-repeat; padding-top: 4px;*/ } #start .news-latest-container { position: relative;/*padding-top: 30px;*/ } #start .news-latest-container #latestNewsGraphic { position: absolute; top: -50px; left: -40px; z-index: -1; } #content p { margin-bottom: 16px; } #content p.starttext { font-size: 15px; line-height: 24px; } #content p.quote { background: url("../_img/quote.png") no-repeat; padding-top: 64px; } .tx-imagecycle-pi1 { display: block; position: relative; z-index: 0; } .tx-imagecycle-pi1-pager { position: absolute; top: 364px; right: 0; } .tx-imagecycle-pi1-pager a { display: block; background: transparent url("../_img/bg-imagerotator-pager.png") right 5px no-repeat; border: 0; margin: 0; padding: 1px 6px 1px 5px; color: #7e8788; font-weight: bold; float: left; } .tx-imagecycle-pi1-pager a.activeSlide, .tx-imagecycle-pi1-pager a:hover { background: transparent url("../_img/bg-imagerotator-pager.png") right 5px no-repeat; color: #000; } .tx-imagecycle-pi1-pager a:last-child { background: none; padding-right: 0; } #controls { position: absolute; top: 335px; width: 100%; z-index: 50; } #controls a { background: url("../_img/arrows.png") no-repeat; display: block; width: 10px; height: 19px; position: absolute; top: 0; } a#imagecycle_c22_prev { background-position: 0 0; left: 0; } a#imagecycle_c22_prev:hover { background-position: 0 -19px; } a#imagecycle_c22_next { background-position: 0 -38px; right: 0; } a#imagecycle_c22_next:hover { background-position: 0 -57px; } #tooltip { position: absolute; z-index: 70; background-color: #fbfbfb; color: #5b5b5d; padding: 5px 7px; width: 170px; opacity: 0.85; } #tooltip h3, #tooltip div { margin: 0; } /* ------------------------------------------------------------- 6. NEWS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .news-list-item h2 a, .news-latest-container h2 a { font-weight: bold; } .news-list-item { background: url("../_img/divider.gif") repeat-x bottom; padding-bottom: 6px; margin-bottom: 10px; } .news-list-item img { float: left; padding: 4px 10px 10px 0; } #content .news-list-item p { margin-bottom: 0; } #content .ttnewsBrowsebox ul li { float: left; background: none; padding-left: 0; } .ttnewsBrowsebox li.active, .ttnewsBrowsebox li.disabled { padding: 0 4px; } .ttnewsBrowsebox li a { display: block; padding: 0 4px; } .news-single-img { float: left; padding: 4px 18px 10px 0; } .news-single-img a { display: block; margin-top: 12px; } .news-single-img a:first-child { margin-top: 0; } .news-single-item h1 { color: #77bad2; font-weight: bold; } #content p.news-single-imgcaption { font-size: 10px; line-height: 12px; margin-bottom: 0; } .news-single-backlink { background: url("../_img/divider.gif") repeat-x top; padding-top: 16px; } /* ------------------------------------------------------------- 8. CONTACT FORM - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #kontakt { width: 439px; padding-top: 7px; padding-bottom: 25px; } #kontakt legend { display: none; } #kontakt label { float: left; width: 120px; display: block; } #kontakt .tx_powermail_pi1_fieldwrap_html { margin-bottom: 6px; } #kontakt input, #kontakt textarea { border: 1px solid #67726a; padding: 2px; width: 309px; } #kontakt textarea { height: 80px; } #kontakt .powermail_submit_uid5 { width: 109px; height: 25px; margin-left: 326px;} #kontakt .powermail_mandatory_js { margin-left: 120px; color: red; } .csc-textpic-intext-left ol, .csc-textpic-intext-left ul { padding-left: 0; overflow: none; height: auto; } /* Suche */ .tx-indexedsearch-searchbox { width: 300px !important; } .tx-indexedsearch-searchbox-sword { float: left; width: 200px !important; padding: 1px; } .tx-indexedsearch-searchbox-button { float: right; width: 70px !important; } .tx-indexedsearch-searchbox form .tx-indexedsearch-descr strong.tx-indexedsearch-redMarkup { color: #67726a !important; } /* 2 Spalter */ .fce2column { width: 439px; } .fce2column .firstCol { float: left; width: 219px; } .fce2column .secondCol { float: right; width: 220px; } /* Tabelle */ table.contenttable { margin-bottom: 22px; } table.contenttable caption { padding-bottom: 15px; text-transform: uppercase; font-size: 16px; } table.contenttable tr th, table.contenttable tr td { vertical-align: top; } table.contenttable tr th.td-0, table.contenttable tr td.td-0 { width: 109px; font-weight: bold; } table.contenttable tr th.td-last, table.contenttable tr td.td-last { width: 316px; padding-left: 5px; } #tooltip { width: 200px; }