﻿.frontTopCol { width:100%; }
.frontLeftCol { float:left; width:640px; }
.frontRightCol { float:right; width:300px; }


.frontFlex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    flex-wrap:wrap;
}




.gbox { margin: 0 1em 1em; max-width:600px; }

/*.gbox.gbNews { background: #881e1e; width:910px; padding:5px 0; }*/

.gbListen { flex-shrink:2; }

.gbVideos .boxhead { background-color: #194150; background-position:0 -202px; }
/*.gbVideos iframe, .gbVideos > div + div { width:600px; height:338px; }*/

.gbDefTrack .boxhead { background-position:0 -402px !important; }

.LinkBig { font-size:11pt; }
.LinkBig:hover { color:#4c7bfc; text-decoration:none; }


/* --- Article Squares --- */
.articleSquares > .grid-cell:first-child {
    flex-grow:4;
}

.articleSquares > .grid-cell.articleSquares2 {
    flex-grow: 2;
    padding-top:0;
}

.articleSquare {
    background-position: 50%;
    background-size: cover;
    background-color: #222228;
    height: 100%;
    min-height: 200px;
    position: relative;
}

.articleSquares2 > section:first-child { padding-bottom:10px; }

.articleOverlay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.articleOverlay:hover {
    text-decoration: none;
}

.articleOverlay > div {
    max-width: 480px;
    min-width: 34%;
    padding: 0 20px 10px 20px;
    background-color: rgba(0,0,10,0.8);
    text-align: right;
}

.articleSquares2 .articleOverlay > div { max-width:90%; }

.articleOverlay h1 {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    margin: 0 0 10px;
}

.articleSquares2 .articleOverlay h1 { font-size:20px; }

.articleOverlay p {
    color: #fff;
    margin: 0;
    font-size: 14px;
}

.articleSquares2 .articleOverlay p { font-size:12px; }


/* --- What's New Rotator --- */
.topRotator {
    height: 360px;
    margin: 0 0 1em;
    position: relative;
    display:none;
}

.swiper-container {
    height: 360px; background-color:#112;
}
.swiper-slide {
    background-position: 50%;
    background-size: cover;
    background-color: #222228;
}
.topRotator .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 10px !important;
    border: 2px solid #007aff;
}
.topRotator .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: rgba(100,100,100,0.2);
    opacity:1;
}

.overnewsbox {
    display:flex; flex-wrap:wrap; align-items:center;
    position:absolute; top:0; height:360px; width:100%;
}
.overnewsbox:hover {
    text-decoration:none;
}
.overnewsbox > div {
    max-width: 480px;
    min-width: 34%;
    padding: 0 20px 10px 20px;
    background-color: rgba(0,0,10,0.8);
    text-align: right;
}
.overnewsbox h1 {
    color: #fff;
    font-size: 36px;
    font-weight:bold;
    margin:0 0 10px;
}
.overnewsbox p {
    color:#fff;
    margin: 0;
    font-size:14px;
}


/* --- More What's New --- */

.newsMoreSect { margin:-3px 15px 18px; max-width:610px; }
.newsItem {
    width: 50%;
    float: left;
    box-sizing: border-box;
    /*padding: 4px;*/
    border: 5px solid transparent;
    position:relative;
    text-align:left;
}
.newsItemImg {
    background-position:50%; background-size:cover;
}
.overNewsItem, .newsItemImg { height:160px; display:block; }
.newsItemImg:hover { filter:brightness(120%); }
.newsItemTitle { 
    margin:0; padding:1rem 0.5rem; opacity:0.9;
    color:#fff; position:absolute; bottom:0px;
}
.newsItemTitle span, .newsItemTitle p.newsItemCat { 
    background-color: #000; display:inline; 
    -webkit-box-decoration-break:clone; box-decoration-break: clone; 
    padding:3px 11px;
}
.newsItemTitle p { font-size:10.5pt; margin:0; color:#fff; }
p.newsItemCat { font-size:9pt; }

#scEvents .post-module p:nth-of-type(2) {
    font-size:13px;
}

