/**
 *
 * Ben Zupo's Portfolio base CSS
 *
 * HTML 5 reset used at the beginning.
 *
 */

/* HTML5 Reset */

    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, dialog, figure, footer, header,
    hgroup, menu, nav, section, menu,
    time, mark, audio, video {
            margin:0;
            padding:0;
            border:0;
            outline:0;
            font-size:100%;
            vertical-align:baseline;
            background:transparent;
    }
    
    body {
            line-height:1;
    }
    
    article, aside, dialog, figure, footer, header,
    hgroup, nav, section {
            display:block;
    }
    
    nav ul {
            list-style:none;
    }

/* End HTML5 Reset */

body {
    background: #060621;
    color: #777;
    font-family: "Calibri", Helvetica, Arial, sans-serif;
    font-size: 15px;
    text-align: center; /* IE6's version of centering *eyeroll*/
}

h2 {
    color: #1c2753;
    font-size: 24px;
}

p {
    line-height: 1.2;
}

div.page {
    width: 790px;
    height: 565px;
    margin: 40px auto 5px;
    padding-top: 35px;
    text-align: left;
    position: relative;
    background-color: #fff;
}

body.index div.page,
body.about div.page {
    background: #fff url(../images/tagline.png) no-repeat 250px 276px;
}

/* Header */

    header {
        margin: 230px 0 0 36px;
        display: inline;
        float: left;
    }
    
    header h1 a {
        display: block;
        width: 208px;
        height: 91px;
        background: transparent url(../images/logo.gif) no-repeat -4px -4px;
        text-indent: -9999px;
    }
    
        header h1 a:active,
        header h1 a:focus {
            outline: 0;
        }
    
    header h2.subheader {
        width: 95px;
        height: 32px;
        margin-top: 16px;
        margin-left: 55px;
        background: transparent url(../images/logo.gif) no-repeat -59px -110px;
        text-indent: -9999px;
    }
    
    /* Navigation */
    
        nav {
            width: 100px;
            margin-left: 55px;
            margin-top: 15px;
        }
        
        nav li {
            margin-bottom: 10px;
            height: 12px;
            padding: 0;
        }
    
            nav a {
                background: transparent url(../images/nav.gif) no-repeat 50% -1px;
                display: block;
                height: 12px;
                line-height: 0;
                font-size: 0;
                text-indent: -9999px;
            }
            
            nav a:active,
            nav a:focus {
                outline: 0;
            }
            
            nav li.photography a {
                background-position: 50% -24px;
            }
            
            nav li.about a {
                background-position: 50% -47px;
            }
            
                /* Active */
                body.demo nav li.demo a,
                body.demo nav li.demo a:hover {
                    background-position: 50% -60px;
                }
                
                body.photo nav li.photography a,
                body.photo nav li.photography a:hover {
                    background-position: 50% -83px;
                }
                
                body.about nav li.about a,
                body.about nav li.about a:hover {
                    background-position: 50% -106px;
                }
                
                /* Hover */
                nav li.demo a:hover {
                    background-position: 50% -119px;
                }
                
                nav li.photography a:hover {
                    background-position: 50% -142px;
                }
                
                nav li.about a:hover {
                    background-position: 50% -165px;
                }
    
    /* END Navigation */

/* END Header */

section.content {
    margin: 0 20px 0 300px;
}

section header {
    margin-top: 0;
    margin-left: 0;
    display: block;
    float: none;
}

/* Homepage */

    body.index figure.splash {
        position: absolute;
        top: 0;
        right: 0;
    }

/* END Homepage */

/* About */
    
    body.about section.content {
        margin: 0 20px 0 380px;
    }
    
        body.about section.content p {
            margin-left: 240px;
        }
        
    body.about figure {
        float: left;
        margin-right: 10px;
    }
        
/* END About */

/* Photography */

    section.gallery {
        margin-top: 30px;
    }

    section.gallery ul {
        padding: 5px;
        margin: 0;
        overflow: hidden;
        clear: right;
    }

    section.gallery li {
        display: inline-block;
        *display: inline;
        zoom: 1;
        margin-right: 18px;
        border: 1px solid #ccc;
        -moz-box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.6);
        -webkit-box-shadow: 2px 2px 6px rgba(0,0,0, 0.6);
    }

    section.gallery ul.third li,
    section.gallery ul.fourth li {
        margin-right: 9px;
    }

    section.gallery ul li.last {
        margin-right: 0;
    }
    
    section.gallery ul.fourth li,
    section.gallery ul.second li {
        vertical-align: bottom;
    }
    
    section.gallery ul.third li {
        vertical-align: middle;
    }
    
    section.gallery ul.first li {
        vertical-align: top;
    }
    
    section.gallery li a,
    section.gallery li a img {
        display: block;
    }

/* END Photography */

/* Demo */

    .demo div.page {
        height: auto;
        padding-bottom: 15px;
    }

    section object {
        display: block;
        margin: 15px 0;
    }

/* END Demo */