/* Reset and base styles */
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;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body {
    background: #73665F;
    font: 13px/1.231 sans-serif;
    color: #444;
}

/* Container and layout */
div#container {
    background: #fff;
    width: 1000px;
    margin: 0 auto;
}

div#main {
    overflow: hidden;
    padding: 20px 0;
}

header {
    width: 1000px;
    display: block;
    background: url('../images/borderBottom.jpg') bottom left no-repeat;
    padding: 0 0 20px 0;
    margin: 15px 0;
}

header img {
    display: block;
    margin: 0 auto;
}

/* Form elements */
textarea#toZombie {
    display: block;
    width: 400px;
    height: 100px;
    margin: 0 auto;
}

div#previewForm {
    width: 900px;
    display: block;
    margin: 0 auto;
    background: url('../images/typeHere.png') 155px 35px no-repeat;
    text-align: center;
}

div#previewDisplay {
    display: block;
    width: 900px;
    height: auto;
    min-height: 400px;
    margin: 15px auto;
    border: 1px #000 solid;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
}

div#fontOutput {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* Share buttons */
div#shareButtons {
    display: block;
    float: left;
    width: 1000px;
}

div#shareButtons ul {
    list-style: none;
}

div#shareButtons ul li {
    float: left;
    margin: 0 5px;
    height: 300px;
}

/* Save/Zombify button */
input#saveZombie {
    background: url('../images/saveButtonSprite.png') no-repeat;
    height: 27px;
    width: 127px;
    border: none;
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    margin: 15px auto 0;
    float: none;
}

input#saveZombie:hover {
    background-position: 0 -27px;  /* Show "Zombify" text on hover */
}

/* Footer */
footer {
    text-align: center;
    padding: 15px 0;
}

footer a, 
footer a:visited, 
footer a:active, 
footer a:link {
    color: #000;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* About section */
div#aboutSection {
    width: 555px;
    display: block;
    margin: 0 auto;
}

div#aboutSection h2 {
    font-size: 24px;
    text-transform: uppercase;
}

div#aboutSection p {
    margin: 0;
}

div#aboutSection img {
    margin: 18px 0 0 0;
}

/* Zombie font display */
ul.word {
    list-style: none;
    margin: 0 75px 20px 0;
    float: left;
    display: inline-block;
}

ul.word li {
    text-indent: -9000px;
    float: left;
    height: 150px;
    background-image: url('../images/letterSprites1.png');
}

/* Letter sprite positions */
li.letter-a { width: 64px; background-position: -34px 0; }
li.letter-b { width: 94px; background-position: -128px 0; }
li.letter-c { width: 116px; background-position: -242px 0; }
li.letter-d { width: 77px; background-position: -383px 0; }
li.letter-e { width: 78px; background-position: -487px 0; }
li.letter-f { width: 86px; background-position: -582px 0; }
li.letter-g { width: 76px; background-position: -26px -166px; }
li.letter-h { width: 92px; background-position: -151px -166px; }
li.letter-i { width: 30px; background-position: -289px -166px; }
li.letter-j { width: 87px; background-position: -366px -166px; }
li.letter-k { width: 80px; background-position: -485px -166px; }
li.letter-l { width: 91px; background-position: -583px -166px; }
li.letter-m { width: 143px; background-position: 0 -319px; }
li.letter-n { width: 110px; background-position: -157px -323px; }
li.letter-o { width: 94px; background-position: -287px -318px; }
li.letter-p { width: 61px; background-position: -394px -318px; }
li.letter-q { width: 105px; background-position: -482px -318px; }
li.letter-r { width: 85px; background-position: -594px -318px; }
li.letter-s { width: 70px; background-position: -7px -485px; }
li.letter-t { width: 110px; background-position: -93px -485px; }
li.letter-u { width: 111px; background-position: -210px -484px; }
li.letter-v { width: 77px; background-position: -333px -484px; }
li.letter-w { width: 139px; background-position: -418px -484px; }
li.letter-x { width: 111px; background-position: -565px -484px; }
li.letter-y { width: 87px; background-position: -3px -654px; }
li.letter-z { width: 133px; background-position: -99px -652px; }
li.letter-period { width: 26px; background-position: -324px -654px; }
li.letter-question { width: 42px; background-position: -380px -654px; }
li.letter-exclaim { width: 23px; background-position: -264px -654px; }

/* Utility classes */
.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

/* Error display */
div#errors {
    width: 400px;
    margin: 10px auto;
    font-size: 110%;
    font-weight: 700;
    color: #73665F;
}

/* Link styles */
a, a:active, a:visited {
    color: #607890;
}

a:hover {
    color: #036;
}