/*************************************
**************************************

Copyright 2006 O'Hearn Consulting 

**************************************
**************************************/

body {
    font: 11px/1.6em "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
    margin:0;
    padding:0;
    color: #525252;
    background:#fff url(images/bodyBg.jpg) 0 0 repeat-y;
}

p {font-weight:lighter;}

ul {
    color:#FFF;
    list-style-type:none;
    text-align:right;
    margin:0px;
    padding:0px;
}
ul.adjustment{text-align:left}
ol{margin-left:0; padding-left:0}
ol li {margin-left:15px;}

h4 {
    margin:35px 0px 0px 20px;
    color:#333;
    width:inherit;
    height:80px;
}
h5{font-size:1.1em; font-weight:bold}

img {
    border:none;
}

a:link, a:visited{color:#FFFFFF}
a:hover{color:#999999}

#backgroundElement{ width:300px; min-height:400px; height:400px; 
position:absolute; top:0; right:0; z-index:1;
background: transparent url("images/bgcircle.jpg") top right no-repeat;}

/**************
    Navigation
*************** */
#navarea {
    width:229px;
    height:inhert;
    position:absolute; 
    margin:0;
    padding:0;
}
/* main nav */
#mainnav {
    width:100%;
    position:absolute;
    top:80px;
    left:0px;
}
.nav li{margin:0; padding:0; border-bottom:1px solid #fff;}
.nav a:active, .nav a:link, .nav a:visited {
    color: #999;
    font-weight:bold;
    background-color: #000;
    display:block;
    padding: 1px 20px 3px 0;
    text-decoration: none;
    line-height:155%
}
.nav a:hover {
    color: #000;
    background:#999 url(../images/arrow.png) no-repeat right;
}

/* Copyright nav */
ul.copyr {
    color:#000;
    line-height:95%;
    padding:10px 20px 0px 0px;
}

.copyr a:active, .copyr a:link, .copyr a:visited {
    color: #666;
    font-weight:200;
    font-size:xx-small;
    background:transparent;
    display:block;
    text-decoration: none;
}
.copyr a:hover {
    color: #222;
}

/* Sub Nav */
#secondnav {
    border-bottom:1px solid #fff;
    padding:1px 0px 1px 0px;
    font-size:xx-small;
}
#secondnav a:active, #secondnav a:link, #secondnav a:visited {
    color: #999;
    font-weight:200;
    background:transparent;
    display:inline;
    text-decoration: none;
}
#secondnav a:hover {
    color: #fff;
    border:none;
    margin:0;
}

/******************
     End Main Nav
*******************/

/******************
    Projects and thumbnail sections
*******************/
#projects{
    padding-top:5px;
    vertical-align:text-bottom;
}
#proj01, #proj02, #proj03, #proj04{
    width:50px;
    height:50px;
    position:absolute;
    border: #fff 1px solid;
    background-color:#333;
}
#proj02{left:82px;}
#proj03{left:144px;}
#proj04{left:206px;}

#projects img{ width:50px; height:50px}

/* thumbnail nav */
html>body #projects a {width:100%; }

#projects a:active, #projects a:link, #projects a:visited {
    color: #999;
    font-weight:200;
    font-size:xx-small;
    background:transparent;
    display:inline;
    text-decoration: none;
}
#projects a:hover {
    color: #fff;
    border:0px;
    margin:0px;
}
#projects2{
    padding-top:75px;
    vertical-align:projects-bottom;
}

#proj05, #proj06, #proj07, #proj08{
    width:50px;
    height:50px;
    position:absolute;
    border: #fff 1px solid;
    background-color:#333;
}
#proj06{left:82px;}
#proj07{left:144px;}
#proj08{left:206px;}

#projects2 img{ width:50px; height:50px}

/* thumbnail nav */
html>body #projects2 a {width:100%; }

#projects2 a:active, #projects2 a:link, #projects2 a:visited {
    color: #999;
    font-weight:200;
    font-size:xx-small;
    background:transparent;
    display:inline;
    text-decoration: none;
}
#projects2 a:hover {
    color: #fff;
    border:0px;
    margin:0px;
}

