0.3.0/common.css

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