/*
   This CSS file is part of  Linterna Mágica

   Copyright (C) 2010, 2011, 2012 Ivaylo Valkov <ivaylo@e-valkov.org>
   Copyright (C) 2010, 2011, 2012 Anton Katsarov <anton@katsarov.org>

   Linterna Mágica is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation, either version 3 of the License, or
   at your option) any later version.

   Linterna Mágica is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with Linterna Mágica.  If not, see <http://www.gnu.org/licenses/>.
   */

/* END OF LICENSE HEADER */

/* The container div */
body div#top_content_box
div.dmpi_video_playerv4 div.linterna-magica,
.linterna-magica {
    /* border: 1px solid #36393E  !important; */
    background-color: transparent  !important;
    color: black  !important;
    text-align: center  !important;
    position: relative !important;
    /* Fix header buttons displacement in boozho.com */
    /* Fixes entire interface displacement */
    clear: left !important;
    height: auto !important;
    z-index: 99 !important;
    /* See LinternaMagica.prototype.min_height and */
    /* LinternaMagica.prototype.min_width in  */
    /* lm_constructors.js */
    min-height: 212px !important;
}


.linterna-magica {
    border-bottom: 1px solid #36393E !important;
}


/* The message paragraph in the object */
.linterna-magica p {
    color:#ffffff !important
}

.linterna-magica-web-log-header a,
.linterna-magica a {
    outline: 0 !important;
}

/* The header div */
/* body div#top_content_box div.dmpi_video_playerv4 */
/* .linterna-magica-controls-time-slider { */
/*     text-align: left  !important; */
/*     color: #333333  !important; */
/*     background: gray url('header-background.png') 0 0 repeat-x !important; */
/*     line-height: 24px  !important; */
/*     border: solid #666666  !important; */
/*     border-width: 1px 0px  !important; */
/*     position: relative  !important; */
/*     top: 0px !important; */
/* } */

div.linterna-magica-controls-time-slider {
    height: 12px !important;
}

/* The logo/about link in the header */
/* The link that switches between LinternaMagica and the plugin */
/* (the bottom of a flash object) */
.linterna-magica-toggle-plugin,
/* The buton around clips in remote pages */
.linterna-magica-remote-clip-buttons a {
    display: block  !important;
    text-decoration: none  !important;
    width: 106px  !important;
    height: 24px  !important;
    position: absolute !important;
    right: 0px  !important;
    background: url('button-about.png') 0 0 no-repeat !important;
    line-height: 3000px  !important;
    overflow: hidden  !important;
    bottom: 0px !important;
}

/* The logo/about link in the header */
.linterna-magica-logo {
    display: block  !important;
    text-decoration: none  !important;
    width: 106px  !important;
    height: 22px  !important;
    line-height: 3000px  !important;
    overflow: hidden  !important;
    background: url('button-about.png') 0 0 no-repeat !important;
    cursor: help !important;
    z-index: 9999 !important;
    float: right !important;
}
.linterna-magica-lower .linterna-magica-logo {
    width: 24px !important;
    background: url('button-about-lower.png') 0 0 no-repeat !important;
}
.linterna-magica-remote-clip-buttons,
.linterna-magica-toggle-plugin-wrapper {
    position:relative!important;
    z-index: 999999 !important;
    display: block !important;
    right: 0px !important;
    width: 100% !important;
    height: 24px !important;
    background-color: transparent !important;
    clear: both !important;
    top: 0px !important;
}

