/* -*- coding: utf-8-unix -*- */

@import url(http://fonts.googleapis.com/css?family=Cantarell:400,400italic,700);

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  color: #2e3436;
  font-family: Cantarell,sans-serif;
  font-size: 14px;
  line-height: 1.857em;
  padding: 2em;
  text-align: center;
}

img {
  border: none;
}

#container {
  margin-left: auto;
  margin-right: auto;
  max-width: 99%;
  text-align: left;
  width: 52em;
}

#content {
  text-align: left;
}

#content .sidebar {
  float: left;
}

#content a {
  background-color: inherit;
  border-bottom: 1px dotted #3465a4;
  color: #3465a4;
  text-decoration: none;
}

#content a:hover {
  border-bottom: 1px solid #3465a4;
}

#content a.image {
  border-bottom: none;
}

#content h1 {
  font-size: 1.286em;
  font-weight: bold;
  margin-bottom: 0.3em;
}

#content p {
  margin-bottom: 1em;
  text-align: left;
}

#content p.download {
  background-color: #fcf6ca;
  border: 1px solid #c4a000;
  color: inherit;
  padding: 0.5em 1em;
}

#content pre {
  background-color: #eeeeec;
  border: 1px solid #babdb6;
  color: inherit;
  margin-bottom: 1em;
  padding: 0.5em 1em;
  text-align: left;
}

#header {
  text-align: center;
  margin-bottom: 1em;
}

#header a {
  background: url('graphics/header.png') no-repeat;
  color: white;
  display: block;
  height: 57px;
}

#navigation {
  background-color: #777777;
  line-height: 1.286em;
  margin-bottom: 1.25em;
  min-width: 32em;
  padding: 0 0.5em;
}

#navigation li {
  display: block;
  list-style-type: none;
  white-space: nowrap;
}

#navigation li a {
  background-color: inherit;
  color: white;
  float: left;
  margin: 0.5em;
  overflow: hidden;
  padding-bottom: 0.15em;
  text-decoration: none;
}

#navigation li a:hover {
  border-bottom: 1px dotted white;
}

#navigation li.current a {
  border-bottom: 1px solid white;
}

#navigation li.last a {
  float: right;
}

#navigation ul {
  list-style: none;
  overflow: hidden;
}

#overview .sidebar {
  /* Line up screenshot and text better. */
  margin-top: -7px;
}

#overview .text {
  margin-left: 366px;
}

#screenshots {
  text-align: center;
}

#screenshots img {
  margin-bottom: 1em;
  margin-top: 1em;
}

@viewport, @-ms-viewport {
  width: extend-to-zoom;
  zoom: 1.0;
}

@media only screen and (max-width: 719px) {
  body {
    padding: 1em;
  }
  #navigation li.last a {
    float: left;
  }
  #overview .text {
    clear: both;
    float: left;
    margin-left: 0;
  }
}