/* CSS Document */

#viewport
{
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    position: fixed; 
    display: table;
}

#mainContainer
{
    display: table-cell; 
    vertical-align: middle;
}

#main
{
    display: block;
    margin: 0 auto;
    width: 600px;
    margin-bottom: 80px;
}

#logo
{
    background: transparent url('images/logo.jpg') no-repeat top left;
    width: 295px;
    height: 57px;
    padding-bottom: 15px;
}

#buttons
{
    width: 600px;
}

#journal
{
    float: left;
    background: transparent url('images/btn_journal_hover.jpg') no-repeat top left;
    width: 76px;
    height: 28px;
    margin: 0 27px 0 0;
}

#journal a:link, #journal a:visited
{
    display: block;
    background: transparent url('images/btn_journal.jpg') no-repeat top left;
    width: 76px;
    height: 28px;
}

#journal a:hover
{
    display: block;
    background: transparent url('images/btn_journal_hover.jpg') no-repeat top left;
    width: 76px;
    height: 28px;
}

#pictures
{
    float: left;
    background: transparent url('images/btn_pictures_hover.jpg') no-repeat top left;
    width: 79px;
    height: 28px;
    margin: 0 27px 0 27px;
}

#pictures a:link, #pictures a:visited
{
    display: block;
    background: transparent url('images/btn_pictures.jpg') no-repeat top left;
    width: 79px;
    height: 28px;
}

#pictures a:hover
{
    display: block;
    background: transparent url('images/btn_pictures_hover.jpg') no-repeat top left;
    width: 79px;
    height: 28px;
}

#portfolio
{
    float: left;
    background: transparent url('images/btn_portfolio_hover.jpg') no-repeat top left;
    width: 87px;
    height: 28px;
    margin: 0 27px 0 27px;
}

#portfolio a:link, #portfolio a:visited
{
    display: block;
    background: transparent url('images/btn_portfolio.jpg') no-repeat top left;
    width: 87px;
    height: 28px;
}

#portfolio a:hover
{
    display: block;
    background: transparent url('images/btn_portfolio_hover.jpg') no-repeat top left;
    width: 87px;
    height: 28px;
}

#links
{
    float: left;
    background: transparent url('images/btn_links_hover.jpg') no-repeat top left;
    width: 47px;
    height: 28px;
    margin: 0 27px 0 27px;
}

#links a:link, #links a:visited
{
    display: block;
    background: transparent url('images/btn_links.jpg') no-repeat top left;
    width: 47px;
    height: 28px;
}

#links a:hover
{
    display: block;
    background: transparent url('images/btn_links_hover.jpg') no-repeat top left;
    width: 47px;
    height: 28px;
}

#contact
{
    display: inline;
    float: left;
    background: transparent url('images/btn_contact_hover.jpg') no-repeat top left;
    width: 72px;
    height: 28px;
    margin: 0 0 0 27px;
}

#contact a:link, #contact a:visited
{
    display: block;
    background: transparent url('images/btn_contact.jpg') no-repeat top left;
    width: 72px;
    height: 28px;
}

#contact a:hover
{
    display: block;
    background: transparent url('images/btn_contact_hover.jpg') no-repeat top left;
    width: 72px;
    height: 28px;
}