--- /dev/null
+/*\r\r
+ * html2comic Javascript Editor -\r\r
+ * \r\r
+ * main.css\r\r
+ * \r\r
+ * version 0.1.0\r\r
+ *\r\r
+ * \r\r
+ * \r\r
+ */\r\r
+\r\r
+/* VML ( v\:* don't work for ie8(ie8mode))\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ v\:shape,\r\r
+ v\:image {\r\r
+ behavior: url(#default#VML);\r\r
+ display: block;\r\r
+ }\r\r
+\r\r
+/* Reset\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ html, body {\r\r
+ margin: 0;\r\r
+ padding: 0;\r\r
+ overflow: hidden;\r\r
+ }\r\r
+\r\r
+/* Reset\r\r
+---------------------------------------------------------------------------------------*/\r\r
+/*\r\r
+Copyright (c) 2009, Yahoo! Inc. All rights reserved.\r\r
+Code licensed under the BSD License:\r\r
+http://developer.yahoo.net/yui/license.txt\r\r
+version: 2.7.0\r\r
+*/\r\r
+ body{\r\r
+ font: 13px/1.231 arial,helvetica,clean,sans-serif;\r\r
+ line-height: 1;\r\r
+ *font-size: small;\r\r
+ *font: x-small;\r\r
+ }\r\r
+ select, input, button, textarea, button{\r\r
+ font: 99% arial,helvetica,clean,sans-serif;\r\r
+ }\r\r
+ table{\r\r
+ font-size: inherit;\r\r
+ font: 100%;\r\r
+ }\r\r
+ \r\r
+ html, body, div, span, applet, object, iframe,\r\r
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,\r\r
+ a, abbr, acronym, address, big, cite, code,\r\r
+ del, dfn, em, font, img, ins, kbd, q, s, samp,\r\r
+ small, strike, strong, sub, sup, tt, var,\r\r
+ b, u, i, center,\r\r
+ dl, dt, dd, ol, ul, li,\r\r
+ fieldset, form, label, legend,\r\r
+ table, caption, tbody, tfoot, thead {\r\r
+ margin: 0;\r\r
+ padding: 0;\r\r
+ border: 0;\r\r
+ outline: 0;\r\r
+ vertical-align: baseline;\r\r
+ font-family: "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,sans-serif;\r\r
+ }\r\r
+ \r\r
+ p {\r\r
+ text-shadow: #000 0 0 0;/* for Safari */ \r\r
+ -moz-opacity: 0.99;/* for Firefox */ \r\r
+ }\r\r
+ \r\r
+ pre, code, kbd, samp, tt {\r\r
+ font-family: monospace;\r\r
+ line-height: 100%;\r\r
+ *font-size: 108%;\r\r
+ margin-bottom: 1em;\r\r
+ }\r\r
+\r\r
+ /* http://e2designer.seesaa.net/article/152168876.html */\r\r
+ /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r\r
+ pre {\r\r
+ white-space: pre; /* CSS 2.0 */\r\r
+ white-space: pre-wrap; /* CSS 2.1 */\r\r
+ white-space: pre-line; /* CSS 3.0 */\r\r
+ white-space: -pre-wrap; /* Opera 4-6 */\r\r
+ white-space: -o-pre-wrap; /* Opera 7 */\r\r
+ white-space: -moz-pre-wrap; /* Mozilla */\r\r
+ white-space: -hp-pre-wrap; /* HP Printers */\r\r
+ word-wrap: break-word; /* IE 5+ */\r\r
+ }\r\r
+ \r\r
+ /* remember to define focus styles! */\r\r
+ :focus { outline: 0;}\r\r
+ \r\r
+ /* remember to highlight inserts somehow! */\r\r
+ ins { text-decoration: none;}\r\r
+ del { text-decoration: line-through;}\r\r
+ \r\r
+ /* http://honoo-no.com/creators/2008/02/14_211120.html */\r\r
+ textarea, input {\r\r
+ font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3",sans-serif;\r\r
+ }\r\r
+ ul, ol, dl {\r\r
+ margin-left: 2em;\r\r
+ }\r\r
+\r\r
+ dt {\r\r
+ margin: 1em 0 0 1em;\r\r
+ font-weight: bold;\r\r
+ }\r\r
+ dd {\r\r
+ margin: 0.5em 0 0 2em;\r\r
+ }\r\r
+\r\r
+/* ClearFix\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ /* for modern brouser */\r\r
+ claerfix:after { \r\r
+ content: "."; \r\r
+ display: block; \r\r
+ visibility: hidden; \r\r
+ height: 0.1px; \r\r
+ font-size: 0.1em; \r\r
+ line-height: 0; \r\r
+ clear: both; \r\r
+ } \r\r
+ /* IE7,MacIE5 */\r\r
+ .clearfix {\r\r
+ display: inline-block;\r\r
+ }\r\r
+ /* WinIE6 below, Exclude MacIE5 \*/\r\r
+ * html .clearfix {\r\r
+ zoom: 1;\r\r
+ }\r\r
+ .clearfix {\r\r
+ display: block;\r\r
+ overflow: auto;\r\r
+ }\r\r
+ /**/\r\r
+\r\r
+\r\r
+/* Typography\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ a:link { color:#008;}\r\r
+ a:visited { color: #505;}\r\r
+ a { text-decoration: none;}\r\r
+ \r\r
+ a:hover {\r\r
+ text-decoration: underline;\r\r
+ color: #f60;\r\r
+ }\r\r
+ \r\r
+ h2 {\r\r
+ letter-spacing: 2px;\r\r
+ border-bottom: 1px dotted #333333;\r\r
+ font-size: 1.4em;\r\r
+ line-height: 1.4em;\r\r
+ text-align: center;\r\r
+ margin: 0 0 1em;\r\r
+ } \r\r
+ h3, h4 {\r\r
+ font-size: 116%;\r\r
+ font-weight: bold;\r\r
+ }\r\r
+ h3 {\r\r
+ letter-spacing: 1px;\r\r
+ border: 1px #333 solid;\r\r
+ border-width: 0 0 1px 0.5em;\r\r
+ padding: 4px 0 2px 0.6em;\r\r
+ margin: 2em 0 1em;\r\r
+ }\r\r
+ h4 {\r\r
+ letter-spacing: 1px;\r\r
+ border-bottom: 1px #999 dotted;\r\r
+ padding: 6px 6px 2px;\r\r
+ margin: 2em 7px 1em;\r\r
+ }\r\r
+ h5, h6 {\r\r
+ font-size: 1em;\r\r
+ padding: 0 5px 0;\r\r
+ margin: 1.5em 14px 1em;\r\r
+ }\r\r
+ h5 {\r\r
+ border-left: 5px #999 solid;\r\r
+ letter-spacing: 1px;\r\r
+ }\r\r
+ h6 {\r\r
+ border-left: 3px #666 double;\r\r
+ }\r\r
+ \r\r
+ p {\r\r
+ margin: 0 0 1em;\r\r
+ }\r\r
+ \r\r
+ blockquote, cite {}\r\r
+ em {}\r\r
+\r\r
+ /* tables still need 'cellspacing="0"' in the markup */\r\r
+ table {\r\r
+ width: 440px;\r\r
+ border: #999 solid;\r\r
+ border-width: 1px 1px 0 0;\r\r
+ border-collapse: collapse;\r\r
+ empty-cells: show;\r\r
+ border-spacing: 0;\r\r
+ line-height: 1.6em;\r\r
+ /*\*/\r\r
+ margin: 9px auto 1em;\r\r
+ _margin: 9px 15px 1em;\r\r
+ /* */\r\r
+ }\r\r
+\r\r
+ th, td {\r\r
+ padding: 5px;\r\r
+ border: #999 solid;\r\r
+ border-width: 0 0 1px 1px;\r\r
+ }\r\r
+ \r\r
+/* View Container\r\r
+---------------------------------------------------------------------------------------*/ \r\r
+ .view-container {\r\r
+ display: none;\r\r
+ position: absolute;\r\r
+ left: 0;\r\r
+ top: 0;\r\r
+ width: 100%;\r\r
+ height: 100%;\r\r
+ }\r\r
+\r\r
+/* Overlay\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ #overlay-container,\r\r
+ #overlay-shadow {\r\r
+ position: absolute;\r\r
+ left: 0;\r\r
+ top: 0;\r\r
+ width: 100%;\r\r
+ height: 100%;\r\r
+ }\r\r
+ #overlay-shadow {\r\r
+ background-color: #000;\r\r
+ opacity: 0.5;\r\r
+ -moz-opacity: 0.5;\r\r
+ filter: alpha(opacity=50);\r\r
+ -ms-filter: alpha(opacity=50);\r\r
+ }\r\r
+ .h2c-ActiveX-disabled #overlay-shadow {\r\r
+ \r\r
+ }\r\r
+ \r\r
+ #overlay-close-button {\r\r
+ border: 2px solid #f00;\r\r
+ color: #f00;\r\r
+ font-weight: bold;\r\r
+ font-size: 16px;\r\r
+ line-height: 16px;\r\r
+ text-align: center;\r\r
+ cursor: pointer;\r\r
+ overflow: hidden;\r\r
+ width: 20px;\r\r
+ height: 20px;\r\r
+ padding: 2px;\r\r
+ position: absolute;\r\r
+ top: 9px;\r\r
+ right: 9px;\r\r
+ border-radius: 5px;\r\r
+ -o-border-radius: 5px;\r\r
+ -ms-border-radius: 5px;\r\r
+ -moz-border-radius: 5px;\r\r
+ -webkit-border-radius: 5px;\r\r
+ }\r\r
+\r\r
+/* Button\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ .button {\r\r
+ border: 1px outset #ccc;\r\r
+ background-color: #eee;\r\r
+ color: #666;\r\r
+ font-weight: bold;\r\r
+ text-align: center;\r\r
+ cursor: pointer;\r\r
+ overflow: hidden;\r\r
+ height: 30px;\r\r
+ line-height: 30px;\r\r
+ border-radius: 5px;\r\r
+ -o-border-radius: 5px;\r\r
+ -ms-border-radius: 5px;\r\r
+ -moz-border-radius: 5px;\r\r
+ -webkit-border-radius: 5px;\r\r
+ }\r\r
+\r\r
+/* Loading\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ .loading {\r\r
+ background-image: url( loading.gif);\r\r
+ background-position: 50% 50%;\r\r
+ background-repeat: no-repeat;\r\r
+ }\r\r
+ .error {\r\r
+ background-image: url( error.png);\r\r
+ background-position: 50% 50%;\r\r
+ background-repeat: no-repeat;\r\r
+ }\r\r
+\r\r
+/* img mirror\r\r
+---------------------------------------------------------------------------------------*/ \r\r
+ img.img-flip-v { /* 上下反転 */\r\r
+ transform: scale( 1, -1);\r\r
+ -o-transform: scale( 1, -1);\r\r
+ -ms-transform: scale( 1, -1);\r\r
+ -moz-transform: scale( 1, -1);\r\r
+ -webkit-transform: scale( 1, -1);\r\r
+ filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r\r
+ -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r\r
+ }\r\r
+ v\:image.img-flip-v {\r\r
+ flip: y; /* vml */\r\r
+ } \r\r
+ \r\r
+ img.img-flip-h { /* 左右反転 */\r\r
+ transform: scale( -1, 1);\r\r
+ -o-transform: scale( -1, 1);\r\r
+ -ms-transform: scale( -1, 1);\r\r
+ -moz-transform: scale( -1, 1);\r\r
+ -webkit-transform: scale( -1, 1);\r\r
+ filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r\r
+ -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r\r
+ }\r\r
+ v\:image.img-flip-h {\r\r
+ flip: x; /* vml */\r\r
+ }\r\r
+ \r\r
+ img.img-flip-vh { /* 上下左右反転 */\r\r
+ transform: scale( -1, -1);\r\r
+ -o-transform: scale( -1, -1);\r\r
+ -ms-transform: scale( -1, -1);\r\r
+ -moz-transform: scale( -1, -1);\r\r
+ -webkit-transform: scale( -1, -1);\r\r
+ filter: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r\r
+ -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r\r
+ }\r\r
+ v\:image.img-flip-vh {\r\r
+ rotation : 180; /* vml */\r\r
+ }\r\r
+\r\r
+/* img mirror with png-fix\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ .img-flip-v .img-flip-with-pngfix-v,\r\r
+ .img-flip-vh .img-flip-with-pngfix-v {\r\r
+ filter: flipv();\r\r
+ }\r\r
+ .img-flip-h .img-flip-with-pngfix-h,\r\r
+ .img-flip-vh .img-flip-with-pngfix-h {\r\r
+ filter: fliph();\r\r
+ }\r\r
+\r\r
+/* grobal-navi\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ #grobal-navi {\r\r
+ position: absolute;\r\r
+ right: 20px;\r\r
+ top: 0;\r\r
+ text-align: right;\r\r
+ height: 30px;\r\r
+ border-right: 1px solid #666;\r\r
+ }\r\r
+ #grobal-navi a,\r\r
+ #grobal-navi a:link,\r\r
+ #grobal-navi a:visited,\r\r
+ #grobal-navi a:active {\r\r
+ text-align: center;\r\r
+ color: #666;\r\r
+ text-decoration: none;\r\r
+ display: block;\r\r
+ float: left;\r\r
+ width: 80px;\r\r
+ border-left: 1px solid #666;\r\r
+ font-size: 12px;\r\r
+ line-height: 12px;\r\r
+ padding: 11px 0 7px;\r\r
+ outline: 0;\r\r
+ }\r\r
+ #grobal-navi a:active {\r\r
+ background-color: #333;\r\r
+ }\r\r
+ #grobal-navi a:hover {\r\r
+ background-color: #999;\r\r
+ color: #fff;\r\r
+ }\r\r
+/*--------------------------------------------------------------------------------------\r\r
+ * \r\r
+ * home\r\r
+ * \r\r
+ -------------------------------------------------------------------------------------*/\r\r
+ #home {\r\r
+\r\r
+ }\r\r
+\r\r
+\r\r
+/*--------------------------------------------------------------------------------------\r\r
+ * \r\r
+ * Editor\r\r
+ * \r\r
+ -------------------------------------------------------------------------------------*/\r\r
+ #editor {\r\r
+ overflow: hidden;\r\r
+ background-color: #f5f5f5;\r\r
+ }\r\r
+\r\r
+ /* Text Editor\r\r
+ --------------------------------------------------------------------------------------*/ \r\r
+ #speach-editor-wrapper {\r\r
+ position: absolute;\r\r
+ }\r\r
+ #speach-editor-wrapper form {\r\r
+ width: 100%;\r\r
+ height: 100%;\r\r
+ }\r\r
+ #speach-editor {\r\r
+ width: 100%;\r\r
+ height: 100%;\r\r
+ border: 1px outset #ccc;\r\r
+ outline: 1px;\r\r
+ }\r\r
+ #speach-edit-complete-button {\r\r
+ margin: 10px auto 0;\r\r
+ }\r\r
+\r\r
+ /* Image Group\r\r
+ --------------------------------------------------------------------------------------*/\r\r
+ #image-gruop-wrapper {\r\r
+ position: absolute;\r\r
+ top: 0;\r\r
+ left: 0;\r\r
+ }\r\r
+ #image-icon-container {\r\r
+ position: absolute;\r\r
+ top: 0;\r\r
+ left: 0;\r\r
+ height: 200px;\r\r
+ width: 100%;\r\r
+ background-color: #fff;\r\r
+ border: #fff solid;\r\r
+ border-width: 0; \r\r
+ }\r\r
+ #image-gruop-button {\r\r
+ width: 200px;\r\r
+ position: absolute;\r\r
+ left: 0;\r\r
+ bottom: -40px;\r\r
+ _bottom: 0;\r\r
+ }\r\r
+ .image-gruop-item {\r\r
+ width: 150px;\r\r
+ height: 200px;\r\r
+ position: absolute;\r\r
+ top: 0;\r\r
+ left: 0;\r\r
+ text-align: center;\r\r
+ }\r\r
+ .image-gruop-item .reversible-image-container {\r\r
+ width: 150px;\r\r
+ height: 200px;\r\r
+ }\r\r
+ .image-gruop-item .reversible-image-container img {\r\r
+ width: 100%;\r\r
+ height: 100%;\r\r
+ }\r\r
+ .image-gruop-item-title {\r\r
+ position: absolute;\r\r
+ bottom: 0;\r\r
+ left: 0;\r\r
+ text-align: center;\r\r
+ width: 100%;\r\r
+ height: 30px;\r\r
+ }\r\r
+ \r\r
+\r\r
+/* MenuBar\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ #menu-bar {\r\r
+ position: absolute;\r\r
+ top: 0;\r\r
+ left: 0;\r\r
+ width: 100%;\r\r
+ height: 30px;\r\r
+ background-color: #fff;\r\r
+ box-shadow: 0 4px 9px #333;\r\r
+ -moz-box-shadow: 0 4px 9px #333;\r\r
+ -webkit-box-shadow: 0 4px 9px #333;\r\r
+ filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);\r\r
+ }\r\r
+ .menu-bar-item,\r\r
+ .menu-bar-item-focus {\r\r
+ position: absolute;\r\r
+ top: 0;\r\r
+ width: 80px;\r\r
+ color: #666;\r\r
+ }\r\r
+ .menu-bar-item div,\r\r
+ .menu-bar-item-focus div {\r\r
+ cursor: pointer;\r\r
+ overflow: hidden;\r\r
+ height: 30px;\r\r
+ line-height: 30px; \r\r
+ padding-left: 0.6em;\r\r
+ font-size: 14px;\r\r
+ }\r\r
+ .menu-bar-item-focus div {\r\r
+ background-color: #66f;\r\r
+ color: #eee;\r\r
+ }\r\r
+ .menu-bar-item ul {\r\r
+ display: none;\r\r
+ }\r\r
+ .menu-bar-item-focus ul {\r\r
+ position: absolute;\r\r
+ list-style: none;\r\r
+ top: 30px;\r\r
+ width: 200px;\r\r
+ margin: 0;\r\r
+ padding: 0;\r\r
+ background-color: #fff;\r\r
+ color: #666;\r\r
+ border: 1px solid #ccc;\r\r
+ box-shadow: 1px 4px 9px #333;\r\r
+ -moz-box-shadow: 1px 4px 9px #333;\r\r
+ -webkit-box-shadow: 1px 4px 9px #333;\r\r
+ filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r\r
+ }\r\r
+ .menu-bar-item-focus li {\r\r
+ display: block;\r\r
+ cursor: pointer;\r\r
+ width: 200px;\r\r
+ height: 30px;\r\r
+ line-height: 30px;\r\r
+ }\r\r
+ .menu-bar-item-focus li.disabled {\r\r
+ cursor: default;\r\r
+ }\r\r
+ .menu-bar-item-focus a,\r\r
+ .menu-bar-item-focus a:link,\r\r
+ .menu-bar-item-focus a:visited {\r\r
+ color: #666;\r\r
+ position: relative;\r\r
+ display: block;\r\r
+ width: 200px;\r\r
+ height: 30px;\r\r
+ line-height: 30px;\r\r
+ *cursor: pointer;\r\r
+ }\r\r
+ .menu-bar-item-focus a:hover {\r\r
+ color: #333;\r\r
+ background-color: #ccf;\r\r
+ text-decoration: none;\r\r
+ *cursor: pointer;\r\r
+ } \r\r
+ .menu-bar-item-focus li.disabled a,\r\r
+ .menu-bar-item-focus li.disabled a:link,\r\r
+ .menu-bar-item-focus li.disabled a:visited,\r\r
+ .menu-bar-item-focus li.disabled a:active,\r\r
+ .menu-bar-item-focus li.disabled a:hover {\r\r
+ color: #999;\r\r
+ background-color: #fff;\r\r
+ *cursor: default;\r\r
+ }\r\r
+ .menu-bar-item-focus span {\r\r
+ position: absolute;\r\r
+ top: 0;\r\r
+ left: 10px;\r\r
+ display: block;\r\r
+ font-size: 14px;\r\r
+ font-weight: bold;\r\r
+ width: 120px;\r\r
+ overflow: hidden;\r\r
+ }\r\r
+ .menu-bar-item-focus kbd {\r\r
+ position: absolute;\r\r
+ top: 11px;\r\r
+ left: 140px;\r\r
+ display: block;\r\r
+ font-size: 10px;\r\r
+ color: #999;\r\r
+ width: 60px;\r\r
+ overflow: hidden;\r\r
+ }\r\r
+ .menu-bar-item-focus li.separator {\r\r
+ width: 200px;\r\r
+ height: 0;\r\r
+ line-height: 0;\r\r
+ border-top: 1px solid #ccc;\r\r
+ margin: 0;\r\r
+ padding: 0;\r\r
+ }\r\r
+\r\r
+/* whiteGlass\r\r
+---------------------------------------------------------------------------------------*/ \r\r
+ #whiteGlass-container {\r\r
+ position: absolute;\r\r
+ top: 0;\r\r
+ left: 0;\r\r
+ width: 100%;\r\r
+ height: 100%;\r\r
+ }\r\r
+ #whiteGlass-container div {\r\r
+ position: absolute;\r\r
+ background-color: #fff;\r\r
+ opacity: 0.7;\r\r
+ -moz-opacity: 0.7;\r\r
+ filter: alpha(opacity=70);\r\r
+ -ms-filter: alpha(opacity=70);\r\r
+ }\r\r
+ #whiteGlass-top {\r\r
+ top: 0;\r\r
+ left: 0;\r\r
+ width: 100%;\r\r
+ height: 20%;\r\r
+ }\r\r
+ #whiteGlass-left {\r\r
+ top: 20%;\r\r
+ left: 0;\r\r
+ width: 20%;\r\r
+ height: 60%;\r\r
+ }\r\r
+ #whiteGlass-right {\r\r
+ top: 20%;\r\r
+ left: 80%;\r\r
+ width: 20%;\r\r
+ height: 60%;\r\r
+ }\r\r
+ #whiteGlass-bottom {\r\r
+ top: 80%;\r\r
+ left: 0;\r\r
+ width: 100%;\r\r
+ height: 20%;\r\r
+ }\r\r
+\r\r
+/* panel\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ #panel-border {\r\r
+ position: absolute;\r\r
+ border: 2px solid #333;\r\r
+ }\r\r
+\r\r
+/* mouse-operation-catcher\r\r
+---------------------------------------------------------------------------------------*/ \r\r
+ #mouse-operation-catcher {\r\r
+ position: absolute;\r\r
+ top: 0;\r\r
+ left: 0;\r\r
+ width: 100%;\r\r
+ height: 100%; /* 100% don't work for ie6, so ie6 need to set height-'px' by js */\r\r
+ *background-color: #fff;\r\r
+ filter: alpha(opacity=0);\r\r
+ }\r\r
+ html>/**/body #mouse-operation-catcher { \r\r
+ background-color /***/: #fff\9; \r\r
+ -ms-filter /***/: alpha(opacity=0)\9;\r\r
+ } \r\r
+ /*\r\r
+ * ieでは、背景を設定しないと、mouse-operation-catcherが働かない。\r\r
+ * activeX有効の場合は背景を着色してfilterで透明に。\r\r
+ * activeX無効の場合は透明gifを使用\r\r
+ * background: url(4x4.gif) fixed repeat;\r
+ */\r\r
+\r\r
+/* comic-element\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ #comic-element-container {\r\r
+ position: absolute;\r\r
+ \r\r
+ }\r\r
+ .comic-element-wrapper {\r\r
+ position: absolute;\r\r
+ }\r\r
+ #comic-element-container img {\r\r
+ width: 100%;\r\r
+ height: 100%;\r\r
+ position: absolute;\r\r
+ top: 0;\r\r
+ left: 0;\r\r
+ }\r\r
+\r\r
+/* comic-element-resizer\r\r
+---------------------------------------------------------------------------------------*/ \r\r
+ #comic-element-resizer-container {\r\r
+ position: absolute;\r\r
+ border: 1px solid #999;\r\r
+ }\r\r
+ .comic-element-resizer {\r\r
+ position: absolute;\r\r
+ width: 8px;\r\r
+ height: 8px;\r\r
+ font-size: 8px; /* ie */\r\r
+ line-height: 8px; /* ie */\r\r
+ border: 1px solid #333;\r\r
+ background-color: #fff;\r\r
+ }\r\r
+ /*\r\r
+ * marker\r\r
+ */\r\r
+ #comic-element-resizer-top {\r\r
+ top: -5px;\r\r
+ left: 50%;\r\r
+ }\r\r
+ #comic-element-resizer-left {\r\r
+ top: 50%;\r\r
+ left: -5px;\r\r
+ }\r\r
+ #comic-element-resizer-right {\r\r
+ top: 50%;\r\r
+ right: -5px;\r\r
+ }\r\r
+ #comic-element-resizer-bottom {\r\r
+ bottom: -5px;\r\r
+ left: 50%;\r\r
+ }\r\r
+ #comic-element-resizer-top-left {\r\r
+ top: -5px;\r\r
+ left: -5px;\r\r
+ }\r\r
+ #comic-element-resizer-top-right {\r\r
+ top: -5px;\r\r
+ right: -5px;\r\r
+ }\r\r
+ #comic-element-resizer-bottom-left {\r\r
+ bottom: -5px;\r\r
+ left: -5px;\r\r
+ }\r\r
+ #comic-element-resizer-bottom-right {\r\r
+ bottom: -5px;\r\r
+ right: -5px;\r\r
+ } \r\r
+/* panel-resizer\r\r
+---------------------------------------------------------------------------------------*/ \r\r
+ #panel-resizer-top,\r\r
+ #panel-resizer-bottom {\r\r
+ position: absolute;\r\r
+ border: 1px outset #999;\r\r
+ background-color: #eee;\r\r
+ text-align: center;\r\r
+ font-size: 12px;\r\r
+ line-height: 12px;\r\r
+ padding: 9px 0;\r\r
+ left: -2px;\r\r
+ }\r\r
+ \r\r
+ #panel-resizer-top {\r\r
+ top: -37px;\r\r
+ border-radius: 8px 8px 0 0;\r\r
+ -o-border-radius: 8px 8px 0 0;\r\r
+ -ms-border-radius: 8px 8px 0 0;\r\r
+ -moz-border-radius: 8px 8px 0 0;\r\r
+ -webkit-border-radius: 8px 8px 0 0;\r\r
+ }\r\r
+ #panel-resizer-bottom {\r\r
+ bottom: -37px;\r\r
+ border-radius: 0 0 8px 8px;\r\r
+ -o-border-radius: 0 0 8px 8px;\r\r
+ -ms-border-radius: 0 0 8px 8px;\r\r
+ -moz-border-radius: 0 0 8px 8px;\r\r
+ -webkit-border-radius: 0 0 8px 8px;\r\r
+ }\r\r
+\r\r
+/* baloon-tail-mover\r\r
+---------------------------------------------------------------------------------------*/ \r\r
+ #baloon-tail-mover {\r\r
+ position: absolute;\r\r
+ width: 8px;\r\r
+ height: 8px;\r\r
+ font-size: 8px; /* ie */\r\r
+ line-height: 8px; /* ie */\r\r
+ border: 1px solid #333;\r\r
+ background-color: #66f;\r\r
+ margin: -5px 0 0 -5px;\r\r
+ }\r\r
+\r\r
+/* comic element console\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ #comic-element-consol-wrapper {\r\r
+ position: absolute;\r\r
+ }\r\r
+ #image-element-consol {\r\r
+ width: 50px;\r\r
+ overflow: auto;\r\r
+ }\r\r
+ #text-element-consol {\r\r
+ width: 75px;\r\r
+ overflow: auto;\r\r
+ }\r\r
+\r\r
+ #change-image-button,\r\r
+ #layer-back-button,\r\r
+ #layer-forward-button,\r\r
+ #delete-image-button,\r\r
+ #edit-text-button,\r\r
+ #change-text-style-button,\r\r
+ #hide-text-tail-button,\r\r
+ #back-text-button,\r\r
+ #forward-text-button,\r\r
+ #delete-text-button {\r\r
+ text-indent: -9999px;\r\r
+ width: 25px;\r\r
+ height: 25px;\r\r
+ line-height: 25px;\r\r
+ float: left;\r\r
+ background-image: url(icons.gif);\r\r
+ background-repeat: no-repeat;\r\r
+ background-position: 0 0;\r\r
+ cursor: pointer;\r\r
+ }\r\r
+ #hide-text-tail-button {\r\r
+ background-position: -25px -25px;\r\r
+ }\r\r
+ #change-image-button,\r\r
+ #change-text-style-button {\r\r
+ background-position: -25px 0;\r\r
+ } \r\r
+ #layer-back-button,\r\r
+ #back-text-button {\r\r
+ background-position: -50px 0;\r\r
+ }\r\r
+ #layer-forward-button,\r\r
+ #forward-text-button {\r\r
+ background-position: -50px -25px;\r\r
+ }\r\r
+ #delete-image-button,\r\r
+ #delete-text-button {\r\r
+ background-position: 0 -25px;\r\r
+ }\r\r
+ \r\r
+ .console-out #comic-element-consol-wrapper-when-out {\r\r
+ padding: 5px;\r\r
+ background-color: #333;\r\r
+ }\r\r
+ .console-out #comic-element-consol-tail {\r\r
+ border-width: 0 5px 10px 5px;\r\r
+ border-color: transparent transparent #333 transparent;\r\r
+ _border-color: #fff #fff #333 #fff;\r\r
+ border-style: solid;\r\r
+ width: 0;\r\r
+ height: 0;\r\r
+ font-size: 0;\r\r
+ line-height: 0;\r\r
+ position: absolute;\r\r
+ top: -10px;\r\r
+ left: 50%;\r\r
+ }\r\r
+ \r\r
+\r\r
+ \r\r
+/* Panel > speach\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ .speach {\r\r
+ text-align: center;\r\r
+ display: table;\r\r
+ position: absolute;\r\r
+ top: 16.6%;\r\r
+ left: 16.6%;\r\r
+ width: 66.6%;\r\r
+ height: 66.6%;\r\r
+ padding: 0;\r\r
+ margin: 0;\r\r
+ }\r\r
+ .speach-inner {\r\r
+ display: table-cell;\r\r
+ vertical-align: middle;\r\r
+ }\r\r
+ \r\r
+ /* fix for ie */ \r\r
+ .text-element table,\r\r
+ .text-element tbody,\r\r
+ .text-element tr,\r\r
+ .text-element td {\r\r
+ width: 100%;\r\r
+ height: 100%;\r\r
+ border: 0;\r\r
+ padding: 0;\r\r
+ margin: 0;\r\r
+ text-align: center;\r\r
+ vertical-align: middle;\r\r
+ }\r\r
+ .text-element table {\r\r
+ table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */\r\r
+ }\r\r
+ \r\r
+/* Window\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ .window-wrapper {\r\r
+ position: absolute;\r\r
+ top: 10px;\r\r
+ left: 10px;\r\r
+ width: 200px;\r\r
+ height: 200px;\r\r
+ background-color: #fff;\r\r
+ box-shadow: 1px 4px 9px #333;\r\r
+ -moz-box-shadow: 1px 4px 9px #333;\r\r
+ -webkit-box-shadow: 1px 4px 9px #333;\r\r
+ filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r\r
+ }\r\r
+ .window-header,\r\r
+ .window-close-button {\r\r
+ font-size: 12px;\r\r
+ color: #eee;\r\r
+ line-height: 12px;\r\r
+ overflow: hidden;\r\r
+ text-align: center;\r\r
+ padding-top: 8px;\r\r
+ padding-bottom: 6px;\r\r
+ background-color: #333; \r\r
+ }\r\r
+ .window-close-button {\r\r
+ position: absolute;\r\r
+ top: 0;\r\r
+ right: 0;\r\r
+ border-left: 1px solid #666;\r\r
+ padding-left: 9px;\r\r
+ padding-right: 9px;\r\r
+ border-radius: 0 8px 0 0;\r\r
+ -o-border-radius: 0 8px 0 0;\r\r
+ -ms-border-radius: 0 8px 0 0;\r\r
+ -moz-border-radius: 0 8px 0 0;\r\r
+ -webkit-border-radius: 0 8px 0 0;\r\r
+ }\r\r
+ \r\r
+ .window-wrapper,\r\r
+ .window-header {\r\r
+ border-radius: 8px 8px 0 0;\r\r
+ -o-border-radius: 8px 8px 0 0;\r\r
+ -ms-border-radius: 8px 8px 0 0;\r\r
+ -moz-border-radius: 8px 8px 0 0;\r\r
+ -webkit-border-radius: 8px 8px 0 0;\r\r
+ }\r\r
+ .window-body {\r\r
+ position: relative;\r\r
+ overflow: hidden;\r\r
+ }\r\r
+\r\r
+ .window-resize-button {\r\r
+ position: absolute;\r\r
+ bottom: 0;\r\r
+ right: 0;\r\r
+ border-bottom: 20px solid #aaa;\r\r
+ border-left: 20px solid transparent;\r\r
+ _border-left: 20px solid #fff;\r\r
+ line-height: 0;\r\r
+ height: 0;\r\r
+ width: 0;\r\r
+ text-indent: -9999px;\r\r
+ text-align: center;\r\r
+ cursor: pointer;\r\r
+ }\r\r
+ \r\r
+ /*\r\r
+ * page contents\r
+ */\r\r
+ .sidenavi {\r\r
+ width: 100px;\r\r
+ float: left;\r\r
+ }\r\r
+ .sidenavi-item,\r\r
+ .sidenavi-item:link {\r\r
+ display: block;\r\r
+ border-bottom: 1px solid #666;\r\r
+ padding: 1em;\r\r
+ text-decoration: none;\r\r
+ }\r\r
+ .sidenavi-item:hover {\r\r
+ background-color: #ccc;\r\r
+ text-decoration: none;\r\r
+ }\r\r
+ .sidenavi .current {\r\r
+ background-color: #666;\r\r
+ color: #eee;\r\r
+ }\r\r
+ .page-contents {\r\r
+ _position: relative; /* for ie6 */\r\r
+ margin-left: 100px;\r\r
+ padding: 1em 1em 2em 2em;\r\r
+ }\r\r
+ .page-content {\r\r
+ display: none;\r\r
+ }\r\r
+\r\r
+/* editable-text\r\r
+---------------------------------------------------------------------------------------*/\r\r
+\r\r
+ .editable-text {\r\r
+ display: inline-block;\r\r
+ color: #333;\r\r
+ border: 1px solid #ccc;\r\r
+ font-size: 14px;\r\r
+ line-height: 16px;\r\r
+ }\r\r
+ .editable-text a,\r\r
+ .editable-text a:link,\r\r
+ .editable-text a:visited,\r\r
+ .editable-text a:hover,\r\r
+ .editable-text a:active {\r\r
+ padding: 3px;\r\r
+ color: #333;\r\r
+ text-decoration: none;\r\r
+ display: block;\r\r
+ outline: 0;\r\r
+ background-color: #fff;\r\r
+ }\r\r
+ .editable-text a:hover {\r\r
+ background-color: #ccf;\r\r
+ }\r\r
+ .editable-text input {\r\r
+ padding: 3px 0;\r\r
+ width: 100%;\r\r
+ font-family: Arial,Helvetica,sans-serif;\r\r
+ background-color: #ccf;\r\r
+ border: 0;\r\r
+ margin: 0;\r\r
+ outline: 0;\r\r
+ }\r\r
+\r\r
+\r\r
+/* Information Window\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ #comic-element-infomation {\r\r
+ background-color: #fff;\r\r
+ position: absolute;\r\r
+ width: 100%;\r\r
+ }\r\r
+ #comic-element-x, #comic-element-z,\r\r
+ #comic-element-y, #comic-element-a,\r\r
+ #comic-element-w, #comic-element-w-percent,\r\r
+ #comic-element-h, #comic-element-h-percent {\r\r
+ position: absolute;\r\r
+ }\r\r
+ \r\r
+ #comic-element-x,\r\r
+ #comic-element-y,\r\r
+ #comic-element-w,\r\r
+ #comic-element-h {\r\r
+ left: 30px;\r\r
+ }\r\r
+ #comic-element-z,\r\r
+ #comic-element-a,\r\r
+ #comic-element-w-percent,\r\r
+ #comic-element-h-percent {\r\r
+ left: 115px;\r\r
+ }\r\r
+ \r\r
+ #comic-element-x, #comic-element-z {\r\r
+ top: 10px;\r\r
+ }\r\r
+ #comic-element-y, #comic-element-a {\r\r
+ top: 40px;\r\r
+ }\r\r
+ #comic-element-w, #comic-element-w-percent {\r\r
+ top: 80px;\r\r
+ }\r\r
+ #comic-element-h, #comic-element-h-percent {\r\r
+ top: 110px;\r\r
+ }\r\r
+ .comic-element-attribute-label {\r\r
+ display: inline-block;\r\r
+ width: 14px;\r\r
+ line-height: 22px;\r\r
+ *line-height: 22px; /* ie用 input周りのサイズあわせ、よく分からない。 */\r\r
+ color: #666;\r\r
+ text-align: center;\r\r
+ }\r\r
+ .comic-element-attribute-value {\r\r
+ width: 40px;\r\r
+ text-align: right;\r\r
+ }\r\r
+ \r\r
+ #comic-element-z-value,\r\r
+ #comic-element-a-value {\r\r
+ width: 35px;\r\r
+ }\r\r
+ #comic-element-w-percent-value,\r\r
+ #comic-element-h-percent-value {\r\r
+ width: 30px;\r\r
+ }\r\r
+\r\r
+/* Background Window\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ #bg-pattern,\r\r
+ #select-bg-pattern-button,\r\r
+ #reset-bg-pattern-button,\r\r
+ #bg-color,\r\r
+ #select-bg-color-button,\r\r
+ #reset-bg-color-button {\r\r
+ position: absolute;\r\r
+ text-align: center;\r\r
+ cursor: pointer;\r\r
+ }\r\r
+ \r\r
+ #bg-pattern,\r\r
+ #bg-color {\r\r
+ box-shadow: 1px 2px 3px #000;\r\r
+ -moz-box-shadow: 1px 2px 3px #000;\r\r
+ -webkit-box-shadow: 1px 2px 3px #000;\r\r
+ height: 80px;\r\r
+ top: 15px;\r\r
+ }\r\r
+ #bg-pattern {\r\r
+ left: 15px;\r\r
+ width: 100px;\r\r
+ }\r\r
+ #select-bg-pattern-button,\r\r
+ #reset-bg-pattern-button,\r\r
+ #select-bg-color-button,\r\r
+ #reset-bg-color-button {\r\r
+ border: 1px outset #666;\r\r
+ height: 20px;\r\r
+ top: 115px;\r\r
+ line-height: 20px;\r\r
+ }\r\r
+ #select-bg-pattern-button {\r\r
+ left: 15px;\r\r
+ width: 80px;\r\r
+ }\r\r
+ #reset-bg-pattern-button {\r\r
+ left: 95px;\r\r
+ width: 20px;\r\r
+ }\r\r
+ \r\r
+ #bg-color {\r\r
+ left: 125px;\r\r
+ width: 60px;\r\r
+ background-color: #66f;\r\r
+ }\r\r
+ #select-bg-color-button {\r\r
+ left: 125px;\r\r
+ width: 40px;\r\r
+ }\r\r
+ #reset-bg-color-button {\r\r
+ left: 165px;\r\r
+ width: 20px;\r\r
+ }\r\r
+\r\r
+\r\r
+\r\r
+/* Tool-box Window\r\r
+---------------------------------------------------------------------------------------*/ \r\r
+ #toolbox-add-image-button,\r\r
+ #toolbox-add-text-button,\r\r
+ #toolbox-edit-bg-button,\r\r
+ #toolbox-switch-grid,\r\r
+ #toolbox-popup-help-button,\r\r
+ #toolbox-publish-button {\r\r
+ position: absolute;\r\r
+ left: 10px;\r\r
+ width: 90px;\r\r
+ border: 1px outset #999;\r\r
+ height: 40px;\r\r
+ line-height: 40px;\r\r
+ text-align: center;\r\r
+ cursor: pointer;\r\r
+ background-color: #ccc;\r\r
+ border-radius: 8px;\r\r
+ -o-border-radius: 8px;\r\r
+ -ms-border-radius: 8px;\r\r
+ -moz-border-radius: 8px;\r\r
+ -webkit-border-radius: 8px;\r\r
+ }\r\r
+ #toolbox-add-image-button {\r\r
+ top: 10px; \r\r
+ }\r\r
+ #toolbox-add-text-button {\r\r
+ top: 60px;\r\r
+ }\r\r
+ #toolbox-edit-bg-button {\r\r
+ top: 110px;\r\r
+ height: 30px;\r\r
+ line-height: 30px;\r\r
+ }\r\r
+ #toolbox-switch-grid,\r\r
+ #toolbox-popup-help-button {\r\r
+ top: 150px;\r\r
+ height: 30px;\r\r
+ line-height: 30px;\r\r
+ }\r\r
+ #toolbox-switch-grid {\r\r
+ width: 45px !important;\r\r
+ }\r\r
+ #toolbox-popup-help-button {\r\r
+ width: 35px !important;\r\r
+ left: 65px !important;\r\r
+ }\r\r
+ \r\r
+ #toolbox-publish-button {\r\r
+ top: 190px;\r\r
+ height: 50px;\r\r
+ line-height: 50px;\r\r
+ }\r\r
+\r\r
+/* Grid\r\r
+---------------------------------------------------------------------------------------*/\r\r
+ #grid {\r\r
+ width: 100%;\r\r
+ height: 100%;\r\r
+ position: absolute;\r\r
+ left: 0;\r\r
+ top: 0;\r\r
+ background-attachment: fixed;\r\r
+ background-repeat: repeat;\r\r
+ /* background-image: url('grid.gif'); grid用イメージはgrid使用時にjsで埋め込み */\r\r
+ }\r\r
+\r\r
OSDN Git Service
