stylesheets/stylesheet.css

   1 /* http://meyerweb.com/eric/tools/css/reset/
   2    v2.0 | 20110126
   3    License: none (public domain)
   4 */
   5 html, body, div, span, applet, object, iframe,
   6 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   7 a, abbr, acronym, address, big, cite, code,
   8 del, dfn, em, img, ins, kbd, q, s, samp,
   9 small, strike, strong, sub, sup, tt, var,
  10 b, u, i, center,
  11 dl, dt, dd, ol, ul, li,
  12 fieldset, form, label, legend,
  13 table, caption, tbody, tfoot, thead, tr, th, td,
  14 article, aside, canvas, details, embed,
  15 figure, figcaption, footer, header, hgroup,
  16 menu, nav, output, ruby, section, summary,
  17 time, mark, audio, video {
  18         padding: 0;
  19         margin: 0;
  20         font: inherit;
  21         font-size: 100%;
  22         vertical-align: baseline;
  23         border: 0;
  24 }
  25 /* HTML5 display-role reset for older browsers */
  26 article, aside, details, figcaption, figure,
  27 footer, header, hgroup, menu, nav, section {
  28         display: block;
  29 }
  30 body {
  31         line-height: 1;
  32 }
  33 ol, ul {
  34         list-style: none;
  35 }
  36 blockquote, q {
  37         quotes: none;
  38 }
  39 blockquote:before, blockquote:after,
  40 q:before, q:after {
  41         content: '';
  42         content: none;
  43 }
  44 table {
  45         border-spacing: 0;
  46         border-collapse: collapse;
  47 }
  48
  49 /* LAYOUT STYLES */
  50 body {
  51   font-family: 'Helvetica Neue', Helvetica, Arial, serif;
  52   font-size: 1em;
  53   line-height: 1.5;
  54   color: #6d6d6d;
  55   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  56   background: #e7e7e7 url(../images/body-bg.png) 0 0 repeat;
  57 }
  58
  59 a {
  60   color: #d5000d;
  61 }
  62 a:hover {
  63   color: #c5000c;
  64 }
  65
  66 header {
  67   padding-top: 35px;
  68   padding-bottom: 25px;
  69 }
  70
  71 header h1 {
  72   font-family: 'Chivo', 'Helvetica Neue', Helvetica, Arial, serif;
  73   font-size: 48px; font-weight: 900;
  74   line-height: 1.2;
  75   color: #303030;
  76   letter-spacing: -1px;
  77 }
  78
  79 header h2 {
  80   font-size: 24px;
  81   font-weight: normal;
  82   line-height: 1.3;
  83   color: #aaa;
  84   letter-spacing: -1px;
  85 }
  86
  87 #container {
  88   min-height: 595px;
  89   background: transparent url(../images/highlight-bg.jpg) 50% 0 no-repeat;
  90 }
  91
  92 .inner {
  93   width: 620px;
  94   margin: 0 auto;
  95 }
  96
  97 #container .inner img {
  98   max-width: 100%;
  99 }
 100
 101 #downloads {
 102   margin-bottom: 40px;
 103 }
 104
 105 a.button {
 106   display: block;
 107   float: left;
 108   width: 179px;
 109   padding: 12px 8px 12px 8px;
 110   margin-right: 14px;
 111   font-size: 15px;
 112   font-weight: bold;
 113   line-height: 25px;
 114   color: #303030;
 115   background: #fdfdfd; /* Old browsers */
 116   background: -moz-linear-gradient(top,  #fdfdfd 0%, #f2f2f2 100%); /* FF3.6+ */
 117   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
 118   background: -webkit-linear-gradient(top,  #fdfdfd 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
 119   background: -o-linear-gradient(top,  #fdfdfd 0%,#f2f2f2 100%); /* Opera 11.10+ */
 120   background: -ms-linear-gradient(top,  #fdfdfd 0%,#f2f2f2 100%); /* IE10+ */
 121   background: linear-gradient(top,  #fdfdfd 0%,#f2f2f2 100%); /* W3C */
 122   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
 123   border-top: solid 1px #cbcbcb;
 124   border-right: solid 1px #b7b7b7;
 125   border-bottom: solid 1px #b3b3b3;
 126   border-left: solid 1px #b7b7b7;
 127   border-radius: 30px;
 128   -webkit-box-shadow: 10px 10px 5px #888;
 129   -moz-box-shadow: 10px 10px 5px #888;
 130   box-shadow: 0px 1px 5px #e8e8e8;
 131   -moz-border-radius: 30px;
 132   -webkit-border-radius: 30px;
 133 }
 134 a.button:hover {
 135   background: #fafafa; /* Old browsers */
 136   background: -moz-linear-gradient(top,  #fdfdfd 0%, #f6f6f6 100%); /* FF3.6+ */
 137   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
 138   background: -webkit-linear-gradient(top,  #fdfdfd 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
 139   background: -o-linear-gradient(top,  #fdfdfd 0%,#f6f6f6 100%); /* Opera 11.10+ */
 140   background: -ms-linear-gradient(top,  #fdfdfd 0%,#f6f6f6 100%); /* IE10+ */
 141   background: linear-gradient(top,  #fdfdfd 0%,#f6f6f6, 100%); /* W3C */
 142   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
 143   border-top: solid 1px #b7b7b7;
 144   border-right: solid 1px #b3b3b3;
 145   border-bottom: solid 1px #b3b3b3;
 146   border-left: solid 1px #b3b3b3;
 147 }
 148
 149 a.button span {
 150   display: block;
 151   height: 23px;
 152   padding-left: 50px;
 153 }
 154
 155 #download-zip span {
 156   background: transparent url(../images/zip-icon.png) 12px 50% no-repeat;
 157 }
 158 #download-tar-gz span {
 159   background: transparent url(../images/tar-gz-icon.png) 12px 50% no-repeat;
 160 }
 161 #view-on-github span {
 162   background: transparent url(../images/octocat-icon.png) 12px 50% no-repeat;
 163 }
 164 #view-on-github {
 165   margin-right: 0;
 166 }
 167
 168 code, pre {
 169   margin-bottom: 30px;
 170   font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
 171   font-size: 14px;
 172   color: #222;
 173 }
 174
 175 code {
 176   padding: 0 3px;
 177   background-color: #f2f2f2;
 178   border: solid 1px #ddd;
 179 }
 180
 181 pre {
 182   padding: 20px;
 183   overflow: auto;
 184   color: #f2f2f2;
 185   text-shadow: none;
 186   background: #303030;
 187 }
 188 pre code {
 189   padding: 0;
 190   color: #f2f2f2;
 191   background-color: #303030;
 192   border: none;
 193 }
 194
 195 ul, ol, dl {
 196   margin-bottom: 20px;
 197 }
 198
 199
 200 /* COMMON STYLES */
 201
 202 hr {
 203   height: 1px;
 204   padding-bottom: 1em;
 205   margin-top: 1em;
 206   line-height: 1px;
 207   background: transparent url('../images/hr.png') 50% 0 no-repeat;
 208   border: none;
 209 }
 210
 211 strong {
 212   font-weight: bold;
 213 }
 214
 215 em {
 216   font-style: italic;
 217 }
 218
 219 table {
 220   width: 100%;
 221   border: 1px solid #ebebeb;
 222 }
 223
 224 th {
 225   font-weight: 500;
 226 }
 227
 228 td {
 229   font-weight: 300;
 230   text-align: center;
 231   border: 1px solid #ebebeb;
 232 }
 233
 234 form {
 235   padding: 20px;
 236   background: #f2f2f2;
 237
 238 }
 239
 240
 241 /* GENERAL ELEMENT TYPE STYLES */
 242
 243 h1 {
 244   font-size: 32px;
 245 }
 246
 247 h2 {
 248   margin-bottom: 8px;
 249   font-size: 22px;
 250   font-weight: bold;
 251   color: #303030;
 252 }
 253
 254 h3 {
 255   margin-bottom: 8px;
 256   font-size: 18px;
 257   font-weight: bold;
 258   color: #d5000d;
 259 }
 260
 261 h4 {
 262   font-size: 16px;
 263   font-weight: bold;
 264   color: #303030;
 265 }
 266
 267 h5 {
 268   font-size: 1em;
 269   color: #303030;
 270 }
 271
 272 h6 {
 273   font-size: .8em;
 274   color: #303030;
 275 }
 276
 277 p {
 278   margin-bottom: 20px;
 279   font-weight: 300;
 280 }
 281
 282 a {
 283   text-decoration: none;
 284 }
 285
 286 p a {
 287   font-weight: 400;
 288 }
 289
 290 blockquote {
 291   padding: 0 0 0 30px;
 292   margin-bottom: 20px;
 293   font-size: 1.6em;
 294   border-left: 10px solid #e9e9e9;
 295 }
 296
 297 ul li {
 298   list-style-position: inside;
 299   list-style: disc;
 300   padding-left: 20px;
 301 }
 302
 303 ol li {
 304   list-style-position: inside;
 305   list-style: decimal;
 306   padding-left: 3px;
 307 }
 308
 309 dl dt {
 310   color: #303030;
 311 }
 312
 313 footer {
 314   padding-top: 20px;
 315   padding-bottom: 30px;
 316   margin-top: 40px;
 317   font-size: 13px;
 318   color: #aaa;
 319   background: transparent url('../images/hr.png') 0 0 no-repeat;
 320 }
 321
 322 footer a {
 323   color: #666;
 324 }
 325 footer a:hover {
 326   color: #444;
 327 }
 328
 329 /* MISC */
 330 .clearfix:after {
 331   display: block;
 332   height: 0;
 333   clear: both;
 334   visibility: hidden;
 335   content: '.';
 336 }
 337
 338 .clearfix {display: inline-block;}
 339 * html .clearfix {height: 1%;}
 340 .clearfix {display: block;}
 341
 342 /* #Media Queries
 343 ================================================== */
 344
 345 /* Smaller than standard 960 (devices and browsers) */
 346 @media only screen and (max-width: 959px) { }
 347
 348 /* Tablet Portrait size to standard 960 (devices and browsers) */
 349 @media only screen and (min-width: 768px) and (max-width: 959px) { }
 350
 351 /* All Mobile Sizes (devices and browser) */
 352 @media only screen and (max-width: 767px) {
 353   header {
 354     padding-top: 10px;
 355     padding-bottom: 10px;
 356   }
 357   #downloads {
 358     margin-bottom: 25px;
 359   }
 360   #download-zip, #download-tar-gz {
 361     display: none;
 362   }
 363   .inner {
 364     width: 94%;
 365     margin: 0 auto;
 366   }
 367 }
 368
 369 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
 370 @media only screen and (min-width: 480px) and (max-width: 767px) { }
 371
 372 /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
 373 @media only screen and (max-width: 479px) { }