@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Original videocontrols.css by Mozilla. Skins by Ken Saunders - www.AccessFirefox.org */

.controlBar {
    height: 28px!important;
    background-color: #E9E9E9 !important;
    border: 1px #999999 dotted !important;
}

.playButton {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAYAAACGVs+MAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAASdAAAEnQB3mYfeAAAAAd0SU1FB9kGFwEyNQFqh6QAAARxSURBVFhHjZfZS2tXFMa9t1UQWkRBJc6zcYjGxDGamMF5nud5iEP0UkEvFt9EFBSkQhWpIGyLUPs39N724XJtKX3wrXDf+lcUiq5+K9Q0OTk728D3cla+vX77OznrZL+KCv+kFRYWOqKjo1+hRNry09PT56j99fDw8EtQLToxMdERHx//xePj45PW81lU1Gt8/vnz06f3qP2t0/P/S1VVVZcrKyu0tLREi4uLYXq+fnFxYXl2obltaHCQlpeXaWF+PlwLC+RFzefzfROxORedTuftxsaGH2BZR3x9w+eju7u7vufFDAaDZ25ujlZXV/0QeuLa3t7eR6KwUEOZHA6HWMOXdXfy3+5WkdAPt7ddz87U1FTX1OQkLSExmY9rX+/uvlcC2O12seL10tzsrFQc560GYGJ83N9c5uPa7tu3aoD6+nrBMc9MT0vFu9ECjI2O+pvLfFzb2dlRA9hsNjEPWo5UJt7Nzc1N4BYkJye7RoaH/c1lHq5tb2+rAWpra8UsaMcRqUxc1wIM4imYBLTMw7WtrS01QE1NjZgG7SgilYnrWoD+/n5/c5mHa1+9eaMGwBwQExMTNDQ0JBXXr6+vQ25Bb28vjYyMSD1c29zcfAGA1Sr4BzWAHcnEdS1Ad1cX8TCSeQYHBmh9fV0NYLFYBO+edyTTMH5wV1dXIQl0dHQQ3waZp6+vj9bW1tQAZrNZ8EJd2JFMA9hNMEBCQoKrtbWVenp6pJ7u7m7yer1qgPLycsELtbe3S8W7vLy8DCTAAE1NTdTZ2Sn1cEKYL2oAk8kkeKGWlhapOBktgMvlora2NqmHE8L8UAMUFxcLXsjj8UjF6Zyfn4ck0NjYSM3NzRF9MzMzLwAwGkUz4nQ5nVK1Ip0QgLg4l72hgTxud0Tf1NSUGgB/RoQbcTrsdqmakM7Z2VkggTgA2OrqyIkUIvkwP9QA+fn5guPES0kqvt9aAExQakAKkXxjY2NqgLy8PMEL4Z0gFf4z0OnpaUgClVYr1UXw1AIQ80MNkJOTI+oQJ0ayVLxLLYClooKqq6ulnsrKSsL8UANkZmYKbo6JKBWnc3JyEpIA5gdZkYLMVwFADDg1QHp6urCiuRkL6okbVQMwGCA2NtZlKi2lCrNZ7isr40mpBkhLSxMYx4SBpKtSNOKdHh0dBRJgAMwPKkOTSD4MsBcApKSIMjQvwYJ6Ki4q8u9UC2AsLKTSkpKIPoxjNUCKwSBKsJDRaNQV5oR/p1oAPL5UBDiZr6CggNrb2tQA+H8neCE26Ikb8W04ODgIuQV4fInhZD6u4/3yMgBeiA16ys3NJb7fWgA8vsRwMh/X8a5QA+CY9T0vwgY9ZWdn+2Pe39/vfD6YxMTEuLOysojhZL4s+PCCe6c8mCQlJYlcNM/MyCDMhDBlpKf7d3p8fDwUBODk7zKEnoev4fREbrf7dwC8jng+RAImnA1+BO3PMPykFU5O73Bu+HB/f18ftNCXeDq+xQj/A/oNkzJUNtuvOHM+HB4efgcAPnUHPv8CaizL2lVk0KoAAAAASUVORK5CYII=') no-repeat center!important;
    /* Remove the native button appearance and styling */
    -moz-appearance: none!important;
    margin-left: 2px!important;
    margin-right: -20px!important;
    padding: 0px!important;
    min-height: 28px!important;
    min-width: 28px!important;
    border: none!important;
    position: relative!important; /* Trick to work around negative margin interfering with clicking on the button. */
}
.playButton[paused="true"] {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAASdAAAEnQB3mYfeAAAAAd0SU1FB9kGFwE2J5a/M+gAAAOXSURBVFhHvVdJTFNRFNVoYmLEENMEJJUZCpWhzNDS0jJ0gDJDoRQKlBmasFFYkBhjHhtRI91pwgJMXIExLmVFTDBhoXFBojuCG911g24I13N/+NHIUCi/bXLy0+a/e8497917+y5dOvzEx8dnZWRk6OXvUX/q9frHoyMj5Ha7n2VnZ8dFXYDJZJr3+/3kn5qigYGB762trZMQcSVqQoxGoxgbG6PBwUEaHR2l8fFx8ng8H+vr621REWEwGAQTI3sa6O+XnmP47oOgrq6uVxUVFZqICmEBw8PD5PV6/6KvTxLDwnp7e4PYlocxMTE3IyIEGQqfz8dER+HxUD+EDA0NUXd391dsS6/iIsrKygRn2+N2nwoWwi61t7e/N5vNypVtSUmJ6IPl2O+QgAvUDxEul2u/sbHxhVarvXNhR1hAT08PdXZ2ng0dHZLQPmwZ3Phhs9nuQcS1sIUUFRUJDtjW1nZuwAlyw5WmpqbPVVVVzWGJKCgoEJx9S0vL+dHcLK1xYT0n4HA43iIh3bmE5OfnC16MPb0Q4AJ1YHucTuevmpqahdTUVNWZhOTl5YlmZIISUwScSCtcsdtsO5WVlcMQcflUITk5OaLR6eQFisLZ0MBuENz4gINefaIIlJJw2O1UV1urPOrqJFeteGLqLqekpBwt26ysLGG1Wqm6ujoisFgsZDIapYM6Pz8fOOJEZmamgE2EMlIcBr2eLGYzD7a95eXlpwcHBwnHCkBrJRwYxYD5QoxOVMXCwsKbvb29whPPQHp6umCL9FhwISDb8vJyKi4uJjvO1MzMzKetra22kKWIehVsFYZS+CgtJTQ0yUGM9p+rq6v3Yff1kOT8QnJysmByVh4OdDodoftxJ9wPBAIvQZx6JmL5pcTERMHEnMFZUVhYSOighB5CXEFzc3Pru7u7xnMRyy+r1WohB+SgoYDOSShdrmuamJj4tr6+7iWisLilReqEBKEDcS6yCQWNRiMJxPAKLi0tPYLdt8JnPlyZAAG5ubmEjngs7uJ39ArSAJj9JIR4DWLthYnlALgZCSZhW/8HE6N9SnZPT09vbm9v2xUjlgPFxcUJJmYyGbiqUVJSErEzuCPsrK2tTWKfrypOzgFZABOjIUlAVVBaWhoPkd+Li4vPYfftiBDLQVUqlZAzRkUQ7gk0Ozv7LhgMFkeU+B8BT9huLi/8//+ysbHhigqxTBIbG2uE3ZsrKysPYPeNaJH/AVYHb/UqnA8GAAAAAElFTkSuQmCC') no-repeat center!important;
}

