/* ========================= BROWSER RESET ======================== */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}* focus, video, object, player, embed {outline:none} *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}iframe{border:0} input,textarea{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;-o-user-select:text;user-select:text;}iframe{border:0}




/* ========================= GENERAL TAGS ======================== */
a img {border:0;}
body {
    margin:0; 
    background-color:black; 
    color:white;  /*updated in js via player settings */
    font:11px/14px Helvetica;  /*updated in js via player settings */
    overflow:hidden;
}
h1 {
    font-size:14px; /*updated in js via player settings */
    line-height:2em;
    font-weight:bold; /*updated in js via player settings */
    letter-spacing:.3px;
}
p {
    font-size:12px; /*updated in js via player settings */
    font-weight:normal; /*updated in js via player settings */
    line-height:1.5em;
    letter-spacing:.3px;
}
button {
    background-color:#3B3B3C;
    color:white; /*updated in js via player settings */
    font-size:11px;
    padding:0 5px 0 30px;
    border:none;
    background-repeat:no-repeat;
    background-position:left center;
    cursor:pointer;
    height:30px; 
    line-height:32px;
    margin-right:10px;
}



/* ========================= GENERIC CLASSES ======================== */

/* === buttons === */
div.button { /* standard button design */
    position:relative;
    height:30px;
    width:30px;
    background-color: none !important;
    -webkit-background-size: 100% 100%;
       -moz-background-size: 100% 100%;
            background-size: 100% 100%; 
    background-repeat:no-repeat;
    cursor:pointer;
    font-size:0;
}
div.highlight-button {
    opacity:1 !important;
}
div.button:hover {
    opacity:1;
}
div.button.big { /* big version of same button */
    height:100px;
    width:100px;
    border-radius:0;
    background-color: transparent !important;
    background-repeat:no-repeat;
    -webkit-background-size: 100% 100%;
       -moz-background-size: 100% 100%;
            background-size: 100% 100%; 
}
div.button ul { /* button menus */
    display:none;
    opacity:0;
    position:absolute;
    bottom:32px; 
    right:0;
    background:rgb(0,0,0); /*fallback for browser with no RGBa support */
    background:rgba(0,0,0,.8); /*updated in js via player settings */
    line-height:25px;
    padding:2px 10px;
    text-align:left;
}
div.activebutton {
    filter: alpha(enabled=false) !important; /* IE alpha overflow hidden bug, http://labs.thesedays.com/blog/2011/06/02/ie-alpha-overflow-hidden-bug/ */
}

div.activebutton ul { /* active button menus */
    display:block;
    font-size:11px;
    line-height:22px;
    opacity:1;

    -webkit-animation: menuSlideIn 400ms;
    -moz-animation: menuSlideIn 400ms;
    animation: menuSlideIn 400ms;
}
div.button ul li { /* menu items */
    white-space:nowrap;
    background:url('not-selected-icon.png') -10px -5px no-repeat;
    padding-left:14px;
}
div.button ul li.hover { /* menu item hover */
}
div.button ul li.selected { /* menu item selected */
    background-image:url('selected-icon.png');
}
a.button { /* standard button design as a straight link */
    display:inline-block; 
    *display:inline; 
    *zoom:1; 
    border:1px solid #333;
    height:30px;
    width:30px;
    border-radius:2px;
    background-color:black;  /*updated in js via player settings */
    background-position:center center;
    background-repeat:no-repeat;
    opacity:.8;
    cursor:pointer;
    font-size:0;
    text-decoration:none;
}
/* === /buttons === */




/* ========================= OVERALL GRID ======================== */

/* === tray === */
#tray { /* tray position */
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
}
.tray-navigation {
    *filter: alpha(enabled=false) !important; /* IE alpha overflow hidden bug, http://labs.thesedays.com/blog/2011/06/02/ie-alpha-overflow-hidden-bug/ */
    position:relative;
    margin:3px 5px 5px 5px;
}
.tray-left .tray-button { /* buttons left of scrubber */
    float:left;
    margin-right:3px;
}
.tray-right .tray-button { /* buttons right of scrubber */
    float:right;
    margin-left:3px;
}
.tray-scrubber {  /* scrubber position */
    display:none;
    margin:0 200px 0 33px; /* this will be updated using JS to fix the with of .tray-left and .tray-right */
}
.tray-scrubber-sub {
    position:relative;
}
/* === /tray === */




/* ========================= INDIVIDUAL MODULES ======================== */

