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                 line-height:            100%;\r
  72                 *font-size:                     108%;\r
  73                 margin-bottom:          1em;\r
  74         }\r
  75 \r
  76         /* http://e2designer.seesaa.net/article/152168876.html */\r
  77         /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r
  78         pre {\r
  79                 white-space: pre;           /* CSS 2.0 */\r
  80                 white-space: pre-wrap;      /* CSS 2.1 */\r
  81                 white-space: pre-line;      /* CSS 3.0 */\r
  82                 white-space: -pre-wrap;     /* Opera 4-6 */\r
  83                 white-space: -o-pre-wrap;   /* Opera 7 */\r
  84                 white-space: -moz-pre-wrap; /* Mozilla */\r
  85                 white-space: -hp-pre-wrap;  /* HP Printers */\r
  86                 word-wrap:   break-word;    /* IE 5+ */\r
  87         }\r
  88         \r
  89         /* remember to define focus styles! */\r
  90         :focus { outline: 0;}\r
  91         \r
  92         /* remember to highlight inserts somehow! */\r
  93         ins { text-decoration: none;}\r
  94         del { text-decoration: line-through;}\r
  95         \r
  96         /* http://honoo-no.com/creators/2008/02/14_211120.html */\r
  97         textarea, input {\r
  98                 font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3",sans-serif;\r
  99         }\r
 100 \r
 101         dt {\r
 102                 margin-left:    1em;\r
 103                 font-weight:    bold;\r
 104         }\r
 105         dd {\r
 106                 margin-left:    2em;\r
 107         }\r
 108 \r
 109 /*  ClearFix\r
 110 --------------------------------------------------------------------------------------*/\r
 111         /* for modern brouser */\r
 112         claerfix:after {   \r
 113                 content: ".";   \r
 114                 display: block;   \r
 115                 visibility: hidden;   \r
 116                 height: 0.1px;   \r
 117                 font-size: 0.1em;   \r
 118                 line-height: 0;   \r
 119                 clear: both;   \r
 120         } \r
 121         /* IE7,MacIE5 */\r
 122         .clearfix {\r
 123                 display: inline-block;\r
 124         }\r
 125         /* WinIE6 below, Exclude MacIE5 \*/\r
 126         * html .clearfix {\r
 127                 zoom: 1;\r
 128         }\r
 129         .clearfix {\r
 130                 display: block;\r
 131                 overflow: auto;\r
 132         }\r
 133         /**/\r
 134 \r
 135 \r
 136 /*  Typography\r
 137 --------------------------------------------------------------------------------------*/\r
 138         a:link { color:#008;}\r
 139         a:visited { color: #505;}\r
 140         a { text-decoration: none;}\r
 141         \r
 142         a:hover {\r
 143                 text-decoration:        underline;\r
 144                 color:                          #f60;\r
 145         }\r
 146         h1 {\r
 147                 letter-spacing:         2px;\r
 148                 padding:                        0 10px;\r
 149         }\r
 150         h2 {\r
 151                 letter-spacing:         2px;\r
 152             border-top:                 1px solid #333;\r
 153             border-bottom:              1px solid #333;\r
 154             padding:                    0.5em 0 0.5em 0.5em;\r
 155             font-size:                  1.4em;\r
 156                 line-height:            1.4em;\r
 157                 margin:                         0 2px 1em;\r
 158                 text-shadow:            1px 1px 3px rgba(0, 0, 0, 0.6);\r
 159     }\r
 160 \r
 161         h3 {\r
 162                 letter-spacing:         2px;\r
 163             border-bottom:              1px dotted #333333;\r
 164             font-size:                  1.4em;\r
 165                 line-height:            1.4em;\r
 166                 padding:                        0 0 0 0.5em;\r
 167                 margin:                         0 0 1em 0.5em;\r
 168                 font-weight:            bold;\r
 169         }               \r
 170 \r
 171         h4 {\r
 172                 font-weight:            bold;\r
 173                 font-size:                      116%;\r
 174                 letter-spacing:         1px;\r
 175                 border-left:            0.5em #ccc solid;\r
 176                 border-bottom:          1px #999 solid;\r
 177                 padding:                        4px 0 2px 0.6em;\r
 178                 margin:                         2em 0 1em 1em;\r
 179         }\r
 180         h5 {\r
 181                 letter-spacing:         1px;\r
 182                 border-bottom:          1px #999 dotted;\r
 183                 padding:                        6px 6px 2px;\r
 184                 margin:                         1.5em 14px 1em 1.5em;\r
 185         }\r
 186         h5, h6 {\r
 187                 font-size:                      1em;\r
 188                 padding:                        0 5px 0;\r
 189         }\r
 190         h6 {\r
 191                 border-left:            5px #999 solid;\r
 192                 letter-spacing:         1px;\r
 193                 margin-left:            2em;\r
 194         }\r
 195         \r
 196         p, ul, ol, dl, blockquote, pre, table {\r
 197                 margin:                         0 0 1em 2em;\r
 198         }\r
 199         blockquote, cite {}\r
 200         em {}\r
 201 \r
 202         /* tables still need 'cellspacing="0"' in the markup */\r
 203         table {\r
 204                 border:                         #999 solid;\r
 205                 border-width:           1px 1px 0 0;\r
 206                 border-collapse:        collapse;\r
 207                 empty-cells:            show;\r
 208                 border-spacing:         0;\r
 209                 line-height:            1.6em;\r
 210         }\r
 211 \r
 212         th, td {\r
 213                 padding:                        5px;\r
 214                 border:                         #999 solid;\r
 215                 border-width:           0 0 1px 1px;\r
 216         }\r
 217 \r
 218 /*  Button\r
 219 --------------------------------------------------------------------------------------*/\r
 220         .button {\r
 221                 border:                                 1px outset #ccc;\r
 222                 background-color:               #eee;\r
 223                 color:                                  #666;\r
 224                 font-weight:                    bold;\r
 225                 text-align:                             center;\r
 226                 cursor:                                 pointer;\r
 227                 overflow:                               hidden;\r
 228                 height:                                 30px;\r
 229                 line-height:                    30px;\r
 230                 border-radius:                  5px;\r
 231                 -o-border-radius:               5px;\r
 232                 -ms-border-radius:              5px;\r
 233                 -moz-border-radius:             5px;\r
 234                 -webkit-border-radius:  5px;\r
 235         }\r
 236 \r
 237 /*  Loading\r
 238 --------------------------------------------------------------------------------------*/\r
 239         .loading {\r
 240                 background-image:               url( loading.gif);\r
 241                 background-position:    50% 50%;\r
 242                 background-repeat:              no-repeat;\r
 243         }\r
 244         .error {\r
 245                 background-image:               url( error.png);\r
 246                 background-position:    50% 50%;\r
 247                 background-repeat:              no-repeat;\r
 248         }\r
 249 \r
 250 \r
 251 /*  Footer & Footer Fix\r
 252  *   http://www.themaninblue.com/writing/perspective/2005/08/29/\r
 253 --------------------------------------------------------------------------------------*/\r
 254         html,\r
 255         body {\r
 256                 height:                 100%;\r
 257         }\r
 258         #general-content {\r
 259                 position:               relative;\r
 260                 min-height:             100%;\r
 261                 _height:                100%;\r
 262         }\r
 263         \r
 264         #outer-wrapper {\r
 265                 padding-bottom: 200px;/* フッターの高さと同じ値にする */\r
 266         }\r
 267 \r
 268         #footer-content {\r
 269                 height:                 200px;\r
 270                 position:               relative;\r
 271                 margin-top:             -200px;\r
 272         }\r
 273 \r
 274 \r
 275 /*  Noscript Alert\r
 276 --------------------------------------------------------------------------------------*/\r
 277         #noscript-alert {\r
 278                 border-left:            1px solid #666;\r
 279                 display:                        block;\r
 280                 text-align:                     center;\r
 281                 color:                          red;\r
 282                 font-weight:            bold;\r
 283                 font-size:                      12px;\r
 284                 line-height:            12px;\r
 285                 padding:                        11px 0 7px;\r
 286         }\r
 287 \r
 288 /*  global-navi\r
 289 --------------------------------------------------------------------------------------*/\r
 290         #global-navi {\r
 291                 position:                               absolute;\r
 292                 right:                                  0;\r
 293                 top:                                    0;\r
 294                 width:                                  320px;\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         .main {\r
 360                 padding:                                20px 10px;\r
 361         }\r
 362                 #main p,\r
 363                 #main pre,\r
 364                 .main p,\r
 365                 .main pre {\r
 366                         line-height:                    1.6em;\r
 367                 }\r
 368 \r
 369 /*  footer-content\r
 370 --------------------------------------------------------------------------------------*/\r
 371         #footer-content {\r
 372                 background-color:               #ccc;\r
 373                 position:                               relative;\r
 374         }\r
 375         #footer {\r
 376                 border-top:                             1px solid #999;\r
 377                 padding-bottom:                 30px;\r
 378         }\r
 379                 .footer-item-wrapper {\r
 380                         width:                                  200px;\r
 381                         float:                                  left;\r
 382                 }\r
 383                         .footer-item {\r
 384                                 padding-right:          30px;\r
 385                         }\r
 386                         .footer-item h2 {\r
 387                                 font-size:                      1em;\r
 388                                 padding:                        0 0 0.3em 0.5em;\r
 389                                 margin-top:                     0.7em;\r
 390                                 margin-bottom:          0.6em;\r
 391                                 text-align:                     left;\r
 392                                 border-top:                     0;\r
 393                                 border-left:            0;\r
 394                                 border-right:           0;\r
 395                                 border-bottom:          1px solid #999;\r
 396                                 box-shadow:                     none;\r
 397                                 -moz-box-shadow:        none;\r
 398                                 -webkit-box-shadow:     0;\r
 399                         }\r
 400                         .footer-item ul {\r
 401                                 list-style:                     none;\r
 402                                 padding:                        0 30px 0 1em;\r
 403                                 margin:                         0;\r
 404                         }\r
 405                                 .footer-item li {\r
 406                                         line-height:            1.6em;\r
 407                                 }\r
 408                 #copyright {\r
 409                         position:                               absolute;\r
 410                         left:                                   0;\r
 411                         bottom:                                 10px;\r
 412                         width:                                  100%;\r
 413                         height:                                 20px;\r
 414                         line-height:                    20px;\r
 415                         text-align:                             center;\r
 416                 }\r
 417 \r
 418 /*  dl table\r
 419 --------------------------------------------------------------------------------------*/\r
 420         .dl-table dt,\r
 421         .dl-table-small dt {\r
 422                 clear:                  left;\r
 423                 float:                  left;\r
 424                 height:                 1.8em;\r
 425                 line-height:    1.8em;\r
 426                 overflow:               hidden;\r
 427                 margin:                 0;\r
 428                 padding:                0 0 0 0.2em;\r
 429         }\r
 430         .dl-table dd,\r
 431         .dl-table-small dd {\r
 432                 margin:                 0 0 0.5em;\r
 433                 line-height:    1.8em;\r
 434                 border-bottom:  1px solid #ccc;\r
 435         }\r
 436         .dl-table dt {\r
 437                 width:                  180px;\r
 438         }\r
 439         .dl-table dd {\r
 440                 padding:                0 0 0 200px;\r
 441         }\r
 442         .dl-table-small dt {\r
 443                 width:                  140px;\r
 444         }\r
 445         .dl-table-small dd {\r
 446                 padding:                0 0 0 150px;\r
 447         }\r
 448 /*  Reversible Image\r
 449 --------------------------------------------------------------------------------------*/        \r
 450         img.img-flip-v { /* 上下反転 */\r
 451                 transform:                              scale( 1, -1);\r
 452                 -o-transform:                   scale( 1, -1);\r
 453                 -ms-transform:                  scale( 1, -1);\r
 454                 -moz-transform:                 scale( 1, -1);\r
 455                 -webkit-transform:              scale( 1, -1);\r
 456                 /*filter:                                       progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r
 457                 -ms-filter:                             progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);*/\r
 458                 filter:                                 flipv();\r
 459                 -ms-filter:                             flipv();\r
 460         }\r
 461         v\:image.img-flip-v {\r
 462                 flip:                                   y; /* vml */\r
 463         } \r
 464         \r
 465         img.img-flip-h { /* 左右反転 */\r
 466                 transform:                              scale( -1, 1);\r
 467                 -o-transform:                   scale( -1, 1);\r
 468                 -ms-transform:                  scale( -1, 1);\r
 469                 -moz-transform:                 scale( -1, 1);\r
 470                 -webkit-transform:              scale( -1, 1);\r
 471                 /*filter:                                       progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r
 472                 -ms-filter:                             progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);*/\r
 473                 filter:                                 fliph();\r
 474                 -ms-filter:                             fliph();\r
 475         }\r
 476         v\:image.img-flip-h {\r
 477                 flip:                                   x; /* vml */\r
 478         }\r
 479         \r
 480         img.img-flip-vh { /* 上下左右反転 */\r
 481                 transform:                              scale( -1, -1);\r
 482                 -o-transform:                   scale( -1, -1);\r
 483                 -ms-transform:                  scale( -1, -1);\r
 484                 -moz-transform:                 scale( -1, -1);\r
 485                 -webkit-transform:              scale( -1, -1);\r
 486                 /*filter:                                       progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r
 487                 -ms-filter:                             progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);*/\r
 488                 filter:                                 flipv() fliph();\r
 489                 -ms-filter:                             flipv() fliph();\r
 490         }\r
 491         v\:image.img-flip-vh {\r
 492                 rotation :                              180; /* vml */\r
 493         }\r
 494 \r
 495 /*  Reversible Image with png-fix\r
 496 --------------------------------------------------------------------------------------*/\r
 497         .img-flip-v .img-flip-with-pngfix-v {\r
 498                 filter:                                 flipv();\r
 499         }\r
 500         .img-flip-h .img-flip-with-pngfix-h {\r
 501                 filter:                                 fliph();\r
 502         }\r
 503         .img-flip-vh .img-flip-with-pngfix-h {\r
 504                 filter:                                 flipv() fliph();\r
 505         }