@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: #FFFFFF !important;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAIAAACcd2qBAAAAB3RJTUUH2QYYAAcnCUNOOwAAAAlwSFlzAAALEQAACxEBf2RfkQAAAARnQU1BAACxjwv8YQUAAACQSURBVHjaxdbdDcIwDEZRDH6KCjTipfvv0QEqMUtakgjqJP1hi+sFjizL/izvabwQpU8/MLDvXwgsv/Rl4FYaA+/HjsBXRP2XHhsEt1oZOKbEwJ95ZuAQAtRxjAwcU2bg1VYGNjMGLlYYeGtMSOhNlYHvj46Bve8Z2DnHwErNWEQYuFZonXKGbjUWi8vCPAInu3M2qQHtfP8AAAAASUVORK5CYII=') !important;
}

.playButton {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAB3RJTUUH2QYYABwdZnlcEwAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAEySURBVHja7ZUxS8NQFIUTqVFKBZUsmroUMomD1FBcdfYn+Ov8CZ07l1KdWrFWcKgKJYNTGzWBpueWWyiPl8ReMr4DH/f1nvQebmgayzIyMlJk/+OafVADe/z5D8xADJwM71caSGGNx17nebN51bq9QPkEdXiDdT/FuKB1c47je1ZopSCwCgLfv1T7Td6wqfECMJUG0q3yDo4O1f4ZGFLVeN7GLd46kOQskoXa2wU7VDWekzesKJCG2h+Tia6/QuPZ7Ik3tF7HY5EnDpyGocgTB85n9GjZGd68/ECvfprjnZQf6LquyJME0m8+jaIfXX+FxkvZE28Yj0Yvai/hoYnGi/OGFf2XHoM7cA987r2BB9AF1xleG3xLNoxAn88e1y/wBEKuqtfn74k2JJX6ejIy2lpLIjlhCqFw9wkAAAAASUVORK5CYII=') 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: 28px!important;
    border: none!important;
    margin-right: -22px!important; /* 1/2 of scrubber thumb width, for overhang. */
    position: relative!important; /* Trick to work around negative margin interfering with clicking on the button. */
}
.playButton[paused="true"] {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAB3RJTUUH2QYYABkClgalowAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAIeSURBVHjaY2AYBSMFMEExxYCRgDwL1CIWKP8PEP9DwlS1EGQJBxBzATEnVOwXEH8H4h9QNsmWMuORYwNifiCWAmI5IJYAYj4gZgXi/1AMs/A/pRaCgpEbaona/j0bF378+In9xs3bbFBxJjRL/5FiKa7gFANiOyAu+fju3X8Qnj1z5j0JCYn5IDEg9gdiAyCWBGIeBkQ8k20hyCAPIO769x8BHz95/DM4OPgoULwbiJOgjlIGYgFoNJBtoTTUF9P+/PrzHx2vWb3mpaSE5BKgfCHUYaoMkDjG61N8ccgDtVQtMT7B+NPHjwzIWEpSkjs8PEL7y5cvXJcuXXoDVPcVin8yQLIPTp8QAkw3b93C6eDoqGh7M1Mz6d6+3qYHDx88A4p9hDoYa5YhKqJfvHqFV/7t+3cMf/7+IcYooiz89/XLFwZsZcSPHz/+bty04cihQwc3ALmPgPgbA6I0IstCUN76Ky0jhSFx4sSJVzNnztz9/v37s0DuDSAGBednBjzxR8hCkCtBCeCLiIgIXPDNmze/JkyYcObAgQPHgNzrQHwHiJ+CQpYBUuSRbeFfaBC9+vbtO1hg376992fPnn3w7du3V4Hc20D8EIhfQn1G0DJ8FoJ8Byqc3wHxg/Pnz73fsGHD1uPHj1+B+uYBED8H4vdQRxFdkOOrLUA1hSADpDwVhTruKzTo3iL5iqSqiu7VE90rYGIB1ZoYo2DoAwCdWu2IZ0pxLAAAAABJRU5ErkJggg==) no-repeat center!important;
}

