0.4.x/stylesheets/work.css

   1 /*\r
   2  * pettanR\r
   3  * \r
   4  *   work.css\r
   5  * \r
   6  *   version 0.4.23\r
   7  *\r
   8  */\r
   9         html, body {\r
  10                 overflow:                               hidden;\r
  11         }\r
  12         #entrance, #backyard, #debug {\r
  13                 padding:                                20px 10px;\r
  14         }\r
  15         #inner-wrapper {\r
  16                 overflow:                               auto;\r
  17         }\r
  18 \r
  19         \r
  20         /*  View Container\r
  21         --------------------------------------------------------------------------------------*/        \r
  22                 .console-page {\r
  23 \r
  24                 }\r
  25         \r
  26         \r
  27 \r
  28 /*--------------------------------------------------------------------------------------\r
  29  * \r
  30  *  overlay\r
  31  *  \r
  32  -------------------------------------------------------------------------------------*/\r
  33         #overlay-container,\r
  34         #overlay-shadow {\r
  35                 position:                       absolute;\r
  36                 left:                           0;\r
  37                 top:                            0;\r
  38                 width:                          100%;\r
  39                 height:                         100%;\r
  40                 overflow:                       hidden;\r
  41         }\r
  42                 #overlay-shadow {\r
  43                         background:                     #000;\r
  44                         opacity:                        0.5;\r
  45                         -moz-opacity:           0.5;\r
  46                         -khtml-opacity:         0.5;\r
  47                 }\r
  48                 .pettanr-ActiveX-enabled #overlay-shadow {\r
  49                         filter:                         alpha(opacity=50);\r
  50                         -ms-filter:                     alpha(opacity=50);                      \r
  51                 }\r
  52                 .pettanr-ActiveX-disabled #overlay-shadow {\r
  53                         background:                     transparent url( black_50pct.png)　repeat 0 0;\r
  54                         _background:            url( black_50pct.gif)　repeat 0 0;\r
  55                 }\r
  56                 \r
  57                 #overlay-close-button {\r
  58                         border:                                 2px solid #f00;\r
  59                         color:                                  #f00;\r
  60                         font-weight:                    bold;\r
  61                         font-size:                              16px;\r
  62                         line-height:                    16px;\r
  63                         text-align:                             center;\r
  64                         cursor:                                 pointer;\r
  65                         overflow:                               hidden;\r
  66                         width:                                  20px;\r
  67                         height:                                 20px;\r
  68                         padding:                                2px;\r
  69                         position:                               absolute;\r
  70                         top:                                    9px;\r
  71                         right:                                  9px;\r
  72                         border-radius:                  5px;\r
  73                         -o-border-radius:               5px;\r
  74                         -ms-border-radius:              5px;\r
  75                         -moz-border-radius:             5px;\r
  76                         -webkit-border-radius:  5px;\r
  77                 }\r
  78 \r
  79                 /*  Output Console\r
  80                 --------------------------------------------------------------------------------------*/\r
  81                         #output-console-wrapper {\r
  82                                 position:                               absolute;\r
  83                                 width:                                  80%;\r
  84                                 height:                                 80%;\r
  85                                 background-color:               #fff;\r
  86                         }\r
  87                                 #output-area {\r
  88                                         width:                  100%;\r
  89                                         height:                 100%;\r
  90                                         border:                 1px outset #ccc;\r
  91                                         outline:                1px;\r
  92                                 }\r
  93                 \r
  94                 /*  Console Common\r
  95                 --------------------------------------------------------------------------------------*/\r
  96                         .console-wrapper {\r
  97                                 position:                       absolute;\r
  98                                 width:                          320px;\r
  99                                 padding:                        20px 20px 0;\r
 100                                 background-color:       #fff;\r
 101                         }\r
 102                                 .console-header {\r
 103                                         border-bottom:  2px solid #666;\r
 104                                         color:                  #666;\r
 105                                         text-align:             center;\r
 106                                         font-size:              12px;\r
 107                                         line-height:    12px;\r
 108                                         padding-bottom: 8px;\r
 109                                         margin-bottom:  10px;\r
 110                                 }\r
 111                                 .console-inner {\r
 112                                         \r
 113                                 }\r
 114                                         .console-button-container {\r
 115                                                 margin-top:                     20px;\r
 116                                                 border-top:                     2px solid #666;\r
 117                                                 padding-top:            10px;\r
 118                                                 overflow:                       auto;\r
 119                                         }\r
 120                                                 .console-submit-button {\r
 121                                                         display:                        block;\r
 122                                                         width:                          100px;\r
 123                                                         float:                          left;\r
 124                                                         margin-left:            30px;\r
 125                                                 }\r
 126                                                 .console-cancel-button {\r
 127                                                         display:                        block;\r
 128                                                         width:                          100px;\r
 129                                                         float:                          right;\r
 130                                                         margin-right:           30px;\r
 131                                                 }\r
 132                                 .console-progress {\r
 133                                         clear:                  both;\r
 134                                         text-align:             center;\r
 135                                         height:                 12px;\r
 136                                         font-size:              12px;\r
 137                                         line-height:    12px;\r
 138                                         margin-top:             15px;\r
 139                                         color:                  #666;\r
 140                                 }\r
 141                                         \r
 142                 /*  Comic Console\r
 143                 --------------------------------------------------------------------------------------*/\r
 144                                 #comic-console {\r
 145                                         \r
 146                                 }\r
 147                                         .comic-console-label {\r
 148                                                 display:                        inline-block;\r
 149                                                 width:                          120px;\r
 150                                                 line-height:            22px;\r
 151                                                 color:                          #666;\r
 152                                                 cursor:                         pointer;\r
 153                                         }\r
 154                                         .comic-console-value {\r
 155                                                 width:                          40px;\r
 156                                                 text-align:                     right;\r
 157                                         }\r
 158                                         .comic-console-line {\r
 159                                                 margin:                         10px 0;\r
 160                                                 padding-bottom:         5px;\r
 161                                                 border-bottom:          1px solid #ccc;\r
 162                                         }\r
 163                                         #comic-console-title,\r
 164                                         #comic-console-height,\r
 165                                         #comic-console-width,\r
 166                                         #comic-console-editable,\r
 167                                         #comic-console-visible {}\r
 168                                                 #comic-console-title-value { width: 180px; text-align:left;}\r
 169                                                 #comic-console-height-value {}\r
 170                                                 #comic-console-width-value {}\r
 171                                                 #comic-console-editable-value,\r
 172                                                 #comic-console-visible-value {\r
 173                                                         width:                  180px;\r
 174                                                         text-align:             center;\r
 175                                                 }\r
 176                                         \r
 177                                         #comic-console-button-container {\r
 178                                                 margin-top:                     20px;\r
 179                                                 position:                       relative;\r
 180                                         }\r
 181                                         \r
 182 \r
 183                                         \r
 184                 /*  Upload Console\r
 185                 --------------------------------------------------------------------------------------*/\r
 186                                 #upload-console {\r
 187                                 }\r
 188 \r
 189 /*--------------------------------------------------------------------------------------\r
 190  * \r
 191  *  home\r
 192  *  \r
 193  -------------------------------------------------------------------------------------*/\r
 194         #home {\r
 195 \r
 196         }\r
 197 \r
 198 \r
 199 /*--------------------------------------------------------------------------------------\r
 200  * \r
 201  *  Editor\r
 202  *  \r
 203  -------------------------------------------------------------------------------------*/\r
 204                 #editor {\r
 205                         position:                       absolute;\r
 206                         left:                           0;\r
 207                         top:                            0;\r
 208                         width:                          100%;\r
 209                         height:                         100%;\r
 210                         overflow:                       hidden;\r
 211                         background-color:       #f5f5f5;\r
 212                 }\r
 213         \r
 214                 /*  Text Editor\r
 215                 --------------------------------------------------------------------------------------*/                \r
 216                         #speach-editor-wrapper {\r
 217                                 position:               absolute;\r
 218                         }\r
 219                         #speach-editor-wrapper form {\r
 220                                 width:                  100%;\r
 221                                 height:                 100%;\r
 222                         }\r
 223                         #speach-editor {\r
 224                                 width:                  100%;\r
 225                                 height:                 100%;\r
 226                                 border:                 1px outset #ccc;\r
 227                                 outline:                1px;\r
 228                         }\r
 229                                 #speach-edit-complete-button {\r
 230                                         margin:         10px auto 0;\r
 231                                 }\r
 232         \r
 233                 /*  Image Group\r
 234                 --------------------------------------------------------------------------------------*/\r
 235                         #image-group-wrapper {\r
 236                                 position:                       absolute;\r
 237                                 top:                            0;\r
 238                                 left:                           0;\r
 239                         }\r
 240                                 #image-group-icon-container {\r
 241                                         position:                       absolute;\r
 242                                         top:                            0;\r
 243                                         left:                           0;\r
 244                                         height:                         200px;\r
 245                                         width:                          100%;\r
 246                                         background-color:       #fff;\r
 247                                         border:                         #fff solid;\r
 248                                         border-width:           0;                              \r
 249                                 }\r
 250                                 #image-group-name {\r
 251                                         padding:                        20px 0 10px 20px;\r
 252                                         border-bottom:          1px solid #eee;\r
 253                                         color:                          #eee;\r
 254                                         font-size:                      20px;\r
 255                                         line-height:            20px;\r
 256                                         font-weight:            bold;\r
 257                                         text-shadow:            1px 1px 3px #ccc;\r
 258                                         -moz-text-shadow:       1px 1px 3px #ccc;\r
 259                                         -webkit-text-shadow:1px 1px 3px #ccc;\r
 260                                         box-shadow:                     0 4px 9px #333;\r
 261                                         -moz-box-shadow:        0 4px 9px #333;\r
 262                                         -webkit-box-shadow:     0 4px 9px #333;\r
 263                                 }\r
 264                                 #image-group-button {\r
 265                                         width:                          200px;\r
 266                                         position:                       absolute;\r
 267                                         left:                           0;\r
 268                                         bottom:                         -40px;\r
 269                                         _bottom:                        0;\r
 270                                 }\r
 271                                 .image-group-item {\r
 272                                         width:                          150px;\r
 273                                         height:                         200px;\r
 274                                         position:                       absolute;\r
 275                                         top:                            0;\r
 276                                         left:                           0;\r
 277                                         text-align:                     center;\r
 278                                 }\r
 279                                 .image-group-item .reversible-image-container {\r
 280                                         width:                          150px;\r
 281                                         height:                         200px;\r
 282                                 }\r
 283                                 .image-group-item .reversible-image-container img {\r
 284                                         width:                          100%;\r
 285                                         height:                         100%;\r
 286                                 }\r
 287                                 .image-group-item-title {\r
 288                                         position:                       absolute;\r
 289                                         bottom:                         0;\r
 290                                         left:                           0;\r
 291                                         text-align:                     center;\r
 292                                         width:                          100%;\r
 293                                         height:                         30px;\r
 294                                 }\r
 295         \r
 296 \r
 297         /*  MenuBar\r
 298         --------------------------------------------------------------------------------------*/\r
 299                 #menu-bar {\r
 300                         position:                       absolute;\r
 301                         top:                            0;\r
 302                         left:                           0;\r
 303                         width:                          100%;\r
 304                         height:                         30px;\r
 305                         background-color:       #fff;\r
 306                         border-bottom:          1px solid #666;\r
 307                         box-shadow:                     0 4px 9px #333;\r
 308                         -moz-box-shadow:        0 4px 9px #333;\r
 309                         -webkit-box-shadow:     0 4px 9px #333;\r
 310                         filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);\r
 311                 }\r
 312                         .menu-bar-item,\r
 313                         .menu-bar-item-focus {\r
 314                                 position:               absolute;\r
 315                                 top:                    0;\r
 316                                 width:                  80px;\r
 317                                 color:                  #666;\r
 318                         }\r
 319                                 .menu-bar-item div,\r
 320                                 .menu-bar-item-focus div {\r
 321                                         cursor:                 pointer;\r
 322                                         overflow:               hidden;\r
 323                                         height:                 30px;\r
 324                                         line-height:    30px;                           \r
 325                                         padding-left:   0.6em;\r
 326                                         font-size:              14px;\r
 327                                 }\r
 328                                 .menu-bar-item-focus div {\r
 329                                         background-color:       #66f;\r
 330                                         color:                          #eee;\r
 331                                 }\r
 332                                 .menu-bar-item ul {\r
 333                                         display:                        none;\r
 334                                 }\r
 335                                 .menu-bar-item-focus ul {\r
 336                                         position:                       absolute;\r
 337                                         list-style:                     none;\r
 338                                         top:                            30px;\r
 339                                         width:                          200px;\r
 340                                         margin:                         0;\r
 341                                         padding:                        0;\r
 342                                         background-color:       #fff;\r
 343                                         color:                          #666;\r
 344                                         border:                         1px solid #ccc;\r
 345                                         box-shadow:                     1px 4px 9px #333;\r
 346                                         -moz-box-shadow:        1px 4px 9px #333;\r
 347                                         -webkit-box-shadow:     1px 4px 9px #333;\r
 348                                         filter:                         progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 349                                 }\r
 350                                         .menu-bar-item-focus li {\r
 351                                                 display:                block;\r
 352                                                 cursor:                 pointer;\r
 353                                                 width:                  200px;\r
 354                                                 height:                 30px;\r
 355                                                 line-height:    30px;\r
 356                                         }\r
 357                                         .menu-bar-item-focus li.disabled {\r
 358                                                 cursor:                 default;\r
 359                                         }\r
 360                                                 .menu-bar-item-focus a,\r
 361                                                 .menu-bar-item-focus a:link,\r
 362                                                 .menu-bar-item-focus a:visited {\r
 363                                                         color:                  #666;\r
 364                                                         position:               relative;\r
 365                                                         display:                block;\r
 366                                                         width:                  200px;\r
 367                                                         height:                 30px;\r
 368                                                         line-height:    30px;\r
 369                                                         *cursor:                pointer;\r
 370                                                 }\r
 371                                                 .menu-bar-item-focus a:hover {\r
 372                                                         color:                          #333;\r
 373                                                         background-color:       #ccf;\r
 374                                                         text-decoration:        none;\r
 375                                                         *cursor:                        pointer;\r
 376                                                 }                               \r
 377                                                 .menu-bar-item-focus li.disabled a,\r
 378                                                 .menu-bar-item-focus li.disabled a:link,\r
 379                                                 .menu-bar-item-focus li.disabled a:visited,\r
 380                                                 .menu-bar-item-focus li.disabled a:active,\r
 381                                                 .menu-bar-item-focus li.disabled a:hover {\r
 382                                                         color:                          #999;\r
 383                                                         background-color:       #fff;\r
 384                                                         *cursor:                        default;\r
 385                                                 }\r
 386                                                         .menu-bar-item-focus span {\r
 387                                                                 position:               absolute;\r
 388                                                                 top:                    0;\r
 389                                                                 left:                   10px;\r
 390                                                                 display:                block;\r
 391                                                                 font-size:              14px;\r
 392                                                                 font-weight:    bold;\r
 393                                                                 width:                  120px;\r
 394                                                                 overflow:               hidden;\r
 395                                                         }\r
 396                                                         .menu-bar-item-focus kbd {\r
 397                                                                 position:               absolute;\r
 398                                                                 top:                    0;\r
 399                                                                 left:                   140px;\r
 400                                                                 display:                block;\r
 401                                                                 font-size:              10px;\r
 402                                                                 color:                  #999;\r
 403                                                                 width:                  60px;\r
 404                                                                 overflow:               hidden;\r
 405                                                         }\r
 406                                         .menu-bar-item-focus li.separator {\r
 407                                                 width:                  200px;\r
 408                                                 height:                 0;\r
 409                                                 line-height:    0;\r
 410                                                 border-top:             1px solid #ccc;\r
 411                                                 margin:                 0;\r
 412                                                 padding:                0;\r
 413                                         }\r
 414         \r
 415         /*  whiteGlass\r
 416         --------------------------------------------------------------------------------------*/        \r
 417                 #whiteGlass-container {\r
 418                         position:       absolute;\r
 419                         top:            0;\r
 420                         left:           0;\r
 421                         width:          100%;\r
 422                         height:         100%;\r
 423                 }\r
 424                         #whiteGlass-container div {\r
 425                                 position:                       absolute;\r
 426                                 background-color:       #fff;\r
 427                                 opacity:                        0.7;\r
 428                                 -moz-opacity:           0.7;\r
 429                                 -khtml-opacity:         0.7;\r
 430                         }\r
 431                         .pettanr-ActiveX-enabled #whiteGlass-container div {\r
 432                                 filter:                         alpha(opacity=70);\r
 433                                 -ms-filter:                     alpha(opacity=70);                              \r
 434                         }\r
 435                         .pettanr-ActiveX-disabled #whiteGlass-container div {\r
 436                                 background:                     transparent url( white_70pct.png) repeat 0 0;\r
 437                                 _background:            #fff;\r
 438                         }\r
 439                         \r
 440                         #whiteGlass-top {\r
 441                                 top:            0;\r
 442                                 left:           0;\r
 443                                 width:          100%;\r
 444                                 height:         20%;\r
 445                         }\r
 446                         #whiteGlass-left {\r
 447                                 top:            20%;\r
 448                                 left:           0;\r
 449                                 width:          20%;\r
 450                                 height:         60%;\r
 451                         }\r
 452                         #whiteGlass-right {\r
 453                                 top:            20%;\r
 454                                 left:           80%;\r
 455                                 width:          20%;\r
 456                                 height:         60%;\r
 457                         }\r
 458                         #whiteGlass-bottom {\r
 459                                 top:            80%;\r
 460                                 left:           0;\r
 461                                 width:          100%;\r
 462                                 height:         20%;\r
 463                         }\r
 464         \r
 465         /*  panel\r
 466         --------------------------------------------------------------------------------------*/\r
 467                 #panel-tools-container {\r
 468                         position:       absolute;\r
 469                         border:         2px solid #333;\r
 470                 }\r
 471         \r
 472         /*  mouse-operation-catcher\r
 473         --------------------------------------------------------------------------------------*/        \r
 474                 #mouse-operation-catcher {\r
 475                         position:                       absolute;\r
 476                         top:                            0;\r
 477                         left:                           0;\r
 478                         width:                          100%;\r
 479                         height:                         100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */\r
 480                 }\r
 481                 .pettanr-ActiveX-enabled #mouse-operation-catcher {\r
 482                         background-color:       #fff;\r
 483                         filter:                         alpha( opacity=0);\r
 484                         -ms-filter:                     alpha( opacity=0);\r
 485                 }\r
 486                 /*\r
 487                  * ie では、背景を設定しないと、 mousemove が働かない。\r
 488                  * activeX 有効の場合は背景を着色して filter で透明に。\r
 489                  * activeX 無効の場合は透明 gif を使用\r
 490                  * background:                  url(4x4.gif) fixed repeat;\r
 491                  */\r
 492                 .pettanr-ActiveX-disabled #mouse-operation-catcher {\r
 493                         background:                     url( opacity0.gif) fixed repeat;\r
 494                 }\r
 495         \r
 496         \r
 497         /*  comic-element\r
 498         --------------------------------------------------------------------------------------*/\r
 499                 #comic-element-container {\r
 500                         position:                       absolute;\r
 501                         \r
 502                 }\r
 503                         .comic-element-wrapper {\r
 504                                 position:                       absolute;\r
 505                         }\r
 506                                 #comic-element-container img {\r
 507                                         width:                          100%;\r
 508                                         height:                         100%;\r
 509                                         position:                       absolute;\r
 510                                         top:                            0;\r
 511                                         left:                           0;\r
 512                                 }\r
 513         \r
 514         /*  comic-element-resizer\r
 515         --------------------------------------------------------------------------------------*/                \r
 516                 #comic-element-resizer-container {\r
 517                         position:                       absolute;\r
 518                         border:                         1px solid #999;\r
 519                 }\r
 520                         .comic-element-resizer {\r
 521                                 position:                       absolute;\r
 522                                 width:                          8px;\r
 523                                 height:                         8px;\r
 524                                 font-size:                      8px; /* ie */\r
 525                                 line-height:            8px; /* ie */\r
 526                                 border:                         1px solid #333;\r
 527                                 background-color:       #fff;\r
 528                         }\r
 529                 /*\r
 530                  * marker\r
 531                  */\r
 532                         #comic-element-resizer-top {\r
 533                                 top:                            -5px;\r
 534                                 left:                           50%;\r
 535                         }\r
 536                         .current-resizer-is-0 #comic-element-resizer-top {\r
 537                                 background-color:       #f66;\r
 538                         }\r
 539                         #comic-element-resizer-left {\r
 540                                 top:                            50%;\r
 541                                 left:                           -5px;\r
 542                         }\r
 543                         .current-resizer-is-1 #comic-element-resizer-left {\r
 544                                 background-color:       #f66;\r
 545                         }\r
 546                         #comic-element-resizer-right {\r
 547                                 top:                            50%;\r
 548                                 right:                          -5px;\r
 549                         }\r
 550                         .current-resizer-is-2 #comic-element-resizer-right {\r
 551                                 background-color:       #f66;\r
 552                         }\r
 553                         #comic-element-resizer-bottom {\r
 554                                 bottom:                         -5px;\r
 555                                 left:                           50%;\r
 556                         }\r
 557                         .current-resizer-is-3 #comic-element-resizer-bottom {\r
 558                                 background-color:       #f66;\r
 559                         }\r
 560                         #comic-element-resizer-top-left {\r
 561                                 top:                            -5px;\r
 562                                 left:                           -5px;\r
 563                         }\r
 564                         .current-resizer-is-4 #comic-element-resizer-top-left {\r
 565                                 background-color:       #f66;\r
 566                         }\r
 567                         #comic-element-resizer-top-right {\r
 568                                 top:                            -5px;\r
 569                                 right:                          -5px;\r
 570                         }\r
 571                         .current-resizer-is-5 #comic-element-resizer-top-right {\r
 572                                 background-color:       #f66;\r
 573                         }\r
 574                         #comic-element-resizer-bottom-left {\r
 575                                 bottom:                         -5px;\r
 576                                 left:                           -5px;\r
 577                         }\r
 578                         .current-resizer-is-6 #comic-element-resizer-bottom-left {\r
 579                                 background-color:       #f66;\r
 580                         }\r
 581                         #comic-element-resizer-bottom-right {\r
 582                                 bottom:                         -5px;\r
 583                                 right:                          -5px;\r
 584                         }\r
 585                         .current-resizer-is-7 #comic-element-resizer-bottom-right {\r
 586                                 background-color:       #f66;\r
 587                         }\r
 588         /*  panel-resizer\r
 589         --------------------------------------------------------------------------------------*/        \r
 590                 #panel-resizer-top,\r
 591                 #panel-resizer-bottom {\r
 592                         position:                       absolute;\r
 593                         border:                         1px outset #999;\r
 594                         background-color:       #eee;\r
 595                         text-align:                     center;\r
 596                         font-size:                      12px;\r
 597                         line-height:            12px;\r
 598                         padding:                        9px 0;\r
 599                         left:                           -2px;\r
 600                 }\r
 601                 \r
 602                 #panel-resizer-top {\r
 603                         top:                                    -37px;\r
 604                         border-radius:                  8px 8px 0 0;\r
 605                         -o-border-radius:               8px 8px 0 0;\r
 606                         -ms-border-radius:              8px 8px 0 0;\r
 607                         -moz-border-radius:             8px 8px 0 0;\r
 608                         -webkit-border-radius:  8px 8px 0 0;\r
 609                 }\r
 610                 #panel-resizer-bottom {\r
 611                         bottom:                                 -37px;\r
 612                         border-radius:                  0 0 8px 8px;\r
 613                         -o-border-radius:               0 0 8px 8px;\r
 614                         -ms-border-radius:              0 0 8px 8px;\r
 615                         -moz-border-radius:             0 0 8px 8px;\r
 616                         -webkit-border-radius:  0 0 8px 8px;\r
 617                 }\r
 618         \r
 619         /*  balloon-tail-mover\r
 620         --------------------------------------------------------------------------------------*/                \r
 621                 #balloon-tail-mover {\r
 622                         position:                       absolute;\r
 623                         width:                          8px;\r
 624                         height:                         8px;\r
 625                         font-size:                      8px; /* ie */\r
 626                         line-height:            8px; /* ie */\r
 627                         border:                         1px solid #333;\r
 628                         background-color:       #66f;\r
 629                         margin:                         -5px 0 0 -5px;\r
 630                 }\r
 631         \r
 632         /*  comic element console\r
 633         --------------------------------------------------------------------------------------*/\r
 634                 #comic-element-consol-wrapper {\r
 635                         position:                       absolute;\r
 636                 }\r
 637                         #image-element-consol {\r
 638                                 width:                          50px;\r
 639                                 overflow:                       auto;\r
 640                         }\r
 641                         #text-element-consol {\r
 642                                 width:                          75px;\r
 643                                 overflow:                       auto;\r
 644                         }\r
 645         \r
 646                                 #change-image-button,\r
 647                                 #layer-back-button,\r
 648                                 #layer-forward-button,\r
 649                                 #delete-image-button,\r
 650                                 #edit-text-button,\r
 651                                 #change-text-style-button,\r
 652                                 #hide-text-tail-button,\r
 653                                 #back-text-button,\r
 654                                 #forward-text-button,\r
 655                                 #delete-text-button {\r
 656                                         text-indent:                    -9999px;\r
 657                                         width:                                  25px;\r
 658                                         height:                                 25px;\r
 659                                         line-height:                    25px;\r
 660                                         float:                                  left;\r
 661                                         background-image:               url('../images/sprite.gif');\r
 662                                         background-repeat:              no-repeat;\r
 663                                         background-position:    0 0;\r
 664                                         cursor:                                 pointer;\r
 665                                 }\r
 666                                 #hide-text-tail-button {\r
 667                                         background-position:    -30px -30px;\r
 668                                 }\r
 669                                 #change-image-button,\r
 670                                 #change-text-style-button {\r
 671                                         background-position:    -30px 0;\r
 672                                 }                       \r
 673                                 #layer-back-button,\r
 674                                 #back-text-button {\r
 675                                         background-position:    -60px 0;\r
 676                                 }\r
 677                                 #layer-forward-button,\r
 678                                 #forward-text-button {\r
 679                                         background-position:    -60px -30px;\r
 680                                 }\r
 681                                 #delete-image-button,\r
 682                                 #delete-text-button {\r
 683                                         background-position:    0 -30px;\r
 684                                 }\r
 685                         \r
 686                 .console-out #comic-element-consol-wrapper-when-out {\r
 687                         padding:                        5px;\r
 688                         background-color:       #333;\r
 689                 }\r
 690                 .console-out #comic-element-consol-tail {\r
 691                         border-width:           0 5px 10px 5px;\r
 692                         border-color:           transparent transparent #333 transparent;\r
 693                         _border-color:          #fff #fff #333 #fff;\r
 694                         border-style:           solid;\r
 695                         width:                          0;\r
 696                         height:                         0;\r
 697                         font-size:                      0;\r
 698                         line-height:            0;\r
 699                         position:                       absolute;\r
 700                         top:                            -10px;\r
 701                         left:                           50%;\r
 702                 }\r
 703                         \r
 704         \r
 705                         \r
 706         /*  Panel > speach\r
 707         --------------------------------------------------------------------------------------*/\r
 708                         .speach {\r
 709                                 text-align:                     center;\r
 710                                 display:                        table;\r
 711                                 position:                       absolute;\r
 712                                 top:                            16.6%;\r
 713                                 left:                           16.6%;\r
 714                                 width:                          66.6%;\r
 715                                 height:                         66.6%;\r
 716                                 padding:                        0;\r
 717                                 margin:                         0;\r
 718                         }\r
 719                                 .speach-inner {\r
 720                                         display:                table-cell;\r
 721                                         vertical-align: middle;\r
 722                                 }\r
 723                         \r
 724                 /* fix for ie */        \r
 725                         .text-element table,\r
 726                         .text-element tbody,\r
 727                         .text-element tr,\r
 728                         .text-element td {\r
 729                                 width:                          100%;\r
 730                                 height:                         100%;\r
 731                                 border:                         0;\r
 732                                 padding:                        0;\r
 733                                 margin:                         0;\r
 734                                 text-align:                     center;\r
 735                                 vertical-align:         middle;\r
 736                         }\r
 737                         .text-element table {\r
 738                                 table-layout:           fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */\r
 739                         }\r
 740                         \r
 741         /*  Window\r
 742         --------------------------------------------------------------------------------------*/\r
 743                 .window-wrapper {\r
 744                         position:                       absolute;\r
 745                         top:                            10px;\r
 746                         left:                           10px;\r
 747                         width:                          200px;\r
 748                         height:                         200px;\r
 749                         border-bottom:          1px solid #999;\r
 750                         background-color:       #fff;\r
 751                         box-shadow:                     1px 4px 9px #333;\r
 752                         -moz-box-shadow:        1px 4px 9px #333;\r
 753                         -webkit-box-shadow:     1px 4px 9px #333;\r
 754                         filter:                         progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 755                 }\r
 756 \r
 757                         .window-header,\r
 758                         .window-close-button {\r
 759                                 font-size:                              12px;\r
 760                                 color:                                  #eee;\r
 761                                 line-height:                    12px;\r
 762                                 overflow:                               hidden;\r
 763                                 text-align:                             center;\r
 764                                 padding-top:                    8px;\r
 765                                 padding-bottom:                 6px;\r
 766                                 background-color:               #333;\r
 767                         }\r
 768                                 .window-close-button {\r
 769                                         position:                               absolute;\r
 770                                         top:                                    0;\r
 771                                         right:                                  0;\r
 772                                         border-left:                    1px solid #666;\r
 773                                         padding-left:                   9px;\r
 774                                         padding-right:                  9px;\r
 775                                         border-radius:                  0 8px 0 0;\r
 776                                         -o-border-radius:               0 8px 0 0;\r
 777                                         -ms-border-radius:              0 8px 0 0;\r
 778                                         -moz-border-radius:             0 8px 0 0;\r
 779                                         -webkit-border-radius:  0 8px 0 0;\r
 780                                 }\r
 781                         \r
 782                         .window-wrapper,\r
 783                         .window-header {\r
 784                                 border-radius:                  8px 8px 0 0;\r
 785                                 -o-border-radius:               8px 8px 0 0;\r
 786                                 -ms-border-radius:              8px 8px 0 0;\r
 787                                 -moz-border-radius:             8px 8px 0 0;\r
 788                                 -webkit-border-radius:  8px 8px 0 0;\r
 789                         }\r
 790                         .window-body {\r
 791                                 position:                               relative;\r
 792                                 border-left:                    1px solid #aaa;\r
 793                                 *border-left:                   1px solid #ccc;\r
 794                                 border-right:                   1px solid #999;\r
 795                         }\r
 796 \r
 797                         html>/**/body .window-body {  \r
 798                                 border-left /***/:              1px solid #ccc\9;\r
 799                         }\r
 800 \r
 801                         .window-footer {\r
 802                                 width:                                  100%;\r
 803                                 height:                                 20px;\r
 804                                 background-color:               #333;\r
 805                                 position:                               absolute;\r
 806                                 left:                                   0;\r
 807                                 bottom:                                 0;\r
 808                         }\r
 809                                 .window-resize-button {\r
 810                                         position:                               absolute;\r
 811                                         top:                                    0;\r
 812                                         right:                                  0;\r
 813                                         background-image:               url('../images/sprite.gif');\r
 814                                         background-repeat:              no-repeat;\r
 815                                         background-position:    -70px -60px;\r
 816                                         width:                                  20px;\r
 817                                         height:                                 20px;\r
 818                                         line-height:                    20px;\r
 819                                         text-indent:                    -9999px;\r
 820                                         text-align:                             center;\r
 821                                         cursor:                                 pointer;\r
 822                                 }\r
 823 \r
 824         /*  page contents\r
 825         --------------------------------------------------------------------------------------*/\r
 826                 .sidenavi {\r
 827                         width:                          100px;\r
 828                         float:                          left;\r
 829                 }\r
 830                         .sidenavi-item,\r
 831                         .sidenavi-item:link {\r
 832                                 display:                        block;\r
 833                                 border-bottom:          1px solid #666;\r
 834                                 padding:                        1em;\r
 835                                 text-decoration:        none;\r
 836                                 zoom:                           1;\r
 837                         }\r
 838                         .sidenavi-item:hover {\r
 839                                 background-color:       #ccc;\r
 840                                 text-decoration:        none;\r
 841                         }\r
 842                         .sidenavi .current {\r
 843                                 background-color:       #666;\r
 844                                 color:                          #eee;\r
 845                         }\r
 846                 .page-contents {\r
 847                         _position:                              relative; /* for ie6 */\r
 848                         margin-left:                    100px;\r
 849                         padding:                                1em 1em 2em 1em;\r
 850                 }\r
 851                         .page-content {\r
 852                                 display:                                none;\r
 853                         }\r
 854         \r
 855         /*  editable-text\r
 856         --------------------------------------------------------------------------------------*/\r
 857         \r
 858                 .editable-text {\r
 859                         display:                        inline-block;\r
 860                         color:                          #333;\r
 861                         border:                         1px solid #ccc;\r
 862                         font-size:                      14px;\r
 863                         line-height:            16px;\r
 864                 }\r
 865                         .editable-text a,\r
 866                         .editable-text a:link,\r
 867                 .editable-text a:visited,\r
 868                 .editable-text a:hover,\r
 869                 .editable-text a:active {\r
 870                                 padding:                        3px;\r
 871                                 color:                          #333;\r
 872                                 text-decoration:        none;\r
 873                                 display:                        block;\r
 874                                 zoom:                           1;\r
 875                                 outline:                        0;\r
 876                                 background-color:       #fff;\r
 877                         }\r
 878                         .editable-text a:hover {\r
 879                                 background-color:       #ccf;\r
 880                         }\r
 881                         .editable-text input {\r
 882                                 padding:                        3px 0;\r
 883                                 width:                          100%;\r
 884                                 font-family:            Arial,Helvetica,sans-serif;\r
 885                                 background-color:       #ccf;\r
 886                                 border:                         0;\r
 887                                 margin:                         0;\r
 888                                 outline:                        0;\r
 889                         }\r
 890                         \r
 891         /*  combobox\r
 892         --------------------------------------------------------------------------------------*/        \r
 893                 .combobox {\r
 894                         display:                        inline-block;\r
 895                         color:                          #333;\r
 896                 }\r
 897                         .combobox a,\r
 898                         .combobox a:link,\r
 899                 .combobox a:visited,\r
 900                 .combobox a:hover,\r
 901                 .combobox a:active {\r
 902                         border:                         1px solid #ccc;\r
 903                                 font-size:                      14px;\r
 904                                 line-height:            16px;                   \r
 905                                 padding:                        3px;\r
 906                                 color:                          #333;\r
 907                                 text-decoration:        none;\r
 908                                 display:                        block;\r
 909                                 zoom:                           1;\r
 910                                 outline:                        0;\r
 911                                 background-color:       #fff;\r
 912                                 position:                       relative;\r
 913                         }\r
 914                         .combobox a:hover {\r
 915                                 background-color:       #ccf;\r
 916                         }\r
 917                         .combobox a:active {\r
 918                                 outline:                        0;\r
 919                         }\r
 920                                 .combobox-toggle {\r
 921                                         position:                       absolute;\r
 922                                         right:                          5px;\r
 923                                         top:                            0;\r
 924                                         display:                        block;\r
 925                                         font-family:            Arial,Helvetica,sans-serif;\r
 926                                         font-size:                      12px;\r
 927                                         line-height:            20px;\r
 928                                         color:                          #999;\r
 929                                 }\r
 930                                 .combobox  a.combobox-has-focus .combobox-toggle {\r
 931                                         color:                          #4D90FE;\r
 932                                 }                               \r
 933                                 \r
 934                                 \r
 935         .option-container {\r
 936                 position:                       absolute;\r
 937                 list-style:                     none;\r
 938                 top:                            30px;\r
 939                 width:                          200px;\r
 940                 margin:                         0;\r
 941                 padding:                        0;\r
 942                 background-color:       #fff;\r
 943                 opacity:                        0.9;\r
 944                 -moz-opacity:           0.9;\r
 945                 -khtml-opacity:         0.9;\r
 946                 color:                          #666;\r
 947                 border:                         1px solid #ccc;\r
 948                 box-shadow:                     1px 4px 9px #333;\r
 949                 -moz-box-shadow:        1px 4px 9px #333;\r
 950                 -webkit-box-shadow:     1px 4px 9px #333;\r
 951                 filter:                         alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 952                 -ms-filter:                     alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 953         }\r
 954                 .option-container li {\r
 955                         display:                block;\r
 956                         cursor:                 pointer;\r
 957                         height:                 30px;\r
 958                         line-height:    30px;\r
 959                 }\r
 960                         .option-container a,\r
 961                         .option-container a:link,\r
 962                         .option-container a:visited {\r
 963                                 color:                  #666;\r
 964                                 position:               relative;\r
 965                                 display:                block;\r
 966                                 padding:                0 10px;\r
 967                                 height:                 30px;\r
 968                                 line-height:    30px;\r
 969                                 *cursor:                pointer;\r
 970                         }\r
 971                         .current-option a,\r
 972                         .current-option a:link,\r
 973                         .current-option a:visited {\r
 974                                 color:                          #e6e6ef;\r
 975                                 background-color:       #66f;\r
 976                                 text-decoration:        none;\r
 977                         }\r
 978                         .option-container a:hover {\r
 979                                 color:                          #333;\r
 980                                 background-color:       #ccf;\r
 981                                 text-decoration:        none;\r
 982                                 *cursor:                        pointer;\r
 983                         }\r
 984         \r
 985         /*  Information Window\r
 986         --------------------------------------------------------------------------------------*/\r
 987                 #comic-element-infomation {\r
 988                         background-color:                       #fff;\r
 989                         position:                                       absolute;\r
 990                         width:                                          100%;\r
 991                 }\r
 992                                 #comic-element-x, #comic-element-z,\r
 993                                 #comic-element-y, #comic-element-a,\r
 994                                 #comic-element-w, #comic-element-w-percent,\r
 995                                 #comic-element-h, #comic-element-h-percent {\r
 996                                         position:                       absolute;\r
 997                                 }\r
 998                                 \r
 999                                 #comic-element-x,\r
