/*-------------------------
Layout
-------------------------*/
html, body {
background: #BEAC87 url('img/bg.jpg') no-repeat left top;
color: #000;
font: 9px Arial, Helvetica, sans-serif;
border: 0;
margin: 0 0 20px 0;
padding: 0;
}



/*-------------------------
Left Content
-------------------------*/
div#wrapper {
width: 148px;
position: absolute;
top: 60px;
left: 18px;
}

div#wrapper p {
margin: 1em 0;
}

div#wrapper p a, div#wrapper a {
color: #F50;
text-decoration: none;
}

div#wrapper p a:hover, div#wrapper a:hover {
text-decoration: underline;
}

div#wrapper ol#thumbs {
margin: 0;
padding: 0;
list-style: none;
}

div#wrapper ol#thumbs li {
text-align: center;
float: left;
margin: 0;
padding: 3px 0 0 8px;
}

div#wrapper ol#thumbs li a img {
border: 0;
filter: alpha(opacity=80);
-moz-opacity: .8;
opacity: .8;
}

div#wrapper ol#thumbs li a:hover img {
border: 0;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}



/*-------------------------
Main Content
-------------------------*/
div#content {
width: 485px;
position: absolute;
top: 20px;
left: 315px;
}

div#content p a, div#content a {
color: #000;
text-decoration: underline;
}

div#content p a:hover, div#content a:hover {
text-decoration: none;
}



/*-------------------------
Forms
-------------------------*/
input, textarea {
filter: alpha(opacity=40);
-moz-opacity: .40;
opacity: .40;
border: 1px solid #000000;
color: #000;
background: #FFF;
font: bold 10px Verdana, sans-serif;
}

input.text {
padding: 2px 5px 2px 60px;
}

input.button, textarea {
padding: 2px 5px;
}



/*-------------------------
Misc. Design
-------------------------*/
img {
border: 0;
}

img.solid {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

img.opaque {
filter: alpha(opacity=15);
-moz-opacity: 0.15;
opacity: 0.15;
}



/*-------------------------
Image Preloader
-------------------------*/
div#preload {
width: 0;
height: 0;
display: none;
visibility: hidden;
position: absolute;
top: -100px;
left: -100px;
}



/*-------------------------
H1 Tag
-------------------------*/
h1 {
display: none;
text-indent: -500px;
}



/*-------------------------
NCN Logo
-------------------------*/
div#ncn {
width: 59px;
height: 34px;
position: absolute;
left: 10px;
bottom: 5px;
}

div#ncn ol {
list-style: none;
margin: 0;
padding: 0;
}

div#ncn ol li {
margin: 0;
padding: 0;
}

div#ncn ol li a {
display: block;
font-size: 1px;
line-height: 1px;
text-indent: -500px;
text-decoration: none;
width: 59px;
height: 34px;
background: url('img/ncn_off.gif') no-repeat left top;
}

div#ncn ol li a:hover {
background: url('img/ncn_on.gif') no-repeat left top;
}



/*-------------------------
Nav: image info
-------------------------*/
div#click {
position: absolute;
top: 3px;
left: 350px;
font: 10px Verdana, Helvetica, sans-serif;
}



/*-------------------------
Nav: ordered list
-------------------------*/
div#wrapper ol#nav {
list-style: none;
margin: 0;
padding: 0;
}

div#wrapper ol#nav li {
margin: 0 0 8px 5px;
padding: 0;
}

div#wrapper ol#nav li a {
font-size: 1px;
line-height: 1px;
text-indent: -500px;
text-decoration: none;
}

div#wrapper ol#nav li, div#wrapper ol#nav li a {
width: 135px;
height: 10px;
}



/*-------------------------
Nav: illustration
-------------------------*/
div#wrapper ol#nav li#nav_illustration a {
display: block;
background: url('img/nav_illustration_off.gif') no-repeat left top;
}

div#wrapper ol#nav li#nav_illustration a:hover {
background: url('img/nav_illustration_on.gif') no-repeat left top;
}

/*-------------------------
Nav: caricature
-------------------------*/
div#wrapper ol#nav li#nav_caricature a {
display: block;
background: url('img/nav_caricature_off.gif') no-repeat left top;
}

div#wrapper ol#nav li#nav_caricature a:hover {
background: url('img/nav_caricature_on.gif') no-repeat left top;
}

/*-------------------------
Nav: paintings
-------------------------*/
div#wrapper ol#nav li#nav_paintings a {
display: block;
background: url('img/nav_paintings_off.gif') no-repeat left top;
}

div#wrapper ol#nav li#nav_paintings a:hover {
background: url('img/nav_paintings_on.gif') no-repeat left top;
}

/*-------------------------
Nav: sketchbook
-------------------------*/
div#wrapper ol#nav li#nav_sketchbook a {
display: block;
background: url('img/nav_sketchbook_off.gif') no-repeat left top;
}

div#wrapper ol#nav li#nav_sketchbook a:hover {
background: url('img/nav_sketchbook_on.gif') no-repeat left top;
}

/*-------------------------
Nav: services
-------------------------*/
div#wrapper ol#nav li#nav_services a {
display: block;
background: url('img/nav_services_off.gif') no-repeat left top;
}

div#wrapper ol#nav li#nav_services a:hover {
background: url('img/nav_services_on.gif') no-repeat left top;
}

/*-------------------------
Nav: contactjoe
-------------------------*/
div#wrapper ol#nav li#nav_contactjoe a {
display: block;
background: url('img/nav_contactjoe_off.gif') no-repeat left top;
}

div#wrapper ol#nav li#nav_contactjoe a:hover {
background: url('img/nav_contactjoe_on.gif') no-repeat left top;
}