11 --------------------------------------------------------------------------------------*/
\r
24 /*--------------------------------------------------------------------------------------
\r
28 -------------------------------------------------------------------------------------*/
\r
39 background-color: #000;
\r
42 filter: alpha(opacity=50);
\r
43 -ms-filter: alpha(opacity=50);
\r
45 .pettanr-ActiveX-disabled #overlay-shadow {
\r
46 background: transparent url( black-50pct.png) repeat 0 0;
\r
50 #overlay-close-button {
\r
51 border: 2px solid #f00;
\r
66 -o-border-radius: 5px;
\r
67 -ms-border-radius: 5px;
\r
68 -moz-border-radius: 5px;
\r
69 -webkit-border-radius: 5px;
\r
73 --------------------------------------------------------------------------------------*/
\r
74 #output-console-wrapper {
\r
78 background-color: #fff;
\r
83 border: 1px outset #ccc;
\r
87 /*--------------------------------------------------------------------------------------
\r
91 -------------------------------------------------------------------------------------*/
\r
97 /*--------------------------------------------------------------------------------------
\r
101 -------------------------------------------------------------------------------------*/
\r
104 background-color: #f5f5f5;
\r
108 --------------------------------------------------------------------------------------*/
\r
109 #speach-editor-wrapper {
\r
110 position: absolute;
\r
112 #speach-editor-wrapper form {
\r
119 border: 1px outset #ccc;
\r
122 #speach-edit-complete-button {
\r
123 margin: 10px auto 0;
\r
127 --------------------------------------------------------------------------------------*/
\r
128 #image-gruop-wrapper {
\r
129 position: absolute;
\r
133 #image-icon-container {
\r
134 position: absolute;
\r
139 background-color: #fff;
\r
140 border: #fff solid;
\r
143 #image-gruop-button {
\r
145 position: absolute;
\r
150 .image-gruop-item {
\r
153 position: absolute;
\r
156 text-align: center;
\r
158 .image-gruop-item .reversible-image-container {
\r
162 .image-gruop-item .reversible-image-container img {
\r
166 .image-gruop-item-title {
\r
167 position: absolute;
\r
170 text-align: center;
\r
177 --------------------------------------------------------------------------------------*/
\r
179 position: absolute;
\r
184 background-color: #fff;
\r
185 border-bottom: 1px solid #666;
\r
186 box-shadow: 0 4px 9px #333;
\r
187 -moz-box-shadow: 0 4px 9px #333;
\r
188 -webkit-box-shadow: 0 4px 9px #333;
\r
189 filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);
\r
192 .menu-bar-item-focus {
\r
193 position: absolute;
\r
198 .menu-bar-item div,
\r
199 .menu-bar-item-focus div {
\r
203 line-height: 30px;
\r
204 padding-left: 0.6em;
\r
207 .menu-bar-item-focus div {
\r
208 background-color: #66f;
\r
211 .menu-bar-item ul {
\r
214 .menu-bar-item-focus ul {
\r
215 position: absolute;
\r
221 background-color: #fff;
\r
223 border: 1px solid #ccc;
\r
224 box-shadow: 1px 4px 9px #333;
\r
225 -moz-box-shadow: 1px 4px 9px #333;
\r
226 -webkit-box-shadow: 1px 4px 9px #333;
\r
227 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
229 .menu-bar-item-focus li {
\r
236 .menu-bar-item-focus li.disabled {
\r
239 .menu-bar-item-focus a,
\r
240 .menu-bar-item-focus a:link,
\r
241 .menu-bar-item-focus a:visited {
\r
243 position: relative;
\r
250 .menu-bar-item-focus a:hover {
\r
252 background-color: #ccf;
\r
253 text-decoration: none;
\r
256 .menu-bar-item-focus li.disabled a,
\r
257 .menu-bar-item-focus li.disabled a:link,
\r
258 .menu-bar-item-focus li.disabled a:visited,
\r
259 .menu-bar-item-focus li.disabled a:active,
\r
260 .menu-bar-item-focus li.disabled a:hover {
\r
262 background-color: #fff;
\r
265 .menu-bar-item-focus span {
\r
266 position: absolute;
\r
275 .menu-bar-item-focus kbd {
\r
276 position: absolute;
\r
285 .menu-bar-item-focus li.separator {
\r
289 border-top: 1px solid #ccc;
\r
295 --------------------------------------------------------------------------------------*/
\r
296 #whiteGlass-container {
\r
297 position: absolute;
\r
303 #whiteGlass-container div {
\r
304 position: absolute;
\r
305 background-color: #fff;
\r
308 filter: alpha(opacity=70);
\r
309 -ms-filter: alpha(opacity=70);
\r
311 .pettanr-ActiveX-disabled #whiteGlass-container div {
\r
312 background: transparent url( white-70pct.png) repeat 0 0;
\r
328 #whiteGlass-right {
\r
334 #whiteGlass-bottom {
\r
342 --------------------------------------------------------------------------------------*/
\r
343 #panel-tools-container {
\r
344 position: absolute;
\r
345 border: 2px solid #333;
\r
348 /* mouse-operation-catcher
\r
349 --------------------------------------------------------------------------------------*/
\r
350 #mouse-operation-catcher {
\r
351 position: absolute;
\r
355 height: 100%; /* 100% don't work for ie6, so ie6 need to set height-'px' by js */
\r
357 .pettanr-ActiveX-enabled #mouse-operation-catcher {
\r
358 background-color: #fff;
\r
359 filter: alpha(opacity=0);
\r
360 -ms-filter: alpha(opacity=0);
\r
363 * ieでは、背景を設定しないと、mouse-operation-catcherが働かない。
\r
364 * activeX有効の場合は背景を着色してfilterで透明に。
\r
365 * activeX無効の場合は透明gifを使用
\r
366 * background: url(4x4.gif) fixed repeat;
\r
368 .pettanr-ActiveX-disabled #mouse-operation-catcher {
\r
369 background: url(opacity0.gif) fixed repeat;
\r
374 --------------------------------------------------------------------------------------*/
\r
375 #comic-element-container {
\r
376 position: absolute;
\r
379 .comic-element-wrapper {
\r
380 position: absolute;
\r
382 #comic-element-container img {
\r
385 position: absolute;
\r
390 /* comic-element-resizer
\r
391 --------------------------------------------------------------------------------------*/
\r
392 #comic-element-resizer-container {
\r
393 position: absolute;
\r
394 border: 1px solid #999;
\r
396 .comic-element-resizer {
\r
397 position: absolute;
\r
400 font-size: 8px; /* ie */
\r
401 line-height: 8px; /* ie */
\r
402 border: 1px solid #333;
\r
403 background-color: #fff;
\r
408 #comic-element-resizer-top {
\r
412 .current-resizer-is-0 #comic-element-resizer-top {
\r
413 background-color: #f66;
\r
415 #comic-element-resizer-left {
\r
419 .current-resizer-is-1 #comic-element-resizer-left {
\r
420 background-color: #f66;
\r
422 #comic-element-resizer-right {
\r
426 .current-resizer-is-2 #comic-element-resizer-right {
\r
427 background-color: #f66;
\r
429 #comic-element-resizer-bottom {
\r
433 .current-resizer-is-3 #comic-element-resizer-bottom {
\r
434 background-color: #f66;
\r
436 #comic-element-resizer-top-left {
\r
440 .current-resizer-is-4 #comic-element-resizer-top-left {
\r
441 background-color: #f66;
\r
443 #comic-element-resizer-top-right {
\r
447 .current-resizer-is-5 #comic-element-resizer-top-right {
\r
448 background-color: #f66;
\r
450 #comic-element-resizer-bottom-left {
\r
454 .current-resizer-is-6 #comic-element-resizer-bottom-left {
\r
455 background-color: #f66;
\r
457 #comic-element-resizer-bottom-right {
\r
461 .current-resizer-is-7 #comic-element-resizer-bottom-right {
\r
462 background-color: #f66;
\r
465 --------------------------------------------------------------------------------------*/
\r
466 #panel-resizer-top,
\r
467 #panel-resizer-bottom {
\r
468 position: absolute;
\r
469 border: 1px outset #999;
\r
470 background-color: #eee;
\r
471 text-align: center;
\r
478 #panel-resizer-top {
\r
480 border-radius: 8px 8px 0 0;
\r
481 -o-border-radius: 8px 8px 0 0;
\r
482 -ms-border-radius: 8px 8px 0 0;
\r
483 -moz-border-radius: 8px 8px 0 0;
\r
484 -webkit-border-radius: 8px 8px 0 0;
\r
486 #panel-resizer-bottom {
\r
488 border-radius: 0 0 8px 8px;
\r
489 -o-border-radius: 0 0 8px 8px;
\r
490 -ms-border-radius: 0 0 8px 8px;
\r
491 -moz-border-radius: 0 0 8px 8px;
\r
492 -webkit-border-radius: 0 0 8px 8px;
\r
495 /* balloon-tail-mover
\r
496 --------------------------------------------------------------------------------------*/
\r
497 #balloon-tail-mover {
\r
498 position: absolute;
\r
501 font-size: 8px; /* ie */
\r
502 line-height: 8px; /* ie */
\r
503 border: 1px solid #333;
\r
504 background-color: #66f;
\r
505 margin: -5px 0 0 -5px;
\r
508 /* comic element console
\r
509 --------------------------------------------------------------------------------------*/
\r
510 #comic-element-consol-wrapper {
\r
511 position: absolute;
\r
513 #image-element-consol {
\r
517 #text-element-consol {
\r
522 #change-image-button,
\r
523 #layer-back-button,
\r
524 #layer-forward-button,
\r
525 #delete-image-button,
\r
527 #change-text-style-button,
\r
528 #hide-text-tail-button,
\r
530 #forward-text-button,
\r
531 #delete-text-button {
\r
532 text-indent: -9999px;
\r
537 background-image: url('../images/sprite.gif');
\r
538 background-repeat: no-repeat;
\r
539 background-position: 0 0;
\r
542 #hide-text-tail-button {
\r
543 background-position: -30px -30px;
\r
545 #change-image-button,
\r
546 #change-text-style-button {
\r
547 background-position: -30px 0;
\r
549 #layer-back-button,
\r
550 #back-text-button {
\r
551 background-position: -60px 0;
\r
553 #layer-forward-button,
\r
554 #forward-text-button {
\r
555 background-position: -60px -30px;
\r
557 #delete-image-button,
\r
558 #delete-text-button {
\r
559 background-position: 0 -30px;
\r
562 .console-out #comic-element-consol-wrapper-when-out {
\r
564 background-color: #333;
\r
566 .console-out #comic-element-consol-tail {
\r
567 border-width: 0 5px 10px 5px;
\r
568 border-color: transparent transparent #333 transparent;
\r
569 _border-color: #fff #fff #333 #fff;
\r
570 border-style: solid;
\r
575 position: absolute;
\r
583 --------------------------------------------------------------------------------------*/
\r
585 text-align: center;
\r
587 position: absolute;
\r
596 display: table-cell;
\r
597 vertical-align: middle;
\r
601 .text-element table,
\r
602 .text-element tbody,
\r
610 text-align: center;
\r
611 vertical-align: middle;
\r
613 .text-element table {
\r
614 table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */
\r
618 --------------------------------------------------------------------------------------*/
\r
620 position: absolute;
\r
625 border-bottom: 1px solid #999;
\r
626 background-color: #fff;
\r
627 box-shadow: 1px 4px 9px #333;
\r
628 -moz-box-shadow: 1px 4px 9px #333;
\r
629 -webkit-box-shadow: 1px 4px 9px #333;
\r
630 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
634 .window-close-button {
\r
639 text-align: center;
\r
641 padding-bottom: 6px;
\r
642 background-color: #333;
\r
644 .window-close-button {
\r
645 position: absolute;
\r
648 border-left: 1px solid #666;
\r
650 padding-right: 9px;
\r
651 border-radius: 0 8px 0 0;
\r
652 -o-border-radius: 0 8px 0 0;
\r
653 -ms-border-radius: 0 8px 0 0;
\r
654 -moz-border-radius: 0 8px 0 0;
\r
655 -webkit-border-radius: 0 8px 0 0;
\r
660 border-radius: 8px 8px 0 0;
\r
661 -o-border-radius: 8px 8px 0 0;
\r
662 -ms-border-radius: 8px 8px 0 0;
\r
663 -moz-border-radius: 8px 8px 0 0;
\r
664 -webkit-border-radius: 8px 8px 0 0;
\r
667 position: relative;
\r
668 border-left: 1px solid #aaa;
\r
669 *border-left: 1px solid #ccc;
\r
670 border-right: 1px solid #999;
\r
673 html>/**/body .window-body {
\r
674 border-left /***/: 1px solid #ccc\9;
\r
680 background-color: #333;
\r
681 position: absolute;
\r
685 .window-resize-button {
\r
686 position: absolute;
\r
689 background-image: url('../images/sprite.gif');
\r
690 background-repeat: no-repeat;
\r
691 background-position: -70px -60px;
\r
695 text-indent: -9999px;
\r
696 text-align: center;
\r
701 --------------------------------------------------------------------------------------*/
\r
707 .sidenavi-item:link {
\r
709 border-bottom: 1px solid #666;
\r
711 text-decoration: none;
\r
714 .sidenavi-item:hover {
\r
715 background-color: #ccc;
\r
716 text-decoration: none;
\r
718 .sidenavi .current {
\r
719 background-color: #666;
\r
723 _position: relative; /* for ie6 */
\r
724 margin-left: 100px;
\r
725 padding: 1em 1em 2em 1em;
\r
731 .page-content pre {
\r
732 line-height: 1.6em;
\r
736 --------------------------------------------------------------------------------------*/
\r
739 display: inline-block;
\r
741 border: 1px solid #ccc;
\r
746 .editable-text a:link,
\r
747 .editable-text a:visited,
\r
748 .editable-text a:hover,
\r
749 .editable-text a:active {
\r
752 text-decoration: none;
\r
755 background-color: #fff;
\r
757 .editable-text a:hover {
\r
758 background-color: #ccf;
\r
760 .editable-text input {
\r
763 font-family: Arial,Helvetica,sans-serif;
\r
764 background-color: #ccf;
\r
771 /* Information Window
\r
772 --------------------------------------------------------------------------------------*/
\r
773 #comic-element-infomation {
\r
774 background-color: #fff;
\r
775 position: absolute;
\r
778 #comic-element-x, #comic-element-z,
\r
779 #comic-element-y, #comic-element-a,
\r
780 #comic-element-w, #comic-element-w-percent,
\r
781 #comic-element-h, #comic-element-h-percent {
\r
782 position: absolute;
\r
795 #comic-element-w-percent,
\r
796 #comic-element-h-percent {
\r
799 #comic-element-x, #comic-element-z {
\r
802 #comic-element-y, #comic-element-a {
\r
805 #comic-element-w, #comic-element-w-percent {
\r
808 #comic-element-h, #comic-element-h-percent {
\r
811 .comic-element-attribute-label {
\r
812 display: inline-block;
\r
816 text-align: center;
\r
819 .comic-element-attribute-value {
\r
824 #comic-element-z-value,
\r
825 #comic-element-a-value {
\r
828 #comic-element-w-percent-value,
\r
829 #comic-element-h-percent-value {
\r
833 #comic-element-keep-aspect {
\r
834 position: absolute;
\r
841 border: 1px solid #ccc;
\r
844 /* Background Window
\r
845 --------------------------------------------------------------------------------------*/
\r
847 #select-bg-pattern-button,
\r
848 #reset-bg-pattern-button,
\r
850 #select-bg-color-button,
\r
851 #reset-bg-color-button {
\r
852 position: absolute;
\r
853 text-align: center;
\r
859 box-shadow: 1px 2px 3px #000;
\r
860 -moz-box-shadow: 1px 2px 3px #000;
\r
861 -webkit-box-shadow: 1px 2px 3px #000;
\r
869 #select-bg-pattern-button,
\r
870 #reset-bg-pattern-button,
\r
871 #select-bg-color-button,
\r
872 #reset-bg-color-button {
\r
873 border: 1px outset #666;
\r
878 #select-bg-pattern-button {
\r
882 #reset-bg-pattern-button {
\r
890 background-color: #66f;
\r
892 #select-bg-color-button {
\r
896 #reset-bg-color-button {
\r
904 --------------------------------------------------------------------------------------*/
\r
905 #toolbox-add-image-button,
\r
906 #toolbox-add-text-button,
\r
907 #toolbox-edit-bg-button,
\r
908 #toolbox-switch-grid,
\r
909 #toolbox-popup-help-button,
\r
910 #toolbox-post-button {
\r
911 position: absolute;
\r
914 border: 1px outset #999;
\r
917 text-align: center;
\r
919 background-color: #ccc;
\r
920 border-radius: 8px;
\r
921 -o-border-radius: 8px;
\r
922 -ms-border-radius: 8px;
\r
923 -moz-border-radius: 8px;
\r
924 -webkit-border-radius: 8px;
\r
926 #toolbox-add-image-button {
\r
929 #toolbox-add-text-button {
\r
932 #toolbox-edit-bg-button {
\r
937 #toolbox-switch-grid,
\r
938 #toolbox-popup-help-button {
\r
943 #toolbox-switch-grid {
\r
944 width: 45px !important;
\r
946 #toolbox-popup-help-button {
\r
947 width: 35px !important;
\r
948 left: 65px !important;
\r
951 #toolbox-post-button {
\r
958 --------------------------------------------------------------------------------------*/
\r
962 position: absolute;
\r
965 background-attachment: fixed;
\r
966 background-repeat: repeat;
\r
967 /* background-image: url('grid.gif'); grid用イメージはgrid使用時にjsで埋め込み */
\r
970 /*--------------------------------------------------------------------------------------
\r
974 -------------------------------------------------------------------------------------*/
\r
976 position: relative;
\r
981 position: relative;
\r
982 background-color: #333;
\r
984 .finder-header ul {
\r
986 position: absolute;
\r
994 .finder-header li {
\r
995 position: absolute;
\r
1003 .finder-header li a,
\r
1004 .finder-header li a:link
\r
1005 .finder-header li a:visited {
\r
1009 line-height: 14px;
\r
1010 padding: 16px 0 10px 20px;
\r
1014 .finder-header li a:hover {
\r
1015 text-decoration: none;
\r
1016 background-color: #66f;
\r
1021 .finder-header .button {
\r
1022 position: absolute;
\r
1026 line-height: 24px;
\r
1028 .finder-sidebar-switch {
\r
1031 .finder-style-switch {
\r
1034 .finder-action-switch {
\r
1039 --------------------------------------------------------------------------------------*/
\r
1041 position: absolute;
\r
1046 border-bottom: 1px solid #ccc;
\r
1048 .finder-icon-thumbnail {
\r
1051 position: absolute;
\r
1055 background-position: 50% 50%;
\r
1056 background-repeat: no-repeat;
\r
1058 .finder-icon .file-type-1 {
\r
1059 background-image: url('../images/folder_general.png');
\r
1061 .finder-icon .file-type-2 {
\r
1062 background-image: url('../images/folder_album.png');
\r
1064 .finder-icon .file-type-11 {
\r
1065 background-image: url('../images/cabinet.png');
\r
1069 background-image: url('../images/folder_album.png');
\r
1072 * http://www.iconfinder.com/icondetails/18336/64/folder_image_photo_icon
\r
1073 * http://www.iconfinder.com/icondetails/27849/48/folder_yellow_icon
\r
1074 * http://www.iconfinder.com/icondetails/45347/64/cabinet_icon
1076 .finder-icon-filename {
\r
1077 position: absolute;
\r