12 #entrance, #backyard, #debug {
\r
21 --------------------------------------------------------------------------------------*/
\r
34 /*--------------------------------------------------------------------------------------
\r
38 -------------------------------------------------------------------------------------*/
\r
52 -khtml-opacity: 0.5;
\r
54 .pettanr-ActiveX-enabled #overlay-shadow {
\r
55 filter: alpha(opacity=50);
\r
56 -ms-filter: alpha(opacity=50);
\r
58 .pettanr-ActiveX-disabled #overlay-shadow {
\r
59 background: transparent url( black_50pct.png) repeat 0 0;
\r
60 _background: url( black_50pct.gif) repeat 0 0;
\r
63 #overlay-close-button {
\r
64 border: 2px solid #f00;
\r
79 -o-border-radius: 5px;
\r
80 -ms-border-radius: 5px;
\r
81 -moz-border-radius: 5px;
\r
82 -webkit-border-radius: 5px;
\r
86 --------------------------------------------------------------------------------------*/
\r
87 #output-console-wrapper {
\r
91 background-color: #fff;
\r
96 border: 1px outset #ccc;
\r
101 --------------------------------------------------------------------------------------*/
\r
103 position: absolute;
\r
105 padding: 20px 20px 0;
\r
106 background-color: #fff;
\r
109 border-bottom: 2px solid #666;
\r
111 text-align: center;
\r
114 padding-bottom: 8px;
\r
115 margin-bottom: 10px;
\r
120 .console-button-container {
\r
122 border-top: 2px solid #666;
\r
126 .console-submit-button {
\r
132 .console-cancel-button {
\r
136 margin-right: 30px;
\r
138 .console-progress {
\r
140 text-align: center;
\r
149 --------------------------------------------------------------------------------------*/
\r
153 .comic-console-label {
\r
154 display: inline-block;
\r
160 .comic-console-value {
\r
164 .comic-console-line {
\r
166 padding-bottom: 5px;
\r
167 border-bottom: 1px solid #ccc;
\r
169 #comic-console-title,
\r
170 #comic-console-height,
\r
171 #comic-console-width,
\r
172 #comic-console-editable,
\r
173 #comic-console-visible {}
\r
174 #comic-console-title-value { width: 180px; text-align:left;}
\r
175 #comic-console-height-value {}
\r
176 #comic-console-width-value {}
\r
177 #comic-console-editable-value {}
\r
178 #comic-console-visible-value {}
\r
180 #comic-console-button-container {
\r
182 position: relative;
\r
188 --------------------------------------------------------------------------------------*/
\r
192 /*--------------------------------------------------------------------------------------
\r
196 -------------------------------------------------------------------------------------*/
\r
202 /*--------------------------------------------------------------------------------------
\r
206 -------------------------------------------------------------------------------------*/
\r
209 background-color: #f5f5f5;
\r
213 --------------------------------------------------------------------------------------*/
\r
214 #speach-editor-wrapper {
\r
215 position: absolute;
\r
217 #speach-editor-wrapper form {
\r
224 border: 1px outset #ccc;
\r
227 #speach-edit-complete-button {
\r
228 margin: 10px auto 0;
\r
232 --------------------------------------------------------------------------------------*/
\r
233 #image-gruop-wrapper {
\r
234 position: absolute;
\r
238 #image-icon-container {
\r
239 position: absolute;
\r
244 background-color: #fff;
\r
245 border: #fff solid;
\r
248 #image-gruop-button {
\r
250 position: absolute;
\r
255 .image-gruop-item {
\r
258 position: absolute;
\r
261 text-align: center;
\r
263 .image-gruop-item .reversible-image-container {
\r
267 .image-gruop-item .reversible-image-container img {
\r
271 .image-gruop-item-title {
\r
272 position: absolute;
\r
275 text-align: center;
\r
282 --------------------------------------------------------------------------------------*/
\r
284 position: absolute;
\r
289 background-color: #fff;
\r
290 border-bottom: 1px solid #666;
\r
291 box-shadow: 0 4px 9px #333;
\r
292 -moz-box-shadow: 0 4px 9px #333;
\r
293 -webkit-box-shadow: 0 4px 9px #333;
\r
294 filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);
\r
297 .menu-bar-item-focus {
\r
298 position: absolute;
\r
303 .menu-bar-item div,
\r
304 .menu-bar-item-focus div {
\r
308 line-height: 30px;
\r
309 padding-left: 0.6em;
\r
312 .menu-bar-item-focus div {
\r
313 background-color: #66f;
\r
316 .menu-bar-item ul {
\r
319 .menu-bar-item-focus ul {
\r
320 position: absolute;
\r
326 background-color: #fff;
\r
328 border: 1px solid #ccc;
\r
329 box-shadow: 1px 4px 9px #333;
\r
330 -moz-box-shadow: 1px 4px 9px #333;
\r
331 -webkit-box-shadow: 1px 4px 9px #333;
\r
332 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
334 .menu-bar-item-focus li {
\r
341 .menu-bar-item-focus li.disabled {
\r
344 .menu-bar-item-focus a,
\r
345 .menu-bar-item-focus a:link,
\r
346 .menu-bar-item-focus a:visited {
\r
348 position: relative;
\r
355 .menu-bar-item-focus a:hover {
\r
357 background-color: #ccf;
\r
358 text-decoration: none;
\r
361 .menu-bar-item-focus li.disabled a,
\r
362 .menu-bar-item-focus li.disabled a:link,
\r
363 .menu-bar-item-focus li.disabled a:visited,
\r
364 .menu-bar-item-focus li.disabled a:active,
\r
365 .menu-bar-item-focus li.disabled a:hover {
\r
367 background-color: #fff;
\r
370 .menu-bar-item-focus span {
\r
371 position: absolute;
\r
380 .menu-bar-item-focus kbd {
\r
381 position: absolute;
\r
390 .menu-bar-item-focus li.separator {
\r
394 border-top: 1px solid #ccc;
\r
400 --------------------------------------------------------------------------------------*/
\r
401 #whiteGlass-container {
\r
402 position: absolute;
\r
408 #whiteGlass-container div {
\r
409 position: absolute;
\r
410 background-color: #fff;
\r
413 -khtml-opacity: 0.7;
\r
415 .pettanr-ActiveX-enabled #whiteGlass-container div {
\r
416 filter: alpha(opacity=70);
\r
417 -ms-filter: alpha(opacity=70);
\r
419 .pettanr-ActiveX-disabled #whiteGlass-container div {
\r
420 background: transparent url( white_70pct.png) repeat 0 0;
\r
436 #whiteGlass-right {
\r
442 #whiteGlass-bottom {
\r
450 --------------------------------------------------------------------------------------*/
\r
451 #panel-tools-container {
\r
452 position: absolute;
\r
453 border: 2px solid #333;
\r
456 /* mouse-operation-catcher
\r
457 --------------------------------------------------------------------------------------*/
\r
458 #mouse-operation-catcher {
\r
459 position: absolute;
\r
463 height: 100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */
\r
465 .pettanr-ActiveX-enabled #mouse-operation-catcher {
\r
466 background-color: #fff;
\r
467 filter: alpha( opacity=0);
\r
468 -ms-filter: alpha( opacity=0);
\r
471 * ie では、背景を設定しないと、 mousemove が働かない。
\r
472 * activeX 有効の場合は背景を着色して filter で透明に。
\r
473 * activeX 無効の場合は透明 gif を使用
\r
474 * background: url(4x4.gif) fixed repeat;
\r
476 .pettanr-ActiveX-disabled #mouse-operation-catcher {
\r
477 background: url( opacity0.gif) fixed repeat;
\r
482 --------------------------------------------------------------------------------------*/
\r
483 #comic-element-container {
\r
484 position: absolute;
\r
487 .comic-element-wrapper {
\r
488 position: absolute;
\r
490 #comic-element-container img {
\r
493 position: absolute;
\r
498 /* comic-element-resizer
\r
499 --------------------------------------------------------------------------------------*/
\r
500 #comic-element-resizer-container {
\r
501 position: absolute;
\r
502 border: 1px solid #999;
\r
504 .comic-element-resizer {
\r
505 position: absolute;
\r
508 font-size: 8px; /* ie */
\r
509 line-height: 8px; /* ie */
\r
510 border: 1px solid #333;
\r
511 background-color: #fff;
\r
516 #comic-element-resizer-top {
\r
520 .current-resizer-is-0 #comic-element-resizer-top {
\r
521 background-color: #f66;
\r
523 #comic-element-resizer-left {
\r
527 .current-resizer-is-1 #comic-element-resizer-left {
\r
528 background-color: #f66;
\r
530 #comic-element-resizer-right {
\r
534 .current-resizer-is-2 #comic-element-resizer-right {
\r
535 background-color: #f66;
\r
537 #comic-element-resizer-bottom {
\r
541 .current-resizer-is-3 #comic-element-resizer-bottom {
\r
542 background-color: #f66;
\r
544 #comic-element-resizer-top-left {
\r
548 .current-resizer-is-4 #comic-element-resizer-top-left {
\r
549 background-color: #f66;
\r
551 #comic-element-resizer-top-right {
\r
555 .current-resizer-is-5 #comic-element-resizer-top-right {
\r
556 background-color: #f66;
\r
558 #comic-element-resizer-bottom-left {
\r
562 .current-resizer-is-6 #comic-element-resizer-bottom-left {
\r
563 background-color: #f66;
\r
565 #comic-element-resizer-bottom-right {
\r
569 .current-resizer-is-7 #comic-element-resizer-bottom-right {
\r
570 background-color: #f66;
\r
573 --------------------------------------------------------------------------------------*/
\r
574 #panel-resizer-top,
\r
575 #panel-resizer-bottom {
\r
576 position: absolute;
\r
577 border: 1px outset #999;
\r
578 background-color: #eee;
\r
579 text-align: center;
\r
586 #panel-resizer-top {
\r
588 border-radius: 8px 8px 0 0;
\r
589 -o-border-radius: 8px 8px 0 0;
\r
590 -ms-border-radius: 8px 8px 0 0;
\r
591 -moz-border-radius: 8px 8px 0 0;
\r
592 -webkit-border-radius: 8px 8px 0 0;
\r
594 #panel-resizer-bottom {
\r
596 border-radius: 0 0 8px 8px;
\r
597 -o-border-radius: 0 0 8px 8px;
\r
598 -ms-border-radius: 0 0 8px 8px;
\r
599 -moz-border-radius: 0 0 8px 8px;
\r
600 -webkit-border-radius: 0 0 8px 8px;
\r
603 /* balloon-tail-mover
\r
604 --------------------------------------------------------------------------------------*/
\r
605 #balloon-tail-mover {
\r
606 position: absolute;
\r
609 font-size: 8px; /* ie */
\r
610 line-height: 8px; /* ie */
\r
611 border: 1px solid #333;
\r
612 background-color: #66f;
\r
613 margin: -5px 0 0 -5px;
\r
616 /* comic element console
\r
617 --------------------------------------------------------------------------------------*/
\r
618 #comic-element-consol-wrapper {
\r
619 position: absolute;
\r
621 #image-element-consol {
\r
625 #text-element-consol {
\r
630 #change-image-button,
\r
631 #layer-back-button,
\r
632 #layer-forward-button,
\r
633 #delete-image-button,
\r
635 #change-text-style-button,
\r
636 #hide-text-tail-button,
\r
638 #forward-text-button,
\r
639 #delete-text-button {
\r
640 text-indent: -9999px;
\r
645 background-image: url('../images/sprite.gif');
\r
646 background-repeat: no-repeat;
\r
647 background-position: 0 0;
\r
650 #hide-text-tail-button {
\r
651 background-position: -30px -30px;
\r
653 #change-image-button,
\r
654 #change-text-style-button {
\r
655 background-position: -30px 0;
\r
657 #layer-back-button,
\r
658 #back-text-button {
\r
659 background-position: -60px 0;
\r
661 #layer-forward-button,
\r
662 #forward-text-button {
\r
663 background-position: -60px -30px;
\r
665 #delete-image-button,
\r
666 #delete-text-button {
\r
667 background-position: 0 -30px;
\r
670 .console-out #comic-element-consol-wrapper-when-out {
\r
672 background-color: #333;
\r
674 .console-out #comic-element-consol-tail {
\r
675 border-width: 0 5px 10px 5px;
\r
676 border-color: transparent transparent #333 transparent;
\r
677 _border-color: #fff #fff #333 #fff;
\r
678 border-style: solid;
\r
683 position: absolute;
\r
691 --------------------------------------------------------------------------------------*/
\r
693 text-align: center;
\r
695 position: absolute;
\r
704 display: table-cell;
\r
705 vertical-align: middle;
\r
709 .text-element table,
\r
710 .text-element tbody,
\r
718 text-align: center;
\r
719 vertical-align: middle;
\r
721 .text-element table {
\r
722 table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */
\r
726 --------------------------------------------------------------------------------------*/
\r
728 position: absolute;
\r
733 border-bottom: 1px solid #999;
\r
734 background-color: #fff;
\r
735 box-shadow: 1px 4px 9px #333;
\r
736 -moz-box-shadow: 1px 4px 9px #333;
\r
737 -webkit-box-shadow: 1px 4px 9px #333;
\r
738 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
742 .window-close-button {
\r
747 text-align: center;
\r
749 padding-bottom: 6px;
\r
750 background-color: #333;
\r
752 .window-close-button {
\r
753 position: absolute;
\r
756 border-left: 1px solid #666;
\r
758 padding-right: 9px;
\r
759 border-radius: 0 8px 0 0;
\r
760 -o-border-radius: 0 8px 0 0;
\r
761 -ms-border-radius: 0 8px 0 0;
\r
762 -moz-border-radius: 0 8px 0 0;
\r
763 -webkit-border-radius: 0 8px 0 0;
\r
768 border-radius: 8px 8px 0 0;
\r
769 -o-border-radius: 8px 8px 0 0;
\r
770 -ms-border-radius: 8px 8px 0 0;
\r
771 -moz-border-radius: 8px 8px 0 0;
\r
772 -webkit-border-radius: 8px 8px 0 0;
\r
775 position: relative;
\r
776 border-left: 1px solid #aaa;
\r
777 *border-left: 1px solid #ccc;
\r
778 border-right: 1px solid #999;
\r
781 html>/**/body .window-body {
\r
782 border-left /***/: 1px solid #ccc\9;
\r
788 background-color: #333;
\r
789 position: absolute;
\r
793 .window-resize-button {
\r
794 position: absolute;
\r
797 background-image: url('../images/sprite.gif');
\r
798 background-repeat: no-repeat;
\r
799 background-position: -70px -60px;
\r
803 text-indent: -9999px;
\r
804 text-align: center;
\r
809 --------------------------------------------------------------------------------------*/
\r
815 .sidenavi-item:link {
\r
817 border-bottom: 1px solid #666;
\r
819 text-decoration: none;
\r
822 .sidenavi-item:hover {
\r
823 background-color: #ccc;
\r
824 text-decoration: none;
\r
826 .sidenavi .current {
\r
827 background-color: #666;
\r
831 _position: relative; /* for ie6 */
\r
832 margin-left: 100px;
\r
833 padding: 1em 1em 2em 1em;
\r
840 --------------------------------------------------------------------------------------*/
\r
843 display: inline-block;
\r
845 border: 1px solid #ccc;
\r
850 .editable-text a:link,
\r
851 .editable-text a:visited,
\r
852 .editable-text a:hover,
\r
853 .editable-text a:active {
\r
856 text-decoration: none;
\r
859 background-color: #fff;
\r
861 .editable-text a:hover {
\r
862 background-color: #ccf;
\r
864 .editable-text input {
\r
867 font-family: Arial,Helvetica,sans-serif;
\r
868 background-color: #ccf;
\r
875 /* Information Window
\r
876 --------------------------------------------------------------------------------------*/
\r
877 #comic-element-infomation {
\r
878 background-color: #fff;
\r
879 position: absolute;
\r
882 #comic-element-x, #comic-element-z,
\r
883 #comic-element-y, #comic-element-a,
\r
884 #comic-element-w, #comic-element-w-percent,
\r
885 #comic-element-h, #comic-element-h-percent {
\r
886 position: absolute;
\r
899 #comic-element-w-percent,
\r
900 #comic-element-h-percent {
\r
903 #comic-element-x, #comic-element-z {
\r
906 #comic-element-y, #comic-element-a {
\r
909 #comic-element-w, #comic-element-w-percent {
\r
912 #comic-element-h, #comic-element-h-percent {
\r
915 .comic-element-attribute-label {
\r
916 display: inline-block;
\r
920 text-align: center;
\r
923 .comic-element-attribute-value {
\r
928 #comic-element-z-value,
\r
929 #comic-element-a-value {
\r
932 #comic-element-w-percent-value,
\r
933 #comic-element-h-percent-value {
\r
937 #comic-element-keep-aspect {
\r
938 position: absolute;
\r
945 border: 1px solid #ccc;
\r
948 /* Background Window
\r
949 --------------------------------------------------------------------------------------*/
\r
951 #select-bg-pattern-button,
\r
952 #reset-bg-pattern-button,
\r
954 #select-bg-color-button,
\r
955 #reset-bg-color-button {
\r
956 position: absolute;
\r
957 text-align: center;
\r
963 box-shadow: 1px 2px 3px #000;
\r
964 -moz-box-shadow: 1px 2px 3px #000;
\r
965 -webkit-box-shadow: 1px 2px 3px #000;
\r
973 #select-bg-pattern-button,
\r
974 #reset-bg-pattern-button,
\r
975 #select-bg-color-button,
\r
976 #reset-bg-color-button {
\r
977 border: 1px outset #666;
\r
982 #select-bg-pattern-button {
\r
986 #reset-bg-pattern-button {
\r
994 background-color: #66f;
\r
996 #select-bg-color-button {
\r
1000 #reset-bg-color-button {
\r
1007 /* Tool-box Window
\r
1008 --------------------------------------------------------------------------------------*/
\r
1009 #toolbox-add-image-button,
\r
1010 #toolbox-add-text-button,
\r
1011 #toolbox-edit-bg-button,
\r
1012 #toolbox-switch-grid,
\r
1013 #toolbox-popup-help-button,
\r
1014 #toolbox-post-button {
\r
1015 position: absolute;
\r
1018 border: 1px outset #999;
\r
1020 line-height: 40px;
\r
1021 text-align: center;
\r
1023 background-color: #ccc;
\r
1024 border-radius: 8px;
\r
1025 -o-border-radius: 8px;
\r
1026 -ms-border-radius: 8px;
\r
1027 -moz-border-radius: 8px;
\r
1028 -webkit-border-radius: 8px;
\r
1030 #toolbox-add-image-button {
\r
1033 #toolbox-add-text-button {
\r
1036 #toolbox-edit-bg-button {
\r
1039 line-height: 30px;
\r
1041 #toolbox-switch-grid,
\r
1042 #toolbox-popup-help-button {
\r
1045 line-height: 30px;
\r
1047 #toolbox-switch-grid {
\r
1048 width: 45px !important;
\r
1050 #toolbox-popup-help-button {
\r
1051 width: 35px !important;
\r
1052 left: 65px !important;
\r
1055 #toolbox-post-button {
\r
1058 line-height: 50px;
\r
1062 --------------------------------------------------------------------------------------*/
\r
1066 position: absolute;
\r
1069 background-attachment: fixed;
\r
1070 background-repeat: repeat;
\r
1071 /* background-image: url('grid.gif'); grid用イメージはgrid使用時にjsで埋め込み */
\r
1074 /*--------------------------------------------------------------------------------------
\r
1078 -------------------------------------------------------------------------------------*/
\r
1080 position: relative;
\r
1083 .finder-container .loading {
\r
1084 background-position: 50% bottom;
\r
1088 position: relative;
\r
1089 background-color: #333;
\r
1091 .finder-header ul {
\r
1093 position: absolute;
\r
1097 line-height: 40px;
\r
1101 .finder-header li {
\r
1102 position: absolute;
\r
1110 .finder-header li a,
\r
1111 .finder-header li a:link,
\r
1112 .finder-header li a:visited {
\r
1116 line-height: 14px;
\r
1117 padding: 16px 0 10px 20px;
\r
1122 .finder-header li a:hover {
\r
1123 text-decoration: none;
\r
1124 background-color: #66f;
\r
1129 .finder-header .button {
\r
1130 position: absolute;
\r
1134 line-height: 24px;
\r
1136 .finder-sidebar-switch {
\r
1139 .finder-style-switch {
\r
1142 .finder-action-switch {
\r
1147 --------------------------------------------------------------------------------------*/
\r
1149 position: absolute;
\r
1154 border-bottom: 1px solid #ccc;
\r
1158 .finder-icon a:link,
\r
1159 .finder-icon a:visited,
\r
1160 .finder-icon a:active {
\r
1163 text-decoration: none;
\r
1164 *background: #fff;
\r
1166 .finder-icon a:hover {
\r
1167 background-color: #eee;
\r
1169 .finder-icon-handle,
\r
1170 .finder-icon-thumbnail,
\r
1171 .finder-icon-filename,
\r
1172 .finder-icon-summary {
\r
1173 display: table-cell;
\r
1174 vertical-align: middle;
\r
1177 line-height: 1.3em;
\r
1180 .finder-icon-handle,
\r
1181 .finder-icon-thumbnail,
\r
1182 .finder-icon-filename,
\r
1183 .finder-icon-summary {
\r
1188 * html .finder-icon span {
\r
1189 display: inline-block;
\r
1193 .finder-icon-handle {
\r
1197 .finder-icon-thumbnail {
\r
1200 background-repeat: no-repeat;
\r
1202 .finder-icon-thumbnail {
\r
1203 background-image: url('../images/sprite.gif');
\r
1206 .finder-icon .file-type-folder {
\r
1207 background-position: 0 -75px;
\r
1209 .finder-icon .file-type-album {
\r
1211 .finder-icon .file-type-author {
\r
1212 background-position: -70px -75px;
\r
1214 .finder-icon .file-type-comic {
\r
1215 background-position: 0 -145px;
\r
1217 .finder-icon .file-type-cabinet {
\r
1218 background-position: -70px -145px;
\r
1220 .finder-icon .file-type-panel {
\r
1221 background-position: 0 -215px;
\r
1223 .finder-icon .file-type-artist {
\r
1224 background-position: -70px -215px;
\r
1226 .finder-icon .file-type-balloon {
\r
1227 background-position: 0 -285px;
\r
1229 .finder-icon .file-type-charactor {
\r
1230 background-position: -70px -285px;
\r
1235 * http://www.iconfinder.com/icondetails/18336/64/folder_image_photo_icon
\r
1236 * http://www.iconfinder.com/icondetails/27849/48/folder_yellow_icon
\r
1237 * http://www.iconfinder.com/icondetails/45347/64/cabinet_icon
\r
1238 * http://www.iconfinder.com/icondetails/3659/64/broken_file_icon
\r
1239 * http://www.iconfinder.com/icondetails/44733/64/address_book_icon
1241 .finder-icon-filename {
\r
1244 font-weight: bold;
\r
1247 a:hover .finder-icon-filename {
\r
1250 .finder-icon-summary {
\r
1255 .finder-icon-console {
\r
1256 position: absolute;
\r
1260 .finder-icon-console div {
\r
1263 border-left: 1px solid #ccc;
\r
1266 background-position: 50% 50%;
\r
1267 background-repeat: no-repeat;
\r
1269 .finder-icon-console-action {
\r
1272 .finder-icon-console-editor-apps {
\r
1275 .finder-icon-console-viewer-apps {
\r