.muteButton {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAASdAAAEnQB3mYfeAAAAAd0SU1FB9kGFwILOHMZyPoAAALWSURBVDhPnZTPT9JxGMerg7aSQy6T4agocjJhCBgCAooIDFB+M34JiA5ZAoF5bauZtjlrDa95Y3Xqb+jopYNbxw6tWLZ1aevSt05P7werwTKGfrf3vt/Ph8/n9Tzvz/N8OHPmhI9MJrsSiURsJ9x2/PLBwcGBRDx+UFhZoVqtJrLb7YZoNJo7FVwqlYpj0ehBsVikpaWln3t7e33BYPBhtVqlXC6nPxEUNqXI5G2hUKBsNkuLi4tCvV4XeTyeYLlU4nG9a6BCoZBHwuF3y8vLlEomaSGVovTCglDb2ro8Pj4uS6fTPD4sl8s9x0HPY7L3t3q0Wq0+EAg0spkMxWKxpuLxOCUSCWFzc1OCdWdDodBnhsK2ohV4zuFw1PHjR7/P98F3pPd+v/8HA8KhEIXD4aZQYYJ9YX19/SoD5ufnX/MxJJNJXyvwosft/soZ/NnIbxw6IQAB/FfImOeFSqVyjQEup/M5LFM8Gi23AZFhA1mR1+vtqLm5OUJWQqlUus6AqampB5wIgmy0AW02W8PtdpPT6ewol8tFkIAi3GCA0Wi803Ti9z9pA5rN5oZjdpZmbLaOss/MECSsrq7eZIBep1thV8h8tw2ISI3p6WmyWCwdZbVaCTaFfD7fzFCrVldwjgR3T1uBfeipT+bJSTIaDB1lMhpp0mQS0CYyBqjV6secNWrwqBXYq9FovphMJjJMTBwJ4Am8Eegf6fV6Aa3SrLJKpXpphSuc6922xkYTe2G7BsguCwGeYe4VRJqxMRprEeYE9KKUAaOjo284OM4x0Ab830CpVG4wTKVUEr6bgk0hlUqJsecCruY3HYLiPiu7AvKikZGR+8iEsJnwzVBhbW3tUn9/v47n4OZwf3+fr233z/DwcJVheDP0+/b2dp9EIskzEJV/0T2pZSX+xoq35HKSQ7gpIrFYfI+LhmtoORWQNw0NDZVxpo2dnZ0BDEWZTOZ2K+wXQOZxwo5FlBYAAAAASUVORK5CYII=') no-repeat center!important;
    /* Remove the native button appearance and styling */
    -moz-appearance: none!important;
    margin: 0px!important;
    padding: 0px!important;
    min-height: 28px!important;
    min-width: 33px!important;
    border: none!important;
}
.muteButton[muted="true"] {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAASdAAAEnQB3mYfeAAAAAd0SU1FB9kGFwIKGSZr6eUAAAHISURBVDhPpZRdS8JQGIC9iSB2EQiB14KKH/g5Nc38nulwblPnVyi2VNCB+j+Cor/Qz4gugnVT0E33If2FfsDbewxDEzaZg4ednY/nvOc958xkMv5Qoigyxodvjjyq1+uPymQCs9nMua+UqlarT5PxGIbDIUyn06hhIUVRxzVRfB6NRtDr9eCq34f5fE4bEprN5hNBEF6vZRk6nQ5cIt1uFxRF2Ul4iLOuOPD7/Q6O4z5IVI1GY0mz2YR2uw0YrbaQYZgb3L1FheMWKCF8ViqV7xYKMHcbSJIEsixrC8vl8juZfX2wKAiA0i1wYn3hRaGgksEsy+qC0ZM8akeYzWbVUqkEuHRdisUitFotbWEymVSZfB4y6bQu+VwOarWatjAWi6lplCUSCV1SqRTwPK8tDIfDL2fxOJxGo7qQfjzLagsDgcBbHDtGI5FfUBzBNx0KQegfpB43T1vo8/nOcdl32PmeEAwGb/FgPyBAwPY/sI1s3E43Zet6ut1uxev1gsfjASwvId+ZTMaYkMxgt9uHLpcLnE4nOBwOIOW9hERqtVovUQw2m20pxdNgPMJVHlAqIUspTdPG/4fribVYLBLm8GswGLjX638Aic4WrMAJeqkAAAAASUVORK5CYII=') no-repeat center!important;
}

