/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

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

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

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

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
@font-face{ /* for IE */
  font-family: "OFL Sorts Mill Goudy";
  font-style: normal;
  font-weight: normal;
  src: url('oflgoudystmtt-webfont.eot');
}

@font-face { /* for non-IE */
  font-family: "OFL Sorts Mill Goudy";
  font-style: normal;
  font-weight: normal;
  src: url(http://:/) format("No-IE-404"), url('oflgoudystmtt-webfont.woff') format('woff'), url('oflgoudystmtt-webfont.ttf') format('truetype'), url('oflgoudystmtt-webfont.svg#webfontHB4987y4') format('svg');
}

h1,
h2,
h3,
nav,
p.info {
  font-family: "OFL Sorts Mill Goudy",
               "Palatino",
               "Georgia",
               serif;
  font-weight: normal;
}

input,
button,
body {
  color: #333;
  font: 100%/1.5 Georgia, serif;
}

a {
  color: #c00;
  text-decoration: none;
}

  a:hover {
    color: #333;
  }

dl {
  overflow: hidden;
}

  dl dt {
    font-style: italic;
  }

  dl dd {
    margin-left: 1em;
  }

p,
dl,
form {
  margin-bottom: 1em;
}

header {
  margin: 1em 0;
  overflow: hidden;
}

  header hgroup {
    margin: 1em 0 2em 0;
  }

  h1 {
    background: #c00;
    margin: 0 auto 1em auto;
    width: 8em;
  }

    h1 a {
      display: block;
      height: 5em;
      line-height: .9;
      padding: 3em 0 0 1em;
    }

      h1 a span {
        display: block;
        font-size: 1.75em;
      }

    h1 a,
    h1 a:hover {
      color: #fff;
    }

    h1 a:hover {
      background: #111;
    }

  h2 {
    text-align: center;
  }

.wrapper {
  max-width: 64em;
  margin: 0 auto;
  padding: 0 1em;
}

  #page {
    position: relative;
  }

  article {
    margin-bottom: 1em;
    position: relative;
  }

    article h3,
    article p.info {
      font-size: 1.5em;
    }

    article h3 {
      margin-bottom: .25em;
    }

      article.site h3 {
        padding-right: 2.5em;
      }

      article h3 a {
        color: #333;
      }

        article h3 a:hover {
          color: #c00;
        }

      article .like {
        position: absolute;
        right: 0;
        top: .9em;
      }

    article .shots {
    }

      article .shots:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
      }

      article .shots img {
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
        float: left;
        margin-bottom: 1em;
        margin-right: 3.125%;
      }

        article .shots .smartphone {
          max-width: 5em;
          width: 7.8125%;
        }

        article .shots .tablet {
          max-width: 12em;
          width: 18.75%;
        }

        article .shots .netbook {
          max-width: 16em;
          width: 25%;
        }

        article .shots .desktop {
          margin-right: 0;
          max-width: 25em;
          width: 39.0625%;
        }

        article .shots a:hover img {
          opacity: 0.8;
        }

  #leaders {
  }

    #leaders article dl dd a {
      color: #333;
    }

      #leaders article dl dd a:hover {
        color: #c00;
      }

.ro {
  color: #c00;
  font-size: 1.5em;
}

.wrapper #submit,
.wrapper #about,
.wrapper #leaders,
.wrapper #error,
.wrapper p#pagination {
  margin-bottom: 2em;
}

p#pagination strong {
  font-weight: normal;
}

p#pagination .orderby {
  display: block;
}

footer {
  background: #111;
  border-top: 1px solid #ccc;
  -moz-box-shadow: 0 4em 3em 4em #111;
  -webkit-box-shadow: 0 4em 3em 4em #111;
  box-shadow: 0 0 2.5em .1em #555;
  color: #ccc;
  padding: 3em 0;
}

  footer .wrapper {
  }

    footer .wrapper p {
    }

    nav {
      margin-bottom: 1.5em;
    }

      nav a {
        background: #c00;
        color: #fff;
        display: block;
        font-size: 1.25em;
        margin: .25em 0;
        padding: .25em 5%;
        text-align: center;
        text-transform: lowercase;
        -moz-transition: background 250ms ease;
        -o-transition: background 250ms ease;
        -webkit-transition: background 250ms ease;
        transition: background 250ms ease;
        width: 90%;
      }
      
        nav a:hover {
          background: #1c1c1c;
          color: #ccc;
        }

      nav .secondary {
        margin-top: 1.5em;
      }

        nav .secondary a {
          font-size: 1em;
        }

    footer .meta p {
      border-top: 1px dashed #333;
      padding-top: .5em;
      margin-bottom: .5em;
    }

      footer .meta p:first-child {
        border-top: none;
        padding-top: 0;
      }

      footer .meta a:hover {
        color: #ccc;
      }

    a.sign-in-with-twitter {
      background: transparent url('sign-in-with-twitter-sprite.png') no-repeat 0 0;
      display: block;
      height: 24px;
      margin: .35em 0 .75em 0;
      overflow: hidden;
      text-indent: -999em;
      width: 151px;
    }

      a.sign-in-with-twitter:hover {
        background-position: 0 -24px;
      }

        a.sign-in-with-twitter:active {
          position: relative;
          top: .1em;
        }

    #feed {
      min-height: 3.5em;
    }

