﻿.mobileNormalColumn {
    padding-left: 3px;
}

.expandedMobileColumns {
    padding-left: 3px;
    padding-right: 3px;
}

.mobileHeaderRow {
    padding-left: 3px;
    padding-right: 3px;
}

.extraExpandedMobileColumnsHalf {
    padding-left: 3px;
    padding-right: 3px;
}

.extraExpandedMobileColumns {
    padding-left: 3px;
    padding-right: 3px;
}

.desktopExpandedColumns {
    padding-left: 3px;
    padding-right: 3px;
}

.desktopDoubleExpandedColumn {
    padding-left: 3px;
    padding-right: 3px;
}

.desktopCommentColumn {
    padding-left: 3px;
    padding-right: 3px;
}

.desktopCommentRTIColumn {
    padding-left: 3px;
    padding-right: 3px;
}

.indyQualSmall {
    padding-left: 3px;
    padding-right: 3px;
}

.indyQualLargeSpeed {
    padding-left: 3px;
    padding-right: 3px;
}


.rtiFeaturedDriverHidden {
    display: none;
}

.legendItem {
    width: 48%;
    margin: 5px 1% 5px 1%;
    padding-left: 5px;
    float: left;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.4rem;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
}

@media screen and (max-width: 430px) {
    .legendItem {
        width: 48%;
    }
}

.legendItemDesktop {
    display: none;
}

.autehnticationContent {
    width: 100%;
    padding: 5%;
}

.authenticationImage {
    width: 100%;
    padding: 5%;
}

.authenticationInformation {
    width: 100%;
    padding: 5%;
}

.authenticationImageDisplay {
    margin-top: 25px;
}

.btn {
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    text-transform: uppercase;
    background: #ed1c24;
    color: white;
    font-size: 24pt;
    padding: 5px 10px;
    text-align: center;
    border: none;
}

.feederLink1, .feederLink2, .feederLink3 {
    width: 33%;
    float: left;
    text-align: center;
}

@media screen and (min-width: 981px) {
    .legendItemDesktop {
        width: 48%;
        margin: 5px 1% 5px 1%;
        padding-left: 5px;
        float: left;
        display: block;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 1.4rem;
        font-style: italic;
        text-transform: uppercase;
    }

    .autehnticationContent {
        width: 975px;
        margin: 0 auto;
    }

    .authenticationImage {
        width: 50%;
        float: left;
        padding: 25px 25px 100px 25px;
        text-align: center;
        margin-top: 75px;
    }

    .authenticationInformation {
        width: 50%;
        float: left;
        margin-top: 10px;
    }

    .authenticationImageDisplay {
        margin-top: 75px;
    }
}

@-webkit-keyframes example {
    25% {
        background-color: none;
        color: black;
    }

    50% {
        background-color: green;
        color: white;
    }

    75% {
        background-color: green;
        color: white;
    }

    100% {
        background-color: none;
        color: black;
    }
}

/* Standard syntax */
@keyframes example {
    25% {
        background-color: none;
        color: black;
    }

    50% {
        background-color: green;
        color: white;
    }

    75% {
        background-color: green;
        color: white;
    }

    100% {
        background-color: none;
        color: black;
    }
}

@media screen and (max-width: 430px) {
    #FlagImage {
        position: relative;
        width: 75px;
        top: -190px;
    }
}

@media screen and (min-width: 431px) and (max-width: 670px) {
    #FlagImage {
        position: relative;
        width: 100px;
        top: -175px;
    }
}

