/* -------------------------------------------------------------
herlac - Stylesheet
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.autor herlac.de
.version 1.0
.url herlac.de
.timestamp 25/11/2010
------------------------------------------------------------- */
/* -------------------------------------------------------------
herlac.de, Table of Contents
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1. RESET, FONTS, BODY, HTML
2. HELPER
2.1 Clearfix
2.2 Divider
3. STRUCTURE
4. CONTENT STYLES
5. NAVIGATIONS
5.1 Section navigation
5.2 Info navigation
5.3 Main navigation
5.4 Sub navigation
5.5 Locations
6. ELEMENTS
6.1 Header
6.2 Section image
6.3 Carousel
6.4 Teaser boxes startpage
6.5 Sidebar boxes
6.6 Footer
6.7 Article lists
7. EXTRA CLASSES
------------------------------------------------------------- */
/* -------------------------------------------------------------
1. Reset, fonts, 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;}
/* ------ Custom Styles ------ */
html { background: #a8a8a8 url(bg-page.png) repeat-x; overflow-y: scroll; }
body { color: #595959; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 18px; }
html, body { height: 100%; }
a { text-decoration: none; }
/* -------------------------------------------------------------
2. Helper
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 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 */
/* 2.2 Divider */
div.divider { background: url(divider.png) repeat-x; border: 0; clear: both; display: block; height: 1px; margin: 9px 0 14px 0; line-height: 0; font-size: 0; }
/* -------------------------------------------------------------
3. Structure
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#wrap { margin: 0 auto; width: 986px; }
#contentWrapper { background: url(bg-content.png) repeat-y; padding: 0 6px 12px 6px; width: 974px; }
#start #contentWrapper { background: url(bg-content-start.png) repeat-y; padding-bottom: 0; }
#header { background: url(bg-header.png) bottom no-repeat; height: 147px; position: relative; }
#logobar { background: url(herlac-logo.jpg) bottom no-repeat; left: 380px; top: 22px; width: 298px; height: 81px; position: absolute; }
#navbar { float: left; width: 190px; padding: 57px 0 24px 10px; background: url(bg-navbar.png) no-repeat; }
#navbar a { color: #25a58a; }
#navbar a:hover { color: #1d8e77; }
#mainContentWrapper { float: right; width: 767px; }
#start #mainContentWrapper { float: none; width: auto; }
#content { float: left; width: 530px; padding: 12px 15px 0 15px; }
#sidebar { float: right; width: 190px; padding: 11px 0 33px 0; background: url(bg-sidebar.png) no-repeat; }
#start #content { width: 550px; float: left; padding: 0 0 0 27px; }
#start #sidebar { width: 362px; float: right; padding: 0 21px 0 0; background: none; }
#footer { background: url(bg-footer-inside-text-gb.png) bottom no-repeat; height: 75px; position: relative; }
/* -------------------------------------------------------------
4. Content styles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#contentWrapper h1 { border-bottom: 1px solid #d8d8d8; color: #333333; font-size: 20px; line-height: 24px; margin-bottom: 20px; padding: 6px 0 13px 0; }
#start #contentWrapper h1 { border: 0; font-size: 16px; line-height: 19px; margin-bottom: 20px; padding: 0; }
#contentWrapper h2 { color: #ff0000; /* font-size: 18px; line-height: 24px; */ font-size: 15px; line-height: 19px; margin-bottom: 18px; }
#contentWrapper h3,
#contentWrapper h3 a,
#contentWrapper h3 a:hover { color: #ff0000; font-size: 14px; line-height: 18px; margin-bottom: 12px; font-weight: bold; }
#contentWrapper p { margin-bottom: 16px; }
#contentWrapper .alignCenter { text-align: center; }
#mainContentWrapper a { color: #25a58a; }
#mainContentWrapper a:hover { color: #1d8e77; }
#mainContentWrapper a.more { background: url(arrows-link.png) right 5px no-repeat; color: #e20025; font-weight: bold; padding-right: 10px; }
#mainContentWrapper a.more:hover { background-position: right -27px; color: #a30000; }
#mainContentWrapper a.back { background: url(arrows-link.png) 0 -11px no-repeat; color: #e20025; font-weight: bold; padding-left: 10px; }
#mainContentWrapper a.back:hover { background-position: 0 -43px; color: #a30000; }
#mainContentWrapper a.plus { background: url(plus.png) right no-repeat; color: #e20025; font-weight: bold; padding-right: 10px; }
#mainContentWrapper a.plus:hover { background: url(plus-hover.png) right no-repeat; color: #a30000; }
#mainContentWrapper ul { margin-bottom: 16px; }
#mainContentWrapper ul li { background: url(li-point.png) 1px 7px no-repeat; padding-left: 12px; }
#mainContentWrapper ul ul { margin-bottom: 0; }
#mainContentWrapper ul li li { background: url(li-point.png) 1px 7px no-repeat; }
/* -------------------------------------------------------------
5. Navigations
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 5.1 Section navigation */
#navSection li,
#navSection li a { float: left; }
#navSection a { overflow: hidden; text-indent: 999em; white-space: nowrap; }
#navSection .classic a { background: url(classic.png) no-repeat; display: block; width: 67px; height: 45px; padding-right: 2px; margin-left: 6px; margin-top: 10px; }
#navSection .classic a:hover { background-position: 0 -45px; }
#navSection .classic a.active { background: url(classic-active.png) no-repeat; display: block; width: 82px; height: 52px; padding-right: 0; margin-left: 0; margin-top: 3px; }
#navSection .classic a.active:hover { background-position: 0; }
#navSection .collection a { background: url(collection.png) no-repeat; display: block; width: 67px; height: 45px; padding-right: 2px; margin-top: 10px; }
#navSection .collection a:hover { background-position: 0 -45px; }
#navSection .collection a.active { background: url(collection-active.png) no-repeat; display: block; width: 76px; height: 52px; padding-right: 0; margin-left: 0; margin-top: 3px; }
#navSection .collection a.active:hover { background-position: 0; }
#navSection .commercial a { background: url(commercial.png) no-repeat; display: block; width: 67px; height: 45px; padding-right: 2px; margin-top: 10px; }
#navSection .commercial a:hover { background-position: 0 -45px; }
#navSection .commercial a.active { background: url(commercial-active.png) no-repeat; display: block; width: 76px; height: 52px; padding-right: 0; margin-left: 0; margin-top: 3px; }
#navSection .commercial a.active:hover { background-position: 0; }
/* 5.2 Info navigation */
#navInfo { color: #c4c4c4; float: right; font-size: 10px; padding: 0 185px 0 0; }
#navInfo li { list-style-type: none; float: left; }
#navInfo a { color: #c4c4c4; display: block; float: left; padding: 1px 6px 0 6px; }
#navInfo a:hover, #navInfo a.active { color: #fff; }
/* 5.3 Main navigation */
#navMain { position: absolute; left: 6px; top: 104px; }
#navMain li { float: left; }
#navMain a { background: url(bg-navmain.png) right 0 no-repeat; color: #646464; font-weight: bold; display: block; float: left; height: 30px; padding: 12px 16px 0 16px; text-transform: uppercase; }
#navMain a.active,
#navMain a:hover, #navMain .NavLevelA_1_0_sel { background-position: right -43px; color: #ff0000; }
/* 5.4 Sub navigation */
#navSub { margin-left: 10px; border-top: 1px solid #d8d8d8; }
#navSub li a { background: url(level1.png); color: #4a4a4a; display: block; width: 153px; line-height: 16px; padding: 6px 0 7px 26px; border-left: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; }
#navSub li.hasSubNav { position: relative; }
#navSub li.hasSubNav a,
#navSub li.hasSubNavActive a { background: url(level1-with-subnav.png); }
#navSub li a:hover,
#navSub li a.active, #navSub li .NavLevelA_2_0_sel { background: url(level1-hover.png); color: #fff; font-weight: bold; }
#navSub li.hasSubNav a:hover,
#navSub li.hasSubNavActive a:hover { background: url(level1-hover-with-subnav.png); }
#navSub li.hasSubNavActive a.active,
#navSub li.hasSubNavActive a.active:hover { background: url(level1-active-with-subnav.png); }
#navSub li.hasSubNavActive li a, #navSub .NavLevelA_3_0, #navSub .NavLevelA_4_0 { background: url(level2.png); border: 0; border-bottom: 1px solid #d8d8d8; color: #555555; font-size: 11px; padding: 4px 0 5px 27px; }
#navSub li.hasSubNavActive li a:hover, #navSub .NavLevelA_3_0:hover, #navSub .NavLevelA_4_0:hover { background: url(level2-hover.png); color: #ff0000; font-weight: normal; }
#navSub li.hasSubNavActive li a.active,
#navSub li.hasSubNavActive li a.active:hover, #navSub .NavLevelA_3_0_sel, #navSub .NavLevelA_3_0_sel:hover, #navSub .NavLevelA_4_0_sel, #navSub .NavLevelA_4_0_sel:hover { background: url(level2-hover.png); color: #ff0000; font-weight: bold; font-size: 11px; }
#navSub li.hasSubNavActive li li a, #navSub .NavLevelA_4_0, #navSub .NavLevelA_4_0:hover, #navSub .NavLevelA_4_0_sel, #navSub .NavLevelA_4_0_sel:hover { padding-left: 44px; width: 136px; }
#navSub li.hasSubNav li li a:hover,
#navSub li.hasSubNav li li a.active,
#navSub li.hasSubNav li li a.active:hover, #navSub .NavLevelA_4_0:hover, #navSub .NavLevelA_4_0_sel, #navSub .NavLevelA_4_0_sel:hover { background: url(level2.png) !important; font-weight: normal; font-size: 11px !important; }
#navSub li.over ul,
#navSub li.hasSubNav ul { display: none; z-index: 4; width: 170px; }
#navSub li.over ul,
#navSub li.hasSubNav:hover ul { /*background: #3a6ea2; */ background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGOwylt0HQAEUgIiCdOYWgAAAABJRU5ErkJggg==') repeat; *filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#d83a6ea2, endColorstr=#d83a6ea2); display: block; position: absolute; left: 180px; top: 0; border-left: 1px solid #fff; padding: 4px 0; }
#navSub li.hasSubNav li a { background: none; border: 0; color: #d6ebff; width: 150px; padding: 4px 14px 4px 14px; }
#navSub li.hasSubNav li a:hover { background: none; border: 0; color: #fff; font-weight: normal; }
/* 5.5 Locations */
#navLocations { color: #b5b5b5; margin: 12px 0 14px 0; }
#navLocations li { padding-right: 4px; display: inline; }
#footer #navLocations a { color: #b5b5b5; padding: 1px 4px 0 0; }
#footer #navLocations a:hover { color: #818181; }
/* -------------------------------------------------------------
6. Elements
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 6.1 Header */
#logo { position: absolute; top: 26px; right: 24px; background: url(logo-commercial-web.png) no-repeat; width: 152px; height: 120px; }
#logo img { display: none; }
#balloon { background: url(balloon.png) no-repeat; height: 60px; width: 60px; position: absolute; left: 6px; top: 55px; }
/* 6.2 Section image */
#sectionImage { margin-left: -15px; margin-bottom: 16px; }
#start #sectionImage { margin-left: 0; height: 237px; overflow: hidden; }
/* 6.3 Carousel */
#objects { padding: 12px 0; /* height: 264px; */ }
#start #objects { background: url(bg-objects.png) repeat-x; padding: 12px 20px; /* height: 264px; */ }
#objects h4 { text-transform: uppercase; font-size: 11px; color: #535353; line-height: 22px; border-bottom: 1px solid #b5bcc1; position: relative; width: auto; }
#start #objects h4 { width: 934px; }
#contentWrapper #objects p { margin-bottom: 0; }
#objectsCarousel { border-bottom: 1px solid #ced4d8; }
#mainContentWrapper #objectsCarousel ul { margin-bottom: 0; }
#mainContentWrapper #objectsCarousel ul li { background: none; padding-left: 0; }
/* 6.4 Teaser boxes startpage */
#teaserBoxWrapper { background: url(bg-shadow.png) bottom no-repeat; padding-bottom: 6px; font-size: 11px; line-height: 13px; }
#teaserBoxWrapper img { position: absolute; top: 1px; right: 1px; }
#teaserBoxWrapper strong { font-size: 17px; line-height: 32px; font-weight: bold; text-indent: -1px; }
#teaserBoxWrapper em { color: #333333; font-style: normal; }
#mainContentWrapper a.teaserBoxSpecial { background: url(bg-gradient-blue.png) repeat-x; color: #fff; font-weight: normal; display: block; height: 86px; width: 187px; padding: 2px 162px 0 13px; position: relative; margin-bottom: 7px; }
#mainContentWrapper a.teaserBoxSpecial:hover { background-position: 0 -95px; color: #fff; }
#mainContentWrapper a.teaserBoxNormal { background: url(bg-gradient-grey.png) repeat-x; color: #fff; font-weight: normal; display: block; height: 86px; width: 187px; padding: 2px 162px 0 13px; position: relative; margin-bottom: 7px; }
#mainContentWrapper a.teaserBoxNormal:hover { background-position: 0 -95px; color: #fff; }
/* 6.5 Sidebar boxes */
#sidebarBoxWrapper { background: url(bg-sidebar-bottom.png) bottom no-repeat; padding-bottom: 12px; font-size: 11px; }
.sidebarBoxContent { padding: 10px; }
#contentWrapper #sidebarBoxWrapper h3 { background: url(bg-head.png); height: 23px; color: #fff; font-size: 11px; line-height: 18px; font-weight: normal; text-transform: uppercase; padding: 6px 0 0 13px; margin-bottom: 0; }
#sidebarBoxWrapper .sidebarBoxContent img { border: 1px solid #a9a9a9; margin-right: 8px; }
#contentWrapper #sidebarBoxWrapper p { margin-bottom: 6px; }
#sidebarBoxWrapper .highlight { font-size: 13px; }
#sidebarBoxWrapper .highlightColor { color: #ff0000; font-size: 13px; }
#sidebarBoxWrapper blockquote { line-height: 16px; font-style: italic; margin-bottom: 6px; }
#sidebarBoxWrapper a { font-size: 12px; }
#mainContentWrapper #sidebarBoxWrapper a.button { background: url(button-blue.png); display: block; color: #fff; font-size: 11px; font-weight: bold; text-align: center; width: 169px; height: 21px; padding-top: 2px; }
#mainContentWrapper #sidebarBoxWrapper a.button:hover { background-position: 0 -23px; }
#mainContentWrapper #sidebarBoxWrapper a.buttonMail { background: url(button-blue-mail.png); display: block; color: #fff; font-size: 11px; font-weight: bold; text-indent: 50px; width: 169px; height: 21px; padding-top: 2px; }
#mainContentWrapper #sidebarBoxWrapper a.buttonMail:hover { background-position: 0 -23px; }
/* 6.7 Article lists */
#mainContentWrapper ul.newsList li,
#mainContentWrapper ul.eventList li,
#mainContentWrapper ul.articleList li { background: none; border-bottom: 1px solid #d8d8d8; padding: 0 0 16px 0; margin-bottom: 16px; }
#mainContentWrapper ul.newsList img,
#mainContentWrapper ul.eventList img,
#mainContentWrapper ul.articleList img { float: left; border: 1px solid #a5a5a5; margin-right: 20px; }
#mainContentWrapper ul.newsList .category,
#mainContentWrapper ul.eventList .category,
#mainContentWrapper ul.articleList .category { font-weight: bold; }
#mainContentWrapper ul.newsList h2,
#mainContentWrapper ul.newsList h2 a,
#mainContentWrapper ul.eventList h2,
#mainContentWrapper ul.eventList h2 a,
#mainContentWrapper ul.articleList h2,
#mainContentWrapper ul.articleList h2 a { color: #ff0000; font-size: 18px; line-height: 24px; font-weight: normal; margin-bottom: 12px; }
#mainContentWrapper h1.newsDetail,
#mainContentWrapper h1.eventDetail { border: 0; font-size: 18px; line-height: 24px; padding: 0; }
/* 7 extra classes */
.RowControl_InDerPresse_Bild { width: 159px; height: 110px; }