label,
input,
button {
  display: block;
}

input {
  border: 1px solid #a0a0a0;
  -moz-border-radius: .25em;
  -webkit-border-radius: .25em;
  border-radius: .25em;
  margin-bottom: .5em;
  padding: .3em .4em;
  width: 90%;
}

    input:focus {
      -moz-box-shadow: 0 0 .25em rgba(76, 146, 232, .5);
      -webkit-box-shadow: 0 0 .25em rgba(76, 146, 232, .5);
      box-shadow: 0 0 .25em rgba(76, 146, 232, .5);
      border-color: rgba(76, 146, 232, .75);
      outline: none;
    }

button {
  background: #ddd;
  background-image: -moz-linear-gradient(50% 100% 90deg, #ddd, #fafafa);;
  background-image: -webkit-gradient(linear, 0% 75%, 0% 20%, from(#ddd), to(#fafafa));
  border: 1px solid rgba(0, 0, 0, .25);
  -moz-border-radius: .75em;
  -webkit-border-radius: .75em;
  border-radius: .75em;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  color: #666;
  cursor: pointer;
  font-size: 1em;
  margin-top: 1em;
  padding: .25em 1em;
  text-decoration: none;
  text-shadow: 0 1px 1px #fff;
}

  button:hover {
    background: #d0d0d0;
    background-image: -moz-linear-gradient(50% 100% 90deg, #d0d0d0, #f0f0f0);;
    background-image: -webkit-gradient(linear, 0% 75%, 0% 20%, from(#d0d0d0), to(#f0f0f0));
  }

.error {
  color: #c00;
  margin-bottom: .25em;
}

.boolean {
  overflow: hidden;
}

  .boolean label,
  .boolean input {
    float: left;
    width: auto;
  }

  .boolean label {
    margin-right: .5em;
  }

  .boolean input {
    margin: .4em 0 0 0;
  }

ul.messages {
  margin: 0 0 1.5em 0;
}

  ul.messages li {
    background: #333;
    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
    border-radius: .4em;
    color: #fff;
    list-style: none;
    padding: .5em .8em;
    position: relative;
  }

    ul.messages li:after {
      border-color: #333 transparent;
      border-style: solid;
      border-width: 1em 1em 0;
      bottom: -1em;
      content: "";
      display: block; /* reduce the damage in FF3.0 */
      height: 0;
      left: 2.8em;
      position: absolute;
      width: 0;
    }

    ul.messages li.error {
      background: #c00;
    }

    ul.messages li.error:after {
      border-color: #c00 transparent;
    }

/* Based on PURE CSS GUI ICONS
 * by Nicolas Gallagher
 * - http://nicolasgallagher.com/pure-css-gui-icons/
 *
 * Dual licensed under MIT and GNU GPLv2 (c) Nicolas Gallagher */

.icon {
  position: relative;
}

  .icon a {
    color: #333;
    display: block;
  }

  .icon a:hover {
  }

    .icon:before,
    .icon:after,
    .icon a:before,
    .icon a:after {
      content: "";
      left: 0;
      position: absolute;
      top: 2em;
    }

    .icon a:before,
    .icon a:after {
      margin: -.5em 0 0;
    }

    .icon a:hover:before {
      background: #333;
    }

#feed {
}

  #feed a {
    color: #ccc;
    padding-left: 4em;
  }

    #feed a:before {
      background: #c00;
      -moz-border-radius: .9375em;
      -webkit-border-radius: .9375em;
      border-radius: .9375em;
      height: .9375em;
      left: 0;
      margin-top: 0.425em;
      width: .9375em;
    }

      #feed a:hover:before {
        background: #ccc;
      }

    #feed a:after {
      border-color: #c00;
      border-style: double;
      -moz-border-radius: 0 7.03125em 0 0;
      -webkit-border-top-right-radius: 7.03125em;
      border-radius: 0 7.03125em 0 0;
      border-width: 1.40625em 1.40625em 0 0;
      height: 1.5em;
      left: 0;
      top: 1em;
      width: 1.5em;
    }

      #feed a:hover:after {
        border-color: #ccc;
      }

