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