@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,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAIAAACcd2qBAAAAB3RJTUUH2QYYBRI2Uo1KNgAAAAlwSFlzAAALEQAACxEBf2RfkQAAAARnQU1BAACxjwv8YQUAAABJSURBVHja7c25CQAxDARAG67/RgUK9CAEClzBpd7AOw3MWiBbVSHxNzOYuLsfi6uK8Z04Mxnfid0dE0cEJjYzTCwikJiIiOjXAb6LKGJqQ2VSAAAAAElFTkSuQmCC') !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,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAAAB3RJTUUH2QYYBTM4Oapy0gAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAACfSURBVHjaY2CgEWgA4vtA/J8Avg9VixXMb2ho+H///v3/hABIDUgtSA9MMyOUTujo6JgfFBREkvPXrVvHUFFRkQhkLgAb5OXl9TI7O1uMnLCYOnXqq23btomzgDja2tpit2/fJitQQXqBBjGADfr27RsDuQbBANggSg2hqkEwcJ6BcNrBhc8jG5RAgUEJ6K6aT4Yh8xlwgAIGKmSRYQYAw0qOrQQK104AAAAASUVORK5CYII=') 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: #FFFFFF !important;
    font-size: 12px!important;
    text-shadow: 0px -2px 0.5px black!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+ZAqzAAAAB3RJTUUH2QYYBSk5/oC4nwAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAJ4SURBVHja7ZbPixJhGMefcUbdUKRYJBQWhCCMJDwFBrGKYwgd+we6eAoEDx0KpMK2PRRrCZ08d+8SCCp6aqGTG0LQYVdYVpFhKVylzZlxel59NRmcdtymmYX2Cx/G98e878eZed8ZgPMsF0ZHHxa5jESQJD1eRC4gdtou07GUubKI/EC+I9tIiR67tP2vxCJ2u/1lIBC4yvP8pWQyyYbDYcbtdoPD4QCWZcFms8FoNAKGYUBRlFlZlmUYDofQ7/eh0WgopVJJrlQq31qt1ldRFB9SyaXFbiGbiUQinM1mPT6fD1wuF3AcN5YZn8j8PpUITcXU9SREUpIkGAwG0Ol0IJfL9crlcgObHiEf9Yo9icfjD9LptNfv94PH4xlfBaNCrmav14N2uw2FQkGoVqtvsfrZSWJPM5nM42g0avd6vYYKLRIUBAHq9bqYz+dfkLm1xG6kUqlPsVjMSZ4hs0KewVqt9rNYLN7E4udpPTf9EQqFXgWDQSfpSDAzZF4yf7PZvLNILELuvdlSJOS2kvlRbFY3E8PVxJIVY1XI/PPlmRiukl3cEq5bJYZbye5CsW63u4Gr8B0zvxGZFNzvFLydG1rtTkSAyWvFbAQ6v2YSiGSylETnPTH3kD2TpPbofLqzjjxH9v+R0D4df30ZqWnIJw2PbCIHBgkd0PF4Or5m9KxAjg50DYkjd0/xJz8gVeQLUoHJc2Vo1pDXyJHOK3RE+68ZLaKV+zD50PuT1DbtZ3quIDsaUju03bLcRo5VUse03vJsqcS2rBaaZkUltmK10HwOqdShUQMa9VH/XnU8MyEvYQV0vozNzCpMNtNVq0UW5Y3VAv93fgFy/2WOfYCBSgAAAABJRU5ErkJggg==') no-repeat center!important;
    min-width: 45px!important;
    min-height: 28px!important;
    -moz-box-pack: center!important;
}

.timeThumb[showhours="true"] {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAYAAAD1PDaSAAAAB3RJTUUH2QYYBTAzhVX4mQAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAALMSURBVHja1ZcxaBphFMff6SmITSh2CxWFFLJVKd1MHMzQDs1WSnQqKXQJpTYg3Tp0K4GQUFwCLZ106eYihNohBBKokLRrB8VZSYxFMXde/8/7Isaq9RrPs3/44/F93vt+9967u+8k+rv8cBSOwD7YCzthm5hXYLs41rrGu9WCJXGswnLXeBMuwUU4B6fhwjAgacDYLfgxvOb3++9Ho1EpEomQz+cjr9dLTqeTbDadTVEUstt1Zk3TOuNXiFstkiR9KVVVSZblzniz2aRSqUTFYpFyuRyl02mtUCh8w/RH+DNcFskYCL2M4Fsej+fOysqKKxaLScFgsLPgJMQXfnx8TKlUSstkMvVKpfITYxuY+tILzb/vQ6HQ00Qi4eZsulyuicL2g6/X6+0qbG5u/jo4OPiE4Rc81aZCSXfj8fgztIBtZmbGECwHb1/1COcY+W/3Oefn59w6re3t7Q9oqed89vL6+np2aWlJ5l4dJu7By0UnXQXu/f39fSWZTD6UA4FAcmFhQa5WqxOF+BcxJ/PK6OPbDFyr1cYWnEtqRiW40swrl8vlOhZwOxwOS2+8URJxcXFBzCs3Go382dnZg2kG7gZnXikcDnuR5e+4CW+OK3B3AsbZKrgZT5Htu+1oaO4NgL9DcPm6gc0SLl4B8OuTk5OtyxTY8Ip+i+f1SxzfsBqwj2q4CXfwqn9D+n7liu7BR3BDTGoWuiU4jgTXUPHuh3d0WbhC+q5skrCqWDcrOOxkULPwGpznEpG+DTUDVBHx82K92Wu2U0du+BG8B5+OoQKqiLMn4rrHBTpIvGkOwF9J38QbgW2K8wLU/4PBdPHTZxH+MULmVfG/Rer/8TFx8fP9Cel92Q+4Juan8j3wiv58VLbE+NSKe/SwB/qQLOpdI5rvgZ63GmhUNQRww4zgZpUt1/P7X2iV9EyvWg1iRHOkt8ac1SBGtWNW4N/sG4JKEzHR8QAAAABJRU5ErkJggg==') no-repeat center!important;
}

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