/* <------------ Browser Reset ---------- */ @import url(reset.css); /* Copyright: 2009 Christoph Rummel Web: http://www.eventjonglage.de EMail: mail Version: 0.1 File Contents: - Basic Layout */ html { height: 100%; background: #ced2d5 url(images/bg_body.jpg) 0 0 repeat-x; } body#home, body#content { width: 100%; display: table; position: relative; } body#home { background: url(images/bg_page.jpg) 0 0 no-repeat; } body#content { background: url(images/bg_page-content.jpg) 0 0 no-repeat; } #wrap_page { float: left; margin: 0 auto; min-height: 100%; padding: 0 0 0 145px; } .hidden { visibility: hidden; } .divider_large { float: left; width: 545px; height: 25px; margin: 25px 0 10px 0; border: none; background: url(images/bg_divider-large.jpg) 0 0 no-repeat; } .img_medium { float: left; width: 120px; height: 85px; margin: -5px 10px 0 -5px; padding: 6px 6px 8px 9px; background: url(images/bg_img-medium.png) 0 0 no-repeat; } .img_right { float: right; margin: -5px 0 0 10px; } /* <------------ Fonts ---------- */ body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; color: #000; } h1 { float:left; padding: 0 5px; margin: 0 0 0 -5px; background: #000; font-family: "Georgia", Times serif; font-size: 30px; line-height: 38px; color: #fff; } /* Content Main Headline */ h2 { font-family: "Georgia", Times serif; font-size: 30px; line-height: 38px; color: #000; } /* Content Main Subline */ h3 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; color: #888; margin: -5px 0 0 0; } /* Side Content & Content second Headline */ h4 { float: left; width: 100%; font-family: "Georgia", Times serif; font-size: 20px; line-height: 26px; color: #000; margin: 0 0 5px 0; } /* News Headline */ h5 { font-family: "Georgia", Times serif; font-size: 14px; line-height: 18px; color: #000; margin: 0 0 5px 0; } blockquote { float: left; font-family: "Georgia", Times serif; font-size: 18px; line-height: 35px; font-style: italic; color: #888; } #content blockquote { width: 505px; margin: 15px 0 0 0; padding: 15px; background: #fff; border: 1px solid #ccc; text-align: center; font-size: 14px; line-height: 25px; } .quote_name { float: left; margin: 5px 0 10px 0; } .text_highlight { float: left; width: 500px; margin: 10px 0 10px 25px; font-family: "Georgia", Times serif; font-size: 14px; line-height: 23px; font-style: italic; color: #888; } cite { font-family: "Georgia", Times serif; font-style: italic; } a { color: #000; text-decoration: underline; cursor: pointer; } a:hover { text-decoration: none; } p { float: left; } #content p { margin: 10px 0; } /* Wrapper Content */ #wrap_content { float: left; width: 990px; } /* Wrapper Header */ #wrap_head { float: left; width: 980px; height: 120px; margin: 0 0 0 5px; } /* Mainmenu */ #wrap_mainmenu { float: left; width: 630px; height: 40px; margin: 80px 0 0 0; } #ul_mainmenu { list-style-type: none; } #ul_mainmenu li { float: left; } #ul_mainmenu a { position: relative; float: left; height: 40px; display: block; text-indent: -99999px; } #ul_mainmenu li a span { display: block; position: absolute; cursor: pointer; top: 0; left: 0; height: 100%; width: 100%; z-index: 100; } #mainmenu_home a { width: 107px; background: url(images/sprite_mainmenu.gif) 0 0 no-repeat; } #mainmenu_home span, #mainmenu_home a.active { background: url(images/sprite_mainmenu.gif) 0 -40px no-repeat; } #mainmenu_profil a { width: 75px; background: url(images/sprite_mainmenu.gif) -107px 0 no-repeat; } #mainmenu_profil span, #mainmenu_profil a.active { background: url(images/sprite_mainmenu.gif) -107px -40px no-repeat; } #mainmenu_person a { width: 78px; background: url(images/sprite_mainmenu.gif) -182px 0 no-repeat; } #mainmenu_person span, #mainmenu_person a.active { background: url(images/sprite_mainmenu.gif) -182px -40px no-repeat; } #mainmenu_projekte a { width: 92px; background: url(images/sprite_mainmenu.gif) -260px 0 no-repeat; } #mainmenu_projekte span, #mainmenu_projekte a.active { background: url(images/sprite_mainmenu.gif) -260px -40px no-repeat; } #mainmenu_referenzen a { width: 106px; background: url(images/sprite_mainmenu.gif) -352px 0 no-repeat; } #mainmenu_referenzen span, #mainmenu_referenzen a.active { background: url(images/sprite_mainmenu.gif) -352px -40px no-repeat; } #mainmenu_medien a { width: 77px; background: url(images/sprite_mainmenu.gif) -458px 0 no-repeat; } #mainmenu_medien span, #mainmenu_medien a.active { background: url(images/sprite_mainmenu.gif) -458px -40px no-repeat; } #mainmenu_kontakt a { width: 95px; background: url(images/sprite_mainmenu.gif) -535px 0 no-repeat; } #mainmenu_kontakt span, #mainmenu_kontakt a.active { background: url(images/sprite_mainmenu.gif) -535px -40px no-repeat; } #wrap_lang { float: left; width: 70px; height: 40px; margin: 80px 0 0 0; } #wrap_lang ul { list-style: none; } #wrap_lang li { float: left; } #wrap_lang a { float: left; height: 40px; display: block; text-indent: -99999px; } #lang_de a { width: 37px; background: url(images/sprite_mainmenu.gif) -630px 0 no-repeat; } #lang_de a:hover, #lang_de a.active { background: url(images/sprite_mainmenu.gif) -630px -40px no-repeat; } #lang_us a { width: 33px; background: url(images/sprite_mainmenu.gif) -667px 0 no-repeat; } #lang_us a:hover, #lang_us a.active { background: url(images/sprite_mainmenu.gif) -667px -40px no-repeat; } #wrap_logo { float: right; width: 240px; height: 45px; margin: 35px 0 0 0; } #wrap_logo a { float: left; width: 225px; height: 45px; display: block; text-indent: -99999px; } /* Wrapper Mainteaser */ #wrap_mainteaser { position: relative; float: left; width: 990px; height: 480px; } /* Wrapper Subteaser */ #wrap_subteaser { position: relative; float: left; width: 990px; height: 250px; } #mainteaser_corners-top, #subteaser_corners-top { z-index: 2; position: absolute; width: 990px; height: 5px; display: block; text-indent: -99999px; background: url(images/corners_mainteaser.png) top left no-repeat; } #mainteaser_corners-btm, #subteaser_corners-btm { z-index: 2; position: absolute; width: 990px; height: 5px; display: block; text-indent: -99999px; } #mainteaser_corners-btm { top: 475px; background: url(images/corners_mainteaser-btm.png) top left no-repeat; } #subteaser_corners-btm { top: 245px; background: url(images/corners_subteaser-btm.png) top left no-repeat; } #mainteaser_pics { z-index: 1; float: left; width: 990px; height: 350px; } #ul_slider { list-style-type: none; margin: 0; padding: 0; } #ul_slider li { position: relative; float: left; width: 990px; height: 350px; } .teaser_left { position: absolute; width: 350px; padding: 0 0 0 25px; top: 105px; left: 10px; } .teaser_right { position: absolute; width: 350px; padding: 0 25px 0 0; top: 105px; right: 10px; } .teaser_right h1, .teaser_left h1 { float: left; } .teaser_right p, .teaser_left p{ float: left; margin: 10px 0 0 0; color: #fff; } #teaser_intro .teaser_right p { width: 325px; } #teaser_stangen .teaser_right { width: 325px; right: 0; } #teaser_keulen .teaser_right { width: 300px; right: 0; } #teaser_feuer .teaser_right { top: 125px; } #teaser_feuer .teaser_right p { width: 325px; } #teaser_finanzen .teaser_left p { width: 325px; } #mainteaser_nav { z-index: 2; position: absolute; top: 340px; width: 990px; height: 140px; } #ul_mainteaser-nav, #ul_subteaser-nav { float: left; list-style-type: none; } #ul_mainteaser-nav li, #ul_subteaser-nav li { position: relative; float: left; text-align: center; } #ul_mainteaser-nav a { float: left; width: 165px; height: 140px; display: block; text-indent: -99999px; } #ul_mainteaser-nav a span { display: block; cursor: pointer; top: 0; left: 0; width: 165px; height: 140px; z-index: 100; } #mainteaser_stangen a { background: url(images/sprite_mainteaser-nav.png) 0 0 no-repeat; } #mainteaser_stangen span, #mainteaser_stangen a.active { background: url(images/sprite_mainteaser-nav.png) 0 -140px no-repeat; } #mainteaser_leucht a { background: url(images/sprite_mainteaser-nav.png) -165px 0 no-repeat; } #mainteaser_leucht span, #mainteaser_leucht a.active { background: url(images/sprite_mainteaser-nav.png) -165px -140px no-repeat; } #mainteaser_keulen a { background: url(images/sprite_mainteaser-nav.png) -330px 0 no-repeat; } #mainteaser_keulen span, #mainteaser_keulen a.active { background: url(images/sprite_mainteaser-nav.png) -330px -140px no-repeat; } #mainteaser_feuer a { background: url(images/sprite_mainteaser-nav.png) -495px 0 no-repeat; } #mainteaser_feuer span, #mainteaser_feuer a.active { background: url(images/sprite_mainteaser-nav.png) -495px -140px no-repeat; } #mainteaser_finanzen a { background: url(images/sprite_mainteaser-nav.png) -660px 0 no-repeat; } #mainteaser_finanzen span, #mainteaser_finanzen a.active { background: url(images/sprite_mainteaser-nav.png) -660px -140px no-repeat; } #mainteaser_specials a { background: url(images/sprite_mainteaser-nav.png) -825px 0 no-repeat; } #mainteaser_specials span, #mainteaser_specials a.active { background: url(images/sprite_mainteaser-nav.png) -825px -140px no-repeat; } .nav_more { z-index: 1000; position: absolute; width: 135px; height: 20px; margin: 120px 0 0 10px; padding: 5px; display: block; background: #000; color: #fff; text-align: center; font-style: italic; } #subteaser_nav { z-index: 2; position: absolute; top: 209px; float: left; width: 990px; height: 41px; } #ul_subteaser-nav a { float: left; width: 165px; height: 41px; display: block; text-indent: -99999px; } #ul_subteaser-nav a span { display: block; cursor: pointer; top: 0; left: 0; width: 165px; height: 41px; z-index: 100; } #subteaser_stangen a { background: url(images/sprite_submenu.gif) 0 0 no-repeat; } #subteaser_stangen span, #subteaser_stangen a.active { background: url(images/sprite_submenu.gif) 0 -41px no-repeat; } #subteaser_leucht a { background: url(images/sprite_submenu.gif) -165px 0 no-repeat; } #subteaser_leucht span, #subteaser_leucht a.active { background: url(images/sprite_submenu.gif) -165px -41px no-repeat; } #subteaser_keulen a { background: url(images/sprite_submenu.gif) -330px 0 no-repeat; } #subteaser_keulen span, #subteaser_keulen a.active { background: url(images/sprite_submenu.gif) -330px -41px no-repeat; } #subteaser_feuer a { background: url(images/sprite_submenu.gif) -495px 0 no-repeat; } #subteaser_feuer span, #subteaser_feuer a.active { background: url(images/sprite_submenu.gif) -495px -41px no-repeat; } #subteaser_finanzen a { background: url(images/sprite_submenu.gif) -660px 0 no-repeat; } #subteaser_finanzen span, #subteaser_finanzen a.active { background: url(images/sprite_submenu.gif) -660px -41px no-repeat; } #subteaser_specials a { background: url(images/sprite_submenu.gif) -825px 0 no-repeat; } #subteaser_specials span, #subteaser_specials a.active { background: url(images/sprite_submenu.gif) -825px -41px no-repeat; } /* Wrapper Maincontent */ #wrap_maincontent { float: left; width: 980px; margin: 30px 0 0 5px; } #content_main { float: left; width: 605px; margin: 0 10px 0 0; padding: 5px 0 0 0; background: url(images/bg_maincontent.png) 0 0 repeat-y; } #content #content_main { width: 550px; padding: 5px 25px 0 30px; } #content #content_main h3 { margin: 0 0 25px 0; } #main_intro { float: left; width: 595px; height: 775px; margin: 0 0 0 5px; padding: 0 0 0 25px; background: url(images/bg_intro.jpg) bottom left no-repeat; } .intro_point { float: left; width: 250px; margin: 0 0 35px 300px; } .button { float: left; width: 100%; } #main_intro .button { width: 260px; margin: 0 0 15px 300px; } #content_intro .button { width: 235px; } .button a { width: 235px; height: 70px; display: block; text-indent: -99999px; } .button_info { float: left; background: url(images/bg_button-info.jpg) 0 0 no-repeat; } .button_buchen { float: left; background: url(images/bg_button-buchen.png) 0 0 no-repeat; } .button_teaser { float: left; width: 132px; height: 32px; margin: 15px 0 0 0; background: url(images/bg_button-teaser.png) 0 0 no-repeat; } .button_teaser a { width: 132px; height: 32px; display: block; text-indent: -99999px; } #main_intro blockquote { float: left; text-align: center; width: 545px; margin: 25px 0 35px 0; } #main_news { float: left; width: 545px; margin: 0 0 0 25px; padding: 25px 0 0 0; background: url(images/bg_divider-large.jpg) 0 0 no-repeat; } #main_news h3 { margin: 0 0 15px 0; } .news_entry { float: left; padding: 25px 0 10px 0; background: url(images/bg_divider-large.jpg) top left no-repeat; } .news_entry.first { padding: 0 0 10px 0; background: none; } #content_press { float: left; width: 545px; margin: 20px 0 0 0; padding: 25px 0 0 0; background: url(images/bg_divider-large.jpg) 0 0 no-repeat; } #content_intro { float: left; } #content_intro p { margin: 0 15px 10px 0; float: left; width: 260px; } .content_block { float: left; width: 100%; margin: 20px 0 0 0; padding: 25px 0 0 0; background: url(images/bg_divider-large.jpg) 0 0 no-repeat; } .content_block p { width: 100%; } .content_block.first { background: none; margin: 0; padding: 0; } #intro_video { width: 576px; height: 366px; display: block; margin: 0 10px 10px -15px; padding: 5px 0 0 22px; background: url(images/bg_video-big.png) 0 0 no-repeat; } #intro_video object { width: 530px; height: 340px; } .video_description { float: left; width: 270px; margin: 0px 0 0 0; } #gallery_video, #gallery_pics { float: left; width: 565px; } #gallery_video h4, #gallery_pics h4 { float: left; width: 595px; } #gallery_video ul, #gallery_pics ul { list-style: none; } #gallery_pics li { float: left; width: 120px; height: 95px; margin: 0 17px 25px 0; } .li_pic { float: left; width: 130px; height: 95px; } .li_download { float: left; width: 120px; height: 10px; margin: -5px 0 0 0; text-align: center; font-size: 10px; } .li_download a { color: #a3a3a3; } .li_download a:hover { color: #000; } #gallery_video li { float: left; width: 267px; height: 229px; margin: 0 10px 25px -15px; padding: 5px 0 0 20px; background: url(images/bg_video-medium.png) 0 0 no-repeat; } #gallery_video li object { float: left; width: 245px; height: 210px; } #content_side { float: right; width: 365px; } #content_side p { margin: 0; } #content #content_side { width: 365px; } #side_bg { float: right; width: 340px; padding: 5px 0 0 25px; background: url(images/bg_sidecontent.png) 0 0 repeat-y; } #side_video { float: left; padding: 0 0 45px 0; background: url(images/bg_divider-small.png) bottom left no-repeat; } .video_object { float: left; width: 325px; height: 280px; margin: 15px 0 0 -7px; padding: 5px 0 0 13px; background: url(images/bg_video.png) 0 0 no-repeat; } #side_gallery { float: left; width: 340px; height: 200px; margin: 10px 0 25px -15px; padding: 0 0 0 15px; background: url(images/bg_galerie.jpg) 0 50px no-repeat; } #side_references { float: left; width: 340px; margin: 0 0 15px 0; padding: 35px 0 0 0; background: url(images/bg_divider-small.png) top left no-repeat; } #side_references img { float: left; padding: 15px 0 0 0; } #side_references.first { background: none; padding: 0; } #side_contact { float: right; width: 365px; height: 70px; background: url(images/bg_contact.png) 0 0 no-repeat; } #side_contact a { float: left; width: 295px; height: 50px; margin: 5px 0 0 30px; display: block; text-indent: -99999px; } #wrap_footer { float: left; width: 605px; margin: 0 0 25px 0; padding: 35px 0 0 0; background: url(images/bg_footer.png) 0 0 no-repeat; font-size: 10px; line-height: 14px; } #wrap_footer p { margin: 0; } #footer_left { float: left; width: 250px; margin: 0 10px 0 0; } #paiko_logo a { float: left; width: 90px; height: 36px; margin: 0 15px 0 0; display: block; text-indent: -99999px; background: url(images/bg_paiko-logo.png) 0 0 no-repeat; } #footer_right { float: left; width: 345px; } #footer_right p { width: 100%; } #footer_right ul { list-style: none; } #footer_right li { float: left; margin: 0 5px 0 0; } /* Contactform */ form { float: left; width: 540px; } fieldset { position: relative; float: left; } fieldset input { float: left; width: 250px; } #form_name, #form_surename, #form_email, #form_phone, #form_subject { float: left; width: 250px; height: 56px; } #form_name, #form_email, #form_subject { margin: 0 25px 0 0; } #form_newsletter { float: left; width: 100%; } #form_newsletter input { width: 15px; margin: 0; } #form_text { float: left; width: 530px; } textarea { float: left; width: 525px; padding: 5px; background: #fff; border: 1px solid #dcdcdc; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; } #contactform label { float: left; } #contactform label.error { position: absolute; float: left; margin: 0 0 0 5px; color: #C00; } #wrapper_contact input { float: left; width: 290px; height: 20px; padding: 5px; background: #f6f6f6; border: 1px solid #dcdcdc; } input { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; } input#form_button { float: left; width: 235px; height: 70px; margin: 10px 0 20px 0; text-indent: -99999px; border: 0; cursor: pointer; background: url(images/bg_button-senden.png) 0 0; } .block_left { float: left; width: 250px; } .block_right { float: right; width: 300px; } #social_xing, #social_facebook, #social_youtube, #social_vimeo, #social_myspace { float: left; height: 35px; margin: 10px 20px 0 0; display: block; text-indent: -99999px; background: url(images/sprite_social.png) no-repeat; } #social_facebook { width: 105px; background-position: 0 0; } #social_vimeo { width: 85px; background-position: -105px 0; } #social_xing { width: 69px; background-position: -190px 0; } #social_youtube { width: 63px; background-position: -259px 0; } #social_myspace { width: 107px; background-position: -322px 0; } #alert_message_error, #alert_message_success { position: absolute; width: 100%; height: 30px; padding: 5px 0 10px 0; display: block; color: #FFF; border-bottom: 1px dashed #666; } #alert_message_error p, #alert_message_success p { margin: 0 0 0 145px; } #alert_message_error strong, #alert_message_success strong { padding: 5px 0 0 0; color: #fff; } #alert_message_error a, #alert_message_success a { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #FFF; } #alert_message_success { background: #0C0; } #alert_message_error { background: #C00; } /* <------------ Go to hell IE6!!! ------------> */ #alert_ie6 { position: absolute; z-index: 1000; top: 0; left: 0; width: 100%; height: 40px; padding: 5px 0 10px 0; background: #fff57c; border-bottom: 1px dashed #666; } #alert_ie6 p { color: #666 ; margin: 0 0 0 70px; width: 990px; text-align: center; } #alert_ie6 p a { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #434343; font-weight: 600; }