0.3.0/work.css

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