.like {
  font-size: .75em;
}

  .like:before,
  .like:after,
  .like a:before,
  .like a:after {
    top: .75em;
  }

  .like a {
    color: #666;
    cursor: pointer;
    padding-left: 3em;
  }

    .like a:hover {
      color: #333;
    }

    .like a:before,
    .like a:after {
      background: #ddd;
      -moz-border-radius: .75em 0 0 .75em;
      -webkit-border-bottom-left-radius: .75em;
      -webkit-border-top-left-radius: .75em;
      border-radius: .75em 0 0 .75em;
      height: 1.125em;
      margin-top: -.75em;
      transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      width: 1.75em;
    }

    .like a:after {
      left: .5em;
      transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
    }

      .like a:hover:before,
      .like a:hover:after,
      .like a.hasvoted:before,
      .like a.hasvoted:after {
        background: #c00;
      }

    .like a.hasvoted {
      cursor: default;
    }

h3 .slug {
  font-size: .5em;
}

.publish {
  overflow: hidden;
}

.publish input,
.publish button {
  float: left;
  margin: 0;
}

.publish input {
  margin-right: 1em;
}

  .publish input.slug {
    width: 5em;
  }

  .publish input.title {
    width: 15em;
  }

  .publish input.creator {
    width: 10em;
  }

.publish label {
  display: none;
}

.suggester {
  margin-top: -1.5em;
}

#packs {
  margin-bottom: 2em;
}

body .one .bsa_it_ad {
  background: transparent;
  border: none;
  font-family: inherit;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

  body .one .bsa_it_ad a:first-child {
    float: left;
    margin-right: .5em;
  }

  body .one .bsa_it_ad .bsa_it_i {
    display: block;
    padding: 0;
    float: none;
    margin: 0 0 .5em;
  }

    body .one .bsa_it_ad .bsa_it_i img {
      max-width: 100%;
      height: auto;
    }

  body .one .bsa_it_ad .bsa_it_t {
    padding: 0;
  }

  body .one .bsa_it_p {
    display: none;
  }

body #bsap_aplink {
  display: block;
  font-size: .75em;
  margin: 0;
}

@media screen and (min-width: 30em) {

  p#pagination {
    overflow: hidden;
  }

    p#pagination .orderby {
      float: right;
    }


}

@media screen and (min-width: 33em) {

  input {
    width: 30em;
  }

}

@media screen and (min-width: 40em) {

  header {
    margin-top: 0;
  }

  header hgroup {
    font-size: 1.25em;
    margin-top: 0;
  }

    h1 {
      margin-left: 0;
    }

    h2 {
      text-align: left;
    }

  #packs {
    position: absolute;
    top: 1em;
    right: 0;
    width: 18em;
  }

    body .one .bsa_it_ad a:first-child {
      float: right;
      margin: 0 0 0 .5em;
    }

    body .one .bsa_it_ad,
    body #bsap_aplink {
      text-align: right;
    }

  footer .wrapper {
    overflow: auto;
  }

    nav,
    footer .meta {
      float: left;
    }

    nav {
      margin-right: 3.125%;
      width: 29.6875%;
    }

      nav a {
        background: #1c1c1c;
        color: #ccc;
        font-size: 1.5em;
        margin: 0 0 .5em 0;
        text-align: left;
        text-transform: none;
      }

        nav a:hover {
          background: #c00;
          color: #fff;
        }

        nav .secondary a {
          font-size: 1.25em;
        }

    footer .meta {
      width: 67.1875%;
    }
}

@media screen and (min-width: 48em) {


  h2 {
    position: absolute;
    left: 9em;
    top: 3em;
    width: 13.5em;
  }

  .wrapper {
    padding: 0 1.5em;
  }

  article h3,
  article p.info {
    font-size: 2em;
  }

  article .like {
    font-size: 1em;
  }

  ul.messages li {
    font-size: 1.25em;
  }

  #leaders {
    overflow: hidden;
  }

    #leaders article {
      float: left;
      width: 47.5%;
    }
    
    #creators {
      margin-right: 2.5%;
    }

    #suggesters {
      margin-left: 2.5%;
    }

  #about p,
  #about dl {
    font-size: 1.25em;
  }

}

@media screen and (min-width: 56em) {

  footer .meta {
    position: relative;
  }

    footer .meta p {
      margin-left: 41.8605%;
      width: 58.1395%;
    }

      footer .meta p:nth-child(2) {
        border-top: none;
        padding-top: 0;
      }
}