/*====== BASIC STYLES ======*/

#audio-container h1, #audio-container h2, #audio-container h3,
#audio-container h4, #audio-container h5, #audio-container p,
#audio-container ol, #audio-container ul, #audio-container li,
#audio-container table, #audio-container dl, #audio-container dt,
#audio-container dd {
    margin: 1em 0 0 0;
    padding: 0;
    line-height: 1.5em
    }

#audio-container h1, #audio-container h2,
#audio-container h3, #audio-container h4,
#audio-container h5 {margin: 0 0 0.5em 0;}

#audio-container h1 {font-size:1.55em;}
#audio-container h2 {font-size:1.25em;}
#audio-container h3 {font-size:1.1em;}
#audio-container h4 {font-size:1em;}
#audio-container h5 {font-size:1em;}

#audio-container img {
    vertical-align: bottom;
    border:0;
    margin: 0;
    padding: 0;
    }


#audio-container hr {height: 2px; margin: 10px 0; padding:0; border:0;}

ul {list-style-type: none; padding: 0;}
ul ul,
ol ul { padding: 0 0 0 15px; margin-top: 0;}
ul li, ul ul li, ul ul ul li {margin: 0.3em 0 0 0; padding: 0 0 0 15px;}

#audio-container strong {color: #000;}


/*====== BASIC ITEM COLOURS ======*/
#audio-container h1, #audio-container h2,
#audio-container h3, #audio-container h4,
#audio-container h5, #audio-container h6 {color:#000;}
hr {background-color:#000; color:#000;}

/*====== AUDIO PLAYER ======*/
#audio-player {border: 1px #999 solid; background: #dadbdb url(/broads/live/images/player-bg.gif) repeat-x 0 0;}
#audio-player h1, #court-log-timeline h2 {border-top: 1px #fff solid;}

/*====== CONTROLS ======*/
#controls h3 {font-size: 0.9em; font-weight: normal;}
#controls li a, #controls li strong, #progress-bar-wrap li a, #progress-bar-wrap li strong {text-align: center; text-decoration: none; color: #000; font-weight: bold;}
#controls li a, #audio-container #controls li strong, #progress-bar-wrap li a, #progress-bar-wrap li strong {background-position: 0 30px;}
#controls li a:hover {background: none; color: #000;}

/*=== PLAY BUTTON ===*/
#audio-container #controls .play a, #audio-container #controls .play strong {background-image: url(/broads/live/images/button-play.gif); background-repeat: no-repeat;}
#audio-container #controls .play a {background-position: 0 22px;}
#audio-player #controls .play a:hover {background-image: url(/broads/live/images/button-play.gif); background-position: -117px 22px;}
#audio-container #controls .play strong {background-position: -234px 22px;}

/*=== PAUSE BUTTON ===*/
#audio-container #controls .pause a, #audio-container #controls .pause strong {background-image: url(/broads/live/images/button-pause.gif); background-repeat: no-repeat;}
#audio-container #controls .pause a:hover {background-image: url(/broads/live/images/button-pause.gif); background-position: -115px 30px;}
#audio-container #controls .pause strong {background-position: -230px 30px;}

/*=== STOP BUTTON ===*/
#audio-container #controls .stop a, #audio-container #controls .stop strong {background-image: url(/broads/live/images/button-stop.gif); background-repeat: no-repeat;}
#audio-container #controls .stop a:hover {background-image: url(/broads/live/images/button-stop.gif); background-position: -116px 30px;}
#audio-container #controls .stop strong {background-position: -233px 30px;}

/*=== MUTE BUTTON ===*/
#audio-container #controls .mute a, #audio-container #controls .un-mute a {background-image: url(/broads/live/images/button-mute.gif); background-repeat: no-repeat;}
#audio-container #controls .mute a:hover {background-image: url(/broads/live/images/button-mute.gif); background-position: -114px 30px;}

#audio-container #controls .un-mute a {background-position: -228px 30px;}
#audio-container #controls .un-mute a:hover {background-image: url(/broads/live/images/button-mute.gif); background-position: -342px 30px;}

/*=== VOLUME DOWN BUTTON ===*/
#audio-container #controls .volume-down a, #audio-container #controls .volume-down strong {background-image: url(/broads/live/images/button-down.gif); background-repeat: no-repeat;}
#audio-container #controls .volume-down a:hover {background-image: url(/broads/live/images/button-down.gif); background-position: -116px 30px;}
#audio-container #controls .volume-down strong {background-position: -232px 30px;}

/*=== VOLUME UP BUTTON ===*/
#audio-container #controls .volume-up a, #audio-container #controls .volume-up strong {background-image: url(/broads/live/images/button-up.gif); background-repeat: no-repeat;}
#audio-container #controls .volume-up a:hover {background-image: url(/broads/live/images/button-up.gif); background-position: -117px 30px;}
#audio-container #controls .volume-up strong {background-position: -234px 30px;}

/*=== REWIND BUTTON ===*/
#progress-bar-wrap .rewind a, #progress-bar-wrap .rewind strong {background-image: url(/broads/live/images/button-rewind.gif); background-repeat: no-repeat; text-align: left; background-position: 0 25px;}
#progress-bar-wrap .rewind a:hover {background-image: url(/broads/live/images/button-rewind.gif); background-position: -115px 25px;}
#progress-bar-wrap .rewind strong {background-position: -230px 25px;}

/*=== FORWARD BUTTON ===*/
#progress-bar-wrap .forward a, #progress-bar-wrap .forward strong {background-image: url(/broads/live/images/button-forward.gif); background-repeat: no-repeat; background-position: 15px 25px; text-align: right;}
#progress-bar-wrap .forward a:hover {background-image: url(/broads/live/images/button-forward.gif); background-position: -100px 25px;}
#progress-bar-wrap .forward strong {background-position: -215px 25px;}

/*====== STATUS ======*/
#status {border: 1px #999 solid; background: #fafafa url(/broads/live/images/status-bg.gif) repeat-x 0 0;}
#inner-status {font-size: 80%;}
#status span {background-image: url(/broads/live/images/cnr-status.gif);}
#status dl span {background: none; font-size: 1.2em;}

#status .col1 p {font-weight: bold; background: url(/broads/live/images/status-playing.gif) no-repeat 0 5px;}
#status dt {font-weight: bold;}


/*====== PROGRESS BAR ======*/
#progress-bar-wrap {border-bottom: 1px #999 solid;}
#inner-progress-bar {border: 2px #9e9e9e solid; border-bottom: 2px #fff solid;}

#progress-bar-wrap .progress-bar-container {background: #fefefe url(/broads/live/images/timeline-bg-bg.gif) repeat-x 0 100%; border-top: 1px #333 solid; border-bottom: 1px #333 solid;}
.progress-bar {border: 1px #333 solid;}

.progress-bar-segment {background: #ffff66; border: 1px #999966 solid; border-top: none;}

.progress-bar-marker {background: url(/broads/live/images/handle.gif) no-repeat 0 0;}

.progress-bar-loaded {background-color: #fff;}
.progress-bar-played {background: url(/broads/live/images/timeline-bg.gif) repeat-x 0 0;}

.progress-bar-segment-start, .progress-bar-segment-end {
  cursor: pointer;
  cursor: hand;
  color: #000;
  font-weight: bold;
  background-repeat: repeat-x;
  background-position: 0 100%;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  }

.progress-bar-segment-start {border-color: #009933; background-image: url(/broads/live/images/start-bg.gif); background-color: #f1fff1;}
.progress-bar-segment-end {border-color: #cc3333; background-image: url(/broads/live/images/end-bg.gif); background-color: #fff1f1;}

.progress-bar-segment-start .nw {background-image: url(/broads/live/images/cnr-start-nw.gif);}
.progress-bar-segment-start .ne {background-image: url(/broads/live/images/cnr-start-ne.gif);}
.progress-bar-segment-start .se {background-image: url(/broads/live/images/cnr-start-se.gif);}
.progress-bar-segment-start .sw {background-image: url(/broads/live/images/cnr-start-sw.gif);}

.progress-bar-segment-end .nw {background-image: url(/broads/live/images/cnr-end-nw.gif);}
.progress-bar-segment-end .ne {background-image: url(/broads/live/images/cnr-end-ne.gif);}
.progress-bar-segment-end .se {background-image: url(/broads/live/images/cnr-end-se.gif);}
.progress-bar-segment-end .sw {background-image: url(/broads/live/images/cnr-end-sw.gif);}

/*=== DISABLED PROGRESS BAR ===*/
.disabled {cursor: default;}

.disabled .progress-bar-marker, .disabled .progress-bar-segment-start, .disabled .progress-bar-segment-end {cursor: default;}
.disabled .progress-bar-marker {background-image: url(/broads/live/images/handle_disabled.gif);}

.disabled .progress-bar-segment-start, .disabled .progress-bar-segment-end {background-color: #f8f8f8; border-color: #4c4c4c; color: #666;}

.disabled .progress-bar-segment-start {background-image: url(/broads/live/images/start-bg_disabled.gif);}
.disabled .progress-bar-segment-end {border-color: #7f7f7f; background-image: url(/broads/live/images/end-bg_disabled.gif);}

.disabled .progress-bar-segment-start .nw {background-image: url(/broads/live/images/cnr-start-nw_disabled.gif);}
.disabled .progress-bar-segment-start .ne {background-image: url(/broads/live/images/cnr-start-ne_disabled.gif);}
.disabled .progress-bar-segment-start .se {background-image: url(/broads/live/images/cnr-start-se_disabled.gif);}
.disabled .progress-bar-segment-start .sw {background-image: url(/broads/live/images/cnr-start-sw_disabled.gif);}

.disabled .progress-bar-segment-end .nw {background-image: url(/broads/live/images/cnr-end-nw_disabled.gif);}
.disabled .progress-bar-segment-end .ne {background-image: url(/broads/live/images/cnr-end-ne_disabled.gif);}
.disabled .progress-bar-segment-end .se {background-image: url(/broads/live/images/cnr-end-se_disabled.gif);}
.disabled .progress-bar-segment-end .sw {background-image: url(/broads/live/images/cnr-end-sw_disabled.gif);}

/*====== TIMINGS ======*/
#timings {border-top: 1px #fff solid;}
#timings h2 {font-size: 1.4em; font-weight: normal;}
#timings .dots {font-size: 1.5em;}

#start-time-information, #end-time-information {border: 2px #989999 solid; border-bottom: 2px #fff solid;}
#start-time-information a, #end-time-information a {text-decoration: none; color: #000; font-size: 1.25em;}
#start-time-information a:hover, #end-time-information a:hover {text-decoration: none; background: none;}
#timings #start-time-information, #timings #end-time-information {text-align: center;}

/*=== START TIME ===*/
#inner-start-time-information {background: #f1fff1 url(/broads/live/images/start-bg.gif) repeat-y 0 100%; border: 1px #009933 solid;}
#start-time-information span {background-image: url(/broads/live/images/cnr-start-button.gif);}

/*=== END TIME ===*/
#inner-end-time-information {background: #fff1f1 url(/broads/live/images/end-bg.gif) repeat-x 0 100%; border: 1px #cc3333 solid;}
#end-time-information span {background-image: url(/broads/live/images/cnr-end-button.gif);}

/*=== DISABLED START/END TIME BUTTONS ===*/
#timings .disabled a {cursor: default;}
#start-time .disabled span {background-image: url(/broads/live/images/cnr-start-button_disabled.gif);}
#end-time .disabled span {background-image: url(/broads/live/images/cnr-end-button_disabled.gif);}

#timings #start-time .disabled #inner-start-time-information, #timings #end-time .disabled #inner-end-time-information {border-width: 1px; border-style: solid; background-color:#fefefe; background-repeat: repeat-x; background-position: 0 100%;}

#timings #start-time .disabled #inner-start-time-information {border-color: #595959; background-image: url(/broads/live/images/start-bg-large_disabled.gif);}

#timings #end-time .disabled #inner-end-time-information {border-color: #818181; background-image: url(/broads/live/images/end-bg-large_disabled.gif);}

#timings .disabled a, #timings .disabled strong {color: #666;}

/*====== COURT LOG TIMELINE ======*/
#court-log-timeline {border: 1px #999 solid; background: #dadbdb;}

#court-log-table-container {border: 1px #666 solid;}
#court-log-table-container table thead tr {background: #666;}
#court-log-table-container table th {background: #cacaca url(/broads/live/images/table-heading.gif) repeat-x 0 100%; border: 1px #666 solid;}

#court-log-timeline table th, #court-log-timeline table td {text-align: left;}

#court-log-timeline th+th+th, #court-log-timeline td+td+td {text-align: right;}
#court-log-timeline th+th+th {border-right: none;}

#court-log-timeline table a {color: #0033cc;}

/*=== TABLE STYLES ===*/
table {
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
    }

th {font-weight: bold; text-align: left; border-bottom: 1px #666 solid;}

td {background-color: #fff;}

table .odd td {background-color: #e7e7e7;}

/*====== ROUNDED CORNERS ======*/

.nw, .ne, .se, .sw {background-image: url(/broads/live/images/cnr-player.gif); background-repeat: no-repeat;}
.nw {background-position: 0 0;}
.ne {background-position: 100% 0;}
.sw {background-position: 0 100%;}
.se {background-position: 100% 100%;}


/*====== LAYOUT.CSS ======*/

/*====== CLEARING RULES ======*/
.cl {clear: both;}

br.cl, div.cl {
    height: 0;
    font-size: 0.1px;
    line-height: .0;
    }

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }


/*====== LAYOUT ======*/
#audio-container {max-width:500px;}
#audio-player, #court-log-timeline {margin: 20px; position: relative;}

#court-log-timeline {margin-top: 0; margin-bottom: 10px;}

/*====== AUDIO PLAYER ======*/
#audio-player {margin-bottom: 10px;width: 470px; }
#audio-player h1 {padding: 7px 0 0 20px; margin: 0;}

/*====== FLASH EMBED =======*/
#flash-embed { margin: 5px auto 0; text-align: center; width: 460px; height: 345px; overflow:hidden;}
/*=== CONTROLS ===*/
#control-panel {position: relative; padding: 1px;}

#standard-controls {position: absolute; left: 7px; width: 140px;}
#volume-controls {position: absolute; right: -13px; width: 140px;}
#controls h3 {margin: 0 0 0 0; padding: 5px 0 0 5px;}

#controls li {float: left; margin: 0; padding: 0; background: none;}
#controls li a, #controls li strong, #progress-bar-wrap ul a, #progress-bar-wrap ul strong {display: block; padding: 0 0 50px 0;}
#controls .play a, #controls .play strong {width: 42px;}
#controls .pause a, #controls .pause strong {width: 40px;}
#controls .stop a, #controls .stop strong {width: 41px;}
#controls .mute a, #controls .mute strong, #controls .un-mute a, #controls .un-mute strong {width: 38px;}
#controls .volume-up a, #controls .volume-down a, #controls .volume-up strong, #controls .volume-down strong {width: 41px;}

#volume-controls ul, #volume-controls h3, #progress-bar-wrap ul {margin: 0;}

/*=== STATUS ===*/
#status {margin: 10px 139px 0 139px; position: relative;}
#inner-status {padding: 10px; min-height: 50px;}
#status .col1 p {padding: 0 0 0 15px; margin: 0;}
#status dl, #status dd, #status dt {margin: 0;}
#status dl {margin: 0 0 0 10px;}
#status dt {float: left; margin: 0 10px 0 0; width: 4.5em;}

/*====== PROGRESS BAR ======*/
#progress-bar-wrap {position: relative; margin: 5px 0 0 0; padding: 1px 1px 0 1px;}
#progress-bar-wrap li {margin: 0; padding: 0; background: none; }
#progress-bar-wrap ul a, #progress-bar-wrap ul strong {padding: 0 0 40px 0;}

#progress-bar-wrap .rewind a, #progress-bar-wrap .rewind strong, #progress-bar-wrap .forward a, #progress-bar-wrap .forward strong {width: 55px;}
#progress-bar-wrap .rewind, #progress-bar-wrap .forward {position: absolute; top: -4px;}
#progress-bar-wrap .rewind {left: 11px;}
#progress-bar-wrap .forward {right: 11px;}

#inner-progress-bar {margin: 20px 10px 4px;}

.progress-bar-container {padding: 4px 5px; margin: 0 38px;}

.progress-bar-marker {position: absolute; top: -3px; height: 19px; width: 19px; cursor: pointer;}

.progress-bar-segment {
        height: 10px;
        margin: 14px -1px 0 -1px;
        padding: 1px 0;
        position:absolute;
        width: 100%;
        }

.progress-bar {
        height: 13px;
        position: relative;
        cursor: pointer;
        }

.progress-bar-loaded, .progress-bar-played {
        height: 13px;
        position: absolute;
        top: 0;
        left: 0;
        }

.progress-bar-segment-start, .progress-bar-segment-end {
        position: absolute;
        display: block;
        top: 24px;
        padding: 0.25em 10px 0.25em 9px;
        }

.progress-bar-segment-start {left: -51px;}
.progress-bar-segment-end {padding: 0.25em 13px.25em 12px;}


/*=== TIMINGS ===*/
#timings {padding:5px 7px 3px 7px;}
#start-time, #end-time {width: 13.46em;}
#start-time {float: left;}
#end-time {float: right; padding-right: 2px;}

#timings label, #timings h2 span {position: absolute; left: -999em;}
#timings input {width:30px;}
#timings h2 {float: left; margin: 0 10px 0 0; padding: 0;}
#end-time .row {text-align: right; padding-right: 2px;}

#start-time-information a, #end-time-information a {display: block; padding: 10px;}
#start-time-information, #end-time-information {clear: both; position: relative; width: 13em; margin: 7px 0 0 0;}

/*====== COURT LOG TIMELINE ======*/
#court-log-timeline h2 {margin: 0; padding: 5px 0 0 10px;}
#court-log-timeline table {margin: 0; padding: 0; width: 100%;}
#court-log-table-container {padding: 0; overflow: auto; margin: 10px;}

#court-log-timeline table th, #court-log-timeline table td {padding: 8px 9px;}

#court-log-timeline table tbody {
        overflow: auto;
        height: 240px;
        overflow-x: hidden;
        }

#court-log-timeline td:last-child {padding-right: 20px;}
#court-log-timeline table label span {position: absolute; left: -999em;}

/*====== AUDIO PLAYER BUTTONS ======*/
#audio-player-buttons {margin: 0 20px 10px 20px; padding: 0 10px;}

/*=== BASIC COLUMNS ===*/
.col1 {float: left; width: 33%;}
.col2 {float: right; width: 64%;}

/*====== ROUNDED CORNERS =====*/
.sw, .se, .ne, .nw {
    position: absolute;
    margin: 0;
    font-size: 1px;
    height: 5px;
    width: 5px;
    overflow: hidden;
    padding: 0;
    }

.sw {left: -1px; bottom: -1px; margin-bottom: 0; margin-left: 0;}
.se {right: -1px ;bottom: -1px; margin-bottom: 0; margin-right: 0;}
.ne {right: -1px; top: -1px; margin-top: 0; margin-right: 0;}
.nw {left: -1px;top: -1px; margin-top: 0; margin-left: 0;}

#timings .sw {left: -2px; bottom: -2px;}
#timings .se {right: -2px ;bottom: -2px;}
#timings .ne {right: -2px; top: -2px;}
#timings .nw {left: -2px;top: -2px;}

#progress-bar-wrap .progress-bar-segment-start .ne, #progress-bar-wrap .progress-bar-segment-end .nw  {height: 13px; width: 13px; top: -11px;}