/* === Module: Scrubber === */
.scrubber-container {
    position:relative;
    height:30px;
    background:rgb(0,0,0); /*fallback for browser with no RGBa support */
    background:rgba(0,0,0,.8); /*updated in js via player settings */
    border-radius:2px;
    filter: alpha(enabled=false) !important; /* IE alpha overflow hidden bug, http://labs.thesedays.com/blog/2011/06/02/ie-alpha-overflow-hidden-bug/ */
}
.scrubber {
    position:absolute; 
    top:0px;
    left:10px;
    right:10px;
    height:30px;
    cursor:pointer;
}
.scrubber-track, .scrubber-buffer, .scrubber-play {
    position:absolute; 
    top:12px;
    left:0;
    height:6px;
    width:0;
    cursor:pointer;
}
.scrubber-track {
    width:100%;
    background-color:#888;
}
.scrubber-buffer {
    background-color:#666;
}
.scrubber-play {
    background-color:#eee; /*updated in js via player settings */
}
.scrubber-handle {
    display:none;
    cursor:pointer;
    position:absolute;
    top:7px;
    background-color:#eee;
    border-radius:1px;
    font-size:9px;
    line-height:9px;
    color:#333;
    padding:4px 4px 2px 4px;
    z-index:10;
}
.scrubber-container-hover .scrubber-handle {
    display:block;
}
.scrubber-time {
    display:none;
    position:absolute; 
}
.scrubber-thumbnail {
    position:absolute;
    bottom:37px;
    border-radius:2px;
    border:2px solid white;
    display:none;
}
.scrubber-thumbnail-sub {
    background-repeat: 'no-repeat';
    width:100%;
    height:100%;
}
/* === /Sharing === */

/* === Module: Sections === */
.sections {
    position:absolute; 
    top:10px;
    left:10px;
    right:10px;
    height:0; /* for ie7's sake, otherwise this element covers the scrubber  */
}
.section {
    position:absolute; 
    top:0;
    width:8px;
    height:8px; 
    margin:0px 0 0 -4px;
    border:1px solid black;
    background-color:#ccc;
    border-radius:5px;
    cursor:pointer;
}
.section-title {
    display:none;
}
/* === /Sections === */

/* === Module: Info === */
.info-pane {
    margin:0 5px;
    background:rgb(0,0,0); /*fallback for browser with no RGBa support */
    background:rgba(0,0,0,.8); /*updated in js via player settings */
    border-radius:2px;
    padding:5px 10px 8px 10px;
}
/* === /Info === */

/* === Module: Sharing === */
.sharing-container {
    background-color: none !important;
    margin:3px 5px 0 5px;
    border-radius:0;
    padding:0;
}
.share-embed {
    padding-bottom:10px;
}
.share-embed input {
    width:80%;
    max-width:471px;
    line-height:20px;
    font-size:11px;
    height:20px;
    padding:3px;
    border:none;
    background-color:white;
    box-shadow: inset 0 0 6px #666;
}
.share-embed-label {
    float:left;
    font-size:14px; 
    padding:0 23px 0 32px; 
    font-weight:bold;
    line-height:26px;
    background:url('embed-icon.png') left center no-repeat;
}
.share-buttons {
    height:30px;
    overflow:hidden;
    text-align: center;
}
/* === /Sharing === */

/* === Module: Browse === */
/* Place the browse pane within the player */
.player-browse #browse {
    position:relative;
    padding:10px 2px;
    background:rgb(0,0,0); /*fallback for browser with no RGBa support */
    background:rgba(0,0,0,.8); /*updated in js via player settings */
}
/* Place left and right browsing with a carousel in the middle */
.browse-container, .browse-left, .browse-right {
    height:105px;
    overflow:hidden;
}
.browse-left, .browse-right {
    position:absolute;
    top:0;
    width:30px;
    cursor:pointer;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:.8;
}
.browse-left {
    left:0;
    background-image:url('prev-icon.png');
}
.browse-right {
    right:0;
    background-image:url('next-icon.png');
}
.browse-container {
    position:relative;
    margin:0 30px;
}
/* Thumbnails in a fully standard table, 
   makes sure we don't need to handle breaking
   or explicitly set the width */
table.browse-recommendations {
    position:absolute;
    top:0px;
    left:0px;
}
table.browse-recommendations td {
    width:120px;
    height:105px;
    cursor:pointer;
    padding:0 10px;
}
table.browse-recommendations img {
    width:120px;
    height:67px;
}
table.browse-recommendations div {
    line-height:16px;
    height:32px;
    overflow:hidden;
}
/* === /Browse === */

/* Button graphics */
.play-button {background-image:url('play-icon.png');}
.big-play-button {background-image:url('big-play-icon.png');}
.pause-button {background-image:url('pause-icon.png');}
.stop-button {background-image:url('stop-icon.png');}

