@import "defaults.css";

* {
  font-family: "museo-sans",sans-serif;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  text-decoration: underline;
}

h3 a,
h3 a:hover,
h3 a:visited {
  color: black;
}


@media (max-width: 1024px) {
  .content {
    margin: 2em;
  }
}

@media (min-width: 1024px) {
  .content {
    margin: 2em auto;
    width: 775px;
  }
}

.logo {
  position: relative;
  margin: 0 0 2em 0;
  text-align: center;
  background-color: black;
}

.logoText {
  color: white;
  font-size: 10em;
  font-family: "voluta-script-pro",sans-serif;
}

.logo .latestVersion {
  position: absolute;
  bottom: 0.2em;
  right: 0.2em;
  color: grey;
  font-size: smaller;
  font-style: italic;
}

code {
  padding: .25em .5em;
}
button.get-started {
  text-align: center;
  font-size: 1.25em;
  padding: .75em 1.5em;
  padding-top: .8em;
  margin: 1.5em auto;
  display: block;
  border: 0;
  border-radius: 3px;
  color: white;
  background: #0088cc;
  /* Old browsers */

  background: -moz-linear-gradient(top, #0088cc 0%, #0055cc 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #0088cc 0%, #0055cc 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #0088cc 0%, #0055cc 100%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(top, #0088cc 0%, #0055cc 100%);
  /* IE10+ */

  background: linear-gradient(to bottom, #0088cc 0%, #0055cc 100%);
  /* W3C */

  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
  /* IE6-9 */

}
.headline {
  font-size: 1.2em;
  text-align: center;
}
.install {
  background-color: #dddddd;
  width: 50%;
  text-align: center;
  margin: 1em auto;
  padding: 1em;
  border-radius: 10px;
}

@media (max-width: 1024px) {
  .install {
    width: 90%;
  }
}

@media (max-width: 320px) {
  .install {
    width: 100%;
  }
}

.install pre {
  color: blue;
}

span.command {
  color: blue;
}

code {
  font-family: "inconsolata",monospace,serif;
}
.install h4,
.install pre,
.install code {
  margin: 0;
}
.install h4 {
  margin-bottom: .5em;
}

div.feature {
  text-align: left;
  margin: 2em 0;
}

div.feature:after,
div.pair:after {
  content: "";
  display: table;
  clear: both;
}

.feature .explain {
  padding: .16em .5em;
  text-align: right;
  font-size: smaller;
  color: grey;
}

.feature pre {
  font-size: smaller;
  background-color: #dddddd;
  width: 100%;
  border-radius: 5px;
}

.features {
  margin: 1em 0;
  text-align: center;
}
.features .explain,
.features .example {
  margin-top: 0.5em;
  width: 49%;
}
.features .explain {
  float: left;
}
.features .example {
  float: right;
}

@media (max-width: 768px) {
  .features .explain {
    text-align: left;
  }

  .features .explain,
  .features .example {
    float: none;
    width: 100%;
  }
}

.features pre {
  margin: 0;
  margin-bottom: 1em;
}

.summary.sub {
  margin-top: 1em;
}

.summary.more {
  font-size: smaller;
  text-align: right;
}