.muteButton {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAcCAYAAADvANYcAAAAB3RJTUUH2QYYACI0ZQ7fAgAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAALvSURBVHjaY2AYBaMAFTBTwQwmqDmMA+UIViDmA2IhIGYD4j9A/I+ejgA5YPGiBdNyJCXFOU+fOf8OyP8KxL+goQLC/4kxiIkMyxlhDpg0sT/cwzPA/MOHbzpAvhwQcwMxDxALA7EAEHOQaQdOx4IsZodatHLu7Ln/f//8DcbBQcGHgGLJQNx+6MChifr6+qFAtgsQq0EdRbFDQAbwArE8EGsD8eZ58+f9/4cE/f39zwHF+x0cHMD8z18+/4qLi1sLFEsCYi2ow3EmXBYiHNE4f/4Ct+/fvvF+/vxZRFlZWdTPz5/hz6+/cAX//v0DOVTN1tYOLM7OysHa3zfB/+nTp2x79+79AZT7AsQ/GSAJlyxH1Dg7OKIIvHj2DIX/4/sPkC/3TJ8+jVGAj88zNAQUGwzMBXn5dkBHXAWybwPxa0ocwfDgwQO88t++fQNRX9+8eZNXXFqymIWF1cLQwICBn48flH2lGCCJFGdOJMoRz1+9wiv/89dPGBPk00NHjh21kJCSgomxQe2hKE0wfP70Ga/8n9/wUAb51k5BXgFZzy+o43CWGUQ54tfPn3jlgQkTRIESZ6m3l4+FooIiWM/Dhw8/gQISiD8A8V9c+olxRMu1G9fcvn//LvTv318FOzt7Fm5ubhQFbOygEGeIz8rKtgBmU7j4tBnTjgOpK0AMis/flDiifsqUyV0MkFLQ9OjRowv6+/u5eHh44Ao4ODhAQXHx8uVLFuHhYQxAB/9ZuXLlkStXLm8Eil8C4rf4QoJYACsxQcWwnYaGxqvVq9f8P3LkKBjb29uDfJwCxIvmzZu/0cbGNgPI9mGAFG78DNSprTEcJM3Ly3tz4sRJ/zdv3vLfyclpHVAsnAFSqoJqVFDWEANiLgYiimxyXAhK5V9+/fq1+siRww7y8nI/nj9/vu/u3btnGSCJEJQtQLUpqPD4zUBETUp2QwSqF5Qi+aE+/g7EHxkgxTNRVTg1HAHTzwTFIIv/kuqAUTAKBi0AANH8DPqjZKQNAAAAAElFTkSuQmCC') 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,iVBORw0KGgoAAAANSUhEUgAAACEAAAAcCAYAAADvANYcAAAAB3RJTUUH2QYYACU0Kk9JxQAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAIQSURBVHjaY2AYBaMAFTBTwQwmqDmM5BpAtkYgYAdiESSPfAfiT0D8C4j/0yMkOIBYF4h9lyycUSsiKsx39tzFN0D+FyD+SaojmMhwACcQ6wFx4vx5c8rcPPwsP336rg3ky0IdR3LospDgWBaoA3SAOHbJoiUx4eHh3CDJX7/+SAEpPnJDlpAjWIFYCIj5obQSEHsvWbokMCoqihOm6M/fPzxIZlE9JEAJL2DB/IXxX75+Efj29auAqqqakLe3N+ufX3/hiv79+wezmKyETowj/J0cHMyRBV88e4ai6OePn+TYTZQjQL4CRYfogwcP8Bry7ds3RnJDgZiQABv+/NUrvIp+/KRdSIAAKL////zpM15Ff/78oZkjQA74DcSvfxHw6f9//0gqnEgNCVApuPHajWuC379/E2ZkZBKztrbm5ebmRlHExs4GczTNHLFuypTJ+4C0NBBbHD9+LKa7u1sD6BB4QmRnZ4c5gCyHECq2QdHxEojvAPExIF5y9erV7srKytNv3rz9x8zMwgDBzKD4ghUcJDuE2GIWZDAo9YFS6OOXL18+3LVrp4COjq4sGxsby4kTx88Ds/FZoNxDBkglRtNaFGQ4qMp+9uPHj6dHjx79ICcnK/rs2bOD9+7dOw0Nte+kOoLcAgakjwuIRRkg6eofEH8F4o8MZFTllDRqQIAJagYT1OK/pDpgFIyCQQsAKuaq5hwIqRYAAAAASUVORK5CYII=') no-repeat center!important;
}

