@media only screen and (max-width: 550px) {
  body.spacer {
    padding-top: 0px;
  }
  a,
  input {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  #centered {
    width: 90%!important;
    margin: 0 5%;
    text-align: center;
  }
  #centered #content,
  #centered #logoArea {
    width: 100%;
  }
  #centered #content.basic,
  #centered #logoArea.basic {
    float: none;
    display: inline-block;
    width: 50px;
    background-image: url('../_gfx/sprite_retina.png');
    background-size: 600px 600px;
  }
  #centered #logoArea {
    width: 60px!important;
    height: 42px;
    overflow: hidden;
    text-indent: -9000px;
    background-image: url('../_gfx/sprite.png');
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center;
    margin: 35px 0 25px 0;
    display: inline-block;
    float: none;
    background-image: url('../_gfx/sprite_retina.png');
    background-size: 600px 600px;
  }
  #centered #logoArea img {
    display: none;
  }
  #centered p.footer {
    padding-bottom: 30px;
  }
  #centered #content {
    text-align: left;
  }
  #centered #content p.error {
    width: 72%;
    padding-left: 4%;
    padding-right: 4%;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 1.1em;
  }
  #centered #content.textonly p,
  #centered #content p.explanation {
    float: left;
    width: 78.8%!important;
    padding: 20px 10%!important;
    margin: 0;
    font-size: 1.1em;
  }
  #centered #content.textonly {
    border-bottom-width: 2px;
  }
  #centered #content.textonly p {
    font-size: 1.1em;
    margin: 20px 0;
  }
  #centered #content form {
    width: 80%;
    padding: 10%;
  }
  #centered #content form label input {
    width: 92%;
    padding-left: 4%;
    padding-right: 4%;
    border-color: #c2ccd4 !important;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
    box-shadow: none!important;
    outline: 0!important;
  }
  #centered #content form label input:focus {
    border-color: #546776 !important;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
    box-shadow: none!important;
    outline: 0!important;
  }
  #centered #content form label.address input {
    width: 66%;
    padding-left: 4%;
    padding-right: 30%;
  }
  #centered #content form label.address input::-webkit-input-placeholder {
    opacity: 1;
  }
  #centered #content form label.address input:-moz-placeholder {
    opacity: 1;
  }
  #centered #content form label.address .prefix {
    display: none;
  }
  #centered #content form #buttonbox {
    width: 100%;
  }
  #centered #content form #actions {
    margin: 0;
  }
  #centered #content form button,
  #centered #content form button.fullwidth {
    float: left;
    width: 100.5%;
    padding: 14px 0;
    font-size: 1.1em;
    margin: 10px 0 0 0;
    border: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
  }
  #centered #content form button:active,
  #centered #content form button.fullwidth:active {
    border-top: 2px solid #6d851e;
    padding: 13px 0 13px 0;
  }
  #infoBox #vertical {
    padding-bottom: 40px;
  }
  #infoBox #vertical #centered.move #logoArea {
    width: 60px;
    display: inline-block;
    float: none;
  }
  #infoBox #vertical #centered.move #content {
    width: 80%;
    margin: 0;
    padding: 10%;
  }
  #infoBox #vertical #centered.move #content h1 {
    width: 100%;
    margin: 0 0 30px 0;
  }
  #infoBox #vertical #centered.move #content form#choices,
  #infoBox #vertical #centered.move #content form#contact {
    width: 100%;
  }
  #infoBox #vertical #centered.move #content form#choices label.full,
  #infoBox #vertical #centered.move #content form#contact label.full {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  #infoBox #vertical #centered.move #content form#choices label.full input,
  #infoBox #vertical #centered.move #content form#contact label.full input {
    width: 95%;
    padding-left: 2%;
    padding-right: 2%;
  }
  #infoBox #vertical #centered.move #content form#choices #actions,
  #infoBox #vertical #centered.move #content form#contact #actions {
    font-size: 1em;
    width: 100%;
    padding: 0;
    margin-top: 20px;
    border: none;
    background: none;
  }
  #infoBox #vertical #centered.move #content form#choices #actions a,
  #infoBox #vertical #centered.move #content form#contact #actions a {
    display: none;
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages,
  #infoBox #vertical #centered.move #content ul#addImages {
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages li,
  #infoBox #vertical #centered.move #content ul#addImages li {
    float: left;
    margin: 0 0 10px 0;
    padding: 1%;
    width: 48%;
    overflow: hidden;
    text-align: center;
    background: none;
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages li span.locked,
  #infoBox #vertical #centered.move #content ul#addImages li span.locked {
    display: none;
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages li .inner,
  #infoBox #vertical #centered.move #content ul#addImages li .inner {
    float: left;
    border: 1px solid #e0e5e9;
    box-shadow: 0px 0px 0px 3px #f7f7f7;
    -webkit-box-shadow: 0px 0px 0px 3px #f7f7f7;
    -moz-box-shadow: 0px 0px 0px 3px #f7f7f7;
    padding: 1%;
    margin: 0;
    width: 96%;
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages li .inner .selector,
  #infoBox #vertical #centered.move #content ul#addImages li .inner .selector {
    background: rgba(0, 170, 221, 0.2);
    width: 100%;
    height: 100%;
    top: -3px;
    left: -3px;
    border: 3px solid #00aadd;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.8);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.8);
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages li .inner .thumb,
  #infoBox #vertical #centered.move #content ul#addImages li .inner .thumb,
  #infoBox #vertical #centered.move #content form#choices ul#addImages li .inner .blank,
  #infoBox #vertical #centered.move #content ul#addImages li .inner .blank {
    width: 100%;
    margin: 0;
    height: auto;
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages li .inner .thumb img,
  #infoBox #vertical #centered.move #content ul#addImages li .inner .thumb img,
  #infoBox #vertical #centered.move #content form#choices ul#addImages li .inner .blank img,
  #infoBox #vertical #centered.move #content ul#addImages li .inner .blank img {
    width: 100%;
    height: auto;
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages li .inner .add em,
  #infoBox #vertical #centered.move #content ul#addImages li .inner .add em {
    height: 80%;
    padding-top: 20%;
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages li .inner .blank,
  #infoBox #vertical #centered.move #content ul#addImages li .inner .blank {
    background-image: url('../_gfx/sprite_retina.png');
    background-size: 600px 600px;
    background-position: -250px 54px;
    display: none;
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages li .inner .title,
  #infoBox #vertical #centered.move #content ul#addImages li .inner .title {
    padding: 0 0 6px 0;
    margin: 10px 0 5px;
    display: inline-block;
    float: none;
    width: 100%;
    font-size: 1.1em;
  }
  #infoBox #vertical #centered.move #content form#contact p,
  #infoBox #vertical #centered.move #content form#contact label,
  #infoBox #vertical #centered.move #content form#contact textarea {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  #infoBox #vertical #centered.move #content form#contact p.intro {
    margin-left: -1px;
    padding: 5%;
    width: 90%;
  }
  #infoBox #vertical #centered.move #content form#contact textarea {
    width: 90%;
    margin-left: -1px;
    padding: 5%;
  }
  #infoBox #vertical #centered.move #content form#contact #actions {
    margin-top: 0;
  }
  #infoBox #vertical #centered.move #content form#choices ul#addImages {
    margin-left: -1px;
  }
  #infoBox #vertical #centered #content {
    width: 100%;
    padding: 0;
  }
  #infoBox #vertical #centered #content p {
    padding-left: 10%;
    padding-right: 10%;
    width: 80%;
    font-size: 1.1em;
  }
  #infoBox #vertical #centered #content p.success,
  #infoBox #vertical #centered #content p.error {
    width: 70%;
    padding-left: 5%;
    padding-right: 5%;
  }
  #infoBox #vertical #centered #content #actions {
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    font-size: 1.1em;
  }
  html.dark {
    background: #2f353e !important;
  }
  html.dark #logoArea {
    display: none!important;
  }
  html.dark #infoBox #vertical {
    padding-bottom: 0;
  }
  html.dark #centered #content {
    border: none;
  }
  body.reply #infoBox #vertical #centered #logoArea {
    width: 60px;
    display: inline-block;
    float: none;
    height: 10px;
  }
  body.reply #infoBox #vertical #centered #clipping {
    float: left;
    width: auto;
    margin: 0;
  }
  body.reply #infoBox #vertical #centered #thread {
    width: 99%;
    margin-bottom: 10px;
  }
  body.reply #infoBox #vertical #centered #thread p {
    padding-left: 10%;
    padding-right: 10%;
    margin: 0;
    width: 70%;
    background: transparent;
  }
  body.reply #infoBox #vertical #centered #thread a.delete {
    display: block;
  }
  body.reply #infoBox #vertical #centered #clipping {
    float: none;
    display: inline-block;
    *display: inline;
  }
  body.reply #infoBox #vertical #centered #navigation {
    float: left;
    text-align: left;
    width: auto;
    margin-left: 5px;
    display: none;
  }
  body.reply #infoBox #vertical #centered #navigation li {
    float: left;
    clear: both;
    width: auto;
    text-align: left;
  }
  body.reply #infoBox #vertical #centered #reply {
    margin: 30px 0 0 0;
    width: 99%;
  }
  body.reply #infoBox #vertical #centered #reply p#error {
    width: 79%;
    padding-left: 10%;
    padding-right: 10%;
  }
  body.reply #infoBox #vertical #centered #reply textarea#yourReply {
    padding-left: 10%;
    padding-right: 10%;
    margin: 0;
    width: 79%;
    background: #ffffff;
  }
  body.reply #infoBox #vertical #centered #reply label.tick {
    display: none;
  }
  body.reply #infoBox #vertical #centered #reply #extraDetails #extraInput label {
    width: 100%;
  }
  body.reply #infoBox #vertical #centered #reply #extraDetails #extraInput label input {
    padding-left: 28%;
    padding-right: 10%;
    margin: 0;
    width: 61%;
  }
  body.reply #infoBox #vertical #centered #reply #extraDetails #extraInput label span {
    left: 10%;
    text-align: left;
    width: 15%;
  }
  body.reply #infoBox #vertical #centered #reply button#sendReply {
    float: left;
    width: 99%;
  }
}
@media screen and (max-width: 440px) {
  #infoBox #vertical #centered.move #content ul#addImages li,
  #infoBox #vertical #centered.move #content form#choices ul#addImages li {
    width: 100%;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
  #centered #logoArea.basic a,
  #centered #logoArea.basic .logo {
    background-image: url('../_gfx/sprite_retina.png') !important;
    background-size: 600px 600px!important;
    height: 50px!important;
  }
  body.upgrade #centered #content ul#plans li.plan #trial {
    background-image: url('../_gfx/sprite_retina.png') !important;
    background-size: 600px 600px!important;
  }
  body.reply #content #reply.toplevel textarea,
  body.reply #content #thread ul li:first-child p {
    background-image: url('../_gfx/reply_retina.png') !important;
    background-size: 13px 13px!important;
  }
  body.reply #content #reply.threaded textarea:focus {
    background-image: none!important;
  }
  #centered #content form#choices label.inner.selected .selector,
  #centered #content form#contact label.inner.selected .selector {
    background-image: url('../_gfx/checked_retina.png');
    background-size: 144px 111px;
  }
}
