app/assets/stylesheets/work.css

   1 /*\r
   2  * pettanR\r
   3  * \r
   4  *   work.css\r
   5  * \r
   6  *   version 0.4.1\r
   7  *\r
   8  */\r
   9         \r
  10         /*  View Container\r
  11         --------------------------------------------------------------------------------------*/        \r
  12                 #editor {\r
  13                         display:                        none;\r
  14                         position:                       absolute;\r
  15                         left:                           0;\r
  16                         top:                            0;\r
  17                         width:                          100%;\r
  18                         height:                         100%;\r
  19                 }\r
  20                 .console-page {\r
  21                         display:                        none;\r
  22                 }\r
  23         \r
  24 /*--------------------------------------------------------------------------------------\r
  25  * \r
  26  *  overlay\r
  27  *  \r
  28  -------------------------------------------------------------------------------------*/\r
  29         #overlay-container,\r
  30         #overlay-shadow {\r
  31                 position:                       absolute;\r
  32                 left:                           0;\r
  33                 top:                            0;\r
  34                 width:                          100%;\r
  35                 height:                         100%;\r
  36                 overflow:                       hidden;\r
  37         }\r
  38                 #overlay-shadow {\r
  39                         background-color:       #000;\r
  40                         opacity:                        0.5;\r
  41                         -moz-opacity:           0.5;\r
  42                         -khtml-opacity:         0.5;\r
  43                 }\r
  44                 .pettanr-ActiveX-Enabled #overlay-shadow {\r
  45                         filter:                         alpha(opacity=50);\r
  46                         -ms-filter:                     alpha(opacity=50);                      \r
  47                 }\r
  48                 .pettanr-ActiveX-disabled #overlay-shadow {\r
  49                         background:                     transparent url( black-50pct.png) repeat 0 0;\r
  50                         _background:            #000;\r
  51                 }\r
  52                 \r
  53                 #overlay-close-button {\r
  54                         border:                                 2px solid #f00;\r
  55                         color:                                  #f00;\r
  56                         font-weight:                    bold;\r
  57                         font-size:                              16px;\r
  58                         line-height:                    16px;\r
  59                         text-align:                             center;\r
  60                         cursor:                                 pointer;\r
  61                         overflow:                               hidden;\r
  62                         width:                                  20px;\r
  63                         height:                                 20px;\r
  64                         padding:                                2px;\r
  65                         position:                               absolute;\r
  66                         top:                                    9px;\r
  67                         right:                                  9px;\r
  68                         border-radius:                  5px;\r
  69                         -o-border-radius:               5px;\r
  70                         -ms-border-radius:              5px;\r
  71                         -moz-border-radius:             5px;\r
  72                         -webkit-border-radius:  5px;\r
  73                 }\r
  74 \r
  75                 /*  Output Console\r
  76                 --------------------------------------------------------------------------------------*/\r
  77                         #output-console-wrapper {\r
  78                                 position:                               absolute;\r
  79                                 width:                                  80%;\r
  80                                 height:                                 80%;\r
  81                                 background-color:               #fff;\r
  82                         }\r
  83                                 #output-area {\r
  84                                         width:                  100%;\r
  85                                         height:                 100%;\r
  86                                         border:                 1px outset #ccc;\r
  87                                         outline:                1px;\r
  88                                 }\r
  89 \r
  90 /*--------------------------------------------------------------------------------------\r
  91  * \r
  92  *  home\r
  93  *  \r
  94  -------------------------------------------------------------------------------------*/\r
  95         #home {\r
  96 \r
  97         }\r
  98 \r
  99 \r
 100 /*--------------------------------------------------------------------------------------\r
 101  * \r
 102  *  Editor\r
 103  *  \r
 104  -------------------------------------------------------------------------------------*/\r
 105                 #editor {\r
 106                         overflow:                       hidden;\r
 107                         background-color:       #f5f5f5;\r
 108                 }\r
 109         \r
 110                 /*  Text Editor\r
 111                 --------------------------------------------------------------------------------------*/                \r
 112                         #speach-editor-wrapper {\r
 113                                 position:               absolute;\r
 114                         }\r
 115                         #speach-editor-wrapper form {\r
 116                                 width:                  100%;\r
 117                                 height:                 100%;\r
 118                         }\r
 119                         #speach-editor {\r
 120                                 width:                  100%;\r
 121                                 height:                 100%;\r
 122                                 border:                 1px outset #ccc;\r
 123                                 outline:                1px;\r
 124                         }\r
 125                                 #speach-edit-complete-button {\r
 126                                         margin:         10px auto 0;\r
 127                                 }\r
 128         \r
 129                 /*  Image Group\r
 130                 --------------------------------------------------------------------------------------*/\r
 131                         #image-gruop-wrapper {\r
 132                                 position:                       absolute;\r
 133                                 top:                            0;\r
 134                                 left:                           0;\r
 135                         }\r
 136                                 #image-icon-container {\r
 137                                         position:                       absolute;\r
 138                                         top:                            0;\r
 139                                         left:                           0;\r
 140                                         height:                         200px;\r
 141                                         width:                          100%;\r
 142                                         background-color:       #fff;\r
 143                                         border:                         #fff solid;\r
 144                                         border-width:           0;                              \r
 145                                 }\r
 146                                 #image-gruop-button {\r
 147                                         width:                  200px;\r
 148                                         position:               absolute;\r
 149                                         left:                   0;\r
 150                                         bottom:                 -40px;\r
 151                                         _bottom:                0;\r
 152                                 }\r
 153                                 .image-gruop-item {\r
 154                                         width:                  150px;\r
 155                                         height:                 200px;\r
 156                                         position:               absolute;\r
 157                                         top:                    0;\r
 158                                         left:                   0;\r
 159                                         text-align:             center;\r
 160                                 }\r
 161                                 .image-gruop-item .reversible-image-container {\r
 162                                         width:                  150px;\r
 163                                         height:                 200px;\r
 164                                 }\r
 165                                 .image-gruop-item .reversible-image-container img {\r
 166                                         width:                  100%;\r
 167                                         height:                 100%;\r
 168                                 }\r
 169                                 .image-gruop-item-title {\r
 170                                         position:               absolute;\r
 171                                         bottom:                 0;\r
 172                                         left:                   0;\r
 173                                         text-align:             center;\r
 174                                         width:                  100%;\r
 175                                         height:                 30px;\r
 176                                 }\r
 177                                 \r
 178         \r
 179         /*  MenuBar\r
 180         --------------------------------------------------------------------------------------*/\r
 181                 #menu-bar {\r
 182                         position:                       absolute;\r
 183                         top:                            0;\r
 184                         left:                           0;\r
 185                         width:                          100%;\r
 186                         height:                         30px;\r
 187                         background-color:       #fff;\r
 188                         border-bottom:          1px solid #666;\r
 189                         box-shadow:                     0 4px 9px #333;\r
 190                         -moz-box-shadow:        0 4px 9px #333;\r
 191                         -webkit-box-shadow:     0 4px 9px #333;\r
 192                         filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);\r
 193                 }\r
 194                         .menu-bar-item,\r
 195                         .menu-bar-item-focus {\r
 196                                 position:               absolute;\r
 197                                 top:                    0;\r
 198                                 width:                  80px;\r
 199                                 color:                  #666;\r
 200                         }\r
 201                                 .menu-bar-item div,\r
 202                                 .menu-bar-item-focus div {\r
 203                                         cursor:                 pointer;\r
 204                                         overflow:               hidden;\r
 205                                         height:                 30px;\r
 206                                         line-height:    30px;                           \r
 207                                         padding-left:   0.6em;\r
 208                                         font-size:              14px;\r
 209                                 }\r
 210                                 .menu-bar-item-focus div {\r
 211                                         background-color:       #66f;\r
 212                                         color:                          #eee;\r
 213                                 }\r
 214                                 .menu-bar-item ul {\r
 215                                         display:                        none;\r
 216                                 }\r
 217                                 .menu-bar-item-focus ul {\r
 218                                         position:                       absolute;\r
 219                                         list-style:                     none;\r
 220                                         top:                            30px;\r
 221                                         width:                          200px;\r
 222                                         margin:                         0;\r
 223                                         padding:                        0;\r
 224                                         background-color:       #fff;\r
 225                                         color:                          #666;\r
 226                                         border:                         1px solid #ccc;\r
 227                                         box-shadow:                     1px 4px 9px #333;\r
 228                                         -moz-box-shadow:        1px 4px 9px #333;\r
 229                                         -webkit-box-shadow:     1px 4px 9px #333;\r
 230                                         filter:                         progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 231                                 }\r
 232                                         .menu-bar-item-focus li {\r
 233                                                 display:                block;\r
 234                                                 cursor:                 pointer;\r
 235                                                 width:                  200px;\r
 236                                                 height:                 30px;\r
 237                                                 line-height:    30px;\r
 238                                         }\r
 239                                         .menu-bar-item-focus li.disabled {\r
 240                                                 cursor:                 default;\r
 241                                         }\r
 242                                                 .menu-bar-item-focus a,\r
 243                                                 .menu-bar-item-focus a:link,\r
 244                                                 .menu-bar-item-focus a:visited {\r
 245                                                         color:                  #666;\r
 246                                                         position:               relative;\r
 247                                                         display:                block;\r
 248                                                         width:                  200px;\r
 249                                                         height:                 30px;\r
 250                                                         line-height:    30px;\r
 251                                                         *cursor:                pointer;\r
 252                                                 }\r
 253                                                 .menu-bar-item-focus a:hover {\r
 254                                                         color:                          #333;\r
 255                                                         background-color:       #ccf;\r
 256                                                         text-decoration:        none;\r
 257                                                         *cursor:                        pointer;\r
 258                                                 }                               \r
 259                                                 .menu-bar-item-focus li.disabled a,\r
 260                                                 .menu-bar-item-focus li.disabled a:link,\r
 261                                                 .menu-bar-item-focus li.disabled a:visited,\r
 262                                                 .menu-bar-item-focus li.disabled a:active,\r
 263                                                 .menu-bar-item-focus li.disabled a:hover {\r
 264                                                         color:                          #999;\r
 265                                                         background-color:       #fff;\r
 266                                                         *cursor:                        default;\r
 267                                                 }\r
 268                                                         .menu-bar-item-focus span {\r
 269                                                                 position:               absolute;\r
 270                                                                 top:                    0;\r
 271                                                                 left:                   10px;\r
 272                                                                 display:                block;\r
 273                                                                 font-size:              14px;\r
 274                                                                 font-weight:    bold;\r
 275                                                                 width:                  120px;\r
 276                                                                 overflow:               hidden;\r
 277                                                         }\r
 278                                                         .menu-bar-item-focus kbd {\r
 279                                                                 position:               absolute;\r
 280                                                                 top:                    0;\r
 281                                                                 left:                   140px;\r
 282                                                                 display:                block;\r
 283                                                                 font-size:              10px;\r
 284                                                                 color:                  #999;\r
 285                                                                 width:                  60px;\r
 286                                                                 overflow:               hidden;\r
 287                                                         }\r
 288                                         .menu-bar-item-focus li.separator {\r
 289                                                 width:                  200px;\r
 290                                                 height:                 0;\r
 291                                                 line-height:    0;\r
 292                                                 border-top:             1px solid #ccc;\r
 293                                                 margin:                 0;\r
 294                                                 padding:                0;\r
 295                                         }\r
 296         \r
 297         /*  whiteGlass\r
 298         --------------------------------------------------------------------------------------*/        \r
 299                 #whiteGlass-container {\r
 300                         position:       absolute;\r
 301                         top:            0;\r
 302                         left:           0;\r
 303                         width:          100%;\r
 304                         height:         100%;\r
 305                 }\r
 306                         #whiteGlass-container div {\r
 307                                 position:                       absolute;\r
 308                                 background-color:       #fff;\r
 309                                 opacity:                        0.7;\r
 310                                 -moz-opacity:           0.7;\r
 311                                 -khtml-opacity:         0.7;\r
 312                         }\r
 313                         .pettanr-ActiveX-disabled #whiteGlass-container div {\r
 314                                 filter:                         alpha(opacity=70);\r
 315                                 -ms-filter:                     alpha(opacity=70);                              \r
 316                         }\r
 317                         .pettanr-ActiveX-disabled #whiteGlass-container div {\r
 318                                 background:                     transparent url( white-70pct.png) repeat 0 0;\r
 319                                 _background:            #fff;\r
 320                         }\r
 321                         \r
 322                         #whiteGlass-top {\r
 323                                 top:            0;\r
 324                                 left:           0;\r
 325                                 width:          100%;\r
 326                                 height:         20%;\r
 327                         }\r
 328                         #whiteGlass-left {\r
 329                                 top:            20%;\r
 330                                 left:           0;\r
 331                                 width:          20%;\r
 332                                 height:         60%;\r
 333                         }\r
 334                         #whiteGlass-right {\r
 335                                 top:            20%;\r
 336                                 left:           80%;\r
 337                                 width:          20%;\r
 338                                 height:         60%;\r
 339                         }\r
 340                         #whiteGlass-bottom {\r
 341                                 top:            80%;\r
 342                                 left:           0;\r
 343                                 width:          100%;\r
 344                                 height:         20%;\r
 345                         }\r
 346         \r
 347         /*  panel\r
 348         --------------------------------------------------------------------------------------*/\r
 349                 #panel-tools-container {\r
 350                         position:       absolute;\r
 351                         border:         2px solid #333;\r
 352                 }\r
 353         \r
 354         /*  mouse-operation-catcher\r
 355         --------------------------------------------------------------------------------------*/        \r
 356                 #mouse-operation-catcher {\r
 357                         position:                       absolute;\r
 358                         top:                            0;\r
 359                         left:                           0;\r
 360                         width:                          100%;\r
 361                         height:                         100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */\r
 362                 }\r
 363                 .pettanr-ActiveX-enabled #mouse-operation-catcher {\r
 364                         background-color:       #fff;\r
 365                         filter:                         alpha( opacity=0);\r
 366                         -ms-filter:                     alpha( opacity=0);\r
 367                 }\r
 368                 /*\r
 369                  * ie では、背景を設定しないと、 mousemove が働かない。\r
 370                  * activeX 有効の場合は背景を着色して filter で透明に。\r
 371                  * activeX 無効の場合は透明 gif を使用\r
 372                  * background:                  url(4x4.gif) fixed repeat;\r
 373                  */\r
 374                 .pettanr-ActiveX-disabled #mouse-operation-catcher {\r
 375                         background:                     url( opacity0.gif) fixed repeat;\r
 376                 }\r
 377         \r
 378         \r
 379         /*  comic-element\r
 380         --------------------------------------------------------------------------------------*/\r
 381                 #comic-element-container {\r
 382                         position:                       absolute;\r
 383                         \r
 384                 }\r
 385                         .comic-element-wrapper {\r
 386                                 position:                       absolute;\r
 387                         }\r
 388                                 #comic-element-container img {\r
 389                                         width:                          100%;\r
 390                                         height:                         100%;\r
 391                                         position:                       absolute;\r
 392                                         top:                            0;\r
 393                                         left:                           0;\r
 394                                 }\r
 395         \r
 396         /*  comic-element-resizer\r
 397         --------------------------------------------------------------------------------------*/                \r
 398                 #comic-element-resizer-container {\r
 399                         position:                       absolute;\r
 400                         border:                         1px solid #999;\r
 401                 }\r
 402                         .comic-element-resizer {\r
 403                                 position:                       absolute;\r
 404                                 width:                          8px;\r
 405                                 height:                         8px;\r
 406                                 font-size:                      8px; /* ie */\r
 407                                 line-height:            8px; /* ie */\r
 408                                 border:                         1px solid #333;\r
 409                                 background-color:       #fff;\r
 410                         }\r
 411                 /*\r
 412                  * marker\r
 413                  */\r
 414                         #comic-element-resizer-top {\r
 415                                 top:                            -5px;\r
 416                                 left:                           50%;\r
 417                         }\r
 418                         .current-resizer-is-0 #comic-element-resizer-top {\r
 419                                 background-color:       #f66;\r
 420                         }\r
 421                         #comic-element-resizer-left {\r
 422                                 top:                            50%;\r
 423                                 left:                           -5px;\r
 424                         }\r
 425                         .current-resizer-is-1 #comic-element-resizer-left {\r
 426                                 background-color:       #f66;\r
 427                         }\r
 428                         #comic-element-resizer-right {\r
 429                                 top:                            50%;\r
 430                                 right:                          -5px;\r
 431                         }\r
 432                         .current-resizer-is-2 #comic-element-resizer-right {\r
 433                                 background-color:       #f66;\r
 434                         }\r
 435                         #comic-element-resizer-bottom {\r
 436                                 bottom:                         -5px;\r
 437                                 left:                           50%;\r
 438                         }\r
 439                         .current-resizer-is-3 #comic-element-resizer-bottom {\r
 440                                 background-color:       #f66;\r
 441                         }\r
 442                         #comic-element-resizer-top-left {\r
 443                                 top:                            -5px;\r
 444                                 left:                           -5px;\r
 445                         }\r
 446                         .current-resizer-is-4 #comic-element-resizer-top-left {\r
 447                                 background-color:       #f66;\r
 448                         }\r
 449                         #comic-element-resizer-top-right {\r
 450                                 top:                            -5px;\r
 451                                 right:                          -5px;\r
 452                         }\r
 453                         .current-resizer-is-5 #comic-element-resizer-top-right {\r
 454                                 background-color:       #f66;\r
 455                         }\r
 456                         #comic-element-resizer-bottom-left {\r
 457                                 bottom:                         -5px;\r
 458                                 left:                           -5px;\r
 459                         }\r
 460                         .current-resizer-is-6 #comic-element-resizer-bottom-left {\r
 461                                 background-color:       #f66;\r
 462                         }\r
 463                         #comic-element-resizer-bottom-right {\r
 464                                 bottom:                         -5px;\r
 465                                 right:                          -5px;\r
 466                         }\r
 467                         .current-resizer-is-7 #comic-element-resizer-bottom-right {\r
 468                                 background-color:       #f66;\r
 469                         }\r
 470         /*  panel-resizer\r
 471         --------------------------------------------------------------------------------------*/        \r
 472                 #panel-resizer-top,\r
 473                 #panel-resizer-bottom {\r
 474                         position:                       absolute;\r
 475                         border:                         1px outset #999;\r
 476                         background-color:       #eee;\r
 477                         text-align:                     center;\r
 478                         font-size:                      12px;\r
 479                         line-height:            12px;\r
 480                         padding:                        9px 0;\r
 481                         left:                           -2px;\r
 482                 }\r
 483                 \r
 484                 #panel-resizer-top {\r
 485                         top:                                    -37px;\r
 486                         border-radius:                  8px 8px 0 0;\r
 487                         -o-border-radius:               8px 8px 0 0;\r
 488                         -ms-border-radius:              8px 8px 0 0;\r
 489                         -moz-border-radius:             8px 8px 0 0;\r
 490                         -webkit-border-radius:  8px 8px 0 0;\r
 491                 }\r
 492                 #panel-resizer-bottom {\r
 493                         bottom:                                 -37px;\r
 494                         border-radius:                  0 0 8px 8px;\r
 495                         -o-border-radius:               0 0 8px 8px;\r
 496                         -ms-border-radius:              0 0 8px 8px;\r
 497                         -moz-border-radius:             0 0 8px 8px;\r
 498                         -webkit-border-radius:  0 0 8px 8px;\r
 499                 }\r
 500         \r
 501         /*  balloon-tail-mover\r
 502         --------------------------------------------------------------------------------------*/                \r
 503                 #balloon-tail-mover {\r
 504                         position:                       absolute;\r
 505                         width:                          8px;\r
 506                         height:                         8px;\r
 507                         font-size:                      8px; /* ie */\r
 508                         line-height:            8px; /* ie */\r
 509                         border:                         1px solid #333;\r
 510                         background-color:       #66f;\r
 511                         margin:                         -5px 0 0 -5px;\r
 512                 }\r
 513         \r
 514         /*  comic element console\r
 515         --------------------------------------------------------------------------------------*/\r
 516                 #comic-element-consol-wrapper {\r
 517                         position:                       absolute;\r
 518                 }\r
 519                         #image-element-consol {\r
 520                                 width:                          50px;\r
 521                                 overflow:                       auto;\r
 522                         }\r
 523                         #text-element-consol {\r
 524                                 width:                          75px;\r
 525                                 overflow:                       auto;\r
 526                         }\r
 527         \r
 528                                 #change-image-button,\r
 529                                 #layer-back-button,\r
 530                                 #layer-forward-button,\r
 531                                 #delete-image-button,\r
 532                                 #edit-text-button,\r
 533                                 #change-text-style-button,\r
 534                                 #hide-text-tail-button,\r
 535                                 #back-text-button,\r
 536                                 #forward-text-button,\r
 537                                 #delete-text-button {\r
 538                                         text-indent:                    -9999px;\r
 539                                         width:                                  25px;\r
 540                                         height:                                 25px;\r
 541                                         line-height:                    25px;\r
 542                                         float:                                  left;\r
 543                                         background-image:               url('../images/sprite.gif');\r
 544                                         background-repeat:              no-repeat;\r
 545                                         background-position:    0 0;\r
 546                                         cursor:                                 pointer;\r
 547                                 }\r
 548                                 #hide-text-tail-button {\r
 549                                         background-position:    -30px -30px;\r
 550                                 }\r
 551                                 #change-image-button,\r
 552                                 #change-text-style-button {\r
 553                                         background-position:    -30px 0;\r
 554                                 }                       \r
 555                                 #layer-back-button,\r
 556                                 #back-text-button {\r
 557                                         background-position:    -60px 0;\r
 558                                 }\r
 559                                 #layer-forward-button,\r
 560                                 #forward-text-button {\r
 561                                         background-position:    -60px -30px;\r
 562                                 }\r
 563                                 #delete-image-button,\r
 564                                 #delete-text-button {\r
 565                                         background-position:    0 -30px;\r
 566                                 }\r
 567                         \r
 568                 .console-out #comic-element-consol-wrapper-when-out {\r
 569                         padding:                        5px;\r
 570                         background-color:       #333;\r
 571                 }\r
 572                 .console-out #comic-element-consol-tail {\r
 573                         border-width:           0 5px 10px 5px;\r
 574                         border-color:           transparent transparent #333 transparent;\r
 575                         _border-color:          #fff #fff #333 #fff;\r
 576                         border-style:           solid;\r
 577                         width:                          0;\r
 578                         height:                         0;\r
 579                         font-size:                      0;\r
 580                         line-height:            0;\r
 581                         position:                       absolute;\r
 582                         top:                            -10px;\r
 583                         left:                           50%;\r
 584                 }\r
 585                         \r
 586         \r
 587                         \r
 588         /*  Panel > speach\r
 589         --------------------------------------------------------------------------------------*/\r
 590                         .speach {\r
 591                                 text-align:                     center;\r
 592                                 display:                        table;\r
 593                                 position:                       absolute;\r
 594                                 top:                            16.6%;\r
 595                                 left:                           16.6%;\r
 596                                 width:                          66.6%;\r
 597                                 height:                         66.6%;\r
 598                                 padding:                        0;\r
 599                                 margin:                         0;\r
 600                         }\r
 601                                 .speach-inner {\r
 602                                         display:                table-cell;\r
 603                                         vertical-align: middle;\r
 604                                 }\r
 605                         \r
 606                 /* fix for ie */        \r
 607                         .text-element table,\r
 608                         .text-element tbody,\r
 609                         .text-element tr,\r
 610                         .text-element td {\r
 611                                 width:                          100%;\r
 612                                 height:                         100%;\r
 613                                 border:                         0;\r
 614                                 padding:                        0;\r
 615                                 margin:                         0;\r
 616                                 text-align:                     center;\r
 617                                 vertical-align:         middle;\r
 618                         }\r
 619                         .text-element table {\r
 620                                 table-layout:           fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */\r
 621                         }\r
 622                         \r
 623         /*  Window\r
 624         --------------------------------------------------------------------------------------*/\r
 625                 .window-wrapper {\r
 626                         position:                       absolute;\r
 627                         top:                            10px;\r
 628                         left:                           10px;\r
 629                         width:                          200px;\r
 630                         height:                         200px;\r
 631                         border-bottom:          1px solid #999;\r
 632                         background-color:       #fff;\r
 633                         box-shadow:                     1px 4px 9px #333;\r
 634                         -moz-box-shadow:        1px 4px 9px #333;\r
 635                         -webkit-box-shadow:     1px 4px 9px #333;\r
 636                         filter:                         progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 637                 }\r
 638 \r
 639                         .window-header,\r
 640                         .window-close-button {\r
 641                                 font-size:                              12px;\r
 642                                 color:                                  #eee;\r
 643                                 line-height:                    12px;\r
 644                                 overflow:                               hidden;\r
 645                                 text-align:                             center;\r
 646                                 padding-top:                    8px;\r
 647                                 padding-bottom:                 6px;\r
 648                                 background-color:               #333;\r
 649                         }\r
 650                                 .window-close-button {\r
 651                                         position:                               absolute;\r
 652                                         top:                                    0;\r
 653                                         right:                                  0;\r
 654                                         border-left:                    1px solid #666;\r
 655                                         padding-left:                   9px;\r
 656                                         padding-right:                  9px;\r
 657                                         border-radius:                  0 8px 0 0;\r
 658                                         -o-border-radius:               0 8px 0 0;\r
 659                                         -ms-border-radius:              0 8px 0 0;\r
 660                                         -moz-border-radius:             0 8px 0 0;\r
 661                                         -webkit-border-radius:  0 8px 0 0;\r
 662                                 }\r
 663                         \r
 664                         .window-wrapper,\r
 665                         .window-header {\r
 666                                 border-radius:                  8px 8px 0 0;\r
 667                                 -o-border-radius:               8px 8px 0 0;\r
 668                                 -ms-border-radius:              8px 8px 0 0;\r
 669                                 -moz-border-radius:             8px 8px 0 0;\r
 670                                 -webkit-border-radius:  8px 8px 0 0;\r
 671                         }\r
 672                         .window-body {\r
 673                                 position:                               relative;\r
 674                                 border-left:                    1px solid #aaa;\r
 675                                 *border-left:                   1px solid #ccc;\r
 676                                 border-right:                   1px solid #999;\r
 677                         }\r
 678 \r
 679                         html>/**/body .window-body {  \r
 680                                 border-left /***/:              1px solid #ccc\9;\r
 681                         }\r
 682 \r
 683                         .window-footer {\r
 684                                 width:                                  100%;\r
 685                                 height:                                 20px;\r
 686                                 background-color:               #333;\r
 687                                 position:                               absolute;\r
 688                                 left:                                   0;\r
 689                                 bottom:                                 0;\r
 690                         }\r
 691                                 .window-resize-button {\r
 692                                         position:                               absolute;\r
 693                                         top:                                    0;\r
 694                                         right:                                  0;\r
 695                                         background-image:               url('../images/sprite.gif');\r
 696                                         background-repeat:              no-repeat;\r
 697                                         background-position:    -70px -60px;\r
 698                                         width:                                  20px;\r
 699                                         height:                                 20px;\r
 700                                         line-height:                    20px;\r
 701                                         text-indent:                    -9999px;\r
 702                                         text-align:                             center;\r
 703                                         cursor:                                 pointer;\r
 704                                 }\r
 705 \r
 706         /*  page contents\r
 707         --------------------------------------------------------------------------------------*/\r
 708                 .sidenavi {\r
 709                         width:                          100px;\r
 710                         float:                          left;\r
 711                 }\r
 712                         .sidenavi-item,\r
 713                         .sidenavi-item:link {\r
 714                                 display:                        block;\r
 715                                 border-bottom:          1px solid #666;\r
 716                                 padding:                        1em;\r
 717                                 text-decoration:        none;\r
 718                                 zoom:                           1;\r
 719                         }\r
 720                         .sidenavi-item:hover {\r
 721                                 background-color:       #ccc;\r
 722                                 text-decoration:        none;\r
 723                         }\r
 724                         .sidenavi .current {\r
 725                                 background-color:       #666;\r
 726                                 color:                          #eee;\r
 727                         }\r
 728                 .page-contents {\r
 729                         _position:                              relative; /* for ie6 */\r
 730                         margin-left:                    100px;\r
 731                         padding:                                1em 1em 2em 1em;\r
 732                 }\r
 733                         .page-content {\r
 734                                 display:                                none;\r
 735                         }\r
 736         \r
 737         /*  editable-text\r
 738         --------------------------------------------------------------------------------------*/\r
 739         \r
 740                 .editable-text {\r
 741                         display:                        inline-block;\r
 742                         color:                          #333;\r
 743                         border:                         1px solid #ccc;\r
 744                         font-size:                      14px;\r
 745                         line-height:            16px;\r
 746                 }\r
 747                         .editable-text a,\r
 748                         .editable-text a:link,\r
 749                 .editable-text a:visited,\r
 750                 .editable-text a:hover,\r
 751                 .editable-text a:active {\r
 752                                 padding:                        3px;\r
 753                                 color:                          #333;\r
 754                                 text-decoration:        none;\r
 755                                 display:                        block;\r
 756                                 outline:                        0;\r
 757                                 background-color:       #fff;\r
 758                         }\r
 759                         .editable-text a:hover {\r
 760                                 background-color:       #ccf;\r
 761                         }\r
 762                         .editable-text input {\r
 763                                 padding:                        3px 0;\r
 764                                 width:                          100%;\r
 765                                 font-family:            Arial,Helvetica,sans-serif;\r
 766                                 background-color:       #ccf;\r
 767                                 border:                         0;\r
 768                                 margin:                         0;\r
 769                                 outline:                        0;\r
 770                         }\r
 771         \r
 772         \r
 773         /*  Information Window\r
 774         --------------------------------------------------------------------------------------*/\r
 775                 #comic-element-infomation {\r
 776                         background-color:                       #fff;\r
 777                         position:                                       absolute;\r
 778                         width:                                          100%;\r
 779                 }\r
 780                                 #comic-element-x, #comic-element-z,\r
 781                                 #comic-element-y, #comic-element-a,\r
 782                                 #comic-element-w, #comic-element-w-percent,\r
 783                                 #comic-element-h, #comic-element-h-percent {\r
 784                                         position:                       absolute;\r
 785                                 }\r
 786                                 \r
 787                                 #comic-element-x,\r
 788                                 #comic-element-y,\r
 789                                 #comic-element-w,\r
 790                                 #comic-element-h {\r
 791                                         left:                           30px;\r
 792                                 }\r
 793                                 #comic-element-z,\r
 794                                 #comic-element-a {\r
 795                                         left:                           115px;\r
 796                                 }\r
 797                     #comic-element-w-percent,\r
 798                     #comic-element-h-percent    {\r
 799                         left:               124px;\r
 800                     }\r
 801                                 #comic-element-x, #comic-element-z {\r
 802                                         top:                            10px;\r
 803                                 }\r
 804                                 #comic-element-y, #comic-element-a {\r
 805                                         top:                            40px;\r
 806                                 }\r
 807                                 #comic-element-w, #comic-element-w-percent {\r
 808                                         top:                            80px;\r
 809                                 }\r
 810                                 #comic-element-h, #comic-element-h-percent {\r
 811                                         top:                            110px;\r
 812                                 }\r
 813                                 .comic-element-attribute-label {\r
 814                                         display:                        inline-block;\r
 815                                         width:                          14px;\r
 816                                         line-height:            22px;\r
 817                                         color:                          #666;\r
 818                                         text-align:                     center;\r
 819                                         cursor:                         pointer;\r
 820                                 }\r
 821                                 .comic-element-attribute-value {\r
 822                                         width:                          40px;\r
 823                                         text-align:                     right;\r
 824                                 }\r
 825                 \r
 826                                 #comic-element-z-value,\r
 827                                 #comic-element-a-value {\r
 828                                         width:                          35px;\r
 829                                 }\r
 830                                 #comic-element-w-percent-value,\r
 831                                 #comic-element-h-percent-value {\r
 832                                         width:                          30px;\r
 833                                 }\r
 834                                 \r
 835                                 #comic-element-keep-aspect {\r
 836                                     position:            absolute;\r
 837                                     top:                 96px;\r
 838                                     left:                100px;\r
 839                                     width:               12px;\r
 840                                     height:              22px;\r
 841                                     font-size:           22px;\r
 842                                     line-height:         22px;\r
 843                                     border:              1px solid #ccc;\r
 844                                 }\r
 845         \r
 846         /*  Background Window\r
 847         --------------------------------------------------------------------------------------*/\r
 848                         #bg-pattern,\r
 849                         #select-bg-pattern-button,\r
 850                         #reset-bg-pattern-button,\r
 851                         #bg-color,\r
 852                         #select-bg-color-button,\r
 853                         #reset-bg-color-button {\r
 854                                 position:                       absolute;\r
 855                                 text-align:                     center;\r
 856                                 cursor:                         pointer;\r
 857                         }\r
 858                         \r
 859                         #bg-pattern,\r
 860                         #bg-color {\r
 861                                 box-shadow:                     1px 2px 3px #000;\r
 862                                 -moz-box-shadow:        1px 2px 3px #000;\r
 863                                 -webkit-box-shadow:     1px 2px 3px #000;\r
 864                                 height:                         80px;\r
 865                                 top:                            15px;\r
 866                         }\r
 867                         #bg-pattern {\r
 868                                 left:                           15px;\r
 869                                 width:                          100px;\r
 870                         }\r
 871                         #select-bg-pattern-button,\r
 872                         #reset-bg-pattern-button,\r
 873                         #select-bg-color-button,\r
 874                         #reset-bg-color-button {\r
 875                                 border:                         1px outset #666;\r
 876                                 height:                         20px;\r
 877                                 top:                            115px;\r
 878                                 line-height:            20px;\r
 879                         }\r
 880                         #select-bg-pattern-button {\r
 881                                 left:                           15px;\r
 882                                 width:                          80px;\r
 883                         }\r
 884                         #reset-bg-pattern-button {\r
 885                                 left:                           95px;\r
 886                                 width:                          20px;\r
 887                         }\r
 888                         \r
 889                         #bg-color {\r
 890                                 left:                           125px;\r
 891                                 width:                          60px;\r
 892                                 background-color:       #66f;\r
 893                         }\r
 894                         #select-bg-color-button {\r
 895                                 left:                           125px;\r
 896                                 width:                          40px;\r
 897                         }\r
 898                         #reset-bg-color-button {\r
 899                                 left:                           165px;\r
 900                                 width:                          20px;\r
 901                         }\r
 902         \r
 903         \r
 904         \r
 905         /*  Tool-box Window\r
 906         --------------------------------------------------------------------------------------*/                \r
 907                         #toolbox-add-image-button,\r
 908                         #toolbox-add-text-button,\r
 909                         #toolbox-edit-bg-button,\r
 910                         #toolbox-switch-grid,\r
 911                         #toolbox-popup-help-button,\r
 912                         #toolbox-post-button {\r
 913                                 position:                               absolute;\r
 914                                 left:                                   10px;\r
 915                                 width:                                  90px;\r
 916                                 border:                                 1px outset #999;\r
 917                                 height:                                 40px;\r
 918                                 line-height:                    40px;\r
 919                                 text-align:                             center;\r
 920                                 cursor:                                 pointer;\r
 921                                 background-color:               #ccc;\r
 922                                 border-radius:                  8px;\r
 923                                 -o-border-radius:               8px;\r
 924                                 -ms-border-radius:              8px;\r
 925                                 -moz-border-radius:             8px;\r
 926                                 -webkit-border-radius:  8px;\r
 927                         }\r
 928                         #toolbox-add-image-button {\r
 929                                 top:                                    10px;                                                           \r
 930                         }\r
 931                         #toolbox-add-text-button {\r
 932                                 top:                                    60px;\r
 933                         }\r
 934                         #toolbox-edit-bg-button {\r
 935                                 top:                                    110px;\r
 936                                 height:                                 30px;\r
 937                                 line-height:                    30px;\r
 938                         }\r
 939                         #toolbox-switch-grid,\r
 940                         #toolbox-popup-help-button {\r
 941                                 top:                                    150px;\r
 942                                 height:                                 30px;\r
 943                                 line-height:                    30px;\r
 944                         }\r
 945                         #toolbox-switch-grid {\r
 946                                 width:                                  45px !important;\r
 947                         }\r
 948                         #toolbox-popup-help-button {\r
 949                                 width:                                  35px !important;\r
 950                                 left:                                   65px !important;\r
 951                         }\r
 952                         \r
 953                         #toolbox-post-button {\r
 954                                 top:                                    190px;\r
 955                                 height:                                 50px;\r
 956                                 line-height:                    50px;\r
 957                         }\r
 958         \r
 959         /*  Grid\r
 960         --------------------------------------------------------------------------------------*/\r
 961                 #grid {\r
 962                         width:                                  100%;\r
 963                         height:                                 100%;\r
 964                         position:                               absolute;\r
 965                         left:                                   0;\r
 966                         top:                                    0;\r
 967                         background-attachment:  fixed;\r
 968                         background-repeat:              repeat;\r
 969                         /* background-image:            url('grid.gif');　grid用イメージはgrid使用時にjsで埋め込み */\r
 970                 }\r
 971 \r
 972 /*--------------------------------------------------------------------------------------\r
 973  * \r
 974  *  Finder\r
 975  *  \r
 976  -------------------------------------------------------------------------------------*/\r
 977         .finder-body {\r
 978                 position:                               relative;\r
 979         }\r
 980 \r
 981         .finder-header {\r
 982                 height:                                 40px;\r
 983                 position:                               relative;\r
 984                 background-color:               #333;\r
 985         }\r
 986                 .finder-header ul {\r
 987                         list-style:                             none;\r
 988                         position:                               absolute;\r
 989                         top:                                    0;\r
 990                         left:                                   48px;\r
 991                         height:                                 40px;\r
 992                         line-height:                    40px;\r
 993                         padding:                                0;\r
 994                         margin:                                 0;\r
 995                 }\r
 996                         .finder-header li {\r
 997                                 position:                               absolute;\r
 998                                 top:                                    0;\r
 999                                 left:                                   0;\r
1000                                 height:                                 40px;\r
1001                                 width:                                  90px;\r
1002                                 padding:                                0;\r
1003                                 margin:                                 0;\r
1004                         }\r
1005                         .finder-header li a,\r
1006                         .finder-header li a:link\r
1007                         .finder-header li a:visited {\r
1008                                 display:                                block;\r
1009                                 height:                                 14px;\r
1010                                 font-size:                              14px;\r
1011                                 line-height:                    14px;\r
1012                                 padding:                                16px 0 10px 20px;\r
1013                                 margin:                                 0;\r
1014                                 color:                                  #eee;\r
1015                         }\r
1016                         .finder-header li a:hover {\r
1017                                 text-decoration:                none;\r
1018                                 background-color:               #66f;\r
1019                                 color:                                  #eee;\r
1020                         }\r
1021                         \r
1022                         \r
1023                 .finder-header .button {\r
1024                         position:                               absolute;\r
1025                         top:                                    8px;\r
1026                         width:                                  30px;\r
1027                         height:                                 24px;\r
1028                         line-height:                    24px;\r
1029                 }\r
1030                 .finder-sidebar-switch {\r
1031                         left:                                   8px;\r
1032                 }\r
1033                 .finder-style-switch {\r
1034                         right:                                  48px;\r
1035                 }\r
1036                 .finder-action-switch {\r
1037                         right:                                  8px;\r
1038                 }\r
1039                 \r
1040         /*  Finder Icon\r
1041         --------------------------------------------------------------------------------------*/\r
1042         .finder-icon {\r
1043                 position:                                       absolute;\r
1044                 top:                                            0;\r
1045                 left:                                           0;\r
1046                 height:                                         74px;\r
1047                 width:                                          100%;\r
1048                 border-bottom:                          1px solid #ccc;\r
1049         }\r
1050                 .finder-icon-thumbnail {\r
1051                         width:                                          64px;\r
1052                         height:                                         64px;\r
1053                         position:                                       absolute;\r
1054                         top:                                            5px;\r
1055                         left:                                           20px;\r
1056                         cursor:                                         pointer;\r
1057                         background-position:            50% 50%;\r
1058                         background-repeat:                      no-repeat;\r
1059                 }\r
1060                 .finder-icon .file-type-1 {\r
1061                         background-image:                       url('../images/folder_general.png');\r
1062                 }\r
1063                 .finder-icon .file-type-2 {\r
1064                         background-image:                       url('../images/folder_album.png');\r
1065                 }\r
1066                 .finder-icon .file-type-11 {\r
1067                         background-image:                       url('../images/cabinet.png');\r
1068                 }\r
1069                 \r
1070                 .has-thumbnail {\r
1071                         background-image:                       url('../images/folder_album.png');\r
1072                 }\r
1073                 /*\r
1074                  * http://www.iconfinder.com/icondetails/18336/64/folder_image_photo_icon\r
1075                  * http://www.iconfinder.com/icondetails/27849/48/folder_yellow_icon\r
1076                  * http://www.iconfinder.com/icondetails/45347/64/cabinet_icon
1077                  */\r
1078                 .finder-icon-filename {\r
1079                         position:                                       absolute;\r
1080                         top:                                            30px;\r
1081                         left:                                           100px;\r
1082                 }