#projects3{
    padding-top:75px;
    vertical-align:projects-bottom;
}

#proj09, #proj10, #proj11, #proj12{
    width:50px;
    height:50px;
    position:absolute;
    border: #fff 1px solid;
    background-color:#333;
}
#proj10{left:82px;}
#proj11{left:144px;}
#proj12{left:206px;}

#projects3 img{ width:50px; height:50px}

/* thumbnail nav */
html>body #projects3 a {width:100%; }

#projects3 a:active, #projects3 a:link, #projects3 a:visited {
    color: #999;
    font-weight:200;
    font-size:xx-small;
    background:transparent;
    display:inline;
    text-decoration: none;
}
#projects3 a:hover {
    color: #fff;
    border:0px;
    margin:0px;
}

#projects4{
    padding-top:75px;
    vertical-align:projects-bottom;
}

#proj13, #proj14, #proj15, #proj16{
    width:50px;
    height:50px;
    position:absolute;
    border: #fff 1px solid;
    background-color:#333;
}
#proj14{left:82px;}
#proj15{left:144px;}
#proj16{left:206px;}

#projects4 img{ width:50px; height:50px}

/* thumbnail nav */
html>body #projects4 a {width:100%; }

#projects4 a:active, #projects4 a:link, #projects4 a:visited {
    color: #999;
    font-weight:200;
    font-size:xx-small;
    background:transparent;
    display:inline;
    text-decoration: none;
}
#projects4 a:hover {
    color: #fff;
    border:0px;
    margin:0px;
}

#projects5{
    padding-top:75px;
    vertical-align:projects-bottom;
}

#proj17, #proj18, #proj19, #proj20{
    width:50px;
    height:50px;
    position:absolute;
    border: #fff 1px solid;
    background-color:#333;
}
#proj18{left:82px;}
#proj19{left:144px;}
#proj20{left:206px;}

#projects5 img{ width:50px; height:50px}

/* thumbnail nav */
html>body #projects5 a {width:100%; }

#projects5 a:active, #projects5 a:link, #projects5 a:visited {
    color: #999;
    font-weight:200;
    font-size:xx-small;
    background:transparent;
    display:inline;
    text-decoration: none;
}
#projects5 a:hover {
    color: #fff;
    border:0px;
    margin:0px;
}

#nav2inactive {
    color: #eee;
    font-weight:200;
    font-size:xx-small;
    background:transparent;
    display:inline;
    text-decoration: none;
}

/******************
    End Projects and thumbnail sections
*******************/

/********************
    Text Area 
********************/
#textarea {
    width:280px;
    height:inhert;
    position:absolute; 
    top:0px;
    left:230px;
}

#logo {
    width:280px;
    height:80px;
    vertical-align:middle;
    background: #fff url(../images/ohearnlogo.gif) center no-repeat;
}
#text {
    height:100%;
    min-height:550px;
    padding:0px 20px 0 20px;
    color:#fff;
    font-weight:100;
    background: #4C4C4C url("images/bggrey.jpg") no-repeat;
}
/********************
     End Text Area 
********************/


/********************
    Main Image area
********************/
#mainimgarea {
    width:650px;
    height:800px;
    position:absolute; top:0px; left:281px; background:none; z-index:99
}
.mainImg {
    width:600px;
    height:375px;
    position:absolute;top:80px; left:20px;
}
.thumb1 {
    width:300px;
    height:240px;
    position:absolute;top:495px; left:20px;
}
.thumb2 {
    width:200px;
    height:200px;
    position:absolute;top:495px; left:350px;
}
.credit{position:absolute;top:755px; left:20px; z-index:999; }
.credit ul, .credit li{color:#999;text-align:left; font-size:1em; line-height:1em}
.credit a:link, .credit a:visited{color:#999}
.credit a:hover{color:#333}
/* End Main Image */