app/assets/stylesheets/peta.common.css

   1 @charset "UTF-8";\r
   2 \r
   3 /* pettanR peta.ccommon.css\r
   4  *   version 0.5.4\r
   5  * \r
   6  *   author:\r
   7  *     itozyun\r
   8  */\r
   9 \r
  10 /*  VML ( v\:* don't work for ie8(ie8mode))\r
  11 --------------------------------------------------------------------------------------*/\r
  12         v\:shape,\r
  13         v\:image {\r
  14                 behavior:       url(#default#VML);\r
  15                 display:        block;\r
  16         }\r
  17 \r
  18 /*  dl table\r
  19 --------------------------------------------------------------------------------------*/\r
  20         .dl-table dt,\r
  21         .dl-table-small dt {\r
  22                 float:                  left;\r
  23                 height:                 1.6em;\r
  24                 line-height:    1.6em;\r
  25                 overflow:               hidden;\r
  26                 margin:                 0;\r
  27                 padding:                0 0 0 0.2em;\r
  28         }\r
  29         .dl-table dd,\r
  30         .dl-table-small dd {\r
  31                 margin:                 0 0 0.5em;\r
  32                 line-height:    1.6em;\r
  33                 border-bottom:  1px solid #ccc;\r
  34         }\r
  35         .dl-table dt {\r
  36                 width:                  180px;\r
  37         }\r
  38         .dl-table dd {\r
  39                 padding:                0 0 0 200px;\r
  40         }\r
  41         .dl-table-small dt {\r
  42                 width:                  140px;\r
  43         }\r
  44         .dl-table-small dd {\r
  45                 padding:                0 0 0 160px;\r
  46         }\r
  47 \r
  48 /*  Reversible Image\r
  49 --------------------------------------------------------------------------------------*/        \r
  50         img.img-flip-v { /* 上下反転 */\r
  51                 transform:                              scale( 1, -1);\r
  52                 -o-transform:                   scale( 1, -1);\r
  53                 -ms-transform:                  scale( 1, -1);\r
  54                 -moz-transform:                 scale( 1, -1);\r
  55                 -webkit-transform:              scale( 1, -1);\r
  56         }\r
  57         .pettanr-ActiveX-enabled img.img-flip-v {\r
  58                 filter:                                 flipv();\r
  59                 -ms-filter:                             flipv();                \r
  60         }\r
  61         v\:image.img-flip-v {\r
  62                 flip:                                   y; /* vml */\r
  63         } \r
  64         \r
  65         img.img-flip-h { /* 左右反転 */\r
  66                 transform:                              scale( -1, 1);\r
  67                 -o-transform:                   scale( -1, 1);\r
  68                 -ms-transform:                  scale( -1, 1);\r
  69                 -moz-transform:                 scale( -1, 1);\r
  70                 -webkit-transform:              scale( -1, 1);\r
  71         }\r
  72         .pettanr-ActiveX-enabled img.img-flip-h {\r
  73                 filter:                                 fliph();\r
  74                 -ms-filter:                             fliph();\r
  75         }\r
  76         v\:image.img-flip-h {\r
  77                 flip:                                   x; /* vml */\r
  78         }\r
  79         \r
  80         img.img-flip-vh { /* 上下左右反転 */\r
  81                 transform:                              scale( -1, -1);\r
  82                 -o-transform:                   rotate(180deg);\r
  83                 -ms-transform:                  scale( -1, -1);\r
  84                 -moz-transform:                 scale( -1, -1);\r
  85                 -webkit-transform:              scale( -1, -1);\r
  86         }\r
  87         .pettanr-ActiveX-enabled img.img-flip-vh {\r
  88                 filter:                                 flipv() fliph();\r
  89                 -ms-filter:                             flipv() fliph();\r
  90         }\r
  91         v\:image.img-flip-vh {\r
  92                 rotation :                              180; /* vml */\r
  93         }\r
  94 \r
  95 /*  PettanR Comic\r
  96 --------------------------------------------------------------------------------------*/\r
  97 .pettanr-comic-wrapper {\r
  98         margin:                                 1em auto;\r
  99 }\r
 100         .pettanr-comic-panel {\r
 101                 border-style:                   solid;\r
 102                 border-color:                   #111;\r
 103                 position:                               relative;\r
 104                 margin:                                 1em auto;\r
 105                 overflow:                               hidden;\r
 106         }\r
 107                 .pettanr-comic-panel img,\r
 108                 .pettanr-comic-panel .reversible-image-container {\r
 109                         position:                               absolute;\r
 110                 }\r
 111                 .pettanr-comic-balloon {\r
 112                         position:                               absolute;\r
 113                 }\r
 114                         .pettanr-comic-panel .reversible-image-container img,\r
 115                         .pettanr-comic-balloon img {\r
 116                                 width:                                  100%;\r
 117                                 height:                                 100%;                           \r
 118                         }\r
 119                         .pettanr-comic-balloon p {\r
 120                                 margin:                                 0 !important;\r
 121                                 padding:                                0 !important;                           \r
 122                                 display:                                table;\r
 123                                 position:                               absolute;\r
 124                                 top:                                    0;\r
 125                                 left:                                   16.6%;\r
 126                                 width:                                  66.6%;\r
 127                                 height:                                 100%;\r
 128                                 *height:                                auto;\r
 129                                 *top:                                   50% !important;\r
 130                         }\r
 131                                 .pettanr-comic-balloon p span,\r
 132                                 .pettanr-comic-balloon p strong,\r
 133                                 .pettanr-comic-balloon p em,\r
 134                                 .pettanr-comic-balloon p i,\r
 135                                 .pettanr-comic-balloon p samp,\r
 136                                 .pettanr-comic-balloon p code {\r
 137                                         vertical-align:                 middle;\r
 138                                         text-align:                             center;\r
 139                                         font-size:                              14px; /* opera6 で使用 13px は不可 */\r
 140                                         display:                                table-cell;\r
 141                                         *display:                               block;\r
 142                                         zoom:                                   1;\r
 143                                         *position:                              relative;\r
 144                                         *top:                                   -50%;\r
 145                                 }\r
 146                                 .pettanr-comic-balloon p strong {\r
 147                                         font-weight:                    bold;\r
 148                                 }\r
 149                                 .pettanr-comic-balloon p em,\r
 150                                 .pettanr-comic-balloon p i {\r
 151                                         font-style:                             italic;\r
 152                                 }\r
 153                                 .pettanr-comic-balloon p samp,\r
 154                                 .pettanr-comic-balloon p code {\r
 155                                         font-family:                    monospace;\r
 156                                 }