app/assets/stylesheets/site.css

   1 @charset "UTF-8";\r
   2 \r
   3 /*  VML ( v\:* don't work for ie8(ie8mode))\r
   4 --------------------------------------------------------------------------------------*/\r
   5         v\:shape,\r
   6         v\:image {\r
   7                 behavior:       url(#default#VML);\r
   8                 display:        block;\r
   9         }\r
  10 \r
  11 /*  Reset\r
  12 --------------------------------------------------------------------------------------*/\r
  13 /*\r
  14 Copyright (c) 2009, Yahoo! Inc. All rights reserved.\r
  15 Code licensed under the BSD License:\r
  16 http://developer.yahoo.net/yui/license.txt\r
  17 version: 2.7.0\r
  18 */\r
  19         body{\r
  20                 font:                   13px/1.231 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;\r
  21                 line-height:    1;\r
  22                 *font-size:             small;\r
  23                 *font:                  x-small;\r
  24         }\r
  25         select, input, button, textarea, button {\r
  26                 font:                   99% arial,helvetica,clean,sans-serif;\r
  27         }\r
  28         table{\r
  29                 font-size:              inherit;\r
  30                 font:                   100%;\r
  31         }\r
  32         \r
  33         html, body, div, span, applet, object, iframe,\r
  34         h1, h2, h3, h4, h5, h6, p, blockquote, pre,\r
  35         a, abbr, acronym, address, big, cite, code,\r
  36         del, dfn, em, font, img, ins, kbd, q, s, samp,\r
  37         small, strike, strong, sub, sup, tt, var,\r
  38         b, u, i, center,\r
  39         dl, dt, dd, ol, ul, li,\r
  40         fieldset, form, label, legend,\r
  41         table, caption, tbody, tfoot, thead {\r
  42                 margin:                 0;\r
  43                 padding:                0;\r
  44                 border:                 0;\r
  45                 outline:                0;\r
  46                 vertical-align: baseline;\r
  47                 font-family:    'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;\r
  48         }\r
  49          \r
  50         p {\r
  51                 text-shadow:    #000 0 0 0;/* for Safari */ \r
  52                 -moz-opacity:   0.99;/* for Firefox */ \r
  53         }\r
  54         \r
  55         pre, code, kbd, samp, tt {\r
  56                 font-family:            monospace;\r
  57                 *font-size:                     108%;\r
  58         }\r
  59 \r
  60         /* http://e2designer.seesaa.net/article/152168876.html */\r
  61         /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r
  62         pre,\r
  63         .break-word {\r
  64                 white-space: pre;           /* CSS 2.0 */\r
  65                 white-space: pre-wrap;      /* CSS 2.1 */\r
  66                 white-space: pre-line;      /* CSS 3.0 */\r
  67                 white-space: -pre-wrap;     /* Opera 4-6 */\r
  68                 white-space: -o-pre-wrap;   /* Opera 7 */\r
  69                 white-space: -moz-pre-wrap; /* Mozilla */\r
  70                 white-space: -hp-pre-wrap;  /* HP Printers */\r
  71                 word-wrap:   break-word;    /* IE 5+ */\r
  72         }\r
  73         \r
  74         /* remember to define focus styles! */\r
  75         :focus { outline: 0;}\r
  76         \r
  77         /* remember to highlight inserts somehow! */\r
  78         ins { text-decoration: none;}\r
  79         del { text-decoration: line-through;}\r
  80         \r
  81         /* http://honoo-no.com/creators/2008/02/14_211120.html */\r
  82         textarea, input {\r
  83                 font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3",sans-serif;\r
  84         }\r
  85 \r
  86 /*  ClearFix\r
  87 --------------------------------------------------------------------------------------*/\r
  88 .clearfix:after {\r
  89   content: ".";  /* 新しい要素を作る */\r
  90   display: block;  /* ブロックレベル要素に */\r
  91   clear: both;\r
  92   height: 0;\r
  93   visibility: hidden;\r
  94 }\r
  95 \r
  96 .clearfix {\r
  97   min-height: 1px;\r
  98 }\r
  99 \r
 100 * html .clearfix {\r
 101   height: 1px;\r
 102   /*\*//*/\r
 103   height: auto;\r
 104   overflow: hidden;\r
 105   /**/\r
 106 }\r
 107 \r
 108 /*  Button\r
 109 --------------------------------------------------------------------------------------*/\r
 110         .button {\r
 111                 border:                                 1px solid;\r
 112                 background:                             #E3E3E3;\r
 113                 background:                             -moz-linear-gradient(center top , #F9F9F9, #E3E3E3);\r
 114                 background:                             -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E3E3E3));\r
 115                 border-color:                   #ccc #bbb #aaa;\r
 116                 color:                                  #666;\r
 117                 font-weight:                    bold;\r
 118                 text-align:                             center;\r
 119                 cursor:                                 pointer;\r
 120                 overflow:                               hidden;\r
 121                 height:                                 30px;\r
 122                 line-height:                    30px;\r
 123                 border-radius:                  3px;\r
 124                 -o-border-radius:               3px;\r
 125                 -ms-border-radius:              3px;\r
 126                 -moz-border-radius:             3px;\r
 127                 -webkit-border-radius:  3px;\r
 128         }\r
 129         .button-has-focus {\r
 130                 border-color:                   #4D90FE;\r
 131         }\r
 132 \r
 133 /*  Loading\r
 134 --------------------------------------------------------------------------------------*/\r
 135         .loading {\r
 136                 background-image:               url( /assets/loading.gif);\r
 137                 background-position:    50% 50%;\r
 138                 background-repeat:              no-repeat;\r
 139         }\r
 140         .error {\r
 141                 background-image:               url( /assets/error.png);\r
 142                 background-position:    50% 50%;\r
 143                 background-repeat:              no-repeat;\r
 144         }\r
 145 \r
 146 \r
 147 \r
 148 \r
 149 /*  Noscript Alert\r
 150 --------------------------------------------------------------------------------------*/\r
 151         #noscript-alert {\r
 152                 border-left:            1px solid #666;\r
 153                 display:                        block;\r
 154                 text-align:                     center;\r
 155                 color:                          red;\r
 156                 font-weight:            bold;\r
 157                 font-size:                      12px;\r
 158                 line-height:            12px;\r
 159                 padding:                        11px 0 7px;\r
 160         }\r
 161 \r
 162 /*  Typography\r
 163 --------------------------------------------------------------------------------------*/\r
 164         a:link { color:#008;}\r
 165         a:visited { color: #505;}\r
 166         a { text-decoration: none;}\r
 167         \r
 168         a:hover {\r
 169                 text-decoration:        underline;\r
 170                 color:                          #f60;\r
 171         }\r
 172         h1 {\r
 173                 letter-spacing:         2px;\r
 174                 padding:                        0 10px;\r
 175         }\r
 176         h2 {\r
 177                 letter-spacing:         2px;\r
 178             border-top:                 1px solid #333;\r
 179             border-bottom:              1px solid #333;\r
 180             padding:                    0.5em 0 0.5em 0.5em;\r
 181             font-size:                  1.4em;\r
 182                 line-height:            1.4em;\r
 183                 margin:                         0 2px 1em;\r
 184                 text-shadow:            1px 1px 3px rgba(0, 0, 0, 0.6);\r
 185                 -moz-text-shadow:       1px 1px 3px rgba(0, 0, 0, 0.6);\r
 186                 -webkit-text-shadow:1px 1px 3px rgba(0, 0, 0, 0.6);\r
 187     }\r
 188 \r
 189         h3 {\r
 190                 letter-spacing:         2px;\r
 191             border-bottom:              1px dotted #333333;\r
 192             font-size:                  1.4em;\r
 193                 line-height:            1.4em;\r
 194                 padding:                        0 0 0 0.5em;\r
 195                 margin:                         0 0 1em 0.5em;\r
 196                 font-weight:            bold;\r
 197         }               \r
 198 \r
 199         h4 {\r
 200                 font-weight:            bold;\r
 201                 font-size:                      116%;\r
 202                 letter-spacing:         1px;\r
 203                 border-left:            0.5em #ccc solid;\r
 204                 border-bottom:          1px #999 solid;\r
 205                 padding:                        4px 0 2px 0.6em;\r
 206                 margin:                         2em 0 1em 1em;\r
 207         }\r
 208         h5 {\r
 209                 letter-spacing:         1px;\r
 210                 border-bottom:          1px #999 dotted;\r
 211                 padding:                        6px 6px 2px;\r
 212                 margin:                         1.5em 14px 1em 1.5em;\r
 213         }\r
 214         h5, h6 {\r
 215                 font-size:                      1em;\r
 216                 padding:                        0 5px 0;\r
 217         }\r
 218         h6 {\r
 219                 border-left:            5px #999 solid;\r
 220                 letter-spacing:         1px;\r
 221                 margin-left:            2em;\r
 222         }\r
 223         \r
 224         blockquote, cite {}\r
 225         em {}\r
 226 \r
 227         /* tables still need 'cellspacing="0"' in the markup */\r
 228         table {\r
 229                 border:                         #999 solid;\r
 230                 border-width:           1px 1px 0 0;\r
 231                 border-collapse:        collapse;\r
 232                 empty-cells:            show;\r
 233                 border-spacing:         0;\r
 234                 line-height:            1.6em;\r
 235         }\r
 236 \r
 237         th, td {\r
 238                 padding:                        5px;\r
 239                 border:                         #999 solid;\r
 240                 border-width:           0 0 1px 1px;\r
 241         }\r
 242         \r
 243 /*  Footer & Footer Fix\r
 244  *   http://www.themaninblue.com/writing/perspective/2005/08/29/\r
 245 --------------------------------------------------------------------------------------*/\r
 246         html,\r
 247         body {\r
 248                 height:                 100%;\r
 249         }\r
 250         #general-content {\r
 251                 position:               relative;\r
 252                 min-height:             100%;\r
 253                 _height:                100%;\r
 254         }\r
 255         \r
 256         #outer-wrapper {\r
 257                 padding-bottom: 200px;/* フッターの高さと同じ値にする */\r
 258         }\r
 259 \r
 260         #footer-content {\r
 261                 height:                 200px;\r
 262                 position:               relative;\r
 263                 margin-top:             -200px;\r
 264         }\r
 265 \r
 266 /*  global-navi\r
 267 --------------------------------------------------------------------------------------*/\r
 268         #global-navi {\r
 269                 position:                               absolute;\r
 270                 right:                                  0;\r
 271                 top:                                    0;\r
 272                 text-align:                             right;\r
 273                 height:                                 30px;\r
 274                 border-right:                   1px solid #666;\r
 275         }\r
 276                 #global-navi a,\r
 277                 #global-navi a:link,\r
 278                 #global-navi a:visited,\r
 279                 #global-navi a:active {\r
 280                         text-align:                     center;\r
 281                         color:                          #666;\r
 282                         text-decoration:        none;\r
 283                         display:                        inline-block;\r
 284                         _display:                       inline;\r
 285                         _zoom:                          1;\r
 286                         float:                          left;\r
 287                         width:                          79px;\r
 288                         border-left:            1px solid #666;\r
 289                         font-size:                      12px;\r
 290                         line-height:            12px;\r
 291                         padding:                        11px 0 7px;\r
 292                         outline:                        0;\r
 293                 }\r
 294 \r
 295                 #global-navi a {\r
 296                         background-color:       #ccc; /* for ie6 */\r
 297                 }\r
 298                 #global-navi a:active {\r
 299                         background-color:       #333;\r
 300                 }\r
 301                 #global-navi a:hover {\r
 302                         background-color:       #999;\r
 303                         color:                          #eee;\r
 304                 }\r
 305                 #global-navi a.current,\r
 306                 #global-navi a.current:visited {\r
 307                         background-color:       #666;\r
 308                         color:                          #eee;\r
 309                 }\r
 310 \r
 311 /*  header\r
 312 --------------------------------------------------------------------------------------*/\r
 313         #header {\r
 314                 background-color:               #ccc;\r
 315                 height:                                 30px;\r
 316                 line-height:                    30px;\r
 317         }\r
 318         h1 {\r
 319                 height:                                 30px;\r
 320                 line-height:                    30px;\r
 321                 font-size:                              1.4em;\r
 322                 font-weight:                    normal;\r
 323                 text-shadow:                    1px 1px 3px rgba(0, 0, 0, 0.6);\r
 324                 -moz-text-shadow:               1px 1px 3px rgba(0, 0, 0, 0.6);\r
 325                 -webkit-text-shadow:    1px 1px 3px rgba(0, 0, 0, 0.6);\r
 326         }       \r
 327 \r
 328 /*  base-content-width\r
 329 --------------------------------------------------------------------------------------*/\r
 330         .base-content-width {\r
 331                 width:                                  770px;\r
 332                 margin:                                 0 auto;\r
 333         }\r
 334         \r
 335 /*  breadcrumb\r
 336 --------------------------------------------------------------------------------------*/\r
 337         #breadcrumb {\r
 338                 font-size:                              12px;\r
 339                 color:                                  #666;\r
 340                 margin:                                 0 0 10px 20px;\r
 341                 line-height:                    1.2em;\r
 342                 text-align:                             right;\r
 343         }\r
 344 /*  main\r
 345 --------------------------------------------------------------------------------------*/\r
 346         #main {\r
 347                 padding:                                20px 10px;\r
 348         }\r
 349                 #main p,\r
 350                 #main dl,\r
 351                 #main pre,\r
 352                 #main table,\r
 353                 #main blockquote,\r
 354                 .main p,\r
 355                 .main dl,\r
 356                 .main pre,\r
 357                 .main table,\r
 358                 .main blockquote {\r
 359                         line-height:            1.6em;\r
 360                         margin:                         0 0 1em 2em;\r
 361                 }\r
 362                 #main ul,\r
 363                 #main ol,               \r
 364                 .main ul,\r
 365                 .main ol {\r
 366                         line-height:            1.6em;\r
 367                         margin:                         0 0 1em 2.8em;\r
 368                 }\r
 369                 \r
 370                 #main .block-element-item,\r
 371                 .main .block-element-item {\r
 372                         display:                        block;\r
 373                         margin:                         0 0 1em 2em;\r
 374                 }\r
 375 \r
 376                 pre,\r
 377                 blockquote {\r
 378                     border:                             1px solid;\r
 379                     overflow:                   auto;\r
 380                     padding:                    4px 0.5em;\r
 381                     margin:                             0.8em 0 1em 2em;\r
 382                     line-height:                1.4em;\r
 383                     white-space:                pre-wrap;\r
 384                     word-wrap:                  break-word;\r
 385                     font-size:                  12px;\r
 386                 }\r
 387                 pre {\r
 388                         border-color:           #ccc;\r
 389                     background-color:   #f0f0f0;\r
 390                 }\r
 391                 blockquote {\r
 392                         border-color:           #e9f;\r
 393                     background-color:   #ecf;\r
 394                 }\r
 395                 \r
 396                 \r
 397 /*  image layout\r
 398 --------------------------------------------------------------------------------------*/\r
 399         .float-left {\r
 400                 float:                          left;\r
 401                 margin:                         0 1em 1em 0;\r
 402         }\r
 403         .float-right {\r
 404                 float:                          right;\r
 405                 margin:                         0 0 1em 1em;\r
 406         }\r
 407                 \r
 408 /*  footer-content\r
 409 --------------------------------------------------------------------------------------*/\r
 410         #footer-content {\r
 411                 background-color:               #ccc;\r
 412                 position:                               relative;\r
 413         }\r
 414         #footer {\r
 415                 border-top:                             1px solid #999;\r
 416                 padding-bottom:                 30px;\r
 417         }\r
 418                 .footer-item-wrapper {\r
 419                         width:                                  200px;\r
 420                         float:                                  left;\r
 421                 }\r
 422                         .footer-item {\r
 423                                 padding-right:          30px;\r
 424                         }\r
 425                         .footer-item h2 {\r
 426                                 font-size:                      1em;\r
 427                                 padding:                        0 0 0.3em 0.5em;\r
 428                                 margin-top:                     0.7em;\r
 429                                 margin-bottom:          0.6em;\r
 430                                 text-align:                     left;\r
 431                                 border-top:                     0;\r
 432                                 border-left:            0;\r
 433                                 border-right:           0;\r
 434                                 border-bottom:          1px solid #999;\r
 435                                 box-shadow:                     none;\r
 436                                 -moz-box-shadow:        none;\r
 437                                 -webkit-box-shadow:     0;\r
 438                         }\r
 439                         .footer-item ul {\r
 440                                 list-style:                     none;\r
 441                                 padding:                        0 30px 0 1em;\r
 442                                 margin:                         0;\r
 443                         }\r
 444                                 .footer-item li {\r
 445                                         line-height:            1.6em;\r
 446                                 }\r
 447                 #copyright {\r
 448                         position:                               absolute;\r
 449                         left:                                   0;\r
 450                         bottom:                                 10px;\r
 451                         width:                                  100%;\r
 452                         height:                                 20px;\r
 453                         line-height:                    20px;\r
 454                         text-align:                             center;\r
 455                 }