.volumeStack {
    width: 26px!important;
    height: 70px!important;
    background-color: #E9E9E9 !important;
    /* use negative margin to place stack over the mute button to its left. */
    margin: -100px -1px 34px -25px!important;
    overflow: hidden!important; /* crop it when sliding down, don't grow the control bar */
    position: relative!important; /* Trick to work around negative margin interfering with dragging the thumb. */
    padding-top: 4px!important;
    padding-bottom: 7px!important;
 border-radius: 0px!important;
    border-left: 1px dotted #999999 !important;
    border-top: 1px dotted #999999 !important;
    border-right: 1px #999999 dotted !important;
}

.volumeControl {
    min-height: 64px!important;
}

/* .scale-thumb is an element inside the <scale> implementation. */
.volumeControl .scale-thumb {
    /* Override the default thumb appearance with a custom image. */
    -moz-appearance: none!important;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAASdAAAEnQB3mYfeAAAAAd0SU1FB9kGFwQ5AlzoOYsAAAGdSURBVEhLrZJLTgJBEIbF6MIjEB6BQCAzMgQIbwIY3nF0CAIjDCIMgYQV4jH0MBg3Jt6kXLrxCi7LassblJ186erFfPV3TXuOeJ3+gX9nyeahj7+V4GQ4HL4uFouPmeOAlJXrQr/ff1LiM5J9Pux2uN1uxTzu9zgajd5+xbZtw2azweVyKUaFGwwGh18xdYDVaoXz+VzMZr1Gy7JYTB2AZoyO44hxXRevTZPF1AHuZjO8tW0x93TrXq/HYtM0YTKZ4PDmRowznWK73WZxt9sFenJIz0TMeDzGZrPJ4larBX3LQkouhv4X1mo1Fl/U62BeXmK30xFzfXWFlUqFxVRAh6SNRkMMjRWLhQKLi8UiKCldQQzNF7PZLIupgGq1iuVyWUydwqXTaRanUikolUqYz+fFqHCGYbDYSCQgl8thJpMRo8Lpus5iXdOA4mMymRSjwsXjcRbHYjGg1Hiu62KShoHRaJTFkUgENE1TncTQGDAcDrM4FAoBpVadxKhwwWCQxVR8/afY7/e/K/Gx1+t9psOLz+c7SFGeQCCw/wFvUPjocm+LswAAAABJRU5ErkJggg==') no-repeat center!important;
    min-width: 22px!important;
    min-height: 14px!important;
 border-radius: 8px!important;
}

