app/assets/stylesheets/peta.apps.css

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