/* 
 *
 * Dave Re Photography CSS - main site
 * (c) 2006 Dave Re
 * Feel free to learn, but do not copy any portion below without written
 * permission!!
 *
 */


body {
    color: #fff;
    background-color: #000;
    /* default font and size */
    font-family: "Century Gothic", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0; padding: 0;
}

div#contents {
    min-width: 800px; 
    /* the min-width hack for IE < 7 */
    width:expression(document.body.clientWidth < 900 ? "800px" : "100%");
}


/* general styles - mainly used in the maincontent area */

a, a:link {
    color: #6cf;
    text-decoration: none;
}

a:visited {
    color: #9cf;
}

a:hover, a:active {
    color: #9cf;
    text-decoration: underline;
}

h1 {
    font-size: 250%;
    font-weight: normal;
}

h2 {
    font-size: 175%;
    font-weight: normal;
    letter-spacing: 0.05em;
    text-decoration: underline;
    margin: 2em 0 1em 0;
}

h3 {
    font-size: 125%;
    font-weight: normal;
    letter-spacing: 0.05em;
}

h3.boldlargermargin {
    font-weight: bold;
    margin-top: 2.5em;
}

h4 {
    font-size: 115%;
    font-weight: normal;
}

.hr {
    width: 300px;
    height: 0px;
    margin: 20px 0; padding: 0;
    margin-left: auto; margin-right: auto;
    background: transparent;
    border-bottom: 2px solid #777;
}

p {
    text-indent: 2em;
    text-align: justify;
    margin: 3em 0; padding: 1em 0;
}

.psmallmargin {
    margin: -1em 0 2.5em 0;
}

.pnarrow {
    margin: -1em 0 0 0;
    margin-right: 20%;
    margin-left: 20%;
}

.alignleft {
    text-align: left;
}

.clearleft {
    clear: left;
}

.clearright {
    clear: right;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

div.emptydiv {
    margin: 0; padding: 0;
}

br.clear {
    clear: both;
    font-size: 1px;
    line-height: 0;
    height: 0;
}

img.imgcenter {
    display: block;
    margin: 0; padding: 0;
    margin-left: auto; margin-right: auto; 
    clear: both;
}

img.imgleft {
    display: block;
    float: left;
    margin: 0 20px 10px 0; padding: 0;
}

img.imgright {
    display: block;
    float: right;
    margin: 0 0 10px 20px; padding: 0;
}

img.normalflow {
    display: inline-block;
    margin: 10px 20px 30px 20px;
}

/* masthead - basically, the logo */

div#masthead {
    margin: 15px 0 0 0; padding: 10px 0 0 15px;
}

div#masthead img {
    border: 0;
}


/* breadcrumb at the top, bottom of the header for the page */

div#crumb {
    margin: -8px 15px 0 15px; padding: 0 0 3px 0;
    color: #999;
    text-align: right;
    font-size: 10px;
    border-bottom: 1px solid #9cf;
}

div#crumb a, div#crumb a:link, div#crumb a:visited {
    color: #999;
    text-decoration: none;
}

div#crumb a:hover, div#crumb a:active {
    color: #fff;
    text-decoration: underline;
}


/* leftside navigation bar */

div#leftnav {
    font-size: 16px;
    position: absolute; 
    margin: 5px 0 0 15px; padding: 0;
    width: 150px;
    background-color: #000;
}

div#leftnav a {
    display: block;
    text-align: right;
    color: #FFF;
    text-decoration: none;
}

/* special leftnav link classes to handle rollover on front page */

div#leftnav a.unhovered {
    display: block;
    text-align: right;
    color: #FFF;
    text-decoration: none;
    margin: 0; padding: 0.5em 20px 0.5em 0;
}

div#leftnav a.hovered {
    display: block;
    text-align: right;
    color: #AAA;
    text-decoration: none;
    margin: 0; padding: 0.5em 20px 0.5em 0;
}

div#leftnav a:hover {
    color: #AAA;
}

.leftnavl1 {
    margin: 0; padding: 0.5em 20px 0.5em 0;
}

.leftnavl2 {
    font-size: 78%;
    margin: 0; padding: 0.5em 40px 0.5em 0;
    background-image:  url(images/dot.gif);
    background-repeat: no-repeat;
    background-position: 85% 55%; 
}

div#leftnav a.leftnavl2:hover {
    background-image:  url(images/greydot.gif);
}

