0.5.x/stylesheets/peta.apps.css

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