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-data-value {
\r
159 #panel-console-publish-value {
\r
161 text-align: center;
\r
164 #artist-console-name-value,
\r
165 #artist-console-license-value {
\r
171 --------------------------------------------------------------------------------------*/
\r
172 #comic-reader-wrapper {}
\r
173 #comic-reader-panel-container {
\r
174 position: absolute;
\r
178 #comic-reader-header,
\r
179 #comic-reader-console {
\r
180 position: absolute;
\r
185 #comic-reader-header {
\r
189 .comic-reader-shadow {
\r
191 position: absolute;
\r
199 -khtml-opacity: 0.5;
\r
201 .pettanr-ActiveX-enabled .comic-reader-shadow {
\r
202 filter: alpha(opacity=50);
\r
203 -ms-filter: "alpha(opacity=50)";
\r
205 .pettanr-ActiveX-disabled .comic-reader-shadow {
\r
206 background: transparent url( "../images/black_50pct.png" ) repeat 0 0;
\r
207 _background: url( "../images/black_50pct.gif" ) repeat 0 0;
\r
209 #comic-reader-header-content {
\r
212 border-bottom: 1px solid #fff;
\r
214 #comic-reader-title {
\r
220 #comic-reader-author {
\r
226 #comic-reader-console {
\r
229 border-top: 1px solid #fff;
\r
231 #comic-reader-button-centering {
\r
232 position: relative;
\r
236 #comic-reader-back-button,
\r
237 #comic-reader-forward-button,
\r
238 #comic-reader-back-button:link,
\r
239 #comic-reader-forward-button:link {
\r
242 position: absolute;
\r
245 line-height: 100px;
\r
248 border-left: 1px solid #999;
\r
249 border-right: 1px solid #999;
\r
250 text-align: center;
\r
253 #comic-reader-back-button:hover,
\r
254 #comic-reader-forward-button:hover {
\r
255 background-color: #111;
\r
258 text-decoration: none;
\r
260 #comic-reader-back-button {
\r
262 border-right: 1px solid #ccc;
\r
264 #comic-reader-forward-button {
\r
269 --------------------------------------------------------------------------------------*/
\r
271 #output-console-wrapper {
\r
274 #output-console-format-value {
\r
278 #output-console-option-value {
\r
285 border: 1px outset #ccc;
\r
287 margin-bottom: 20px;
\r
289 #output-console-close-button {
\r
291 margin: 0 auto 20px;
\r
295 --------------------------------------------------------------------------------------*/
\r
301 /*--------------------------------------------------------------------------------------
\r
305 -------------------------------------------------------------------------------------*/
\r
307 position: absolute;
\r
313 background-color: #f5f5f5;
\r
317 --------------------------------------------------------------------------------------*/
\r
318 #speach-editor-wrapper {
\r
319 position: absolute;
\r
321 #speach-editor-wrapper form {
\r
328 border: 1px outset #ccc;
\r
331 #speach-edit-complete-button {
\r
332 margin: 10px auto 0;
\r
336 --------------------------------------------------------------------------------------*/
\r
337 #image-group-wrapper {
\r
338 position: absolute;
\r
342 #image-group-icon-container {
\r
343 position: absolute;
\r
348 background-color: #fff;
\r
349 border: #fff solid;
\r
352 #image-group-name {
\r
353 padding: 20px 0 10px 20px;
\r
354 border-bottom: 1px solid #eee;
\r
359 text-shadow: 1px 1px 3px #ccc;
\r
360 -moz-text-shadow: 1px 1px 3px #ccc;
\r
361 -webkit-text-shadow:1px 1px 3px #ccc;
\r
362 box-shadow: 0 4px 9px #333;
\r
363 -moz-box-shadow: 0 4px 9px #333;
\r
364 -webkit-box-shadow: 0 4px 9px #333;
\r
366 #image-group-button {
\r
368 position: absolute;
\r
373 .image-group-item {
\r
376 position: absolute;
\r
379 text-align: center;
\r
381 .image-group-item .reversible-image-container {
\r
385 .image-group-item .reversible-image-container img {
\r
389 .image-group-item-title {
\r
390 position: absolute;
\r
393 text-align: center;
\r
400 --------------------------------------------------------------------------------------*/
\r
402 position: absolute;
\r
407 background-color: #fff;
\r
408 border-bottom: 1px solid #666;
\r
409 box-shadow: 0 4px 9px #333;
\r
410 -moz-box-shadow: 0 4px 9px #333;
\r
411 -webkit-box-shadow: 0 4px 9px #333;
\r
412 filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);
\r
415 .menubar-item-focus {
\r
416 position: absolute;
\r
422 line-height: 24.1pt;
\r
423 padding-left: 0.6em;
\r
426 .menubar-item-focus {
\r
427 background-color: #161;
\r
430 .menubar-option-box {
\r
431 position: absolute;
\r
437 background-color: #f5f5f5;
\r
439 border: 1px solid #ccc;
\r
440 box-shadow: 1px 4px 9px #333;
\r
441 -moz-box-shadow: 1px 4px 9px #333;
\r
442 -webkit-box-shadow: 1px 4px 9px #333;
\r
443 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
445 .menubar-option-box-hover {
\r
446 background-color: #fff;
\r
448 .menubar-option-box div {
\r
449 position: relative;
\r
453 line-height: 24.1pt;
\r
454 border-style: none;
\r
455 border-width: 0 0 1px;
\r
456 border-color: #ccc;
\r
458 .menubar-option-disabled {
\r
459 color: #ddd !important;
\r
461 .menubar-option-hover {
\r
462 background-color: #161 !important;
\r
463 color: #eee !important;
\r
465 .menubar-option-hover * {
\r
466 color: #eee !important;
\r
468 .menubar-option-box span {
\r
469 position: absolute;
\r
478 .menubar-option-box kbd {
\r
479 position: absolute;
\r
490 --------------------------------------------------------------------------------------*/
\r
491 #whiteGlass-container {
\r
492 position: absolute;
\r
498 #whiteGlass-container div {
\r
499 position: absolute;
\r
500 background-color: #fff;
\r
503 -khtml-opacity: 0.7;
\r
505 .pettanr-ActiveX-enabled #whiteGlass-container div {
\r
506 filter: alpha(opacity=70);
\r
507 -ms-filter: alpha(opacity=70);
\r
509 .pettanr-ActiveX-disabled #whiteGlass-container div {
\r
510 background: transparent url( "../images/white_70pct.png" ) repeat 0 0;
\r
526 #whiteGlass-right {
\r
532 #whiteGlass-bottom {
\r
540 --------------------------------------------------------------------------------------*/
\r
541 #panel-tools-container {
\r
542 position: absolute;
\r
543 border: 2px solid #333;
\r
547 --------------------------------------------------------------------------------------*/
\r
548 #comic-element-container {
\r
549 position: absolute;
\r
552 .comic-element-wrapper {
\r
553 position: absolute;
\r
555 #comic-element-container img {
\r
558 position: absolute;
\r
563 /* comic-element-resizer
\r
564 --------------------------------------------------------------------------------------*/
\r
565 #comic-element-resizer-container {
\r
566 position: absolute;
\r
568 #comic-element-resizer-container-inner {
\r
569 position: absolute;
\r
572 border: 1px solid #999;
\r
574 .comic-element-resizer {
\r
575 position: absolute;
\r
578 font-size: 8px; /* ie */
\r
579 line-height: 8px; /* ie */
\r
580 border: 1px solid #333;
\r
581 background-color: #fff;
\r
586 #comic-element-resizer-top {
\r
590 .current-resizer-is-0 #comic-element-resizer-top {
\r
591 background-color: #f66;
\r
593 #comic-element-resizer-left {
\r
597 .current-resizer-is-1 #comic-element-resizer-left {
\r
598 background-color: #f66;
\r
600 #comic-element-resizer-right {
\r
604 .current-resizer-is-2 #comic-element-resizer-right {
\r
605 background-color: #f66;
\r
607 #comic-element-resizer-bottom {
\r
611 .current-resizer-is-3 #comic-element-resizer-bottom {
\r
612 background-color: #f66;
\r
614 #comic-element-resizer-top-left {
\r
618 .current-resizer-is-4 #comic-element-resizer-top-left {
\r
619 background-color: #f66;
\r
621 #comic-element-resizer-top-right {
\r
625 .current-resizer-is-5 #comic-element-resizer-top-right {
\r
626 background-color: #f66;
\r
628 #comic-element-resizer-bottom-left {
\r
632 .current-resizer-is-6 #comic-element-resizer-bottom-left {
\r
633 background-color: #f66;
\r
635 #comic-element-resizer-bottom-right {
\r
639 .current-resizer-is-7 #comic-element-resizer-bottom-right {
\r
640 background-color: #f66;
\r
643 --------------------------------------------------------------------------------------*/
\r
644 #panel-resizer-top,
\r
645 #panel-resizer-bottom {
\r
646 position: absolute;
\r
647 border: 1px outset #999;
\r
648 background-color: #eee;
\r
649 text-align: center;
\r
656 #panel-resizer-top {
\r
658 border-radius: 8px 8px 0 0;
\r
659 -o-border-radius: 8px 8px 0 0;
\r
660 -ms-border-radius: 8px 8px 0 0;
\r
661 -moz-border-radius: 8px 8px 0 0;
\r
662 -webkit-border-radius: 8px 8px 0 0;
\r
664 #panel-resizer-bottom {
\r
666 border-radius: 0 0 8px 8px;
\r
667 -o-border-radius: 0 0 8px 8px;
\r
668 -ms-border-radius: 0 0 8px 8px;
\r
669 -moz-border-radius: 0 0 8px 8px;
\r
670 -webkit-border-radius: 0 0 8px 8px;
\r
673 /* balloon-tail-mover
\r
674 --------------------------------------------------------------------------------------*/
\r
675 #balloon-tail-mover {
\r
676 position: absolute;
\r
679 font-size: 8px; /* ie */
\r
680 line-height: 8px; /* ie */
\r
681 border: 1px solid #333;
\r
682 background-color: #66f;
\r
683 margin: -5px 0 0 -5px;
\r
686 /* comic element console
\r
687 --------------------------------------------------------------------------------------*/
\r
688 #comic-element-consol-wrapper {
\r
689 position: absolute;
\r
693 #comic-element-consol-container {
\r
694 background: transparent url( "../images/black_50pct.png" ) repeat 0 0;
\r
697 .comic-element-consol-container-hover {
\r
698 background: #000 !important;
\r
701 #comic-element-consol-pushout-wrapper {
\r
703 position: absolute;
\r
707 #comic-element-consol-pushout-inner {
\r
708 border: 1px solid #999;
\r
710 .satellite-left #comic-element-consol-pushout-inner {
\r
715 #comic-element-consol-pushout-tail {
\r
716 border-style: solid;
\r
721 position: absolute;
\r
723 .satellite-left #comic-element-consol-pushout-tail {
\r
724 border-width: 5px 0 5px 10px;
\r
725 border-color: transparent transparent transparent #999;
\r
726 _border-color: #fff #fff #fff #999;
\r
730 .satellite-right #comic-element-consol-pushout-tail {
\r
731 border-width: 5px 10px 5px 0;
\r
732 border-color: transparent #999 transparent transparent;
\r
733 _border-color: #fff #999 #fff #fff;
\r
737 .satellite-top #comic-element-consol-pushout-tail {
\r
738 border-width: 10px 5px 0 5px;
\r
739 border-color: #333 transparent transparent transparent;
\r
740 _border-color: #333 #fff #fff #fff;
\r
744 .satellite-bottom #comic-element-consol-pushout-tail {
\r
745 border-width: 0 5px 10px 5px;
\r
746 border-color: transparent transparent #333 transparent;
\r
747 _border-color: #fff #fff #333 #fff;
\r
753 .comic-element-consol-item {
\r
758 .comic-element-consol-item-small {
\r
763 .comic-element-consol-item div {
\r
766 .comic-element-consol-item-small .button {
\r
773 .comic-element-attribute-label {
\r
774 display: inline-block;
\r
778 text-align: center;
\r
781 .comic-element-attribute-value {
\r
786 #comic-element-z-value,
\r
787 #comic-element-a-value {
\r
790 #comic-element-w-percent-value,
\r
791 #comic-element-h-percent-value {
\r
795 #comic-element-keep-aspect {
\r
796 position: relative;
\r
803 border: 1px solid #ccc;
\r
809 --------------------------------------------------------------------------------------*/
\r
811 text-align: center;
\r
813 position: absolute;
\r
822 display: table-cell;
\r
823 vertical-align: middle;
\r
827 .text-element table,
\r
828 .text-element tbody,
\r
836 text-align: center;
\r
837 vertical-align: middle;
\r
839 .text-element table {
\r
840 table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */
\r
844 --------------------------------------------------------------------------------------*/
\r
846 position: absolute;
\r
848 border-bottom: 1px solid #999;
\r
849 background-color: #fff;
\r
850 box-shadow: 1px 4px 9px #333;
\r
851 -moz-box-shadow: 1px 4px 9px #333;
\r
852 -webkit-box-shadow: 1px 4px 9px #333;
\r
853 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
856 .window-header-title,
\r
857 .window-close-button {
\r
862 text-align: center;
\r
864 padding-bottom: 6px;
\r
865 background-color: #444;
\r
867 .window-wrapper-hover .window-header-title {
\r
868 background-color: #333;
\r
870 .window-close-button {
\r
871 position: absolute;
\r
874 border-left: 1px solid #666;
\r
876 padding-right: 9px;
\r
877 border-radius: 0 8px 0 0;
\r
878 -o-border-radius: 0 8px 0 0;
\r
879 -ms-border-radius: 0 8px 0 0;
\r
880 -moz-border-radius: 0 8px 0 0;
\r
881 -webkit-border-radius: 0 8px 0 0;
\r
886 .window-header-title {
\r
887 border-radius: 8px 8px 0 0;
\r
888 -o-border-radius: 8px 8px 0 0;
\r
889 -ms-border-radius: 8px 8px 0 0;
\r
890 -moz-border-radius: 8px 8px 0 0;
\r
891 -webkit-border-radius: 8px 8px 0 0;
\r
894 position: absolute;
\r
896 border-right: 1px solid #999;
\r
897 border-left: 1px solid #aaa;
\r
898 *border-left: 1px solid #ccc;
\r
901 html>/**/body .window-body {
\r
902 border-left /***/: 1px solid #ccc\9;
\r
908 background-color: #333;
\r
909 position: absolute;
\r
913 .window-resize-button {
\r
914 position: absolute;
\r
917 background-image: url('../images/sprite.gif');
\r
918 background-repeat: no-repeat;
\r
919 background-position: -70px -60px;
\r
923 text-indent: -9999px;
\r
924 text-align: center;
\r
929 --------------------------------------------------------------------------------------*/
\r
930 .multi-page-container {
\r
938 .sidenavi-item:link {
\r
940 border-bottom: 1px solid #666;
\r
942 text-decoration: none;
\r
945 .sidenavi-item:hover {
\r
946 background-color: #ccc;
\r
947 text-decoration: none;
\r
949 .sidenavi .current {
\r
950 background-color: #666;
\r
954 _position: relative; /* for ie6 */
\r
955 padding: 1em 1em 2em 1em;
\r
956 margin-left: 100px;
\r
962 /* Background Window
\r
963 --------------------------------------------------------------------------------------*/
\r
965 #select-bg-pattern-button,
\r
966 #reset-bg-pattern-button,
\r
968 #select-bg-color-button,
\r
969 #reset-bg-color-button {
\r
970 position: absolute;
\r
971 text-align: center;
\r
977 box-shadow: 1px 2px 3px #000;
\r
978 -moz-box-shadow: 1px 2px 3px #000;
\r
979 -webkit-box-shadow: 1px 2px 3px #000;
\r
987 #select-bg-pattern-button,
\r
988 #reset-bg-pattern-button,
\r
989 #select-bg-color-button,
\r
990 #reset-bg-color-button {
\r
991 border: 1px outset #666;
\r
996 #select-bg-pattern-button {
\r
1000 #reset-bg-pattern-button {
\r
1008 background-color: #66f;
\r
1010 #select-bg-color-button {
\r
1014 #reset-bg-color-button {
\r
1021 /* Tool-box Window
\r
1022 --------------------------------------------------------------------------------------*/
\r
1023 #toolbox-add-image-button,
\r
1024 #toolbox-add-text-button,
\r
1025 #toolbox-edit-bg-button,
\r
1026 #toolbox-switch-grid,
\r
1027 #toolbox-popup-help-button,
\r
1028 #toolbox-post-button {
\r
1029 position: absolute;
\r
1033 line-height: 40px;
\r
1035 #toolbox-add-image-button {
\r
1038 #toolbox-add-text-button {
\r
1041 #toolbox-edit-bg-button {
\r
1044 line-height: 30px;
\r
1046 #toolbox-switch-grid,
\r
1047 #toolbox-popup-help-button {
\r
1050 line-height: 30px;
\r
1052 #toolbox-switch-grid {
\r
1053 width: 45px !important;
\r
1055 #toolbox-popup-help-button {
\r
1056 width: 35px !important;
\r
1057 left: 63px !important;
\r
1060 #toolbox-post-button {
\r
1063 line-height: 50px;
\r
1067 --------------------------------------------------------------------------------------*/
\r
1071 position: absolute;
\r
1074 background-attachment: fixed;
\r
1075 background-repeat: repeat;
\r
1076 /* background-image: url('grid.gif'); grid用イメージはgrid使用時にjsで埋め込み */
\r