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