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