.volumeStack {
    width: 28px!important;
    height: 70px!important;
    background-color: transparent !important;
    /* use negative margin to place stack over the mute button to its left. */
    margin: -70px 3px 28px -31px!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: 6px!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,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAAAB3RJTUUH2QYYACkici6zmAAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAF7SURBVHjarZPPS8JgGMffckZQrhktD17EkKQukub+gKKL/0F/Rofo6DECs3u3juG5qCA8eBEVY+GPEGQQBBbZWuoh1+z75AQrUJu947PtHXs+PO/zvg9j/zQm+t4nQQj4AD8kTgMVkAVGv8gOtg72ozuhYCDI8465gRbt7TWbu8nt7kUPMb0EbfrOAeni7FxuqFrnL1AMxZoOJsSP4qdGx9pFseSgpfnKxXLa4/E4rRRZUZQX/4pfopTEVrPpLBYKVjeMEhBJNFupVsfbezhIxNWf6+OKOBLpzVZDc7lc/PdjNdqo1Wp0pnQSNUqlYiYcXt+wkkoyeZ0hhw236Xw+3/Z6lwJut9thGAYblVQq9RCLxY7huKW1CGAVbEYikW1JkryCIHCDslBVVZdl+T6RSJxgegUKJKKgebAM1oAfLIApM65XuI75fAe0O3cgB0o07/1EMmrURSCCGWBjv6tPsg/QAk/gkXUbuP2z++2m1DakxiTTWbdZv7r/E5Px9LovfAvcAAAAAElFTkSuQmCC') no-repeat center!important;
    border: none!important;
    min-width: 18px!important;
    min-height: 16px!important;
}

.volumeBackgroundBar {
    /* margin left/right: make bar 8px wide (control width = 28, minus 2 * 10 margin) */
    margin: 0px 10px 0px 10px!important;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAACWCAYAAADjY8m4AAAAB3RJTUUH2QYYADoGL8IW2wAAAAlwSFlzAACZogAAmaIBqhLIugAAAARnQU1BAACxjwv8YQUAAABtSURBVHja7dCxCYAwEEbhPw6httoprmRWDiJGHCIzRLCy0SAiAXlXXPU4Ps5I6rbV+aYdNDmnefGq6lIhBFk79oUuJx77JtDrwJyDmMfwDJnpUSBBggQJEiRIkCBBggT5J2TSkLwAEiRIkF8jdxWfLVTzUyLfAAAAAElFTkSuQmCC')!important;
    background-color: rgba(255,255,255,10)!important;
  border-radius: 4px 4px 0px 0px !important;
}


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

.durationLabel {
    margin-left: -22px!important; /* 1/2 of scrubber thumb width, for overhang. */
    padding-left: 8px!important; /* don't bump into the scrubber bar */
    padding-top: 0px!important; /* center vertically with scrubber bar */
    color: #000000 !important;
    font-size: 16px!important;
    text-shadow: 1px 1px 0px white!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: 9px 22px 9px 22px!important;
    background-color: #C7C7C7 !important;
  border-radius: 4px 4px!important;
    border-top: 1px solid #000000 !important;
    border-bottom: 1px solid #FFFFFF !important;
    border-right: 1px solid #FFFFFF !important;
    border-left: 1px solid #000000 !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: 9px 22px 9px 22px!important;
    -moz-appearance: none!important;
    border: none!important;
    background-color: transparent!important;
    min-width: 0px!important;
    min-height: 0px!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: #000000 !important;
  border-radius: 4px 4px!important;
    -moz-appearance: none!important;
    border-top: 1px solid #000000 !important;
    border-bottom: 1px solid #FFFFFF !important;
    border-right: 1px solid #FFFFFF !important;
    border-left: 1px solid #000000 !important;
}

