OSDN Git Service

version 0.5.5, bugfix, add close button to Cabinet & Gallery.
authoritozyun <itozyun@gmail.com>
Sat, 4 Aug 2012 19:46:11 +0000 (04:46 +0900)
committeritozyun <itozyun@gmail.com>
Sat, 4 Aug 2012 19:46:11 +0000 (04:46 +0900)
0.5.x/javascripts/peta.apps.js
0.5.x/javascripts/system.js
0.5.x/stylesheets/peta.apps.css
0.5.x/stylesheets/system.css

index 7260315..f8ad2fe 100644 (file)
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.apps.js
- *   version 0.5.4
+ *   version 0.5.5
  *   
  * author:
  *   itozyun
 var Cabinet = gOS.registerApplication( function(){
        var self         = this,
                finder       = null,
-               tree         = null;
+               tree         = null,
+               headerH      = 0;
 
        this.bgColor     = '#FFFFFF';
        this.MIN_WIDTH   = 500;
        this.MIN_HEIGHT  = 300;
        this.onInit = function(){
                self.rootElement.id = 'cabinet-root';
-               self.rootElement.innerHTML = '<div id="cabinet-container" class="finder-container"></div>';
+               self.rootElement.innerHTML = [
+                       '<div id="cabinet-header">Cabinet<div id="cabinet-close-button">x</div></div>',
+                       '<div id="cabinet-container" class="finder-container"></div>'
+               ].join( '' );
                
                self.fetchCSS( 'stylesheets/peta.apps.css' );
                
@@ -484,6 +488,10 @@ var Cabinet = gOS.registerApplication( function(){
                delete self.onInit;
        };
        this.onOpen = function( _w, _h ){
+               headerH = Util.getElementSize( document.getElementById( 'cabinet-header' ) ).height;
+               
+               self.addMouseEventListener( document.getElementById( 'cabinet-close-button' ), 'click', Cabinet.shutdown );
+               
                finder = self.createFinder( self.rootElement, tree );
                self.onPaneResize( _w, _h );
        };
@@ -493,21 +501,25 @@ var Cabinet = gOS.registerApplication( function(){
                finder = tree = null;
        };
        this.onPaneResize = function( _w, _h ){
-               finder.resize( _w, _h );
+               finder.resize( _w, _h - headerH );
        };
 }, false, true, 'Cabinet', 'cabinet', null, '#1C1C1C' );
 
 var Gallery = gOS.registerApplication( function(){
        var self         = this,
                finder       = null,
-               tree         = null;
+               tree         = null,
+               headerH      = 0;
 
        this.bgColor     = '#FFFFFF';
        this.MIN_WIDTH   = 500;
        this.MIN_HEIGHT  = 300;
        this.onInit = function(){
                self.rootElement.id        = 'gallery-root';
-               self.rootElement.innerHTML = '<div id="gallery-container" class="finder-container"></div>';
+               self.rootElement.innerHTML = [
+                       '<div id="gallery-header">Cabinet<div id="gallery-close-button">x</div></div>',
+                       '<div id="gallery-container" class="finder-container"></div>'
+               ].join( '' );
                
                self.fetchCSS( 'stylesheets/peta.apps.css' );
                
@@ -521,6 +533,10 @@ var Gallery = gOS.registerApplication( function(){
                _pic.destroy();
        };
        this.onOpen = function( _w, _h ){
+               headerH = Util.getElementSize( document.getElementById( 'gallery-header' ) ).height;
+               
+               self.addMouseEventListener( document.getElementById( 'gallery-close-button' ), 'click', Gallery.shutdown );
+               
                finder = self.createFinder( self.rootElement, tree );
                self.onPaneResize( _w, _h );
        };
@@ -530,7 +546,7 @@ var Gallery = gOS.registerApplication( function(){
                finder = tree = null;
        };
        this.onPaneResize = function( _w, _h ){
-               finder.resize( _w, _h );
+               finder.resize( _w, _h - headerH );
        };
 }, false, true, 'Gallery', 'gallery', null, '#01A31C' );
 
@@ -1596,17 +1612,17 @@ var Editor = gOS.registerApplication( function(){
                                y = _y;
                                w = _w;
                                h = _h;
-                       }
+                       };
                        function bodyBackOrForward( isBack ){
-                               if( !self) return;
-                               if( bodyIsTachable === !isBack) return;
+                               if( !self ) return;
+                               if( bodyIsTachable === !isBack ) return;
                                elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';
                                elmBodyStyle.left =             isBack === true ? 0  : x +'px';
-                               elmBodyStyle.top =              isBack === true ? 0  : y +headerH +'px';
-                               elmBodyStyle.width =    isBack === true ? '' : ( w -WINDOW_BODY_BODER_SIZE *2) +'px';
+                               elmBodyStyle.top =              isBack === true ? 0  : y + headerH + 'px';
+                               elmBodyStyle.width =    isBack === true ? '' : ( w - WINDOW_BODY_BODER_SIZE * 2 ) + 'px';
                                bodyIsTachable === isBack && isBack === true ? elmHeader.parentNode.insertBefore( elmBody, elmHeader.nextSibling ) : app.rootElement.appendChild( elmBody );
                                bodyIsTachable = !isBack;
-                       }
+                       };
 
                        this.init = function(){
                                self.elm      = elmWindowOrigin.cloneNode( true );
@@ -1683,7 +1699,7 @@ var Editor = gOS.registerApplication( function(){
                        };
                        this.onFadeOut = function(){
                                self.elm.parentNode.removeChild( self.elm );
-                               self.onClose && setTimeout( self.onClose, 0 );
+                               self.onClose &&  app.addAsyncCall( self.onClose );
                        };
                        this.close = function(){
                                if( visible === false) return;
@@ -1876,21 +1892,21 @@ var Editor = gOS.registerApplication( function(){
                function addImage(){
                        IMAGE_EXPLORER_WINDOW.open();// setTimeout( IMAGE_EXPLORER_WINDOW.open, 0);
                        TOOL_BOX_WINDOW.bodyBackOrForward( true );
-               }
+               };
                function addText(){
-                       setTimeout( PANEL_ELEMENT_CONTROL.createTextElement, 0 );
-               }
+                       app.addAsyncCall( PANEL_ELEMENT_CONTROL.createTextElement );
+               };
                function switchGrid(){
-                       setTimeout( GRID_CONTROL.update, 0 );
-               }
+                       app.addAsyncCall( GRID_CONTROL.update );
+               };
                function popupHelp(){
                        TOOL_BOX_WINDOW.bodyBackOrForward( true );
-                       setTimeout( HELP_DOCUMENTS_WINDOW.open, 0 );
-               }
+                       app.addAsyncCall( HELP_DOCUMENTS_WINDOW.open );
+               };
                function editBG( e ){
                        TOOL_BOX_WINDOW.bodyBackOrForward( true );
-                       setTimeout( INFOMATION_WINDOW.open, 0 );
-               }
+                       app.addAsyncCall( INFOMATION_WINDOW.open );
+               };
                
                return WINDOWS_CONTROL.createWindow(
                        {
@@ -2149,17 +2165,17 @@ var Editor = gOS.registerApplication( function(){
                        jqAjaxContents.removeClass( 'loading' ).append( elmNavi, elmPages );
                        
                        jqNaviItems = jqAjaxContents.find( 'a.' + elmItemOrigin.className ).click( onNaviClick );
-                       jqPages = jqAjaxContents.find( '.page-content' );
+                       jqPages     = jqAjaxContents.find( '.page-content' );
                        jqPages.find( 'a' ).click( onInnerLinkClick );
                        
-                       setTimeout( jumpPage, 0 );
+                       app.addAsyncCall( jumpPage );
                }
                function onSelectionClick( _pageIndex ){
                        HELP_DOCUMENTS_WINDOW.open();
                        jumpPage( _pageIndex );
                }
                function jumpPage( _index ){
-                       if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index ){
+                       if( Type.isNumber( _index ) === true && 0 <= _index && _index < numPage && currentPageIndex !== _index ){
                                currentPageIndex = _index;
                        }
                        jqNaviItems.removeClass( 'current' ).eq( currentPageIndex).addClass( 'current' );
@@ -2182,7 +2198,7 @@ var Editor = gOS.registerApplication( function(){
                                onInit: function(){
                                        help           = MENU_BAR_CONTROL.HELP;
                                        onLoadFunction = help.createAjaxSelection( onAjaxStart );
-                                       jqAjaxContents = $( HELP_DOCUMENTS_WINDOW.elm ).find( '.window-body' ).addClass( 'loading' );
+                                       jqAjaxContents = $( HELP_DOCUMENTS_WINDOW.elm ).find( '.window-body' ).addClass( 'loading' ).css( { overflow: 'auto' } );
                                        delete HELP_DOCUMENTS_WINDOW.onInit;
                                },
                                onFirstOpen: function( _w, _h ){
index 0631a66..9799331 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR system.js\r
- *   version 0.5.4\r
+ *   version 0.5.5\r
  * \r
  * \r
  * Type\r
@@ -3959,7 +3959,7 @@ var Finder = ( function(){
                        elmContainer.removeChild( ELM_WRAPPER );\r
                        file && file.destroy();\r
                        file = elmContainer = onDownCallback = onEditorCallback = onViewerCallback = onActionCallback = viewerList = editorList = null;\r
-                       FINDER_ICON_POOL.push( instansce);\r
+                       FINDER_ICON_POOL.push( instansce );\r
                };\r
        }\r
        function updateIconPosition( _style, _w, _index, _elm ){\r
@@ -4035,7 +4035,7 @@ var Finder = ( function(){
                        iconH            = size.height,\r
                        style            = 0,\r
                        w, h, bodyH,\r
-                       instance = this;\r
+                       instance         = this;\r
                        \r
                tree.addTreeEventListener( Const.TREE.EVENT.UPDATE, draw );\r
                elmRoot.appendChild( elmContainer );\r
@@ -4082,8 +4082,8 @@ var Finder = ( function(){
                        };\r
                };\r
                \r
-               function onHeadClick( i){\r
-                       var l = BREAD_ARRAY.length -1;\r
+               function onHeadClick( i ){\r
+                       var l = BREAD_ARRAY.length - 1;\r
                        if( i < l){\r
                                var _file = tree.getParentFileAt( i);\r
                                if( _file !== null){\r
@@ -4099,7 +4099,7 @@ var Finder = ( function(){
                                        tree.down( i );\r
                                        draw( w, h );\r
                                } else {\r
-                                       Type.isFunction( onSelect ) === true && onSelect( _file  );\r
+                                       Type.isFunction( onSelect ) === true && onSelect( _file );\r
                                };\r
                                _file.destroy();\r
                        };\r
@@ -4128,33 +4128,35 @@ var Finder = ( function(){
                        h = _h;\r
                        elmBody.style.height = ( _h - headH ) + 'px';\r
                        \r
-                       for( var i=0, l=ICON_ARRAY.length; i<l; ++i ){\r
-                               ICON_ARRAY[ i].onResize( _w );\r
-                       }\r
+                       for( var i = ICON_ARRAY.length; i; ){\r
+                               ICON_ARRAY[ --i ].onResize( _w );\r
+                       };\r
                };\r
                this.destroy = function(){\r
                        tree.removeTreeEventListener( Const.TREE.EVENT.UPDATE, draw );\r
                        \r
                        while( BREAD_ARRAY.length > 0 ){\r
                                BREAD_ARRAY.shift().destroy();\r
-                       }\r
+                       };\r
                        while( ICON_ARRAY.length > 0 ){\r
                                ICON_ARRAY.shift().destroy();\r
-                       }\r
+                       };\r
+                       \r
+                       FINDER_ARRAY.splice( Util.getIndex( FINDER_ARRAY, instance ), 1 );\r
                };\r
        };\r
        FinderClass.prototype = new AbstractBasicPane();\r
        \r
-       function getFinderIcon( _file, _elmContainer, w, index, style, onDown, onEditor, onViwer, onAction){\r
+       function getFinderIcon( _file, _elmContainer, w, index, style, onDown, onEditor, onViwer, onAction ){\r
                var _icon;\r
                if( FINDER_ICON_POOL.length > 0){\r
                        _icon = FINDER_ICON_POOL.shift();\r
                } else {\r
                        _icon = new FinderIconClass();\r
-               }\r
+               };\r
                _icon.init( _file, _elmContainer, w, index, style, onDown, onEditor, onViwer, onAction );\r
                return _icon;\r
-       }\r
+       };\r
        \r
        function getBreadcrumb( _file, _elmContainer, index, callback ){\r
                var _bread;\r
@@ -4162,10 +4164,10 @@ var Finder = ( function(){
                        _bread = BREAD_OBJECT_POOL.shift();\r
                } else {\r
                        _bread = new BreadcrumbClass();\r
-               }\r
+               };\r
                _bread.init( _file, _elmContainer, index, callback );\r
                return _bread;\r
-       }\r
+       };\r
 \r
        return {\r
                init: function(){\r
@@ -4193,7 +4195,7 @@ var Finder = ( function(){
                },\r
                isFinderHeadInstance: function(){\r
                }\r
-       }\r
+       };\r
 })();\r
 \r
 \r
index 6b4756f..41ef157 100644 (file)
@@ -1,7 +1,7 @@
 @charset "UTF-8";\r
 \r
 /* pettanR peta.apps.css\r
- *   version 0.5.4\r
+ *   version 0.5.5\r
  * \r
  *   author:\r
  *     itozyun\r
                .console-page {\r
 \r
                }\r
+               \r
+               \r
        #editor {\r
                font-size: 9pt;\r
        }\r
 \r
 /*--------------------------------------------------------------------------------------\r
  * \r
+ *  Cabinet, Gallery\r
+ *  \r
+ -------------------------------------------------------------------------------------*/\r
+       #cabinet-header, #gallery-header {\r
+               position:                       relative;\r
+               background-color:       #111;\r
+               color:                          #fff;\r
+               font-size:                      12pt;\r
+               line-height:            1;\r
+               padding:                        6pt 0 6pt 5pt;\r
+       }\r
+       #cabinet-close-button, #gallery-close-button {\r
+               position:                       absolute;\r
+               right:                          0;\r
+               top:                            0;\r
+               border-left:            1px solid #666;\r
+               height:                         24pt;\r
+               padding:                        6pt 9pt 6pt 9pt;\r
+               text-align:                     center;\r
+               cursor:                         pointer;\r
+       }\r
+\r
+/*--------------------------------------------------------------------------------------\r
+ * \r
  *  overlay\r
  *  \r
  -------------------------------------------------------------------------------------*/\r
                                #upload-console {\r
                                }\r
 \r
-/*--------------------------------------------------------------------------------------\r
- * \r
- *  home\r
- *  \r
- -------------------------------------------------------------------------------------*/\r
-       #home {\r
-\r
-       }\r
 \r
 \r
 /*--------------------------------------------------------------------------------------\r
                        background-repeat:              repeat;\r
                        /* background-image:            url('grid.gif'); grid用イメージはgrid使用時にjsで埋め込み */\r
                }\r
-\r
-/*--------------------------------------------------------------------------------------\r
- * \r
- *  Finder\r
- *  \r
- -------------------------------------------------------------------------------------*/\r
-       .finder-body {\r
-               position:                               relative;\r
-               overflow:                               auto;\r
-       }\r
-               .finder-container .loading {\r
-                        background-position: 50% bottom;\r
-               }\r
-       .finder-header {\r
-               height:                                 40px;\r
-               position:                               relative;\r
-               background-color:               #333;\r
-       }\r
-               .finder-header ul {\r
-                       list-style:                             none;\r
-                       position:                               absolute;\r
-                       top:                                    0;\r
-                       left:                                   48px;\r
-                       height:                                 40px;\r
-                       line-height:                    40px;\r
-                       padding:                                0;\r
-                       margin:                                 0;\r
-               }\r
-                       .finder-header li {\r
-                               position:                               absolute;\r
-                               top:                                    0;\r
-                               left:                                   0;\r
-                               height:                                 40px;\r
-                               width:                                  90px;\r
-                               padding:                                0;\r
-                               margin:                                 0;\r
-                       }\r
-                       .finder-header li a,\r
-                       .finder-header li a:link,\r
-                       .finder-header li a:visited {\r
-                               display:                                block;\r
-                               height:                                 14px;\r
-                               font-size:                              14px;\r
-                               line-height:                    14px;\r
-                               padding:                                16px 0 10px 20px;\r
-                               margin:                                 0;\r
-                               color:                                  #eee;\r
-                               overflow:                               hidden;\r
-                       }\r
-                       .finder-header li a:hover {\r
-                               text-decoration:                none;\r
-                               background-color:               #66f;\r
-                               color:                                  #eee;\r
-                       }\r
-                       \r
-                       \r
-               .finder-header .button {\r
-                       position:                               absolute;\r
-                       top:                                    8px;\r
-                       width:                                  30px;\r
-                       height:                                 24px;\r
-                       line-height:                    24px;\r
-               }\r
-               .finder-sidebar-switch {\r
-                       left:                                   8px;\r
-               }\r
-               .finder-style-switch {\r
-                       right:                                  48px;\r
-               }\r
-               .finder-action-switch {\r
-                       right:                                  8px;\r
-               }\r
                \r
-       /*  Finder Icon\r
-       --------------------------------------------------------------------------------------*/\r
-       .finder-icon {\r
-               position:                                       relative;\r
-               height:                                         74px;\r
-               border-bottom:                          1px solid #ccc;\r
-               clear:                                          both;\r
-               overflow:                                       hidden; /* for webkit */\r
-       }\r
-       .finder-icon:hover {\r
-               background-color:                       #eee;\r
-               cursor:                                         pointer;\r
-       }\r
-               .fnder-icon-modern .finder-icon-handle,\r
-               .fnder-icon-modern .finder-icon-thumbnail,\r
-               .fnder-icon-modern .finder-icon-filename,\r
-               .fnder-icon-modern .finder-icon-summary {\r
-                       display:                                        table-cell;\r
-               vertical-align:                         middle;\r
-               line-height:                            1.3em;\r
-           }\r
-               \r
-               .finder-icon-handle {\r
-                       width:                                          20px;\r
-                       height:                                         74px;\r
-               }\r
-               \r
-               .finder-icon-thumbnail {\r
-                       width:                                          64px;\r
-                       height:                                         74px;\r
-                       cursor:                                         pointer;\r
-                       background-repeat:                      no-repeat;\r
-                       background-position:            50% 50%;\r
-                       background-image:                       url('../images/sprite.gif');\r
-               }\r
                \r
-               .finder-icon .file-type-folder {\r
-                       background-position:            0 -75px;\r
-               }\r
-               .finder-icon .file-type-album {\r
-               }\r
-               .finder-icon .file-type-author {\r
-                       background-position:            -70px -75px;\r
-               }               \r
-               .finder-icon .file-type-comic {\r
-                       background-position:            0 -145px;\r
-               }\r
-               .finder-icon .file-type-cabinet {\r
-                       background-position:            -70px -145px;\r
-               }\r
-               .finder-icon .file-type-panel {\r
-                       background-position:            0 -215px;\r
-               }\r
-               .finder-icon .file-type-artist {\r
-                       background-position:            -70px -215px;\r
-               }\r
-               .finder-icon .file-type-balloon {\r
-                       background-position:            0 -285px;\r
-               }\r
-               .finder-icon .file-type-charactor {\r
-                       background-position:            -70px -285px;\r
-               }               \r
-               .has-thumbnail {\r
-               }\r
-               .fnder-icon-modern .finder-icon-filename {\r
-                       width:                                          200px;\r
-                       padding:                                        5px 10px;\r
-                       height:                                         64px;\r
-                       font-weight:                            bold;\r
-                       color:                                          #333;\r
-               }\r
-               .fnder-icon-modern .finder-icon-summary {\r
-                       width:                                          300px;\r
-                       padding:                                        5px 10px;\r
-                       height:                                         64px;\r
-                       color:                                          #666;\r
-               }\r
-\r
-       /*  Finder Icon ie7-\r
-       --------------------------------------------------------------------------------------*/\r
-       .finder-icon a,\r
-       .finder-icon a:link,\r
-       .finder-icon a:visited,\r
-       .finder-icon a:active {\r
-               display:                                block;\r
-               height:                                 74px;\r
-               text-decoration:                none;\r
-               zoom:                                   1;\r
-               cursor:                                 pointer;\r
-       }\r
-       .finder-icon a:hover {\r
-               _background-color:              #eee;\r
-               color:                                  #333;\r
-       }\r
-               .fnder-icon-ie7 .finder-icon-handle,\r
-               .fnder-icon-ie7 .finder-icon-thumbnail {\r
-               zoom:                                   1;\r
-               line-height:                    1.3em;\r
-           }\r
-               .finder-icon-cell {\r
-                       display:                                inline;\r
-                       zoom:                                   1;\r
-               }\r
-                       .finder-icon-vertical-middle-outer {\r
-                               display:                                block;\r
-                               height:                                 74px;\r
-                               position:                               relative;\r
-                       }\r
-                       .finder-icon-ie-filename .finder-icon-vertical-middle-outer {\r
-                               width:                                          200px;\r
-                               font-weight:                            bold;\r
-                               color:                                          #333;\r
-                       }\r
-                       .finder-icon-ie-summary .finder-icon-vertical-middle-outer {\r
-                               width:                                          300px;\r
-                               color:                                          #666;\r
-                       }\r
-                               .finder-icon-vertical-middle-inner {\r
-                                       display:                                        block;\r
-                                       position:                                       absolute;\r
-                                       top:                                            50%;\r
-                                       margin:                                         0 5px;\r
-                               }\r
-                                       .fnder-icon-ie7 .finder-icon-filename,\r
-                                       .fnder-icon-ie7 .finder-icon-summary {\r
-                                                       position:               relative;\r
-                                                       top:                    -50%;\r
-                                       }\r
-                                       \r
-       /*  Finder Icon Console\r
-       --------------------------------------------------------------------------------------*/                \r
-               .finder-icon-console {\r
-                       position:                                       absolute;\r
-                       top:                                            0;\r
-                       right:                                          0;\r
-               }\r
-                       .finder-icon-console a {\r
-                               display:                                        block;\r
-                               width:                                          74px;\r
-                               height:                                         74px;\r
-                               border-left:                            1px solid #ccc;\r
-                               float:                                          right;\r
-                               background-image:                       url('../images/sprite.gif') !important;\r
-                               background-repeat:                      no-repeat;\r
-                       }\r
-                       .finder-icon-console a:hover {\r
-                               background-color:                       #ccc !important;\r
-                       }\r
-                       .finder-icon-console-action {\r
-                               background-position:            0px -355px;\r
-                       }\r
-                       .finder-icon-console-editor-apps {\r
-                               background-position:            -70px -355px;\r
-                       }\r
-                       .finder-icon-console-viewer-apps {\r
-                               background-position:            0px -425px;\r
-                       }\r
-\r
-\r
-\r
+               \r
                                        
\ No newline at end of file
index e93dcd5..1bd6de7 100644 (file)
@@ -1,7 +1,7 @@
 @charset "UTF-8";\r
 \r
 /* pettanR system.css\r
- *   version 0.5.4\r
+ *   version 0.5.5\r
  * \r
  *   author:\r
  *     itozyun
                        -ms-border-radius:              5px;\r
                        -moz-border-radius:             5px;\r
                        -webkit-border-radius:  5px;\r
-               }
\ No newline at end of file
+               }\r
+               \r
+\r
+/*--------------------------------------------------------------------------------------\r
+ * \r
+ *  Finder\r
+ *  \r
+ -------------------------------------------------------------------------------------*/\r
+       .finder-body {\r
+               position:                               relative;\r
+               overflow:                               auto;\r
+       }\r
+               .finder-container .loading {\r
+                        background-position: 50% bottom;\r
+               }\r
+       .finder-header {\r
+               height:                                 40px;\r
+               position:                               relative;\r
+               background-color:               #333;\r
+       }\r
+               .finder-header ul {\r
+                       list-style:                             none;\r
+                       position:                               absolute;\r
+                       top:                                    0;\r
+                       left:                                   48px;\r
+                       height:                                 40px;\r
+                       line-height:                    40px;\r
+                       padding:                                0;\r
+                       margin:                                 0;\r
+               }\r
+                       .finder-header li {\r
+                               position:                               absolute;\r
+                               top:                                    0;\r
+                               left:                                   0;\r
+                               height:                                 40px;\r
+                               width:                                  90px;\r
+                               padding:                                0;\r
+                               margin:                                 0;\r
+                       }\r
+                       .finder-header li a,\r
+                       .finder-header li a:link,\r
+                       .finder-header li a:visited {\r
+                               display:                                block;\r
+                               height:                                 14px;\r
+                               font-size:                              14px;\r
+                               line-height:                    14px;\r
+                               padding:                                16px 0 10px 20px;\r
+                               margin:                                 0;\r
+                               color:                                  #eee;\r
+                               overflow:                               hidden;\r
+                       }\r
+                       .finder-header li a:hover {\r
+                               text-decoration:                none;\r
+                               background-color:               #66f;\r
+                               color:                                  #eee;\r
+                       }\r
+                       \r
+                       \r
+               .finder-header .button {\r
+                       position:                               absolute;\r
+                       top:                                    8px;\r
+                       width:                                  30px;\r
+                       height:                                 24px;\r
+                       line-height:                    24px;\r
+               }\r
+               .finder-sidebar-switch {\r
+                       left:                                   8px;\r
+               }\r
+               .finder-style-switch {\r
+                       right:                                  48px;\r
+               }\r
+               .finder-action-switch {\r
+                       right:                                  8px;\r
+               }\r
+               \r
+       /*  Finder Icon\r
+       --------------------------------------------------------------------------------------*/\r
+       .finder-icon {\r
+               position:                                       relative;\r
+               height:                                         74px;\r
+               border-bottom:                          1px solid #ccc;\r
+               clear:                                          both;\r
+               overflow:                                       hidden; /* for webkit */\r
+       }\r
+       .finder-icon:hover {\r
+               background-color:                       #eee;\r
+               cursor:                                         pointer;\r
+       }\r
+               .fnder-icon-modern .finder-icon-handle,\r
+               .fnder-icon-modern .finder-icon-thumbnail,\r
+               .fnder-icon-modern .finder-icon-filename,\r
+               .fnder-icon-modern .finder-icon-summary {\r
+                       display:                                        table-cell;\r
+               vertical-align:                         middle;\r
+               line-height:                            1.3em;\r
+           }\r
+               \r
+               .finder-icon-handle {\r
+                       width:                                          20px;\r
+                       height:                                         74px;\r
+               }\r
+               \r
+               .finder-icon-thumbnail {\r
+                       width:                                          64px;\r
+                       height:                                         74px;\r
+                       cursor:                                         pointer;\r
+                       background-repeat:                      no-repeat;\r
+                       background-position:            50% 50%;\r
+                       background-image:                       url('../images/sprite.gif');\r
+               }\r
+               \r
+               .finder-icon .file-type-folder {\r
+                       background-position:            0 -75px;\r
+               }\r
+               .finder-icon .file-type-album {\r
+               }\r
+               .finder-icon .file-type-author {\r
+                       background-position:            -70px -75px;\r
+               }               \r
+               .finder-icon .file-type-comic {\r
+                       background-position:            0 -145px;\r
+               }\r
+               .finder-icon .file-type-cabinet {\r
+                       background-position:            -70px -145px;\r
+               }\r
+               .finder-icon .file-type-panel {\r
+                       background-position:            0 -215px;\r
+               }\r
+               .finder-icon .file-type-artist {\r
+                       background-position:            -70px -215px;\r
+               }\r
+               .finder-icon .file-type-balloon {\r
+                       background-position:            0 -285px;\r
+               }\r
+               .finder-icon .file-type-charactor {\r
+                       background-position:            -70px -285px;\r
+               }               \r
+               .has-thumbnail {\r
+               }\r
+               .fnder-icon-modern .finder-icon-filename {\r
+                       width:                                          200px;\r
+                       padding:                                        5px 10px;\r
+                       height:                                         64px;\r
+                       font-weight:                            bold;\r
+                       color:                                          #333;\r
+               }\r
+               .fnder-icon-modern .finder-icon-summary {\r
+                       width:                                          300px;\r
+                       padding:                                        5px 10px;\r
+                       height:                                         64px;\r
+                       color:                                          #666;\r
+               }\r
+\r
+       /*  Finder Icon ie7-\r
+       --------------------------------------------------------------------------------------*/\r
+       .finder-icon a,\r
+       .finder-icon a:link,\r
+       .finder-icon a:visited,\r
+       .finder-icon a:active {\r
+               display:                                block;\r
+               height:                                 74px;\r
+               text-decoration:                none;\r
+               zoom:                                   1;\r
+               cursor:                                 pointer;\r
+       }\r
+       .finder-icon a:hover {\r
+               _background-color:              #eee;\r
+               color:                                  #333;\r
+       }\r
+               .fnder-icon-ie7 .finder-icon-handle,\r
+               .fnder-icon-ie7 .finder-icon-thumbnail {\r
+               zoom:                                   1;\r
+               line-height:                    1.3em;\r
+           }\r
+               .finder-icon-cell {\r
+                       display:                                inline;\r
+                       zoom:                                   1;\r
+               }\r
+                       .finder-icon-vertical-middle-outer {\r
+                               display:                                block;\r
+                               height:                                 74px;\r
+                               position:                               relative;\r
+                       }\r
+                       .finder-icon-ie-filename .finder-icon-vertical-middle-outer {\r
+                               width:                                          200px;\r
+                               font-weight:                            bold;\r
+                               color:                                          #333;\r
+                       }\r
+                       .finder-icon-ie-summary .finder-icon-vertical-middle-outer {\r
+                               width:                                          300px;\r
+                               color:                                          #666;\r
+                       }\r
+                               .finder-icon-vertical-middle-inner {\r
+                                       display:                                        block;\r
+                                       position:                                       absolute;\r
+                                       top:                                            50%;\r
+                                       margin:                                         0 5px;\r
+                               }\r
+                                       .fnder-icon-ie7 .finder-icon-filename,\r
+                                       .fnder-icon-ie7 .finder-icon-summary {\r
+                                                       position:               relative;\r
+                                                       top:                    -50%;\r
+                                       }\r
+                                       \r
+       /*  Finder Icon Console\r
+       --------------------------------------------------------------------------------------*/                \r
+               .finder-icon-console {\r
+                       position:                                       absolute;\r
+                       top:                                            0;\r
+                       right:                                          0;\r
+               }\r
+                       .finder-icon-console a {\r
+                               display:                                        block;\r
+                               width:                                          74px;\r
+                               height:                                         74px;\r
+                               border-left:                            1px solid #ccc;\r
+                               float:                                          right;\r
+                               background-image:                       url('../images/sprite.gif') !important;\r
+                               background-repeat:                      no-repeat;\r
+                       }\r
+                       .finder-icon-console a:hover {\r
+                               background-color:                       #ccc !important;\r
+                       }\r
+                       .finder-icon-console-action {\r
+                               background-position:            0px -355px;\r
+                       }\r
+                       .finder-icon-console-editor-apps {\r
+                               background-position:            -70px -355px;\r
+                       }\r
+                       .finder-icon-console-viewer-apps {\r
+                               background-position:            0px -425px;\r
+                       }
\ No newline at end of file