table {border-collapse: collapse}
.videoWrapper {font-style: normal; width: 100%}
.videoWrapper button:focus {outline: none}
.videoWrapper video {display: block}
.videoWrapper .controls {padding: 5px}
.videoWrapper .controls button {width: 35px; border-radius: 10px; padding: 3px 5px}
.videoWrapper .progress {height: 12px; position: relative; cursor: pointer;
    background: rgba(0,0,0,0.4); border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 1px rgba(0,0,0,1)}
.videoWrapper .progress span {height: 100%; position: absolute; top: 0; left: 0;
    border-radius: 10px}
.videoWrapper .timeBar{z-index: 10; background: rgba(107,204,226,1)}
.videoWrapper .bufferBar{z-index: 5; background: rgba(255,255,255,0.3)}
.videoWrapper #positionTable {color: white; font-size: smaller; line-height: 0.9em}
.videoWrapper #positionTable td {text-align: right}
.videoWrapper #positionTable td:nth-child(2) {text-align: left}
.videoWrapper #videoPlayerError {background: pink; padding: 1px 5px 2px; margin-bottom: 0.3em;
    width: auto}

.videoWrapper .controls .off {height: 25px; vertical-align: top; background: #d4d0c8 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAYAAAAmlE46AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRBMzNBREJFOTEzNTExRTQ4ODY1RTBDREZGMURCRDk2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRBMzNBREJGOTEzNTExRTQ4ODY1RTBDREZGMURCRDk2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEEzM0FEQkM5MTM1MTFFNDg4NjVFMENERkYxREJEOTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEEzM0FEQkQ5MTM1MTFFNDg4NjVFMENERkYxREJEOTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6+NT5FAAAAhElEQVR42mLs6+v7z8DAwAXE3xlIAExQ+hsQJ5OjEQTmADHIdj9SNcLARqgBZqRqhIGTUAO0SNUIA1ehBkiQqhEGnkMN4AdxWBhIBx9ItZGBXKdeg9KMIEyMxndQWguqiaCNv6C0EMwWZEl8gcOGrpgYjYyE3M9CqgZ0P/KSogkEAAIMAIQ5EtPxZYDqAAAAAElFTkSuQmCC) 11px 2px no-repeat} 

.videoWrapper .controls .on {height: 25px; vertical-align: top; background: #d4d0c8 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU1NEY3ODIxOTEzNTExRTQ4MzhEOEY4QjI4QzE5REVDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU1NEY3ODIyOTEzNTExRTQ4MzhEOEY4QjI4QzE5REVDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTU0Rjc4MUY5MTM1MTFFNDgzOEQ4RjhCMjhDMTlERUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTU0Rjc4MjA5MTM1MTFFNDgzOEQ4RjhCMjhDMTlERUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5wfeznAAAAIklEQVR42mLs6+v7z4AJGJHYGPJMDGSAUU2jmoaUJoAAAwBk5APHgLSlWQAAAABJRU5ErkJggg==) 10px 3px no-repeat}