3 /* pettanR peta.apps.css
\r
16 --------------------------------------------------------------------------------------*/
\r
26 /*--------------------------------------------------------------------------------------
\r
30 -------------------------------------------------------------------------------------*/
\r
31 #cabinet-header, #gallery-header {
\r
33 background-color: #111;
\r
42 #cabinet-close-button, #gallery-close-button {
\r
46 border-left: 1px solid #666;
\r
48 padding: 6pt 9pt 6pt 9pt;
\r
52 .close-button-hover {
\r
53 background-color: #333;
\r
56 /*--------------------------------------------------------------------------------------
\r
60 -------------------------------------------------------------------------------------*/
\r
63 --------------------------------------------------------------------------------------*/
\r
67 padding: 20px 20px 0;
\r
68 background-color: #fff;
\r
71 border-bottom: 2px solid #666;
\r
76 padding-bottom: 8px;
\r
77 margin-bottom: 10px;
\r
82 .console-button-container {
\r
84 border-top: 2px solid #666;
\r
88 .console-submit-button {
\r
94 .console-cancel-button {
\r
100 .console-progress {
\r
102 text-align: center;
\r
111 --------------------------------------------------------------------------------------*/
\r
114 padding-bottom: 5px;
\r
115 border-bottom: 1px solid #ccc;
\r
118 display: inline-block;
\r
126 --------------------------------------------------------------------------------------*/
\r
131 .comic-console-value {
\r
136 #comic-console-title,
\r
137 #comic-console-height,
\r
138 #comic-console-width,
\r
139 #comic-console-editable,
\r
140 #comic-console-visible {}
\r
141 #comic-console-title-value { width: 180px; text-align:left;}
\r
142 #comic-console-height-value {}
\r
143 #comic-console-width-value {}
\r
144 #comic-console-editable-value,
\r
145 #comic-console-visible-value {
\r
147 text-align: center;
\r
151 --------------------------------------------------------------------------------------*/
\r
152 #panel-console-publish-value {
\r
154 text-align: center;
\r
158 --------------------------------------------------------------------------------------*/
\r
159 #comic-reader-wrapper {}
\r
160 #comic-reader-panel-container {
\r
161 position: absolute;
\r
165 #comic-reader-header,
\r
166 #comic-reader-console {
\r
167 position: absolute;
\r
172 #comic-reader-header {
\r
176 .comic-reader-shadow {
\r
178 position: absolute;
\r
186 -khtml-opacity: 0.5;
\r
188 .pettanr-ActiveX-enabled .comic-reader-shadow {
\r
189 filter: alpha(opacity=50);
\r
190 -ms-filter: "alpha(opacity=50)";
\r
192 .pettanr-ActiveX-disabled .comic-reader-shadow {
\r
193 background: transparent url( "../images/black_50pct.png" ) repeat 0 0;
\r
194 _background: url( "../images/black_50pct.gif" ) repeat 0 0;
\r
196 #comic-reader-header-content {
\r
199 border-bottom: 1px solid #fff;
\r
201 #comic-reader-title {
\r
207 #comic-reader-author {
\r
213 #comic-reader-console {
\r
216 border-top: 1px solid #fff;
\r
218 #comic-reader-button-centering {
\r
219 position: relative;
\r
223 #comic-reader-back-button,
\r
224 #comic-reader-forward-button,
\r
225 #comic-reader-back-button:link,
\r
226 #comic-reader-forward-button:link {
\r
229 position: absolute;
\r
232 line-height: 100px;
\r
235 border-left: 1px solid #999;
\r
236 border-right: 1px solid #999;
\r
237 text-align: center;
\r
240 #comic-reader-back-button:hover,
\r
241 #comic-reader-forward-button:hover {
\r
242 background-color: #111;
\r
245 text-decoration: none;
\r
247 #comic-reader-back-button {
\r
249 border-right: 1px solid #ccc;
\r
251 #comic-reader-forward-button {
\r
256 --------------------------------------------------------------------------------------*/
\r
258 #output-console-wrapper {
\r
261 #output-console-format-value {
\r
265 #output-console-option-value {
\r
272 border: 1px outset #ccc;
\r
274 margin-bottom: 20px;
\r
276 #output-console-close-button {
\r
278 margin: 0 auto 20px;
\r
282 --------------------------------------------------------------------------------------*/
\r
288 /*--------------------------------------------------------------------------------------
\r
292 -------------------------------------------------------------------------------------*/
\r
294 position: absolute;
\r
300 background-color: #f5f5f5;
\r
304 --------------------------------------------------------------------------------------*/
\r
305 #speach-editor-wrapper {
\r
306 position: absolute;
\r
308 #speach-editor-wrapper form {
\r
315 border: 1px outset #ccc;
\r
318 #speach-edit-complete-button {
\r
319 margin: 10px auto 0;
\r
323 --------------------------------------------------------------------------------------*/
\r
324 #image-group-wrapper {
\r
325 position: absolute;
\r
329 #image-group-icon-container {
\r
330 position: absolute;
\r
335 background-color: #fff;
\r
336 border: #fff solid;
\r
339 #image-group-name {
\r
340 padding: 20px 0 10px 20px;
\r
341 border-bottom: 1px solid #eee;
\r
346 text-shadow: 1px 1px 3px #ccc;
\r
347 -moz-text-shadow: 1px 1px 3px #ccc;
\r
348 -webkit-text-shadow:1px 1px 3px #ccc;
\r
349 box-shadow: 0 4px 9px #333;
\r
350 -moz-box-shadow: 0 4px 9px #333;
\r
351 -webkit-box-shadow: 0 4px 9px #333;
\r
353 #image-group-button {
\r
355 position: absolute;
\r
360 .image-group-item {
\r
363 position: absolute;
\r
366 text-align: center;
\r
368 .image-group-item .reversible-image-container {
\r
372 .image-group-item .reversible-image-container img {
\r
376 .image-group-item-title {
\r
377 position: absolute;
\r
380 text-align: center;
\r
387 --------------------------------------------------------------------------------------*/
\r
389 position: absolute;
\r
394 background-color: #fff;
\r
395 border-bottom: 1px solid #666;
\r
396 box-shadow: 0 4px 9px #333;
\r
397 -moz-box-shadow: 0 4px 9px #333;
\r
398 -webkit-box-shadow: 0 4px 9px #333;
\r
399 filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);
\r
402 .menubar-item-focus {
\r
403 position: absolute;
\r
409 line-height: 24.1pt;
\r
410 padding-left: 0.6em;
\r
413 .menubar-item-focus {
\r
414 background-color: #161;
\r
417 .menubar-option-box {
\r
418 position: absolute;
\r
424 background-color: #f5f5f5;
\r
426 border: 1px solid #ccc;
\r
427 box-shadow: 1px 4px 9px #333;
\r
428 -moz-box-shadow: 1px 4px 9px #333;
\r
429 -webkit-box-shadow: 1px 4px 9px #333;
\r
430 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
432 .menubar-option-box-hover {
\r
433 background-color: #fff;
\r
435 .menubar-option-box div {
\r
436 position: relative;
\r
440 line-height: 24.1pt;
\r
441 border-style: none;
\r
442 border-width: 0 0 1px;
\r
443 border-color: #ccc;
\r
445 .menubar-option-disabled {
\r
446 color: #ddd !important;
\r
448 .menubar-option-hover {
\r
449 background-color: #161 !important;
\r
450 color: #eee !important;
\r
452 .menubar-option-hover * {
\r
453 color: #eee !important;
\r
455 .menubar-option-box span {
\r
456 position: absolute;
\r
465 .menubar-option-box kbd {
\r
466 position: absolute;
\r
477 --------------------------------------------------------------------------------------*/
\r
478 #whiteGlass-container {
\r
479 position: absolute;
\r
485 #whiteGlass-container div {
\r
486 position: absolute;
\r
487 background-color: #fff;
\r
490 -khtml-opacity: 0.7;
\r
492 .pettanr-ActiveX-enabled #whiteGlass-container div {
\r
493 filter: alpha(opacity=70);
\r
494 -ms-filter: alpha(opacity=70);
\r
496 .pettanr-ActiveX-disabled #whiteGlass-container div {
\r
497 background: transparent url( "../images/white_70pct.png" ) repeat 0 0;
\r
513 #whiteGlass-right {
\r
519 #whiteGlass-bottom {
\r
527 --------------------------------------------------------------------------------------*/
\r
528 #panel-tools-container {
\r
529 position: absolute;
\r
530 border: 2px solid #333;
\r
534 --------------------------------------------------------------------------------------*/
\r
535 #comic-element-container {
\r
536 position: absolute;
\r
539 .comic-element-wrapper {
\r
540 position: absolute;
\r
542 #comic-element-container img {
\r
545 position: absolute;
\r
550 /* comic-element-resizer
\r
551 --------------------------------------------------------------------------------------*/
\r
552 #comic-element-resizer-container {
\r
553 position: absolute;
\r
554 border: 1px solid #999;
\r
556 .comic-element-resizer {
\r
557 position: absolute;
\r
560 font-size: 8px; /* ie */
\r
561 line-height: 8px; /* ie */
\r
562 border: 1px solid #333;
\r
563 background-color: #fff;
\r
568 #comic-element-resizer-top {
\r
572 .current-resizer-is-0 #comic-element-resizer-top {
\r
573 background-color: #f66;
\r
575 #comic-element-resizer-left {
\r
579 .current-resizer-is-1 #comic-element-resizer-left {
\r
580 background-color: #f66;
\r
582 #comic-element-resizer-right {
\r
586 .current-resizer-is-2 #comic-element-resizer-right {
\r
587 background-color: #f66;
\r
589 #comic-element-resizer-bottom {
\r
593 .current-resizer-is-3 #comic-element-resizer-bottom {
\r
594 background-color: #f66;
\r
596 #comic-element-resizer-top-left {
\r
600 .current-resizer-is-4 #comic-element-resizer-top-left {
\r
601 background-color: #f66;
\r
603 #comic-element-resizer-top-right {
\r
607 .current-resizer-is-5 #comic-element-resizer-top-right {
\r
608 background-color: #f66;
\r
610 #comic-element-resizer-bottom-left {
\r
614 .current-resizer-is-6 #comic-element-resizer-bottom-left {
\r
615 background-color: #f66;
\r
617 #comic-element-resizer-bottom-right {
\r
621 .current-resizer-is-7 #comic-element-resizer-bottom-right {
\r
622 background-color: #f66;
\r
625 --------------------------------------------------------------------------------------*/
\r
626 #panel-resizer-top,
\r
627 #panel-resizer-bottom {
\r
628 position: absolute;
\r
629 border: 1px outset #999;
\r
630 background-color: #eee;
\r
631 text-align: center;
\r
638 #panel-resizer-top {
\r
640 border-radius: 8px 8px 0 0;
\r
641 -o-border-radius: 8px 8px 0 0;
\r
642 -ms-border-radius: 8px 8px 0 0;
\r
643 -moz-border-radius: 8px 8px 0 0;
\r
644 -webkit-border-radius: 8px 8px 0 0;
\r
646 #panel-resizer-bottom {
\r
648 border-radius: 0 0 8px 8px;
\r
649 -o-border-radius: 0 0 8px 8px;
\r
650 -ms-border-radius: 0 0 8px 8px;
\r
651 -moz-border-radius: 0 0 8px 8px;
\r
652 -webkit-border-radius: 0 0 8px 8px;
\r
655 /* balloon-tail-mover
\r
656 --------------------------------------------------------------------------------------*/
\r
657 #balloon-tail-mover {
\r
658 position: absolute;
\r
661 font-size: 8px; /* ie */
\r
662 line-height: 8px; /* ie */
\r
663 border: 1px solid #333;
\r
664 background-color: #66f;
\r
665 margin: -5px 0 0 -5px;
\r
668 /* comic element console
\r
669 --------------------------------------------------------------------------------------*/
\r
670 #comic-element-consol-wrapper {
\r
671 position: absolute;
\r
673 #image-element-consol {
\r
677 #text-element-consol {
\r
682 #change-image-button,
\r
683 #layer-back-button,
\r
684 #layer-forward-button,
\r
685 #delete-image-button,
\r
687 #change-text-style-button,
\r
688 #hide-text-tail-button,
\r
690 #forward-text-button,
\r
691 #delete-text-button {
\r
692 text-indent: -9999px;
\r
697 background-image: url('../images/sprite.gif');
\r
698 background-repeat: no-repeat;
\r
699 background-position: 0 0;
\r
702 #hide-text-tail-button {
\r
703 background-position: -30px -30px;
\r
705 #change-image-button,
\r
706 #change-text-style-button {
\r
707 background-position: -30px 0;
\r
709 #layer-back-button,
\r
710 #back-text-button {
\r
711 background-position: -60px 0;
\r
713 #layer-forward-button,
\r
714 #forward-text-button {
\r
715 background-position: -60px -30px;
\r
717 #delete-image-button,
\r
718 #delete-text-button {
\r
719 background-position: 0 -30px;
\r
722 .console-out #comic-element-consol-wrapper-when-out {
\r
724 background-color: #333;
\r
726 .console-out #comic-element-consol-tail {
\r
727 border-width: 0 5px 10px 5px;
\r
728 border-color: transparent transparent #333 transparent;
\r
729 _border-color: #fff #fff #333 #fff;
\r
730 border-style: solid;
\r
735 position: absolute;
\r
743 --------------------------------------------------------------------------------------*/
\r
745 text-align: center;
\r
747 position: absolute;
\r
756 display: table-cell;
\r
757 vertical-align: middle;
\r
761 .text-element table,
\r
762 .text-element tbody,
\r
770 text-align: center;
\r
771 vertical-align: middle;
\r
773 .text-element table {
\r
774 table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */
\r
778 --------------------------------------------------------------------------------------*/
\r
780 position: absolute;
\r
782 border-bottom: 1px solid #999;
\r
783 background-color: #fff;
\r
784 box-shadow: 1px 4px 9px #333;
\r
785 -moz-box-shadow: 1px 4px 9px #333;
\r
786 -webkit-box-shadow: 1px 4px 9px #333;
\r
787 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
790 .window-header-title,
\r
791 .window-close-button {
\r
796 text-align: center;
\r
798 padding-bottom: 6px;
\r
799 background-color: #444;
\r
801 .window-wrapper-hover .window-header-title {
\r
802 background-color: #333;
\r
804 .window-close-button {
\r
805 position: absolute;
\r
808 border-left: 1px solid #666;
\r
810 padding-right: 9px;
\r
811 border-radius: 0 8px 0 0;
\r
812 -o-border-radius: 0 8px 0 0;
\r
813 -ms-border-radius: 0 8px 0 0;
\r
814 -moz-border-radius: 0 8px 0 0;
\r
815 -webkit-border-radius: 0 8px 0 0;
\r
820 .window-header-title {
\r
821 border-radius: 8px 8px 0 0;
\r
822 -o-border-radius: 8px 8px 0 0;
\r
823 -ms-border-radius: 8px 8px 0 0;
\r
824 -moz-border-radius: 8px 8px 0 0;
\r
825 -webkit-border-radius: 8px 8px 0 0;
\r
828 position: absolute;
\r
830 border-right: 1px solid #999;
\r
831 border-left: 1px solid #aaa;
\r
832 *border-left: 1px solid #ccc;
\r
835 html>/**/body .window-body {
\r
836 border-left /***/: 1px solid #ccc\9;
\r
842 background-color: #333;
\r
843 position: absolute;
\r
847 .window-resize-button {
\r
848 position: absolute;
\r
851 background-image: url('../images/sprite.gif');
\r
852 background-repeat: no-repeat;
\r
853 background-position: -70px -60px;
\r
857 text-indent: -9999px;
\r
858 text-align: center;
\r
863 --------------------------------------------------------------------------------------*/
\r
869 .sidenavi-item:link {
\r
871 border-bottom: 1px solid #666;
\r
873 text-decoration: none;
\r
876 .sidenavi-item:hover {
\r
877 background-color: #ccc;
\r
878 text-decoration: none;
\r
880 .sidenavi .current {
\r
881 background-color: #666;
\r
885 _position: relative; /* for ie6 */
\r
886 margin-left: 100px;
\r
887 padding: 1em 1em 2em 1em;
\r
893 /* Information Window
\r
894 --------------------------------------------------------------------------------------*/
\r
895 #comic-element-infomation {
\r
896 background-color: #fff;
\r
897 position: absolute;
\r
900 #comic-element-x, #comic-element-z,
\r
901 #comic-element-y, #comic-element-a,
\r
902 #comic-element-w, #comic-element-w-percent,
\r
903 #comic-element-h, #comic-element-h-percent {
\r
904 position: absolute;
\r
917 #comic-element-w-percent,
\r
918 #comic-element-h-percent {
\r
921 #comic-element-x, #comic-element-z {
\r
924 #comic-element-y, #comic-element-a {
\r
927 #comic-element-w, #comic-element-w-percent {
\r
930 #comic-element-h, #comic-element-h-percent {
\r
933 .comic-element-attribute-label {
\r
934 display: inline-block;
\r
938 text-align: center;
\r
941 .comic-element-attribute-value {
\r
946 #comic-element-z-value,
\r
947 #comic-element-a-value {
\r
950 #comic-element-w-percent-value,
\r
951 #comic-element-h-percent-value {
\r
955 #comic-element-keep-aspect {
\r
956 position: absolute;
\r
963 border: 1px solid #ccc;
\r
966 /* Background Window
\r
967 --------------------------------------------------------------------------------------*/
\r
969 #select-bg-pattern-button,
\r
970 #reset-bg-pattern-button,
\r
972 #select-bg-color-button,
\r
973 #reset-bg-color-button {
\r
974 position: absolute;
\r
975 text-align: center;
\r
981 box-shadow: 1px 2px 3px #000;
\r
982 -moz-box-shadow: 1px 2px 3px #000;
\r
983 -webkit-box-shadow: 1px 2px 3px #000;
\r
991 #select-bg-pattern-button,
\r
992 #reset-bg-pattern-button,
\r
993 #select-bg-color-button,
\r
994 #reset-bg-color-button {
\r
995 border: 1px outset #666;
\r
1000 #select-bg-pattern-button {
\r
1004 #reset-bg-pattern-button {
\r
1012 background-color: #66f;
\r
1014 #select-bg-color-button {
\r
1018 #reset-bg-color-button {
\r
1025 /* Tool-box Window
\r
1026 --------------------------------------------------------------------------------------*/
\r
1027 #toolbox-add-image-button,
\r
1028 #toolbox-add-text-button,
\r
1029 #toolbox-edit-bg-button,
\r
1030 #toolbox-switch-grid,
\r
1031 #toolbox-popup-help-button,
\r
1032 #toolbox-post-button {
\r
1033 position: absolute;
\r
1037 line-height: 40px;
\r
1039 #toolbox-add-image-button {
\r
1042 #toolbox-add-text-button {
\r
1045 #toolbox-edit-bg-button {
\r
1048 line-height: 30px;
\r
1050 #toolbox-switch-grid,
\r
1051 #toolbox-popup-help-button {
\r
1054 line-height: 30px;
\r
1056 #toolbox-switch-grid {
\r
1057 width: 45px !important;
\r
1059 #toolbox-popup-help-button {
\r
1060 width: 35px !important;
\r
1061 left: 63px !important;
\r
1064 #toolbox-post-button {
\r
1067 line-height: 50px;
\r
1071 --------------------------------------------------------------------------------------*/
\r
1075 position: absolute;
\r
1078 background-attachment: fixed;
\r
1079 background-repeat: repeat;
\r
1080 /* background-image: url('grid.gif'); grid用イメージはgrid使用時にjsで埋め込み */
\r