app/assets/stylesheets/peta.apps.css

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