/********** Resets **********/ * { margin: 0; padding: 0 } img { vertical-align: top } .clear { clear: both } .hidden { display: none } /********** Resets **********/ /********** External-Fonts **********/ @font-face { font-family: ImpactLabel; src: url( '../oppositionXtreme/webfonts/impact-label.eot' ); src: url( '../oppositionXtreme/webfonts/impact-label.eot?#iefix' ) format( 'embedded-opentype' ), url( '../oppositionXtreme/webfonts/impact-label.woff2' ) format( 'woff2' ), url( '../oppositionXtreme/webfonts/impact-label.woff' ) format( 'woff' ), url( '../oppositionXtreme/webfonts/impact-label.ttf' ) format( 'truetype' ), url( '../oppositionXtreme/webfonts/impact-label.svg#impact_label_reversedregular' ) format( 'svg' ); } @font-face { font-family: Icons; src: url( '../oppositionXtreme/webfonts/fontawesome.eot?v=4.2.0' ); src: url( '../oppositionXtreme/webfonts/fontawesksome.eot?#iefix&v=4.2.0' ) format( 'embedded-opentype' ), url( '../oppositionXtreme/webfonts/fontawesome.woff?v=4.2.0' ) format( 'woff' ), url( '../oppositionXtreme/webfonts/fontawesome.ttf?v=4.2.0' ) format( 'truetype' ), url( '../oppositionXtreme/webfonts/fontawesome.svg?v=4.2.0#fontawesomeregular' ) format( 'svg' ); } @font-face { font-family: LHFbootCamp; src: url( '../oppositionXtreme/webfonts/lhfbootcamp.eot' ); src: url( '../oppositionXtreme/webfonts/lhfbootcamp.eot?#iefix' ) format( 'embedded-opentype' ), url( '../oppositionXtreme/webfonts/lhfbootcamp.woff2' ) format( 'woff2' ), url( '../oppositionXtreme/webfonts/lhfbootcamp.woff' ) format( 'woff' ), url( '../oppositionXtreme/webfonts/lhfbootcamp.ttf' ) format( 'truetype' ), url( '../oppositionXtreme/webfonts/lhfbootcamp.svg#lhf_boot_camp_regularregular' ) format( 'svg' ); } @font-face { font-family: RobotoLight; src: url( '../oppositionXtreme/webfonts/robotocondensed-light-webfont.eot' ); src: url( '../oppositionXtreme/webfonts/robotocondensed-light-webfont.eot?#iefix' ) format( 'embedded-opentype' ), url( '../oppositionXtreme/webfonts/robotocondensed-light-webfont.woff2' ) format( 'woff2' ), url( '../oppositionXtreme/webfonts/robotocondensed-light-webfont.woff' ) format( 'woff' ), url( '../oppositionXtreme/webfonts/robotocondensed-light-webfont.ttf' ) format( 'truetype' ), url( '../oppositionXtreme/webfonts/robotocondensed-light-webfont.svg#robotocondensed-light-webfont' ) format( 'svg' ); } @font-face { font-family: Slick; src: url( '../oppositionXtreme/webfonts/slick.eot' ); src: url( '../oppositionXtreme/webfonts/slick.eot?#iefix' ) format( 'embedded-opentype' ), url( '../oppositionXtreme/webfonts/slick.woff' ) format( 'woff' ), url( '../oppositionXtreme/webfonts/slick.ttf' ) format( 'truetype' ), url( '../oppositionXtreme/webfonts/slick.svg#slick' ) format( 'svg' ); } /********** External-Fonts **********/ /********* Font-Style **********/ a { text-decoration: underline; outline: none; color: #FFFFFF } a.readmore { position: absolute; font-family: LHFbootCamp; font-size: 1.1em; bottom: 0; background-color: #000000; display: block; padding: 8px 15px; text-decoration: none; letter-spacing: 2px } a.readmore:hover { background-color: #F40000 } a.readmore:before { content: '\f138'; font-family: Icons; font-size: 0.9em; margin-right: 7px } a.readmore.back:before { content: '\f137' } a.newsoverview { text-decoration: none } a.fwsc { width: 350px; display: inline-block; margin-bottom: 25px } a.fwsc img { width: 100% } a.fwsccalendar { text-decoration: none !important } a img { border: none } h1, h2, h3 { font-family: LHFbootCamp; font-weight: normal } h1 { font-family: ImpactLabel; color: rgba( 244, 0, 0, 0.8 ); font-size: 1.3em; line-height: 1em; margin: 15px 0 15px 10px } h1 span { background-color: rgba( 16, 16, 16, 0.7 ); font-size: 1.6em; padding: 8px 15px; display: inline-block } h1 a { text-decoration: none; color: #F40000 } h2 { font-size: 2.0em; line-height: 1.1em; letter-spacing: 2px; color: #FFFFFF; margin-bottom: 10px } h2.small { font-size: 1em } h2.newsoverview { background-color: #000000; padding: 12px 17px; margin-bottom: 0 } h2.newsoverview:hover { background-color: #F40000 } h2.newsdetail { margin-left: 10px } h2.galleryoverview, h2.releases, h2.fanhead { margin-left: 20px } h2.releases { position: relative } h2 span.small { font-size: 0.5em; background: #000000; padding: 5px 10px } h2 a { text-decoration: none; color: #FFFFFF } h3 { font: 1.5em/1em LHFbootCamp; color: #F40000; margin-bottom: 10px; padding: 5px 10px; background: url( '../oppositionXtreme/images/headline-distinction.png' ) left top } input, textarea { font: normal 1em/1em RobotoLight; color: #FFFFFF } ::-webkit-input-placeholder { color: #FFFFFF } :-moz-placeholder { color: #FFFFFF } ::-moz-placeholder { color: #FFFFFF } :-ms-input-placeholder { color: #FFFFFF } .red { color: #F40000 } /********* Font-Style **********/ body { background: #000000 url( '../oppositionXtreme/images/body-bg.jpg' ) center center no-repeat; background-attachment: fixed; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; font: normal 1em/1em RobotoLight; color: #FFFFFF } /********** Container **********/ .wrapper { width: 100% } .wrapper.grey { background-color: rgba( 40, 39, 39, .7 ) } .wrapper.darkgrey { background-color: rgba( 16, 16, 16, 0.7 ) } .wrapper.red { background-color: rgba( 244, 0, 0, 0.8 ) } .wrapper.margin { margin: 30px 0 } .wrapper > .inner { width: 1000px; margin: 0 auto } .wrapper > .inner.padding { padding: 20px 0 } header { padding: 30px 0; text-align: center } nav { background: url( '../oppositionXtreme/images/menu-bg.png' ) left bottom repeat-x; margin-bottom: 2px } #content { width: 75%; float: left } #network { width: 20%; float: right; margin-top: 18px } #content.home { width: 100%; float: none } #network.home { width: 100%; float: none; margin-top: 30px } #network.home ul.sociallinks { display: block } #network.home .block { display: inline-block; width: 20%; vertical-align: top; margin-left: -4px } #network.home .block.weiteres { margin-right: 5% } #network.home .block.netzwerk { margin-right: 10% } #network.home .block.voe { margin-right: 5% } #testboxie { display: none } /********** Container **********/ /********** Objects **********/ a.logo { margin-left: -40px } a.logo img { width: 65% } .img.responsive img { width: 100%; height: auto } .img.responsive.imgtext { position: relative } .img.responsive.imgtext div.innertext, .img.responsive.imgtext div.innerheadline { background-color: rgba( 0, 0, 0, 0.9 ); position: absolute; padding: 1% } .img.responsive.imgtext div.innertext { padding-bottom: 30px } .img.responsive.imgtext div.innertext a.readmore { left: 0 } .img.responsive.imgtext div.innerheadline { left: 0; top: 0 } .img.responsive.imgtext div.innerheadline h2 { color: #F40000; font-size: 1.5em } .img.responsive.imgtext div.innertext { left: 0; bottom: 0; width: 80% } .img.margin img { margin-bottom: 15px } .img.newsoverview img { } .border-bottom-top { background-image: url( '../oppositionXtreme/images/border-bottom-top.png' ); background-repeat: repeat-x } .border-bottom-top.leftbottom { background-position: left bottom } p, p > span, p, p a > span { color: #FFFFFF !important; text-align: left !important; font-weight: normal !important; font-family: RobotoLight !important; font-size: 0.95em !important; line-height: 1.4em; padding-bottom: 15px } p:last-child { padding-bottom: 0 } p.newsoverview { font-size: 0.8em !important } p.newsoverview.noimage { padding-top: 15px } p.newsoverview.newsdate { letter-spacing: 2px; line-height: 0; padding: 10px 15px; font-family: LHFbootCamp !important; font-size: 0.9em; background: rgba( 0, 0, 0, 0.8 ); display: inline-block; position: absolute; left: 0; top: -20px; z-index: 10 } p.newsoverview.newsdate.noimage { top: 0 } p.lhfbootcamp { font-family: LHFbootCamp !important; letter-spacing: 2px } p.fantext { margin-left: 20px } .center { text-align: center !important } iframe { width: 100% } iframe.margin { margin-bottom: 15px } iframe.shopframe { height: 400px } .iframewrapper { position: relative; height: 0; padding-bottom: 56.2% !important; overflow: hidden; margin-bottom: 30px } .iframewrapper iframe { height: 100%; width: 100%; position: absolute; left: 0; top: 0 } .socialmediastream { margin: 0 10px } .socialmediastream .sharing { margin: 15px 0 25px } .gallerydetailinfo { padding: 0 10px 35px; position: relative } .gallerydetailinfo.bottom { margin-top: -14px } .medien { position: relative } .medien h4 { position: absolute; font-family: LHFbootCamp; background: url( '../oppositionXtreme/images/headline-distinction.png' ) left top; bottom: 0; right: 0; padding: 10px; background: #000000; font-size: 2em } .medien .column:hover h4 { background: #F40000 } .medien .column:hover img { opacity: .6 } .medien.youtubevideos .column { height: 150px; overflow: hidden; display: block; margin-bottom: 10px } table { width: 100% } table tr th, table tr td { padding: 5px 10px; vertical-align: middle; text-align: left; background-image: url( '../oppositionXtreme/images/border-bottom-top.png' ); background-position: left bottom; background-repeat: repeat-x } table tr th { font-family: LHFbootCamp; font-weight: normal; font-size: 1.2em; background-color: #F40000; background-image: none } table tr:nth-child(odd) { background-color: #111111 } table tr:hover td { background-color: #222222 } table.dates tr { cursor: pointer } a.buylinks { display:inline-block; width: 30px; height: 30px; margin-left: 3px; background-position: center center; background-repeat: no-repeat } h2.releases a.buylinks { float: right } a.buylinks.amazon { background-image: url( '../oppositionXtreme/images/amazon.png' ) } a.buylinks.emp { background-image: url( '../oppositionXtreme/images/emp.png' ) } a.buylinks.itunes { background-image: url( '../oppositionXtreme/images/itunes.png' ) } a.buylinks.songtext { background-image: url( '../oppositionXtreme/images/songtexte.png' ) } a.buylinks.amazon:hover { background-image: url( '../oppositionXtreme/images/amazon-active.png' ) } a.buylinks.emp:hover { background-image: url( '../oppositionXtreme/images/emp-active.png' ) } a.buylinks.itunes:hover { background-image: url( '../oppositionXtreme/images/itunes-active.png' ) } a.buylinks.songtext:hover { background-image: url( '../oppositionXtreme/images/songtexte-active.png' ) } a.buylinks.googleplay { background-image: url( '../oppositionXtreme/images/googleplay.png' ); width: 86px } a.buylinks.googleplay:hover { background-image: url( '../oppositionXtreme/images/googleplay-active.png' ) } span.ticketbuy { font-size: .8em; padding: 5px 10px; display: inline-block; text-align: center } span.ticketbuy.soldout { background-color: #9f0000 } span.ticketbuy.buy { background-color: #387200 } span.ticketbuy.buy a { text-decoration: none; padding: 5px 10px } span.ticketbuy.soon { background-color: #111111 } .releasecover { padding: 7px; background-color: rgba( 0, 0, 0, .5 ); margin-right: 5px; cursor: pointer } .homeslidertop { margin-top: 20px } .homeslider { margin: 20px 0 } form fieldset { border: none } form .recaptchatable { border: none !important } form label { font: 1.3em/1em LHFbootcamp; margin-bottom: 8px; display: block; color: #F40000 } form input[type="text"], form input[type="email"], form select { width: 100%; padding: 10px 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } form textarea { width: 100%; padding: 10px 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 80px } form input[type="text"], form input[type="email"], form textarea { border: none; border-left: 1px solid #111111; border-bottom: 1px solid #111111; background-color: #222222 } form .middleColumn { margin-bottom: 15px } form table { border-spacing: 0 } form table tr td { background: none; padding: 0 !important } form table tr:hover td { background: none } form table tbody tr td:nth-child( 1 ), form table tbody tr td:nth-child( 1 ) #recaptcha_image, form table tbody tr td:nth-child( 1 ) #recaptcha_image img { width: 100% !important } form table tbody tr td:nth-child( 3 ) { display: none } form table tbody tr td #recaptcha_response_field { color: #FFFFFF; width: 100% !important; border: none !important; border-left: 1px solid #111111 !important; border-bottom: 1px solid #111111 !important; background-color: #222222 } form input[type="submit"] { border: none; background: #F40000; color: #FFFFFF; font: 1.3em/1em LHFbootcamp; cursor: pointer; padding: 5px 10px; margin-top: 10px } .message.required, .req { background-color: #9f0000; display: block; padding: 5px 10px; margin: 10px 0 } .true { background-color: #387200; display: block; padding: 5px 10px; margin: 10px 0 } .contact table { font-size: .8em; width: 100% !important } #homeplayerwrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba( 0, 0, 0, .8 ); z-index: 9998 } #homeplayer { position: absolute; top: 2%; left: 10%; width: 80%; height: 80%; z-index: 9999 } .videohomeclose { font-family: LHFbootcamp; width: 100%; text-align: center; background: #000000; font-size: 2em; height: 50px; text-align: center; line-height: 50px; cursor: pointer } #bioPage { margin-top: 20px } #bioPage .tab { opacity: .5; cursor: pointer; position: relative; z-index: 2; margin-bottom: -1px; display: inline-block; vertical-align: top; border: 1px solid #666666; border-bottom: 0; padding: .5em; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px } #bioPage .tab:hover { opacity: .8 } #bioPage .tab.active { background-color: #000000; opacity: 1 } #bioPage .tab > img, #bioPage .tab > span { display: inline-block; vertical-align: middle } #bioPage .tab > img { width: 30px } #bioPage .tab > span { padding-left: 7px } #bioPage .lang { background-color: #000000; border: 1px solid #666666; padding: .5em; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px } #bioPage .lang.hidden { display: none !important } /********** Objects **********/ /********** Box-Model **********/ .box { display: table; border-collapse: separate; border-spacing: 10px; width: 100% } .box:not(:first-child) { margin-top: -10px } .box:last-child { margin-bottom: 0 } .box .column { vertical-align: top; position: relative; webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; overflow: hidden; display: table-cell; background-color: rgba( 0, 0, 0, 0.65 ); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #171717 } .box .column.plain { webkit-box-shadow: 0 0 0 #000; -moz-box-shadow: 0 0 0 #000; box-shadow: 0 0 0 #000; background-color: rgba( 0, 0, 0, 0.65 ); border: none; background-color: rgba( 0, 0, 0, .65 ) } .box .column:not(.plain):hover { background-color: rgba( 0, 0, 0, 0.5 ) } .box .column:not(.plain):hover > a.readmore, .box .column:not(.plain):hover > a h2 { background-color: #F40000 } .box .column.paddingbottom { padding-bottom: 35px } .box .column.one { width: 100% } .box .column.two { width: 50% } .box .column.three { width: 33.3333333333% } .box .column.four { width: 25% } .box .column.one-three { width: 33.3333333333% } .box .column.two-three { width: 66.6666666666% } .box .column .inner { padding: 12px 15px; position: relative } .fanwallwrapper { width: 100%; position: relative; padding-bottom: 10px } .fanwallwrapper .fanwallitem { width: 235px; margin: 0 7px 7px } .fanwallwrapper .fanwallitem .inner { background-color: rgba( 0, 0, 0, 0.65 ); position: relative; padding: 30px 15px 15px } .fanwallwrapper span.createdate { background: #000; position: absolute; top: 0; left: 0; font-size: .7em; padding: 3px 15px } .fanwallwrapper span.membername { font-family: LHFbootCamp; color: #F40000; border-bottom: 1px dotted #F40000; font-size: 1.2em; margin-bottom: 4px; display: block; padding: 0 3px 7px } /********** Box-Model **********/ /********** Menus **********/ /********** Menu-Level-One **********/ ul.menu-level-one { text-align: center; padding-top: 15px; position: relative; bottom: -2px } ul.menu-level-one li { list-style-type: none; display: inline-block } ul.menu-level-one li:not(:first-child) { margin-left: -3px } ul.menu-level-one li a { font-family: ImpactLabel; color: #EDEDED; text-decoration: none; font-size: 1.5em; line-height: 30px; margin-right: 1px; display: block } ul.menu-level-one li a span { background: rgba( 0, 0, 0, 0.5 ); padding: 0 6px; height: 30px; display: block } ul.menu-level-one li:hover a span{ background: rgba( 244, 0, 0, 0.5 ) } ul.menu-level-one li a.current span { background-color: rgba( 244, 0, 0, 0.8 ); border-top: 5px solid #F40000; margin-top: -5px } ul.menu-level-one li ul { display: none; position: absolute; z-index: 10; background: rgba( 244, 0, 0, 0.8 ) } ul.menu-level-one li:hover ul { display: block } ul.menu-level-one li:hover ul li { display: block } ul.menu-level-one li:hover ul li a { padding: 0 7px } ul.menu-level-one li:hover ul li a:hover { background: rgba( 0, 0, 0, 0.8 ) } /********** Menu-Level-One **********/ /********** Menu-Service **********/ ul.menu-service { margin-bottom: 30px } ul.menu-service li { list-style-type: none; display: table; width: 100% } ul.menu-service li.border-bottom-top { background-position: left bottom } ul.menu-service li a { text-decoration: none; color: #FFFFFF; font: 1.2em/1.2em LHFBootCamp; display: block; vertical-align: middle; padding: 5px 10px } ul.menu-service li a span { display: inline-block; width: 80%; vertical-align: middle; } ul.menu-service li a.ticket.shop, ul.menu-service li a.leidenschaft { background: #F40000 } ul.menu-service li a.ticket.shop { margin-bottom: 1px } ul.menu-service li a:hover { color: #F40000 } ul.menu-service li a.ticket.shop:hover, ul.menu-service li a.leidenschaft:hover { color: #FFFFFF; background: #111111 } ul.menu-service li a:before { content: ''; width: 16px; height: 27px; background: url( '../oppositionXtreme/images/bullet-flame.png' ) left center no-repeat; display: inline-block; vertical-align: middle; margin-right: 8px; margin-bottom: 2px } ul.menu-service li a.ticket.shop:before, ul.menu-service li a.leidenschaft:before, ul.menu-service li a.ticket.shop:hover:before, ul.menu-service li a.leidenschaft:hover:before { background: url( '../oppositionXtreme/images/bullet-flame-white.png' ) left center no-repeat; color: #FFFFFF } ul.menu-service li a:hover:before { background-image: url( '../oppositionXtreme/images/bullet-flame-hover.png' ) } /********** Menu-Service **********/ /********** Menu-Pagination **********/ ul.menu-pagination { text-align: center } ul.menu-pagination.top { margin-bottom: 15px } ul.menu-pagination.bottom { margin-top: 5px } ul.menu-pagination li { list-style-type: none; display: inline } ul.menu-pagination li a { text-decoration: none; display: inline-block; margin-left: -4px; margin-right: 3px; width: 35px; vertical-align: top; height: 35px; font-size: 1.5em; line-height: 35px; font-family: LHFbootCamp; color: #FFFFFF; background: url( '../oppositionXtreme/images/headline-distinction.png' ) left top } ul.menu-pagination li a.previouspage:before { content: '\f100'; font-family: Icons } ul.menu-pagination li a.nextpage:before { content: '\f101'; font-family: Icons } ul.menu-pagination li a:hover { background-image: url( '../oppositionXtreme/images/headline-distinction-hover.png' ) } ul.menu-pagination li a.active { background-image: url( '../oppositionXtreme/images/headline-distinction-active.png' ) } /********** Menu-Pagination **********/ /********** Partner-List **********/ ul.partnerlist { margin-bottom: 10px; margin-top: 10px } ul.partnerlist li { display: inline-block; list-style-type: none; width: 12%; text-align: center; padding: 1em .7em; } ul.partnerlist li img { width: 90% } /********** Partner-List **********/ /********** Social-Links **********/ ul.sociallinks { margin: 10px 0 25px } ul.sociallinks li { list-style-type: none; display: inline-block; vertical-align: top } ul.sociallinks li a { display: block; text-decoration: none; margin-right: 5px} ul.sociallinks li a.socialmediaicon:before { font-family: Icons; color: rgba( 255, 255, 255, .4 ); font-size: 2.3em } ul.sociallinks li a.socialmediaicon.youtube:before { content: '\f166' } ul.sociallinks li a.socialmediaicon.youtube:hover:before { color: #C9302B } ul.sociallinks li a.socialmediaicon.facebook:before { content: '\f082' } ul.sociallinks li a.socialmediaicon.facebook:hover:before { color: #3C5A99 } ul.sociallinks li a.socialmediaicon.googleplus:before { content: '\f0d4' } ul.sociallinks li a.socialmediaicon.googleplus:hover:before { color: #DA4735 } ul.sociallinks li a.socialmediaicon.twitter:before { content: '\f081' } ul.sociallinks li a.socialmediaicon.twitter:hover:before { color: #00ACEE } /********** Social-Links **********/ /********** Menus **********/ /********** Player-UI **********/ #playercontainer { position: relative; width: 100%; padding: 6px 0 } #playercontainer .jp-gui.jp-interface > .inner { width: 1000px; margin: 0 auto; position: relative } #playercontainer ul.jp-controls, #playercontainer .jp-progress, #playercontainer .equalizer.show, #playercontainer .jp-current-time, #playercontainer .jp-volume-bar { display: inline-block; vertical-align: middle } #playercontainer ul.jp-controls { margin-right: 30px; height: 40px; line-height: 40px } #playercontainer ul.jp-controls li { list-style-type: none; display: inline-block } #playercontainer ul.jp-controls li:not(:first-child) { margin-left: -4px } #playercontainer ul.jp-controls li a { text-decoration: none } #playercontainer ul.jp-controls li a:before { content: ''; font-family: Icons; font-size: 1.0em; color: #000000 } #playercontainer ul.jp-controls li a.jp-playlist-show { position: relative; top: 3px } #playercontainer ul.jp-controls li a.jp-playlist-show span { font: 0.8em/18px LHFbootCamp; color: #000000; position: relative; top: -4px; letter-spacing: 2px; margin-right: 30px } #playercontainer ul.jp-controls li a.jp-playlist-show:before { content: '\f039'; margin-right: 8px; font-size: 1.3em } #playercontainer ul.jp-controls li a.jp-previous:before { content: '\f04a' } #playercontainer ul.jp-controls li a.jp-stop:before { content: '\f0c8' } #playercontainer ul.jp-controls li a.jp-play:before { content: '\f16a'; font-size: 2.5em; bottom: -8px } #playercontainer ul.jp-controls li a.jp-pause:before { content: '\f04c'; font-size: 1.8em; bottom: -4px } #playercontainer ul.jp-controls li a.jp-next:before { content: '\f04e' } #playercontainer ul.jp-controls.controls-vol { position: absolute; right: 63px } #playercontainer ul.jp-controls li a.jp-mute:before { content: '\f028'; font-size: 1.4em; width: 35px; display: block } #playercontainer ul.jp-controls li a.jp-unmute:before, #playercontainer ul.jp-controls li a.jp-mute:hover:before { content: '\f026'; font-size: 1.4em; width: 35px; display: block } #playercontainer ul.jp-controls li a.jp-previous:before, #playercontainer ul.jp-controls li a.jp-play:before, #playercontainer ul.jp-controls li a.jp-pause:before { margin-right: 6px } #playercontainer ul.jp-controls li a.jp-play:before, #playercontainer ul.jp-controls li a.jp-pause:before { line-height: 0; position: relative; width: 50px; display: block; text-align: center } #playercontainer ul.jp-controls li a.jp-playlist-show.active:before, #playercontainer ul.jp-controls li a.jp-playlist-show.active span, #playercontainer ul.jp-controls li a.jp-playlist-show:hover:before, #playercontainer ul.jp-controls li a.jp-playlist-show:hover span, #playercontainer ul.jp-controls li a.jp-previous:hover:before, #playercontainer ul.jp-controls li a.jp-stop:hover:before, #playercontainer ul.jp-controls li a.jp-play:hover:before, #playercontainer ul.jp-controls li a.jp-pause:hover:before, #playercontainer ul.jp-controls li a.jp-next:hover:before, #playercontainer ul.jp-controls li a.jp-play:hover:before, #playercontainer ul.jp-controls li a.jp-pause:hover:before { color: #404040 } #playercontainer .jp-playlist { display: none; top: 60px; position: absolute; z-index: 2; background-color: rgba( 16, 16, 16, 0.9 ); width: 100%; padding: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } #playercontainer .jp-playlist ul { width: 1000px; margin: 0 auto } #playercontainer .jp-playlist ul li { list-style-type: none; background: url( '../oppositionXtreme/images/border-bottom-top-white.png' ) left bottom repeat-x; padding: 0 15px } #playercontainer .jp-playlist ul li a { text-decoration: none; display: block; color: #FFFFFF; font: 0.9em/1em LHFbootCamp; letter-spacing: 2px; padding: 5px 0 } #playercontainer .jp-playlist ul li:last-child { background: none } #playercontainer .jp-progress { width: 50%; height: 26px; margin-left: -4px; position: relative; overflow: hidden; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; webkit-box-shadow: 0 0 4px #000; -moz-box-shadow: 0 0 4px #000; box-shadow: 0 0 4px #000 } #playercontainer .jp-progress .jp-seek-bar { position: absolute; top: 0; left: 0; background: #000000; width: 100%; height: 100%; z-index: 1 } #playercontainer .jp-progress .jp-play-bar { position: absolute; top: 0; left: 0; background: url( '../oppositionXtreme/images/load-animation-horizontal-black.gif' ) left top repeat-x; height: 100%; z-index: 2 } #playercontainer .jp-progress .jp_current_track_title { position: absolute; color: #FFFFFF; z-index: 3; margin-top: 5px; padding: 0 15px; font: 0.9em/1em LHFbootCamp; letter-spacing: 2px } #playercontainer .jp-current-time { height: 19px; margin-top: 2px; background: #404040; color: #FFFFFF; padding: 0 7px 0 12px; margin-left: -9px; font: 0.8em/18px LHFbootCamp; letter-spacing: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px } #playercontainer .equalizer { display: none; margin-left: 10px } #playercontainer .jp-volume-bar { background: #000000; width: 100px; height: 8px; overflow: hidden; position: absolute; top: 3px; right: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-top: 13px } #playercontainer .jp-volume-bar:hover { cursor:pointer } #playercontainer .jp-volume-bar .jp-volume-bar-value { background: #404040; height: 100% } /********** Player-UI **********/ /********** Colorbox-UI **********/ #colorbox, #cboxOverlay, #cboxWrapper{ position: absolute; top: 0; left: 0; z-index: 9999 } #cboxWrapper { max-width: none } #cboxOverlay{ position: fixed; width: 100%; height: 100% } #cboxMiddleLeft, #cboxBottomLeft{ clear: left } #cboxContent{ position: relative } #cboxLoadedContent{ overflow: auto; -webkit-overflow-scrolling: touch } #cboxTitle{ margin: 0} #cboxLoadingOverlay, #cboxLoadingGraphic{ position: absolute; top: 0; left: 0; width: 100%; height: 100% } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{ cursor: pointer } .cboxPhoto{ float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic } .cboxIframe{ width: 100%; height: 100%; display: block; border: 0; padding: 0; margin: 0 } #colorbox, #cboxContent, #cboxLoadedContent{ box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box } #cboxOverlay{ background: rgba( 0, 0, 0, .8 ) } #colorbox{ outline: 0 } #cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight, #cboxMiddleLeft, #cboxMiddleRight, #cboxTopCenter, #cboxBottomCenter { } #cboxContent{ background: #000000 } .cboxIframe{ background: #000000 } #cboxError{ padding: 50px; border: 1px solid #111111 } #cboxLoadedContent{ } #cboxTitle{ display: none } #cboxCurrent{ position: absolute; bottom: 0; left: 0; color: #FFFFFF; font-family: LHFbootcamp; background: #000000; padding: 5px 10px } #cboxLoadingOverlay { } #cboxLoadingGraphic { } #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; position: absolute } #cboxPrevious:before, #cboxNext:before, #cboxSlideshow:before, #cboxClose:before { content: ''; font-family: Icons; color: #FFFFFF; font-size: 4em; background: url( '../oppositionXtreme/images/headline-distinction-hover.png' ) left top } #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: 0 } #cboxPrevious:hover:before, #cboxNext:hover:before, #cboxSlideshow:hover:before, #cboxClose:hover:before { background: url( '../oppositionXtreme/images/headline-distinction-active.png' ) left top } #cboxPrevious, #cboxNext { bottom: 50%; margin-bottom: -2em } #cboxSlideshow { bottom: -10px; right: -10px } #cboxSlideshow:before { font-size: 1.2em; padding: 10px } .cboxSlideshow_on #cboxSlideshow:before { content: '\f04c' } .cboxSlideshow_off #cboxSlideshow:before { content: '\f04b' } #cboxPrevious { left: -50px } #cboxPrevious:before { content: '\f104'; padding: 0 20px 0 15px } #cboxNext { right: -50px } #cboxNext:before { content: '\f105'; padding: 0 15px 0 20px } #cboxClose { top: -10px; right: -10px; font-size: .35em } #cboxClose:before { content: '\f056'; padding: 10px 13px } /********** Colorbox-UI **********/ /********** UI-Elements **********/ .ajaxloader { position: fixed; top: 0; left: 0; width: 10px; z-index: 999; height: 3px; background: #fff } .dialog-wrapper { background-color: rgba( 0, 0, 0, .8 ); position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999 } .dialog-inner { position: absolute; width: 800px; left: 50%; margin-left: -400px; background: #000000; padding: 25px; z-index: 1000 } .dialog-inner span.dialog-close { top: -10px; right: -10px; font-size: 1em; position: absolute; cursor: pointer } .dialog-inner span.dialog-close:before { content: '\f056'; padding: 10px 13px; font-family: Icons; color: #FFFFFF; background: url( '../oppositionXtreme/images/headline-distinction-hover.png' ) left top } /********** UI-Elements **********/ /********** SLICK-UI **********/ .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none } .slick-loading .slick-list { /*Loader*/ } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slick-track { position: relative; left: 0; top: 0; display: block } .slick-track:before, .slick-track:after { content: ""; display: table } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { float: left; height: 100%; min-height: 1px; display: none } [dir="rtl"] .slick-slide { float: right } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } /* Arrows */ .slick-prev, .slick-next { position: absolute; cursor: pointer; top: 50%; margin-top: -10px } .slick-prev { left: 0 } .slick-prev:before, .slick-next:before { content: ''; font-family: Icons; color: #FFFFFF; font-size: 4em; background: url( '../oppositionXtreme/images/headline-distinction-hover.png' ) left top } .slick-prev:before { content: '\f104'; padding: 0 20px 0 15px } .slick-next { right: 0 } .slick-next:before { content: '\f105'; padding: 0 15px 0 20px } .slick-prev:hover:before, .slick-next:hover:before { background: url( '../oppositionXtreme/images/headline-distinction-active.png' ) left top } /* Arrows */ /* Dots */ .slick-slider { margin-bottom: 40px } .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100% } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer } .slick-dots li button:hover, .slick-dots li button:focus { outline: none } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1 } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: slick; font-size: 8px; line-height: 0px; text-align: center; color: #FFFFFF; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-dots li.slick-active button:before { color: #FFFFFF; opacity: 0.75 } /* Dots */ /********** SLICK-UI **********/ /********** Media-Queries **********/ @media screen and (max-width: 1020px) { .wrapper > .inner, #playercontainer .jp-playlist ul { width: 100% } #playercontainer .jp-gui.jp-interface > .inner { width: 90%; margin: 0 5% } #content { width: 100%; float: none } #network { width: 100%; float: none; margin-top: 30px } #network .block { display: inline-block; width: 20%; vertical-align: top; margin-left: -4px } #network .block.weiteres { margin-right: 5% } #network .block.netzwerk { margin-right: 10% } #network .block.voe { margin-right: 5% } #playercontainer .jp-volume-bar { display: none !important } #playercontainer ul.jp-controls.controls-vol { display: none } #playercontainer .equalizer.show { display: none !important } } @media screen and (max-width: 950px) { ul.menu-level-one li a { margin-right: 1px; padding-right: 1px } ul.menu-level-one li a span { padding: 0 3px } ul.menu-level-one li ul { display: none } ul.menu-level-one li:hover ul { display: none } } @media screen and (max-width: 900px) { #network .block { width: 45% !important; margin: 0 2.2% !important } .img.responsive.imgtext div.innerheadline { position: relative; width: 100% } } @media screen and (max-width: 800px) { .dialog-inner { width: 90%; padding: 0 5%; left: 0; margin-left: 0 } } @media screen and (max-width: 700px) { .box { border-spacing: 0px; border-collapse: collapse; margin-bottom: 15px } .box .column { display: block; margin-bottom: 15px } .box .column.two, .box .column.three, .box .column.four { width: 100% } .slick-dots { display: none !important } #playercontainer .jp-progress { width: 100% } #playercontainer .jp-current-time { display: none !important } } @media screen and (max-width: 550px) { a.logo { margin-left: 0 } a.logo img { width: 90% } .fanwallwrapper .fanwallitem { width: 100%; margin: 0 0 7px; position: relative } table.dates tr td, table.dates tr th { font-size: .8em } .img.responsive.imgtext div.innertext { position: relative; width: 100% } } @media screen and (max-width: 400px) { ul.sociallinks { margin-left: 5% } #network .block { display: block; width: 90% !important; margin: 0 5% !important } #bioPage .tab > img { width: 20px } #bioPage .tab > span { font-size: .9em } } @media screen and (max-width: 350px) { a.fwsc { width: 90% } #bioPage .tab > img { width: 15px } } /********** Media-Queries **********/ body { background: #000000 url( '../oppositionXtreme/images/body-bg.jpg' ) center center no-repeat; background-attachment: fixed; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover } .wrapper > .inner { background-color: #111111; border: 1px solid #282828; margin: 70px auto; padding-bottom: 30px; position: relative } .wrapper > .inner .voe { position: absolute; z-index: 20; margin-top: -170px; right: 20px; width: auto; font-size: 35px; text-align: right } .wrapper > .inner .voe h2 { color: rgba( 255, 255, 255, .5 ) !important; font-size: 50px; } .wrapper > .inner .text { padding: 0 30px } .wrapper > .inner .text > p, .wrapper > .inner .text > h2 { color: #D3D3D3 !important } .wrapper > .inner .text.intro { margin-top: -200px; position: relative; z-index: 20 } a.logo { margin-left: 0 } a.logo img { width: 100%; position: relative; z-index: 10 } a.fwsc { padding-top: 20px } .oppofont { font-family: ImpactLabel; font-size: 2em; line-height: .8em; margin-left: -10px; display: block } .oppofont.norm { margin-left: -2px; line-height: .6em } .img.xtremebox { margin-bottom: 20px } div.dark, div.white { background-color: #000000; padding: 30px } div.dark { margin-top: 30px } div.white { background-color: #FFFFFF } .productimg { width: 70%; margin: 30px auto } .productimg.boxset { width: 100% } table { margin-bottom: 15px; color: #111111 !important } table tr:nth-child(odd) { background-color: transparent } table tr:hover td { background-color: transparent } table tr th { background-color: #000000; color: #D3D3D3 !important } .imgleft, .productright { width: 46%; margin: 0; margin-left: -4px; display: inline-block; vertical-align: top; padding: 5% 2% } .imgleft { width: 40%; padding: 5% } .nav { position: absolute; top: 20px; right: 15px; z-index: 30 } .nav a { font-family: LHFbootcamp; text-decoration: none; font-size: 1.3em; padding: 0 10px } .box .column.plain { background: none; border: 1px solid #000000; webkit-box-shadow: 0 0 6px #000; -moz-box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000 } .box .column.plain { border: none; -moz-box-shadow: 0 0 0 #FFF; -webkit-box-shadow: 0 0 0 #FFF; box-shadow: 0 0 0 #FFF } ul.buylinks li.break { color: #111111 !important } a.opposition2015link { text-decoration: none; display: block; background-color: #F40000 } a.opposition2015link > img { max-width: 100% } a.opposition2015link > img, a.opposition2015link > div { display: inline-block; vertical-align: middle } a.opposition2015link > div > h2 { line-height: 1em !important; font-size: 1.9em; padding-left: 30px } @media screen and (max-width: 1000px) { .wrapper > .inner { border: none; margin: 0 auto } .wrapper > .inner .voe { margin-top: -155px } .wrapper > .inner .voe > h2 { font-size: 30px !important } a.opposition2015link > div > h2 { font-size: 1.4em !important } } @media screen and (max-width: 900px) { a.opposition2015link > div > h2 { font-size: 1em !important } } @media screen and (max-width: 800px) { a.logo img { padding-top: 60px } .wrapper > .inner .text.intro { margin-top: -100px } .wrapper > .inner .voe { margin-top: -140px; right: 0; padding-left: 30px; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left !important } .wrapper > .inner .voe > h2 { font-size: 25px !important } a.opposition2015link > img { width: 100% } a.opposition2015link > div > h2 { margin-top: 20px; margin-bottom: 20px } } @media screen and (max-width: 600px) { .oppofont { font-size: 1.5em; margin-left: -2px } .box .column .inner { padding-left: 0; padding-right: 0 } } @media screen and (max-width: 500px) { a.logo img { padding-top: 70px } .wrapper > .inner .text.intro { margin-top: -30px } .wrapper > .inner .voe { margin-top: -70px } } @media screen and (max-width: 450px) { .oppofont { font-size: 1.3em } } @media screen and (max-width: 400px) { .oppofont { font-size: 1.1em; margin-left: -2px } } ul.buylinks.columnbottom { position: relative; bottom: 0; width: 100%; padding: 10px; -mox-box-sizing: border-box; -webit-box-sizing: border-box; box-sizing: border-box } ul.buylinks { } ul.buylinks li { display: inline-block; vertical-align: top; margin: 3px 1px } ul.buylinks li a { display: block; height: 25px; background-repeat: no-repeat; background-position: center center; padding: 5px 6px; background-color: #F0F0F0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px } ul.buylinks li a:hover { background-color: #000000 } ul.buylinks li.amazon a { width: 83px; background-image: url( '../oppositionXtreme/images/buy/amazon.png' ) } ul.buylinks li.amazon a:hover { background-image: url( '../oppositionXtreme/images/buy/amazonActive.png' ) } ul.buylinks li.emp a { width: 108px; background-image: url( '../oppositionXtreme/images/buy/emp.png' ) } ul.buylinks li.emp a:hover { background-image: url( '../oppositionXtreme/images/buy/empActive.png' ) } ul.buylinks li.weltbild a { width: 123px; background-image: url( '../oppositionXtreme/images/buy/weltbild.png' ) } ul.buylinks li.weltbild a:hover { background-image: url( '../oppositionXtreme/images/buy/weltbildActive.png' ) } ul.buylinks li.weltbildde a { width: 123px; background-image: url( '../oppositionXtreme/images/buy/weltbild.png' ) } ul.buylinks li.weltbildde a:hover { background-image: url( '../oppositionXtreme/images/buy/weltbildActive.png' ) } ul.buylinks li.jpc a { width: 65px; background-image: url( '../oppositionXtreme/images/buy/jpc.png' ) } ul.buylinks li.jpc a:hover { width: 65px; background-image: url( '../oppositionXtreme/images/buy/jpcActive.png' ) } ul.buylinks li.mediamarkt a { width: 146px; background-image: url( '../oppositionXtreme/images/buy/mediamarkt.png' ) } ul.buylinks li.mediamarkt a:hover { width: 146px; background-image: url( '../oppositionXtreme/images/buy/mediamarktActive.png' ) } ul.buylinks li.mueller a { width: 128px; background-image: url( '../oppositionXtreme/images/buy/mueller.png' ) } ul.buylinks li.mueller a:hover { width: 128px; background-image: url( '../oppositionXtreme/images/buy/muellerActive.png' ) } ul.buylinks li.saturn a { width: 101px; background-image: url( '../oppositionXtreme/images/buy/saturn.png' ) } ul.buylinks li.saturn a:hover { width: 101px; background-image: url( '../oppositionXtreme/images/buy/saturnActive.png' ) } ul.buylinks li.wom a { width: 56px; background-image: url( '../oppositionXtreme/images/buy/wom.png' ) } ul.buylinks li.wom a:hover { width: 56px; background-image: url( '../oppositionXtreme/images/buy/womActive.png' ) } ul.buylinks li.exlibris a { width: 104px; background-image: url( '../oppositionXtreme/images/buy/exlibris.png' ) } ul.buylinks li.exlibris a:hover { width: 104px; background-image: url( '../oppositionXtreme/images/buy/exlibrisActive.png' ) } ul.buylinks li.itunes a { width: 69px; background-image: url( '../oppositionXtreme/images/buy/itunes.png' ) } ul.buylinks li.weltbildch a { width: 122px; background-image: url( '../oppositionXtreme/images/buy/weltbildch.png' ) } ul.buylinks li.weltbildch a:hover { background-image: url( '../oppositionXtreme/images/buy/weltbildchActive.png' ) } ul.buylinks li.rubydon a { width: 81px; background-image: url( '../oppositionXtreme/images/buy/rubydon.png' ) } ul.buylinks li.rubydon a:hover { background-image: url( '../oppositionXtreme/images/buy/rubydonActive.png' ) } ul.buylinks li.hds a { width: 68px; background-image: url( '../oppositionXtreme/images/buy/hds.png' ) } ul.buylinks li.hds a:hover { background-image: url( '../oppositionXtreme/images/buy/hdsActive.png' ) } ul.buylinks li.fws a { width: 57px; background-image: url( '../oppositionXtreme/images/buy/fws.png' ) } ul.buylinks li.fws a:hover { background-image: url( '../oppositionXtreme/images/buy/fwsActive.png' ) } ul.buylinks li.rks a { width: 161px; background-image: url( '../oppositionXtreme/images/buy/rks.png' ) } ul.buylinks li.rks a:hover { background-image: url( '../oppositionXtreme/images/buy/rksActive.png' ) } ul.buylinks li.googleplay a { width: 107px; background-image: url( '../oppositionXtreme/images/buy/googleplay.png' ) } ul.buylinks li.googleplay a:hover { background-image: url( '../oppositionXtreme/images/buy/googleplayActive.png' ) } ul.buylinks li.sony a { width: 115px; background-image: url( '../oppositionXtreme/images/buy/sony.png' ) } ul.buylinks li.sony a:hover { background-image: url( '../oppositionXtreme/images/buy/sonyActive.png' ) } ul.buylinks li.break { display: block; background: none; color: #F0F0F0; font-family: LhFbootcamp; font-size: 1.5em; margin-top: 30px }