app/assets/stylesheets/common.css

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