diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css
index 7e5cf72f..ca6e1738 100644
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@@ -576,7 +576,7 @@ OxButton
     border: 1px solid rgba(0, 0, 0, 0);
     background: rgba(0, 0, 0, 0);
     -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-    //-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
 }
 /*
 --------------------------------------------------------------------------------
@@ -1798,51 +1798,52 @@ Video
 }
 
 
-.OxTimelineLarge {
+.OxLargeVideoTimeline {
     position: absolute;
     height: 72px;
     margin: 0 4px 0 4px;
     overflow: hidden;
 }
-.OxTimelineLarge > div {
+.OxLargeVideoTimeline > div {
     position: absolute;
     height: 72px;
 }
-.OxTimelineLarge > div > img {
+.OxLargeVideoTimeline > div > img {
     position: absolute;
     top: 4px;
 }
-.OxTimelineLarge .OxCut {
-    position: absolute;
-    top: 66px;
-    width: 4px;
-    height: 4px;
-    margin-left: -2px;
-    z-index: 10;
-}
-.OxTimelineLarge .OxMarkerPointIn {
+.OxLargeVideoTimeline .OxCut {
     position: absolute;
     top: 64px;
     width: 6px;
     height: 6px;
+    margin-left: -3px;
+    z-index: 10;
+}
+.OxLargeVideoTimeline .OxMarkerPointIn {
+    position: absolute;
+    top: 63px;
+    width: 7px;
+    height: 7px;
+    margin-left: -6px;
+    z-index: 10;
+}
+.OxLargeVideoTimeline .OxMarkerPointOut {
+    position: absolute;
+    top: 63px;
+    width: 7px;
+    height: 7px;
+    z-index: 10;
+}
+.OxLargeVideoTimeline .OxMarkerPosition {
+    position: absolute;
+    top: 2px;
+    width: 11px;
+    height: 11px;
     margin-left: -5px;
     z-index: 10;
 }
-.OxTimelineLarge .OxMarkerPointOut {
-    position: absolute;
-    top: 64px;
-    width: 6px;
-    height: 6px;
-    z-index: 10;
-}
-.OxTimelineLarge .OxMarkerPosition {
-    position: absolute;
-    top: 2px;
-    width: 9px;
-    height: 9px;
-    z-index: 10;
-}
-.OxTimelineLarge .OxSubtitle {
+.OxLargeVideoTimeline .OxSubtitle {
     position: absolute;
     bottom: 9px;
     border: 1px solid rgba(255, 255, 255, 0.5);
@@ -1860,7 +1861,7 @@ Video
     -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
 }
-.OxTimelineLarge .OxSubtitle.OxHighlight {
+.OxLargeVideoTimeline .OxSubtitle.OxHighlight {
     border-color: rgba(255, 255, 0, 1);
 }
 .OxTimelineSmall {
@@ -1880,17 +1881,60 @@ Video
 .OxTimelineSmall > div > .OxTimelineSmallImage {
     margin-top: 1px;
 }
-.OxTimelineSmall .OxMarkerPointIn {
+
+.OxSmallVideoTimeline .OxMarkerPlay {
     position: absolute;
-    width: 6px;
-    height: 6px;
-    margin-left: -1px;
+    width: 14px;
+    height: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 8px;
 }
-.OxTimelineSmall .OxMarkerPointOut {
+.OxSmallVideoTimeline .OxMarkerPlay > div {
+    width: 10px;
+    height: 10px;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 7px;
+}
+.OxSmallVideoTimeline .OxMarkerPlay > div > div {
+    width: 8px;
+    height: 8px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 5px;
+}
+.OxSmallVideoTimeline .OxMarkerPointIn,
+.OxBlockVideoTimeline .OxMarkerPointIn {
     position: absolute;
-    width: 6px;
-    height: 6px;
+    width: 7px;
+    height: 7px;
+    margin-left: -2px;
+    z-index: 10;
+}
+.OxSmallVideoTimeline .OxMarkerPointIn {
+    top: 15px;
+}
+.OxSmallVideoTimeline .OxMarkerPointOut,
+.OxBlockVideoTimeline .OxMarkerPointOut {
+    position: absolute;
+    width: 7px;
+    height: 7px;
     margin-left: 4px;
+    z-index: 10;
+}
+.OxSmallVideoTimeline .OxMarkerPointOut {
+    top: 15px;
+}
+.OxSmallVideoTimeline .OxMarkerPosition,
+.OxBlockVideoTimeline .OxMarkerPosition {
+    position: absolute;
+    width: 11px;
+    height: 11px;
+    z-index: 10;
+}
+.OxSmallVideoTimeline .OxMarkerPosition {
+    top: 2px;
 }
 
 
@@ -1905,10 +1949,6 @@ Video
 .OxVideoPlayer .OxControls {
     position: absolute;
 }
-.OxVideoPlayer .OxControls.OxOnScreen {
-    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-}
 .OxVideoPlayer .OxControls > * {
     float: left;
 }
@@ -1918,8 +1958,6 @@ Video
     right: 0;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
-    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
     display: none;
 }
 .OxVideoPlayer .OxFind > * {
@@ -1930,9 +1968,26 @@ Video
     padding-top: 2px;
     font-size: 9px;
     text-align: center;
-    color: rgb(255, 255, 255);
 }
 
+.OxVideoPlayer .OxInput {
+    background: transparent;
+    -moz-box-shadow: 0 0 0;
+    -webkit-box-shadow: 0 0 0;
+}
+.OxVideoPlayer div.OxInput.OxFocus {
+    -moz-box-shadow: 0 0 0;
+    -webkit-box-shadow: 0 0 0;
+}
+.OxVideoPlayer input.OxInput {
+    height: 16px;
+    padding: 0 3px 0 3px;
+    border: 0;
+    border-radius: 8px;
+}
+
+
+
 .OxVideoPlayer .OxLoadingIcon {
     position: absolute;
     left: 0;
@@ -1989,7 +2044,6 @@ Video
     padding: 2px;
     font-size: 9px;
     text-align: center;
-    color: rgb(255, 255, 255);    
 }
 
 .OxVideoPlayer .OxPositionInput {
@@ -2010,16 +2064,11 @@ Video
 .OxVideoPlayer .OxResolution > div {
     width: 52px;
     height: 16px;
-    background: rgba(32, 32, 32, 0.5);
 }
 .OxVideoPlayer .OxResolution > div:first-child {
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
-.OxVideoPlayer .OxResolution > div.OxSelected {
-    background-image: -moz-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
-    background-image: -webkit-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
-}
 .OxVideoPlayer .OxResolution > div > * {
     float: left;
 }
@@ -2029,7 +2078,6 @@ Video
     padding-top: 2px;
     font-size: 9px;
     text-align: right;
-    color: rgb(255, 255, 255);
     cursor: default;
 }
 .OxVideoPlayer .OxResolution > div > img {
@@ -2045,7 +2093,6 @@ Video
     padding: 2px;
     font-size: 9px;
     text-align: center;
-    color: rgb(255, 255, 255);
     cursor: default;
 }
 
@@ -2061,7 +2108,6 @@ Video
 .OxVideoPlayer .OxTitle {
     padding-top: 1px;
     text-align: center;
-    color: rgb(255, 255, 255);
     overflow: hidden;
     text-overflow: ellipsis;
 }
@@ -2078,8 +2124,6 @@ Video
     height: 16px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
-    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
     display: none;
 }
 .OxVideoPlayer .OxVolume > * {
@@ -2088,25 +2132,16 @@ Video
 .OxVideoPlayer .OxVolume .OxRange .OxTrack {
     padding: 1px;
     border: 0;
-    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
-    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
 }
 .OxVideoPlayer .OxVolume .OxRange .OxThumb {
     padding: 1px 7px 1px 7px;
     border: 0;
-    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-}
-.OxVideoPlayer .OxVolume .OxRange .OxThumb:active {
-    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
 }
 .OxVideoPlayer .OxVolume .OxVolumeValue {
     width: 24px;
     padding-top: 2px;
     font-size: 9px;
     text-align: center;
-    color: rgb(255, 255, 255);
 }
 
 .OxVideoPreview {
diff --git a/source/Ox.UI/js/Core/Ox.Theme.js b/source/Ox.UI/js/Core/Ox.Theme.js
index edc6c8ca..6ba2d0d2 100644
--- a/source/Ox.UI/js/Core/Ox.Theme.js
+++ b/source/Ox.UI/js/Core/Ox.Theme.js
@@ -38,7 +38,7 @@ Ox.Theme = function(theme) {
                 $this.attr({
                     src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)
                 });
-                Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme))
+                //Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme))
             });
         }
         return theme;
diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
index 2b0c0c31..44f89bb3 100644
--- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
@@ -15,6 +15,7 @@ Ox.BlockVideoTimeline = function(options, self) {
             width: 0
         })
         .options(options || {})
+        .addClass('OxBlockVideoTimeline')
         .css({
             position: 'absolute',
             //background: 'rgba(192, 192, 192, 0.1)'
@@ -62,14 +63,9 @@ Ox.BlockVideoTimeline = function(options, self) {
 
     self.$positionMarker = $('<img>')
         .attr({
-            src: Ox.UI.getImageURL('markerPlay')
-        })
-        .css({
-            position: 'absolute',
-            width: '9px',
-            height: '9px',
-            zIndex: 10
+            src: Ox.UI.getImageURL('markerPosition')
         })
+        .addClass('OxMarkerPosition')
         .appendTo(that.$element);
     setPositionMarker();
 
@@ -77,17 +73,10 @@ Ox.BlockVideoTimeline = function(options, self) {
     ['in', 'out'].forEach(function(point) {
         var titlecase = Ox.toTitleCase(point);
         self.$pointMarker[point] = $('<img>')
-            .addClass('OxPointMarker' + titlecase)
+            .addClass('OxMarkerPoint' + titlecase)
             .attr({
                 src: Ox.UI.getImageURL('marker' + titlecase)
             })
-            .css({
-                position: 'absolute',
-                width: '6px',
-                height: '6px',
-                marginLeft: (point == 'in' ? -1 : 4) + 'px',
-                zIndex: 10
-            })
             .appendTo(that.$element);
         setPointMarker(point);
     });
@@ -205,13 +194,13 @@ Ox.BlockVideoTimeline = function(options, self) {
         self.$pointMarker[point].css({
             left: (position % self.options.width) + 'px',
             top: (parseInt(position / self.options.width) *
-                (self.height + self.margin) + 16) + 'px'
+                (self.height + self.margin) + 15) + 'px'
         });
     }
 
     function setPositionMarker() {
         self.$positionMarker.css({
-            left: (self.options.position % self.options.width) + 'px',
+            left: (self.options.position % self.options.width) - 1 + 'px',
             top: (parseInt(self.options.position / self.options.width) *
                 (self.height + self.margin) + 2) + 'px'
         });
diff --git a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
index eaf6a64c..6b667027 100644
--- a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
@@ -28,7 +28,7 @@ Ox.LargeVideoTimeline = function(options, self) {
                 width: 0
             })
             .options(options || {})
-            .addClass('OxTimelineLarge')
+            .addClass('OxLargeVideoTimeline')
             .mouseleave(mouseleave)
             .mousemove(mousemove)
             .bindEvent({
@@ -75,7 +75,7 @@ Ox.LargeVideoTimeline = function(options, self) {
     self.$markerPosition = $('<img>')
         .addClass('OxMarkerPosition')
         .attr({
-            src: Ox.UI.getImageURL('markerPlay')
+            src: Ox.UI.getImageURL('markerPosition')
         })
         .appendTo(that.$element);
     setMarker();
@@ -134,7 +134,7 @@ Ox.LargeVideoTimeline = function(options, self) {
 
     function setMarker() {
         self.$markerPosition.css({
-            left: (self.center - 4) + 'px',
+            left: self.center + 'px',
         });
     }
 
diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
index c8039028..5d2d0960 100644
--- a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
@@ -71,43 +71,14 @@ Ox.SmallVideoTimeline = function(options, self) {
 
     if (self.options.type == 'player') {
         self.$positionMarker = $('<div>')
-            .css({
-                position: 'absolute',
-                width: '14px',
-                height: '14px',
-                border: '1px solid rgba(0, 0, 0, 0.5)',
-                borderRadius: '8px'
-            })
-            .append(
-                self.$positionMarkerRing = $('<div>')
-                    .css({
-                        width: '10px',
-                        height: '10px',
-                        border: '2px solid rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')',                        
-                        borderRadius: '7px',
-                    })
-                    .append(
-                        $('<div>')
-                            .css({
-                                width: '8px',
-                                height: '8px',
-                                border: '1px solid rgba(0, 0, 0, 0.5)',
-                                borderRadius: '5px',
-                            })
-                    )
-            )
+            .addClass('OxMarkerPlay' + (self.options.paused ? ' OxPaused' : ''))
+            .append($('<div>').append($('<div>')))
             .appendTo(that.$element);
     } else {
         self.$positionMarker = $('<img>')
+            .addClass('OxMarkerPosition')
             .attr({
-                src: Ox.UI.getImageURL('markerPlay')
-            })
-            .css({
-                position: 'absolute',
-                top: '2px',
-                width: '9px',
-                height: '9px',
-                zIndex: 10
+                src: Ox.UI.getImageURL('markerPosition')
             })
             .appendTo(that.$element);
     }
@@ -118,18 +89,10 @@ Ox.SmallVideoTimeline = function(options, self) {
         ['in', 'out'].forEach(function(point) {
             var titlecase = Ox.toTitleCase(point);
             self.$pointMarker[point] = $('<img>')
-                .addClass('OxPointMarker' + titlecase)
+                .addClass('OxMarkerPoint' + titlecase)
                 .attr({
                     src: Ox.UI.getImageURL('marker' + titlecase)
                 })
-                .css({
-                    position: 'absolute',
-                    top: '16px',
-                    width: '6px',
-                    height: '6px',
-                    marginLeft: (point == 'in' ? -1 : 4) + 'px',
-                    zIndex: 10
-                })
                 .appendTo(that.$element);
             setPointMarker(point);
         });
@@ -213,7 +176,7 @@ Ox.SmallVideoTimeline = function(options, self) {
         self.$positionMarker.css({
             left: self.interfaceLeft + Math.round(
                 self.options.position * self.imageWidth / self.options.duration
-            ) - (self.options.type == 'editor' ? 4 : 0) + self.options._offset + 'px'
+            ) - (self.options.type == 'editor' ? 5 : 0) + self.options._offset + 'px'
         });
     }
 
@@ -256,9 +219,9 @@ Ox.SmallVideoTimeline = function(options, self) {
             });
             setPointMarker('out');
         } else if (key == 'paused') {
-            self.$positionMarkerRing.css({
-                borderColor: 'rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')'
-            })
+            self.$positionMarker[
+                self.options.paused ? 'addClass' : 'removeClass'
+            ]('OxPaused');
         } else if (key == 'position') {
             setPositionMarker();
         } else if (key == 'results') {
diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index 6f675503..7db4a0f8 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -462,7 +462,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: 'Find',
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent({
                         click: toggleFind
                     })
@@ -479,7 +478,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: ['Enter Fullscreen', 'Exit Fullscreen'],
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent({
                         click: function() {
                             toggleFullscreen('button');
@@ -495,7 +493,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent({
                         click: goToPoint
                     })
@@ -512,7 +509,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: ['Mute', 'Unmute'],
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent({
                         click: function() {
                             toggleMuted('button');
@@ -528,7 +524,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: 'Next',
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent({
                         click: function() {
                             goToNextClip(1);
@@ -548,7 +543,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: ['Play', 'Pause'],
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent({
                         click: function() {
                             togglePaused('button');
@@ -564,7 +558,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: 'Play In to Out',
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent({
                         click: playInToOut
                     })
@@ -637,7 +630,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: 'Previous',
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent({
                         click: function() {
                             goToNextClip(-1);
@@ -701,7 +693,6 @@ Ox.VideoPlayer = function(options, self) {
                             .html(resolution + 'p')
                             .appendTo($item);
                         $('<img>')
-                            .addClass('OxVideo')
                             .attr({
                                 src: resolution == self.options.resolution ?
                                     Ox.UI.getImageURL('symbolCheck', 'modern') :
@@ -721,7 +712,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: ['Scale to Fill', 'Scale to Fit'],
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent('click', function() {
                         toggleScale('button');
                     })
@@ -735,7 +725,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent({
                         click: setPoint
                     })
@@ -752,7 +741,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: ['Larger', 'Smaller'],
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent('click', toggleSize)
                     .appendTo(self['$controls' + titleCase]);
 
@@ -801,7 +789,6 @@ Ox.VideoPlayer = function(options, self) {
                         tooltip: 'Volume',
                         type: 'image'
                     })
-                    .addClass('OxVideo')
                     .bindEvent({
                         click: toggleVolume
                     })
@@ -844,7 +831,6 @@ Ox.VideoPlayer = function(options, self) {
                 tooltip: 'Previous',
                 type: 'image'
             })
-            .addClass('OxVideo')
             .bindEvent({
                 click: function() {
                     goToNextResult(-1);
@@ -859,7 +845,6 @@ Ox.VideoPlayer = function(options, self) {
                 tooltip: 'Next',
                 type: 'image'
             })
-            .addClass('OxVideo')
             .bindEvent({
                 click: function() {
                     goToNextResult(1);
@@ -895,7 +880,6 @@ Ox.VideoPlayer = function(options, self) {
                 tooltip: 'Clear',
                 type: 'image'
             })
-            .addClass('OxVideo')
             .bindEvent({
                 click: function() {
                     self.options.find = '';
@@ -918,7 +902,6 @@ Ox.VideoPlayer = function(options, self) {
                 tooltip: 'Hide',
                 type: 'image'
             })
-            .addClass('OxVideo')
             .bindEvent({
                 click: toggleFind
             })
@@ -947,7 +930,6 @@ Ox.VideoPlayer = function(options, self) {
                 tooltip: 'Hide',
                 type: 'image'
             })
-            .addClass('OxVideo')
             .bindEvent({
                 click: toggleVolume
             })
@@ -962,7 +944,6 @@ Ox.VideoPlayer = function(options, self) {
                 tooltip: ['Mute', 'Unmute'],
                 type: 'image'
             })
-            .addClass('OxVideo')
             .bindEvent({
                 click: function() {
                     toggleMuted();
diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css
index 5dc1e0cb..9eca68ab 100644
--- a/source/Ox.UI/themes/classic/css/classic.css
+++ b/source/Ox.UI/themes/classic/css/classic.css
@@ -197,6 +197,11 @@ Forms
     background: rgb(192, 192, 192);
     color: rgb(128, 128, 128);    
 }
+.OxThemeClassic .OxButton.OxSymbol.OxDisabled {
+    background: rgba(0, 0, 0, 0);
+    opacity: 0.5;
+}
+
 
 .OxThemeClassic .OxButton.OxSelected,
 .OxThemeClassic .OxSelect.OxSelected {
@@ -559,29 +564,54 @@ Video
 ================================================================================
 */
 
