9 #entrance, #backyard, #debug {
\r
15 --------------------------------------------------------------------------------------*/
\r
28 /*--------------------------------------------------------------------------------------
\r
32 -------------------------------------------------------------------------------------*/
\r
46 -khtml-opacity: 0.5;
\r
48 .pettanr-ActiveX-enabled #overlay-shadow {
\r
49 filter: alpha(opacity=50);
\r
50 -ms-filter: alpha(opacity=50);
\r
52 .pettanr-ActiveX-disabled #overlay-shadow {
\r
53 background: transparent url( black_50pct.png) repeat 0 0;
\r
54 _background: url( black_50pct.gif) repeat 0 0;
\r
57 #overlay-close-button {
\r
58 border: 2px solid #f00;
\r
73 -o-border-radius: 5px;
\r
74 -ms-border-radius: 5px;
\r
75 -moz-border-radius: 5px;
\r
76 -webkit-border-radius: 5px;
\r
80 --------------------------------------------------------------------------------------*/
\r
81 #output-console-wrapper {
\r
85 background-color: #fff;
\r
90 border: 1px outset #ccc;
\r
94 --------------------------------------------------------------------------------------*/
\r
95 #comic-console-wrapper {
\r
99 background-color: #fff;
\r
104 .comic-console-label {
\r
105 display: inline-block;
\r
111 .comic-console-value {
\r
115 .comic-console-line {
\r
117 padding-bottom: 5px;
\r
118 border-bottom: 1px solid #ccc;
\r
120 #comic-console-title,
\r
121 #comic-console-height,
\r
122 #comic-console-width,
\r
123 #comic-console-editable,
\r
124 #comic-console-visible {}
\r
125 #comic-console-title-value { width: 140px; text-align:left;}
\r
126 #comic-console-height-value {}
\r
127 #comic-console-width-value {}
\r
128 #comic-console-editable-value {}
\r
129 #comic-console-visible-value {}
\r
131 #comic-console-button-container {
\r
133 position: relative;
\r
136 #comic-console-post-button {
\r
138 position: absolute;
\r
142 #comic-console-cancel-button {
\r
144 position: absolute;
\r
150 --------------------------------------------------------------------------------------*/
\r
151 #upload-console-wrapper {
\r
152 position: absolute;
\r
155 background-color: #fff;
\r
160 .upload-console-label {
\r
161 display: inline-block;
\r
167 .upload-console-value {
\r
171 .upload-console-line {
\r
173 padding-bottom: 5px;
\r
174 border-bottom: 1px solid #ccc;
\r
176 #upload-console-button-container {
\r
178 position: relative;
\r
182 #upload-console-post-button {
\r
184 position: absolute;
\r
188 #upload-console-cancel-button {
\r
190 position: absolute;
\r
194 /*--------------------------------------------------------------------------------------
\r
198 -------------------------------------------------------------------------------------*/
\r
204 /*--------------------------------------------------------------------------------------
\r
208 -------------------------------------------------------------------------------------*/
\r
211 background-color: #f5f5f5;
\r
215 --------------------------------------------------------------------------------------*/
\r
216 #speach-editor-wrapper {
\r
217 position: absolute;
\r
219 #speach-editor-wrapper form {
\r
226 border: 1px outset #ccc;
\r
229 #speach-edit-complete-button {
\r
230 margin: 10px auto 0;
\r
234 --------------------------------------------------------------------------------------*/
\r
235 #image-gruop-wrapper {
\r
236 position: absolute;
\r
240 #image-icon-container {
\r
241 position: absolute;
\r
246 background-color: #fff;
\r
247 border: #fff solid;
\r
250 #image-gruop-button {
\r
252 position: absolute;
\r
257 .image-gruop-item {
\r
260 position: absolute;
\r
263 text-align: center;
\r
265 .image-gruop-item .reversible-image-container {
\r
269 .image-gruop-item .reversible-image-container img {
\r
273 .image-gruop-item-title {
\r
274 position: absolute;
\r
277 text-align: center;
\r
284 --------------------------------------------------------------------------------------*/
\r
286 position: absolute;
\r
291 background-color: #fff;
\r
292 border-bottom: 1px solid #666;
\r
293 box-shadow: 0 4px 9px #333;
\r
294 -moz-box-shadow: 0 4px 9px #333;
\r
295 -webkit-box-shadow: 0 4px 9px #333;
\r
296 filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);
\r
299 .menu-bar-item-focus {
\r
300 position: absolute;
\r
305 .menu-bar-item div,
\r
306 .menu-bar-item-focus div {
\r
310 line-height: 30px;
\r
311 padding-left: 0.6em;
\r
314 .menu-bar-item-focus div {
\r
315 background-color: #66f;
\r
318 .menu-bar-item ul {
\r
321 .menu-bar-item-focus ul {
\r
322 position: absolute;
\r
328 background-color: #fff;
\r
330 border: 1px solid #ccc;
\r
331 box-shadow: 1px 4px 9px #333;
\r
332 -moz-box-shadow: 1px 4px 9px #333;
\r
333 -webkit-box-shadow: 1px 4px 9px #333;
\r
334 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
336 .menu-bar-item-focus li {
\r
343 .menu-bar-item-focus li.disabled {
\r
346 .menu-bar-item-focus a,
\r
347 .menu-bar-item-focus a:link,
\r
348 .menu-bar-item-focus a:visited {
\r
350 position: relative;
\r
357 .menu-bar-item-focus a:hover {
\r
359 background-color: #ccf;
\r
360 text-decoration: none;
\r
363 .menu-bar-item-focus li.disabled a,
\r
364 .menu-bar-item-focus li.disabled a:link,
\r
365 .menu-bar-item-focus li.disabled a:visited,
\r
366 .menu-bar-item-focus li.disabled a:active,
\r
367 .menu-bar-item-focus li.disabled a:hover {
\r
369 background-color: #fff;
\r
372 .menu-bar-item-focus span {
\r
373 position: absolute;
\r
382 .menu-bar-item-focus kbd {
\r
383 position: absolute;
\r
392 .menu-bar-item-focus li.separator {
\r
396 border-top: 1px solid #ccc;
\r
402 --------------------------------------------------------------------------------------*/
\r
403 #whiteGlass-container {
\r
404 position: absolute;
\r
410 #whiteGlass-container div {
\r
411 position: absolute;
\r
412 background-color: #fff;
\r
415 -khtml-opacity: 0.7;
\r
417 .pettanr-ActiveX-enabled #whiteGlass-container div {
\r
418 filter: alpha(opacity=70);
\r
419 -ms-filter: alpha(opacity=70);
\r
421 .pettanr-ActiveX-disabled #whiteGlass-container div {
\r
422 background: transparent url( white_70pct.png) repeat 0 0;
\r
438 #whiteGlass-right {
\r
444 #whiteGlass-bottom {
\r
452 --------------------------------------------------------------------------------------*/
\r
453 #panel-tools-container {
\r
454 position: absolute;
\r
455 border: 2px solid #333;
\r
458 /* mouse-operation-catcher
\r
459 --------------------------------------------------------------------------------------*/
\r
460 #mouse-operation-catcher {
\r
461 position: absolute;
\r
465 height: 100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */
\r
467 .pettanr-ActiveX-enabled #mouse-operation-catcher {
\r
468 background-color: #fff;
\r
469 filter: alpha( opacity=0);
\r
470 -ms-filter: alpha( opacity=0);
\r
473 * ie では、背景を設定しないと、 mousemove が働かない。
\r
474 * activeX 有効の場合は背景を着色して filter で透明に。
\r
475 * activeX 無効の場合は透明 gif を使用
\r
476 * background: url(4x4.gif) fixed repeat;
\r
478 .pettanr-ActiveX-disabled #mouse-operation-catcher {
\r
479 background: url( opacity0.gif) fixed repeat;
\r
484 --------------------------------------------------------------------------------------*/
\r
485 #comic-element-container {
\r
486 position: absolute;
\r
489 .comic-element-wrapper {
\r
490 position: absolute;
\r
492 #comic-element-container img {
\r
495 position: absolute;
\r
500 /* comic-element-resizer
\r
501 --------------------------------------------------------------------------------------*/
\r
502 #comic-element-resizer-container {
\r
503 position: absolute;
\r
504 border: 1px solid #999;
\r
506 .comic-element-resizer {
\r
507 position: absolute;
\r
510 font-size: 8px; /* ie */
\r
511 line-height: 8px; /* ie */
\r
512 border: 1px solid #333;
\r
513 background-color: #fff;
\r
518 #comic-element-resizer-top {
\r
522 .current-resizer-is-0 #comic-element-resizer-top {
\r
523 background-color: #f66;
\r
525 #comic-element-resizer-left {
\r
529 .current-resizer-is-1 #comic-element-resizer-left {
\r
530 background-color: #f66;
\r
532 #comic-element-resizer-right {
\r
536 .current-resizer-is-2 #comic-element-resizer-right {
\r
537 background-color: #f66;
\r
539 #comic-element-resizer-bottom {
\r
543 .current-resizer-is-3 #comic-element-resizer-bottom {
\r
544 background-color: #f66;
\r
546 #comic-element-resizer-top-left {
\r
550 .current-resizer-is-4 #comic-element-resizer-top-left {
\r
551 background-color: #f66;
\r
553 #comic-element-resizer-top-right {
\r
557 .current-resizer-is-5 #comic-element-resizer-top-right {
\r
558 background-color: #f66;
\r
560 #comic-element-resizer-bottom-left {
\r
564 .current-resizer-is-6 #comic-element-resizer-bottom-left {
\r
565 background-color: #f66;
\r
567 #comic-element-resizer-bottom-right {
\r
571 .current-resizer-is-7 #comic-element-resizer-bottom-right {
\r
572 background-color: #f66;
\r
575 --------------------------------------------------------------------------------------*/
\r
576 #panel-resizer-top,
\r
577 #panel-resizer-bottom {
\r
578 position: absolute;
\r
579 border: 1px outset #999;
\r
580 background-color: #eee;
\r
581 text-align: center;
\r
588 #panel-resizer-top {
\r
590 border-radius: 8px 8px 0 0;
\r
591 -o-border-radius: 8px 8px 0 0;
\r
592 -ms-border-radius: 8px 8px 0 0;
\r
593 -moz-border-radius: 8px 8px 0 0;
\r
594 -webkit-border-radius: 8px 8px 0 0;
\r
596 #panel-resizer-bottom {
\r
598 border-radius: 0 0 8px 8px;
\r
599 -o-border-radius: 0 0 8px 8px;
\r
600 -ms-border-radius: 0 0 8px 8px;
\r
601 -moz-border-radius: 0 0 8px 8px;
\r
602 -webkit-border-radius: 0 0 8px 8px;
\r
605 /* balloon-tail-mover
\r
606 --------------------------------------------------------------------------------------*/
\r
607 #balloon-tail-mover {
\r
608 position: absolute;
\r
611 font-size: 8px; /* ie */
\r
612 line-height: 8px; /* ie */
\r
613 border: 1px solid #333;
\r
614 background-color: #66f;
\r
615 margin: -5px 0 0 -5px;
\r
618 /* comic element console
\r
619 --------------------------------------------------------------------------------------*/
\r
620 #comic-element-consol-wrapper {
\r
621 position: absolute;
\r
623 #image-element-consol {
\r
627 #text-element-consol {
\r
632 #change-image-button,
\r
633 #layer-back-button,
\r
634 #layer-forward-button,
\r
635 #delete-image-button,
\r
637 #change-text-style-button,
\r
638 #hide-text-tail-button,
\r
640 #forward-text-button,
\r
641 #delete-text-button {
\r
642 text-indent: -9999px;
\r
647 background-image: url('../images/sprite.gif');
\r
648 background-repeat: no-repeat;
\r
649 background-position: 0 0;
\r
652 #hide-text-tail-button {
\r
653 background-position: -30px -30px;
\r
655 #change-image-button,
\r
656 #change-text-style-button {
\r
657 background-position: -30px 0;
\r
659 #layer-back-button,
\r
660 #back-text-button {
\r
661 background-position: -60px 0;
\r
663 #layer-forward-button,
\r
664 #forward-text-button {
\r
665 background-position: -60px -30px;
\r
667 #delete-image-button,
\r
668 #delete-text-button {
\r
669 background-position: 0 -30px;
\r
672 .console-out #comic-element-consol-wrapper-when-out {
\r
674 background-color: #333;
\r
676 .console-out #comic-element-consol-tail {
\r
677 border-width: 0 5px 10px 5px;
\r
678 border-color: transparent transparent #333 transparent;
\r
679 _border-color: #fff #fff #333 #fff;
\r
680 border-style: solid;
\r
685 position: absolute;
\r
693 --------------------------------------------------------------------------------------*/
\r
695 text-align: center;
\r
697 position: absolute;
\r
706 display: table-cell;
\r
707 vertical-align: middle;
\r
711 .text-element table,
\r
712 .text-element tbody,
\r
720 text-align: center;
\r
721 vertical-align: middle;
\r
723 .text-element table {
\r
724 table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */
\r
728 --------------------------------------------------------------------------------------*/
\r
730 position: absolute;
\r
735 border-bottom: 1px solid #999;
\r
736 background-color: #fff;
\r
737 box-shadow: 1px 4px 9px #333;
\r
738 -moz-box-shadow: 1px 4px 9px #333;
\r
739 -webkit-box-shadow: 1px 4px 9px #333;
\r
740 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
744 .window-close-button {
\r
749 text-align: center;
\r
751 padding-bottom: 6px;
\r
752 background-color: #333;
\r
754 .window-close-button {
\r
755 position: absolute;
\r
758 border-left: 1px solid #666;
\r
760 padding-right: 9px;
\r
761 border-radius: 0 8px 0 0;
\r
762 -o-border-radius: 0 8px 0 0;
\r
763 -ms-border-radius: 0 8px 0 0;
\r
764 -moz-border-radius: 0 8px 0 0;
\r
765 -webkit-border-radius: 0 8px 0 0;
\r
770 border-radius: 8px 8px 0 0;
\r
771 -o-border-radius: 8px 8px 0 0;
\r
772 -ms-border-radius: 8px 8px 0 0;
\r
773 -moz-border-radius: 8px 8px 0 0;
\r
774 -webkit-border-radius: 8px 8px 0 0;
\r
777 position: relative;
\r
778 border-left: 1px solid #aaa;
\r
779 *border-left: 1px solid #ccc;
\r
780 border-right: 1px solid #999;
\r
783 html>/**/body .window-body {
\r
784 border-left /***/: 1px solid #ccc\9;
\r
790 background-color: #333;
\r
791 position: absolute;
\r
795 .window-resize-button {
\r
796 position: absolute;
\r
799 background-image: url('../images/sprite.gif');
\r
800 background-repeat: no-repeat;
\r
801 background-position: -70px -60px;
\r
805 text-indent: -9999px;
\r
806 text-align: center;
\r
811 --------------------------------------------------------------------------------------*/
\r
817 .sidenavi-item:link {
\r
819 border-bottom: 1px solid #666;
\r
821 text-decoration: none;
\r
824 .sidenavi-item:hover {
\r
825 background-color: #ccc;
\r
826 text-decoration: none;
\r
828 .sidenavi .current {
\r
829 background-color: #666;
\r
833 _position: relative; /* for ie6 */
\r
834 margin-left: 100px;
\r
835 padding: 1em 1em 2em 1em;
\r
842 --------------------------------------------------------------------------------------*/
\r
845 display: inline-block;
\r
847 border: 1px solid #ccc;
\r
852 .editable-text a:link,
\r
853 .editable-text a:visited,
\r
854 .editable-text a:hover,
\r
855 .editable-text a:active {
\r
858 text-decoration: none;
\r
861 background-color: #fff;
\r
863 .editable-text a:hover {
\r
864 background-color: #ccf;
\r
866 .editable-text input {
\r
869 font-family: Arial,Helvetica,sans-serif;
\r
870 background-color: #ccf;
\r
877 /* Information Window
\r
878 --------------------------------------------------------------------------------------*/
\r
879 #comic-element-infomation {
\r
880 background-color: #fff;
\r
881 position: absolute;
\r
884 #comic-element-x, #comic-element-z,
\r
885 #comic-element-y, #comic-element-a,
\r
886 #comic-element-w, #comic-element-w-percent,
\r
887 #comic-element-h, #comic-element-h-percent {
\r
888 position: absolute;
\r
901 #comic-element-w-percent,
\r
902 #comic-element-h-percent {
\r
905 #comic-element-x, #comic-element-z {
\r
908 #comic-element-y, #comic-element-a {
\r
911 #comic-element-w, #comic-element-w-percent {
\r
914 #comic-element-h, #comic-element-h-percent {
\r
917 .comic-element-attribute-label {
\r
918 display: inline-block;
\r
922 text-align: center;
\r
925 .comic-element-attribute-value {
\r
930 #comic-element-z-value,
\r
931 #comic-element-a-value {
\r
934 #comic-element-w-percent-value,
\r
935 #comic-element-h-percent-value {
\r
939 #comic-element-keep-aspect {
\r
940 position: absolute;
\r
947 border: 1px solid #ccc;
\r
950 /* Background Window
\r
951 --------------------------------------------------------------------------------------*/
\r
953 #select-bg-pattern-button,
\r
954 #reset-bg-pattern-button,
\r
956 #select-bg-color-button,
\r
957 #reset-bg-color-button {
\r
958 position: absolute;
\r
959 text-align: center;
\r
965 box-shadow: 1px 2px 3px #000;
\r
966 -moz-box-shadow: 1px 2px 3px #000;
\r
967 -webkit-box-shadow: 1px 2px 3px #000;
\r
975 #select-bg-pattern-button,
\r
976 #reset-bg-pattern-button,
\r
977 #select-bg-color-button,
\r
978 #reset-bg-color-button {
\r
979 border: 1px outset #666;
\r
984 #select-bg-pattern-button {
\r
988 #reset-bg-pattern-button {
\r
996 background-color: #66f;
\r
998 #select-bg-color-button {
\r
1002 #reset-bg-color-button {
\r
1009 /* Tool-box Window
\r
1010 --------------------------------------------------------------------------------------*/
\r
1011 #toolbox-add-image-button,
\r
1012 #toolbox-add-text-button,
\r
1013 #toolbox-edit-bg-button,
\r
1014 #toolbox-switch-grid,
\r
1015 #toolbox-popup-help-button,
\r
1016 #toolbox-post-button {
\r
1017 position: absolute;
\r
1020 border: 1px outset #999;
\r
1022 line-height: 40px;
\r
1023 text-align: center;
\r
1025 background-color: #ccc;
\r
1026 border-radius: 8px;
\r
1027 -o-border-radius: 8px;
\r
1028 -ms-border-radius: 8px;
\r
1029 -moz-border-radius: 8px;
\r
1030 -webkit-border-radius: 8px;
\r
1032 #toolbox-add-image-button {
\r
1035 #toolbox-add-text-button {
\r
1038 #toolbox-edit-bg-button {
\r
1041 line-height: 30px;
\r
1043 #toolbox-switch-grid,
\r
1044 #toolbox-popup-help-button {
\r
1047 line-height: 30px;
\r
1049 #toolbox-switch-grid {
\r
1050 width: 45px !important;
\r
1052 #toolbox-popup-help-button {
\r
1053 width: 35px !important;
\r
1054 left: 65px !important;
\r
1057 #toolbox-post-button {
\r
1060 line-height: 50px;
\r
1064 --------------------------------------------------------------------------------------*/
\r
1068 position: absolute;
\r
1071 background-attachment: fixed;
\r
1072 background-repeat: repeat;
\r
1073 /* background-image: url('grid.gif'); grid用イメージはgrid使用時にjsで埋め込み */
\r
1076 /*--------------------------------------------------------------------------------------
\r
1080 -------------------------------------------------------------------------------------*/
\r
1082 position: relative;
\r
1087 position: relative;
\r
1088 background-color: #333;
\r
1090 .finder-header ul {
\r
1092 position: absolute;
\r
1096 line-height: 40px;
\r
1100 .finder-header li {
\r
1101 position: absolute;
\r
1109 .finder-header li a,
\r
1110 .finder-header li a:link,
\r
1111 .finder-header li a:visited {
\r
1115 line-height: 14px;
\r
1116 padding: 16px 0 10px 20px;
\r
1121 .finder-header li a:hover {
\r
1122 text-decoration: none;
\r
1123 background-color: #66f;
\r
1128 .finder-header .button {
\r
1129 position: absolute;
\r
1133 line-height: 24px;
\r
1135 .finder-sidebar-switch {
\r
1138 .finder-style-switch {
\r
1141 .finder-action-switch {
\r
1146 --------------------------------------------------------------------------------------*/
\r
1148 position: absolute;
\r
1153 border-bottom: 1px solid #ccc;
\r
1155 .finder-icon-thumbnail {
\r
1158 position: absolute;
\r
1162 background-position: 50% 50%;
\r
1163 background-repeat: no-repeat;
\r
1165 .finder-icon-thumbnail {
\r
1166 background-image: url('../images/sprite.gif');
\r
1169 .finder-icon .file-type-folder {
\r
1170 background-position: 0 -80px;
\r
1172 .finder-icon .file-type-album {
\r
1173 background-image: url('../images/folder_album.png');
\r
1175 .finder-icon .file-type-author {
\r
1176 background-position: -70px -80px;
\r
1178 .finder-icon .file-type-comic {
\r
1179 background-position: 0 -150px;
\r
1181 .finder-icon .file-type-cabinet {
\r
1182 background-position: -70px -150px;
\r
1184 .finder-icon .file-type-panel {
\r
1185 background-position: 0 -220px;
\r
1187 .finder-icon .file-type-artist {
\r
1188 background-position: -70px -220px;
\r
1190 .finder-icon .file-type-balloon {
\r
1191 background-position: 0 -290px;
\r
1193 .finder-icon .file-type-charactor {
\r
1194 background-position: -70px -290px;
\r
1197 background-image: url('../images/folder_album.png');
\r
1200 * http://www.iconfinder.com/icondetails/18336/64/folder_image_photo_icon
\r
1201 * http://www.iconfinder.com/icondetails/27849/48/folder_yellow_icon
\r
1202 * http://www.iconfinder.com/icondetails/45347/64/cabinet_icon
\r
1203 * http://www.iconfinder.com/icondetails/3659/64/broken_file_icon
\r
1204 * http://www.iconfinder.com/icondetails/44733/64/address_book_icon
1206 .finder-icon-filename {
\r
1207 position: absolute;
\r