/* Theme Name: After The Disco Author: Columbia Records Digital Production Author URI: http://colrec.com/ Description: The Broken Bells theme for their 2014 LP After The Disco Updated: 2.25.15 */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}/* HTML5 display-role reset for older browsers */article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;} /* == malihu jquery custom scrollbars plugin == version: 2.8.3 author: malihu (http://manos.malihu.gr) plugin home: http://manos.malihu.gr/jquery-custom-content-scroller */ /* Copyright 2010-2013 Manos Malihutsakis This program is free software: you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation, either version 3 of the License, or any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this program. If not, see http://www.gnu.org/licenses/lgpl.html. */ .mCSB_container{width:auto;margin-right:30px;overflow:hidden;}.mCSB_container.mCS_no_scrollbar{margin-right:0;}.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{margin-right:30px;}.mCustomScrollBox>.mCSB_scrollTools{width:16px;height:100%;top:0;right:0;}.mCSB_scrollTools .mCSB_draggerContainer{position:absolute;top:0;left:0;bottom:0;right:0;height:auto;}.mCSB_scrollTools a+.mCSB_draggerContainer{margin:20px 0;}.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 auto;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}.mCSB_scrollTools .mCSB_dragger{cursor:pointer;width:100%;height:30px;}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;height:100%;margin:0 auto;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;text-align:center;}.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_buttonDown{display:block;position:relative;height:20px;overflow:hidden;margin:0 auto;cursor:pointer;}.mCSB_scrollTools .mCSB_buttonDown{top:100%;margin-top:-40px;}/* horizontal scrollbar */.mCSB_horizontal>.mCSB_container{height:auto;margin-right:0;margin-bottom:30px;overflow:hidden;}.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{margin-bottom:0;}.mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{margin-right:0;margin-bottom:30px;}.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{width:100%;height:16px;top:auto;right:auto;bottom:0;left:0;overflow:hidden;}.mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{margin:0 20px;}.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{width:100%;height:2px;margin:7px 0;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{width:30px;height:100%;}.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:100%;height:4px;margin:6px auto;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{display:block;position:relative;width:20px;height:100%;overflow:hidden;margin:0 auto;cursor:pointer;float:left;}.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{margin-left:-40px;float:right;}.mCustomScrollBox{-ms-touch-action:none;/*MSPointer events - direct all pointer events to js*/}/* default scrollbar colors and backgrounds (default theme) */.mCustomScrollBox>.mCSB_scrollTools{opacity:0.75;filter:alpha(opacity=75);-ms-filter:alpha(opacity=75);/* old ie */}.mCustomScrollBox:hover>.mCSB_scrollTools{opacity:1;filter:alpha(opacity=100);-ms-filter:alpha(opacity=100);/* old ie */}.mCSB_scrollTools .mCSB_draggerRail{background:#000;/* rgba fallback */background:rgba(0,0,0,0.4);filter:alpha(opacity=40);-ms-filter:alpha(opacity=40);/* old ie */}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background:#fff;/* rgba fallback */background:rgba(255,255,255,0.75);filter:alpha(opacity=75);-ms-filter:alpha(opacity=75);/* old ie */}.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background:rgba(255,255,255,0.85);filter:alpha(opacity=85);-ms-filter:alpha(opacity=85);/* old ie */}.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background:rgba(255,255,255,0.9);filter:alpha(opacity=90);-ms-filter:alpha(opacity=90);/* old ie */}.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight{background-image:url(mCSB_buttons.png);background-repeat:no-repeat;opacity:0.4;filter:alpha(opacity=40);-ms-filter:alpha(opacity=40);/* old ie */}.mCSB_scrollTools .mCSB_buttonUp{background-position:0 0;/* sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) */}.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -20px;/* sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark) */}.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -40px;/* sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark) */}.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -56px;/* sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark) */}.mCSB_scrollTools .mCSB_buttonUp:hover,.mCSB_scrollTools .mCSB_buttonDown:hover,.mCSB_scrollTools .mCSB_buttonLeft:hover,.mCSB_scrollTools .mCSB_buttonRight:hover{opacity:0.75;filter:alpha(opacity=75);-ms-filter:alpha(opacity=75);/* old ie */}.mCSB_scrollTools .mCSB_buttonUp:active,.mCSB_scrollTools .mCSB_buttonDown:active,.mCSB_scrollTools .mCSB_buttonLeft:active,.mCSB_scrollTools .mCSB_buttonRight:active{opacity:0.9;filter:alpha(opacity=90);-ms-filter:alpha(opacity=90);/* old ie */}/*scrollbar themes*//*dark (dark colored scrollbar)*/.mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{background:#000;/* rgba fallback */background:rgba(0,0,0,0.15);}.mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background:#000;/* rgba fallback */background:rgba(0,0,0,0.75);}.mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background:rgba(0,0,0,0.85);}.mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background:rgba(0,0,0,0.9);}.mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0;}.mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px;}.mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px;}.mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px;}/*light-2*/.mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{width:4px;background:#fff;/* rgba fallback */background:rgba(255,255,255,0.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}.mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;background:#fff;/* rgba fallback */background:rgba(255,255,255,0.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{width:100%;height:4px;margin:6px 0;}.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:100%;height:4px;margin:6px auto;}.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background:rgba(255,255,255,0.85);}.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background:rgba(255,255,255,0.9);}.mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px 0;}.mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -20px;}.mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -40px;}.mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -56px;}/*dark-2*/.mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{width:4px;background:#000;/* rgba fallback */background:rgba(0,0,0,0.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;background:#000;/* rgba fallback */background:rgba(0,0,0,0.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{width:100%;height:4px;margin:6px 0;}.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:100%;height:4px;margin:6px auto;}.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background:rgba(0,0,0,0.85);}.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background:rgba(0,0,0,0.9);}.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px 0;}.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -20px;}.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -40px;}.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -56px;}/*light-thick*/.mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{width:4px;background:#fff;/* rgba fallback */background:rgba(255,255,255,0.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;background:#fff;/* rgba fallback */background:rgba(255,255,255,0.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{width:100%;height:4px;margin:6px 0;}.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:100%;height:6px;margin:5px auto;}.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background:rgba(255,255,255,0.85);}.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background:rgba(255,255,255,0.9);}.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px 0;}.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -20px;}.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -40px;}.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -56px;}/*dark-thick*/.mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{width:4px;background:#000;/* rgba fallback */background:rgba(0,0,0,0.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;background:#000;/* rgba fallback */background:rgba(0,0,0,0.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{width:100%;height:4px;margin:6px 0;}.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:100%;height:6px;margin:5px auto;}.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background:rgba(0,0,0,0.85);}.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background:rgba(0,0,0,0.9);}.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px 0;}.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -20px;}.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -40px;}.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -56px;}/*light-thin*/.mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{background:#fff;/* rgba fallback */background:rgba(255,255,255,0.1);}.mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:2px;}.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{width:100%;}.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:100%;height:2px;margin:7px auto;}/*dark-thin*/.mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{background:#000;/* rgba fallback */background:rgba(0,0,0,0.15);}.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:2px;background:#000;/* rgba fallback */background:rgba(0,0,0,0.75);}.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{width:100%;}.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:100%;height:2px;margin:7px auto;}.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background:rgba(0,0,0,0.85);}.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background:rgba(0,0,0,0.9);}.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0;}.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px;}.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px;}.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px;} @font-face { font-family: 'After The Disco'; src:url('fonts/After The Disco.eot'); src:url('fonts/After The Disco.eot?#iefix') format('embedded-opentype'), url('fonts/After The Disco.ttf') format('truetype'), url('fonts/After The Disco.woff') format('woff'), url('fonts/After The Disco.svg#After The Disco') format('svg'); font-weight: normal; font-style: normal; } html { height: 100%; } body { height: 100%; font-family: 'Roboto', sans-serif; font-weight: 300; color: #FFF; background: url('images/default-background.jpg') center center; overflow-y: hidden; } a img { border: none; } #container { position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; bottom: 0px; perspective: 1000; -ms-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -webkit-perspective: 1000; } #container.logged-in { top: 25px; } #loading { position: absolute; z-index: 200; left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; opacity: 1; filter: alpha(opacity=100); transition: opacity 1s, filter 1s; -ms-transition: opacity 1s, -ms-filter 1s; -moz-transition: opacity 1s, -moz-filter 1s; -o-transition: opacity 1s, -o-filter 1s; -webkit-transition: opacity 1s, -webkit-filter 1s; } #loading.hide { opacity: 0; filter: alpha(opacity=0); -webkit-filter: blur(20px); } #loading img { position: absolute; z-index: 210; left: 0px; top: 0px; width: 100%; height: 100%; } #loading .text { position: absolute; z-index: 220; left: 20px; top: 40px; font-size: 16px; } #background { position: fixed; z-index: 100; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; } #background .video { position: absolute; z-index: 110; left: 0px; top: 0px; width: 100%; height: 100%; background: url('images/default-background.jpg') center center no-repeat fixed; background-size: cover; } #background .video iframe { position: absolute; z-index: 111; left: 0px; top: 0px; width: 100%; height: 100%; } #background .overlay { position: absolute; z-index: 130; left: 0px; top: 0px; width: 100%; height: 100%; background: url('images/dots-overlay.png'); } #navigation { position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 50px; min-width: 1000px; } #navigation .background { position: absolute; z-index: 310; left: 0px; top: 0px; width: 100%; height: 100%; background: #000; opacity: 0.2; filter: alpha(opacity=20); } #navigation .menu-navigation-container { position: absolute; z-index: 330; left: 0px; top: 0px; width: 100%; height: 100%; list-style: none; } #navigation .menu-navigation-container .menu { position: absolute; z-index: 330; left: 0px; top: 0px; width: 100%; height: 100%; text-align: center; } #navigation .menu-navigation-container .menu .menu-item { position: relative; display: inline-block; height: 34px; margin: 8px 4px; } #navigation .menu-navigation-container .menu .menu-item a { position: relative; top: 0px; display: inline-block; height: 34px; padding: 0px 16px; line-height: 34px; font-size: 26px; color: #FFF; text-transform: uppercase; text-decoration: none; vertical-align: middle; transition: top 300ms, background 300ms; -ms-transition: top 300ms, background 300ms; -moz-transition: top 300ms, background 300ms; -o-transition: top 300ms, background 300ms; -webkit-transition: top 300ms, background 300ms; } #navigation .menu-navigation-container .menu .menu-item a:before { position: absolute; left: -1px; top: -8px; width: 0px; height: 0px; content: ''; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #ee407c; opacity: 0; filter: alpha(opacity=0); transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: opacity 300ms; -ms-transition: opacity 300ms; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; -webkit-transition: opacity 300ms; } html.lte-ie9 #navigation .menu-navigation-container .menu .menu-item a:before { display: none; } #navigation .menu-navigation-container .menu .menu-item.current-menu-item a:before, #navigation .menu-navigation-container .menu .menu-item a:hover:before { opacity: 1; filter: alpha(opacity=100); } #navigation .menu-navigation-container .menu .menu-item.current-menu-item a, #navigation .menu-navigation-container .menu .menu-item a:hover { top: 7px; background: #ee407c; } #navigation .menu-navigation-container .menu .menu-item .sub-menu { position: absolute; top: 100%; left: 0px; margin-top: 0px; opacity: 0; filter: alpha(opacity=0); transition: 300ms margin-top, 300ms opacity; -ms-transition: 300ms margin-top, 300ms opacity; -moz-transition: 300ms margin-top, 300ms opacity; -o-transition: 300ms margin-top, 300ms opacity; -webkit-transition: 300ms margin-top, 300ms opacity; } #navigation .menu-navigation-container .menu .menu-item:hover .sub-menu { margin-top: 7px; opacity: 1; filter: alpha(opacity=100); } #navigation .menu-navigation-container .menu .menu-item.broken-bells a { font-family: 'After The Disco'; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; font-size: 35px; -webkit-text-stroke: 0.3px; } #navigation .menu-navigation-container .menu .menu-item.broken-bells a:before { border: none; } #navigation .menu-navigation-container .menu .menu-item.broken-bells a { top: 0px !important; background: transparent !important; } #jukebox { position: absolute; z-index: 320; left: 50%; top: -250px; margin-left: -200px; width: 400px; height: 400px; background: url('images/ie8-sphere.png') center top no-repeat; transition: top 500ms; -ms-transition: top 500ms; -moz-transition: top 500ms; -o-transition: top 500ms; -webkit-transition: top 500ms; } #jukebox.playing { top: -202px; } #jukebox .title { position: absolute; left: 40px; top: 252px; right: 40px; height: 38px; background: rgba(0, 0, 0, 0.2); text-align: center; text-transform: uppercase; line-height: 30px; opacity: 0; filter: alpha(opacity=0); transition: 500ms opacity; -ms-transition: 500ms opacity; -moz-transition: 500ms opacity; -o-transition: 500ms opacity; -webkit-transition: 500ms opacity; border-radius: 0px 0px 50px 50px; -ms-border-radius: 0px 0px 50px 50px; -moz-border-radius: 0px 0px 50px 50px; -o-border-radius: 0px 0px 50px 50px; -webkit-border-radius: 0px 0px 50px 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #jukebox.playing .title { opacity: 1; filter: alpha(opacity=100); } #jukebox .progress { position: absolute; left: 70px; top: 290px; right: 70px; height: 2px; background: #d5014e; opacity: 0; filter: alpha(opacity=0); transition: 500ms opacity; -ms-transition: 500ms opacity; -moz-transition: 500ms opacity; -o-transition: 500ms opacity; -webkit-transition: 500ms opacity; } #jukebox.playing .progress { opacity: 1; filter: alpha(opacity=100); } #jukebox .progress .progress-inner { position: absolute; left: 0px; top: 0px; height: 100%; width: 0%; background: #FFF; } #jukebox .play-pause { position: absolute; left: 50%; top: 300px; width: 40px; height: 40px; margin-left: -20px; border: 2px solid #FFF; opacity: 0.5; filter: alpha(opacity=50); border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; transition: 300ms opacity; -ms-transition: 300ms opacity; -moz-transition: 300ms opacity; -o-transition: 300ms opacity; -webkit-transition: 300ms opacity; } #jukebox .play-pause:hover { opacity: 0.8; filter: alpha(opacity=80); } #jukebox .play-pause div { position: absolute; left: 50%; top: 50%; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 23px solid #FFF; margin-left: -8px; margin-top: -13px; } #jukebox.playing .play-pause div { border: none; border-left: 5px solid #FFF; border-right: 5px solid #FFF; height: 23px; width: 6px; margin-top: -11px; } #jukebox .previous { position: absolute; left: 50%; top: 305px; width: 30px; height: 30px; margin-left: -54px; border: 2px solid #FFF; opacity: 0.5; filter: alpha(opacity=50); border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; transition: 300ms opacity; -ms-transition: 300ms opacity; -moz-transition: 300ms opacity; -o-transition: 300ms opacity; -webkit-transition: 300ms opacity; } #jukebox .previous:hover { opacity: 0.8; filter: alpha(opacity=80); } #jukebox .previous .t-1 { position: absolute; left: 50%; top: 50%; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 12px solid #FFF; margin-left: -12px; margin-top: -7px; } #jukebox .previous .t-2 { position: absolute; left: 50%; top: 50%; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 12px solid #FFF; margin-left: -4px; margin-top: -7px; } #jukebox .next { position: absolute; left: 50%; top: 305px; width: 30px; height: 30px; margin-left: 24px; border: 2px solid #FFF; opacity: 0.5; filter: alpha(opacity=50); border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; transition: 300ms opacity; -ms-transition: 300ms opacity; -moz-transition: 300ms opacity; -o-transition: 300ms opacity; -webkit-transition: 300ms opacity; } #jukebox .next:hover { opacity: 0.8; filter: alpha(opacity=80); } #jukebox .next .t-1 { position: absolute; left: 50%; top: 50%; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #FFF; margin-left: -8px; margin-top: -7px; } #jukebox .next .t-2 { position: absolute; left: 50%; top: 50%; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #FFF; margin-left: 0px; margin-top: -7px; } #content { position: absolute; z-index: 200; left: 50px; top: 180px; right: 0px; bottom: 65px; min-width: 1000px; opacity: 1; filter: alpha(opacity=100); transition: opacity 1s, filter 1s; -ms-transition: opacity 1s, -ms-filter 1s; -moz-transition: opacity 1s, -moz-filter 1s; -o-transition: opacity 1s, -o-filter 1s; -webkit-transition: opacity 1s, -webkit-filter 1s; } #content.hide { opacity: 0; filter: alpha(opacity=0); -webkit-filter: blur(20px); } #content h1 { position: absolute; z-index: 220; left: 0px; top: 0px; right: 50px; height: 50px; overflow: hidden; padding-left: 15px; background: rgba(0, 0, 0, 0.4); border-bottom: 1px solid #ee407c; line-height: 50px; font-size: 30px; font-weight: 400; text-transform: uppercase; } #content .bottom-line { position: absolute; z-index: 220; left: 0px; bottom: 0px; right: 50px; border-bottom: 1px solid #ee407c; } #posts { position: absolute; z-index: 210; top: 0px; left: 0px; width: 100%; bottom: 0px; } #posts .posts-inner { position: absolute; left: 0px; top: 50px; right: 50px; bottom: 0px; overflow: hidden; } #posts .post { position: relative; border-top: 1px solid #3a3a3a; margin-top: 20px; margin-bottom: 50px; } #content.page #posts .post { border-top: none; } #posts .post.last { margin-bottom: 70px; } #posts .post .post-meta { position: absolute; left: 0px; top: 0px; width: 255px; } #posts .post .post-meta .post-date { height: 35px; font-size: 14px; line-height: 35px; padding-left: 10px; background: #3a3a3a; text-transform: uppercase; } #posts .post .post-meta .post-share { padding: 15px; font-size: 14px; text-transform: uppercase; } #posts .post .post-meta .post-share a { font-family: 'After The Disco'; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; color: #FFF; text-decoration: none; font-size: 28px; vertical-align: middle; } #posts .post .post-body { position: relative; margin-left: 270px; font-size: 18px; } #posts .post .post-body .post-title { font-size: 24px; font-weight: 700; line-height: 30px; padding: 5px 0px; text-transform: uppercase; } #posts .post .post-body a { font-weight: 400; color: #ee407c; } #posts .post .post-body p { padding: 5px 0px; } #posts .post .post-body span.embed-youtube { text-align: left !important; } #posts .post img { max-width: 100%; } #posts .post .post-body iframe { max-width: 100%; } #posts .post .post-body .embed-vimeo { text-align: left !important; } #posts .mCSB_container { margin-right: 0px; } #posts .mCustomScrollBox>.mCSB_scrollTools { width: 11px; opacity: 1; filter: alpha(opacity=100); } #posts .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 11px; background: #ee407c; border-radius: 0px; margin: 0px; } #posts .mCSB_scrollTools .mCSB_draggerRail { width: 3px; background: #de7b9d; margin: 0px; margin-left: 8px; } #content.home { left: 0px; top: auto; height: 150px; } #content.home .girl { position: absolute; left: 50%; bottom: -65px; margin-left: -212px; width: 339px; height: 555px; background: url('images/girl.png'); } #content.home .posts { width: 963px; margin: auto; } #content.home .posts .post { position: relative; float: left; display: block; width: 271px; height: 110px; padding: 20px; overflow: hidden; } #content.home .posts .post.middle { margin: 0px 15px; height: 150px; top: -40px; } #content.home .posts .post .background { position: absolute; z-index: 210; left: 0px; top: 0px; width: 100%; height: 100%; background: #000; opacity: 0.7; filter: alpha(opacity=70); } #content.home .posts .post .background div { position: absolute; z-index: 210; left: 0px; bottom: 0px; width: 100%; height: 65px; background: #FFF; opacity: 0.05; filter: alpha(opacity=5); } #content.home .posts .post .post-inner { position: relative; z-index: 220; height: 100%; width: 100%; } #content.home .posts .post .post-media { position: absolute; left: -5px; top: 0px; height: 110px; width: 150px; } #content.home .posts .post.middle .post-media { height: 150px; } #content.home .posts .post.middle .itunes { bottom: 30px; } #content.home .posts .post .post-title { position: absolute; left: 155px; top: 0px; height: 80px; width: 121px; font-size: 16px; font-weight: 400; text-transform: uppercase; color: #FFF; overflow: hidden; } #content.home .posts .post .read-more { position: absolute; left: 155px; bottom: 0px; display: block; height: 25px; width: 111px; padding-right: 10px; background: #484848; color: #FFF; text-align: center; line-height: 25px; font-size: 13px; font-weight: 700; text-decoration: none; } #content.home .posts .post .read-more:before { content: ''; position: absolute; right: 15px; top: 7px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #FFF; } #content.home .posts .post .post-title.no-media { left: 0px; width: 280px; text-align: center; } #content.home .posts .post .read-more.no-media { left: 80px; width: 111px; } #content.index #posts .posts-inner { background: rgba(0, 0, 0, 0.2); } #content.gallery { right: 50px; } #content.gallery h1, #content.gallery .bottom-line { right: 0px; } #content.gallery .controls { float: right; margin-top: 10px; margin-right: 20px; } #content.gallery .controls .previous { position: relative; display: block; float: right; width: 33px; height: 30px; background: #5a5a5a; margin-right: 5px; } #content.gallery .controls .previous div { position: absolute; left: 8px; top: 7px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 15px solid #FFF; } #content.gallery .controls .count { display: block; float: right; width: 50px; height: 30px; padding: 0px 10px; text-align: center; background: #383838; font-size: 20px; font-weight: 300; line-height: 30px; } #content.gallery .controls .count .current { display: inline-block; } #content.gallery .controls .next { position: relative; display: block; float: right; width: 33px; height: 30px; background: #5a5a5a; margin-left: 5px; } #content.gallery .controls .next div { position: absolute; right: 8px; top: 7px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 15px solid #FFF; } #content.gallery .gallery-items { position: absolute; left: 0%; top: 60px; width: 100%; bottom: 0px; transition: left 500ms; -ms-transition: left 500ms; -moz-transition: left 500ms; -o-transition: left 500ms; -webkit-transition: left 500ms; } #content.gallery .gallery-items .gallery-item { position: absolute; left: 0%; top: 0px; width: 100%; height: 100%; } #content.gallery .gallery-items .gallery-item .cover { position: absolute; z-index: 210; left: 0px; top: 0px; width: 100%; height: 100%; background: #000; opacity: 0.8; filter: alpha(opacity=80); transition: opacity 500ms; -ms-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; -webkit-transition: opacity 500ms; } #content.gallery .gallery-items .gallery-item.current .cover { opacity: 0; filter: alpha(opacity=0); } #content.gallery.video h1 .title { position: absolute; left: 15px; top: 0px; right: 170px; bottom: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #content.gallery.video .gallery-items .video .play { position: absolute; z-index: 230; left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; border: 3px solid #FFF; border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; opacity: 0.7; filter: alpha(opacity=70); transition: opacity 200ms; -ms-transition: opacity 200ms; -moz-transition: opacity 200ms; -o-transition: opacity 200ms; -webkit-transition: opacity 200ms; } #content.gallery.video .gallery-items .video .play div { position: absolute; left: 30px; top: 20px; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 50px solid #FFF; } #content.gallery.video .gallery-items .video .play:hover { opacity: 1; filter: alpha(opacity=100); } #content.gallery.video .gallery-items .video .embed { position: absolute; z-index: 220; left: 0px; top: 0px; width: 100%; height: 100%; } #content.gallery.video .gallery-items .video .embed iframe { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } #content.four-oh-four { right: 50px; font-size: 40px; text-align: center; opacity: 0.7; filter: alpha(opacity=70); text-transform: uppercase; width: 700px; min-width: 700px; height: 500px; left: 50%; right: auto; margin-left: -350px; top: 50%; bottom: auto; margin-top: -200px; } #content.four-oh-four .large { font-size: 200px; margin-bottom: 30px; font-weight: 700; } #content.four-oh-four .lyrics { display: inline-block; text-align: left; } #content.four-oh-four .lyrics .right { text-align: right; margin-top: 30px; } #footer { position: absolute; z-index: 300; left: 0px; bottom: 0px; width: 100%; height: 55px; } #footer .background { position: absolute; z-index: 310; left: 0px; top: 0px; width: 100%; height: 100%; background: #000; opacity: 0.3; filter: alpha(opacity=30); } #footer .inner { position: relative; z-index: 320; width: 1000px; height: 100%; margin: auto; } #footer .inner .menu-buy-container { position: relative; float: left; margin-top: 12px; height: 116px; background: url('images/buy.png') top left no-repeat; transition: top 300ms; -ms-transition: top 300ms; -moz-transition: top 300ms; -o-transition: top 300ms; -webkit-transition: top 300ms; } #footer .inner .menu-buy-container:hover { top: -27px; } #footer .inner .menu-buy-container a { position: relative; display: block; padding: 0px 10px; margin-left: 89px; margin-bottom: 3px; color: #FFF; text-decoration: none; border: 1px solid #FFF; border-left: none; height: 30px; font-size: 14px; line-height: 30px; text-align: center; font-weight: 700; background: rgb(30, 30, 30); background: rgba(0, 0, 0, 0.7); padding-right: 28px; } #footer .inner .menu-buy-container a:before { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border: 1px solid #FFF; content: ''; border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; } #footer .inner .menu-buy-container a:after { position: absolute; top: 13px; right: 13px; width: 0px; height: 0px; content: ''; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid #FFF; } #footer .inner .legal { float: left; padding-top: 11px; padding-left: 10px; font-size: 9px; color: #888; line-height: 11px; } #footer .inner .legal b { font-weight: 700; } #footer .inner .legal a { color: #888; text-decoration: none; transition: color 200ms; -ms-transition: color 200ms; -moz-transition: color 200ms; -o-transition: color 200ms; -webkit-transition: color 200ms; } #footer .inner .legal .underline { text-decoration: underline; } #footer .inner .legal a:hover { color: #ee407c; } #footer .inner .menu-socials-container { position: absolute; top: 12px; right: 20px; } #footer .inner .menu-socials-container li { display: inline-block; } #footer .inner .menu-socials-container li a { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; margin-left: 5px; border: 1px solid #FFF; border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; font-family: 'After The Disco'; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; color: #FFF; text-decoration: none; font-size: 28px; vertical-align: middle; opacity: 0.6; filter: alpha(opacity=60); transition: opacity 300ms; -ms-transition: opacity 300ms; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; -webkit-transition: opacity 300ms; } #footer .inner .menu-socials-container li a:hover { opacity: 1; filter: alpha(opacity=100); } #footer .inner .menu-socials-container li.sign-up a { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 14px; width: 80px; border-radius: 0px; -ms-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; -webkit-border-radius: 0px; } .bit-events { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 15px; } .bit-events th { padding: 20px 0px !important; text-transform: uppercase; background: rgba(0, 0, 0, 0.1); } .bit-events td { border-top: none !important; font-family: 'Roboto', sans-serif; font-weight: 400; } .bit-events tr { background: rgba(0, 0, 0, 0.3); } .bit-events tr:nth-child(4n + 3) { background: rgba(0, 0, 0, 0.15); } .bit-events td.bit-description-links, .bit-events th.bit-description-links { padding-left: 15px; } .bit-events td.bit-description-links a { background-color: #111 !important; } .bit-events td.bit-date, .bit-events th.bit-date { width: 100px; padding-left: 10px; } .bit-events td.bit-tickets a { color: #FFF; text-decoration: none; transition: color 200ms; -ms-transition: color 200ms; -moz-transition: color 200ms; -o-transition: color 200ms; -webkit-transition: color 200ms; } .bit-events td.bit-tickets a:hover { color: #ee407c; } .bit-events td.bit-rsvp { padding-right: 30px; } .bit-events tr.bit-header th, .bit-events tr.bit-header-narrow, .bit-events tr.bit-bottom { display: none; } @media (max-width: 1100px) { #navigation .menu-navigation-container .menu .menu-item a { font-size: 20px; padding: 0px 10px; } } @media (max-width: 500px) { body { overflow-y: visible; } #container { bottom: auto; overflow: visible; min-height: 100%; } #background { display: none; } #navigation { height: 130px; overflow: hidden; min-width: 0px; } #navigation .background { display: none; } #navigation .menu-navigation-container .menu .menu-item { height: 20px; } #navigation .menu-navigation-container .menu .menu-item a { font-size: 16px; line-height: 20px; height: 20px; } #navigation .menu-navigation-container .menu .menu-item.broken-bells { display: block; margin: 4px; } #navigation .menu-navigation-container .menu .menu-item.broken-bells a { font-size: 25px; } #navigation .menu-navigation-container .menu .menu-item.current-menu-item a:before, #navigation .menu-navigation-container .menu .menu-item a:hover:before { opacity: 0; filter: alpha(opacity=0); } #navigation .menu-navigation-container .menu .menu-item.current-menu-item a, #navigation .menu-navigation-container .menu .menu-item a:hover { top: 0px; background: transparent; } #navigation .menu-navigation-container .menu .menu-item .sub-menu { display: none; } #jukebox a { display: none; } #content { position: relative; left: 0px; top: 150px; bottom: auto; min-width: 0px; } #content h1 { right: 0px; } #content .bottom-line { display: none; } #content.home { position: absolute; bottom: 0px; } #content.home .posts { display: none; } #content.home .girl { bottom: 0px; width: 150px; height: 240px; margin-left: -75px; background-size: 150px; } #content.video { height: 200px; } #content.page .post { padding: 0px; } #posts { position: relative; bottom: auto; } #posts .posts-inner { position: relative; right: 0px; } #posts .post { padding: 0px 20px; padding-bottom: 150px; margin-bottom: 100px; } #posts .post.last { margin-bottom: 300px; } #posts .post .post-meta { bottom: 10px; top: auto; width: 100%; text-align: center; } #posts .post .post-body { margin: 0px; } #posts .post .bit-events { font-size: 12px !important; } #posts .post .embed-youtube iframe.youtube-player{ width:100%; margin-bottom:15px; } #footer { top: 100%; margin-top: -60px; bottom: auto; height: auto; text-align: center; overflow: hidden; } #footer .inner { padding-bottom: 100px; width: auto; } #footer .inner .menu-buy-container { position: static; float: none; max-width: 300px; margin: auto; margin-top: 20px; } #footer .inner .legal { position: absolute; bottom: 20px; left: 0px; width: 100%; float: none; padding: 0px 20px; box-sizing: border-box; } #footer .inner .legal b { display: block; margin-bottom: 5px; } #footer .inner .menu-socials-container { position: relative; top: 0px; right: 0px; padding: 10px 20px; } #footer .inner .menu-socials-container li.sign-up a { display: block; margin-top: 15px; } }