.linterna-magica-toggle-plugin-outer-frame {
    display: block !important;
    width: 106px !important; 
    height: 24px !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;

    background-color: #666666 !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#1a1a1a)) !important;
    background-image: -webkit-linear-gradient(top, #666666, #1a1a1a) !important;
    background-image:    -moz-linear-gradient(top, #666666, #1a1a1a) !important;
    background-image:         linear-gradient(to bottom, #666666, #1a1a1a) !important;
    border-color: #222222 !important;
    border-width: 1px 0 !important;
    border-style: solid !important;
    -webkit-border-radius: 6px 6px 0 0 !important;
    -moz-border-radius: 6px 6px 0 0 !important;
    border-radius: 6px 6px 0 0 !important;    
}


.linterna-magica-remote-clip-buttons a {
    float: right !important;
    right: 0px !important;
}

a.linterna-magica-remote-clip-visit-page-button {
    background: #3e3e3e url('button-about.png') 0 0 no-repeat !important;
    border-left: none !important;
    -webkit-border-radius: 0 6px 0 0 !important;
    -moz-border-radius: 0 6px 0 0 !important;
    border-radius: 0 6px 0 0 !important;
}

/* The link that destroys the remote clip link */
a.linterna-magica-remote-clip-close-button {
    background: #3e3e3e url('button-close.png') 0 0 no-repeat !important;
    height: 24px !important;
    width: 24px !important;
    position:absolute !important;
    display: block !important;
    right: 104px !important;
    border-right: none !important;
    -webkit-border-radius: 6px 0 0 0 !important;
    -moz-border-radius: 6px 0 0 0 !important;
    border-radius: 6px 0 0 0 !important;
}

/* about message (license, author... every row) */
body div#top_content_box div.dmpi_video_playerv4,
div.linterna-magica-update-info-box, 
.linterna-magica-update-info-box,
div.linterna-magica-about-box, 
.linterna-magica-about-box {
    background: #000000 !important;
    font-size: 12px !important;
    line-height: 1.3em !important;
    padding-top: 20px !important;
    font-family: 'Liberation Sans', 'Arial', sans-serif  !important;
    display:block !important;
    position:relative !important;
    z-index: 999999 !important;
    width: 100% !important;
    padding-bottom: 20px !important;
 }

.linterna-magica-about-box {
    overflow: auto !important;
}

.linterna-magica-update-info-box p,
.linterna-magica-about-box p {
    margin: 1px 5% !important;
    padding-top: 8px !important;
    color: #ffffff !important;
    text-align: center !important;
    font-weight: normal !important;
}

.linterna-magica-update-info-box object,
.linterna-magica-about-box object {
    height: 70px !important;
    margin-left: 25% !important;
    position: relative !important;
    display: block !important;
}

/* Links are inside an <object> with data URI which is another document. */
/* Do we really need this ?*/
/* See LinternaMagica.create_about_box()*/
/* See LinternaMagica.create_update_info_box(); */
.linterna-magica-update-info-box p a,
.linterna-magica-about-box p a {
    color: #bbbbbb !important;
    text-decoration: underline !important;
    font-style: none !important;
}


/* Links are inside an <object> with data URI which is another document. */
/* Do we really need this? */
/* See LinternaMagica.create_about_box()*/
/* See LinternaMagica.create_update_info_box(); */
.linterna-magica-update-info-box p a:hover,
.linterna-magica-about-box p a:hover {
    text-decoration: none !important;
}

/* Controls holder (div) */
body div#top_content_box div.dmpi_video_playerv4
div.linterna-magica-controls,
.linterna-magica-controls {
  background-color: #666666 !important;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#1a1a1a)) !important;
  background-image: -webkit-linear-gradient(top, #666666, #1a1a1a) !important;
  background-image:    -moz-linear-gradient(top, #666666, #1a1a1a) !important;
  background-image:         linear-gradient(to bottom, #666666, #1a1a1a) !important;
    border: none  !important;
    color: black !important;
    height: 22px !important;
    width: inherit !important;
    font-family: 'Liberation Sans', 'Arial', sans-serif  !important;
    font-size: 10px  !important;
    font-weight: normal !important;
    display: block !important;
    bottom: 0px !important;
    position: relative !important;
    /* Hides the HD links list. The HD list was */
    /* moved to the controls footer, because of */
    /* https://savannah.nongnu.org/bugs/?34465 */
   /* overflow: hidden !important; */
    text-align: center !important;
    color: #e6e6e6  !important;
}

/* control buttons (<a>) */
/* NOTE : If width, pading, margin-left, border changes are made (not */
/* recommended) some fixes are needed in create_controls() for time */
/* and volume sliders */
a.linterna-magica-controls-buttons {
    display: block !important;
    float: left !important;
    height: 22px !important;
    width: 22px !important;
    position: relative !important;
    text-decoration: none !important;
    padding: 0px !important;
    overflow: hidden  !important;
    line-height: 3000px  !important;
    outline: none  !important;
}

/* control buttons (<a>) */
/* NOTE : If width, pading, margin-left, border changes are made (not */
/* recommended) some fixes are needed in create_controls() for time */
/* and volume sliders */
a.linterna-magica-controls-buttons-play {
    background: url('button-play.png') 0 0 no-repeat !important;
    margin-left: 1px !important;
}

a.linterna-magica-controls-buttons-pause {
    background: url('button-pause.png') 0 0 no-repeat !important;
    margin-left: 1px !important;
}

a.linterna-magica-controls-buttons-stop {
    background: url('button-stop.png') 0 0 no-repeat !important;
    width: 24px !important;
}

a.linterna-magica-controls-buttons-mute {
    background: url('button-unmuted.png') 0 0 no-repeat !important;
    width: 24px !important;
}


a.linterna-magica-controls-buttons-unmute {
    background: url('button-muted.png') 0 0 no-repeat !important;
    width: 24px !important;
}

a.linterna-magica-controls-buttons-fullscreen {
    background: url('button-fullscreen.png') 0 0 no-repeat !important;
    width: 26px !important;
    float: right !important;
}

/* time && volume slider (div) */
/* DO NOT set fixed width! */
/* Width is calculated in create_controls function*/
body div#top_content_box div.dmpi_video_playerv4
div.linterna-magica-controls-horizontal-slider,
.linterna-magica-controls-horizontal-slider {
    /* top: 1px !important; */
    line-height: 10px !important;
    float: left !important;
    /* Fix for The Onion dot com */
    clear: none !important;
    height: 10px !important;
    position: relative !important;
    color: #ffffff !important;
    width: 100% !important;
}

/* time && volume slider knob (<a>) */
.linterna-magica-controls-slider-knob {
    padding: 0px !important;
    height: 8px !important;
    width: 8px !important;
    display: block !important;
    position: relative !important;
    top: -1px !important;
    /* background: url('slider-knob.png') center top no-repeat !important; */
    /* Position the knob above time && volume positon text */
    background-color: #e84ead !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e84ead), to(#951b66)) !important;
    background-image: -webkit-linear-gradient(top, #e84ead, #951b66) !important;
    background-image:    -moz-linear-gradient(top, #e84ead, #951b66) !important;
    background-image:         linear-gradient(to bottom, #e84ead, #951b66) !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #e6e6e6 !important;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
}


/* The video download link */
.linterna-magica-video-download-link {
    background: url('button-download.png') 0 0 no-repeat !important;
    height: 24px !important;
    width: 24px !important;
    position: relative !important;
    text-decoration: none !important;
    padding: 0px !important;
    overflow: hidden  !important;
    line-height: 3000px  !important;
    outline: none  !important;
    display: block !important;
    float: right !important;
}

/* The link that switches between LinternaMagica and the plugin */
/* (header) */
.linterna-magica-toggle-plugin-header {
    background: url('button-toggle-plugin.png') 0 0 no-repeat !important;
    height: 24px !important;
    width: 24px !important;
    position: relative !important;
    text-decoration: none !important;
    padding: 0px !important;
    overflow: hidden  !important;
    line-height: 3000px  !important;
    outline: none  !important;
    display: block !important;
    float: left !important;
}

.linterna-magica-toggle-plugin-header {
    position: relative !important;
    text-decoration: none !important;
    padding: 0px !important;
    overflow: hidden  !important;
    line-height: 3000px  !important;
    outline: none  !important;
    display: block !important;
    float: right !important;
}


/* time && volume slider text (span) */
.linterna-magica-controls-slider-text {
    top: -20px !important;
    padding: 1px !important;
    display: block !important;
    float: left !important;
    position: relative !important;
    font-size: 11px !important;
    overflow: hidden !important;
    /* Do not show text cursor */
    cursor: default !important;
    /* Fix black rectangle above image background for some videos at myvideo.de */
    background-color: transparent !important;
}

.linterna-magica-controls-volume-slider {
    height: 10px !important;
    width: 80px !important;
    display: block !important;
    line-height: 10px !important;
}

.linterna-magica-controls-time-slider-text {
    top: 5px !important;
    color: #ffffff !important;
    margin-left: 5px !important;
}

/* The hd links wrapper div */
/* ul ->li->a */
/* NOTE: The best solution seems to be fixed height with overflow-y */
/* If the list is above the video object it will be invisible */
/* because the plugin (or the browser?)  is not respecting the */
/* z-index */
/* The width varies on sites (depends on extracted data), */
/* but probably can have some fixed value (110px is small for blip.tv) */
body.dm_page_html_video
div#top_content_box div.dmpi_video_playerv4 div
/* ^^^ Fix background: none in dailymotion */
div.linterna-magica-hd-links-list,
.linterna-magica-hd-links-list {
    /* The HD list is part of the controls */
    /* footer, because of */
    /* https://savannah.nongnu.org/bugs/?34465. */
    /* The value for width was "auto", but */
    /* most links are rendered on two lines, */
    /* which is not what we want. At 16% it */
    /* is fine with YouTube and Vimeo, not */
    /* too wide. */
    width: 350% !important;
    height: auto !important;
    /* ^^^Fix height and width in dailymotion: The site sets them to */
    /* 100% but the list shows partly under the header */
    bottom: 35px !important;
    left: -270% !important;
    overflow-y: auto !important;
    /* Hide scrollbars for HD links in YouTube */
    overflow-x: hidden !important;
    background-color: #333333 !important;
    border: solid #555555  !important;
    border-width: 1px 1px  !important;
    position: absolute  !important;
    font-size: 13px  !important;
    padding: 0px 0 !important;
    /* Above web page elements and logo at the right */
    z-index: 99999 !important;
}

.linterna-magica-hd-links-list ul {
    padding: 0  !important;
    margin: 0  !important;
    list-style: none  !important;
}

.linterna-magica-hd-links-list ul li {
    padding: 0  !important;
    margin: 0  !important;
    list-style: none  !important;
    line-height: 1.2em  !important;
}

.linterna-magica-hd-links-list ul li a {
    padding: 0  !important;
    margin: 0  !important;
    color: #dddddd  !important;
    padding: 2px 5px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    display: block !important;
    background: none !important;
}

.linterna-magica-hd-links-list ul li a:hover {
    background: #222222 !important;
    color: #ffffff !important;
}


/* The HD button in the header */
/* <div> */
/* <a> hd switch</a> */
/* <div>hd links list</div> */
/*</div> */
.linterna-magica-switch-hd {
    background: url('button-higher-quality.png ') 0 0 no-repeat !important;
    height: 24px !important;
    width: 24px !important;
    position: relative !important;
    text-decoration: none !important;
    padding: 0px !important;
    overflow: hidden  !important;
    line-height: 3000px  !important;
    outline: none  !important;
    display: block !important;
    float: left !important;
    /* Above web page elements. Below video object */
    z-index: 9999 !important;
}

.linterna-magica-hd-wrapper {
    display: block !important;
    float: right !important;
    position: relative !important;
    width: 24px !important;
}


/* Fix displacement in reuters.com. The function delete_object_if_id*/
/* removes the overlaping flash objects */
#videoPlayer, div.sectionContent, section,
#video-wAd, bleeding, multimedia {
    overflow: visible !important;
    top: 0px !important;
    padding: 5px !important
}

/* The update button */
.linterna-magica-side-update-notifier-button-update-icon,
.linterna-magica-update-notifier-link {
    background: url('button-update.png') 0 0 no-repeat !important;
    height: 24px !important;
    width: 24px !important;
    position: relative !important;
    text-decoration: none !important;
    padding: 0px !important;
    overflow: hidden  !important;
    line-height: 3000px  !important;
    outline: none  !important;
    display: block !important;
    float: right !important;
}

.linterna-magica-side-update-notifier-button-update-icon {
    background: url('button-update.png') 0 0 no-repeat !important;
    left: -106px !important;
}

/* The web log  button */
.linterna-magica-web-log-link {
    background: url('button-debug.png') 0 0 no-repeat !important;
    height: 22px !important;
    width: 22px !important;
    position: relative !important;
    text-decoration: none !important;
    padding: 0px !important;
    overflow: hidden  !important;
    line-height: 3000px  !important;
    outline: none  !important;
    display: block !important;
    float: right !important;
}

div.linterna-magica-web-log, 
.linterna-magica-web-log {
    display: inline !important;
    /* overflow: auto !important; */
    border: 1px solid #36393E  !important;
    background-color: #000000  !important;
    color: black  !important;
    text-align: left  !important;
    position: relative !important;
    clear: left !important;
    /* We want this at the bottom of the page. better in the right corner */
    position: fixed !important;
    float: right !important;
    right: 10px !important;
    bottom: 28px !important;
    left: 10px !important;
    right: 10px !important;
    height: 250px !important;
    /* The footer at some site had 1e+09 that broke 9999 */
    z-index: 10000000000000000 !important;
    -webkit-border-radius: 6px 6px 0 0 !important;
    -moz-border-radius: 6px 6px 0 0 !important;
    border-radius: 6px 6px 0 0 !important;
}

/* Every log message and the header */
.linterna-magica-web-log p {
    color:#ffffff !important;
    margin: 0.5em 0 !important;
}

.linterna-magica-web-log-header {
    text-align: left  !important;
    line-height: 10px !important;
    color: #333333  !important;
    background-color: #666666 !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#1a1a1a)) !important;
    background-image: -webkit-linear-gradient(top, #666666, #1a1a1a) !important;
    background-image:    -moz-linear-gradient(top, #666666, #1a1a1a) !important;
    background-image:         linear-gradient(to bottom, #666666, #1a1a1a) !important;
    height: 24px  !important;
    line-height: 24px  !important;
    border: solid #666666  !important;
    border-width: 1px 0px  !important;
    position: relative  !important;
    overflow: visible !important;
    vertical-align: middle !important;
    -webkit-border-radius: 6px 6px 0 0 !important;
    -moz-border-radius: 6px 6px 0 0 !important;
    border-radius: 6px 6px 0 0 !important;
}

.linterna-magica-web-log-header p {
    /* vertical-align: middle !important; */
    font-size: 12px !important;
    /* top: 5px !important; */
    position: relative !important;
    line-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: normal !important;
    font-family: 'Liberation Sans', 'Arial', sans-serif  !important;
    text-indent: 5px !important;
}

/* The link that destroys the web log */
.linterna-magica-web-log-header a {
    display: block !important;
    margin: 0 !important;
    top: 0 !important;
    position: relative !important;
    padding: 0 !important;
    color:#ffffff !important;
    width: 24px !important;
    height: 24px !important;
    /* border: 1px dashed white !important; */
    text-decoration: none !important;
    overflow: hidden !important;
    line-height: 3000px !important;
}

.linterna-magica-web-log-right-buttons {
    float: right !important;
    right: 0 !important;		    
}

.linterna-magica-web-log-left-buttons {
    float: left !important;
    left: 0 !important;		    
}

.linterna-magica-web-log-header a.linterna-magica-web-log-close {
    background: url('button-close.png') 0 0 no-repeat !important;
}

.linterna-magica-web-log-header a.linterna-magica-web-log-collapse {
    background: url('button-minimize.png') 0 0 no-repeat !important;
}

.linterna-magica-web-log-messages {
    height: 85% !important;
    overflow: auto !important;
    padding: 5px 15px !important;
    line-height: 1.35em !important;
}


/* New lines are replaced with span in the web log. */
/* This shows them in new line in the web log */
.linterna-magica-log-to-web-message span {
    display: block !important;
}

/* Mesage rows */
.linterna-magica-log-to-web-message {
    /* Indent/margin-left and background-color are */
    /* calculated in lm_log.js:LinternaMagica.prototype.log */
    border-bottom: 1px solid rgb(152,152,152) !important;
    border-left: 1px solid rgb(152,152,152) !important;
    padding-left: 3px !important;
    padding-bottom: 3px !important;
}


.linterna-magica-side-update-notifier-button-wrap,
.linterna-magica-web-log-debug-button-wrap {
    position: fixed !important;
    left: 20px !important;
    bottom: 0px !important;
    line-height: 10000px !important;
    width: 154px !important;
    height: 22px !important;
    padding:0 !important;
    margin:0 !important;
    border: 1px solid #36393E !important;
    /* The footer at some site had 1e+09 that broke 9999 */
    z-index: 10000000000000000 !important;
    background-color: #666666 !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#1a1a1a)) !important;
    background-image: -webkit-linear-gradient(top, #666666, #1a1a1a) !important;
    background-image:    -moz-linear-gradient(top, #666666, #1a1a1a) !important;
    background-image:         linear-gradient(to bottom, #666666, #1a1a1a) !important;
    border-color: #222222 !important;
    border-width: 1px 0 !important;
    border-style: solid !important;
    -webkit-border-radius: 6px 6px 0 0 !important;
    -moz-border-radius: 6px 6px 0 0 !important;
    border-radius: 6px 6px 0 0 !important;
}

.linterna-magica-side-update-notifier-button-wrap {
   left: 185px !important;
}

p.linterna-magica-side-update-notifier-button-wrap:hover,
p.linterna-magica-web-log-debug-button-wrap:hover {
    bottom: 0px !important;
}

.linterna-magica-web-log-debug-button-wrap a:hover {
    text-decoration:none !important;
    padding:0 !important;
    margin:0 !important;
    color: black !important;
}

.linterna-magica-side-update-notifier-button,
.linterna-magica-web-log-debug-button {
    background: transparent url('button-about.png') 0 0 no-repeat !important;
    height: 22px !important;
    width: 106px !important;
    display:block !important;
    border: none !important;
    left: 24px !important;
    position: relative !important
}

.linterna-magica-side-update-notifier-button-close,
.linterna-magica-web-log-debug-button-close {
    background: transparent url('button-close.png') 0 0 no-repeat !important;
    width: 24px !important;
    height: 24px !important;
    position:relative !important;
    left: 130px !important;
    display:block !important;
    overflow:hidden !important;
    border: none !important;
    top: -22px !important;
}

.linterna-magica-web-log-debug-button-bug {
    background: transparent url('button-debug.png') 0 0 no-repeat !important;
    height: 24px !important;
    width: 24px !important;
    display:block !important;
    position:relative !important;
    overflow:hidden !important;
    border: none !important;
    left: -24px !important;
}

.linterna-magica-video-object-wrapper,
.linterna-magica-video-object,
.linterna-magica-video-object p {
    display:block !important;
    position:relative !important;
    background-color: black !important;
}

.linterna-magica-update-info-box,
.linterna-magica-about-box,
.linterna-magica-video-object-wrapper {
    border-top: 1px solid #36393E !important;
    border-right: 1px solid #36393E !important;
}

.linterna-magica-controls-time-slider,
.linterna-magica-controls {
    border-right: 1px solid #36393E !important;
}


.linterna-magica-controls-time-slider-outer-frame {
  height: 10px !important;
  background-color: #1a1a1a !important;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1a1a1a), to(#666666)) !important;
  background-image: -webkit-linear-gradient(top, #1a1a1a, #666666) !important;
  background-image:    -moz-linear-gradient(top, #1a1a1a, #666666) !important;
  background-image:         linear-gradient(to bottom, #1a1a1a, #666666) !important;
  border-color: #222222 !important;
  border-width: 1px 0 !important;
  border-style: solid !important;
  position: relative !important;
}

.linterna-magica-controls-volume-slider-outer-frame {
    display: block !important;
    float: left !important;
    width: 80px !important;
  height: 10px !important;
  background-color: #1a1a1a !important;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1a1a1a), to(#666666)) !important;
  background-image: -webkit-linear-gradient(top, #1a1a1a, #666666) !important;
  background-image:    -moz-linear-gradient(top, #1a1a1a, #666666) !important;
  background-image:         linear-gradient(to bottom, #1a1a1a, #666666) !important;
  border-color: #3E3E3E !important;
  border-width: 0px 1px !important;
  border-style: solid !important;
  position: relative !important;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  border-radius: 5px !important;
  margin-top: 6px !important;
}

.linterna-magica-controls-volume-slider-outer-frame .linterna-magica-controls-horizontal-slider-progress-bar {
  -webkit-border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  border-radius: 2px !important;
  top: 4px !important;
}

.linterna-magica-controls-horizontal-slider-progress-bar {
    background-color: #e84ead !important;
    /* Initial value must be zero */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e84ead), to(#951b66)) !important;
    background-image: -webkit-linear-gradient(top, #e84ead, #951b66) !important;
    background-image:    -moz-linear-gradient(top, #e84ead, #951b66) !important;
    background-image:         linear-gradient(to bottom, #e84ead, #951b66) !important;
    width: 0 !important;
    height: 4px !important;
    position: absolute !important;
    display: block !important;
    top: 3px !important;
}

.linterna-magica-lower {
    /* border: 1px solid red !important; */
}

/* ws - website */
.linterna-magica-ws-video-parent {
    background-color: transparent !important;
}
