* { margin: 0; padding: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing:    border-box; 
    -o-box-sizing:    border-box;
    box-sizing:         border-box; 
    text-rendering: optimizeLegibility;
}

html { font: 62.5%/1.5 Georgia, sans-serif; color: #444; background: #fff; padding: 0 1rem; }

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

#sizer  { max-width: 48em; max-width: 48rem; margin: 4em auto; margin: 4rem auto; text-align: center; }

#content { background: #eee; border: 3px double #ccc; padding: 2em; padding: 2rem; margin: 2em 0 1em; margin: 2rem 0 1rem; overflow: auto; }

#content p  { font-size: 1.6em; font-size: 1.6rem; }

form    { float: left; width: 100%; }

input   { -webkit-appearance: none; font-family: Georgia, sans-serif; outline: none; }


form p      { display: block; padding-bottom: .5em; padding-bottom: .5rem; text-align: left; }
.input-text { width: 100%; min-height: 2.9rem; font-style: italic; border: 1px solid #ddd; border-color: #777 #aaa #ccc; font-size: 1.6em; font-size: 1.6rem; padding: .4em; padding: .4rem; margin: 0 0 1em; margin: 0 0 1rem; }
.button     { width: 100%; min-height: 2.2em; min-height: 2.9rem; border: 0; font-size: 1.1em; font-size: 1.1rem; padding: .363em; padding: .4rem; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 -1px 0 solid #000; color: #fff; background: #a00; cursor: pointer; overflow: visible; }

.header { font-size: 2.4em; font-size: 2.4rem; text-transform: uppercase; letter-spacing: 1px; padding-top: 1em; padding-top: 2rem; border-top: 1px dotted #ccc; }
.header em { font-style: italic; text-transform: none; }
.header em:after  { content: '\200A'; }
.footer { text-transform: uppercase; letter-spacing: 1px; padding-top: 1em; padding-top: 1rem; }

@media only screen and (min-width: 500px) {
    input       { float: left; }
    .footer br  { display: none; }
    .input-text { width: 75%; margin-bottom: 0; border-right: 0; }
    .button     { width: 25%; }
}