body, div, span, img, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, iframe, dl, dt, dd, ol, ul, li, em, small, big, strike, strong, sub, sup, b, u, i, center, fieldset, form, label, legend, table, tbody, tfoot, tr, th, td, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, details, time, mark, audio, video, canvas, applet, object, abbr, acronym, address, cite, del, dfn, ins, kbd, q, s, samp, tt, var, de, embed, output, ruby {position:relative; margin:0; padding:0; border:0; font:inherit; font-weight:inherit; font-variant:inherit; vertical-align:baseline;} body, div, h1, h2, h3, h4, h5, h6, article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section, details, time, mark, audio, video, canvas{display:block;} blockquote, q{ quotes:none;} sub, sup { font-size:0.7em;} sup{ top:-0.5em;} sub{ bottom:-0.25em;} strike, del{text-decoration:line-through;} ins{text-decoration:none;} table { border-collapse:collapse; border-spacing:0;} em{ font-style:italic;} i{ font-style:italic;} strong{ font-weight:bold;} b{ font-weight:bold;} small{ font-size:0.7em;} big{ font-size:1.2em;} a, a:hover{text-decoration:none; cursor:pointer;} u{ text-decoration:underline;} /* Custom Fonts --------------------- */ @font-face{ font-family: 'visitor1'; src: url('../font/visitor1.eot'); src: url('../font/visitor1.eot?#iefix') format('embedded-opentype'), url('../font/visitor1.woff') format('woff'), url('../font/visitor1.ttf') format('truetype'), url('../font/visitor1.svg#webfont') format('svg'); unicode-range: U+0-7F;} /* Font Definitions --------------------- */ body{ font-family:Arial, Helvetica, sans-serif; font-size:62.5%; color:#DDD; text-align:center;} h1, h2, h3, h4, nav a, #switch, #submit, #footer-social a, .nbtn, .view-all-btn, #events .story-item h6, #side-nav h6, #show_page #panel-archive a .episode-icon dt, #show_page #panel-archive a .episode-icon dd, .mini-webplayer .jp-title {font-family:"visitor1", Arial, Helvetica, sans-serif; color:#5C98A0; font-weight:normal;} .arial{ font-family:Arial, Helvetica, sans-serif;} /* Main Font Definitions --------------------- */ p{ font-size:1.4em; margin:0.25em 10px 1em; line-height:1.2; text-align:justify;} a{ color:#94B9BD; border:none;} p a:hover{ text-decoration:underline;} h1{ font-size:2.8em;} h2{ font-size:2.4em; text-align:center; margin:-0.25em auto 0.25em;} h3{ font-size:2.0em; text-align:center; margin:0 auto 0.25em;} h4{ font-size:2.4em; margin:1.5em auto 0em;} h5{ font-size:1.4em; text-align:left; margin:2em 1em 0.5em; color:#94B9BD;} h6{ font-size:1.4em; text-align:left; margin:1em 1em 0.5em; color:#BBD8DB;} .span1 h2{ font-size:3.2em; margin:0 auto 0.5em;} .span2 h2{ font-size:2.8em;} .span3 h2{ font-size:2.1em;} ul, ol{ font-size:1.2em; text-align:left; margin:0.5em 0.25em 0.75em 2.5em;} ul ul, ol ol, ul ol, ol ul, p ul, p ol{ font-size:1em;} ul{ list-style:disc;} ol{ list-style:decimal;} li{ font-size:1em; margin:0.6em auto;} .nolist{ list-style:none;} .bold{ font-weight:bold;} .strikeout{ text-decoration:line-through;} /* Z Index --------------------- */ html{ z-index:1;} body{ z-index:2;} footer{ z-index:3;} #tower{ z-index:3;} #clock{ z-index:4;} #grass{ z-index:5;} #copyright{ z-index:6;} #logo{ z-index:5;} #content1{ z-index:8;} #content2{ z-index:8;} header{ z-index:15;} nav{ z-index:20;} aside{ z-index:21;} #mini-webplayers{ z-index:25;} /* Main Positioning --------------------- */ html{ width:100%; height:100%;} body{ width:100%; min-height:100%; padding-bottom:1px; pointer-events:none; overflow-x:hidden;} body *{ pointer-events:auto;} #content1{ min-height:100%; margin-bottom:150px;} #content2{ min-height:100%; margin-bottom:150px;} section.hidden{ position:absolute; left:100%; margin-bottom:0 !important; display:none;} header{ position:fixed; top:0; left:0; width:100%; } #currentsong{ position:relative; xdisplay:none !important;} #announcement{ position:relative;} #logo{ margin:0 auto -30px auto; padding-top:10px;} .top-nav{ position:fixed; top:50%; width:200px; margin-top:-170px;} #main-nav{ left:0;} #secd-nav{ right:0;} #side-nav{ position:fixed; left:-240px; width:240px; top:0; bottom:0;} footer{ position:absolute; left:0; bottom:0; width:100%; height:35px; padding-top:247px;} @media only screen and (max-width : 1100px) { #logo{ z-index:10;} body{ padding-top:1px;} header{ position:absolute; padding-bottom:100px;} #currentsong{ top:50px; left:0; width:100%; } #logo{ position:absolute; top:0; margin:0; padding-top:0px;} .top-nav{ position:relative; top:auto; width:90%; margin:auto; margin-top:100px;} #main-nav{ left:auto; text-align:center; margin-bottom:2em;} #secd-nav{ display:none;} } @media only screen and (max-width : 760px) { .top-nav{ width:100%;} } @media only screen and (max-height : 700px) { .top-nav{ margin-top:-120px;} #content1{ margin-bottom:200px;} #content2{ margin-bottom:200px;} } @media only screen and (max-width : 500px) { html{ width:auto; height:auto;} body{ width:auto; min-height:0; padding-bottom:1px; pointer-events:auto; overflow-x:hidden;} body *{ pointer-events:auto;} #logo{ position:relative; z-index:10;} footer{ position:relative; left:0; bottom:0; width:100%; height:35px; padding-top:100px;} } @media only screen and (max-height : 700px) and (max-width : 1100px) { .top-nav{ margin-top:100px;} } /* Common --------------------- */ .float-right{ float:right;} .float-left{ float:left;} .inline{ display:inline-block;} .va-top{ vertical-align:top;} .va-bot{ vertical-align:bottom;} .va-mid{ vertical-align:middle;} .justify{ text-align:justify;} .panel-row{ width:100%; text-align:justify;} .panel-row:after{ content:''; display:inline-block; width:100%;} .panel{ display:inline-block; vertical-align:top; margin:0 1%; padding:1em; border-radius:3px; background:rgba(0,0,0,0.3); box-shadow:0 3px 6px rgba(0,0,0,0.3); border:1px solid #414957;} .panel:first-child{ margin-left:0;} .panel:last-child{ margin-right:0;} .story-item{ display:block; white-space:nowrap; overflow:hidden; padding:4px; margin:5px 0;} .story-item img, .story-item dl, .event-item-img{ display:inline-block; vertical-align:top;} .event-item-img{ overflow:hidden; width:64px; height:64px;} .view-all-btn{ text-align:center; font-size:1.6em; margin-top:0.6em;} .story-item dt{ font-size:1.5em; color:#5C98A0; font-weight:bold; margin-bottom:0.25em; white-space:pre-wrap;} .story-item dd{ font-size:1.3em;} .biocard dl{ margin:1.5em 1em 0.5em; line-height:1.3;} .biocard dt{ font-size:1.4em; text-align:left; color:#5C98A0; margin-bottom:0.3em;} .biocard dd{ font-size:1.3em; text-align:justify;} .span1{ width:100%; margin:15px 0 0;} .span2{ width:49%;} .span3{ width:32%;} .span4{ width:24%;} .span5{ width:19%;} .span-33{ width:32.66%; display:inline-block;} .span-66{ width:64.66%; display:inline-block;} .span-25{ width:24%; display:inline-block;} .span-75{ width:74%; display:inline-block;} .span-37{ width:37%;} .span1:first-child, .mtop0{ margin-top:0;} .mbot10{ margin-bottom:10px;} .mbot20{ margin-bottom:20px;} code{ font-family:"Lucida Console", Monaco, monospace; font-smooth:never; display:inline-block; line-height:1; padding:4px 6px 2px 6px; margin:2px; background:#222; background:rgba(0,0,0,0.15); border:1px solid #999; border:1px solid rgba(255,255,255,0.15);} .gradient-green{ background: -webkit-linear-gradient(top, #168283, #114a5d); background: -moz-linear-gradient(top, #168283, #114a5d); background: -ms-linear-gradient(top, #168283, #114a5d); background: -o-linear-gradient(top, #168283, #114a5d); background: linear-gradient(to bottom, #168283, #114a5d);} .stream-listen-btns a, .live-chat-btn { font-family:"Lucida Console", Monaco, monospace; font-size:1.6em; display:inline-block; width:100%; padding:0.9em 0 0.75em; margin:0.25em auto; text-align:center; color:#A7C3D5; border-top-color:rgba(255,255,255,0.2); border-bottom-color:rgba(255,255,255,0.05); border-width:2px; border-style:solid; border-right-color:rgba(255,255,255,0.125); border-left-color:rgba(255,255,255,0.125); border-radius:6px; background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, rgba(134,134,134,0.15) 0%, rgba(65,65,65,0.1) 100%); background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, rgba(134,134,134,0.15) 0%, rgba(65,65,65,0.1) 100%); background-image: -ms-radial-gradient(center bottom, ellipse farthest-corner, rgba(134,134,134,0.15) 0%, rgba(65,65,65,0.1) 100%); background-image: -o-radial-gradient(center bottom, ellipse farthest-corner, rgba(134,134,134,0.15) 0%, rgba(65,65,65,0.1) 100%); background-image: radial-gradient(ellipse farthest-corner at center bottom, rgba(134,134,134,0.15) 0%, rgba(65,65,65,0.1) 100%);} .stream-listen-btns a:hover, .live-chat-btn:hover { background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, rgba(134,134,134,0.25) 0%, rgba(65,65,65,0.2) 100%); background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, rgba(134,134,134,0.25) 0%, rgba(65,65,65,0.2) 100%); background-image: -ms-radial-gradient(center bottom, ellipse farthest-corner, rgba(134,134,134,0.25) 0%, rgba(65,65,65,0.2) 100%); background-image: -o-radial-gradient(center bottom, ellipse farthest-corner, rgba(134,134,134,0.25) 0%, rgba(65,65,65,0.2) 100%); background-image: radial-gradient(ellipse farthest-corner at center bottom, rgba(134,134,134,0.25) 0%, rgba(65,65,65,0.2) 100%);} .story-item img, .tweet_list .tweet_avatar { border-radius:2px;} a.story-item, .story-item a, .tweet_list li, .sitemap-list > a{ border-radius:3px; background:rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.01);} a.story-item:hover, .story-item a:hover, .tweet_list li:hover, .sitemap-list > a:hover{ background:rgba(45,85,98,0.2); text-decoration:none; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.4);} a.story-item-live, .story-item-live a { background:rgba(28,48,56,0.2); border:1px solid #414957; border:1px solid rgba(65,73,87,0.5);} .panel, .sitemap-list, .story-item-live, .schedule_table, .schedule_table *, .jspScrollable, .jspScrollable * {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} ::-webkit-scrollbar-thumb:vertical { width:3px; height:1px; background-color: #5C98A0; } ::-webkit-scrollbar { width:3px; height:1px; background: #000; margin-right:5px; } @media only screen and (max-width : 500px) { a.story-item, .story-item a{ border:1px solid #414957; border:1px solid rgba(65,73,87,0.5);} } /* Background Styling --------------------- */ html{ background:url(../img/bg/desktop/stars.jpg) center top repeat-x #000;} body{ background:url(../img/bg/desktop/fade.png) center bottom repeat-x; background:url(../img/bg/desktop/fade.svg);} #grass{ background:url(../img/bg/desktop/grass@2x.png) center bottom repeat-x; background-size:512px 140px;} #tower{ background:url(../img/bg/desktop/tower@2x.png) right bottom no-repeat; background-size:106px 264px;} /* Header Styling --------------------- */ #currentsong{ padding:0.1em 5px; border-top:5px solid #121212; border-bottom:2px solid #0A1312; background:#000; box-shadow:0 7px 0 0px rgba(255,255,255,0.075); font-family:"visitor1", "Lucida Console", Monaco, monospace; font-size:2em; color:#5C98A0; white-space:nowrap; overflow:hidden; max-height:1.4em; background-image: -webkit-gradient(linear, top, bottom, from(#020101), color-stop(0.5, #181818), to(#020101)); background-image: -webkit-linear-gradient(top, #020101, #181818, #020101); background-image: -moz-linear-gradient(top, #020101, #181818, #020101); background-image: -ms-linear-gradient(top, #020101, #181818, #020101); background-image: -o-linear-gradient(top, #020101, #181818, #020101); background-image: linear-gradient(to bottom, #020101, #181818, #020101);} #currentsong:hover{ max-height:10em;} #currentsong p{ text-align:center; margin-top:auto; padding-left:0.5em; padding-right:0.5em;} #currentsong p.hist{ margin-top:0.8em;} #announcement a{ position:relative; font-size:1.8em; padding:0.2em; display:block; color:#b7dade;} #mini-webplayers{ position:relative; float:left; top:20px; left:5px; width:150px;} #socialbtns{ position:relative; float:right; top:20px; right:15px; display:inline-block; text-align:right; opacity:0.5;} #socialbtns:hover{ opacity:1.0;} .social-btn-fb, .social-btn-tw{ display:inline-block; vertical-align:middle; margin-right:5px;} /* Navigation Styling --------------------- */ nav a{ display:block; width:5.5em; font-size:2.4em; line-height:1; padding:0.5em; margin:0.5em 0; background:rgba(0,0,0,0.3); border:1px solid #171a22; border:1px solid rgba(225,238,255,0.25); box-shadow: inset 0 0px 40px -40px rgba(225,238,255,0.2), 0 4px 8px rgba(0,0,0,0.75);} nav a:hover{ color: #6dbfca; box-shadow: inset 0 -50px 40px -40px rgba(205,238,255,0.2), 0 4px 8px rgba(0,0,0,0.75); text-decoration:none;} #main-nav a{ border-radius:0 3px 3px 0; border-left:none; text-align:left; left:0;} #main-nav a:hover{ padding-left:1.5em;} #secd-nav a{ border-radius:3px 0 0 3px; border-right:none; text-align:right; right:0;} #secd-nav a:hover{ padding-right:1.5em;} #secd-nav{ direction:rtl;} #secd-nav a{ direction:ltr;} #morebtn, #shopbtn{ font-size:2.0em; width:3em;} /* Sidebar Navigation Styling --------------------- */ #side-nav{ background:url(../img/bg/bg-thread.jpg) top center repeat; box-shadow:inset 0 0 30px 5px #000; overflow-y:scroll;} #side-nav h6{ font-size:2.1em; white-space:nowrap; overflow:hidden; margin:0; padding:0.5em 0 0.5em 0.5em; background:rgba(0,0,0,0.9);} #side-nav a{ display:block; font-size:1.6em; text-align:left; margin:0; padding:0.8em 0.5em; overflow:hidden; white-space:nowrap; background:rgba(0,0,0,0.6); border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid #000;} #side-nav a:hover{ background:rgba(10,20,20,0.6);} /* Main & Content Styling --------------------- */ #logo{ background:url(../img/logo/2x.png) bottom center no-repeat; opacity:0.75; width:100%; height:200px; background-size:720px 200px;} #intro{ padding:2em; background:rgba(0,0,0,0.9); border-radius:1.5em; border:1em solid #171a22; border:1em solid rgba(225,238,255,0.25); box-shadow:0 4px 8px rgba(0,0,0,0.25);} #intro p{ font-size:1.4em; margin-top:0.1em; margin-bottom:1em;} /* Footer & Copyright Styling --------------------- */ #copyright{ font-size:1.4em; text-align:center; color:#273a3d; text-shadow: 0 0 7px #93CBD3, 0 0 7px #93CBD3, 0 0 7px #93CBD3;} #tower{ position:absolute; bottom:45px; height:264px; left:10%; width:80%; margin:auto; xmin-width:1230px;} #grass{ position:absolute; bottom:0px; height:100%; left:0px; width:100%; pointer-events:none;} #clock{ position:absolute; bottom:23px; left:10%; font-size:3.6em; cursor:default; color:#6dbfca; padding:5px; text-align:center; overflow:hidden;} #time{ font-weight:bold;} #clock small{ font-size:0.5em; display:block;} #clock:hover{ padding:5px 5px 50px 5px;} #hidden{ position:absolute; bottom:0; left:0; width:0; height:0; display:none; z-index:0;} /* Articles --------------------- */ article{ width:830px; margin:auto;} section { width: 100%; height:100%; xbox-shadow:inset 0 0 0 1px blue;} section article { width:100%; xbox-shadow:inset 0 0 0 1px red;} section article .inner{ width:68%; min-width:770px; max-width:1030px; margin:auto;} /* ScrollPane Custom Scroll Bar --------------------- */ .jspScrollable{ position:relative;} .jspContainer{ position:relative; margin:0; padding:0; width:auto !important;} .jspPane{ position:relative; margin:0; padding:0; width:auto !important;} .jspVerticalBar, .jspHorizontalBar{ position:absolute; margin:0; padding:0;} .jspVerticalBar{ width:6px; height:98%; top:1%; bottom:1%; right:4px;} .jspHorizontalBar{ height:6px; width:100%; bottom:2px; left:0;} .jspVerticalBar *, .jspHorizontalBar *{ margin:0; padding:0;} .jspTrack{ position:relative; background:transparent;} .jspDrag{ position:relative; opacity:0.0; cursor:pointer; background:rgba(255,255,255,0.25); border-radius:3px;} .jspContainer:hover .jspDrag, .jspDrag:active, .jspDrag:focus{ opacity:1.0;} .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag, .jspCorner, .jspArrow, .jspCap{ display:none;} @media only screen and (max-width : 1160px) { #socialbtns{ text-align:center;} .social-btn-fb, .social-btn-tw{ display:block; margin-right:0px; margin-top:5px;} } @media only screen and (max-width : 1100px) { section article .inner{ width:90%; min-width:740px; max-width:1030px; margin:auto;} #logo{ opacity:1; width:100%; height:50px; background:url(../img/logo/solid-0.5x.png) center center no-repeat #182d48; background-position:center center; background-repeat:no-repeat, repeat-x; background-image:url(../img/logo/solid-0.5x.png), url(../img/bg/mobile/top.gif);} nav a{ display:inline-block; width:15%; font-size:2.1em; line-height:1; padding:0.5em 0; margin:0 1%; background:rgba(24,42,70,0.5); box-shadow: inset 0 0px 40px -40px rgba(225,238,255,0.2), 0 4px 8px rgba(0,0,0,0.75);} nav a:hover{ color: #6dbfca; box-shadow: inset 0 -50px 40px -40px rgba(225,238,255,0.2), 0 4px 8px rgba(0,0,0,0.75); text-decoration:none;} #main-nav a{ border-radius:3px; text-align:center; left:auto; border:1px solid #171a22; border:1px solid rgba(225,238,255,0.15); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #secd-nav a{ border-radius:3px; text-align:center; right:auto; border:1px solid #171a22; border:1px solid rgba(225,238,255,0.15);} #main-nav a:first-child{ margin-left:0;} #main-nav a:last-child { margin-right:0;} #main-nav a:hover{ padding-left:0;} #secd-nav a:hover{ padding-right:0;} #secd-nav{ direction:rtl;} #secd-nav a{ direction:rtl;} #morebtn, #shopbtn{ font-size:2.1em; width:15%;} #mini-webplayers{ position:relative; top:-25px; left:-300px; width:150px;} #socialbtns{ top:-25px; right:-300px;} #tower{ display:none;} #clock{ position:absolute; bottom:80px; left:0; width:100%; font-size:3.6em;} #clock small{ font-size:0.5em; display:inline-block; margin-left:0.5em;} #clock:hover{ padding:5px;} } @media only screen and (max-width : 900px) { } @media only screen and (max-width : 760px) { article{ width:auto;} section article .inner{ width:95%; min-width:0px; margin:auto;} nav a{ width:30%; font-size:2.1em; line-height:1; padding:0.5em 0; margin:0 1% 5px !important;} .panel:not(#socialbtns, .mobile-keep){ display:block; width:98% !important; margin:0 1% 20px !important;} } @media only screen and (max-width : 500px) { html{ background:#000;} body{ background:url(../img/bg/desktop/fade.png) bottom center repeat-x;} #logo{ background:url(../img/logo/solid-0.33x.png) center no-repeat #18314a;} section article .inner{ width:100%; min-width:100px; margin:auto;} nav a{ width:45%; font-size:2.1em; line-height:1; padding:0.5em 0; margin:0 1% 5px !important; background:rgba(0,0,0,0.5); border-radius:3px;} nav a.big{ display:block; width:auto; font-size:2.4em; padding:0.7em 0; margin:0 3% 20px !important;} nav #listbtn{ margin-bottom:10px !important;} nav #facebtn, nav #twitbtn{ margin-top:5px !important; padding:0.7em 0;} nav #facebtn{ color:#369;} nav #twitbtn{ color:#3CF;} article{ width:auto;} .panel:not(.mobile-keep){ display:block; margin:0; padding:10px 5px; border-radius:0px; border:none; background:none; box-shadow:none;} .panel.mobile-keep{ display:inline-block; border-radius:0px; border:none; background:none; box-shadow:none;} .panel.span2{ width:45%;} #clock{ display:none;} } @media only screen and (-webkit-min-device-pixel-ratio : 1.1), only screen and (min-device-pixel-ratio : 1.1) { #logo{ background:url(../img/logo/2x.png) bottom center no-repeat; background-size:720px 200px;} #grass{ background:url(../img/bg/desktop/grass@2x.png) center bottom repeat-x; background-size:512px 140px;} #tower{ background:url(../img/bg/desktop/tower@2x.png) right bottom no-repeat; background-size:106px 264px;} } @media only screen and (max-width : 500px) and (-webkit-min-device-pixel-ratio : 1.1), only screen and (max-width : 500px) and (min-device-pixel-ratio : 1.1) { #logo{ background:url(../img/logo/solid-0.5x.png) center no-repeat #18314a; background-size:240px 66px;} } @media only screen and (max-width : 500px) and (-webkit-min-device-pixel-ratio : 2), only screen and (max-width : 500px) and (min-device-pixel-ratio : 2) { #logo{ background:url(../img/logo/solid-0.66x.png) center no-repeat #18314a; background-size:240px 66px;} } /* Home --------------------- */ .stream-listen-btns{ text-align:right; right:4.2%;} .stream-listen-btns{ display:inline-block; text-align:center;} .stream-listen-btns a{ display:inline-block;} #home .story-item dl{ margin-left:0.5em;} .home-top-panel{ min-height:270px;} #panel-listen .justify{ margin-top:2.5em;} #panel-chat .chat-notes{ font-size:1.2em; margin-right:2em; margin-top:1em; color:#adbabc;} #panel-8static .justify{ margin-top:58px;} .live-chat-btn{ margin:0.25em 0; display:block; width:auto;} #panel-chat-secondary h2{ margin:0 auto 0;} #panel-chat-secondary .span-66{ margin-right:2%;} #panel-events{ padding-bottom:4px;} #panel-events dt{ font-size:1.3em; margin-bottom:0em; margin-right:64px; min-height:1.7em; max-height:32px; overflow:hidden;} #panel-events .event-item-img{ background:url(../img/icons/64/none.gif) center center no-repeat #000;} #panel-tweets .story-item{ overflow:visible; white-space:normal;} #panel-tweets .story-item dl{ margin-left:0; position:absolute; overflow:hidden; top:0; right:5px; left:74px; height:64px;} #panel-tweets .story-item dt{ font-size:1.2em; font-weight:normal;} #panel-tweets dd{ width:100%;} #panel-dynamic{ border:none; padding:0; background:none; box-shadow:none;} #panel-dynamic .panel{ margin:0;} #panel-dynamic h2{ margin:-0.25em auto 0.25em;} #panel-releases.panel{ margin-top:0.9em;} .featured-releases-slider, .upcoming-events-slider{ display:block; height:230px; overflow:hidden; margin:5px 0;} .slider-item{ display:block; height:100%; width: 100%;} .featured-releases-slider .story-item, .upcoming-events-slider .story-item{ xmargin:0; width:100%;} #panel-releases.no-events{ margin-top:0;} #panel-releases:not(.no-events) .view-all-btn{ margin-bottom:0;} #tweetfeed{ min-height:230px;} .tweet_list{ list-style:none; padding:0px; margin:0px;} .tweet_list li{ display:block; overflow:hidden; padding:4px; margin:5px 0;} .tweet_list .tweet_avatar{ display:inline-block; vertical-align:top; overflow:hidden; width:64px; height:64px;} .tweet_list .tweet_avatar img{ width:64px; height:64px;} .tweet_list .tweet_text{ position:absolute; text-align:left; overflow:hidden; top:25px; right:5px; left:74px; height:64px;} .tweet_list .tweet_time{ position:absolute; text-align:left; color:#94b9bd; opacity:0.8; top:5px; right:5px; left:74px;} .tweet_list .tweet_time:first-letter{ text-transform:capitalize;} .tweet_list .actions{ display:none;} /* Sitemap --------------------- */ .sitemap-list{ display:inline-block; vertical-align:top; margin:-1em 0 1em; padding:0 2%;} .sitemap-list a{ display:block; width:auto; font-size:1.3em; margin:0.2em 0; padding:0.8em 1.5em; text-align:left;} .sitemap-list h6{ display:block; width:auto; font-size:1.6em; margin:1.5em 0 0.4em; padding:0.6em 1em; border-radius:4px; background:rgba(15,15,15,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.8);} /* Shows --------------------- */ .shows-list, .showicons, .showicons a{ display:inline-block;} .shows-list{ text-align:center;} .showicons{ width:auto;} .showicons a{ margin:0.8em;} #lost .showicons a{ margin:0.1em; filter:url(../img/filters.svg#grayscale); filter:gray; -webkit-filter:grayscale(1);} #lost .showicons a:hover{ filter:none; -webkit-filter:grayscale(0);} /* Show Pages --------------------- */ #show_page .infocard img{ float:left; margin-right:1.5em;} #show_page .infocard h1{ text-align:left; font-size:3.6em; xmargin:-0.15em auto 0.1em;} #show_page .infocard h3{ text-align:left; font-size:2.1em; margin:0 auto 1em;} #show_page .infocard p{ margin-right:78px;} #show_page .infocard .social-icons{ float:right; width:48px; margin-left:3em; text-align:center; z-index:10;} #show_page .infocard .social-icons a{ display:inline-block; width:48px; height:48px; margin-bottom:0.5em; cursor:pointer; background-size:48px 48px; background-repeat:no-repeat;} #show_page .infocard .social-icon-wb{ background-image:url(../img/social/wb.png);} #show_page .infocard .social-icon-fb{ background-image:url(../img/social/fb.png);} #show_page .infocard .social-icon-tw{ background-image:url(../img/social/tw.png);} #show_page .biocard h2{ margin-bottom:0;} #show_page .panel-row .panel{ min-height:50px;} #show_page .panel-row h3{ font-size:2.4em; margin-bottom:0.5em; text-align:center;} #panel-archive div.story-item{ display:block; position:relative; height:44px;} #panel-archive .story-item a{ display:inline-block;} #panel-archive .episode-data{ position:absolute; top:0; bottom:0; left:0; right:57px; text-align:left;} #panel-archive .episode-download{ position:absolute; top:0; bottom:0; width:52px; right:0px; text-align:left; background-image:url(../img/save2.gif); background-position:center center; background-repeat:no-repeat;} #panel-archive a .episode-icon{ background:rgba(45,85,98,0.2); text-align:center; border-radius:2px; padding:3px; margin:5px;} #panel-archive a:hover .episode-icon{ background:rgba(90,170,196,0.2);} #panel-archive a .episode-icon dt{ font-size:1.5em; line-height:0.8;} #panel-archive a .episode-icon dd{ font-size:2.6em; line-height:0.8;} #panel-archive a .episode-info{ position:absolute; top:4px; bottom:4px; left:75px; right:5px; overflow:hidden; xborder:1px dashed red;} #panel-archive a .episode-info dt{ font-weight:normal; white-space:nowrap;} #panel-archive a .episode-info dd{ font-weight:normal; white-space:nowrap;} /* Featured Releases --------------------- */ #featured-releases .panel.span1.justify:after{ content:''; display:inline-block; width:100%;} #featured-releases .story-item{ display:inline-block; margin:10px 5px; width:160px; vertical-align:top;} #featured-releases .story-item dl{ display:block; text-align:left; margin:3px 0 0 0; width:160px; overflow:hidden;} #featured-releases .story-item dt{ font-size:1.2em; white-space:nowrap;} #featured-releases .story-item dd{ font-size:1.1em; white-space:nowrap; margin-top:0;} /* Listen --------------------- */ #listen .home-top-panel{ min-height:150px;} #listen .story-item{ font-size:1.4em; text-align:center; padding:0.7em 0.5em;} #listen .stream-listen-btns a{ width:95%;} /* Events --------------------- */ #events .story-item{ white-space:normal;} #events .event-item-img{ float:left; margin:6px 12px 6px 6px; overflow:hidden; width:128px; height:128px; background:url(../img/icons/128/none.jpg) center center no-repeat #000;} #events .event-info{ vertical-align:top;} #events .story-item h4{ margin-top:0; text-align:left;} #events .story-item h6{ font-size:1.8em; margin-top:0.1em;} /* Downloads --------------------- */ #downloads .span-25 img{ border-radius:3px; box-shadow:0 2px 4px rgba(0,0,0,0.5);} #downloads .span-75 h3{ font-size:2.4em;} #downloads .span-75 a{ display:block; font-size:1.2em; padding:0.15em 0; border-radius:3px;} #downloads .span-75 a:hover{ background:rgba(45,85,98,0.2);} /* 404: Page Not Found --------------------- */ .html-404{ background:url(../img/bg/desktop/404@2x.png) center top no-repeat; background-size:610px 480px; height:480px;} html.e404 #mini-webplayers{ display:none;} @media only screen and (max-width : 1100px) { .twitter-feed .tweet-time{ display:none;} } @media only screen and (max-width : 900px) { #panel-listen, #panel-chat{ display:block; margin:0 0 10px 0; width:100%; min-height:0;} } @media only screen and (max-width : 500px) { .home-top-panel{ min-height:0px !important;} } @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { #show_page .infocard .social-icon-wb{ background-image:url(../img/social/wb@2x.png);} #show_page .infocard .social-icon-fb{ background-image:url(../img/social/fb@2x.png);} #show_page .infocard .social-icon-tw{ background-image:url(../img/social/tw@2x.png);} .html-404{ background:url(../img/bg/desktop/404@2x.png) center top no-repeat; background-size:610px 480px;} } /* Web Player Styling --------------------- */ .jp-interface{ display:inline-block; vertical-align:middle; margin-left:10px;} .jp-interface:hover .jp-volume{ opacity:1.0;} .jp-jplayer{ opacity:0.0;} .jp-interface{ text-align:center;} .jp-controls, .jp-controls a, .jp-volume-bar{ display:inline-block; vertical-align:middle;} .jp-play, .jp-pause { width:112px; height:112px; background-repeat:no-repeat; background-position:top left; border-radius:56px;} .jp-play:hover, .jp-pause:hover{ background-position:bottom left;} .jp-mute, .jp-unmute{ width:13px; height:16px; margin-top:7px;} .jp-play{ background-image:url(../img/player/large/play.png);} .jp-pause{ background-image:url(../img/player/large/stop.png); display:none;} .jp-pause-show{ background:url(../img/player/large/stop.png) top left no-repeat;} .jp-mute{ background:url(../img/player/large/volon.png) top left no-repeat; display:inline-block} .jp-unmute{ background:url(../img/player/large/voloff.png) top left no-repeat; display:none;} .jp-volume{ position:relative; background:url(../img/player/large/volbg.png) top left no-repeat; width:19px; height:113px; opacity:0.0; margin-right:5px;} .jp-volume-bar{ position:relative; overflow:hidden; width:5px; height:74px; margin-top:5px; background:url(../img/player/large/volbar.png) top left no-repeat; cursor:pointer;} .jp-volume-bar-value{ position:absolute; bottom:0; width:5px; height:0; background:#FFF; background:rgba(255,255,255,0.3); display:block;} .jp-title{ display:none;} .jp-mute, .jp-unmute, .jp-volume-bar{ opacity:1; position:relative;} .mini-webplayer .jp-interface{ width:140px; height:38px; margin-left:-350px;} .mini-webplayer .jp-interface.online{ margin-left:0;} .mini-webplayer .jp-jplayer{ opacity:1.0;} .mini-webplayer .jp-title{ position:absolute; top:8px; left:46px; display:inline-block; color:#294f51; font-size:2.0em; word-spacing:-0.35em; line-height:20px; pointer-events:none;} .mini-webplayer .jp-play, .mini-webplayer .jp-pause{ width:140px; height:38px; background-repeat:no-repeat; background-position:top left; border-radius:0;} .jp-play:hover, .jp-pause:hover{ background-position:bottom left;} .mini-webplayer .jp-play{ background-image:url(../img/player/mini/play.png);} .mini-webplayer .jp-pause{ background-image:url(../img/player/mini/stop.png);} .mini-webplayer .jp-pause-show{ background:url(../img/player/mini/stop.png) top left no-repeat;} .mini-webplayer .jp-mute, .mini-webplayer .jp-unmute, .mini-webplayer .jp-volume, .mini-webplayer .jp-volume-bar, .mini-webplayer .jp-volume-bar-value{opacity:0 !important; position:absolute;} .mini-webplayer #webplayer-8static-interface, .mini-webplayer #webplayer-pulsewave-interface, .mini-webplayer #webplayer-magfest-interface { position:absolute; top:5px; left:5px;} /*@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {*/ .jp-play{ background-image:url(../img/player/large/play@2x.png); background-size:112px 224px;} .jp-pause{ background-image:url(../img/player/large/stop@2x.png); background-size:112px 224px;} .jp-pause-show{ background-image:url(../img/player/large/stop@2x.png); background-size:112px 224px;} .jp-mute{ background-image:url(../img/player/large/volon@2x.png); background-size:13px 16px;} .jp-unmute{ background-image:url(../img/player/large/voloff@2x.png); background-size:13px 16px;} .jp-volume{ background-image:url(../img/player/large/volbg@2x.png); background-size:19px 113px;} .jp-volume-bar{ background-image:url(../img/player/large/volbar@2x.png); background-size:5px 74px;} .mini-webplayer .jp-play{ background-image:url(../img/player/mini/play@2x.png); background-size:140px 76px;} .mini-webplayer .jp-pause{ background-image:url(../img/player/mini/stop@2x.png); background-size:140px 76px;} .mini-webplayer .jp-pause-show{ background-image:url(../img/player/mini/stop@2x.png); background-size:140px 76px;} /*}*/ /* Universal Schedule --------------------- */ .schedule_table{ width:100%; min-height:400px; position:relative; display:table; margin-bottom:1em;} .schedule_table a{ position:absolute; display:table; vertical-align:middle; text-align:center; z-index:14; background:#283e5c; background:rgba(40,62,92,0.75); box-shadow:inset 0px 0px 5px rgba(168,208,255,0.15); border-radius: 4px;} .schedule_table a:hover{ background:#283e5c; background:rgba(40,62,92,0.90); box-shadow:inset 0px 0px 5px rgba(168,208,255,0.40); text-decoration:none;} .schedule_table a .text{ display:table-cell; vertical-align:middle; font-size:1.2em; padding:0px; font-weight:bold; color: #8196a6; text-decoration:none;} .schedule_table a small{ display:block; font-size:0.75em; font-weight:normal;} .schedule_table a.on-hiatus{ background:#454e5c; background:rgba(69,78,92,0.75); opacity:0.5;} .schedule_table a.on-vacation{ opacity:0.7;} .schedule_days{ z-index:14;} .schedule_days div{ display:inline-block; vertical-align:top; font-size:1.4em; font-weight:bold; padding:0.4em; height:30px; background:#222; border-right:1px solid #333; color:#999;} .schedule_days div:last-child{ border-right:none;} .schedule_days .space{ width:10% !important; background:none;} .schedule_hours{ z-index:12; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3);} .schedule_hours div{ font-size:1.2em; height:46px; padding:1em 0.2em; padding-right:90%;} .schedule_hours div:nth-child(2n+1){ background:rgba(27,27,27,0.5);} .schedule_hours div:nth-child(2n){ background:rgba(14,14,14,0.5);} .schedule_columns{ position:absolute; top:0; left:0; width:100%; height:100%;} .schedule_columns div{ z-index:13; top:0; height:100%; position:absolute; background:rgba(255,255,255,0.015); border:1px dashed rgba(255,255,255,0.15); border-bottom:none;} .l100{ height:44px;} .l130{ height:67px;} .l200{ height:90px;} .l230{ height:113px;} .l300{ height:136px;} .l330{ height:159px;} .l400{ height:182px;} .l430{ height:205px;} .l500{ height:228px;} .l530{ height:251px;} .l600{ height:274px;} .l630{ height:297px;} .l700{ height:320px;} .l730{ height:343px;} /* MAGfest Schedule --------------------- */ .schedule_events{ position:absolute; top:55px; left:10%; width:100%; height:100%;} #magfest_schedule a{ width:14.5%; cursor:default; background:#202a39; background:rgba(32,42,57,0.75); box-shadow:inset 0px 0px 5px rgba(168,208,255,0.15);} #magfest_schedule .schedule_days .single{ width:15%;} #magfest_schedule .schedule_days .double{ width:30%;} #magfest_schedule .schedule_stations div{ z-index:14; display:inline-block; vertical-align:top; width:15%; height:25px; color:#999; font-size:1.2em; font-weight:bold; padding:0.3em; border-right:1px solid #444;} #magfest_schedule .schedule_stations div span{ font-weight:normal;} #magfest_schedule .schedule_stations .space{ width:10%;} #magfest_schedule .schedule_stations div:not(.space){ background:#333;} #magfest_schedule .schedule_stations div:last-child{ border-right:none;} #magfest_schedule .schedule_columns .Thursday{ left:10%; width:15%;} #magfest_schedule .schedule_columns .Saturday{ left:55%; width:30%;} #magfest_schedule .Thursday a{ left:0.25%;} #magfest_schedule .Friday a{ left:15.25%;} #magfest_schedule .Saturday a{ left:45.25%;} #magfest_schedule .Sunday a{ left:75.25%;} #magfest_schedule .event_8bitx{ margin-left:15%;} #magfest_schedule .s1100{ top:2px;} #magfest_schedule .s1130{ height:21px;} #magfest_schedule .s1200{ top:41px;} #magfest_schedule .s1230{ height:61px;} #magfest_schedule .s1300{ top:81px;} #magfest_schedule .s1330{ height:101px;} #magfest_schedule .s1400{ top:121px;} #magfest_schedule .s1430{ height:141px;} #magfest_schedule .s1500{ top:161px;} #magfest_schedule .s1530{ height:181px;} #magfest_schedule .s1600{ top:201px;} #magfest_schedule .s1630{ height:221px;} #magfest_schedule .s1700{ top:241px;} #magfest_schedule .s1730{ height:261px;} #magfest_schedule .s1800{ top:281px;} #magfest_schedule .s1830{ height:301px;} #magfest_schedule .s1900{ top:321px;} #magfest_schedule .s1930{ height:341px;} #magfest_schedule .s2000{ top:361px;} #magfest_schedule .s2030{ height:381px;} #magfest_schedule .s2100{ top:401px;} #magfest_schedule .s2130{ height:421px;} #magfest_schedule .s2200{ top:441px;} #magfest_schedule .s2230{ height:461px;} #magfest_schedule .s2300{ top:481px;} #magfest_schedule .s2330{ height:501px;} #magfest_schedule .s2400{ top:521px;} #magfest_schedule .s2430{ height:541px;} /* Regular Schedule --------------------- */ #active_schedule .schedule_days div{ width:12.85%;} #active_schedule a{ width:12.35%; margin-left:10.25%; margin-top:30px; } #active_schedule .schedule_columns .Sunday{ left:10.00%; width:12.85%;} #active_schedule .schedule_columns .Tuesday{ left:35.70%; width:12.85%;} #active_schedule .schedule_columns .Thursday{ left:61.40%; width:12.85%;} #active_schedule .schedule_columns .Saturday{ left:87.10%; width:12.85%;} #active_schedule .Sunday{ left:00.00%;} #active_schedule .Monday{ left:12.85%;} #active_schedule .Tuesday{ left:25.70%;} #active_schedule .Wednesday{ left:38.55%;} #active_schedule .Thursday{ left:51.40%;} #active_schedule .Friday{ left:64.25%;} #active_schedule .Saturday{ left:77.10%;} #active_schedule .s1600{ top:1px;} #active_schedule .s1630{ top:24px;} #active_schedule .s1700{ top:47px;} #active_schedule .s1730{ top:70px;} #active_schedule .s1800{ top:93px;} #active_schedule .s1830{ top:116px;} #active_schedule .s1900{ top:139px;} #active_schedule .s1930{ top:162px;} #active_schedule .s2000{ top:185px;} #active_schedule .s2030{ top:208px;} #active_schedule .s2100{ top:231px;} #active_schedule .s2130{ top:254px;} #active_schedule .s2200{ top:277px;} #active_schedule .s2230{ top:300px;} #active_schedule .s2300{ top:323px;} #active_schedule .s2330{ top:346px;} #active_schedule .s2400{ top:369px;} #active_schedule .s2430{ top:392px;} @media only screen and (max-width : 860px) { #magfest_schedule .schedule_stations div span{ display:none;} } @media only screen and (max-width : 500px) { .schedule_table{ width:auto; min-height:0; position:relative; display:block; margin-bottom:1em;} .schedule_days, .schedule_hours, .schedule_columns{ display:none;} .schedule_events{ left:0;} #schedule .panel-row{ margin-top:2em;} #schedule .panel{ margin-top:0em;} #schedule .panel div{ position:relative !important; top:auto !important; left:auto !important; font-size:1.2em; width:auto !important; height:auto !important; margin-left:0; display:block; text-align:center; background:rgba(28,48,56,0.8); border:1px solid #414957; border:1px solid rgba(65,73,87,0.5); border-radius:4px; margin-bottom:5px; padding:8px;} #schedule .panel div small{ display:block; font-size:0.8em; opacity:0.6; margin-top:0.5em;} } /* Transitioning --------------------- */ #currentsong{ -webkit-transition: max-height 0.4s ease-out 0.0s; -moz-transition: max-height 0.4s ease-out 0.0s; -o-transition: max-height 0.4s ease-out 0.0s; transition: max-height 0.4s ease-out 0.0s;} #currentsong:hover{ -webkit-transition: max-height 0.4s ease-out 0.2s; -moz-transition: max-height 0.4s ease-out 0.2s; -o-transition: max-height 0.4s ease-out 0.2s; transition: max-height 0.4s ease-out 0.2s;} #clock{ -webkit-transition: padding 0.4s ease-out; -moz-transition: padding 0.4s ease-out; -o-transition: padding 0.4s ease-out; transition: padding 0.4s ease-out;} nav a{ -webkit-transition: padding 0.2s ease-out, box-shadow 0.2s ease-out; -moz-transition: padding 0.2s ease-out, box-shadow 0.2s ease-out; -o-transition: padding 0.2s ease-out, box-shadow 0.2s ease-out; transition: padding 0.2s ease-out, box-shadow 0.2s ease-out;} #submit{ -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;} #socialbtns, .jp-volume{ -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out;} .mini-webplayer .jp-interface{ -webkit-transition: margin-left 0.2s ease-out; -moz-transition: margin-left 0.2s ease-out; -o-transition: margin-left 0.2s ease-out; transition: margin-left 0.2s ease-out;} #content{ -webkit-transition: min-height 0.4s ease-out 0.2s; -moz-transition: min-height 0.4s ease-out 0.2s; -o-transition: min-height 0.4s ease-out 0.2s; transition: min-height 0.4s ease-out 0.2s;}