.volumeBackgroundBar {
    /* margin left/right: make bar 8px wide (control width = 28, minus 2 * 10 margin) */
    margin: 0px 8px 0px 8px!important;
    background-color: #B9B9B9 !important;
 border-radius: 8px!important;


}


.durationBox {
    -moz-box-pack: center!important;
}

.durationLabel {
    margin-left: -22px!important; /* 1/2 of scrubber thumb width, for overhang. */
    padding-left: 10px!important; /* don't bump into the scrubber bar */
    padding-top: 0px!important; /* center vertically with scrubber bar */
    color: #000000!important;
    font-size: 24px !important;
    text-shadow: 0px 0px 0px black, 0px 2px 3px !important;
    font-family: Arial, sans-serif !important;
}

.backgroundBar {
    /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
    /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
    margin: 10px 22px 10px 22px!important;
    background-color: #7C7C7C !important;
 border-radius: 4px 4px!important;

}

.bufferBar, .progressBar {
    /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
    /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
    margin: 10px 22px 10px 22px!important;
    -moz-appearance: none!important;
    border: none!important;
    background-color: transparent!important;
    min-width: 0px!important;
    min-height: 14px !important;
}

/* .progress-bar is an element inside the <progressmeter> implementation. */
.bufferBar .progress-bar {
    /*
     * Note that this is drawn on top of the .backgroundBar. So although this
     * has the same background-color specified, the semitransparent
     * compositing gives it a different visual appearance.
     */
    background-color: #C0C0C0 !important;
 border-radius: 0px!important;
    border: 3px #C0C0C0 solid !important;
 border-radius: 4px 4px !important;
    -moz-appearance: none!important;
}

