﻿.radioMonitoringPlayer
{
    position: fixed;
    top: 50px;
    left: 50px;
    width: 530px;
    height: 170px;
    background: url(../Images/Player/drop-shadow.png) no-repeat transparent;
    cursor: default;
    z-index: 10000;
}

    .radioMonitoringPlayer .playerContent
    {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 550px;
        height: 200px;
        background: url(../Images/Player/background.png) no-repeat transparent;
        color: #FFFFFF;
    }

        .radioMonitoringPlayer .playerContent .stationLabel
        {
            position: absolute;
            top: 15px;
            left: 107px;
        }

            .radioMonitoringPlayer .playerContent .stationLabel h3
            {
                margin: 0px;
                padding: 0px;
                font-size: 24px;
                text-shadow: 1px 1px 1px #044068;
            }

        .radioMonitoringPlayer .playerContent .playTime,
        .radioMonitoringPlayer .playerContent .playDate,
        .radioMonitoringPlayer .playerContent .playState
        {
            position: absolute;
            font-size: 12px;
        }

        .radioMonitoringPlayer .playerContent .playTime
        {
            top: 17px;
            right: 72px;
            font-size: 20px;
            text-align: right;
        }

        .radioMonitoringPlayer .playerContent .playDate
        {
            top: 43px;
            right: 72px;
            text-align: right;
        }

        .radioMonitoringPlayer .playerContent .playState
        {
            top: 43px;
            left: 108px;
        }

        .radioMonitoringPlayer .playerContent .startTime,
        .radioMonitoringPlayer .playerContent .endTime
        {
            position: absolute;
            font-size: 10px;
        }

        .radioMonitoringPlayer .playerContent .startTime
        {
            top: 81px;
            left: 108px;
        }

        .radioMonitoringPlayer .playerContent .endTime
        {
            top: 81px;
            right: 72px;
            text-align: right;
        }

        .radioMonitoringPlayer .playerContent .scrubBar
        {
            position: absolute;
            top: 65px;
            left: 108px;
            width: 370px;
            height: 15px;
        }

            .radioMonitoringPlayer .playerContent .scrubBar .event,
            .radioMonitoringPlayer .playerContent .scrubBar .empty,
            .radioMonitoringPlayer .playerContent .scrubBar .full
            {
                position: absolute;
                top: 0px;
                bottom: 0px;
                right: 0px;
                width: 370px;
                z-index: 100;
            }

            .radioMonitoringPlayer .playerContent .scrubBar .event
            {
                background: none;
                z-index: 101;
                cursor: pointer;
            }

            .radioMonitoringPlayer .playerContent .scrubBar .empty
            {
                background: url(../Images/Player/scrub-bar.png) no-repeat transparent;
            }

            .radioMonitoringPlayer .playerContent .scrubBar .full
            {
                background: url(../Images/Player/scrub-bar-filled.png) no-repeat transparent;
                right: auto;
                width: 0px;
            }

        .radioMonitoringPlayer .playerContent .playToggleButton
        {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 70px;
            height: 60px;
            background: url(../Images/Player/action-button.png) no-repeat transparent;
            cursor: pointer;
        }

            .radioMonitoringPlayer .playerContent .playToggleButton div[class$=Label]
            {
                position: absolute;
                top: 15px;
                left: 20px;
                width: 30px;
                height: 30px;
            }

                .radioMonitoringPlayer .playerContent .playToggleButton div[class$=Label] span
                {
                    display: none;
                }

            .radioMonitoringPlayer .playerContent .playToggleButton .loadingLabel
            {
                background: url(../Images/Player/fxrs-throbber-32.gif) no-repeat transparent;
                background-size: 32px 32px;
            }

            .radioMonitoringPlayer .playerContent .playToggleButton .playLabel
            {
                background: url(../Images/Player/action-button-play.png) no-repeat transparent;
            }

            .radioMonitoringPlayer .playerContent .playToggleButton .pauseLabel
            {
                background: url(../Images/Player/action-button-pause.png) no-repeat transparent;
                display: none;
            }

        .radioMonitoringPlayer .playerContent .markBox
        {
            position: absolute;
            top: 105px;
            width: 140px;
            height: 20px;
            background: url(../Images/Player/mark-set-background.png) no-repeat transparent;
            font-size: 10px;
        }

            .radioMonitoringPlayer .playerContent .markBox[editField=markIn]
            {
                left: 108px;
            }

            .radioMonitoringPlayer .playerContent .markBox[editField=markOut]
            {
                left: 253px;
            }

            .radioMonitoringPlayer .playerContent .markBox label
            {
                position: absolute;
                height: 20px;
                padding: 3px 5px;
            }

            .radioMonitoringPlayer .playerContent .markBox input
            {
                position: absolute;
                border: none;
                color: #FFFFFF;
                height: 20px;
                text-align: center;
            }

                .radioMonitoringPlayer .playerContent .markBox input[type=text]
                {
                    width: 60px;
                    border: none;
                    background: none;
                    left: 48px;
                    font-size: 11px;
                    cursor: text;
                }

                    .radioMonitoringPlayer .playerContent .markBox input[type=text].inError
                    {
                        color: #FF0000;
                    }

                .radioMonitoringPlayer .playerContent .markBox input[type=button]
                {
                    width: 32px;
                    right: 0px;
                    background: url(../Images/Player/mark-set-button.png) no-repeat transparent;
                    font-size: 10px;
                    cursor: pointer;
                }

        .radioMonitoringPlayer .playerContent .markDownloadButton
        {
            position: absolute;
            top: 105px;
            left: 398px;
            width: 80px;
            height: 20px;
            background: url(../Images/Player/mark-save-button.png) no-repeat transparent;
            font-size: 10px;
            color: #FFFFFF;
            border: none;
            cursor: pointer;
        }


        .radioMonitoringPlayer .playerContent .volume
        {
            position: absolute;
            top: 106px;
            left: 19px;
            width: 72px;
            height: 22px;
        }

            .radioMonitoringPlayer .playerContent .volume .volumeEvent,
            .radioMonitoringPlayer .playerContent .volume .volumeDisplay,
            .radioMonitoringPlayer .playerContent .volume .volumeDisplayLevel
            {
                position: absolute;
                left: 0px;
                right: 0px;
                width: 72px;
                height: 22px;
                background: url(../Images/Player/volume.png) no-repeat transparent;
                cursor: pointer;
                z-index: 100;
            }

            .radioMonitoringPlayer .playerContent .volume .volumeEvent
            {
                background: none;
                z-index: 101;
            }

            .radioMonitoringPlayer .playerContent .volume .volumeDisplayLevel
            {
                background: url(../Images/Player/volume-filled.png) no-repeat transparent;
            }

            .radioMonitoringPlayer .playerContent .volume .speakerIcon,
            .radioMonitoringPlayer .playerContent .volume .speakerIconMute
            {
                position: absolute;
                left: 0px;
                right: 0px;
                width: 15px;
                height: 15px;
                background: url(../Images/Player/volume-icon.png) no-repeat transparent;
                cursor: pointer;
                z-index: 102;
            }

            .radioMonitoringPlayer .playerContent .volume .speakerIconMute
            {
                background: url(../Images/Player/volume-icon-mute.png) no-repeat transparent;
            }


        .radioMonitoringPlayer .playerContent input[type=button].closeButton
        {
            position: absolute;
            border: none;
            background: url(../Images/Player/toolbar-clear-white-16.png) no-repeat transparent;
            top: 0px;
            right: 50px;
            width: 20px;
            height: 20px;
            background-size: 8px 8px;
            cursor: pointer;
            background-position: center center;
        }
