/***** General "background" styles, following facebook closely *****/

body {
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
}

a:link, a:visited {
    color: #3B5998;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#global-nav, .section-divider {
    background-color: #627AAD;
    border: 1px solid #1D4088;
    margin-top: 10px;
    margin-bottom: 10px;
}


#global-nav li {
    float: left;
}

#global-nav a {
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    height: 22px;
    padding: 8px 10px 0;
    text-decoration: none;
}


.pager {
    height: 22px;
    line-height: 20px;
}

.section-divider {
    color: white;
    padding: 5px;
    text-align: center;
}

/************************************************************

For the most part, we want 720px wide world, with things taking
up one or two thirds width.

*****************************************************/

#universe {
    width: 720px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -360px;
    padding-bottom: 30px;
}

#contents {
    position: relative;
}

.wide-fb-control {
    /* not-entirely-non-nasty hack to accomodate
       760px facebook controls in our 720px field of play. */

    margin-left: -20px;
}

#masthead {
    width: 700px;
    height: 100px;
    position: relative;

    padding: 10px;
}

#masthead .masthead-image {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -10;

    border: 1px solid black;
}

#masthead .pretitle {
    font-size: 14px;
    line-height: 16px;
}

#masthead .title {
    font-size: 64px;
    line-height: 68px;
}


#global-nav li {
    display: inline;
}

#global-nav ul {
    display: inline;
}

/********************* General LOLness ***********************/

.lol-parent {
    position: relative;
}

.lol-parent .lol-caption, #masthead .pretitle, #masthead .title, .lol-editor .lol-caption-field {
    color: white;
    font-family: "Arial Black",Impact,Arial,Helvetica,sans-serif;
    text-shadow: black 1px 2px 2px;
    z-index: 10;
}

.lol-parent .lol-image {
    z-index: -10;
}

#lol-browsing .lol-parent {
    width: 238px;
    height: 238px;
    float: left;
    overflow: hidden;
    border: 1px solid black;
}

#lol-browsing .lol-parent.lol-wide .lol-image {
    height: 238px;
}

#lol-browsing .lol-parent.lol-tall .lol-image {
    width: 238px;
}

#lol-browsing .lol-caption {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;    
    width: 180px;
    padding: 20px;

    font-size: 21px;
}

#lol-showing {
    width: 480px;
}

#lol-showing .lol-parent {
    width: 480px;
    float: left;
    overflow: hidden;
}


#lol-showing .lol-image, .lol-apology .lol-image {
    width: 480px;
}

#lol-showing .lol-caption, .lol-apology .lol-caption {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 440px;
    padding: 20px;

    font-size: 42px;
    overflow: hidden;
}


.lol-editor {
    position: relative;
}

.lol-editor .lol-edit-image {
    width: 480px;
}

.lol-editor-fields {
    width: 480px;
    float: left;
}

.lol-editor .lol-caption-field {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 460px;
    height: 460px; /* TODO WRONG BROKEN BUG. */
    font-size: 42px;
    padding: 10px;

    background: none;
    border: none;
}


.form-instructions {
    background-color: #627AAD;
    border: 1px solid #1D4088;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;

    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
}


.lol-edit-submit {
    width: 480px;
    height: 100px;
    font-size: 24px;
    font-weight: bold;
}

.lol-control {
    float: right;
    width: 228px;
    padding-left: 10px;

    z-index: 100;
}

.lol-control h2 {
    margin-top: 0px;
}

.lol-control .lol-control-block {
    border: 1px solid #1D4088;
    padding: 14px;
    margin-bottom: 10px;
}

.lol-pick-photo {
    display: block;
    float: left;
    width: 74px;
    height: 74px;
    border: 1px solid black;

    overflow: hidden;
}

.photo-picker-widget {
    margin-top: 30px;
    margin-bottom: 30px;
}

.lol-pick-photo.lol-tall img {
    width: 74px;
}

.lol-pick-photo.lol-wide img {
    height: 74px;
}


.lol-apology {
    width: 480px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -240px;

    font-size: 14px;

    padding-bottom: 30px;
}

.lol-apology .lol-parent {
    margin-top: 30px;
    margin-bottom: 30px;
}

#lol-creators .lol-words-by, #lol-creators .lol-picture-by {
    width: 90px;
    float: left;
    text-align: center;
    font-weight: bold;
}

#lol-creators .who {
    padding-top: 10px;
}