-.OxThemeClassic .OxVideoPlayer .OxInput {
-    background: rgba(0, 0, 0, 0);
-    -moz-box-shadow: 0 0 0;
-    -webkit-box-shadow: 0 0 0;
+.OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay {
+    border-color: rgba(255, 255, 255, 0.5);
 }
-.OxThemeClassic .OxVideoPlayer div.OxInput.OxFocus {
-    -moz-box-shadow: 0 0 0;
-    -webkit-box-shadow: 0 0 0;
+.OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay > div {
+    border-color: rgba(0, 0, 0, 1);
 }
-.OxThemeClassic .OxVideoPlayer input.OxInput {
-    height: 16px;
-    padding: 0 3px 0 3px;
-    border: 0;
-    border-radius: 8px;
-    color: rgb(255, 255, 255);
-    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
-    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
+.OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay.OxPaused > div {
+    border-color: rgba(0, 0, 0, 0.5);
 }
-.OxThemeClassic .OxVideoPlayer .OxRange .OxThumb:active {
-    background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-    background: -webkit-linear-gradient(top, rgba(255, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
+.OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay > div > div {
+    border-color: rgba(255, 255, 255, 0.5);
 }
 
+.OxThemeClassic .OxVideoPlayer .OxControls.OxOnScreen {
+    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
+}
+.OxThemeClassic .OxVideoPlayer .OxFind {
+    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
+}
+.OxThemeClassic .OxVideoPlayer input.OxInput {
+    background-image: -moz-linear-gradient(top, rgba(192, 192, 192, 0.5), rgba(255, 255, 255, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(176, 176, 176, 1), rgba(224, 224, 224, 1));
+}
+.OxThemeClassic .OxVideoPlayer .OxResolution > div {
+    background: rgba(224, 224, 224, 0.5);
+}
+.OxThemeClassic .OxVideoPlayer .OxResolution > div.OxSelected {
+    background-image: -moz-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5));
+}
+.OxThemeClassic .OxVideoPlayer .OxVolume {
+    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
+}
+.OxThemeClassic .OxVideoPlayer .OxVolume .OxRange .OxTrack {
+    background-image: -moz-linear-gradient(top, rgba(192, 192, 192, 0.5), rgba(255, 255, 255, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(192, 192, 192, 0.5), rgba(255, 255, 255, 0.5));
+}
+.OxThemeClassic .OxVideoPlayer .OxVolume .OxRange .OxThumb {
+    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
+}
+.OxThemeClassic .OxVideoPlayer .OxVolume .OxRange .OxThumb:active {
+    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
+}
 
 /*
 ================================================================================
diff --git a/source/Ox.UI/themes/classic/svg/markerPlay.svg b/source/Ox.UI/themes/classic/svg/markerPosition.svg
similarity index 100%
rename from source/Ox.UI/themes/classic/svg/markerPlay.svg
rename to source/Ox.UI/themes/classic/svg/markerPosition.svg
diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css
index a76e67a4..720364f4 100644
--- a/source/Ox.UI/themes/modern/css/modern.css
+++ b/source/Ox.UI/themes/modern/css/modern.css
@@ -198,6 +198,11 @@ Forms
     background: rgb(80, 80, 80);
     color: rgb(128, 128, 128);
 }
+.OxThemeModern .OxButton.OxSymbol.OxDisabled {
+    background: rgba(0, 0, 0, 0);
+    opacity: 0.5;
+}
+
 .OxThemeModern .OxButton.OxSelected,
 .OxThemeModern .OxSelect.OxSelected,
 .OxThemeModern .OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxSelected {
@@ -552,37 +557,63 @@ Video
 }
 
 
+.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay {
+    border-color: rgba(0, 0, 0, 0.5);
+}
+.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay > div {
+    border-color: rgba(255, 255, 255, 1);
+}
+.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay.OxPaused > div {
+    border-color: rgba(255, 255, 255, 0.5);
+}
+.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay > div > div {
+    border-color: rgba(0, 0, 0, 0.5);
+}
+
+
 .OxThemeModern .OxVideoPlayer .OxButton.OxDisabled {
     background: transparent;
     opacity: 0.25;
 }
 
-.OxThemeModern .OxVideoPlayer .OxInput {
-    background: transparent;
-    -moz-box-shadow: 0 0 0;
-    -webkit-box-shadow: 0 0 0;
+.OxThemeModern .OxVideoPlayer .OxControls.OxOnScreen {
+    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
 }
-.OxThemeModern .OxVideoPlayer div.OxInput.OxFocus {
-    -moz-box-shadow: 0 0 0;
-    -webkit-box-shadow: 0 0 0;
+.OxThemeModern .OxVideoPlayer .OxFind {
+    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
 }
 .OxThemeModern .OxVideoPlayer input.OxInput {
-    height: 16px;
-    padding: 0 3px 0 3px;
-    border: 0;
-    border-radius: 8px;
-    color: rgb(255, 255, 255);
+    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(32, 32, 32, 1));
+}
+.OxThemeModern .OxVideoPlayer .OxResolution > div {
+    background: rgba(32, 32, 32, 0.5);
+}
+.OxThemeModern .OxVideoPlayer .OxResolution > div.OxSelected {
+    background-image: -moz-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
+}
+.OxThemeModern .OxVideoPlayer .OxVolume {
+    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
+}
+.OxThemeModern .OxVideoPlayer .OxVolume .OxRange .OxTrack {
     background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
     background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
 }
-.OxThemeModern .OxVideoPlayer input.OxInput.OxPlaceholder {
-    //opacity: 0.25;
+.OxThemeModern .OxVideoPlayer .OxVolume .OxRange .OxThumb {
+    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
 }
-.OxThemeModern .OxVideoPlayer .OxRange .OxThumb:active {
-    background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-    background: -webkit-linear-gradient(top, rgba(255, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
+.OxThemeModern .OxVideoPlayer .OxVolume .OxRange .OxThumb:active {
+    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
+    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
 }
 
+
+// fixme: used?
 .OxThemeModern .OxVideoPlayer .OxSelect {
     border-color: transparent;
     //margin-left: 0px;