1000                                 #comic-element-y,\r
1001                                 #comic-element-w,\r
1002                                 #comic-element-h {\r
1003                                         left:                           30px;\r
1004                                 }\r
1005                                 #comic-element-z,\r
1006                                 #comic-element-a {\r
1007                                         left:                           115px;\r
1008                                 }\r
1009                     #comic-element-w-percent,\r
1010                     #comic-element-h-percent    {\r
1011                         left:               124px;\r
1012                     }\r
1013                                 #comic-element-x, #comic-element-z {\r
1014                                         top:                            10px;\r
1015                                 }\r
1016                                 #comic-element-y, #comic-element-a {\r
1017                                         top:                            40px;\r
1018                                 }\r
1019                                 #comic-element-w, #comic-element-w-percent {\r
1020                                         top:                            80px;\r
1021                                 }\r
1022                                 #comic-element-h, #comic-element-h-percent {\r
1023                                         top:                            110px;\r
1024                                 }\r
1025                                 .comic-element-attribute-label {\r
1026                                         display:                        inline-block;\r
1027                                         width:                          14px;\r
1028                                         line-height:            22px;\r
1029                                         color:                          #666;\r
1030                                         text-align:                     center;\r
1031                                         cursor:                         pointer;\r
1032                                 }\r
1033                                 .comic-element-attribute-value {\r
1034                                         width:                          40px;\r
1035                                         text-align:                     right;\r
1036                                 }\r
1037                 \r
1038                                 #comic-element-z-value,\r
1039                                 #comic-element-a-value {\r
1040                                         width:                          35px;\r
1041                                 }\r
1042                                 #comic-element-w-percent-value,\r
1043                                 #comic-element-h-percent-value {\r
1044                                         width:                          30px;\r
1045                                 }\r
1046                                 \r
1047                                 #comic-element-keep-aspect {\r
1048                                     position:            absolute;\r
1049                                     top:                 96px;\r
1050                                     left:                100px;\r
1051                                     width:               12px;\r
1052                                     height:              22px;\r
1053                                     font-size:           22px;\r
1054                                     line-height:         22px;\r
1055                                     border:              1px solid #ccc;\r
1056                                 }\r
1057         \r
1058         /*  Background Window\r
1059         --------------------------------------------------------------------------------------*/\r
1060                         #bg-pattern,\r
1061                         #select-bg-pattern-button,\r
1062                         #reset-bg-pattern-button,\r
1063                         #bg-color,\r
1064                         #select-bg-color-button,\r
1065                         #reset-bg-color-button {\r
1066                                 position:                       absolute;\r
1067                                 text-align:                     center;\r
1068                                 cursor:                         pointer;\r
1069                         }\r
1070                         \r
1071                         #bg-pattern,\r
1072                         #bg-color {\r
1073                                 box-shadow:                     1px 2px 3px #000;\r
1074                                 -moz-box-shadow:        1px 2px 3px #000;\r
1075                                 -webkit-box-shadow:     1px 2px 3px #000;\r
1076                                 height:                         80px;\r
1077                                 top:                            15px;\r
1078                         }\r
1079                         #bg-pattern {\r
1080                                 left:                           15px;\r
1081                                 width:                          100px;\r
1082                         }\r
1083                         #select-bg-pattern-button,\r
1084                         #reset-bg-pattern-button,\r
1085                         #select-bg-color-button,\r
1086                         #reset-bg-color-button {\r
1087                                 border:                         1px outset #666;\r
1088                                 height:                         20px;\r
1089                                 top:                            115px;\r
1090                                 line-height:            20px;\r
1091                         }\r
1092                         #select-bg-pattern-button {\r
1093                                 left:                           15px;\r
1094                                 width:                          80px;\r
1095                         }\r
1096                         #reset-bg-pattern-button {\r
1097                                 left:                           95px;\r
1098                                 width:                          20px;\r
1099                         }\r
1100                         \r
1101                         #bg-color {\r
1102                                 left:                           125px;\r
1103                                 width:                          60px;\r
1104                                 background-color:       #66f;\r
1105                         }\r
1106                         #select-bg-color-button {\r
1107                                 left:                           125px;\r
1108                                 width:                          40px;\r
1109                         }\r
1110                         #reset-bg-color-button {\r
1111                                 left:                           165px;\r
1112                                 width:                          20px;\r
1113                         }\r
1114         \r
1115         \r
1116         \r
1117         /*  Tool-box Window\r
1118         --------------------------------------------------------------------------------------*/                \r
1119                         #toolbox-add-image-button,\r
1120                         #toolbox-add-text-button,\r
1121                         #toolbox-edit-bg-button,\r
1122                         #toolbox-switch-grid,\r
1123                         #toolbox-popup-help-button,\r
1124                         #toolbox-post-button {\r
1125                                 position:                               absolute;\r
1126                                 left:                                   10px;\r
1127                                 width:                                  90px;\r
1128                                 border:                                 1px outset #999;\r
1129                                 height:                                 40px;\r
1130                                 line-height:                    40px;\r
1131                                 text-align:                             center;\r
1132                                 cursor:                                 pointer;\r
1133                                 background-color:               #ccc;\r
1134                                 border-radius:                  8px;\r
1135                                 -o-border-radius:               8px;\r
1136                                 -ms-border-radius:              8px;\r
1137                                 -moz-border-radius:             8px;\r
1138                                 -webkit-border-radius:  8px;\r
1139                         }\r
1140                         #toolbox-add-image-button {\r
1141                                 top:                                    10px;                                                           \r
1142                         }\r
1143                         #toolbox-add-text-button {\r
1144                                 top:                                    60px;\r
1145                         }\r
1146                         #toolbox-edit-bg-button {\r
1147                                 top:                                    110px;\r
1148                                 height:                                 30px;\r
1149                                 line-height:                    30px;\r
1150                         }\r
1151                         #toolbox-switch-grid,\r
1152                         #toolbox-popup-help-button {\r
1153                                 top:                                    150px;\r
1154                                 height:                                 30px;\r
1155                                 line-height:                    30px;\r
1156                         }\r
1157                         #toolbox-switch-grid {\r
1158                                 width:                                  45px !important;\r
1159                         }\r
1160                         #toolbox-popup-help-button {\r
1161                                 width:                                  35px !important;\r
1162                                 left:                                   65px !important;\r
1163                         }\r
1164                         \r
1165                         #toolbox-post-button {\r
1166                                 top:                                    190px;\r
1167                                 height:                                 50px;\r
1168                                 line-height:                    50px;\r
1169                         }\r
1170         \r
1171         /*  Grid\r
1172         --------------------------------------------------------------------------------------*/\r
1173                 #grid {\r
1174                         width:                                  100%;\r
1175                         height:                                 100%;\r
1176                         position:                               absolute;\r
1177                         left:                                   0;\r
1178                         top:                                    0;\r
1179                         background-attachment:  fixed;\r
1180                         background-repeat:              repeat;\r
1181                         /* background-image:            url('grid.gif');　grid用イメージはgrid使用時にjsで埋め込み */\r
1182                 }\r
1183 \r
1184 /*--------------------------------------------------------------------------------------\r
1185  * \r
1186  *  Finder\r
1187  *  \r
1188  -------------------------------------------------------------------------------------*/\r
1189         .finder-body {\r
1190                 position:                               relative;\r
1191                 overflow:                               auto;\r
1192         }\r
1193                 .finder-container .loading {\r
1194                          background-position: 50% bottom;\r
1195                 }\r
1196         .finder-header {\r
1197                 height:                                 40px;\r
1198                 position:                               relative;\r
1199                 background-color:               #333;\r
1200         }\r
1201                 .finder-header ul {\r
1202                         list-style:                             none;\r
1203                         position:                               absolute;\r
1204                         top:                                    0;\r
1205                         left:                                   48px;\r
1206                         height:                                 40px;\r
1207                         line-height:                    40px;\r
1208                         padding:                                0;\r
1209                         margin:                                 0;\r
1210                 }\r
1211                         .finder-header li {\r
1212                                 position:                               absolute;\r
1213                                 top:                                    0;\r
1214                                 left:                                   0;\r
1215                                 height:                                 40px;\r
1216                                 width:                                  90px;\r
1217                                 padding:                                0;\r
1218                                 margin:                                 0;\r
1219                         }\r
1220                         .finder-header li a,\r
1221                         .finder-header li a:link,\r
1222                         .finder-header li a:visited {\r
1223                                 display:                                block;\r
1224                                 height:                                 14px;\r
1225                                 font-size:                              14px;\r
1226                                 line-height:                    14px;\r
1227                                 padding:                                16px 0 10px 20px;\r
1228                                 margin:                                 0;\r
1229                                 color:                                  #eee;\r
1230                                 overflow:                               hidden;\r
1231                         }\r
1232                         .finder-header li a:hover {\r
1233                                 text-decoration:                none;\r
1234                                 background-color:               #66f;\r
1235                                 color:                                  #eee;\r
1236                         }\r
1237                         \r
1238                         \r
1239                 .finder-header .button {\r
1240                         position:                               absolute;\r
1241                         top:                                    8px;\r
1242                         width:                                  30px;\r
1243                         height:                                 24px;\r
1244                         line-height:                    24px;\r
1245                 }\r
1246                 .finder-sidebar-switch {\r
1247                         left:                                   8px;\r
1248                 }\r
1249                 .finder-style-switch {\r
1250                         right:                                  48px;\r
1251                 }\r
1252                 .finder-action-switch {\r
1253                         right:                                  8px;\r
1254                 }\r
1255                 \r
1256         /*  Finder Icon\r
1257         --------------------------------------------------------------------------------------*/\r
1258         .finder-icon {\r
1259                 position:                                       relative;\r
1260                 height:                                         74px;\r
1261                 border-bottom:                          1px solid #ccc;\r
1262                 clear:                                          both;\r
1263                 overflow:                                       hidden; /* for webkit */\r
1264         }\r
1265         .finder-icon:hover {\r
1266                 background-color:                       #eee;\r
1267                 cursor:                                         pointer;\r
1268         }\r
1269                 .fnder-icon-modern .finder-icon-handle,\r
1270                 .fnder-icon-modern .finder-icon-thumbnail,\r
1271                 .fnder-icon-modern .finder-icon-filename,\r
1272                 .fnder-icon-modern .finder-icon-summary {\r
1273                         display:                                        table-cell;\r
1274                 vertical-align:                         middle;\r
1275                 line-height:                            1.3em;\r
1276             }\r
1277                 \r
1278                 .finder-icon-handle {\r
1279                         width:                                          20px;\r
1280                         height:                                         74px;\r
1281                 }\r
1282                 \r
1283                 .finder-icon-thumbnail {\r
1284                         width:                                          64px;\r
1285                         height:                                         74px;\r
1286                         cursor:                                         pointer;\r
1287                         background-repeat:                      no-repeat;\r
1288                         background-position:            50% 50%;\r
1289                         background-image:                       url('../images/sprite.gif');\r
1290                 }\r
1291                 \r
1292                 .finder-icon .file-type-folder {\r
1293                         background-position:            0 -75px;\r
1294                 }\r
1295                 .finder-icon .file-type-album {\r
1296                 }\r
1297                 .finder-icon .file-type-author {\r
1298                         background-position:            -70px -75px;\r
1299                 }               \r
1300                 .finder-icon .file-type-comic {\r
1301                         background-position:            0 -145px;\r
1302                 }\r
1303                 .finder-icon .file-type-cabinet {\r
1304                         background-position:            -70px -145px;\r
1305                 }\r
1306                 .finder-icon .file-type-panel {\r
1307                         background-position:            0 -215px;\r
1308                 }\r
1309                 .finder-icon .file-type-artist {\r
1310                         background-position:            -70px -215px;\r
1311                 }\r
1312                 .finder-icon .file-type-balloon {\r
1313                         background-position:            0 -285px;\r
1314                 }\r
1315                 .finder-icon .file-type-charactor {\r
1316                         background-position:            -70px -285px;\r
1317                 }               \r
1318                 .has-thumbnail {\r
1319                 }\r
1320                 .fnder-icon-modern .finder-icon-filename {\r
1321                         width:                                          200px;\r
1322                         padding:                                        5px 10px;\r
1323                         height:                                         64px;\r
1324                         font-weight:                            bold;\r
1325                         color:                                          #333;\r
1326                 }\r
1327                 .fnder-icon-modern .finder-icon-summary {\r
1328                         width:                                          300px;\r
1329                         padding:                                        5px 10px;\r
1330                         height:                                         64px;\r
1331                         color:                                          #666;\r
1332                 }\r
1333 \r
1334         /*  Finder Icon ie7-\r
1335         --------------------------------------------------------------------------------------*/\r
1336         .finder-icon a,\r
1337         .finder-icon a:link,\r
1338         .finder-icon a:visited,\r
1339         .finder-icon a:active {\r
1340                 display:                                block;\r
1341                 height:                                 74px;\r
1342                 text-decoration:                none;\r
1343                 zoom:                                   1;\r
1344                 cursor:                                 pointer;\r
1345         }\r
1346         .finder-icon a:hover {\r
1347                 _background-color:              #eee;\r
1348                 color:                                  #333;\r
1349         }\r
1350                 .fnder-icon-ie7 .finder-icon-handle,\r
1351                 .fnder-icon-ie7 .finder-icon-thumbnail {\r
1352                 zoom:                                   1;\r
1353                 line-height:                    1.3em;\r
1354             }\r
1355                 .finder-icon-cell {\r
1356                         display:                                inline;\r
1357                         zoom:                                   1;\r
1358                 }\r
1359                         .finder-icon-vertical-middle-outer {\r
1360                                 display:                                block;\r
1361                                 height:                                 74px;\r
1362                                 position:                               relative;\r
1363                         }\r
1364                         .finder-icon-ie-filename .finder-icon-vertical-middle-outer {\r
1365                                 width:                                          200px;\r
1366                                 font-weight:                            bold;\r
1367                                 color:                                          #333;\r
1368                         }\r
1369                         .finder-icon-ie-summary .finder-icon-vertical-middle-outer {\r
1370                                 width:                                          300px;\r
1371                                 color:                                          #666;\r
1372                         }\r
1373                                 .finder-icon-vertical-middle-inner {\r
1374                                         display:                                        block;\r
1375                                         position:                                       absolute;\r
1376                                         top:                                            50%;\r
1377                                         margin:                                         0 5px;\r
1378                                 }\r
1379                                         .fnder-icon-ie7 .finder-icon-filename,\r
1380                                         .fnder-icon-ie7 .finder-icon-summary {\r
1381                                                         position:               relative;\r
1382                                                         top:                    -50%;\r
1383                                         }\r
1384                                         \r
1385         /*  Finder Icon Console\r
1386         --------------------------------------------------------------------------------------*/                \r
1387                 .finder-icon-console {\r
1388                         position:                                       absolute;\r
1389                         top:                                            0;\r
1390                         right:                                          0;\r
1391                 }\r
1392                         .finder-icon-console a {\r
1393                                 display:                                        block;\r
1394                                 width:                                          74px;\r
1395                                 height:                                         74px;\r
1396                                 border-left:                            1px solid #ccc;\r
1397                                 float:                                          right;\r
1398                                 background-image:                       url('../images/sprite.gif') !important;\r
1399                                 background-repeat:                      no-repeat;\r
1400                         }\r
1401                         .finder-icon-console a:hover {\r
1402                                 background-color:                       #ccc !important;\r
1403                         }\r
1404                         .finder-icon-console-action {\r
1405                                 background-position:            0px -355px;\r
1406                         }\r
1407                         .finder-icon-console-editor-apps {\r
1408                                 background-position:            -70px -355px;\r
1409                         }\r
1410                         .finder-icon-console-viewer-apps {\r
1411                                 background-position:            0px -425px;\r
1412                         }\r
1413 \r
1414 \r
1415 \r
1416