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