div#leftnav a#bottom2ndlev {
    margin-bottom: 1.5em;
}


/* main contents */

div#maincontainer {
    margin: 0;
    padding: 0;
}

div#maincontent {
    margin: 0 15px 0 170px; 
    padding: 0 0 0 20px;
    border-left: 1px solid #9cf;
    text-align: center; /* makes our centered images work in IE... damn POS IE... */
}


/* topnav is used to style the "Category" contents nav at the top of the main
   content - not to be confused w/ the crumb or leftnav... */

div#topnav {
	margin: 0; padding: 3em 0 1em;
	text-align: center;
}

div#topnav h1 {
    display: block;
    margin: 0; padding: 0;
}

div#topnav h4 {
    display: block;
    margin: 0; padding: 0;
    color: #CCC;
}

div#topnav a, div#topnav a:link {
    color: #FFF;
}

div#topnav a:visited {
    color: #CCC;
}

div#topnav a:hover, a:active {
    color: #9cf;
    text-decoration: none;
}


/* front page styling... */

div#frontpage {
    position: relative;
    margin: 0 15px 0 170px;
    min-height: 500px;
    border-left: 1px solid #9cf;
    /* text-align: center; /* makes our centered images work in IE... damn POS IE... */
}

div#fpcopy {
    padding-top: 500px;
}


div#frontpage .image {
    margin: 0; padding: 0;
    border: 0;
    width: 100px;
    height: 100px;
}

/* 
 * positioning values
 * left side margin = 65
 * 2nd left side margin = 135 
 * row padding = 40; 
 * column padding = 40 
 */ 
div#frontpage #img1 {
    position: absolute;
    top: 80px;
    left: 65px;
}

div#frontpage #img2 {
    position: absolute;
    top: 80px;
    left: 205px;
}

div#frontpage #img3 {
    position: absolute;
    top: 80px;
    left: 345px;
}

div#frontpage #img4 {
    position: absolute;
    top: 80px;
    left: 485px;
}

div#frontpage #img5 {
    position: absolute;
    top: 220px;
    left: 135px;
}

div#frontpage #img6 {
    position: absolute;
    top: 220px;
    left: 275px;
}

div#frontpage #img7 {
    position: absolute;
    top: 220px;
    left: 415px;
}

div#frontpage #img8 {
    position: absolute;
    top: 360px;
    left: 65px;
}

div#frontpage #img9 {
    position: absolute;
    top: 360px;
    left: 205px;
}

div#frontpage #img10 {
    position: absolute;
    top: 360px;
    left: 345px;
}

div#frontpage #img11 {
    position: absolute;
    top: 360px;
    left: 485px;
}


/* standard footer styling */

div#footer {
    margin: 0; padding: 50px 0 50px 0;
    clear: both;
    text-align: center;
    color: #999;
    font-family: Times, serif;
    letter-spacing: 0.03em;
}

div#copyright {
    margin: 0; padding: 0 20px 10px 20px;
    font-size: 90%;
}

div#credits {
    margin: 0; padding: 10px 20px 0 20px;
    font-size: 85%;
}

div#credits a, div#credits a:link {
    color: #FFF;
}


/* stuff for centered, two column information sections */
div.infodiv {
    margin: 1em 30% 2em 30%;
    text-align: left;
}

.infolabel {
    margin-bottom: 1em;
    margin-right: 10px;
    display: block;
    font-weight: bold;
    float: left;
}

.info {
    margin-bottom: 1em;
    display: block;
    text-align: right;
    clear: right;
}

.infofineprint {
    display: block;
    font-size: .8em;
    text-indent: 2em;
    letter-spacing: 0.07em;
    margin-bottom: 2em;
}

.infotext {
    display: block;
    text-align: justify;
    margin-top: 1em;
    margin-bottom: 2em;
    font-size: 0.9em;
    letter-spacing: 0.07em;
}

/* special 2 column info div for contact info styling */
div.contactdiv {
    margin: 4em 30% 4em 30%;
    text-align: left;
}

.contactlabel {
    margin-bottom: 2em;
    margin-right: 10px;
    display: block;
    font-weight: bold;
    float: left;
}

.contactinfo {
    margin-bottom: 2em;
    display: block;
    text-align: right;
    clear: right;
}

/* and a centered ul element for listing things.... */
div#centeredul {
    margin: 0 30% 0 30%;
    text-align: left;
}

div#centeredul ul {
    text-align: left;
}