/*
 * Main view setup
 */
body
{
    font-family: Arial, sans-serif; 
    font-size: 7pt; 
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: #999;
    background: url("images/backdrop.png") repeat-x black;
}

a:link, a:visited
{
    text-decoration: none;
    color: white;
    background: inherit;
}

a:active
{
    color: #999;
    background: inherit;
}

a:hover
{
    color: #999; 
    background: inherit;
}

a img
{
    border: none;
}

#main
{
    color: #999;
    background: #282828;
    padding: 0 20px 20px 20px; 
    width: 760px;
    height: 580px;

    /* Center view (horizontally and vertically) */
    position: absolute;
    top: 50%;
    margin-top: -300px;
    left: 50%;
    margin-left: -400px;
}

#logo
{
    margin-top: 20px;
    margin-bottom: 40px;
    float: left; 
    border: none;
}


/*
 * Top right menu
 */
#menu
{
    font-size: 7pt;
    letter-spacing: 0.2em;
    padding-top: 20px;
    float: right;
}

#menu a
{
    font-weight: bold;
    color: #999;
    background: inherit;
    padding: 20px 4px 5px 4px;
    width: 80px;
}

#menu a:hover
{
    color: white;
    background: #333;
}

#menu a:link,
#menu a:visited
{
    text-decoration: none;
}

#menu .hi
{
    font-weight: bold;
    letter-spacing: 0.2em;
    color: white;
    background: #f39;
    padding: 20px 4px 5px 4px;
    width: 80px;
}


/*
 * Main content: Portfolio and normal view
 */
#content
{
    clear: both;
}

#portfolio
{
    width: 200px;
    margin-right: 10px;
    clear: both; 
    float: left;
}

#portfolio h1
{
    font-weight: normal;
    line-height: 9pt;
    font-size: 9pt;
    color: #6cf;
    background: inherit;
    margin-top: 9px; 
    margin-bottom: 0px;
}

#portfolio h1:first-child
{
    margin-top: 0;
}

#text-box
{
    width: 410px;
    clear: both;
    float: left;
    margin-right: 10px; 

    /* Used with #buttons */
    position: relative;
    height: 480px;
}

#cases
{
    width: 200px;
    margin-right: 10px;
    float: left; 

    /* Used with #pf-links */
    position: relative;
    height: 480px;
}

#text-box h1,
#cases h1
{
    font-weight: normal;
    line-height: 9pt;
    font-size: 9pt;
    color: #6cf;
    background: inherit;
    margin-top: 0; 
    margin-bottom: 1px;
}

#text-box p,
#cases p
{
    margin-top: 0;
    margin-bottom: 10px;
}

#images
{
    color: #f39;
    background: inherit;
    width: 340px;
    height: 480px;
    float: left;
}


/*
 * Portfolio links
 */
#pf-links
{
    text-align: right;
    font-size: 9pt;
    position: absolute;      /* within containing block #cases */
    bottom: 0;
    right: 0;
    color: #6cf;
}

/* SCRIPT links */
#pf-links span
{
    margin-left: 0.5em;
}

#pf-links span:hover
{
    cursor: pointer;
}

/* NOSCRIPT links */
#pf-links p
{
    margin: 0;
}

#pf-links a
{
    color: #999;
    background: #282828;
    text-decoration: none;
    margin-left: 0.5em;
}

#buttons
{
    position: absolute;      /* within containing block #text-box */
    bottom: 0;
    left: 0;
}