feedback-mobile.css

html {
    background: url(../img/bg-footer.png);
    font-family: "Droid Serif", Georgia, Arial, sans-serif;
    font-size: 14px;
}

body {
    min-height: 480px;
    background: none;
}

a {
    color: #437bc4;
    text-decoration: none;
}

section {
    position: relative;
    display: none;
}

section:target {
    display: block;
}

#thanks {
    display: block;
}

.wrapper {
    display: block;
    position: relative;
    max-width: 510px;
    margin: 0 auto;
}

nav {
    display: block;
    height: 0;
}

nav a {
    position: absolute;
    overflow: hidden;
    z-index: 2;
    right: 0;
    top: 0;
    width: 49px;
    height: 32px;
    background: url(../img/home.png) no-repeat center center;
    text-indent: -1000em;
}

section > header {
    margin: 0 15px;

    position: relative;
    z-index: 1;
    margin: 0;
    padding: 8px 15px 6px;
    border-bottom: 2px solid #326CA5;
    background: -moz-linear-gradient(#3dabe5, #288bce);
    background: #288BCE;
    color: #fff;
    font-family: "droid sans", helvetica, arial, sans-serif;
    font-size: 16px;
    line-height: 16px;
}

article header {
    position: relative;
}

article header p {
    margin-top: 9px;
    line-height: 18px;
}

article header p strong {
    color: #333;
    font-weight: bold;
}

article header p:first-child {
    margin-top: 0;
    line-height: 18px;
}

article header p.alt {
    display: block;
    margin-top: 10px;
    font-size: 12px;
}

article header p.alt span {
    position: relative;
    padding: 4px 2px;
    background: #e3ebf6;
}

article header p.alt a:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    bottom: -6px;
}

article header.inset {
    min-height: 45px;
}

article header.inset:before {
    /* placeholder */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 48px;
    background: url(../img/type-mobile.png) no-repeat 0 0;
}

article header.inset p {
    margin-left: 55px;
}

article {
    min-height: 275px;
    padding: 17px 15px 45px;
    border-top: 0 solid #fff;
    background: url(../img/bg-top.png) repeat-x center 0,
    url(../img/bg-bottom.png) repeat-x 0 bottom
    #fff;
    color: #666;
    -moz-box-sizing: border-box;
}

article .field {
    position: relative;
    margin: 25px 0;
}

article .choices {
    margin: 25px 0;
    font-size: 18px;
}

article .choices li {
    position: relative;
}

article .choices li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 45px;
    background: rgba(0,0,0,.1);
}

article .choices li span {
    display: table-cell;
    height: 60px;
    vertical-align: middle;
    padding-left: 55px;
}

article .choices li small {
    display: block;
    margin-bottom: 2px;
    color: #999;
    font-family: "droid sans", helvetica, arial, sans-serif;
    font-size: 12px;
}

article .choices li a {
    line-height: 21px;
}

article .choices li a:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

article .submit {
    margin-top: 20px;
}

article label {
    display: block;
    margin-bottom: .25em;
}

article .char-count {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    line-height: 13px;
    color: #838E98;
}

article .warning {
    display: block;
    font-family: "droid sans", helvetica, arial, sans-serif;
    font-size: 12px;
    line-height: 16px;
}

article .warning span {
    padding: 1px 0;
    background: #ffc;
    color: #666;
}

article input[type=url],
article input[type=text],
article textarea {
    width: 100%;
    padding: .5em;
    border: 1px solid #999;
    -moz-border-radius: .25em;
    border-radius: .25em;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-shadow: 0 2px 2px rgba(0,0,0, .125) inset;
    box-shadow: 0 2px 2px rgba(0,0,0, .125) inset;
    font-family: "droid sans", helvetica, arial, sans-serif;
    font-size: 14px;
    color: #333;
}

article input[type=url]:-moz-placeholder,
article input[type=text]:-moz-placeholder,
article textarea:-moz-placeholder {
    color: #999;
}
article input[type=url]:disabled,
article input[type=text]:disabled {
    background: #fff;
    border-color: #ccc;
    color: #999;
    text-decoration: line-through;
}

article textarea {
    line-height: 1.2;
    resize: none;
    height: 5em;
}

article button {
    display:block;
    position: relative;
    width: 100%;
    height: 36px;
    background: -moz-linear-gradient(#83c53c, #519d1b);
    -moz-box-shadow: 0px 3px 0 #438814;
    box-shadow: 0px 3px 0 #438814;
    color: #fff;
    font-family: "droid sans", helvetica, arial, sans-serif;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px -1px 0px #4e921d;
    -moz-border-radius: 4px;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
}

article button:active {
    top: 2px;
    box-shadow: 0px 1px 0 #438814,
    inset 0 1000px 0 rgba(255,255,255,.25);
}

article button:disabled {
    background: -moz-linear-gradient(#d6d6d6, #c3c3c3);
    box-shadow: 0px 3px 0 #bababa;
    text-shadow: 0 -1px 0 #c4c4c4;
}

footer {
    padding: 18px 15px 15px;
    color: #669be1;
    background: url(../img/bg-footer-shadow.png) repeat-x 0 top;
    font-family: "droid sans", helvetica, arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

footer a {
    font-weight: bold;
    color: inherit;
    text-decoration: none;
}

footer p {
    margin-top: 1em;
}

#intro .choices li:before {
    top: 7px;
    width: 46px;
    height: 48px;
    background: url(../img/type-mobile.png) no-repeat 0 0;
}

#intro #top-happy:before { background-position: 0 0; }
#intro #top-sad:before { background-position: 0 -50px; }
#intro #top-idea:before { background-position: 0 -100px; }

#sad header:before {
    background-position: 0 -50px;
}

#idea header:before {
    background-position: 0 -100px;
}
#idea textarea {
    height: 8em;
}

#thanks .choices li:before {
    top: 7px;
    background: url(../img/thanks.png) no-repeat 0 0;
}

#thanks #thanks-feedback:before { background-position: 0 0; }
#thanks #thanks-dashboard:before { background-position: 0 -50px; }
#thanks #thanks-twitter:before { background-position: 0 -100px; }
#thanks #thanks-facebook:before { background-position: 0 -150px; }
#thanks #thanks-planet:before { background-position: 0 -200px; }
#thanks #thanks-download:before { background-position: 0 -250px; }

.errorlist {
    color: red;
}