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