better css for linux

build/css/ox.ui.css

@@ -19,7 +19,7 @@ div {
     -webkit-user-select: none;
 }
 div, input, textarea {
-    font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI;
+    font-family: Lucida Grande, Segoe UI, DejaVu Sans, Arial;
     font-size: 11px;
 }
 td {
@@ -674,9 +674,9 @@ Lists
     padding: 2px 4px 2px 4px;
 }
 .OxTextList .OxBar {
-    z-index: 10;
-    -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
-    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
+    //z-index: 10;
+    //-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
+    //-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
 }
 .OxTextList .OxBar .OxHead {
     position: absolute;

build/js/ox.load.js

@@ -87,27 +87,44 @@ $(function() {
         function loaded() {
             var $div = $('<div>')
                     .css($.extend(css, {
-                        width: '216px',
+                        width: (length * 72) + 'px',
                         height: '72px'
-                    }));
+                    })),
+                i = 0;
             $.each(src, function(name, src) {
                 $('<a>')
                     .attr({
                         href: userAgents[name],
                         title: name
                     })
+                    .css({
+                        position: 'absolute',
+                        left: (i++ * 72) + 'px',
+                        width: '72px',
+                        height: '72px',
+                    })
                     .append(
                         $('<img>')
                             .attr({
                                 src: src
                             })
-                            .css({
-                                float: 'left',
+                            .css($.extend(css, {
                                 width: '64px',
                                 height: '64px',
                                 border: 0,
-                                margin: '4px',
                                 cursor: 'pointer'
+                            }))
+                            .mouseenter(function() {
+                                $(this).animate({
+                                    width: '72px',
+                                    height: '72px',
+                                }, 250);
+                            })
+                            .mouseleave(function() {
+                                $(this).animate({
+                                    width: '64px',
+                                    height: '64px',
+                                }, 250);                                
                             })
                     )
                     .appendTo($div);

build/js/ox.ui.js

@@ -825,6 +825,16 @@ requires
         };
     }();
 
+    /*
+    ----------------------------------------------------------------------------
+    Ox.Theme
+    ----------------------------------------------------------------------------
+    */
+
+    Ox.Theme = function() {
+        
+    };
+
     /*
     ----------------------------------------------------------------------------
     Ox.URL