/* ------------------------------------------------------------ gruber-folien.de, Stylesheet - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - .autor JANDA+ROSCHER (www.janda-roscher.de) .version 1.3 .url gruber-folien.de .timestamp 21/04/2010 ------------------------------------------------------------- */ /* ------------------------------------------------------------- gruber-folien.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 4.4 navLang 4.5 print 4.6 navStart 5. ELEMENTE 6. TT_NEWS ------------------------------------------------------------- */ /* ------------------------------------------------------------- 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 */ 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 { height: auto; } html { overflow-y: scroll; } body { font-family: arial, verdana, sans-serif; line-height: 18px; color: #000000; font-size: 12px; } #wrap { width: 998px; margin: 0 auto; background: url(../_img/wrap_bg.gif) no-repeat bottom; } a { color: #999999; text-decoration: none; } a:hover, a.active { color: #ee8128; } /* ------------------------------------------------------------- 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 */ /* ------------------------------------------------------------- 3. Struktur - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #header { width: 998px; height: 187px; position: relative; background: url(../_img/header_bg.gif) repeat-y; margin: 0 auto; } #logo { width: 209px; height: 71px; position: absolute; top: 67px; left: 65px; background: url(../_img/logo-gruber-folien.png) no-repeat; } #logo img { display: none; } #contentWrapper { width: 946px; background: url(../_img/contentWrapper_bg.gif) repeat-y; margin: 0 auto; padding-bottom: 26px; height: 100%; margin-bottom: 26px; } #mainContainer { background: #fff; width: 898px; margin: 0 auto; padding-top: 11px; } #home #mainContainer { padding-left: 15px; width: 883px; } #navContainer { width: 203px; float: left; margin-left: 15px; margin-top: 22px; } #mainContentWrapper { width: 680px; float: right; padding-bottom: 14px; } #mainContent { width: 426px; float: left; /*padding: 30px 18px 0 18px;*/ padding: 22px 18px 0 18px; } #shutter { width: 998px; position: relative; margin-top: -26px; height: 26px; clear: both; margin-right: auto; margin-left: auto; background: url(../_img/footerWrapper_bg.gif) no-repeat; } /* ------------------------------------------------------------- 4. Navigationen - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* navSub */ /* navMain */ #navMain { width: 868px; height: 15px; overflow: hidden; position: absolute; bottom: 0px; left: 65px; border-bottom: solid 1px #b2b2b2; padding-bottom: 6px; } #navMain li { float: left; padding-right: 71px; } #navMain li.first { } #navMain li.last { padding-right: 0; } #navMain li a { float: left; font-size: 18px; height: 21px; text-transform: uppercase; } #navMain li a:hover, a.active { color: #eb6e07; } /* navSub */ #navSub { font-size: 14px; color: #b1b3b4; margin-bottom: 159px;} #navSub li.first { border-top: 1px solid #b2b2b2; } #navSub li a { width: 203px; border-bottom: 1px solid #b2b2b2; display: block; padding: 8px 0; } #navSub li a:hover { } #navSub li a.active { border-bottom: 1px solid #eb6e07; } #navSub li ul { font-size: 13px; } #navSub li ul li { background: url(../_img/navSub_li_bg.gif) repeat-x bottom; } #navSub li ul li a { width: 188px; background: url(../_img/arrow_horizontal.gif) no-repeat 0 8px; border: none; display: block; padding-left: 15px; } #navSub li ul li a:hover, #navSub li ul li a.active { background-position: -293px 8px; color: #eb6e07; border: none; } #navSub li ul li ul { padding-bottom: 6px; } #navSub li ul li ul li { background: none; } #navSub li ul li ul li a { background: none; padding: 4px 0 4px 15px; } /* navInfo */ #navInfo { width: 505px; position: absolute; left: 15px; bottom: 19px; padding-top: 7px; } #navInfo li { float: left; padding-right: 100px; } #navInfo li.last { padding-right: 0; } #navInfo li a { float: left; height: 18px; color: #999999; font-size: 11px; } #navInfo li a:hover, a.active { color: #eb6e07; } /* navLang */ #navLang { width: 142px; position: absolute; left: 520px; bottom: 19px; padding-top: 7px; } #navLang li { } #navLang li a { float: right; height: 18px; } /* Print */ #print { width: 203px; position: absolute; right: 15px; bottom: 19px; padding-top: 7px; } #print li { } #print li a { float: right; height: 18px; } /* navStart */ ul#navStart { position: relative; width: 881px; height: 312px; height: 315px; overflow: hidden; margin-bottom: 20px;} #navStart li { float: left; width: 203px; height: 309px; border-bottom: 5px solid #000000; } #navStart li.navStartCol1 { background: url(../_img/navStartCol1.png) no-repeat; margin-right: 19px; } #navStart li.navStartCol2 { background: url(../_img/navStartCol2.png) no-repeat; margin-right: 19px; } #navStart li.navStartCol3 { background: url(../_img/navStartCol3.png) no-repeat; margin-right: 18px; } #navStart li.navStartCol4 { background: url(../_img/navStartCol4.png) no-repeat; margin-right: 0px; } #navStart li.navStartCol1En { background: url(../_img/navStartCol1En.png) no-repeat; margin-right: 19px; } #navStart li.navStartCol2En { background: url(../_img/navStartCol2En.png) no-repeat; margin-right: 19px; } #navStart li.navStartCol3En { background: url(../_img/navStartCol3En.png) no-repeat; margin-right: 18px; } #navStart li a { display: block; height: 84px; border-bottom: 9px solid #000000; text-indent: 999em; white-space: nowrap; outline: none; } #navStart li li { float: none; height: auto; border: none; background: url(../_img/li_bg.gif) no-repeat 0 8px; padding-left: 8px; } #navStart li li a { height: auto; } #navStart p { margin: 9px 0px 0px 0px; } #navStart li.hasSubNav { position: relative; z-index: 4; } #navStart li.hasSubNav ul { display: none; z-index: 40; } #navStart li.hasSubNav:hover ul { display: block; position: absolute; width: 203px; /*height: 185px;*/ height: 199px; overflow: hidden; top: 106px; margin: 0; background: url(../_img/navStart_hasSubNav.png) no-repeat 1px 0px; } #navStart li.hasSubNav li { float: none; width: 171px; margin-bottom: 4px; background: none; padding-left: 0px; } #navStart li.hasSubNav li.first { margin-top: 15px; } #navStart li.hasSubNav li a { display: block; width: 171px; height: auto; margin: 0px 0px 0px 32px; font-size: 14px; line-height: 16px; color: #000000; border: none; text-indent: 0; white-space: normal; outline: none; } #navStart li.hasSubNav li a:hover { color: #eb6e07; } /* navStart englisch */ .navStartEn li.navStartCol1 { background: url(../_img/navStartCol1.png) no-repeat !important; margin-right: 19px; } .navStartEn li.navStartCol2 { background: url(../_img/navStartCol2.png) no-repeat !important; margin-right: 19px; } .navStartEn li.navStartCol3 { background: url(../_img/navStartCol3.png) no-repeat !important; margin-right: 18px; } .navStartEn li.navStartCol4 { background: url(../_img/navStartCol4.png) no-repeat !important; margin-right: 0px; } /* ------------------------------------------------------------- 5. Elemente - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #mainContent img { margin-bottom: 13px; } /* Absatz */ p { margin-bottom: 10px; } /* Überschriften */ #mainContent h1 { font-size: 24px; padding: 0 0 9px 0; } #products h1 { padding-top: 27px; } #mainContent h2 { font-size: 18px; margin-bottom: 10px; } #mainContent h3 { } #sidebar h3 { font-size: 12px; color: #666666; margin-bottom: 5px; } /* Links */ #mainContent a, a.mail { } a.mail:hover, a.mail:active, #mainContent a:hover, #mainContent a:active { } /* Listen */ #mainContent ul { margin-bottom: 15px; } #mainContent ul li { background: url(../_img/li_bg.gif) no-repeat 0 8px; padding-left: 8px; } #mainContent ul li ul { } #mainContent ul li ul li { background: url(../_img/li_bg_line.gif) no-repeat 0 9px; padding-left: 8px; } #mainContent ul li ul li ul { } #mainContent ul li ul li ul li { } #mainContent ol { padding-left: 18px; margin-bottom: 15px; list-style-type: decimal; } #mainContent ol li { list-style-type: decimal; } .orangeListBox ul { margin-bottom: 6px; } #home .orangeListBox ul li { margin: 0 20px 20px 0; } .orangeListBox ul li { margin: 0 20px 15px 0; } .orangeListBox ul li a { background: url(../_img/orangeListBox_a_bg.gif) no-repeat; text-transform: uppercase; font-size: 14px; font-weight: bold; color: #fff; padding: 4px 8px 4px 34px; } .orangeListBox ul li a:hover, .orangeListBox ul li a.active { color: #ffffff !important; } /* Tabelle */ table.contenttable { /* width: 426px; */ margin-bottom: 25px; } table.contenttable tr td, table.contenttable tr th { width: 84px; text-align: center; } table.contenttable tr td { border: solid 1px #daddde; color: #7a8080; padding: 5px 10px 5px 10px; vertical-align: top; /*text-transform: uppercase;*/ } table.contenttable tr.tr-0 th { border: 0; color: #000000; padding: 5px 0px 8px 0px !important; } table.contenttable tr.tr-0 th.td-last { background: none !important; } table.contenttable tr.tr-even td.td-last, table.contenttable tr.tr-odd td.td-last { background: #fef2e7; width: 87px; } /* img */ .csc-textpic-lastcol img { margin-right: 0; } /* Sidebar */ #sidebar { width: 203px; float: right; margin-right: 15px; margin-top: 22px; font-size: 12px; } #sidebar p { color: #666666; } #sidebar a:hover, #sidebar a.activ { color: #ee8128; } /* Sidebar Rahmen grau */ .sidebarBoxFrameTop { padding: 11px 10px 0 10px; } .sidebarBoxFrameTop p { margin-bottom: 0; } .sidebarBoxFrameBottom { margin-bottom: 19px; padding-bottom: 13px; } .sidebarBoxFrameTop h3 { font-size: 12px; color: #666666; padding-bottom: 3px; margin-bottom: 10px !important; background: url(../_img/sidebarBoxHeadline_bg.gif) repeat-x bottom left; } .sidebarBoxFrameTop ul { } .sidebarBoxFrameTop ul li { } .sidebarBoxFrameTop ul li a { background: url(../_img/mail_arrow.gif) no-repeat 0 4px; color: #ee8128; padding-left: 12px; } /* Sidebar Rahmen oranger Balken oben */ .sidebarBoxFrameTopOrange { background: url(../_img/sidebarBox_bg_top_orange.gif) no-repeat top left; padding: 6px 5px 0 10px; } .sidebarBoxFrameTopOrange p { margin-bottom: 0; } .sidebarBoxFrameBottomOrange { background: url(../_img/sidebarBox_bg_bottom.gif) no-repeat bottom; margin-bottom: 19px; padding-bottom: 13px; } .sidebarBoxFrameTopOrange h3 { font-size: 18px !important; color: #ffffff !important; padding-bottom: 3px; margin-bottom: 16px !important; } /* Bild mit Rahmen */ /*.imageWithBorder img { border-top: 5px solid #000; border-bottom: 10px solid #000; }*/ .imageWithBorder img { border-top: solid 5px #000000 !important; border-bottom: solid 10px #000000 !important;} .bagForm { background: url(../_img/seitenfaltenbeutel_bg.jpg) no-repeat top left; border-bottom: solid 5px #000; min-height: 157px; margin-bottom: 13px; padding-right: 120px; } .musterService { background: url(../_img/musterservice_bg.gif) no-repeat top left; min-height: 65px; width: 252px; padding: 95px 129px 0px 42px; color: #666666; } .musterService a { color: #666666; } .musterService a:hover { color: #ee8128; } .textWithBorder { border-bottom: solid 10px #000; margin-bottom: 26px; } .rolledGoods { background: url(../_img/rolledGoods_bg.gif) no-repeat top left; border-bottom: solid 5px #000; min-height: 157px; margin-bottom: 13px; padding-right: 120px; } .standUpBag { background: url(../_img/standUpBag_bg.gif) no-repeat top left; border-bottom: solid 5px #000; min-height: 157px; margin-bottom: 13px; padding-right: 120px; } .vacuumBag { background: url(../_img/vacuumBag_bg.gif) no-repeat top left; border-bottom: solid 5px #000; min-height: 157px; margin-bottom: 13px; padding-right: 120px; } .flatBag { background: url(../_img/beutelform_bg.gif) no-repeat top left; border-bottom: solid 5px #000; min-height: 157px; margin-bottom: 13px; padding-right: 120px; } /* Extra Klassen */ .more_orange { background: url(../_img/more_sidebar.gif) no-repeat right; padding-right: 15px; margin-right: 3px; } .more_grey { background: url(../_img/arrow.gif) no-repeat 0 4px; padding-left: 12px; display: inline-block; } .more_grey:hover, .more_grey.active { background-position: 0 -63px; } .divider { background: url(../_img/sidebarBox_bg.gif) repeat-x; height: 1px; /*margin-bottom: 21px;*/ margin-bottom: 18px; } .mail { background: url(../_img/mail_arrow.gif) no-repeat 0 4px; padding-left: 8px; color: #eb6e0d; } /* Footer */ #footer { width: 898px; height: 62px; background: url(../_img/navFooter_bg.gif) no-repeat; margin: 0 auto; position: relative; font-size: 12px; } #footer ul { border-top: solid 1px #b0b0b0; } /* 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: #eb6e07 !important; } #mainContent ul.browsebox li { background: none; padding: 0 2px 0 0; } /* 4 Spalter Startseite */ .fce4column .firstCol, .fce4column .secondCol, .fce4column .thirdCol, .fce4column .fourthCol { width: 203px; float: left; margin-right: 19px; } .fce4column .thirdCol { margin-right: 18px; } .fce4column .fourthCol { margin-right: 0; } /* 2 Spalter */ .fce2column { width: 426px; } .fce2column .firstCol { float: left; width: 208px; } .fce2column .secondCol { float: right; width: 208px; margin-left: 10px; } /* Unterseite Products */ #products #mainContent { padding-top: 5px; } /* ------------------------------------------------------------- 6. TT_NEWS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .news-single-item { clear: both; } .news-single-item .news-single-img, .news-list-item a img { float: left; padding-right: 15px; padding-bottom: 16px; } .news-single-item .news-single-img p { } .news-single-item .news-single-img .news-single-imgcaption { font-size: 11px; } .news-single-imgcaption { margin-bottom: 0; } .news-single-img a img { margin-bottom: 5px !important;} .news-list-item p { margin-bottom: 20px; } .news-list-item .divider { clear: both; } .news-single-item .divider { clear: both; } .news-list-item h3 a, .news-single-item h3 { font-size: 18px; color: #000; } .news-single-item h3, .news-list-item h3 { margin-bottom: 10px; font-size: 18px; } .news-list-item h3 a:hover, .news-list-item h3 a:active { text-decoration: underline; } .news-list-morelink { background: url(../_img/arrow.gif) no-repeat 5px 4px; padding-left: 17px; } .news-list-morelink:hover, .news-list-morelink.activ { background-position: 5px -63px; } .news-single-backlink { background: url(../_img/arrow.gif) no-repeat 5px 4px; padding-left: 17px; } .news-single-backlink:hover, .news-single-backlink.activ { background-position: 5px -63px; } .csc-textpic-image { margin-left: 0 !important; } .news-latest-container { background: url("../_img/news_bg.png") no-repeat scroll 0 0 transparent; height: 137px; } .news-latest-item, .news-latest-item h3 a { color: #666666; } .news-latest-item h3 { margin-bottom: 2px !important; } .news-latest-morelink a { background: url(../_img/more_sidebar.gif) no-repeat 5px 4px; padding-left: 17px; } /* BROWSEBOX */ ul.ttnewsBrowsebox { } ul.ttnewsBrowsebox li { display: inline; background: none !important; } ul.ttnewsBrowsebox span { padding-left: 21px; } .prev { background: url(../_img/news_prev.gif) no-repeat 0px 2px; } .next { background: url(../_img/news_next.gif) no-repeat 6px 2px; } /* wt_gallery */ div.wtgallery_list_area div.wtgallery_list, div.wtgallery_category_area div.wtgallery_categories { float: left; } div.wtgallery_list_area div.wtgallery_list_firstofrow, div.wtgallery_category_area div.wtgallery_category_firstofrow { clear: left; } /* Bilderabstand */ .wtgallery_list { margin-right: 5px; } /* Pfeile */ #lbPrevLink:hover { background: transparent url(../_img/prev.gif) no-repeat 0 15% !important; } #lbNextLink:hover { background: transparent url(../_img/next.gif) no-repeat 100% 15% !important; } #lbCloseLink { width: 26px; height: 22px; background: transparent url(../_img/close.gif) no-repeat right !important; }