/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* @group Global */
body {
  background: #212121;
  color: #FFF;
  font: normal 18px/25px "adobe-text-pro", Georgia, serif;
  text-align: center; }

#top {
  background: white url(../img/line-top.png) repeat-x center top;
  color: #212121;
  padding: 1px 0 50px; }

#inner {
  background: transparent url(../img/bg.png) repeat-y center top;
  margin: 10px auto 0;
  max-width: 960px;
  padding: 20px; }

h1 {
  padding: 10px; }

h2 {
  font: normal 38px/42px "adobe-text-pro", Georgia, serif;
  margin: 0 auto 1em; }

h3 {
  font: normal 24px/28px "adobe-text-pro", Georgia, serif;
  margin: 2em 0 1em;
  text-transform: uppercase; }

h4 {
  color: #7B9757;
  font: italic 24px/28px "adobe-text-pro", Georgia, serif;
  margin-bottom: 0.5em; }

h5 {
  font: bold 18px/24px "adobe-text-pro", Georgia, serif;
  margin: 2em 0 1em; }

p, pre {
  margin: 0 auto 2em; }

ul {
  margin-bottom: 2em; }
  ul li {
    list-style: disc outside none;
    margin: 0 0 0 30px; }

a {
  color: #7B9757;
  -moz-transition: color 0.2s linear;
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear; }

a:hover {
  color: #212121;
  text-decoration: none; }

img {
  max-width: 100%; }

code {
  background: rgba(33, 33, 33, 0.1);
  color: #212121;
  font: normal 14px/19px Monaco, monospace;
  padding: 1px 3px; }

pre {
  background: #212121;
  border: 1px solid #000;
  color: #EEE;
  font: normal 14px/19px Monaco, monospace;
  overflow: auto;
  padding: 20px;
  white-space: pre-wrap; }

a.btn {
  background: #7B9757;
  border-radius: 20px;
  color: #FFF;
  display: inline-block;
  font-style: italic;
  padding: 8px 16px;
  text-decoration: none;
  -moz-transition: background-color 0.2s linear;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear; }
  a.btn:hover {
    background: #212121; }

a.software-link {
  background: #212121;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 0 4px rgba(33, 33, 33, 0.2);
  color: #FFF;
  display: block;
  font-size: 12px;
  line-height: 14px;
  padding: 6px 12px;
  position: absolute;
  right: 20px;
  text-decoration: none;
  text-transform: uppercase;
  top: 0; }
  a.software-link:hover {
    color: #7B9757; }

.content {
  margin: 0 auto;
  max-width: 620px;
  word-break: break-word; }
  .content.lefty {
    text-align: left; }
  .content.text ul li {
    margin-bottom: 1.5em; }

.sites {
  font: normal 13px/18px sans-serif;
  margin: 0 auto; }
  .sites li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    float: left;
    height: 300px;
    padding: 0 20px 40px;
    text-align: center;
    width: 280px; }
    .sites li a {
      color: #888;
      display: block;
      font-weight: normal;
      text-decoration: none; }
    .sites li a:hover {
      color: #212121; }
    .sites li a:hover img {
      border-color: #CCC;
      -moz-box-shadow: 0 0 6px #CCC;
      -webkit-box-shadow: 0 0 6px #CCC;
      box-shadow: 0 0 6px #CCC; }
    .sites li img {
      border: 1px solid #DDD;
      display: block;
      margin: 0 auto 10px;
      -moz-transition: all 0.2s linear;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear; }
    .sites li span.title {
      color: #212121;
      font-weight: bold; }

.software li {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #DDD;
  margin-top: 2em;
  padding-top: 2em; }
.software p {
  margin-bottom: 1em; }
.software h3 {
  font-size: 32px;
  line-height: 36px;
  margin: 0;
  text-transform: none; }
  .software h3 a {
    text-decoration: none; }

.software-meta {
  color: rgba(33, 33, 33, 0.5);
  font-style: italic;
  margin-bottom: 0.5em; }

.page-nav li {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  display: inline;
  font-size: 16px;
  line-height: 21px;
  margin: 0 10px;
  text-transform: uppercase; }
.page-nav a {
  padding: 0 5px; }

.screenshots li {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  float: left;
  padding: 1%;
  width: 23%; }
  .screenshots li img {
    display: block; }
  .screenshots li a {
    border: 2px solid #DDD;
    display: block;
    -moz-transition: border-color 0.2s linear;
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear; }
  .screenshots li a:hover {
    border-color: #7B9757; }

.mfp-bottom-bar {
  font: normal 13px/17px sans-serif;
  padding-top: 3px; }

.changelog > li {
  color: #979797;
  list-style: none outside none;
  margin: 0 0 1.5em 0; }
  .changelog > li ul, .changelog > li strong {
    color: #212121; }

#footer {
  background: #212121 url(../img/line-bottom.png) repeat-x center top;
  padding: 20px 0 30px;
  position: relative; }
  #footer p {
    color: #4D4D4D;
    font: normal 13px/18px sans-serif;
    margin: 40px auto 0;
    text-transform: uppercase; }
    #footer p a {
      color: #4D4D4D;
      text-decoration: none; }

.top {
  background: transparent url(../img/tadpole.png) no-repeat;
  display: block;
  font-size: 1px;
  height: 70px;
  left: 50%;
  margin-left: -15px;
  position: absolute;
  text-indent: -9999px;
  top: -25px;
  width: 30px; }
  .top:hover {
    background-position: -30px 0;
    border-width: 0; }

.group:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0; }

/* @end */
@media screen and (min-width: 1320px) {
  body {
    font-size: 22px;
    line-height: 30px; }

  #inner {
    max-width: 1280px; }

  .page-nav li {
    font-size: 18px; }

  h2 {
    font-size: 42px;
    line-height: 50px;
    max-width: 940px; }

  h3, h4 {
    font-size: 28px;
    line-height: 32px; }

  h5 {
    font-size: 22px;
    line-height: 30px; }

  .content {
    max-width: 780px; }

  code, pre {
    font: normal 16px/21px Monaco, monospace; } }
@media screen and (max-width: 1000px) {
  #inner {
    max-width: 640px; } }
@media screen and (max-width: 680px) {
  body {
    -webkit-text-size-adjust: none; }

  h2 {
    font-size: 28px;
    line-height: 32px; }

  .software h3 {
    font-size: 24px;
    line-height: 28px; }

  .sites li {
    float: none !important;
    height: auto;
    width: auto; } }
@media all and (-webkit-min-device-pixel-ratio: 2) {
  #top {
    background-image: url(../img/line-top-retina.png);
    background-size: 960px 12px; }

  #footer {
    background-image: url(../img/line-bottom-retina.png);
    background-size: 960px 12px; }

  #footer a {
    background-image: url(../img/tadpole_retina.png);
    background-size: 60px 70px; } }