app/assets/stylesheets/system.css

   1 @charset "UTF-8";\r
   2 \r
   3 /*  VML ( v\:* don't work for ie8(ie8mode))\r
   4 --------------------------------------------------------------------------------------*/\r
   5         v\:shape,\r
   6         v\:image {\r
   7                 behavior:       url(#default#VML);\r
   8                 display:        block;\r
   9         }\r
  10 \r
  11 /*  Reset\r
  12 --------------------------------------------------------------------------------------*/\r
  13 \r
  14 \r
  15         html, body {\r
  16                 margin:                 0;\r
  17                 padding:                0;\r
  18                 height:                 100%;\r
  19         }\r
  20         /* この指定がないと ie で  Util.getAbsolutePosition が狂う  body { font-family:     "MS PGothic", "MS Gothic" } */\r
  21         body {\r
  22                 font-family:    "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS PGothic", Osaka, "MS Gothic", Gothic, sans-serif; \r
  23         }\r
  24         \r
  25         p {\r
  26                 text-shadow:    #000 0 0 0;/* for Safari */ \r
  27                 -moz-opacity:   0.99;/* for Firefox */ \r
  28         }\r
  29 \r
  30         /* http://e2designer.seesaa.net/article/152168876.html */\r
  31         /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r
  32 \r
  33         .break-word {\r
  34                 white-space: pre;           /* CSS 2.0 */\r
  35                 white-space: pre-wrap;      /* CSS 2.1 */\r
  36                 white-space: pre-line;      /* CSS 3.0 */\r
  37                 white-space: -pre-wrap;     /* Opera 4-6 */\r
  38                 white-space: -o-pre-wrap;   /* Opera 7 */\r
  39                 white-space: -moz-pre-wrap; /* Mozilla */\r
  40                 white-space: -hp-pre-wrap;  /* HP Printers */\r
  41                 word-wrap:   break-word;    /* IE 5+ */\r
  42         }\r
  43         \r
  44         /* remember to define focus styles! */\r
  45         :focus { outline: 0;}\r
  46         \r
  47         /* http://web.archive.org/web/20100204222112/http://honoo-no.com/creators/2008/02/14_211120.html */\r
  48         textarea, input {\r
  49                 font-family: "MS PGothic", Osaka, "MS Gothic", "ヒラギノ角ゴ Pro W3", sans-serif;\r
  50         }\r
  51         \r
  52         \r
  53         a:link { color:#008;}\r
  54         a:visited { color: #505;}\r
  55         a { text-decoration: none;}\r
  56         \r
  57         a:hover {\r
  58                 text-decoration:        underline;\r
  59                 color:                          #f60;\r
  60         }\r
  61         \r
  62         \r
  63 /*  ClearFix\r
  64 --------------------------------------------------------------------------------------*/\r
  65 .clearfix:after {\r
  66   content: ".";  /* 新しい要素を作る */\r
  67   display: block;  /* ブロックレベル要素に */\r
  68   clear: both;\r
  69   height: 0;\r
  70   visibility: hidden;\r
  71 }\r
  72 \r
  73 .clearfix {\r
  74   min-height: 1px;\r
  75 }\r
  76 \r
  77 * html .clearfix {\r
  78   height: 1px;\r
  79   /*\*//*/\r
  80   height: auto;\r
  81   overflow: hidden;\r
  82   /**/\r
  83 }\r
  84 \r
  85 /*  Button\r
  86 --------------------------------------------------------------------------------------*/\r
  87         .button {\r
  88                 border:                                 1px solid;\r
  89                 background:                             #E3E3E3;\r
  90                 background:                             -moz-linear-gradient(center top , #F9F9F9, #E3E3E3);\r
  91                 background:                             -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E3E3E3));\r
  92                 border-color:                   #ccc #bbb #aaa;\r
  93                 color:                                  #666;\r
  94                 font-weight:                    bold;\r
  95                 text-align:                             center;\r
  96                 cursor:                                 pointer;\r
  97                 overflow:                               hidden;\r
  98                 height:                                 30px;\r
  99                 line-height:                    30px;\r
 100                 border-radius:                  3px;\r
 101                 -o-border-radius:               3px;\r
 102                 -ms-border-radius:              3px;\r
 103                 -moz-border-radius:             3px;\r
 104                 -webkit-border-radius:  3px;\r
 105         }\r
 106         .button-has-focus {\r
 107                 border-color:                   #4D90FE;\r
 108         }\r
 109 \r
 110         /*  editable-text\r
 111         --------------------------------------------------------------------------------------*/\r
 112         \r
 113                 .editable-text {\r
 114                         display:                        inline-block;\r
 115                         color:                          #333;\r
 116                         border:                         1px solid #ccc;\r
 117                         font-size:                      14px;\r
 118                         line-height:            16px;\r
 119                 }\r
 120                         .editable-text a,\r
 121                         .editable-text a:link,\r
 122                 .editable-text a:visited,\r
 123                 .editable-text a:hover,\r
 124                 .editable-text a:active {\r
 125                                 padding:                        3px;\r
 126                                 color:                          #333;\r
 127                                 text-decoration:        none;\r
 128                                 display:                        block;\r
 129                                 zoom:                           1;\r
 130                                 outline:                        0;\r
 131                                 background-color:       #fff;\r
 132                         }\r
 133                         .editable-text a:hover {\r
 134                                 background-color:       #ccf;\r
 135                         }\r
 136                         .editable-text input {\r
 137                                 padding:                        3px 0;\r
 138                                 width:                          100%;\r
 139                                 font-family:            Arial,Helvetica,sans-serif;\r
 140                                 background-color:       #ccf;\r
 141                                 border:                         0;\r
 142                                 margin:                         0;\r
 143                                 outline:                        0;\r
 144                         }\r
 145                         \r
 146         /*  combobox\r
 147         --------------------------------------------------------------------------------------*/        \r
 148                 .combobox {\r
 149                         display:                        inline-block;\r
 150                         color:                          #333;\r
 151                 }\r
 152                         .combobox a,\r
 153                         .combobox a:link,\r
 154                 .combobox a:visited,\r
 155                 .combobox a:hover,\r
 156                 .combobox a:active {\r
 157                         border:                         1px solid #ccc;\r
 158                                 font-size:                      14px;\r
 159                                 line-height:            16px;                   \r
 160                                 padding:                        3px;\r
 161                                 color:                          #333;\r
 162                                 text-decoration:        none;\r
 163                                 display:                        block;\r
 164                                 zoom:                           1;\r
 165                                 outline:                        0;\r
 166                                 background-color:       #fff;\r
 167                                 position:                       relative;\r
 168                         }\r
 169                         .combobox a:hover {\r
 170                                 background-color:       #ccf;\r
 171                         }\r
 172                         .combobox a:active {\r
 173                                 outline:                        0;\r
 174                         }\r
 175                                 .combobox-toggle {\r
 176                                         position:                       absolute;\r
 177                                         right:                          5px;\r
 178                                         top:                            0;\r
 179                                         display:                        block;\r
 180                                         font-family:            Arial,Helvetica,sans-serif;\r
 181                                         font-size:                      12px;\r
 182                                         line-height:            20px;\r
 183                                         color:                          #999;\r
 184                                 }\r
 185                                 .combobox  a.combobox-has-focus .combobox-toggle {\r
 186                                         color:                          #4D90FE;\r
 187                                 }                               \r
 188                                 \r
 189                                 \r
 190         .option-container {\r
 191                 position:                       absolute;\r
 192                 list-style:                     none;\r
 193                 top:                            30px;\r
 194                 width:                          200px;\r
 195                 margin:                         0;\r
 196                 padding:                        0;\r
 197                 background-color:       #fff;\r
 198                 opacity:                        0.9;\r
 199                 -moz-opacity:           0.9;\r
 200                 -khtml-opacity:         0.9;\r
 201                 color:                          #666;\r
 202                 border:                         1px solid #ccc;\r
 203                 box-shadow:                     1px 4px 9px #333;\r
 204                 -moz-box-shadow:        1px 4px 9px #333;\r
 205                 -webkit-box-shadow:     1px 4px 9px #333;\r
 206                 filter:                         alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 207                 -ms-filter:                     alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 208         }\r
 209                 .option-container li {\r
 210                         display:                block;\r
 211                         cursor:                 pointer;\r
 212                         height:                 30px;\r
 213                         line-height:    30px;\r
 214                 }\r
 215                         .option-container a,\r
 216                         .option-container a:link,\r
 217                         .option-container a:visited {\r
 218                                 color:                  #666;\r
 219                                 position:               relative;\r
 220                                 display:                block;\r
 221                                 padding:                0 10px;\r
 222                                 height:                 30px;\r
 223                                 line-height:    30px;\r
 224                                 *cursor:                pointer;\r
 225                         }\r
 226                         .option-container a:hover {\r
 227                                 color:                          #333;\r
 228                                 background-color:       #ccf;\r
 229                                 text-decoration:        none;\r
 230                                 *cursor:                        pointer;\r
 231                         }\r
 232                         .current-option a,\r
 233                         .current-option a:link,\r
 234                         .current-option a:visited {\r
 235                                 color:                          #e6e6ef;\r
 236                                 background-color:       #66f;\r
 237                                 text-decoration:        none;\r
 238                         }\r
 239                         \r
 240 \r
 241 \r
 242 /*  Loading\r
 243 --------------------------------------------------------------------------------------*/\r
 244         .loading {\r
 245                 background-image:               url( /assets/loading.gif);\r
 246                 background-position:    50% 50%;\r
 247                 background-repeat:              no-repeat;\r
 248         }\r
 249         .error {\r
 250                 background-image:               url( /assets/error.png);\r
 251                 background-position:    50% 50%;\r
 252                 background-repeat:              no-repeat;\r
 253         }\r
 254 \r
 255 \r
 256 \r
 257 \r
 258 /*  Noscript Alert\r
 259 --------------------------------------------------------------------------------------*/\r
 260         #noscript-alert {\r
 261                 border-left:            1px solid #666;\r
 262                 display:                        block;\r
 263                 text-align:                     center;\r
 264                 color:                          red;\r
 265                 font-weight:            bold;\r
 266                 font-size:                      12px;\r
 267                 line-height:            12px;\r
 268                 padding:                        11px 0 7px;\r
 269         }\r
 270 \r
 271 /*--------------------------------------------------------------------------------------\r
 272  * \r
 273  *  home\r
 274  *  \r
 275  -------------------------------------------------------------------------------------*/\r
 276         #home-root {\r
 277                 position:       absolute;\r
 278                 top:            0;\r
 279                 left:           0;\r
 280                 width:          100%;\r
 281                 height:         100%;\r
 282         }\r
 283                 #home-tail-container {\r
 284                         position:       absolute;\r
 285                         padding:        20px;\r
 286                 }\r
 287                         .tail-wrapper {\r
 288                                 width:          150px;\r
 289                                 height:         150px;\r
 290                                 float:          left;\r
 291                                 margin:         0 10px 10px 0;\r
 292                                 overflow:       hidden;\r
 293                                 cursor:         pointer;\r
 294                             position:   relative;\r
 295                         }\r
 296                         .tail-wrapper h2 {\r
 297                                 position:               absolute;\r
 298                                 bottom:                 10px;\r
 299                                 left:                   20px;\r
 300                                 width:                  110px;\r
 301                                 overflow:               hidden;\r
 302                                 color:                  #FFF;\r
 303                                 font-size:              14px;\r
 304                                 line-height:    1.3;\r
 305                                 font-weight:    normal;\r
 306                                 font-family:    Segoe UI,Tahoma,Arial,Verdana,sans-serif;\r
 307                         }\r
 308 \r
 309 /*--------------------------------------------------------------------------------------\r
 310  * \r
 311  *  overlay\r
 312  *  \r
 313  -------------------------------------------------------------------------------------*/\r
 314         #overlay-container,\r
 315         #overlay-shadow {\r
 316                 position:                       absolute;\r
 317                 left:                           0;\r
 318                 top:                            0;\r
 319                 width:                          100%;\r
 320                 height:                         100%;\r
 321                 overflow:                       hidden;\r
 322         }\r
 323                 #overlay-shadow {\r
 324                         background:                     #000;\r
 325                         opacity:                        0.5;\r
 326                         -moz-opacity:           0.5;\r
 327                         -khtml-opacity:         0.5;\r
 328                 }\r
 329                 .pettanr-ActiveX-enabled #overlay-shadow {\r
 330                         filter:                         alpha(opacity=50);\r
 331                         -ms-filter:                     alpha(opacity=50);                      \r
 332                 }\r
 333                 .pettanr-ActiveX-disabled #overlay-shadow {\r
 334                         background:                     transparent url( "/assets/black_50pct.png" )　repeat 0 0;\r
 335                         _background:            url( "/assets/black_50pct.gif" )　repeat 0 0;\r
 336                 }\r
 337                 \r
 338                 #overlay-close-button {\r
 339                         border:                                 2px solid #f00;\r
 340                         color:                                  #f00;\r
 341                         font-weight:                    bold;\r
 342                         font-size:                              16px;\r
 343                         line-height:                    16px;\r
 344                         text-align:                             center;\r
 345                         cursor:                                 pointer;\r
 346                         overflow:                               hidden;\r
 347                         width:                                  20px;\r
 348                         height:                                 20px;\r
 349                         padding:                                2px;\r
 350                         position:                               absolute;\r
 351                         top:                                    9px;\r
 352                         right:                                  9px;\r
 353                         z-index:                                9999;\r
 354                         border-radius:                  5px;\r
 355                         -o-border-radius:               5px;\r
 356                         -ms-border-radius:              5px;\r
 357                         -moz-border-radius:             5px;\r
 358                         -webkit-border-radius:  5px;\r
 359                 }