0.4.x/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         dt {\r
 100                 margin-left:    1em;\r
 101                 font-weight:    bold;\r
 102         }\r
 103         dd {\r
 104                 margin-left:    2em;\r
 105         }\r
 106 \r
 107 /*  ClearFix\r
 108 --------------------------------------------------------------------------------------*/\r
 109         /* for modern brouser */\r
 110         claerfix:after {   \r
 111                 content: ".";   \r
 112                 display: block;   \r
 113                 visibility: hidden;   \r
 114                 height: 0.1px;   \r
 115                 font-size: 0.1em;   \r
 116                 line-height: 0;   \r
 117                 clear: both;   \r
 118         } \r
 119         /* IE7,MacIE5 */\r
 120         .clearfix {\r
 121                 display: inline-block;\r
 122         }\r
 123         /* WinIE6 below, Exclude MacIE5 \*/\r
 124         * html .clearfix {\r
 125                 zoom: 1;\r
 126         }\r
 127         .clearfix {\r
 128                 display: block;\r
 129                 overflow: auto;\r
 130         }\r
 131         /**/\r
 132 \r
 133 \r
 134 /*  Typography\r
 135 --------------------------------------------------------------------------------------*/\r
 136         a:link { color:#008;}\r
 137         a:visited { color: #505;}\r
 138         a { text-decoration: none;}\r
 139         \r
 140         a:hover {\r
 141                 text-decoration:        underline;\r
 142                 color:                          #f60;\r
 143         }\r
 144         h1 {\r
 145                 letter-spacing:         2px;\r
 146                 padding:                        0 10px;\r
 147         }\r
 148         h2 {\r
 149                 letter-spacing:         2px;\r
 150             border-top:                 1px solid #333;\r
 151             border-bottom:              1px solid #333;\r
 152             padding:                    0.5em 0 0.5em 0.5em;\r
 153             font-size:                  1.4em;\r
 154                 line-height:            1.4em;\r
 155                 margin:                         0 2px 1em;\r
 156                 text-shadow:            1px 1px 3px rgba(0, 0, 0, 0.6);\r
 157     }\r
 158 \r
 159         h3 {\r
 160                 letter-spacing:         2px;\r
 161             border-bottom:              1px dotted #333333;\r
 162             font-size:                  1.4em;\r
 163                 line-height:            1.4em;\r
 164                 padding:                        0 0 0 0.5em;\r
 165                 margin:                         0 0 1em 0.5em;\r
 166                 font-weight:            bold;\r
 167         }               \r
 168 \r
 169         h4 {\r
 170                 font-weight:            bold;\r
 171                 font-size:                      116%;\r
 172                 letter-spacing:         1px;\r
 173                 border-left:            0.5em #ccc solid;\r
 174                 border-bottom:          1px #999 solid;\r
 175                 padding:                        4px 0 2px 0.6em;\r
 176                 margin:                         2em 0 1em 1em;\r
 177         }\r
 178         h5 {\r
 179                 letter-spacing:         1px;\r
 180                 border-bottom:          1px #999 dotted;\r
 181                 padding:                        6px 6px 2px;\r
 182                 margin:                         1.5em 14px 1em 1.5em;\r
 183         }\r
 184         h5, h6 {\r
 185                 font-size:                      1em;\r
 186                 padding:                        0 5px 0;\r
 187         }\r
 188         h6 {\r
 189                 border-left:            5px #999 solid;\r
 190                 letter-spacing:         1px;\r
 191                 margin-left:            2em;\r
 192         }\r
 193         \r
 194         p, ul, ol, dl, blockquote, pre, table {\r
 195                 margin:                         0 0 1em 2em;\r
 196         }\r
 197         \r
 198         pre,\r
 199         blockquote {\r
 200             border:                             1px solid;\r
 201             overflow:                   auto;\r
 202             padding:                    4px 0.5em;\r
 203             margin:                             0.8em 0 1em 2em;\r
 204             line-height:                1.4em;\r
 205             white-space:                pre-wrap;\r
 206             word-wrap:                  break-word;\r
 207             font-size:                  12px;\r
 208         }\r
 209         pre {\r
 210                 border-color:           #ccc;\r
 211             background-color:   #f0f0f0;\r
 212         }\r
 213         blockquote {\r
 214                 border-color:           #e9f;\r
 215             background-color:   #ecf;\r
 216         }\r
 217         \r
 218         blockquote, cite {}\r
 219         em {}\r
 220 \r
 221         /* tables still need 'cellspacing="0"' in the markup */\r
 222         table {\r
 223                 border:                         #999 solid;\r
 224                 border-width:           1px 1px 0 0;\r
 225                 border-collapse:        collapse;\r
 226                 empty-cells:            show;\r
 227                 border-spacing:         0;\r
 228                 line-height:            1.6em;\r
 229         }\r
 230 \r
 231         th, td {\r
 232                 padding:                        5px;\r
 233                 border:                         #999 solid;\r
 234                 border-width:           0 0 1px 1px;\r
 235         }\r
 236 \r
 237 /*  image layout\r
 238 --------------------------------------------------------------------------------------*/\r
 239         .float-left {\r
 240                 float:                          left;\r
 241                 margin:                         0 1em 1em 0;\r
 242         }\r
 243         .float-right {\r
 244                 float:                          right;\r
 245                 margin:                         0 0 1em 1em;\r
 246         }\r
 247 \r
 248 /*  Button\r
 249 --------------------------------------------------------------------------------------*/\r
 250         .button {\r
 251                 border:                                 1px solid;\r
 252                 background:                             -moz-linear-gradient(center top , #F9F9F9, #E3E3E3) repeat scroll 0 0 transparent;\r
 253                 border-color:                   #ccc #bbb #aaa;\r
 254                 color:                                  #666;\r
 255                 font-weight:                    bold;\r
 256                 text-align:                             center;\r
 257                 cursor:                                 pointer;\r
 258                 overflow:                               hidden;\r
 259                 height:                                 30px;\r
 260                 line-height:                    30px;\r
 261                 border-radius:                  3px;\r
 262                 -o-border-radius:               3px;\r
 263                 -ms-border-radius:              3px;\r
 264                 -moz-border-radius:             3px;\r
 265                 -webkit-border-radius:  3px;\r
 266         }\r
 267 \r
 268 /*  Loading\r
 269 --------------------------------------------------------------------------------------*/\r
 270         .loading {\r
 271                 background-image:               url( ../images/loading.gif);\r
 272                 background-position:    50% 50%;\r
 273                 background-repeat:              no-repeat;\r
 274         }\r
 275         .error {\r
 276                 background-image:               url( ../images/error.png);\r
 277                 background-position:    50% 50%;\r
 278                 background-repeat:              no-repeat;\r
 279         }\r
 280 \r
 281 \r
 282 /*  Footer & Footer Fix\r
 283  *   http://www.themaninblue.com/writing/perspective/2005/08/29/\r
 284 --------------------------------------------------------------------------------------*/\r
 285         html,\r
 286         body {\r
 287                 height:                 100%;\r
 288         }\r
 289         #general-content {\r
 290                 position:               relative;\r
 291                 min-height:             100%;\r
 292                 _height:                100%;\r
 293         }\r
 294         \r
 295         #outer-wrapper {\r
 296                 padding-bottom: 200px;/* フッターの高さと同じ値にする */\r
 297         }\r
 298 \r
 299         #footer-content {\r
 300                 height:                 200px;\r
 301                 position:               relative;\r
 302                 margin-top:             -200px;\r
 303         }\r
 304 \r
 305 \r
 306 /*  Noscript Alert\r
 307 --------------------------------------------------------------------------------------*/\r
 308         #noscript-alert {\r
 309                 border-left:            1px solid #666;\r
 310                 display:                        block;\r
 311                 text-align:                     center;\r
 312                 color:                          red;\r
 313                 font-weight:            bold;\r
 314                 font-size:                      12px;\r
 315                 line-height:            12px;\r
 316                 padding:                        11px 0 7px;\r
 317         }\r
 318 \r
 319 /*  global-navi\r
 320 --------------------------------------------------------------------------------------*/\r
 321         #global-navi {\r
 322                 position:                               absolute;\r
 323                 right:                                  0;\r
 324                 top:                                    0;\r
 325                 text-align:                             right;\r
 326                 height:                                 30px;\r
 327                 border-right:                   1px solid #666;\r
 328         }\r
 329                 #global-navi a,\r
 330                 #global-navi a:link,\r
 331                 #global-navi a:visited,\r
 332                 #global-navi a:active {\r
 333                         text-align:                     center;\r
 334                         color:                          #666;\r
 335                         text-decoration:        none;\r
 336                         display:                        inline-block;\r
 337                         _display:                       inline;\r
 338                         _zoom:                          1;\r
 339                         float:                          left;\r
 340                         width:                          79px;\r
 341                         border-left:            1px solid #666;\r
 342                         font-size:                      12px;\r
 343                         line-height:            12px;\r
 344                         padding:                        11px 0 7px;\r
 345                         outline:                        0;\r
 346                 }\r
 347 \r
 348                 #global-navi a {\r
 349                         background-color:       #ccc; /* for ie6 */\r
 350                 }\r
 351                 #global-navi a:active {\r
 352                         background-color:       #333;\r
 353                 }\r
 354                 #global-navi a:hover {\r
 355                         background-color:       #999;\r
 356                         color:                          #eee;\r
 357                 }\r
 358                 #global-navi a.current,\r
 359                 #global-navi a.current:visited {\r
 360                         background-color:       #666;\r
 361                         color:                          #eee;\r
 362                 }\r
 363 \r
 364 /*  header\r
 365 --------------------------------------------------------------------------------------*/\r
 366         #header {\r
 367                 background-color:               #ccc;\r
 368                 height:                                 30px;\r
 369                 line-height:                    30px;\r
 370         }\r
 371         h1 {\r
 372                 height:                                 30px;\r
 373                 line-height:                    30px;\r
 374                 font-size:                              1.4em;\r
 375                 font-weight:                    normal;\r
 376                 text-shadow:                    1px 1px 3px rgba(0, 0, 0, 0.6);\r
 377         }       \r
 378 \r
 379 /*  base-content-width\r
 380 --------------------------------------------------------------------------------------*/\r
 381         .base-content-width {\r
 382                 width:                                  770px;\r
 383                 margin:                                 0 auto;\r
 384         }\r
 385         \r
 386 /*  main\r
 387 --------------------------------------------------------------------------------------*/\r
 388         #main,\r
 389         .main {\r
 390                 padding:                                20px 10px;\r
 391         }\r
 392                 #main p,\r
 393                 #main pre,\r
 394                 #main blockquote,\r
 395                 .main p,\r
 396                 .main pre,\r
 397                 .main blockquote {\r
 398                         line-height:                    1.6em;\r
 399                 }\r
 400 \r
 401 /*  footer-content\r
 402 --------------------------------------------------------------------------------------*/\r
 403         #footer-content {\r
 404                 background-color:               #ccc;\r
 405                 position:                               relative;\r
 406         }\r
 407         #footer {\r
 408                 border-top:                             1px solid #999;\r
 409                 padding-bottom:                 30px;\r
 410         }\r
 411                 .footer-item-wrapper {\r
 412                         width:                                  200px;\r
 413                         float:                                  left;\r
 414                 }\r
 415                         .footer-item {\r
 416                                 padding-right:          30px;\r
 417                         }\r
 418                         .footer-item h2 {\r
 419                                 font-size:                      1em;\r
 420                                 padding:                        0 0 0.3em 0.5em;\r
 421                                 margin-top:                     0.7em;\r
 422                                 margin-bottom:          0.6em;\r
 423                                 text-align:                     left;\r
 424                                 border-top:                     0;\r
 425                                 border-left:            0;\r
 426                                 border-right:           0;\r
 427                                 border-bottom:          1px solid #999;\r
 428                                 box-shadow:                     none;\r
 429                                 -moz-box-shadow:        none;\r
 430                                 -webkit-box-shadow:     0;\r
 431                         }\r
 432                         .footer-item ul {\r
 433                                 list-style:                     none;\r
 434                                 padding:                        0 30px 0 1em;\r
 435                                 margin:                         0;\r
 436                         }\r
 437                                 .footer-item li {\r
 438                                         line-height:            1.6em;\r
 439                                 }\r
 440                 #copyright {\r
 441                         position:                               absolute;\r
 442                         left:                                   0;\r
 443                         bottom:                                 10px;\r
 444                         width:                                  100%;\r
 445                         height:                                 20px;\r
 446                         line-height:                    20px;\r
 447                         text-align:                             center;\r
 448                 }\r
 449 \r
 450 /*  dl table\r
 451 --------------------------------------------------------------------------------------*/\r
 452         .dl-table dt,\r
 453         .dl-table-small dt {\r
 454                 clear:                  left;\r
 455                 float:                  left;\r
 456                 height:                 1.8em;\r
 457                 line-height:    1.8em;\r
 458                 overflow:               hidden;\r
 459                 margin:                 0;\r
 460                 padding:                0 0 0 0.2em;\r
 461         }\r
 462         .dl-table dd,\r
 463         .dl-table-small dd {\r
 464                 margin:                 0 0 0.5em;\r
 465                 line-height:    1.8em;\r
 466                 border-bottom:  1px solid #ccc;\r
 467         }\r
 468         .dl-table dt {\r
 469                 width:                  180px;\r
 470         }\r
 471         .dl-table dd {\r
 472                 padding:                0 0 0 200px;\r
 473         }\r
 474         .dl-table-small dt {\r
 475                 width:                  140px;\r
 476         }\r
 477         .dl-table-small dd {\r
 478                 padding:                0 0 0 150px;\r
 479         }\r
 480 /*  Reversible Image\r
 481 --------------------------------------------------------------------------------------*/        \r
 482         img.img-flip-v { /* 上下反転 */\r
 483                 transform:                              scale( 1, -1);\r
 484                 -o-transform:                   rotate(180deg) scale(-1);\r
 485                 -ms-transform:                  scale( 1, -1);\r
 486                 -moz-transform:                 scale( 1, -1);\r
 487                 -webkit-transform:              scale( 1, -1);\r
 488                 /*filter:                                       progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r
 489                 -ms-filter:                             progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);*/\r
 490                 filter:                                 flipv();\r
 491                 -ms-filter:                             flipv();\r
 492         }\r
 493         v\:image.img-flip-v {\r
 494                 flip:                                   y; /* vml */\r
 495         } \r
 496         \r
 497         img.img-flip-h { /* 左右反転 */\r
 498                 transform:                              scale( -1, 1);\r
 499                 -o-transform:                   scale(-1);\r
 500                 -ms-transform:                  scale( -1, 1);\r
 501                 -moz-transform:                 scale( -1, 1);\r
 502                 -webkit-transform:              scale( -1, 1);\r
 503                 /*filter:                                       progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r
 504                 -ms-filter:                             progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);*/\r
 505                 filter:                                 fliph();\r
 506                 -ms-filter:                             fliph();\r
 507         }\r
 508         v\:image.img-flip-h {\r
 509                 flip:                                   x; /* vml */\r
 510         }\r
 511         \r
 512         img.img-flip-vh { /* 上下左右反転 */\r
 513                 transform:                              scale( -1, -1);\r
 514                 -o-transform:                   rotate(180deg);\r
 515                 -ms-transform:                  scale( -1, -1);\r
 516                 -moz-transform:                 scale( -1, -1);\r
 517                 -webkit-transform:              scale( -1, -1);\r
 518                 /*filter:                                       progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r
 519                 -ms-filter:                             progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);*/\r
 520                 filter:                                 flipv() fliph();\r
 521                 -ms-filter:                             flipv() fliph();\r
 522         }\r
 523         v\:image.img-flip-vh {\r
 524                 rotation :                              180; /* vml */\r
 525         }\r