/* vim: set sts=4 sw=4 et : */
* {
    margin: 0;
    outline: 0;
    border: 0;
}

html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    background: white;
    font-size: 8pt;
    color: #404040;
}

h1 {
    font-family: Georgia, Century Schoolbook, Century Schoolbook L, serif;
    color: #000;
    font-style: normal;
    font-weight: 100;
    font-size: 32px;
}

h2 {
    font-family: Georgia, Century Schoolbook, Century Schoolbook L, serif;
    color: #000;
    font-style: italic;
    font-weight: 100;
    font-size: 16px;
}

p {
    font-family: Lucida Grande, sans-serif;
}

a {
    color: #444;
}

@font-face {
    font-family: "Pareidolic Braille";
    src: url("Pareidolic Braille.ttf");
}

#wrapper {
    background-color: white;
    max-width: 960px;
    /* With this, the wrapper resizes when inner elements overflow */
    overflow: auto;
}

#footer {
    background-color: white;
    color: #888;
    max-width: 960px;
}

#footer_content {
    padding-right: 5%;
    padding-left: 5%;
}

#content {
    padding: 7%;
    padding-top: 6em;
}

#header {
    width: 100%;
    height: 32px;
    text-align: left;
}

#header a:hover {
    text-decoration: underline;
}

#about {
    text-align: right;
    float: left;
    width: 30%;
}

#about > h1 > a {
    color: #dddddd;
    text-decoration: none;
}

#heading {
    text-align: left;
    float: left;
    width: 70%;
}

#heading > h1 {
}

#text {
    width: 100%;
    margin-top: 10em;
    margin-bottom: 3%;
    clear: both;
}

#input {
    width: 47.5%;
    margin-right: 2.5%;
    float: left;
}

#input_area {
    padding: 2%;
    padding-top: 5%;
    padding-bottom: 5%;
    border-bottom-style: solid;
    border-bottom-color: #c0c0c0;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-top-color: #53a9b7;
    border-top-width: 5px;
}

#submit {
    margin-top: 2em;
    float: right;
    font-size: 16px;
}

#submit > input {
    font-size: 16px;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: #444;
    text-decoration: underline;
}

#output {
    width: 47.5%;
    margin-left: 2.5%;
    float: left;
}

#output_area {
    padding: 2%;
    padding-top: 5%;
    padding-bottom: 5%;
    min-height: 300px;

    border-bottom-style: solid;
    border-bottom-color: #c0c0c0;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-top-color: #faca3f;
    border-top-width: 5px;
}

#braille_output {
    font-size: 24px;
    line-height: 30px;
    font-family: "Pareidolic Braille";
}

#footer a {
    color: #888;
}

#footer a:hover {
    color: #444;
}

#madeby {
    width: 100%;
    float: left;
    text-align: right;
}

/****
 * BEGIN: hacks to make textarea auto-resize
 * http://www.alistapart.com/articles/expanding-text-areas-made-elegant/
 ****/
.expandingArea {
    position: relative;
}

.expandingArea > textarea,
.expandingArea > pre {
    width: 100%;
    background: transparent;
    /* BUG: font-size and line-height need to be set to an absolute value in px
     * otherwise the auto-resize does not work properly on IE */
    font-size: 14px;
    line-height: normal;
    font-family: Lucida Grande, sans-serif;
    /* Make the text soft-wrap */
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 300px;
    /* Only allow manual vertical resizing (when JS is unavailable) */
    resize: vertical;
}

.expandingArea.active > textarea {
    /* Hide any scrollbars */
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* Remove WebKit user-resize widget */
    resize: none;
}

.expandingArea > pre {
    display: none;
}

.expandingArea.active > pre {
    display: block;
    /* Hide the text; just using it for sizing */
    visibility: hidden;
}
/****
 * END: hacks to make textarea auto-resize
 ****/

/****
 * BEGIN: Hacks for the footer floating at the bottom
 ****/
#wrapper {
    min-height: 100%;
    height: 100%;
    height: auto !important;
}

#submit, #fake_submit {
    /* Ensures that the submit button stays above the footer at all times
     * and that the output_area stays above the footer. */
    margin-bottom: 6em;
}

#push {
    /* This should be the same as the footer height */
    padding-bottom: 6em;
}

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 6em;
    /* This should be the negative of the footer height */
    margin-top: -6em;
}
/****
 * END: Hacks for the footer floating at the bottom
 ****/