html, body
{
    margin: 0;
    padding: 0;
    background: #000000;
    font-family: verdana, sans-serif;
    font-size: 11px;
}


#logobar,#navbar,#contentInnerContainer,#footer
{
    width: 780px;
    margin: 0 auto 0 auto;
}


#logobar
{
    height: 100px;
    background: url(logobar.png) 0px 76px no-repeat;
}


#logobar h1
{
    display: none;  /* using an image instead */
}


#navbarContainer
{
    background: url(navbar-bg.png) top left repeat-x;
}


#navbar
{
/*    background: url(navbar.png) -8px 0 no-repeat;*/  /* temp positioning */
    height: 33px;
}

#navbar ul
{
    margin: 0;
    padding: 0;
}

#navbar li
{
    display: inline-block;
    margin: 0;
    padding: 0;
}

#navbar span
{
    display: none;
}


#navbar a
{
    display: block;
    width: 77px;
    height: 33px;
}


/* these are the images for the navigation items.  There are three in total:
   i) the standard image, ii) the image shown when the link is for the current
      page, and iii) the image shown when the mouse hovers over the link.
 
   to avoid flicker, we use different sections of the same image, thus the
   web browser doesn't have to load 12 different images. */
#navHome { background: url(navbar.png) -8px -36px no-repeat; }
#navHome.navCrnt { background: url(navbar.png) -8px 0 no-repeat; }
#navHome:hover { background: url(navbar.png) -8px -76px no-repeat; }

#navAbout { background: url(navbar.png) -92px -36px no-repeat; }
#navAbout.navCrnt { background: url(navbar.png) -92px 0 no-repeat; }
#navAbout:hover { background: url(navbar.png) -92px -76px no-repeat; }

#navContact { background: url(navbar.png) -171px -36px no-repeat; }
#navContact.navCrnt { background: url(navbar.png) -171px 0 no-repeat; }
#navContact:hover { background: url(navbar.png) -171px -76px no-repeat; }

#navPortfolio { background: url(navbar.png) -252px -36px no-repeat; }
#navPortfolio.navCrnt { background: url(navbar.png) -252px 0 no-repeat; }
#navPortfolio:hover { background: url(navbar.png) -252px -76px no-repeat; }



#contentInnerContainer
{
    background: url(bulb-large.png) 38px 20px no-repeat;
    min-height: 378px;  /* 313 + y position + 50px padding */
}


#pagePortfolio #contentInnerContainer,#pagePhotoView #contentInnerContainer
{
    background: none;
    min-height: 0;
}


#content
{
    padding: 20px 50px 50px 300px;
    color: #ffffff;
    line-height: 1.7;
}

#pagePortfolio #content
{
    padding: 20px 50px 50px 0;
}

#pagePhotoView #content
{
    padding: 0;
}

#pagePhotoView #content #imgBox
{
    width: 770px;
    overflow: scroll;
}

#pagePhotoView #content #backLink
{
    color: #888888;
}

#pagePhotoView #content p
{
    padding: 15px 0 0 0;
}


#content p
{
    text-align: justify;
    padding: 0;
    margin: 0 0 15px 0;
}

#content h1
{
    font-weight: bold;
    font-size: 1.3em;
    padding: 0;
    margin: 0 0 11px 0;
    width: 100%;
    border-bottom: 1px solid #888888;
}

#content h2
{
    font-weight: bold;
    font-size: 1.1em;
    padding: 0;
    margin: 30px 0 11px 0;
    width: 100%;
    border-bottom: 1px solid #888888;
}

#content a
{
    color: #ffffff;
}

#newsBox
{
    float: left;
    /* background: url(news.png) 0 0 no-repeat; */
    margin: 345px 0 0 -300px;
    padding: 0;
    width: 173px;
    text-align: center;
    color: #888888;
}

#newsBox h1
{
    font-weight: bold;
    font-size: 1.1em;
    margin: 0 0 9px 0;
    border: none;
}

#newsBox ul
{
    padding: 0;
    margin: 0;
    line-height: 1.5;
}

#newsBox li
{
    margin: 0 0 0 10px;
    padding: 0 0 0 0;
    text-decoration: underline;
}

.portfolioIcon,.portfolioIconLeft
{
    float: left;
    width: 320px;
    border: 1px solid #888888;
    padding: 2px;
}

.portfolioIcon
{
    margin: 0 0 20px 20px;
}

.portfolioIconLeft
{
    margin: 0 20px 20px 0;
}


#portfolioIndexGrid .portfolioIcon h1,#portfolioIndexGrid .portfolioIconLeft h1
{
    border: none;
    margin: 0;
    padding: 3px 0 5px 3px;
    font-size: 1.0em;
    line-height: 1.1;
    text-decoration: none;
    color: #ffffff;
}

#portfolioIndexGrid .portfolioIconLeft img
{
    float: left;
    padding-right: 5px;
    border: none;
}

#portfolioIndexGrid .portfolioIcon img
{
    float: right;
    padding-left: 5px;
    border: none;
}

#portfolioIndexGrid .portfolioIcon p,#portfolioIndexGrid .portfolioIconLeft p
{
    margin: 0;
    padding: 0 0 0 3px;
    color: #888888;
}


.portfolioThumb,.portfolioThumbLeft
{
    float: left;
    width: 120px;
    padding: 2px;
    border: 1px solid #888888;
}

.portfolioThumb a img,.portfolioThumbLeft a img
{
    border: none;
}

.portfolioThumb
{
    margin: 0 0 5px 5px;
}

.portfolioThumbLeft
{
    margin: 0 0 5px 0;
}

#portfolioLeftSection
{
    width: 270px;
    float: left;
}

#portfolioRightSection,#portfolioRightSectionPortrait
{
    width: 460px; 
    float: left;
}

#portfolioRightSection a img,#portfolioRightSectionPortrait a img
{
    border: none;
}

#portfolioRightSectionPortrait img
{
    float: left;
    margin: 0 10px 10px 0;
}

#portfolioRightSection p,#portfolioRightSectionPortrait p
{
    color: #888888;
}

#portfolioRightSection a,#portfolioRightSectionPortrait a
{
    color: #888888;
}

#portfolioRightSection #portfolioNormal
{
    margin-bottom: 15px;
}

#portfolioNavSection
{
    margin-top: 20px;
}

#portfolioNavSection p
{
    margin: 0 0 0 35px;
    padding: 0;
    width: 66%;
    text-align: center;
}

#portfolioNavSection a
{
    color: #888888;
}

#footerContainer
{
    background: url(footerbar-bg.png) top left repeat-x;
    min-height: 27px;
    margin-bottom: 50px;
}

#footer
{
    color: #000000;
    padding: 5px 0 0 0;
}


#footer p
{
    margin: 0;
    padding: 0;
}

#footer a
{
    color: #000000;
    text-decoration: none;
}

#footer .hlinks a
{
    color: #d3a000;
    font-size: 0.8em;
}

.clearer
{
    clear: both;
}