@media screen and (max-width: 980px) {

    #SessionInfoDiv {
        padding-top: 10px;
    }

    #SessionInformationDiv {
        overflow: hidden;
    }

    .TimingAndVideoContainer {
        width: 100%;
    }

    .main-container {
        padding-top: 70px;
    }

    .no-activity {
        width: 98%;
        max-width: 98%;
        margin: 0 1% 0 1%;
    }

    .RightRail {
        clear: both;
        width: 100%;
    }

    .twitter {
        width: 98%;
        margin: 0 1% 0 1%;
        background-color: white;
        border: 2px solid white;
        border-radius: 5px;
        max-height: 650px;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 350px;
    }

    .liveVideo {
        border: 0 none transparent;
        width: 98%;
        height: 200px;
        margin: 0 1% 0 1%;
    }

    .radioDiv {
        height: 200px;
        margin: 0 1% 0 1%;
        margin-top: 15px;
        background-color: #f2f2f2;
        overflow: hidden;
        text-align: center;
        margin: 0 auto;
    }

    #VideoContainer {
        background: none;
    }

    .mobileHeader {
        width: 98%;
        margin: 0 1% 0 1%;
        background-color: black;
        color: white;
        font-size: 16px;
        font-weight: bold;
        overflow: hidden;
    }

    .flagDiv {
        background-repeat: no-repeat;
        background-position: bottom right;
    }

    .featuredDriverScrolled {
        display: none;
    }

    .featuredDriverHidden {
        display: none;
    }

    /*#mobileAd {
        display: none;
    }*/

    /*#videoAd {
        display: none;
    }*/

}

@media screen and (min-width: 981px) {
    #LegendDiv {
        width: 66%;
    }

    #TrackMapDiv {
        width: 32%;
    }

    .SessionInfoDivScrolled {
        padding: 10px 0 0 0;
        width: 100%;
    }

    .SessionInfoDivNonScrolled {
        padding: 10px;
        width: 80%;
    }

    .flagScrolled {
        clear: both;
    }

    .flagNonScrolled {
        float: left;
    }

    .nonScrolled {
        width: 968px;
        height: 545px;
        z-index: 98;
        float: left;
        padding-left: 12px;
        padding-bottom: 10px;
    }

    .scrolledTop {
        position: fixed;
        top: 5px;
        height: 215px;
        left: 50%;
        margin-left: -220px;
        z-index: 100;
        width: 382.22px;
    }

    .stickyVideo {
        display: block;
        height: 225px;
        background-color: black;
        z-index: 100;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        color: white;
    }

    .sessionInformationDivScrolled {
        position: fixed;
        top: 5px;
        z-index: 100;
        left: 50%;
        margin-left: -625px;
        width: 400px;
        max-width: 550px;
        background-color: none;
    }

    .sessionInformationNonScrolled {
        background-color: black;
        overflow: hidden;
    }

    .hiddenStickyVideo {
        display: none;
    }

    .featuredDriverScrolled {
        display: block;
        z-index: 100;
        position: fixed;
        left: 50%;
        margin-left: 170px;
        top: 5px;
    }

    .featuredDriverHidden {
        display: none;
    }

    .affiliates .footer-navigation {
        display: block;
    }

    .VideoContainer {
        width: 970px;
        float: left;
        padding: 5px 0px 5px 5px;
        margin-left: 7px;
    }

    .LeftColumnContainer {
        max-width: 1270px;
        width: 1270px;
        margin: 0 auto;
    }

    .main-container {
        padding-top: 135px;
    }

    .RightRail {
        float: right;
        width: 270px;
        margin-right: 15px;
        margin-top: 4px;
    }

    .twitter {
        width: 270px;
        background-color: white;
        border: 2px solid white;
        border-radius: 5px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .liveVideo {
        border: 0 none transparent;
        width: 970px;
        height: 546px;
    }

    .radioDiv {
        width: 280px;
        height: 200px;
        position: relative;
        top: 15px;
        left: 50%;
        margin-left: -150px;
    }

    .mobileHeader {
        width: 98%;
        margin: 0 1% 0 1%;
        background-color: black;
        color: white;
        font-size: 16px;
        font-weight: bold;
        clear: both;
    }

    .radioAd {
        height: 230px;
        min-height: 230px;
        width: 960px;
        display: block;
        background-repeat: no-repeat;
    }

    .radioTwitter {
        height: 234px;
        display: block;
        width: 280px;
        background-color: white;
        border: 2px solid white;
        border-radius: 5px;
        max-height: 234px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #twitterDiv {
        height: 220px;
    }

    /*#mobileAd {
        display: none;
    }*/
}

