app/assets/stylesheets/common.css

   1 /*\r
   2  * pettanR\r
   3  * \r
   4  *   common.css\r
   5  * \r
   6  *   version 0.4.1\r
   7  *\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 /*  Reset\r
  19 --------------------------------------------------------------------------------------*/\r
  20         html, body {\r
  21                 margin:                         0;\r
  22                 padding:                        0;\r
  23         }\r
  24 \r
  25 /*  Reset\r
  26 --------------------------------------------------------------------------------------*/\r
  27 /*\r
  28 Copyright (c) 2009, Yahoo! Inc. All rights reserved.\r
  29 Code licensed under the BSD License:\r
  30 http://developer.yahoo.net/yui/license.txt\r
  31 version: 2.7.0\r
  32 */\r
  33         body{\r
  34                 font:                   13px/1.231 arial,helvetica,clean,sans-serif;\r
  35                 line-height:    1;\r
  36                 *font-size:             small;\r
  37                 *font:                  x-small;\r
  38         }\r
  39         select, input, button, textarea, button{\r
  40                 font:                   99% arial,helvetica,clean,sans-serif;\r
  41         }\r
  42         table{\r
  43                 font-size:              inherit;\r
  44                 font:                   100%;\r
  45         }\r
  46         \r
  47         html, body, div, span, applet, object, iframe,\r
  48         h1, h2, h3, h4, h5, h6, p, blockquote, pre,\r
  49         a, abbr, acronym, address, big, cite, code,\r
  50         del, dfn, em, font, img, ins, kbd, q, s, samp,\r
  51         small, strike, strong, sub, sup, tt, var,\r
  52         b, u, i, center,\r
  53         dl, dt, dd, ol, ul, li,\r
  54         fieldset, form, label, legend,\r
  55         table, caption, tbody, tfoot, thead {\r
  56                 margin:                 0;\r
  57                 padding:                0;\r
  58                 border:                 0;\r
  59                 outline:                0;\r
  60                 vertical-align: baseline;\r
  61                 font-family:    "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,sans-serif;\r
  62         }\r
  63          \r
  64         p {\r
  65                 text-shadow:    #000 0 0 0;/* for Safari */ \r
  66                 -moz-opacity:   0.99;/* for Firefox */ \r
  67         }\r
  68         \r
  69         pre, code, kbd, samp, tt {\r
  70                 font-family:            monospace;\r
  71                 *font-size:                     108%;\r
  72         }\r
  73 \r
  74         /* http://e2designer.seesaa.net/article/152168876.html */\r
  75         /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r
  76         pre {\r
  77                 white-space: pre;           /* CSS 2.0 */\r
  78                 white-space: pre-wrap;      /* CSS 2.1 */\r
  79                 white-space: pre-line;      /* CSS 3.0 */\r
  80                 white-space: -pre-wrap;     /* Opera 4-6 */\r
  81                 white-space: -o-pre-wrap;   /* Opera 7 */\r
  82                 white-space: -moz-pre-wrap; /* Mozilla */\r
  83                 white-space: -hp-pre-wrap;  /* HP Printers */\r
  84                 word-wrap:   break-word;    /* IE 5+ */\r
  85         }\r
  86         \r
  87         /* remember to define focus styles! */\r
  88         :focus { outline: 0;}\r
  89         \r
  90         /* remember to highlight inserts somehow! */\r
  91         ins { text-decoration: none;}\r
  92         del { text-decoration: line-through;}\r
  93         \r
  94         /* http://honoo-no.com/creators/2008/02/14_211120.html */\r
  95         textarea, input {\r
  96                 font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3",sans-serif;\r
  97         }\r
  98 \r
  99 /*  ClearFix\r
 100 --------------------------------------------------------------------------------------*/\r
 101         /* for modern brouser */\r
 102         .claerfix:after {\r
 103                 content: ".";   \r
 104                 display: block;   \r
 105                 visibility: hidden;   \r
 106                 height: 0.1px;   \r
 107                 font-size: 0.1em;   \r
 108                 line-height: 0;   \r
 109                 clear: both;   \r
 110         } \r
 111         /* IE7,MacIE5 */\r
 112         .clearfix {\r
 113                 display: inline-block;\r
 114         }\r
 115         /* WinIE6 below, Exclude MacIE5 \*/\r
 116         * html .clearfix {\r
 117                 zoom: 1;\r
 118         }\r
 119         .clearfix {\r
 120                 display: block;\r
 121                 overflow: auto;\r
 122         }\r
 123         /**/\r
 124 \r
 125 \r
 126 /*  Typography\r
 127 --------------------------------------------------------------------------------------*/\r
 128         a:link { color:#008;}\r
 129         a:visited { color: #505;}\r
 130         a { text-decoration: none;}\r
 131         \r
 132         a:hover {\r
 133                 text-decoration:        underline;\r
 134                 color:                          #f60;\r
 135         }\r
 136         h1 {\r
 137                 letter-spacing:         2px;\r
 138                 padding:                        0 10px;\r
 139         }\r
 140         h2 {\r
 141                 letter-spacing:         2px;\r
 142             border-top:                 1px solid #333;\r
 143             border-bottom:              1px solid #333;\r
 144             padding:                    0.5em 0 0.5em 0.5em;\r
 145             font-size:                  1.4em;\r
 146                 line-height:            1.4em;\r
 147                 margin:                         0 2px 1em;\r
 148                 text-shadow:            1px 1px 3px rgba(0, 0, 0, 0.6);\r
 149     }\r
 150 \r
 151         h3 {\r
 152                 letter-spacing:         2px;\r
 153             border-bottom:              1px dotted #333333;\r
 154             font-size:                  1.4em;\r
 155                 line-height:            1.4em;\r
 156                 padding:                        0 0 0 0.5em;\r
 157                 margin:                         0 0 1em 0.5em;\r
 158                 font-weight:            bold;\r
 159         }               \r
 160 \r
 161         h4 {\r
 162                 font-weight:            bold;\r
 163                 font-size:                      116%;\r
 164                 letter-spacing:         1px;\r
 165                 border-left:            0.5em #ccc solid;\r
 166                 border-bottom:          1px #999 solid;\r
 167                 padding:                        4px 0 2px 0.6em;\r
 168                 margin:                         2em 0 1em 1em;\r
 169         }\r
 170         h5 {\r
 171                 letter-spacing:         1px;\r
 172                 border-bottom:          1px #999 dotted;\r
 173                 padding:                        6px 6px 2px;\r
 174                 margin:                         1.5em 14px 1em 1.5em;\r
 175         }\r
 176         h5, h6 {\r
 177                 font-size:                      1em;\r
 178                 padding:                        0 5px 0;\r
 179         }\r
 180         h6 {\r
 181                 border-left:            5px #999 solid;\r
 182                 letter-spacing:         1px;\r
 183                 margin-left:            2em;\r
 184         }\r
 185         \r
 186         blockquote, cite {}\r
 187         em {}\r
 188 \r
 189         /* tables still need 'cellspacing="0"' in the markup */\r
 190         table {\r
 191                 border:                         #999 solid;\r
 192                 border-width:           1px 1px 0 0;\r
 193                 border-collapse:        collapse;\r
 194                 empty-cells:            show;\r
 195                 border-spacing:         0;\r
 196                 line-height:            1.6em;\r
 197         }\r
 198 \r
 199         th, td {\r
 200                 padding:                        5px;\r
 201                 border:                         #999 solid;\r
 202                 border-width:           0 0 1px 1px;\r
 203         }\r
 204 \r
 205 /*  image layout\r
 206 --------------------------------------------------------------------------------------*/\r
 207         .float-left {\r
 208                 float:                          left;\r
 209                 margin:                         0 1em 1em 0;\r
 210         }\r
 211         .float-right {\r
 212                 float:                          right;\r
 213                 margin:                         0 0 1em 1em;\r
 214         }\r
 215 \r
 216 /*  Button\r
 217 --------------------------------------------------------------------------------------*/\r
 218         .button {\r
 219                 border:                                 1px solid;\r
 220                 background:                             #E3E3E3;\r
 221                 background:                             -moz-linear-gradient(center top , #F9F9F9, #E3E3E3);\r
 222                 background:                             -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E3E3E3));\r
 223                 border-color:                   #ccc #bbb #aaa;\r
 224                 color:                                  #666;\r
 225                 font-weight:                    bold;\r
 226                 text-align:                             center;\r
 227                 cursor:                                 pointer;\r
 228                 overflow:                               hidden;\r
 229                 height:                                 30px;\r
 230                 line-height:                    30px;\r
 231                 border-radius:                  3px;\r
 232                 -o-border-radius:               3px;\r
 233                 -ms-border-radius:              3px;\r
 234                 -moz-border-radius:             3px;\r
 235                 -webkit-border-radius:  3px;\r
 236         }\r
 237 \r
 238 /*  Loading\r
 239 --------------------------------------------------------------------------------------*/\r
 240         .loading {\r
 241                 background-image:               url( ../images/loading.gif);\r
 242                 background-position:    50% 50%;\r
 243                 background-repeat:              no-repeat;\r
 244         }\r
 245         .error {\r
 246                 background-image:               url( ../images/error.png);\r
 247                 background-position:    50% 50%;\r
 248                 background-repeat:              no-repeat;\r
 249         }\r
 250 \r
 251 \r
 252 /*  Footer & Footer Fix\r
 253  *   http://www.themaninblue.com/writing/perspective/2005/08/29/\r
 254 --------------------------------------------------------------------------------------*/\r
 255         html,\r
 256         body {\r
 257                 height:                 100%;\r
 258         }\r
 259         #general-content {\r
 260                 position:               relative;\r
 261                 min-height:             100%;\r
 262                 _height:                100%;\r
 263         }\r
 264         \r
 265         #outer-wrapper {\r
 266                 padding-bottom: 200px;/* フッターの高さと同じ値にする */\r
 267         }\r
 268 \r
 269         #footer-content {\r
 270                 height:                 200px;\r
 271                 position:               relative;\r
 272                 margin-top:             -200px;\r
 273         }\r
 274 \r
 275 \r
 276 /*  Noscript Alert\r
 277 --------------------------------------------------------------------------------------*/\r
 278         #noscript-alert {\r
 279                 border-left:            1px solid #666;\r
 280                 display:                        block;\r
 281                 text-align:                     center;\r
 282                 color:                          red;\r
 283                 font-weight:            bold;\r
 284                 font-size:                      12px;\r
 285                 line-height:            12px;\r
 286                 padding:                        11px 0 7px;\r
 287         }\r
 288 \r
 289 /*  global-navi\r
 290 --------------------------------------------------------------------------------------*/\r
 291         #global-navi {\r
 292                 position:                               absolute;\r
 293                 right:                                  0;\r
 294                 top:                                    0;\r
 295                 text-align:                             right;\r
 296                 height:                                 30px;\r
 297                 border-right:                   1px solid #666;\r
 298         }\r
 299                 #global-navi a,\r
 300                 #global-navi a:link,\r
 301                 #global-navi a:visited,\r
 302                 #global-navi a:active {\r
 303                         text-align:                     center;\r
 304                         color:                          #666;\r
 305                         text-decoration:        none;\r
 306                         display:                        inline-block;\r
 307                         _display:                       inline;\r
 308                         _zoom:                          1;\r
 309                         float:                          left;\r
 310                         width:                          79px;\r
 311                         border-left:            1px solid #666;\r
 312                         font-size:                      12px;\r
 313                         line-height:            12px;\r
 314                         padding:                        11px 0 7px;\r
 315                         outline:                        0;\r
 316                 }\r
 317 \r
 318                 #global-navi a {\r
 319                         background-color:       #ccc; /* for ie6 */\r
 320                 }\r
 321                 #global-navi a:active {\r
 322                         background-color:       #333;\r
 323                 }\r
 324                 #global-navi a:hover {\r
 325                         background-color:       #999;\r
 326                         color:                          #eee;\r
 327                 }\r
 328                 #global-navi a.current,\r
 329                 #global-navi a.current:visited {\r
 330                         background-color:       #666;\r
 331                         color:                          #eee;\r
 332                 }\r
 333 \r
 334 /*  header\r
 335 --------------------------------------------------------------------------------------*/\r
 336         #header {\r
 337                 background-color:               #ccc;\r
 338                 height:                                 30px;\r
 339                 line-height:                    30px;\r
 340         }\r
 341         h1 {\r
 342                 height:                                 30px;\r
 343                 line-height:                    30px;\r
 344                 font-size:                              1.4em;\r
 345                 font-weight:                    normal;\r
 346                 text-shadow:                    1px 1px 3px rgba(0, 0, 0, 0.6);\r
 347         }       \r
 348 \r
 349 /*  base-content-width\r
 350 --------------------------------------------------------------------------------------*/\r
 351         .base-content-width {\r
 352                 width:                                  770px;\r
 353                 margin:                                 0 auto;\r
 354         }\r
 355         \r
 356 /*  main\r
 357 --------------------------------------------------------------------------------------*/\r
 358         #main {\r
 359                 padding:                                20px 10px;\r
 360         }\r
 361                 #main p,\r
 362                 #main dl,\r
 363                 #main pre,\r
 364                 #main table,\r
 365                 #main blockquote,\r
 366                 .main p,\r
 367                 .main dl,\r
 368                 .main pre,\r
 369                 .main table,\r
 370                 .main blockquote {\r
 371                         line-height:            1.6em;\r
 372                         margin:                         0 0 1em 2em;\r
 373                 }\r
 374                 #main ul,\r
 375                 #main ol,               \r
 376                 .main ul,\r
 377                 .main ol {\r
 378                         line-height:            1.6em;\r
 379                         margin:                         0 0 1em 2.8em;\r
 380                 }\r
 381                 \r
 382                 #main .block-element-item,\r
 383                 .main .block-element-item {\r
 384                         display:                        block;\r
 385                         margin:                         0 0 1em 2em;\r
 386                 }\r
 387 \r
 388                 pre,\r
 389                 blockquote {\r
 390                     border:                             1px solid;\r
 391                     overflow:                   auto;\r
 392                     padding:                    4px 0.5em;\r
 393                     margin:                             0.8em 0 1em 2em;\r
 394                     line-height:                1.4em;\r
 395                     white-space:                pre-wrap;\r
 396                     word-wrap:                  break-word;\r
 397                     font-size:                  12px;\r
 398                 }\r
 399                 pre {\r
 400                         border-color:           #ccc;\r
 401                     background-color:   #f0f0f0;\r
 402                 }\r
 403                 blockquote {\r
 404                         border-color:           #e9f;\r
 405                     background-color:   #ecf;\r
 406                 }\r
 407 \r
 408 /*  footer-content\r
 409 --------------------------------------------------------------------------------------*/\r
 410         #footer-content {\r
 411                 background-color:               #ccc;\r
 412                 position:                               relative;\r
 413         }\r
 414         #footer {\r
 415                 border-top:                             1px solid #999;\r
 416                 padding-bottom:                 30px;\r
 417         }\r
 418                 .footer-item-wrapper {\r
 419                         width:                                  200px;\r
 420                         float:                                  left;\r
 421                 }\r
 422                         .footer-item {\r
 423                                 padding-right:          30px;\r
 424                         }\r
 425                         .footer-item h2 {\r
 426                                 font-size:                      1em;\r
 427                                 padding:                        0 0 0.3em 0.5em;\r
 428                                 margin-top:                     0.7em;\r
 429                                 margin-bottom:          0.6em;\r
 430                                 text-align:                     left;\r
 431                                 border-top:                     0;\r
 432                                 border-left:            0;\r
 433                                 border-right:           0;\r
 434                                 border-bottom:          1px solid #999;\r
 435                                 box-shadow:                     none;\r
 436                                 -moz-box-shadow:        none;\r
 437                                 -webkit-box-shadow:     0;\r
 438                         }\r
 439                         .footer-item ul {\r
 440                                 list-style:                     none;\r
 441                                 padding:                        0 30px 0 1em;\r
 442                                 margin:                         0;\r
 443                         }\r
 444                                 .footer-item li {\r
 445                                         line-height:            1.6em;\r
 446                                 }\r
 447                 #copyright {\r
 448                         position:                               absolute;\r
 449                         left:                                   0;\r
 450                         bottom:                                 10px;\r
 451                         width:                                  100%;\r
 452                         height:                                 20px;\r
 453                         line-height:                    20px;\r
 454                         text-align:                             center;\r
 455                 }\r
 456 \r
 457 /*  dl table\r
 458 --------------------------------------------------------------------------------------*/\r
 459         .dl-table dt,\r
 460         .dl-table-small dt {\r
 461                 clear:                  left;\r
 462                 float:                  left;\r
 463                 height:                 1.6em;\r
 464                 line-height:    1.6em;\r
 465                 overflow:               hidden;\r
 466                 margin:                 0;\r
 467                 padding:                0 0 0 0.2em;\r
 468         }\r
 469         .dl-table dd,\r
 470         .dl-table-small dd {\r
 471                 margin:                 0 0 0.5em;\r
 472                 line-height:    1.6em;\r
 473                 border-bottom:  1px solid #ccc;\r
 474         }\r
 475         .dl-table dt {\r
 476                 width:                  180px;\r
 477         }\r
 478         .dl-table dd {\r
 479                 padding:                0 0 0 200px;\r
 480         }\r
 481         .dl-table-small dt {\r
 482                 width:                  140px;\r
 483         }\r
 484         .dl-table-small dd {\r
 485                 padding:                0 0 0 160px;\r
 486         }\r
 487 \r
 488 /*  Reversible Image\r
 489 --------------------------------------------------------------------------------------*/        \r
 490         img.img-flip-v { /* 上下反転 */\r
 491                 transform:                              scale( 1, -1);\r
 492                 -o-transform:                   scale( 1, -1);\r
 493                 -ms-transform:                  scale( 1, -1);\r
 494                 -moz-transform:                 scale( 1, -1);\r
 495                 -webkit-transform:              scale( 1, -1);\r
 496         }\r
 497         .pettanr-ActiveX-enabled img.img-flip-v {\r
 498                 filter:                                 flipv();\r
 499                 -ms-filter:                             flipv();                \r
 500         }\r
 501         v\:image.img-flip-v {\r
 502                 flip:                                   y; /* vml */\r
 503         } \r
 504         \r
 505         img.img-flip-h { /* 左右反転 */\r
 506                 transform:                              scale( -1, 1);\r
 507                 -o-transform:                   scale( -1, 1);\r
 508                 -ms-transform:                  scale( -1, 1);\r
 509                 -moz-transform:                 scale( -1, 1);\r
 510                 -webkit-transform:              scale( -1, 1);\r
 511         }\r
 512         .pettanr-ActiveX-enabled img.img-flip-h {\r
 513                 filter:                                 fliph();\r
 514                 -ms-filter:                             fliph();\r
 515         }\r
 516         v\:image.img-flip-h {\r
 517                 flip:                                   x; /* vml */\r
 518         }\r
 519         \r
 520         img.img-flip-vh { /* 上下左右反転 */\r
 521                 transform:                              scale( -1, -1);\r
 522                 -o-transform:                   rotate(180deg);\r
 523                 -ms-transform:                  scale( -1, -1);\r
 524                 -moz-transform:                 scale( -1, -1);\r
 525                 -webkit-transform:              scale( -1, -1);\r
 526         }\r
 527         .pettanr-ActiveX-enabled img.img-flip-vh {\r
 528                 filter:                                 flipv() fliph();\r
 529                 -ms-filter:                             flipv() fliph();\r
 530         }\r
 531         v\:image.img-flip-vh {\r
 532                 rotation :                              180; /* vml */\r
 533         }\r
 534 \r
 535 /*  PettanR Comic\r
 536 --------------------------------------------------------------------------------------*/\r
 537         .pettanr-comic-panel {\r
 538                 border-style:                   solid;\r
 539                 border-color:                   #111;\r
 540                 position:                               relative;\r
 541                 margin:                                 1em auto;\r
 542                 overflow:                               hidden;\r
 543         }\r
 544         .pettanr-comic-image,\r
 545         .pettanr-comic-balloon {\r
 546                 position:                               absolute;\r
 547         }\r
 548                 .pettanr-comic-image img {\r
 549                         position:                       absolute;\r
 550                     height:                             100%;\r
 551                     width:                              100%;\r
 552                     left:                               0;\r
 553                     top:                                0;\r
 554                 }\r
 555                 .pettanr-comic-balloon .pettanr-comic-speach {\r
 556                         position:                               absolute;\r
 557                         top:                                    0;\r
 558                         left:                                   0;\r
 559                 }\r
 560                         .pettanr-comic-speach,\r
 561                         .pettanr-comic-speach tbody,\r
 562                         .pettanr-comic-speach tr,\r
 563                         .pettanr-comic-speach td {\r
 564                                 width:                          100%;\r
 565                                 height:                         100%;\r
 566                                 border:                         0;\r
 567                                 padding:                        0;\r
 568                                 margin:                         0 !important;\r
 569                                 text-align:                     center;\r
 570                                 vertical-align:         middle;\r
 571                         }\r
 572                         .pettanr-comic-speach {\r
 573                                 table-layout:           fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */\r
 574                         }