.facebook-button {
    background:url('icon-small-fb.png') no-repeat; 
    width: 30px; 
    height: 30px;
    font-size: 0;
    -webkit-background-size: 100% 100%;
       -moz-background-size: 100% 100%;
            background-size: 100% 100%; 
}
.twitter-button {
    background:url('icon-small-tw.png') no-repeat; 
    width: 30px; 
    height: 30px;
    font-size: 0;
    -webkit-background-size: 100% 100%;
       -moz-background-size: 100% 100%;
            background-size: 100% 100%; 
}
.google-button {
    background:url('icon-small-gp.png') no-repeat; 
    width: 30px; 
    height: 30px;
    font-size: 0;
    -webkit-background-size: 100% 100%;
       -moz-background-size: 100% 100%;
            background-size: 100% 100%; 
}
.site-button {background-image:url('site-icon.png');}

.browse-button-on {background-image:url('browse-on-icon.png');}
.browse-button-off {background-image:url('browse-off-icon.png');}
.share-button {background-image:url('share-icon.png'); display: none;}
.info-button {background-image:url('info-icon.png');}
.volume-button-on {background-image:url('volume-on-icon.png');}
.volume-button-off {background-image:url('volume-off-icon.png');}
.fullscreen-button {background-image:url('fullscreen-icon.png');}
.mail-button {background-image:url('mail-icon.png');}
.quality-button {background-image:url('quality-icon.png');}
.subtitle-button {background-image:url('subtitle-icon.png');}


/* Hover color for sharing buttons */
.site-button:hover, .mail-button:hover, .facebook-button:hover, .twitter-button:hover, .google-button:hover {
    -o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
}

.site-button:hover {background-color: #47953e;}
.mail-button:hover {background-color: #92008b;}
.facebook-button:hover {background-color: #3c5a98;}
.twitter-button:hover {background-color: #2ba9e1;}
.google-button:hover {background-color: #dd4b38;}

/* Hide a number of elements in very small players */
.size-tiny .info-button, 
.size-tiny .share-button,
.size-tiny .browse-button-on,
.size-tiny .browse-button-off,
.size-tiny .quality-button,
.size-tiny .subtitle-button,
.size-tiny .tray-scrubber,
.size-tiny .info-pane,
.size-tiny .sharing-container,
.size-tiny .player-browse #browse {
    display:none !important;
}

/* Hide some elements in slightly small players */
.size-small .info-description,
.size-small .subtitle-button,
.size-small .info-button, 
.size-small .browse-button-on,
.size-small .browse-button-off,
.size-small .sharing-container 
.size-small .player-browse #browse {
    display:none;
}

/* All graphics in retina version */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .play-button {background-image:url('play-icon@2x.png'); background-size:30px;}
    .big-play-button {background-image:url('big-play-icon@2x.png'); background-size:60px;}
    .pause-button {background-image:url('pause-icon@2x.png'); background-size:30px;}
    .stop-button {background-image:url('stop-icon@2x.png'); background-size:30px;}
    .facebook-button {background-image:url('facebook-icon@2x.png'); background-size:30px;}
    .twitter-button {background-image:url('twitter-icon@2x.png'); background-size:30px;}
    .google-button {background-image:url('google-icon@2x.png'); background-size:30px;}
    .site-button {background-image:url('site-icon@2x.png'); background-size:30px;}
    .browse-button-on {background-image:url('browse-on-icon@2x.png'); background-size:30px;}
    .browse-button-off {background-image:url('browse-off-icon@2x.png'); background-size:30px;}
    .share-button {background-image:url('share-icon@2x.png'); background-size:30px;}
    .info-button {background-image:url('info-icon@2x.png'); background-size:30px;}
    .volume-button-on {background-image:url('volume-on-icon@2x.png'); background-size:30px;}
    .volume-button-off {background-image:url('volume-off-icon@2x.png'); background-size:30px;}
    .fullscreen-button {background-image:url('fullscreen-icon@2x.png'); background-size:30px;}
    .mail-button {background-image:url('mail-icon@2x.png'); background-size:30px;}
    .quality-button {background-image:url('quality-icon@2x.png'); background-size:30px;}
    .subtitle-button {background-image:url('subtitle-icon@2x.png'); background-size:30px;}

    div.button ul li {background-image:url('not-selected-icon@2x.png'); background-size:30px;}
    div.button ul li.selected {background-image:url('selected-icon@2x.png'); background-size:30px;}
    .share-embed-label {background-image:url('embed-icon@2x.png'); background-size:30px;}
    .browse-left {background-image:url('prev-icon@2x.png'); background-size:30px;}
    .browse-right {background-image:url('next-icon@2x.png'); background-size:30px;}
}


/* CSS Animations and Transitions */
@-moz-keyframes menuSlideIn {
    from {opacity:0; margin-bottom:-15px;}
    to {opacity:1;}
}
@-webkit-keyframes menuSlideIn {
    from {opacity:0; margin-bottom:-15px;}
    to {opacity:1;}
}
@keyframes menuSlideIn {
    from {opacity:0;margin-bottom:-15px;}
    to {opacity:1;}
}