youtube - HTML5 player upgrade by rafail20083

/* ==UserStyle==
@name         youtube - HTML5 player upgrade
@namespace    USO Archive
@author       theLOLflashlight
@description  This fixes multiple UI issues with youtube.
@version      20110623.15.51
@license      NONE
@preprocessor uso
==/UserStyle== */
@-moz-document url-prefix('http://www.youtube.com') {

.comments-textarea {
max-width: 634px !important; 
max-height: 200px !important;
outline: none !important;
}
#watch-embed-code {
max-width: 460px !important; 
max-height: 50px !important;
}
#watch-stats {
padding: 0px 8px 5px 6px !important;
margin-left: 0px !important;
}
#watch-stats .yt-uix-button-content {
width: 40px !important;
opacity: 0.60 !important;
}
.yt-uix-button-group.addto-container {
margin-left: 2px !important;
}
#watch-stats:hover .yt-uix-button-content {
opacity: 0.90 !important;
}
#yt-uix-tooltip1 {
z-index: 9000 !important;
display: block !important;
}
.yt-uix-button-menu {
margin-top: 2px !important;
}
#shared-addto-menu {
margin-top: 2px !important;
}
#watch-download .yt-uix-button-arrow {
position: relative !important; 
top: 2px !important; 
left: 1px !important;
}
#watch-download {
margin-left: 3px !important;
}
#watch-unlike {
background: transparent !important;
margin-right: 0px !important;
border-radius: 0px !important;
border-top-right-radius: 3px !important;
border-bottom-right-radius: 3px !important;
}
#masthead-search {
padding-right:3px !important;
padding-bottom: 3px !important;
margin-bottom: -3px !important;
}
.flip.yt-uix-button.yt-uix-button-text {
position: relative !important;
top: -2px !important;
left: 1px !important;
}
#watch-insight-button {
padding: 0px 4px !important;
}
#watch-like {
margin-right: -1px !important;
background: transparent !important;
padding-right: 2px !important;
cursor: pointer: !important;
width: 30px !important;
border-radius: 0px !important;
border-top-left-radius: 3px !important;
border-bottom-left-radius: 3px !important;
}
#watch-unlike.yt-uix-button:active {
background: #DDD -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCC), to(white)) !important;
}
#watch-like.yt-uix-button:active {
background: #DDD -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCC), to(white)) !important;
}
#watch-actions-right + .yt-uix-button-group {
background: #F6F6F6 -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#EFEFEF)) !important;
padding: 5px 0px 5px 0px !important;
border-radius: 3px !important;
}
#channel-like-buttons {
background: #F6F6F6 -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#EFEFEF)) !important;
border-radius: 3px !important;
width: 59px !important;
white-space: nowrap !important;
font-size: 0px !important;
}
#channel-like-buttons #watch-unlike {
border-left-width: 0px !important;
padding-left: 7px !important;
}
#channel-like-buttons #watch-unlike:hover {
border-left-width: 1px !important;
padding-left: 6px !important;
}
#watch-like .yt-uix-button-content {
display: none !important;
}
#watch-actions {
cursor: default !important;
padding: 1px 0 0 1px !important;
margin: -1px 0 0 -1px !important;
}
#watch-sidebar iframe {
display: none !important;
}
#watch-player.html5-player {
background-color: transparent !important;
-webkit-transition: width 0.2s linear, height 0.2s linear !important;
}
#video-player {
background-color: #E8E8E8; !important;
outline: none; !important;
}
.html5-fullscreen-button .html5-icon {
height: 25px !important;
margin-top: -3px !important;
margin-left: -1px !important;
padding-right: 0px !important;
-webkit-box-shadow: inset #EEE -2px -2px 0px -1px !important;
}
.html5-fullscreen-button .html5-icon:active {
-webkit-box-shadow: none !important;
}
.html5-expand-button.html5-button {
height: 20px !important;
border-left: #CCC 1px solid !important;
padding-left: 2px !important;
}
.html5-expand-button .html5-icon {
height: 25px !important;
margin-top: -3px !important;
margin-left: -1px !important; 
padding-left: 1px !important;
padding-right: 0px !important;
-webkit-box-shadow: inset #EEE -2px -2px 0px -1px !important;
background-position: 0px -143px !important;
}
.html5-expand-button .html5-icon:hover {
background-position: -29px -143px !important;
}
.html5-expand-button[data-value="default"] .html5-icon {
background-position: 0px -168px !important;
}
.html5-expand-button[data-value="default"] .html5-icon:hover {
background-position: -29px -168px !important;
}
.html5-expand-button .html5-icon:active {
-webkit-box-shadow: none !important;
}
.html5-fullscreen-button.html5-button {
height: 20px !important;
padding-left: 3px !important;
position: relative !important;
left: -1px !important;
}
.html5-button.html5-play-button, .html5-button.html5-pause-button {
height: 20px !important;
padding-right: 0px !important;
}
.html5-button.html5-play-button .html5-icon, .html5-button.html5-pause-button .html5-icon {
height: 25px !important;
margin-top: -3px !important;
margin-left: -1px !important;
padding-right: 1px !important;
-webkit-box-shadow: inset #EEE -2px -2px 0px -1px !important;
}
.html5-button.html5-play-button .html5-icon:active, .html5-button.html5-pause-button .html5-icon:active {
-webkit-box-shadow: none !important;
}
input.html5-icon {
/*-webkit-box-shadow: inset #EEE -2px -2px 0px -1px !important;*/
}
.html5-quality-button.html5-control {
height: 25px !important;
}
.html5-captions-button.html5-control {
height: 25px !important;
}
.html5-quality-button.html5-control .html5-button-label, .html5-speed-button.html5-control .html5-button-label {
position: relative !important;
top: -2px !important;
}
.html5-speed-button.html5-control {
height: 25px !important;
}
.html5-control.html5-player-branding {
height: 25px !important;
line-height: 25px !important;
}
.html5-progress-bar.html5-stop-propagation {
height: 17px !important;
margin-top: -15px !important;
}
.html5-video-player.html5-autohide .html5-progress-bar.html5-stop-propagation {
margin-top: -14px !important;
}
.html5-video-player.html5-autohide .video-controls {
position: absolute !important;
bottom: -360px !important;
}
.html5-player-chrome.html5-stop-propagation {
height: 25px !important;
margin-top: 2px !important;
border-top: #CCC 1px solid !important;
}
.html5-volume-button.html5-button {
height: 20px !important;
width: 28px !important;
padding-top: 4px !important;
padding-right: 0px !important;
border-style: none !important;
}
.html5-volume-button .html5-icon {
height: 25px !important;
width: 28px !important;
margin-top: -4px !important;
margin-left: -1px !important;
padding-right: 1px !important;
margin-right: 0px !important;
-webkit-box-shadow: inset #EEE -2px -2px 0px -1px !important;
background-image: url(http://i579.photobucket.com/albums/ss232/theLOLflashlight/download.png) !important;
}
.html5-volume-button .html5-icon:active {
-webkit-box-shadow: #AAA 2px 2px 0px -1px !important;
}
.html5-volume-control .html5-volume-panel {
border-right-width: 3px !important;
border-right-style: solid !important;
-webkit-border-image: url(http://i579.photobucket.com/albums/ss232/theLOLflashlight/shadow-1-1.png) 0 3 0 0 !important;
background: url(http://i579.photobucket.com/albums/ss232/theLOLflashlight/specback.png),
      url(http://i579.photobucket.com/albums/ss232/theLOLflashlight/shadowslim.png) !important;
background-repeat: no-repeat, no-repeat !important;
background-position: left, right !important;
}
.html5-volume-control .html5-volume-panel, .html5-volume-control.html5-control {
height: 25px !important;
}
.html5-volume-button.html5-button:active + html5-volume-panel {
margin-top: 50px !important;
}
.html5-volume-control {
outline: none !important;
}
.html5-volume-control .html5-volume-panel .html5-volume-slider {
height: 25px !important;
margin-top: 0px !important;
margin-left: 6px !important;
padding-right: 0px !important; 
background-image: url(http://i579.photobucket.com/albums/ss232/theLOLflashlight/download.png) !important;
}
.watch-module-body {
background-color: transparent !important;
}
.html5-scrubber-button.html5-progress-item {
-webkit-transition-property: -webkit-transform !important, opacity !important, margin-top !important, left !important;
-webkit-transition-delay: 3.5s !important, 3.5s !important, 3.5s !important, 3.5s !important;
-webkit-transition-duration: 0.5s !important, 0.5s !important, 0.5s !important, 0.5s !important;
}
.html5-scrubber-button.html5-progress-item:hover {
-webkit-transition-property: -webkit-transform !important, opacity !important, margin-top !important, left !important;
-webkit-transition-delay: 0s !important, 0s !important, 0s !important, 0s !important;
-webkit-transition-duration: 0.5s !important, 0.5s !important, 0.5s !important, 0.5s !important;
}
.html5-progress-list.html5-progress-item {
-webkit-box-shadow: inset 0px 2px 0px -1px rgba(255,255,255,0.15) !important;
}
.html5-progress-item .html5-play-progress.html5-progress-section {
-webkit-box-shadow: inset 0px 2px 0px -1px rgba(255,0,0,0.45) !important;
-webkit-transition: width 0.5s linear !important;
opacity: 0.6 !important;
}
.html5-progress-item .html5-load-progress.html5-progress-section {
-webkit-box-shadow: rgba(255, 0, 0, 0.25) 0px 2px 0px -1px inset, rgba(200, 0, 0, 1) 2px 0px 0px 0px !important;
-webkit-transition: width 0.5s linear !important;
opacity: 0.4 !important;
}
.progress-text.html5-control {
color: #4F4F4F !important;
height: 25px !important;
line-height: 25px !important;
}
.video-controls {
overflow: hidden !important;
padding-top: 360px !important;
}
#masthead-search-term {
outline: none !important;
height: 25px !important;
width: 398px !important;
margin-top: -1px !important;
margin-left: -1px !important;
}
.html5-popup-menu-item {
height: 25px !important;
line-height: 25px !important;
display: block !important;
color: rgb...