@media screen and (min-width: 430px) and (max-width: 550px) {
    #SessionInfoDiv {
        padding-top: 10px;
    }

    #SessionInformationDiv {
        overflow: hidden;
    }

    #LegendDiv {
        width: 100%;
        clear: both;
    }

    #TrackMapDiv {
        width: 100%;
        clear: both;
    }

    .featuredDriverScrolled {
        display: none;
    }

    .featuredDriverHidden {
        display: none;
    }

    div {
        font-size: 12px;
    }

    .mobileRank {
        width: 4%;
        padding-left: 5px;
    }

    .mobileDriverName {
        width: 28%;
    }

    .mobileRTIDriverName {
        width: 34%;
    }

    .mobileCarNumber {
        width: 6%;
    }

    .mobileEngine {
        width: 6%;
    }

    .mobileNormalColumn {
        width: 13.5%;
    }

    .expandedMobileColumns {
        display: block;
        width: 13.5%;
    }

    .mobileHeaderRow {
        width: 44%;
    }

    .extraExpandedMobileColumnsHalf {
        display: none;
    }

    .extraExpandedMobileColumns {
        display: none;
    }

    .desktopExpandedColumns {
        display: none;
    }

    .desktopDoubleExpandedColumn {
        display: none;
    }

    .desktopCommentColumn {
        display: none;
    }

    .desktopCommentRTIColumn {
        display: none;
    }

    .rotateDiv {
        display: none;
    }

    .indyQualSmall {
        display: block;
        width: 13.5%;
    }

    .indyQualLargeSpeed {
        display: none;
    }

    .movementColumn {
        display: none;
    }

    #VideoDiv {
        height: 200px;
        margin-bottom: 10px;
    }

    #videoAd {
        float: left;
        width: 48%;
    }

    #twitterDiv {
        float: left;
        width: 48%;
        height: 520px;
        display: block;
    }

    .VideoContainer {
        text-align: center;
    }

    .feederLink1, .feederLink2, .feederLink3, .feederLink4 {
        width: 100%;
        clear: both;
        float: left;
        text-align: center;
        margin-bottom: 25px;
    }
}

@media screen and (min-width: 551px) and (max-width: 980px) {
    #SessionInfoDiv {
        padding-top: 10px;
    }

    #SessionInformationDiv {
        overflow: hidden;
    }

    #LegendDiv {
        width: 100%;
        clear: both;
    }

    #TrackMapDiv {
        width: 100%;
        clear: both;
    }

    div {
        font-size: 12px;
    }

    .mobileRank {
        width: 3%;
        padding-left: 5px;
    }

    .mobileDriverName {
        width: 22%;
    }

    .mobileRTIDriverName {
        width: 27%;
    }

    .mobileCarNumber {
        width: 5%;
    }

    .mobileEngine {
        width: 5%;
    }

    .mobileNormalColumn {
        width: 11%;
    }

    .expandedMobileColumns {
        display: block;
        width: 10%;
    }

    .extraExpandedMobileColumnsHalf {
        display: block;
        width: 4.5%;
    }

    .extraExpandedMobileColumns {
        display: block;
        width: 9%;
    }

    .mobileHeaderRow {
        width: 39%;
    }

    .rotateDiv {
        display: none;
    }

    .indyQualSmall {
        display: none;
    }

    .indyQualLargeSpeed {
        display: block;
        width: 10.6%;
    }

    .desktopExpandedColumns {
        display: none;
    }

    .desktopDoubleExpandedColumn {
        display: none;
    }

    .desktopCommentColumn {
        display: none;
    }

    .desktopCommentRTIColumn {
        display: none;
    }

    .movementColumn {
        display: block;
        width: 4%;
    }

    #VideoDiv {
        height: 200px;
        margin-bottom: 10px;
    }

    #twitterDiv {
        float: left;
        width: 48%;
        height: 350px;
    }

    #videoAd {
        float: left;
        width: 48%;
    }

    .twitter {
        display: none;
    }

    #videoAd {
        display: none;
    }

    .feederLink1, .feederLink2, .feederLink3, .feederLink4 {
        width: 100%;
        clear: both;
        float: left;
        text-align: center;
        margin-bottom: 25px;
    }
}