.topTracksHorz a:link, .topTracksHorz a:visited { color: #d0e0f5; }
.topTracksHorz a:hover { color: #5c8bf5; }

table.toptracks { width:263px; }
div.toptracks { padding:2px 0; }
.toptracks p { margin: 0 2px 2px; }
.toptracks td { vertical-align:middle; font-size:9pt; }
.ttimage { text-align:center; width:40px; }
.ttimage img { width:38px; height:38px; }
.ttName { padding:0 10px 0 2px; }
.ttName, .dtArtist { color:#d0e0f5; }
.ttTitle { font-size: 8.5pt; font-weight:normal; color:#fff; }


.frontRightCol .gbox.gbInterview { margin-left:0; }
.gbListen p { margin: 5px 0 0; text-align:center; color:#fff; }

.listenContent { padding:1px 5px 5px; min-height:72px; }
.listenText { font-size:10pt; padding:0 5px; }
/*.listenStuff { text-align:center; }*/
.listenStuff p { margin:0.5em 0 0; line-height:32px; }

.listenPlayer { height:165px; padding:0px; background: transparent url('../pic/loading10.gif') no-repeat scroll center center; }

.tListenLink { /*margin-top:10px;*/ height:42px; }
.tListenLink a.playLink { margin-top:0; }
.tListenLink audio { width:100%; margin-top:12px; }
.showPlaya { width:100%; }

/*.interviewPlayer { padding:8px 7px 3px; } 
.interviewPlayer iframe, .listenPlayer2 > div { height:20px; }
.interviewPlayer > div { overflow:hidden; margin:0 0 12px; }  
.interviewPlayer .playBtn { display:block; height:20px; width:20px; float:left; }
.interviewPlayer p { margin:0; line-height:20px; }
.interviewPlayer div p { text-align:left; padding-left:30px; }
.interviewPlayer > div a { color:#fff; }*/
     
#divEventsBox { position:relative; }
.eventWords { height:auto; }
.gbox div.boxfoot { padding:5px 0; }
    
.frontRightCol .gbox { margin-left:0; }

.frontRightCol .gbox:first-child { margin-top:10px; /*height:273px;*/ }
.frontRightCol .gbox.gbTopTracks { width:auto; }

.gbDefTrack { position:relative; }
.gbDefTrack h3 { color:#a9a36C; float:right; margin:2px 2px 0; font-size:9pt; font-weight:normal; }
.deftrack { max-height:58px; padding:3px 2px; overflow-y:hidden; text-overflow:ellipsis; }
.deftrack img { width:58px; height:58px; float:left; margin:0 8px 0 0; }
.dtArtist { margin:2px 0; font-size:8.5pt; }
.dtTitle { margin:0; font-size:9pt; max-height: 39px; overflow: hidden; }
#aDefVote { position:absolute; bottom:0; right:4px; background:#2A2C38; padding:1px 0 1px 4px; }


.topTracksHorz { margin: 0; padding: 0 0 4px 4px; }
.topTracksHorz > div { float:left; width:100%; text-align:left; color: #dcebf5; }
.topTracksHorz > div > div { 
    margin:5px 4px 0 0; height:64px; overflow:hidden; position:relative; padding:0;
    font-size:10pt;
}
.topTracksHorz img { width:64px; height:64px; float:left; margin:0 10px 0 0; }
.ttNumBox { height:64px; float:left; width:30px; }
.ttNum { 
    background-repeat: no-repeat; background-attachment: scroll; 
    background-image: url(../pic/numbers-blue2.png); 
    width:32px; height:32px; margin-left:-3px;
}
.topTracksHorz > div, .topTracksHorz .ttTitle { font-size:10pt; }
.topTracksHorz .ttTitle { display:block; padding:1px 0 0; }
.topTracksHorz p { padding: 0; margin:0; height:59px; overflow-y:hidden; }
.ttSub { font-size:0.9em; }

p.section-small-link {
    font-size: 13px;
    margin: 10px 0;
    text-transform: uppercase;
}


/* --- Def Track --- */
.image-block .deftrack-song {
    padding:10px 5px; margin:0;
}
.post-module .deftrack-song .deftrack-title {
    color: rgb(255,246,154);
    margin-bottom: 4px;
    font-size:15px;
}
.post-module .deftrack-song .deftrack-artist {
    color: rgb(254, 250, 210);
    font-size:13px;
    font-weight:normal;
}
/* --- END Def Track --- */

#divSocial {
    text-align: center;
    margin: 1.5em 0 1em;
}
#divSocial div { }
#divSocial a { margin:0 15px; display:inline-block; }
#divSocial img { width:40px; height:40px; }

.front-socials {
    margin:2em 0 0;
    text-align:center;
}
.front-socials a {
    margin: 0 10px;
    filter: grayscale(60%);
}
.front-socials a:hover {
    filter: grayscale(0%);
}
.front-socials img {
    width:40px;
    height:40px;
}


_:-webkit-full-screen:not(:root:root), .safariStupid { width:2px; height:380px; background-color:#232531; position:absolute; 
                left:-1px; top:0px; z-index:2; }



@media only screen and (max-width: 720px) 
{
    .topRotator, .swiper-container, .overnewsbox { height:320px; }

    .overnewsbox div {
        max-width: 400px;
    }

    .overnewsbox h1 {
        font-size: 32px;
    }

    .overnewsbox p {
        font-size: 13px;
    }

    .post-module.post-deftrack .image-block {
        height: 160px;
        background-position-y: 30%;
    }

    .topRotator { display:block; }
    .articleSquares { display:none; }
}

@media only screen and (max-width: 480px) {
    .topRotator, .swiper-container, .overnewsbox {
        height: 280px;
    }

    .overnewsbox div {
        max-width: 320px;
    }

    .overnewsbox h1 {
        font-size: 28px;
    }

    .overnewsbox p {
        font-size: 12px;
    }
}