.progressBar .progress-bar {
    background-color: #747474 !important;
  border-radius: 4px 0px 0px 4px!important;
    -moz-appearance: none!important;
    border-top: 1px solid #000000 !important;
    border-bottom: 1px solid #FFFFFF !important;
    border-right: 1px solid #FFFFFF !important;
    border-left: 1px solid #000000 !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,iVBORw0KGgoAAAANSUhEUgAAACYAAAAgCAYAAAB+ZAqzAAAAB3RJTUUH2QYYAyEvxgD7dAAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAATcSURBVHjaxZhtTFtVGMfPvaV3lL6sW9th11X6ZeuYGrK5+boZEyDGDxAwRkxcjEONMTH6EaN+nE3clzljYozKjMlQjBFaEowp1c3O1/HyAYEtixvYlQotoba3LfTlXp+n91xamnYFyuqBPyfn3N77/Pqcc57nuTCkfGPyeqZgbiNNzOvFgrmyRktdQ7EgBVUN7dkC0FJAKAGUAaVpn6Fz+aAbApMNIoAStANUC1JR7aDzits8QzaIECnQKihBtULHKXq9KCBTZIxe4UB1II1Go9517Ohh24njDx89eHD/Q/V7THaOU9axrIJjWUbBwh9BEESGYYgoikQew29GEDLJZDIVX1gMXrt69fpv3su/jl4ZnZjl+dgyPJsHxUFJ6k2xFBhLgdArO0GGN15/7bGurqdfUavV9RzHAQyLINllRJA19wCQDFY4j50gNaSMx2Kxhf7+bz4+98GHP8G1JdC/1JNJusTrwFi6RFqQ6Z2332p5tuuZV3U6nVmlUmkozLY0JEwkEnwkEgl81f/1R6ffdYzAdBAUpUss5O8njnrJ7HF7eg41HmoBKCMuy3YBFQEUAS40PTM90tza/B5MBaj3kvKy4p7SgxovXbz0ZTQS5dOptFgtoT20i/YpR40MjyfO0vNmT3eUj4Zh21b9B+2ifeSgPNmV0oAOTE5OetLpdEY6UdUV2kX7yEF52Br5NNbvuesAERlWyJQNynegMWzWvrTXWXl/IUkmFAwu1KlUlnVxoEoNwoqI9kku4GbBcJBwupyuk8+dbFIoFDWVGNlKy0BD+0SKZ1k49A6mF73ZbLYPDbpcELd2VRsM4tpyW0d7eyAQuAbDMCiN3sGAloDJwIW+C2c6OzpPY4SvFhRmhIHBgTNon3osm+BlMIy4y2fPve9iWFbzwLEHu7VarflOQ0Wj0cAfV37vRbtonxREfrnHE4FH1XjqVPcTVuvdjzc0NByHLG7abiCe54Nzc3OXfb6/L54/3/s9TIWIlNTXon5hEkcPYlWh0+v1pra29mar1frIvn3WRyGRGysFggQeunXL97PP5/tlaMjlCYfDmCMjRKoy0qRIEs8fK0iuytCCxwydHU+1AmijwWC8z2KxHN4skN/vn1haCk0CyMzA4Ldu8BhWFZi05apiLUyUApPn8gtFBFSjF48cuf+elubWF/Za9p7glJy6HFAylYzN++e9Ix735+PjY1PUOzEKtKlCsRQgLjGWRTqQ6aUXX37eZrM9CR7cX+pm8ND12dnZ7z797JMviFTWINQqyZXYty2ty4UF+eb8EnllfGJ8ZmV15abdbr9Xt1O3W8kpSb4gKf/ldA46IGg64fP/ECk2JUhuH5XNexuNV4WAKdjAywbD7nhTUxMeDGVtbS1BQeZIeDwjZ4eHhzEpLxJpL8nV6YYT8WYqU/mNB43g0Q719fW55+f9P2i1GiILxzhP1oeATUFV0vALYVixGY3GNq/XK4BE7HGM8/T6lkvyrd6I3x6XNBYKhRbi8fgivhZgj2MinbxUJV6qBExOZZEbN27+CLUewZ7kTl9Fy1fJ249AvcKPjY26Ie+J2BNpX6VIXhSvNhg2PP6JqanpP4PB4CL2JBcW/teG4QY3eb3D4ejFno4rLpsqLaPzcytmB/RU0dxXbTD5GfJ/f+RDUXHM+g9x8oOgI5+JsQAAAABJRU5ErkJggg==') no-repeat center!important;
    min-width: 45px!important;
    min-height: 28px!important;
    -moz-box-pack: center!important;
}

.timeThumb[showhours="true"] {
    background: url(chrome://global/skin/media/scrubberThumbWide.png) no-repeat center!important;
}

.timeLabel {
    color: #000000 !important;
    font-size: 10px!important;
    font-family: Arial, sans-serif!important;
    text-shadow: 1px 1px 0px #FFFFFF !important;
    padding-top: 2px!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;
}