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
95 --------------------------------------------------------------------------------------*/
\r
99 padding: 20px 20px 0;
\r
100 background-color: #fff;
\r
103 border-bottom: 2px solid #666;
\r
105 text-align: center;
\r
108 padding-bottom: 8px;
\r
109 margin-bottom: 10px;
\r
114 .console-button-container {
\r
116 border-top: 2px solid #666;
\r
120 .console-submit-button {
\r
126 .console-cancel-button {
\r
130 margin-right: 30px;
\r
132 .console-progress {
\r
134 text-align: center;
\r
143 --------------------------------------------------------------------------------------*/
\r
147 .comic-console-label {
\r
148 display: inline-block;
\r
154 .comic-console-value {
\r
158 .comic-console-line {
\r
160 padding-bottom: 5px;
\r
161 border-bottom: 1px solid #ccc;
\r
163 #comic-console-title,
\r
164 #comic-console-height,
\r
165 #comic-console-width,
\r
166 #comic-console-editable,
\r
167 #comic-console-visible {}
\r
168 #comic-console-title-value { width: 180px; text-align:left;}
\r
169 #comic-console-height-value {}
\r
170 #comic-console-width-value {}
\r
171 #comic-console-editable-value {}
\r
172 #comic-console-visible-value {}
\r
174 #comic-console-button-container {
\r
176 position: relative;
\r
182 --------------------------------------------------------------------------------------*/
\r
186 /*--------------------------------------------------------------------------------------
\r
190 -------------------------------------------------------------------------------------*/
\r
196 /*--------------------------------------------------------------------------------------
\r
200 -------------------------------------------------------------------------------------*/
\r
203 background-color: #f5f5f5;
\r
207 --------------------------------------------------------------------------------------*/
\r
208 #speach-editor-wrapper {
\r
209 position: absolute;
\r
211 #speach-editor-wrapper form {
\r
218 border: 1px outset #ccc;
\r
221 #speach-edit-complete-button {
\r
222 margin: 10px auto 0;
\r
226 --------------------------------------------------------------------------------------*/
\r
227 #image-gruop-wrapper {
\r
228 position: absolute;
\r
232 #image-icon-container {
\r
233 position: absolute;
\r
238 background-color: #fff;
\r
239 border: #fff solid;
\r
242 #image-gruop-button {
\r
244 position: absolute;
\r
249 .image-gruop-item {
\r
252 position: absolute;
\r
255 text-align: center;
\r
257 .image-gruop-item .reversible-image-container {
\r
261 .image-gruop-item .reversible-image-container img {
\r
265 .image-gruop-item-title {
\r
266 position: absolute;
\r
269 text-align: center;
\r
276 --------------------------------------------------------------------------------------*/
\r
278 position: absolute;
\r
283 background-color: #fff;
\r
284 border-bottom: 1px solid #666;
\r
285 box-shadow: 0 4px 9px #333;
\r
286 -moz-box-shadow: 0 4px 9px #333;
\r
287 -webkit-box-shadow: 0 4px 9px #333;
\r
288 filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);
\r
291 .menu-bar-item-focus {
\r
292 position: absolute;
\r
297 .menu-bar-item div,
\r
298 .menu-bar-item-focus div {
\r
302 line-height: 30px;
\r
303 padding-left: 0.6em;
\r
306 .menu-bar-item-focus div {
\r
307 background-color: #66f;
\r
310 .menu-bar-item ul {
\r
313 .menu-bar-item-focus ul {
\r
314 position: absolute;
\r
320 background-color: #fff;
\r
322 border: 1px solid #ccc;
\r
323 box-shadow: 1px 4px 9px #333;
\r
324 -moz-box-shadow: 1px 4px 9px #333;
\r
325 -webkit-box-shadow: 1px 4px 9px #333;
\r
326 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
328 .menu-bar-item-focus li {
\r
335 .menu-bar-item-focus li.disabled {
\r
338 .menu-bar-item-focus a,
\r
339 .menu-bar-item-focus a:link,
\r
340 .menu-bar-item-focus a:visited {
\r
342 position: relative;
\r
349 .menu-bar-item-focus a:hover {
\r
351 background-color: #ccf;
\r
352 text-decoration: none;
\r
355 .menu-bar-item-focus li.disabled a,
\r
356 .menu-bar-item-focus li.disabled a:link,
\r
357 .menu-bar-item-focus li.disabled a:visited,
\r
358 .menu-bar-item-focus li.disabled a:active,
\r
359 .menu-bar-item-focus li.disabled a:hover {
\r
361 background-color: #fff;
\r
364 .menu-bar-item-focus span {
\r
365 position: absolute;
\r
374 .menu-bar-item-focus kbd {
\r
375 position: absolute;
\r
384 .menu-bar-item-focus li.separator {
\r
388 border-top: 1px solid #ccc;
\r
394 --------------------------------------------------------------------------------------*/
\r
395 #whiteGlass-container {
\r
396 position: absolute;
\r
402 #whiteGlass-container div {
\r
403 position: absolute;
\r
404 background-color: #fff;
\r
407 -khtml-opacity: 0.7;
\r
409 .pettanr-ActiveX-enabled #whiteGlass-container div {
\r
410 filter: alpha(opacity=70);
\r
411 -ms-filter: alpha(opacity=70);
\r
413 .pettanr-ActiveX-disabled #whiteGlass-container div {
\r
414 background: transparent url( white_70pct.png) repeat 0 0;
\r
430 #whiteGlass-right {
\r
436 #whiteGlass-bottom {
\r
444 --------------------------------------------------------------------------------------*/
\r
445 #panel-tools-container {
\r
446 position: absolute;
\r
447 border: 2px solid #333;
\r
450 /* mouse-operation-catcher
\r
451 --------------------------------------------------------------------------------------*/
\r
452 #mouse-operation-catcher {
\r
453 position: absolute;
\r
457 height: 100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */
\r
459 .pettanr-ActiveX-enabled #mouse-operation-catcher {
\r
460 background-color: #fff;
\r
461 filter: alpha( opacity=0);
\r
462 -ms-filter: alpha( opacity=0);
\r
465 * ie では、背景を設定しないと、 mousemove が働かない。
\r
466 * activeX 有効の場合は背景を着色して filter で透明に。
\r
467 * activeX 無効の場合は透明 gif を使用
\r
468 * background: url(4x4.gif) fixed repeat;
\r
470 .pettanr-ActiveX-disabled #mouse-operation-catcher {
\r
471 background: url( opacity0.gif) fixed repeat;
\r
476 --------------------------------------------------------------------------------------*/
\r
477 #comic-element-container {
\r
478 position: absolute;
\r
481 .comic-element-wrapper {
\r
482 position: absolute;
\r
484 #comic-element-container img {
\r
487 position: absolute;
\r
492 /* comic-element-resizer
\r
493 --------------------------------------------------------------------------------------*/
\r
494 #comic-element-resizer-container {
\r
495 position: absolute;
\r
496 border: 1px solid #999;
\r
498 .comic-element-resizer {
\r
499 position: absolute;
\r
502 font-size: 8px; /* ie */
\r
503 line-height: 8px; /* ie */
\r
504 border: 1px solid #333;
\r
505 background-color: #fff;
\r
510 #comic-element-resizer-top {
\r
514 .current-resizer-is-0 #comic-element-resizer-top {
\r
515 background-color: #f66;
\r
517 #comic-element-resizer-left {
\r
521 .current-resizer-is-1 #comic-element-resizer-left {
\r
522 background-color: #f66;
\r
524 #comic-element-resizer-right {
\r
528 .current-resizer-is-2 #comic-element-resizer-right {
\r
529 background-color: #f66;
\r
531 #comic-element-resizer-bottom {
\r
535 .current-resizer-is-3 #comic-element-resizer-bottom {
\r
536 background-color: #f66;
\r
538 #comic-element-resizer-top-left {
\r
542 .current-resizer-is-4 #comic-element-resizer-top-left {
\r
543 background-color: #f66;
\r
545 #comic-element-resizer-top-right {
\r
549 .current-resizer-is-5 #comic-element-resizer-top-right {
\r
550 background-color: #f66;
\r
552 #comic-element-resizer-bottom-left {
\r
556 .current-resizer-is-6 #comic-element-resizer-bottom-left {
\r
557 background-color: #f66;
\r
559 #comic-element-resizer-bottom-right {
\r
563 .current-resizer-is-7 #comic-element-resizer-bottom-right {
\r
564 background-color: #f66;
\r
567 --------------------------------------------------------------------------------------*/
\r
568 #panel-resizer-top,
\r
569 #panel-resizer-bottom {
\r
570 position: absolute;
\r
571 border: 1px outset #999;
\r
572 background-color: #eee;
\r
573 text-align: center;
\r
580 #panel-resizer-top {
\r
582 border-radius: 8px 8px 0 0;
\r
583 -o-border-radius: 8px 8px 0 0;
\r
584 -ms-border-radius: 8px 8px 0 0;
\r
585 -moz-border-radius: 8px 8px 0 0;
\r
586 -webkit-border-radius: 8px 8px 0 0;
\r
588 #panel-resizer-bottom {
\r
590 border-radius: 0 0 8px 8px;
\r
591 -o-border-radius: 0 0 8px 8px;
\r
592 -ms-border-radius: 0 0 8px 8px;
\r
593 -moz-border-radius: 0 0 8px 8px;
\r
594 -webkit-border-radius: 0 0 8px 8px;
\r
597 /* balloon-tail-mover
\r
598 --------------------------------------------------------------------------------------*/
\r
599 #balloon-tail-mover {
\r
600 position: absolute;
\r
603 font-size: 8px; /* ie */
\r
604 line-height: 8px; /* ie */
\r
605 border: 1px solid #333;
\r
606 background-color: #66f;
\r
607 margin: -5px 0 0 -5px;
\r
610 /* comic element console
\r
611 --------------------------------------------------------------------------------------*/
\r
612 #comic-element-consol-wrapper {
\r
613 position: absolute;
\r
615 #image-element-consol {
\r
619 #text-element-consol {
\r
624 #change-image-button,
\r
625 #layer-back-button,
\r
626 #layer-forward-button,
\r
627 #delete-image-button,
\r
629 #change-text-style-button,
\r
630 #hide-text-tail-button,
\r
632 #forward-text-button,
\r
633 #delete-text-button {
\r
634 text-indent: -9999px;
\r
639 background-image: url('sprite.gif');
\r
640 background-repeat: no-repeat;
\r
641 background-position: 0 0;
\r
644 #hide-text-tail-button {
\r
645 background-position: -30px -30px;
\r
647 #change-image-button,
\r
648 #change-text-style-button {
\r
649 background-position: -30px 0;
\r
651 #layer-back-button,
\r
652 #back-text-button {
\r
653 background-position: -60px 0;
\r
655 #layer-forward-button,
\r
656 #forward-text-button {
\r
657 background-position: -60px -30px;
\r
659 #delete-image-button,
\r
660 #delete-text-button {
\r
661 background-position: 0 -30px;
\r
664 .console-out #comic-element-consol-wrapper-when-out {
\r
666 background-color: #333;
\r
668 .console-out #comic-element-consol-tail {
\r
669 border-width: 0 5px 10px 5px;
\r
670 border-color: transparent transparent #333 transparent;
\r
671 _border-color: #fff #fff #333 #fff;
\r
672 border-style: solid;
\r
677 position: absolute;
\r
685 --------------------------------------------------------------------------------------*/
\r
687 text-align: center;
\r
689 position: absolute;
\r
698 display: table-cell;
\r
699 vertical-align: middle;
\r
703 .text-element table,
\r
704 .text-element tbody,
\r
712 text-align: center;
\r
713 vertical-align: middle;
\r
715 .text-element table {
\r
716 table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */
\r
720 --------------------------------------------------------------------------------------*/
\r
722 position: absolute;
\r
727 border-bottom: 1px solid #999;
\r
728 background-color: #fff;
\r
729 box-shadow: 1px 4px 9px #333;
\r
730 -moz-box-shadow: 1px 4px 9px #333;
\r
731 -webkit-box-shadow: 1px 4px 9px #333;
\r
732 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
736 .window-close-button {
\r
741 text-align: center;
\r
743 padding-bottom: 6px;
\r
744 background-color: #333;
\r
746 .window-close-button {
\r
747 position: absolute;
\r
750 border-left: 1px solid #666;
\r
752 padding-right: 9px;
\r
753 border-radius: 0 8px 0 0;
\r
754 -o-border-radius: 0 8px 0 0;
\r
755 -ms-border-radius: 0 8px 0 0;
\r
756 -moz-border-radius: 0 8px 0 0;
\r
757 -webkit-border-radius: 0 8px 0 0;
\r
762 border-radius: 8px 8px 0 0;
\r
763 -o-border-radius: 8px 8px 0 0;
\r
764 -ms-border-radius: 8px 8px 0 0;
\r
765 -moz-border-radius: 8px 8px 0 0;
\r
766 -webkit-border-radius: 8px 8px 0 0;
\r
769 position: relative;
\r
770 border-left: 1px solid #aaa;
\r
771 *border-left: 1px solid #ccc;
\r
772 border-right: 1px solid #999;
\r
775 html>/**/body .window-body {
\r
776 border-left /***/: 1px solid #ccc\9;
\r
782 background-color: #333;
\r
783 position: absolute;
\r
787 .window-resize-button {
\r
788 position: absolute;
\r
791 background-image: url('sprite.gif');
\r
792 background-repeat: no-repeat;
\r
793 background-position: -70px -60px;
\r
797 text-indent: -9999px;
\r
798 text-align: center;
\r
803 --------------------------------------------------------------------------------------*/
\r
809 .sidenavi-item:link {
\r
811 border-bottom: 1px solid #666;
\r
813 text-decoration: none;
\r
816 .sidenavi-item:hover {
\r
817 background-color: #ccc;
\r
818 text-decoration: none;
\r
820 .sidenavi .current {
\r
821 background-color: #666;
\r
825 _position: relative; /* for ie6 */
\r
826 margin-left: 100px;
\r
827 padding: 1em 1em 2em 1em;
\r
834 --------------------------------------------------------------------------------------*/
\r
837 display: inline-block;
\r
839 border: 1px solid #ccc;
\r
844 .editable-text a:link,
\r
845 .editable-text a:visited,
\r
846 .editable-text a:hover,
\r
847 .editable-text a:active {
\r
850 text-decoration: none;
\r
853 background-color: #fff;
\r
855 .editable-text a:hover {
\r
856 background-color: #ccf;
\r
858 .editable-text input {
\r
861 font-family: Arial,Helvetica,sans-serif;
\r
862 background-color: #ccf;
\r
869 /* Information Window
\r
870 --------------------------------------------------------------------------------------*/
\r
871 #comic-element-infomation {
\r
872 background-color: #fff;
\r
873 position: absolute;
\r
876 #comic-element-x, #comic-element-z,
\r
877 #comic-element-y, #comic-element-a,
\r
878 #comic-element-w, #comic-element-w-percent,
\r
879 #comic-element-h, #comic-element-h-percent {
\r
880 position: absolute;
\r
893 #comic-element-w-percent,
\r
894 #comic-element-h-percent {
\r
897 #comic-element-x, #comic-element-z {
\r
900 #comic-element-y, #comic-element-a {
\r
903 #comic-element-w, #comic-element-w-percent {
\r
906 #comic-element-h, #comic-element-h-percent {
\r
909 .comic-element-attribute-label {
\r
910 display: inline-block;
\r
914 text-align: center;
\r
917 .comic-element-attribute-value {
\r
922 #comic-element-z-value,
\r
923 #comic-element-a-value {
\r
926 #comic-element-w-percent-value,
\r
927 #comic-element-h-percent-value {
\r
931 #comic-element-keep-aspect {
\r
932 position: absolute;
\r
939 border: 1px solid #ccc;
\r
942 /* Background Window
\r
943 --------------------------------------------------------------------------------------*/
\r
945 #select-bg-pattern-button,
\r
946 #reset-bg-pattern-button,
\r
948 #select-bg-color-button,
\r
949 #reset-bg-color-button {
\r
950 position: absolute;
\r
951 text-align: center;
\r
957 box-shadow: 1px 2px 3px #000;
\r
958 -moz-box-shadow: 1px 2px 3px #000;
\r
959 -webkit-box-shadow: 1px 2px 3px #000;
\r
967 #select-bg-pattern-button,
\r
968 #reset-bg-pattern-button,
\r
969 #select-bg-color-button,
\r
970 #reset-bg-color-button {
\r
971 border: 1px outset #666;
\r
976 #select-bg-pattern-button {
\r
980 #reset-bg-pattern-button {
\r
988 background-color: #66f;
\r
990 #select-bg-color-button {
\r
994 #reset-bg-color-button {
\r
1001 /* Tool-box Window
\r
1002 --------------------------------------------------------------------------------------*/
\r
1003 #toolbox-add-image-button,
\r
1004 #toolbox-add-text-button,
\r
1005 #toolbox-edit-bg-button,
\r
1006 #toolbox-switch-grid,
\r
1007 #toolbox-popup-help-button,
\r
1008 #toolbox-post-button {
\r
1009 position: absolute;
\r
1012 border: 1px outset #999;
\r
1014 line-height: 40px;
\r
1015 text-align: center;
\r
1017 background-color: #ccc;
\r
1018 border-radius: 8px;
\r
1019 -o-border-radius: 8px;
\r
1020 -ms-border-radius: 8px;
\r
1021 -moz-border-radius: 8px;
\r
1022 -webkit-border-radius: 8px;
\r
1024 #toolbox-add-image-button {
\r
1027 #toolbox-add-text-button {
\r
1030 #toolbox-edit-bg-button {
\r
1033 line-height: 30px;
\r
1035 #toolbox-switch-grid,
\r
1036 #toolbox-popup-help-button {
\r
1039 line-height: 30px;
\r
1041 #toolbox-switch-grid {
\r
1042 width: 45px !important;
\r
1044 #toolbox-popup-help-button {
\r
1045 width: 35px !important;
\r
1046 left: 65px !important;
\r
1049 #toolbox-post-button {
\r
1052 line-height: 50px;
\r
1056 --------------------------------------------------------------------------------------*/
\r
1060 position: absolute;
\r
1063 background-attachment: fixed;
\r
1064 background-repeat: repeat;
\r
1065 /* background-image: url('grid.gif'); grid用イメージはgrid使用時にjsで埋め込み */
\r
1068 /*--------------------------------------------------------------------------------------
\r
1072 -------------------------------------------------------------------------------------*/
\r
1074 position: relative;
\r
1076 .finder-container .loading {
\r
1077 background-position: 50% bottom;
\r
1081 position: relative;
\r
1082 background-color: #333;
\r
1084 .finder-header ul {
\r
1086 position: absolute;
\r
1090 line-height: 40px;
\r
1094 .finder-header li {
\r
1095 position: absolute;
\r
1103 .finder-header li a,
\r
1104 .finder-header li a:link,
\r
1105 .finder-header li a:visited {
\r
1109 line-height: 14px;
\r
1110 padding: 16px 0 10px 20px;
\r
1115 .finder-header li a:hover {
\r
1116 text-decoration: none;
\r
1117 background-color: #66f;
\r
1122 .finder-header .button {
\r
1123 position: absolute;
\r
1127 line-height: 24px;
\r
1129 .finder-sidebar-switch {
\r
1132 .finder-style-switch {
\r
1135 .finder-action-switch {
\r
1140 --------------------------------------------------------------------------------------*/
\r
1142 position: absolute;
\r
1147 border-bottom: 1px solid #ccc;
\r
1151 .finder-icon a:link,
\r
1152 .finder-icon a:visited,
\r
1153 .finder-icon a:active {
\r
1156 text-decoration: none;
\r
1157 *background: #fff;
\r
1159 .finder-icon a:hover {
\r
1160 background-color: #eee;
\r
1162 .finder-icon-handle,
\r
1163 .finder-icon-thumbnail,
\r
1164 .finder-icon-filename,
\r
1165 .finder-icon-summary {
\r
1166 display: table-cell;
\r
1167 vertical-align: middle;
\r
1170 line-height: 1.3em;
\r
1173 .finder-icon-handle,
\r
1174 .finder-icon-thumbnail,
\r
1175 .finder-icon-filename,
\r
1176 .finder-icon-summary {
\r
1181 * html .finder-icon span {
\r
1182 display: inline-block;
\r
1186 .finder-icon-handle {
\r
1190 .finder-icon-thumbnail {
\r
1193 background-repeat: no-repeat;
\r
1195 .finder-icon-thumbnail {
\r
1196 background-image: url('sprite.gif');
\r
1199 .finder-icon .file-type-folder {
\r
1200 background-position: 0 -75px;
\r
1202 .finder-icon .file-type-album {
\r
1204 .finder-icon .file-type-author {
\r
1205 background-position: -70px -75px;
\r
1207 .finder-icon .file-type-comic {
\r
1208 background-position: 0 -145px;
\r
1210 .finder-icon .file-type-cabinet {
\r
1211 background-position: -70px -145px;
\r
1213 .finder-icon .file-type-panel {
\r
1214 background-position: 0 -215px;
\r
1216 .finder-icon .file-type-artist {
\r
1217 background-position: -70px -215px;
\r
1219 .finder-icon .file-type-balloon {
\r
1220 background-position: 0 -285px;
\r
1222 .finder-icon .file-type-charactor {
\r
1223 background-position: -70px -285px;
\r
1228 * http://www.iconfinder.com/icondetails/18336/64/folder_image_photo_icon
\r
1229 * http://www.iconfinder.com/icondetails/27849/48/folder_yellow_icon
\r
1230 * http://www.iconfinder.com/icondetails/45347/64/cabinet_icon
\r
1231 * http://www.iconfinder.com/icondetails/3659/64/broken_file_icon
\r
1232 * http://www.iconfinder.com/icondetails/44733/64/address_book_icon
\r
1234 .finder-icon-filename {
\r
1237 font-weight: bold;
\r
1240 a:hover .finder-icon-filename {
\r
1243 .finder-icon-summary {
\r
1248 .finder-icon-console {
\r
1249 position: absolute;
\r
1253 .finder-icon-console div {
\r
1256 border-left: 1px solid #ccc;
\r
1259 background-position: 50% 50%;
\r
1260 background-repeat: no-repeat;
\r
1262 .finder-icon-console-action {
\r
1265 .finder-icon-console-editor-apps {
\r
1268 .finder-icon-console-viewer-apps {
\r