/* * Main Styles */ /* * ********************************************************************************** * Reset * ********************************************************************************** */ @import url("reset.css"); /* * ********************************************************************************** * Global Styles * ********************************************************************************** */ .hide { display: none; } .invisible { visibility: hidden; } .left { float: left; } .right { float: right; } .error { color: #f00; } .cl { clear:both; font-size:0px; height:0px; } .clearfix:after { clear: both; content: "."; display: block; height: 0; font-size:0; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ /* * ********************************************************************************** * Typographic Styles * ********************************************************************************** */ body, ul, ol, dl, h1, h2, h3, h4, h5, h6, td, th, caption, pre, p, blockquote, input, textarea { font-family: 'Lucida Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 20px; font-weight: normal; color: #222; } ul, ol, dl, td, th, caption, pre, p, blockquote, input, textarea { /* opacity: 0.8; */ } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: bold; color:#4a3d36; } h1 { font-size: 320%; font-weight:normal; line-height: 48px; padding-top: 14px; padding-bottom: 14px; } h2 { font-size: 200%; font-weight:normal; line-height: 28px; padding-top: 9px; padding-bottom: 9px; } h3 { font-size: 160%; line-height: 24px; padding-top: 9px; padding-bottom: 9px; } h4 { font-size: 140%; line-height: 18px; padding-top: 9px; padding-bottom: 9px; } h5 { font-size: 120%; line-height: 18px; padding-top: 9px; padding-bottom: 9px; } h6 { font-size: 100%; line-height: 18px; padding-top: 9px; padding-bottom: 9px; } h1.page-title { padding-top: 0; padding-bottom: 5px; } h2.page-subtitle { padding-top: 0; padding-bottom: 9px; } a { color: #cc3300; text-decoration: underline; outline:none; } a:hover, a:focus { text-decoration:underline; outline:none; } em { font-style: italic; } p { margin: 0 0 9px 0; } .small, small { font-size: 80%; } strong { font-weight: bold; } ul, ol { margin-top: 18px; margin-bottom: 18px; padding-left: 16px; list-style-position: outside; list-style-type: disc; } ol { list-style-type: decimal; padding-left: 17px; } dl { margin-top: 18px; margin-bottom: 18px; } dl dt { font-weight: bold; } blockquote { border-left: 1px solid #666; margin-top: 18px; margin-bottom: 18px; padding-left: 17px; font-style: italic; } blockquote * { color: #666; } textarea { resize: none; } /* Prevents that little handle from showing up in Safari. */ sup { font-size: 70%; vertical-align: super; } hr { border-top:0; border-bottom:1px solid #ccc; border-left:0; border-right:0; padding:0; margin:10px 0 10px 0; height:1px; } /* * ********************************************************************************** * Form Styles * ********************************************************************************** */ fieldset {} legend {} label {} form {} input {} input.search {} input.text {} input.radio { border:0; } input.checkbox { border:0; } input.button {} textarea {} select {} /* * ********************************************************************************** * Layout Styles * ********************************************************************************** */ body { text-align:center; margin:0; padding:0; background-color:#807772; } .content { width:960px; margin:0 auto; text-align:left; } #page-wrapper {} #page { font-size:75%; } #page-header-wrapper { background:url(../img/bg_header.gif) left bottom repeat-x #4a3d36; } #page-header { position:relative; } #kontakt-wrapper { position:relative; top:0; left:0; margin-top:-200px; } #kontakt { height:200px; background:url(../img/bg_kontakt_bottom.gif) left bottom no-repeat #3a2f29; } #kontakt-inner { padding:0 20px; } #kontakt-inner * { color:#fff; } #logo-wrapper { float:left; } #logo { padding:20px 0 5px 10px; } #logo a, #logo a:hover, #logo a:focus { background:none; text-decoration:none; border:0; } #metamenu-wrapper { float:right; background:url(../img/icon/envelope.gif) right -50px no-repeat transparent; } #metamenu {} #metamenu ul { list-style:none; margin:0; padding:15px 100px 25px 0; } #metamenu ul li { display:inline; margin:0; padding:0 0 0 15px; } #metamenu ul li a { color:#f8f8f8; text-decoration:none; } #metamenu ul li a:hover, #metamenu ul li a:focus, #metamenu ul li.active a { color:#fff; text-decoration:underline; } /* #envelope { position:absolute; right:0; top:-50px; width:110px; height:110px; background:url(../img/icon/envelope.png) left top no-repeat transparent; } */ #mainmenu-wrapper {} #mainmenu {} #mainmenu ul { list-style:none; margin:0; padding:0; padding-left:168px; } /* zum zentrieren: [anzahl lis (4)] x [breite li (156px)] / 2 */ #mainmenu ul li { float:left; margin:0; padding:0; } #mainmenu ul li a { text-decoration:none; text-align:center; font-size:120%; color:#ddd; display:block; margin:0; padding:0; line-height:34px; height:34px; width:156px; background:url(../img/bg_mainmenu.gif) left top no-repeat transparent; } #mainmenu ul li a:hover, #mainmenu ul li a:focus { background-position:left -34px; } #mainmenu ul li.active a, #mainmenu ul li.active a:hover, #mainmenu ul li.active a:focus { background-position:left bottom; color:#fff; } #page-content-wrapper { position:relative; background:url(../img/bg_main.gif) left top repeat-x #807772; } #page-content { padding:15px 0 0 0; } #service-wrapper { background:url(../img/bg_content_top.gif) left bottom no-repeat transparent; height:29px; text-align:right; } #service { padding-right:17px; } #content-wrapper {} #content { background-color:#fff; min-height:560px; height:auto !important; height:560px; padding:0 20px 0 20px; } #content-bottom { background:url(../img/bg_content_bottom.gif) left top no-repeat transparent; height:10px; } #page-footer-wrapper { position:relative; padding-top:15px; } #page-footer {} #sitemap-wrapper {} #sitemap-top { background:url(../img/bg_footer_top.gif) left bottom no-repeat transparent; height:10px; } #sitemap { background-color:#4a3d36; padding:0 0 5px 10px; } #sitemap-bottom { background:url(../img/bg_footer_bottom.gif) left top no-repeat transparent; height:10px; } #copyright-wrapper {} #copyright { color:#ddd; text-align:center; padding:5px 0 35px 0; } /* * Submenu Styles */ .submenu { width:920px; height:36px; background:url(../img/bg_submenu.gif) left top no-repeat transparent; text-align:center; font-size:120%; margin-bottom:30px; } .submenu ul { list-style:none; padding:0; margin:0; height:36px; } .submenu ul li { float:left; padding:0; margin:0 10px; height:36px; } .submenu ul li a { line-height:36px; margin:0; padding:0; display:block; color:#fff; text-decoration:none; } .submenu ul li a:hover, .submenu ul li a:focus { text-decoration:underline; } .submenu ul li.active { height:36px; padding-left:10px; background:url(../img/bg_submenu_l.gif) left bottom no-repeat; } .submenu ul li.active a, .submenu ul li.active a:hover, .submenu ul li.active a:focus { cursor:default; padding-left:10px; padding-right:20px; color:#251f1b; background:url(../img/bg_submenu_r.gif) right bottom no-repeat; text-decoration:none; } /* * Service Styles */ #service ul { margin:0; padding:0; list-style:none; overflow:hidden; } #service ul li { float:right; margin:0; padding:0; } #service ul li a { display:block; text-indent:-10000px; color:#f7f6f6; text-decoration:none; line-height: 0px; font-size:0px; overflow:hidden; height:29px; background-position:left top; background-repeat:no-repeat; } #service ul li a:hover, #service ul li a:focus { background-position:left bottom; } #service ul li.print { padding-right:20px; } #service ul li.print a { background-image:url(../img/btn_print.gif); width:95px; } #service ul li.font-reset a { background-image:url(../img/btn_font_reset.gif); width:41px; } #service ul li.font-dec a { background-image:url(../img/btn_font_dec.gif); width:22px; } #service ul li.font-inc a { background-image:url(../img/btn_font_inc.gif); width:22px; } /* * Sitemap Styles */ #sitemap ul { list-style:none; width:235px; float:left; padding:0; margin:0; } #sitemap li { padding:0 10px 0 10px; margin:0; } #sitemap li a { display:block; padding:2px 0 3px 0; border-bottom:1px solid #928b86; font-weight:bold; color:#f8f8f8; text-decoration:none; } #sitemap ul li ul { float:none; width:215px; } #sitemap ul li ul li { padding:0; margin:0; } #sitemap ul li ul li a { border-bottom:1px solid #5c514a; font-weight:normal; color:#eee; } #sitemap li a:hover, #sitemap li a:focus { color:#fff; text-decoration:underline; } /* * Startseite Carousel Styles */ #startseite-carousel-container { padding-bottom:20px; } .startseite-carousel-prev, .startseite-carousel-next { width:30px; height:300px; background-position:left top; background-repeat:no-repeat; cursor:pointer; float:left; } .startseite-carousel-prev { background-image:url(../img/carousel/btn_carousel_left.gif); } .startseite-carousel-next { background-image:url(../img/carousel/btn_carousel_right.gif); } .startseite-carousel-prev.active, .startseite-carousel-next.active { background-position:right top; } .startseite-carousel-menu-wrapper { text-align:center; padding:0; margin:0; } .startseite-carousel-menu { margin:0 auto; overflow:hidden; padding:0; } .startseite-carousel-menu a { text-decoration:none; background-image:url(../img/carousel/bg_carousel_menu.gif);background-position:right top;background-repeat:no-repeat;line-height:32px;height:32px;width:32px;font-size:18px;font-weight:bold;color:#fff;text-decoration:none;display:block;float:left;padding:0;margin:10px 3px 0 3px;text-align:center; } .startseite-carousel-menu a:hover, .startseite-carousel-menu a:focus { background-position:left bottom; text-decoration:none; } .startseite-carousel-menu a.active { background-position:left top; text-decoration:none; } #startseite-carousel-wrapper { width:860px; height:300px; margin: 0; padding: 0; float:left; overflow: hidden; } #startseite-carousel { width:860px; height:300px; } #startseite-carousel li { text-indent:-10000px; } #startseite-carousel li .panel { width:860px; height:300px; margin: 0; padding: 0; background:url(../img/carousel/bg_carousel.jpg) left top no-repeat; } #startseite-carousel li .panel01 { background-image:url(../img/carousel/panel_01.jpg); } #startseite-carousel li .panel02 { background-image:url(../img/carousel/panel_02.jpg); } /* * Box Styles */ .box { padding:1px 0; margin-bottom:30px; position:relative; width:100%; min-height:70px; height:auto !important; height:70px; } .box h2 {margin:12px 20px 10px; font-weight:normal; font-size:3em; position:relative} .box h2 a {display:block; position:relative; z-index:2; text-decoration:none} .box h2 span {visibility:hidden; display:block; width:100%; height:1.2em; position:absolute; top:0; left:0; margin:0 0 0 -3px; padding-right:6px; z-index:1; background:#fff } .box h3 {font-size:1.7em; margin:0 20px 3px} .box h4 {font-size:2em; font-weight:normal; margin:14px 20px 10px} .box p {margin:7px 20px 20px; font-size:1em} .box p.more { margin:0; padding:0; position:relative; z-index:3; background:url(../img/box/bg_box_link.png) no-repeat right top; padding:5px 10px; display:block; text-align:right; } .box p.more a { background:url(../img/box/icon_box_link.png) no-repeat right 50%; padding:3px 30px 3px 0px; display:block; } .box ul {list-style-type:square; margin:0 20px 0 33px; padding:0} .box ul li {margin:5px 0; padding:0} .box ul a {font-weight:bold} .box-top, .box-bottom { width:100%; position:absolute; left:0; } .box-top div, .box-bottom div { width:100%; } .box-top { top:0; } .box-bottom { top:100%; } .box-top, .box-top div, .box-bottom, .box-bottom div { height:5px; line-height:0px; font-size:0px; } .box-bottom { margin-top:-5px; } .box.border { width:auto; } .box.border .box-top { margin-top:-3px; margin-left:-3px; } .box.border .box-top div { margin-left:6px; } .box.border .box-bottom { margin-top:-2px; margin-left:-3px; } .box.border .box-bottom div { margin-left:6px; } /* yellow box */ .box.yellow { background:#fff7ce; } .box.yellow h2, .box.yellow h2 a { color:#c29f09; text-decoration:none; } .box.yellow p { color:#616058; } .box.yellow p.more a { color:#4b3e37; } .box.yellow ul { color:#616058; } .box.yellow .box-top { background:transparent url(../img/box/yellow_tl.gif) no-repeat 0 0; } .box.yellow .box-top div { background:transparent url(../img/box/yellow_tr.gif) no-repeat 100% 0; } .box.yellow .box-bottom { background:transparent url(../img/box/yellow_bl.gif) no-repeat 0 0; } .box.yellow .box-bottom div { background:transparent url(../img/box/yellow_br.gif) no-repeat 100% 0; } /* grey box */ .box.grey { background:#e9e8e7; } .box.grey h2, .box.grey h2 a { color:#769fb2; text-decoration:none; } .box.grey p.more a { color:#4b3e37; } .box.grey .box-top { background:transparent url(../img/box/grey_tl.gif) no-repeat 0 0; } .box.grey .box-top div { background:transparent url(../img/box/grey_tr.gif) no-repeat 100% 0; } .box.grey .box-bottom { background:transparent url(../img/box/grey_bl.gif) no-repeat 0 0; } .box.grey .box-bottom div { background:transparent url(../img/box/grey_br.gif) no-repeat 100% 0; } /* brown box */ .box.brown { background:#4b3e37; } .box.brown h2, .box.brown h2 a { color:#ffd60c; text-decoration:none; } .box.brown p { color:#fff; } .box.brown p.more a { color:#fff; } .box.brown ul { color:#fff; } .box.brown .box-top { background:transparent url(../img/box/brown_tl.gif) no-repeat 0 0; } .box.brown .box-top div { background:transparent url(../img/box/brown_tr.gif) no-repeat 100% 0; } .box.brown .box-bottom { background:transparent url(../img/box/brown_bl.gif) no-repeat 0 0; } .box.brown .box-bottom div { background:transparent url(../img/box/brown_br.gif) no-repeat 100% 0; } /* bordered box */ .box.border { background:#fff; border:3px solid #e9e8e7; } .box.border h2, .box.border h2 a { color:#4b3e37; text-decoration:none; } .box.border p { color:#222; } .box.border p.more { padding:5px 7px 0 10px; } .box.border p.more a {} .box.border ul { color:#222; } .box.border .box-top { background:transparent url(../img/box/border_tl.gif) no-repeat 0 0; } .box.border .box-top div { background:transparent url(../img/box/border_tr.gif) no-repeat 100% 0; } .box.border .box-bottom { background:transparent url(../img/box/border_bl.gif) no-repeat 0 0; } .box.border .box-bottom div { background:transparent url(../img/box/border_br.gif) no-repeat 100% 0; } /* quote/ testimonial box */ .box.quote { background:#e9e8e7; margin-bottom:0; } .box.quote h2, .box.quote h2 a { color:#769fb2; text-decoration:none; } .box.quote p.more a { color:#4b3e37; } .box.quote .box-top { background:transparent url(../img/box/grey_tl.gif) no-repeat 0 0; } .box.quote .box-top div { background:transparent url(../img/box/grey_tr.gif) no-repeat 100% 0; } .box.quote .box-bottom { background:transparent url(../img/box/grey_bl.gif) no-repeat 0 0; } .box.quote .box-bottom div { background:transparent url(../img/box/grey_br.gif) no-repeat 100% 0; } blockquote.testimonial { border:0; margin:0; padding:0 10px; } blockquote.testimonial .box p { padding:10px 20px; margin:0; color:#222; } blockquote.testimonial cite { line-height:1.3em; display:block; background:url(../img/bg_cite.gif) 20px 0px no-repeat transparent; font-weight:normal; padding:15px 0 30px 0; } blockquote.testimonial cite span { font-weight:bold; } blockquote.testimonial cite a { color:#cc3300; } /* box icons */ .box .icon { position:absolute; right:0; top:0; background-position:top left; background-repeat:no-repeat; } .box.download .icon { background-image:url(../img/icon/download.png); right:10px; top:-20px; width:110px; height:170px; } .box.feed .icon { background-image:url(../img/icon/feed.png); right:15px; top:-20px; width:100px; height:150px; } .box.casestudy .icon { background-image:url(../img/icon/casestudy.png); right:15px; top:-20px; width:110px; height:125px; } .box.contact .icon { background-image:url(../img/icon/contact.png); right:15px; top:-20px; width:110px; height:120px; } .box.cube .icon { background-image:url(../img/icon/cube.png); right:15px; top:-30px; width:120px; height:120px; } .box.editorial .icon { background-image:url(../img/icon/editorial.png); right:15px; top:-20px; width:110px; height:110px; } .box.note .icon { background-image:url(../img/icon/note.png); right:15px; top:-20px; width:110px; height:140px; } .box.envelope .icon { background-image:url(../img/icon/envelope.png); right:10px; top:-35px; width:110px; height:140px; } .box-start { width:920px; height:331px; padding:0; margin:0 0 20px 0; background:url(../img/bg_sts_cnt.png) 0 0 no-repeat transparent; } .box-start h2, .box-start h2 a { color:#ffd60c; text-decoration:none; } .box-start p { color:#fff; } .box-start p.more a { color:#fff; } .box-start ul { color:#fff; } .box-start a { color:#fff; }