stylesheets/styles.css

   1 @import url(https://fonts.googleapis.com/css?family=Arvo:400,700,400italic);
   2
   3 /* MeyerWeb Reset */
   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   margin: 0;
  19   padding: 0;
  20   border: 0;
  21   font: inherit;
  22   vertical-align: baseline;
  23 }
  24
  25
  26 /* Base text styles */
  27
  28 body {
  29   padding:10px 50px 0 0;
  30   font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  31         font-size: 14px;
  32         color: #232323;
  33         background-color: #FBFAF7;
  34         margin: 0;
  35         line-height: 1.8em;
  36         -webkit-font-smoothing: antialiased;
  37
  38 }
  39
  40 h1, h2, h3, h4, h5, h6 {
  41   color:#232323;
  42   margin:36px 0 10px;
  43 }
  44
  45 p, ul, ol, table, dl {
  46   margin:0 0 22px;
  47 }
  48
  49 h1, h2, h3 {
  50         font-family: Arvo, Monaco, serif;
  51   line-height:1.3;
  52         font-weight: normal;
  53 }
  54
  55 h1,h2, h3 {
  56         display: block;
  57         border-bottom: 1px solid #ccc;
  58         padding-bottom: 5px;
  59 }
  60
  61 h1 {
  62         font-size: 30px;
  63 }
  64
  65 h2 {
  66         font-size: 24px;
  67 }
  68
  69 h3 {
  70         font-size: 18px;
  71 }
  72
  73 h4, h5, h6 {
  74         font-family: Arvo, Monaco, serif;
  75         font-weight: 700;
  76 }
  77
  78 a {
  79   color:#C30000;
  80   font-weight:200;
  81   text-decoration:none;
  82 }
  83
  84 a:hover {
  85         text-decoration: underline;
  86 }
  87
  88 a small {
  89         font-size: 12px;
  90 }
  91
  92 em {
  93         font-style: italic;
  94 }
  95
  96 strong {
  97   font-weight:700;
  98 }
  99
 100 ul li {
 101   list-style: inside;
 102   padding-left: 25px;
 103 }
 104
 105 ol li {
 106   list-style: decimal inside;
 107   padding-left: 20px;
 108 }
 109
 110 blockquote {
 111   margin: 0;
 112   padding: 0 0 0 20px;
 113   font-style: italic;
 114 }
 115
 116 dl, dt, dd, dl p {
 117         font-color: #444;
 118 }
 119
 120 dl dt {
 121   font-weight: bold;
 122 }
 123
 124 dl dd {
 125   padding-left: 20px;
 126   font-style: italic;
 127 }
 128
 129 dl p {
 130   padding-left: 20px;
 131   font-style: italic;
 132 }
 133
 134 hr {
 135   border:0;
 136   background:#ccc;
 137   height:1px;
 138   margin:0 0 24px;
 139 }
 140
 141 /* Images */
 142
 143 img {
 144   position: relative;
 145   margin: 0 auto;
 146   max-width: 650px;
 147   padding: 5px;
 148   margin: 10px 0 32px 0;
 149   border: 1px solid #ccc;
 150 }
 151
 152
 153 /* Code blocks */
 154
 155 code, pre {
 156         font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
 157   color:#000;
 158   font-size:14px;
 159 }
 160
 161 pre {
 162         padding: 4px 12px;
 163   background: #FDFEFB;
 164   border-radius:4px;
 165   border:1px solid #D7D8C8;
 166   overflow: auto;
 167   overflow-y: hidden;
 168         margin-bottom: 32px;
 169 }
 170
 171
 172 /* Tables */
 173
 174 table {
 175   width:100%;
 176 }
 177
 178 table {
 179   border: 1px solid #ccc;
 180   margin-bottom: 32px;
 181   text-align: left;
 182  }
 183
 184 th {
 185   font-family: 'Arvo', Helvetica, Arial, sans-serif;
 186         font-size: 18px;
 187         font-weight: normal;
 188   padding: 10px;
 189   background: #232323;
 190   color: #FDFEFB;
 191  }
 192
 193 td {
 194   padding: 10px;
 195         background: #ccc;
 196  }
 197
 198
 199 /* Wrapper */
 200 .wrapper {
 201   width:960px;
 202 }
 203
 204
 205 /* Header */
 206
 207 header {
 208         background-color: #171717;
 209         color: #FDFDFB;
 210   width:170px;
 211   float:left;
 212   position:fixed;
 213         border: 1px solid #000;
 214         -webkit-border-top-right-radius: 4px;
 215         -webkit-border-bottom-right-radius: 4px;
 216         -moz-border-radius-topright: 4px;
 217         -moz-border-radius-bottomright: 4px;
 218         border-top-right-radius: 4px;
 219         border-bottom-right-radius: 4px;
 220         padding: 34px 25px 22px 50px;
 221         margin: 30px 25px 0 0;
 222         -webkit-font-smoothing: antialiased;
 223 }
 224
 225 p.header {
 226         font-size: 16px;
 227 }
 228
 229 h1.header {
 230         font-family: Arvo, sans-serif;
 231         font-size: 30px;
 232         font-weight: 300;
 233         line-height: 1.3em;
 234         border-bottom: none;
 235         margin-top: 0;
 236 }
 237
 238
 239 h1.header, a.header, a.name, header a{
 240         color: #fff;
 241 }
 242
 243 a.header {
 244         text-decoration: underline;
 245 }
 246
 247 a.name {
 248         white-space: nowrap;
 249 }
 250
 251 header ul {
 252   list-style:none;
 253   padding:0;
 254 }
 255
 256 header li {
 257         list-style-type: none;
 258   width:132px;
 259   height:15px;
 260         margin-bottom: 12px;
 261         line-height: 1em;
 262         padding: 6px 6px 6px 7px;
 263
 264         background: #AF0011;
 265         background: -moz-linear-gradient(top, #AF0011 0%, #820011 100%);
 266   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
 267   background: -webkit-linear-gradient(top, #AF0011 0%,#820011 100%);
 268   background: -o-linear-gradient(top, #AF0011 0%,#820011 100%);
 269   background: -ms-linear-gradient(top, #AF0011 0%,#820011 100%);
 270   background: linear-gradient(top, #AF0011 0%,#820011 100%);
 271
 272         border-radius:4px;
 273   border:1px solid #0D0D0D;
 274
 275         -webkit-box-shadow: inset 0px 1px 1px 0 rgba(233,2,38, 1);
 276         box-shadow: inset 0px 1px 1px 0 rgba(233,2,38, 1);
 277
 278 }
 279
 280 header li:hover {
 281         background: #C3001D;
 282         background: -moz-linear-gradient(top, #C3001D 0%, #950119 100%);
 283   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
 284   background: -webkit-linear-gradient(top, #C3001D 0%,#950119 100%);
 285   background: -o-linear-gradient(top, #C3001D 0%,#950119 100%);
 286   background: -ms-linear-gradient(top, #C3001D 0%,#950119 100%);
 287   background: linear-gradient(top, #C3001D 0%,#950119 100%);
 288 }
 289
 290 a.buttons {
 291         -webkit-font-smoothing: antialiased;
 292         background: url(../images/arrow-down.png) no-repeat;
 293         font-weight: normal;
 294         text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0;
 295         padding: 2px 2px 2px 22px;
 296         height: 30px;
 297 }
 298
 299 a.github {
 300         background: url(../images/octocat-small.png) no-repeat 1px;
 301 }
 302
 303 a.buttons:hover {
 304         color: #fff;
 305         text-decoration: none;
 306 }
 307
 308
 309 /* Section - for main page content */
 310
 311 section {
 312   width:650px;
 313   float:right;
 314   padding-bottom:50px;
 315 }
 316
 317
 318 /* Footer */
 319
 320 footer {
 321   width:170px;
 322   float:left;
 323   position:fixed;
 324   bottom:10px;
 325         padding-left: 50px;
 326 }
 327
 328 @media print, screen and (max-width: 960px) {
 329
 330   div.wrapper {
 331     width:auto;
 332     margin:0;
 333   }
 334
 335   header, section, footer {
 336     float:none;
 337     position:static;
 338     width:auto;
 339   }
 340
 341         footer {
 342                 border-top: 1px solid #ccc;
 343                 margin:0 84px 0 50px;
 344                 padding:0;
 345         }
 346
 347   header {
 348     padding-right:320px;
 349   }
 350
 351   section {
 352     padding:20px 84px 20px 50px;
 353     margin:0 0 20px;
 354   }
 355
 356   header a small {
 357     display:inline;
 358   }
 359
 360   header ul {
 361     position:absolute;
 362     right:130px;
 363     top:84px;
 364   }
 365 }
 366
 367 @media print, screen and (max-width: 720px) {
 368   body {
 369     word-wrap:break-word;
 370   }
 371
 372   header {
 373     padding:10px 20px 0;
 374                 margin-right: 0;
 375   }
 376
 377         section {
 378     padding:10px 0 10px 20px;
 379     margin:0 0 30px;
 380   }
 381
 382         footer {
 383                 margin: 0 0 0 30px;
 384         }
 385
 386   header ul, header p.view {
 387     position:static;
 388   }
 389 }
 390
 391 @media print, screen and (max-width: 480px) {
 392
 393   header ul li.download {
 394     display:none;
 395   }
 396
 397         footer {
 398                 margin: 0 0 0 20px;
 399         }
 400
 401         footer a{
 402                 display:block;
 403         }
 404
 405 }
 406
 407 @media print {
 408   body {
 409     padding:0.4in;
 410     font-size:12pt;
 411     color:#444;
 412   }
 413 }