.progressBar .progress-bar {
    background-color: #000000 !important;
    border: 3px #C0C0C0 solid !important;
 border-radius: 0px!important;
    -moz-appearance: none!important;
}

/* .scale-slider is an element inside the <scale> implementation. */
.scrubber .scale-slider, .volumeControl .scale-slider {
    /* Hide the default horizontal bar. */
    -moz-appearance: none!important;
    background: none!important;
    margin: 0!important;
}

.scrubber .scale-slider {
    /* abs(margin-top) + margin-bottom + bar height == timeThumb height */
    margin-top: -10px!important;
    margin-bottom: 10px!important;

}

/* .scale-thumb is an element inside the <scale> implementation. */
.scrubber .scale-thumb {
    /* Override the default thumb appearance with a custom image. */
    -moz-appearance: none!important;
    background: transparent!important;
    border: none!important;

}

.timeThumb {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAcCAYAAAAX4C3rAAAAB3RJTUUH2QYXAi0go6vTiAAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAACYSURBVHja7dc9DoAgDAbQ1jCwQeJdvKfH8EqsXgAOoAjRSePPUNOS9EtKB5LmQVhAAMjQQExdYozcjsd476HjRnyNQhUqPQpVqPQoVKHSo1CFSo+hGOKcu91LKZFAm7lRBILPXc73IxCR+4wXrC215j21W27TEzYc0EA9m/qNTqcuM+Umh1JL7dyWN2hfaq6d2/IFO/4xdwPj50IVHT03dgAAAABJRU5ErkJggg==') no-repeat center!important;
    min-width: 42px!important;
    min-height: 28px!important;
    margin-right: 8px!important;
    margin-left: 8px!important;
    -moz-box-pack: center!important;
}

.timeThumb[showhours="true"] {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAgCAYAAAC2COBlAAAAB3RJTUUH2QYXAhoda8Q/rQAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAChSURBVHja7ZPBCYNAEEXVFmIHWohgW3PcBtJGLlYg2IQ37SA5pAHND+xBvO8uf/gPPh/mMvMWtqocU5vZWfqIVDSlD5Cc5CTnB8mxIjlWJMeK5FiRHCuSY0VyrEiOlTr1AjP7P+CMDJfxgowhhINaLgp2qO0y6iG2p96bRS4KvlEP5AOxNsfOnH9uurUruRdyxnYntyLf2P7Av3uWvkEw8APB+Br5jrZwkQAAAABJRU5ErkJggg==') no-repeat center!important;
}

.timeLabel {
    color:  #000000 !important;
    font-size: 18px !important;
    font-family: Arial, sans-serif!important;
    text-shadow: 0px 0px 0px black, 0px 1px 1px !important;
    padding-top: 0px!important;
}

.statusOverlay {
    background-color: rgba(0,0,0,0.55)!important;
}

.statusIcon {
    margin-bottom: 28px!important; /* same height as .controlBar, to keep icon centered above it */
    width: 36px!important;
    height: 36px!important;
}

.statusIcon[type="throbber"] {
    background: url(chrome://global/skin/media/throbber.png) no-repeat center!important;
}

.statusIcon[type="error"] {
    background: url(chrome://global/skin/media/error.png) no-repeat center!important;
}