app/assets/stylesheets/site.css

   1 @charset "UTF-8";\r
   2 \r
   3 /* pettanR site.css\r
   4  *   version 0.5.4\r
   5  * \r
   6  *   author:\r
   7  *     itozyun\r
   8  */\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 /*  Typography\r
  87 --------------------------------------------------------------------------------------*/\r
  88         a:link { color:#008;}\r
  89         a:visited { color: #505;}\r
  90         a { text-decoration: none;}\r
  91         \r
  92         a:hover {\r
  93                 text-decoration:        underline;\r
  94                 color:                          #f60;\r
  95         }\r
  96         h1 {\r
  97                 letter-spacing:         2px;\r
  98                 padding:                        0 10px;\r
  99         }\r
 100         h2 {\r
 101                 letter-spacing:         2px;\r
 102             border-top:                 1px solid #333;\r
 103             border-bottom:              1px solid #333;\r
 104             padding:                    0.5em 0 0.5em 0.5em;\r
 105             font-size:                  1.4em;\r
 106                 line-height:            1.4em;\r
 107                 margin:                         0 2px 1em;\r
 108                 text-shadow:            1px 1px 3px rgba(0, 0, 0, 0.6);\r
 109                 -moz-text-shadow:       1px 1px 3px rgba(0, 0, 0, 0.6);\r
 110                 -webkit-text-shadow:1px 1px 3px rgba(0, 0, 0, 0.6);\r
 111     }\r
 112 \r
 113         h3 {\r
 114                 letter-spacing:         2px;\r
 115             border-bottom:              1px dotted #333333;\r
 116             font-size:                  1.4em;\r
 117                 line-height:            1.4em;\r
 118                 padding:                        0 0 0 0.5em;\r
 119                 margin:                         0 0 1em 0.5em;\r
 120                 font-weight:            bold;\r
 121         }               \r
 122 \r
 123         h4 {\r
 124                 font-weight:            bold;\r
 125                 font-size:                      116%;\r
 126                 letter-spacing:         1px;\r
 127                 border-left:            0.5em #ccc solid;\r
 128                 border-bottom:          1px #999 solid;\r
 129                 padding:                        4px 0 2px 0.6em;\r
 130                 margin:                         2em 0 1em 1em;\r
 131         }\r
 132         h5 {\r
 133                 letter-spacing:         1px;\r
 134                 border-bottom:          1px #999 dotted;\r
 135                 padding:                        6px 6px 2px;\r
 136                 margin:                         1.5em 14px 1em 1.5em;\r
 137         }\r
 138         h5, h6 {\r
 139                 font-size:                      1em;\r
 140                 padding:                        0 5px 0;\r
 141         }\r
 142         h6 {\r
 143                 border-left:            5px #999 solid;\r
 144                 letter-spacing:         1px;\r
 145                 margin-left:            2em;\r
 146         }\r
 147         \r
 148         blockquote, cite {}\r
 149         em {}\r
 150 \r
 151         /* tables still need 'cellspacing="0"' in the markup */\r
 152         table {\r
 153                 border:                         #999 solid;\r
 154                 border-width:           1px 1px 0 0;\r
 155                 border-collapse:        collapse;\r
 156                 empty-cells:            show;\r
 157                 border-spacing:         0;\r
 158                 line-height:            1.6em;\r
 159         }\r
 160 \r
 161         th, td {\r
 162                 padding:                        5px;\r
 163                 border:                         #999 solid;\r
 164                 border-width:           0 0 1px 1px;\r
 165         }\r
 166         \r
 167 /*  Footer & Footer Fix\r
 168  *   http://www.themaninblue.com/writing/perspective/2005/08/29/\r
 169 --------------------------------------------------------------------------------------*/\r
 170         html,\r
 171         body {\r
 172                 height:                 100%;\r
 173         }\r
 174         #general-content {\r
 175                 position:               relative;\r
 176                 min-height:             100%;\r
 177                 _height:                100%;\r
 178         }\r
 179         \r
 180         #outer-wrapper {\r
 181                 padding-bottom: 200px;/* フッターの高さと同じ値にする */\r
 182         }\r
 183 \r
 184         #footer-content {\r
 185                 height:                 200px;\r
 186                 position:               relative;\r
 187                 margin-top:             -200px;\r
 188         }\r
 189 \r
 190 /*  global-navi\r
 191 --------------------------------------------------------------------------------------*/\r
 192         #global-navi {\r
 193                 position:                               absolute;\r
 194                 right:                                  0;\r
 195                 top:                                    0;\r
 196                 text-align:                             right;\r
 197                 height:                                 30px;\r
 198                 border-right:                   1px solid #666;\r
 199         }\r
 200                 #global-navi a,\r
 201                 #global-navi a:link,\r
 202                 #global-navi a:visited,\r
 203                 #global-navi a:active {\r
 204                         text-align:                     center;\r
 205                         color:                          #666;\r
 206                         text-decoration:        none;\r
 207                         display:                        inline-block;\r
 208                         _display:                       inline;\r
 209                         _zoom:                          1;\r
 210                         float:                          left;\r
 211                         width:                          79px;\r
 212                         border-left:            1px solid #666;\r
 213                         font-size:                      12px;\r
 214                         line-height:            12px;\r
 215                         padding:                        11px 0 7px;\r
 216                         outline:                        0;\r
 217                 }\r
 218 \r
 219                 #global-navi a {\r
 220                         background-color:       #ccc; /* for ie6 */\r
 221                 }\r
 222                 #global-navi a:active {\r
 223                         background-color:       #333;\r
 224                 }\r
 225                 #global-navi a:hover {\r
 226                         background-color:       #999;\r
 227                         color:                          #eee;\r
 228                 }\r
 229                 #global-navi a.current,\r
 230                 #global-navi a.current:visited {\r
 231                         background-color:       #666;\r
 232                         color:                          #eee;\r
 233                 }\r
 234 \r
 235 /*  header\r
 236 --------------------------------------------------------------------------------------*/\r
 237         #header {\r
 238                 background-color:               #ccc;\r
 239                 height:                                 30px;\r
 240                 line-height:                    30px;\r
 241         }\r
 242         h1 {\r
 243                 height:                                 30px;\r
 244                 line-height:                    30px;\r
 245                 font-size:                              1.4em;\r
 246                 font-weight:                    normal;\r
 247                 text-shadow:                    1px 1px 3px rgba(0, 0, 0, 0.6);\r
 248                 -moz-text-shadow:               1px 1px 3px rgba(0, 0, 0, 0.6);\r
 249                 -webkit-text-shadow:    1px 1px 3px rgba(0, 0, 0, 0.6);\r
 250         }       \r
 251 \r
 252 /*  base-content-width\r
 253 --------------------------------------------------------------------------------------*/\r
 254         .base-content-width {\r
 255                 width:                                  770px;\r
 256                 margin:                                 0 auto;\r
 257         }\r
 258         \r
 259 /*  breadcrumb\r
 260 --------------------------------------------------------------------------------------*/\r
 261         #breadcrumb {\r
 262                 font-size:                              12px;\r
 263                 color:                                  #666;\r
 264                 margin:                                 0 0 10px 20px;\r
 265                 line-height:                    1.2em;\r
 266                 text-align:                             right;\r
 267         }\r
 268 /*  main\r
 269 --------------------------------------------------------------------------------------*/\r
 270         #main {\r
 271                 padding:                                20px 10px;\r
 272         }\r
 273                 #main p,\r
 274                 #main dl,\r
 275                 #main pre,\r
 276                 #main table,\r
 277                 #main blockquote,\r
 278                 .main p,\r
 279                 .main dl,\r
 280                 .main pre,\r
 281                 .main table,\r
 282                 .main blockquote {\r
 283                         line-height:            1.6em;\r
 284                         margin:                         0 0 1em 2em;\r
 285                 }\r
 286                 #main ul,\r
 287                 #main ol,               \r
 288                 .main ul,\r
 289                 .main ol {\r
 290                         line-height:            1.6em;\r
 291                         margin:                         0 0 1em 2.8em;\r
 292                 }\r
 293                 \r
 294                 #main .block-element-item,\r
 295                 .main .block-element-item {\r
 296                         display:                        block;\r
 297                         margin:                         0 0 1em 2em;\r
 298                 }\r
 299 \r
 300                 pre,\r
 301                 blockquote {\r
 302                     border:                             1px solid;\r
 303                     overflow:                   auto;\r
 304                     padding:                    4px 0.5em;\r
 305                     margin:                             0.8em 0 1em 2em;\r
 306                     line-height:                1.4em;\r
 307                     white-space:                pre-wrap;\r
 308                     word-wrap:                  break-word;\r
 309                     font-size:                  12px;\r
 310                 }\r
 311                 pre {\r
 312                         border-color:           #ccc;\r
 313                     background-color:   #f0f0f0;\r
 314                 }\r
 315                 blockquote {\r
 316                         border-color:           #e9f;\r
 317                     background-color:   #ecf;\r
 318                 }\r
 319                 \r
 320                 \r
 321 /*  image layout\r
 322 --------------------------------------------------------------------------------------*/\r
 323         .float-left {\r
 324                 float:                          left;\r
 325                 margin:                         0 1em 1em 0;\r
 326         }\r
 327         .float-right {\r
 328                 float:                          right;\r
 329                 margin:                         0 0 1em 1em;\r
 330         }\r
 331                 \r
 332 /*  footer-content\r
 333 --------------------------------------------------------------------------------------*/\r
 334         #footer-content {\r
 335                 background-color:               #ccc;\r
 336                 position:                               relative;\r
 337         }\r
 338         #footer {\r
 339                 border-top:                             1px solid #999;\r
 340                 padding-bottom:                 30px;\r
 341         }\r
 342                 .footer-item-wrapper {\r
 343                         width:                                  200px;\r
 344                         float:                                  left;\r
 345                 }\r
 346                         .footer-item {\r
 347                                 padding-right:          30px;\r
 348                         }\r
 349                         .footer-item h2 {\r
 350                                 font-size:                      1em;\r
 351                                 padding:                        0 0 0.3em 0.5em;\r
 352                                 margin-top:                     0.7em;\r
 353                                 margin-bottom:          0.6em;\r
 354                                 text-align:                     left;\r
 355                                 border-top:                     0;\r
 356                                 border-left:            0;\r
 357                                 border-right:           0;\r
 358                                 border-bottom:          1px solid #999;\r
 359                                 box-shadow:                     none;\r
 360                                 -moz-box-shadow:        none;\r
 361                                 -webkit-box-shadow:     0;\r
 362                         }\r
 363                         .footer-item ul {\r
 364                                 list-style:                     none;\r
 365                                 padding:                        0 30px 0 1em;\r
 366                                 margin:                         0;\r
 367                         }\r
 368                                 .footer-item li {\r
 369                                         line-height:            1.6em;\r
 370                                 }\r
 371                 #copyright {\r
 372                         position:                               absolute;\r
 373                         left:                                   0;\r
 374                         bottom:                                 10px;\r
 375                         width:                                  100%;\r
 376                         height:                                 20px;\r
 377                         line-height:                    20px;\r
 378                         text-align:                             center;\r
 379                 }