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
675 #comic-element-consol-container {
\r
676 background: transparent url( "../images/white_70pct.png" ) repeat 0 0;
\r
679 .comic-element-consol-container-hover {
\r
680 background: #fff !important;
\r
683 #comic-element-consol-pushout-wrapper {
\r
685 position: absolute;
\r
689 #comic-element-consol-pushout-inner {
\r
690 border: 1px solid #999;
\r
692 .satellite-left #comic-element-consol-pushout-inner {
\r
697 #comic-element-consol-pushout-tail {
\r
698 border-style: solid;
\r
703 position: absolute;
\r
705 .satellite-left #comic-element-consol-pushout-tail {
\r
706 border-width: 5px 0 5px 10px;
\r
707 border-color: transparent transparent transparent #999;
\r
708 _border-color: #fff #fff #fff #999;
\r
712 .satellite-right #comic-element-consol-pushout-tail {
\r
713 border-width: 5px 10px 5px 0;
\r
714 border-color: transparent #999 transparent transparent;
\r
715 _border-color: #fff #999 #fff #fff;
\r
719 .satellite-top #comic-element-consol-pushout-tail {
\r
720 border-width: 10px 5px 0 5px;
\r
721 border-color: #333 transparent transparent transparent;
\r
722 _border-color: #333 #fff #fff #fff;
\r
726 .satellite-bottom #comic-element-consol-pushout-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
735 .comic-element-consol-item {
\r
740 .comic-element-consol-item-small {
\r
745 .comic-element-consol-item div {
\r
748 .comic-element-consol-item-small .button {
\r
755 .comic-element-attribute-label {
\r
756 display: inline-block;
\r
760 text-align: center;
\r
763 .comic-element-attribute-value {
\r
768 #comic-element-z-value,
\r
769 #comic-element-a-value {
\r
772 #comic-element-w-percent-value,
\r
773 #comic-element-h-percent-value {
\r
777 #comic-element-keep-aspect {
\r
778 position: relative;
\r
785 border: 1px solid #ccc;
\r
791 --------------------------------------------------------------------------------------*/
\r
793 text-align: center;
\r
795 position: absolute;
\r
804 display: table-cell;
\r
805 vertical-align: middle;
\r
809 .text-element table,
\r
810 .text-element tbody,
\r
818 text-align: center;
\r
819 vertical-align: middle;
\r
821 .text-element table {
\r
822 table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */
\r
826 --------------------------------------------------------------------------------------*/
\r
828 position: absolute;
\r
830 border-bottom: 1px solid #999;
\r
831 background-color: #fff;
\r
832 box-shadow: 1px 4px 9px #333;
\r
833 -moz-box-shadow: 1px 4px 9px #333;
\r
834 -webkit-box-shadow: 1px 4px 9px #333;
\r
835 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
838 .window-header-title,
\r
839 .window-close-button {
\r
844 text-align: center;
\r
846 padding-bottom: 6px;
\r
847 background-color: #444;
\r
849 .window-wrapper-hover .window-header-title {
\r
850 background-color: #333;
\r
852 .window-close-button {
\r
853 position: absolute;
\r
856 border-left: 1px solid #666;
\r
858 padding-right: 9px;
\r
859 border-radius: 0 8px 0 0;
\r
860 -o-border-radius: 0 8px 0 0;
\r
861 -ms-border-radius: 0 8px 0 0;
\r
862 -moz-border-radius: 0 8px 0 0;
\r
863 -webkit-border-radius: 0 8px 0 0;
\r
868 .window-header-title {
\r
869 border-radius: 8px 8px 0 0;
\r
870 -o-border-radius: 8px 8px 0 0;
\r
871 -ms-border-radius: 8px 8px 0 0;
\r
872 -moz-border-radius: 8px 8px 0 0;
\r
873 -webkit-border-radius: 8px 8px 0 0;
\r
876 position: absolute;
\r
878 border-right: 1px solid #999;
\r
879 border-left: 1px solid #aaa;
\r
880 *border-left: 1px solid #ccc;
\r
883 html>/**/body .window-body {
\r
884 border-left /***/: 1px solid #ccc\9;
\r
890 background-color: #333;
\r
891 position: absolute;
\r
895 .window-resize-button {
\r
896 position: absolute;
\r
899 background-image: url('../images/sprite.gif');
\r
900 background-repeat: no-repeat;
\r
901 background-position: -70px -60px;
\r
905 text-indent: -9999px;
\r
906 text-align: center;
\r
911 --------------------------------------------------------------------------------------*/
\r
917 .sidenavi-item:link {
\r
919 border-bottom: 1px solid #666;
\r
921 text-decoration: none;
\r
924 .sidenavi-item:hover {
\r
925 background-color: #ccc;
\r
926 text-decoration: none;
\r
928 .sidenavi .current {
\r
929 background-color: #666;
\r
933 _position: relative; /* for ie6 */
\r
934 margin-left: 100px;
\r
935 padding: 1em 1em 2em 1em;
\r
941 /* Background Window
\r
942 --------------------------------------------------------------------------------------*/
\r
944 #select-bg-pattern-button,
\r
945 #reset-bg-pattern-button,
\r
947 #select-bg-color-button,
\r
948 #reset-bg-color-button {
\r
949 position: absolute;
\r
950 text-align: center;
\r
956 box-shadow: 1px 2px 3px #000;
\r
957 -moz-box-shadow: 1px 2px 3px #000;
\r
958 -webkit-box-shadow: 1px 2px 3px #000;
\r
966 #select-bg-pattern-button,
\r
967 #reset-bg-pattern-button,
\r
968 #select-bg-color-button,
\r
969 #reset-bg-color-button {
\r
970 border: 1px outset #666;
\r
975 #select-bg-pattern-button {
\r
979 #reset-bg-pattern-button {
\r
987 background-color: #66f;
\r
989 #select-bg-color-button {
\r
993 #reset-bg-color-button {
\r
1000 /* Tool-box Window
\r
1001 --------------------------------------------------------------------------------------*/
\r
1002 #toolbox-add-image-button,
\r
1003 #toolbox-add-text-button,
\r
1004 #toolbox-edit-bg-button,
\r
1005 #toolbox-switch-grid,
\r
1006 #toolbox-popup-help-button,
\r
1007 #toolbox-post-button {
\r
1008 position: absolute;
\r
1012 line-height: 40px;
\r
1014 #toolbox-add-image-button {
\r
1017 #toolbox-add-text-button {
\r
1020 #toolbox-edit-bg-button {
\r
1023 line-height: 30px;
\r
1025 #toolbox-switch-grid,
\r
1026 #toolbox-popup-help-button {
\r
1029 line-height: 30px;
\r
1031 #toolbox-switch-grid {
\r
1032 width: 45px !important;
\r
1034 #toolbox-popup-help-button {
\r
1035 width: 35px !important;
\r
1036 left: 63px !important;
\r
1039 #toolbox-post-button {
\r
1042 line-height: 50px;
\r
1046 --------------------------------------------------------------------------------------*/
\r
1050 position: absolute;
\r
1053 background-attachment: fixed;
\r
1054 background-repeat: repeat;
\r
1055 /* background-image: url('grid.gif'); grid用イメージはgrid使用時にjsで埋め込み */
\r