@media screen and (min-width: 981px) {

    .flagImage {
        position: relative;
        top: 10px;
        left: 50%;
    }

    div {
        font-size: 12px;
    }

    .mobileRank {
        width: 3%;
        padding-left: 5px;
    }

    .mobileDriverName {
        width: 17%;
    }

    .mobileRTIDriverName {
        width: 20%;
    }

    .mobileCarNumber {
        width: 3%;
    }

    .mobileEngine {
        width: 3%;
    }

    .mobileNormalColumn {
        width: 5%;
        padding: 0 .25%;
    }

    .expandedMobileColumns {
        display: block;
        width: 5%;
        padding: 0 .25%;
    }

    .extraExpandedMobileColumnsHalf {
        display: block;
        width: 5%;
        padding: 0 .25%;
    }

    .extraExpandedMobileColumns {
        display: block;
        width: 5%;
        padding: 0 .25%;
    }

    .desktopExpandedColumns {
        display: block;
        width: 5%;
        padding: 0 .25%;
    }

    .desktopDoubleExpandedColumn {
        display: block;
        width: 10%;
        padding: 0 .25%;
    }

    .desktopCommentColumn {
        width: 5%;
        padding: 0 .25%;
    }

    .desktopCommentRTIColumn {
        width: 20%;
        padding: 0 .25%;
    }

    .movementColumn {
        display: block;
        width: 2%;
    }

    .mobileHeaderRow {
        width: 28%;
    }

    .rotateDiv {
        display: none;
    }

    .indyQualSmall {
        display: none;
    }

    .indyQualLargeSpeed {
        display: block;
        width: 10.6%;
    }
}

@media screen and (max-width: 430px) {
    .featuredDriverScrolled {
        display: none;
    }

    .featuredDriverHidden {
        display: none;
    }

    div {
        font-size: 12px;
    }

    .mobileRank {
        width: 8%;
        padding-left: 5px;
    }

    .mobileDriverName {
        width: 40%;
    }

    .mobileRTIDriverName {
        width: 50%;
    }

    .mobileCarNumber {
        width: 14%;
    }

    .mobileEngine {
        width: 10%;
    }

    .mobileNormalColumn {
        width: 20%;
    }

    .expandedMobileColumns {
        display: none;
    }

    .mobileHeaderRow {
        width: 78%;
    }

    .extraExpandedMobileColumns {
        display: none;
    }

    .extraExpandedMobileColumnsHalf {
        display: none;
    }

    .rotateDiv {
        display: block;
    }

    .indyQualSmall {
        display: none;
    }

    .indyQualLargeSpeed {
        display: none;
    }

    .desktopExpandedColumns {
        display: none;
    }

    .desktopCommentColumn {
        display: none;
    }

    .desktopCommentRTIColumn {
        display: none;
    }

    .desktopDoubleExpandedColumn {
        display: none;
    }

    .movementColumn {
        display: block;
        width: 6%;
    }

    #VideoDiv {
        height: 200px;
        margin-bottom: 10px;
    }

    .twitter {
        display: none;
    }

    #videoAd {
        display: none;
    }

    .feederLink1, .feederLink2, .feederLink3, .feederLink4 {
        width: 100%;
        clear: both;
        float: left;
        text-align: center;
        margin-bottom: 25px;
    }
}
