* {
  margin:                 0;
  padding:                0;

  -webkit-font-smoothing: antialiased;
}

a {
  -webkit-transition: color .2s;
}

html {
  background: #444f5f;
  color:      #8797af;

  font:       15px/25px "Helvetica Neue", "Open Sans", "DejaVu Sans", "Arial", sans-serif;
}

body {
  width:  960px;
  margin: 40px auto;
}

@media ( max-width: 1023px ) {
  body {
    width: 748px;
  }
}

body > small {
  display:     block;
  padding-top: 30px;

  color:       #7f8c9f;
}

body > small a {
  float:           right;

  color:           #adbdd5;
  font-weight:     500;
  text-decoration: none;
}

body > small a:hover {
  color: #fff;
}

.small {
  background: #89b92c;
  color:      #86936c;
  margin:     5% auto;
}

.small nav, .small small {
  display: none;
}

.small .content {
  background: #fff;
  width:      360px;
}

.small .options {
  margin:   0;
  overflow: hidden;
}

.small h1 {
  color:       #6b931e;
  font-size:   29px;
  font-weight: 300;
  text-align:  center;
  padding:     10px 0 25px;
}

.small a {
  background:    #e5eed5;
  color:         #7aa031;

  float:         left;
  padding:       6px 18px;
  border-radius: 5px;

  font-size:     13px;
  font-weight:   500;
}

.small a:hover {
  background: #e0ecc8;
  color:      #7aa031;
}

.small a + a {
  float: right;
}

.small .code {
  padding-top: 1em;
}

.small .code textarea {
  width:       320px;
  background:  #ccc;
  margin:      1em 0;
  font-family: monospace;
}

nav {
  overflow:       hidden;
  padding-bottom: 40px;
}

nav ul {
  float: left;
}

nav li, nav img {
  float: left;
}

nav li {
  list-style:   none;
  font-size:    13px;
  font-weight:  500;

  background:   #444f5f;
  color:        #70829b;
  margin-top:   -11px;
  margin-right: 80px;

  padding:      0 10px;
}

nav li:last-child {
  margin-right: 0;
}

nav li.elapsed {
  color: #fff;
}

nav ul {
  height:        1px;
  margin:        10px 0 0 10px;
  border-bottom: 1px solid #576477;
}

@media ( max-width: 1023px ) {
  nav li {
    margin-right: 28px;
  }
}

a {
  font-weight:     500;
  color:           #a0afc6;
  text-decoration: none;
}

a:hover {
  color: #fff;
}

.content {
  background:    #36404e;
  padding:       40px 50px;
  border-radius: 5px;
}

.options {
  margin-top: 2em;
}

article {
}

article h1 {
  font-size:      29px;
  line-height:    35px;
  font-weight:    300;
  color:          #fff;

  padding-bottom: 15px;
}

article ul {
  padding-left: 2em;
}

article ul li {
  margin: 6px 0;
}

article code {
  display:       inline-block;
  border-radius: 4px;
  background:    #3c4757;
  padding:       0 6px;
}

fieldset {
  border: none;
}

form {
  width:      900px;
  margin-top: 2em;
}

form p {
  position:      relative;
  margin-bottom: 15px;
}

form i {
  position:   absolute;
  left:       0;
  top:        18px;
  width:      220px;

  font-size:  11px;
  font-style: normal;
  color:      #65758c;
}

form .more {
  margin-left: 220px;
}

@media (max-width: 1023px) {
  form {
    width: 688px;
  }
}

label {
  font-size:   13px;
  line-height: 18px;
  font-weight: 500;

  display:     block;
  padding-top: 3px;
  float:       left;
  width:       220px;

  cursor:      pointer;
}

input:not([type="checkbox"]), textarea, select {
  padding:       8px 20px;
  border:        none;
  border-radius: 5px;

  font:          13px/25px "Helvetica Neue", "Open Sans", "DejaVu Sans", "Arial", sans-serif;
  color:         #576170;

  width:         400px;
  margin-bottom: 10px;
}

textarea {
  resize:     vertical;
  min-height: 150px;
  max-height: 600px;

  padding:    12px 20px;
}

input:focus, textarea:focus {
  outline: none;
}

select {
  width:       444px;
  padding:     10px 20px;
  background:  #fff;
  border:      2px solid #36404e;
  margin-left: -2px;
}

.error {
  width:         810px;
  padding:       10px 20px;
  margin-bottom: 25px;

  background:    #b43e27;
  color:         #fff;

  border-radius: 5px;
}

form .error p {
  margin: 0;
}

.btn {
  border:        none;
  border-radius: 5px;
  display:       inline-block;

  font:          500 13px/18px "Helvetica Neue", sans-serif;
  padding:       11px 20px;

  background:    #3f75c3;
  color:         #fff;

  cursor:        pointer;
}

.btn:hover {
  background: #4680d3;
}

.btn.quiet {
  color: #ccc;
}

form .btn {
  margin-left: 220px;
}

form .quiet {
  margin-right: 25px;
}
