/* CSS Document */

body {
background: #fff;
font: 1em "Arial Narrow", Arial, Helvetica, sans-serif;
color: #000;
}

#container {
width: 100%;
}

#header {
width: 70em;
margin: auto;
}

h1 {
font: 2em "Arial Narrow", Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: left;
padding: 0 0 0 0.9em;
}

h1 span.plain {
font: .7em "Arial Narrow", Arial, Helvetica, sans-serif;
font-weight: normal;
}

h1 span.urban {
font: 1.5em "Arial Narrow", Arial, Helvetica, sans-serif;
font-weight: bold;
}

h1 span.bohemia {
font: 1.5em Georgia, "Times New Roman", Times, serif;
color: #ea0c65;
font-style: italic;
}

h1 span.artwork {
font: 1em "Courier New", Courier, monospace;
}

h1 span.name {
font: 1em Georgia, "Times New Roman", Times, serif;
font-weight: bold;
}

h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
color: #000;
text-decoration: none;
}

ul {
list-style: none;
text-align: left;
padding: 0;
}

li {
display: inline;
padding-right: 5em;
}

li.first {
padding-left: 1.7em;
}

li.last {
padding-right: 0;
}

li a, li a:visited {
text-decoration: none;
color: #000;
}

li a:hover, li a:active {
text-decoration: none;
color: #ea0c65;
}

#tvs {
width: 70em;
margin: auto;
}

#tvs a:link, #tvs a:visited, #tvs a:hover, #tvs a:active {
color: transparent;
text-decoration: none;
}

#mirror {
width: 219px;
height: 299px;
margin-left: 170px;
background-position: bottom center;
background-image: url(images/mirror_off.png);
background-repeat: no-repeat;
display: block;
float: left;
}

#mirror a:hover, #mirror a:active {
width: 219px;
height: 299px;
background-position: bottom center;
background-image: url(images/mirror_on.png);
background-repeat: no-repeat;
display: block;
}

#digital {
width: 306px;
height: 299px;
margin-left: 20px;
margin-bottom: 50px;
float: left;
background-image: url(images/digital_tv.gif);
background-position: 0 63%;
background-repeat: no-repeat;
display: block;
}

#digital a:hover, #digital a:active {
width: 306px;
height: 299px;
background-image: url(images/digital_on.png);
background-position: 0 63%;
background-repeat: no-repeat;
display: block;
}

#painting {
width: 287px;
height: 222px;
margin-left: 135px;
margin-top: -48px;
background-position: bottom center;
background-image: url(images/painting_tv.gif);
background-repeat: no-repeat;
display: block;
float: left;
}

#painting a:hover, #painting a:active {
width: 287px;
height: 222px;
background-position: bottom center;
background-image: url(images/painting_on.png);
background-repeat: no-repeat;
display: block;
}

#collage {
width: 243px;
height: 195px;
margin-left: 17px;
margin-top: -90px;
background-position: top center;
background-image: url(images/collage_tv.gif);
background-repeat: no-repeat;
display: block;
float: left;
}

#collage a:hover, #collage a:active {
width: 243px;
height: 195px;
background-position: top center;
background-image: url(images/collage_on.png);
background-repeat: no-repeat;
display: block;
}

#blog {
width: 228px;
height: 226px;
margin-left: 10px;
margin-top: -45px;
background-position: top center;
background-image: url(images/blog_off.gif);
background-repeat: no-repeat;
display: block;
float: left;
}

#blog a:hover, #blog a:active {
width: 228px;
height: 226px;
background-position: top center;
background-image: url(images/blog_on.png);
background-repeat: no-repeat;
display: block;
}

#photography {
width: 231px;
height: 232px;
margin-left: 157px;
margin-top: -11px;
background-position: top right;
background-image: url(images/photography_tv.gif);
background-repeat: no-repeat;
display: block;
float: left;
}

#photography a:hover, #photography a:active {
width: 231px;
height: 232px;
background-position: top right;
background-image: url(images/photography_on.png);
background-repeat: no-repeat;
display: block;
}

#drawing {
width: 259px;
height: 273px;
margin-left: 35px;
margin-top: -76px;
background-position: top center;
background-image: url(images/drawing_tv.gif);
background-repeat: no-repeat;
display: block;
float: left;
}

#drawing a:hover, #drawing a:active {
width: 259px;
height: 273px;
background-position: top center;
background-image: url(images/drawing_on.png);
background-repeat: no-repeat;
display: block;
}

#contact {
width: 244px;
height: 191px;
margin-left: 3px;
background-position: top center;
background-image: url(images/contact_tv.gif);
background-repeat: no-repeat;
display: block;
float: left;
}

#contact a:hover, #contact a:active {
width: 244px;
height: 191px;
background-position: top center;
background-image: url(images/contact_on.png);
background-repeat: no-repeat;
display: block;
}

li span.about a, li span.drawing a, li span.painting a, li span.photography a, li span.collage a, li span.digital a {
color: #ea0c65;
}

#content {
width: 70em;
margin: auto;
}

#sideBar {
width: 205px;
height: 100%;
float: left;
margin-top: 20px;
background: #fff;
border-right: 2px dotted #ea0c65;
}

#sideBar img {
border-color: #000;
}

#sideBar img:hover, #sideBar img:active {
border-color: #ea0c65;
}

.topLeft {
float: left;
margin: 0 5px 5px 10px;
}

.topCenter {
float: left;
margin: 0 5px 5px 5px;
}

.topRight {
float: left;
margin: 0 10px 5px 5px;
}

.left {
float: left;
margin: 5px 5px 5px 10px;
}

.center {
float: left;
margin: 5px 5px 5px 5px;
}

.right {
float: left;
margin: 5px 10px 5px 5px;
}

.bottomLeft {
float: left;
margin: 5px 5px 10px 10px;
}

.bottomCenter {
float: left;
margin: 5px 5px 10px 5px;
}

.bottomRight {
float: left;
margin: 5px 10px 10px 5px;
}

.topLeft ul, .topCenter ul, .topRight ul, .left ul, .center ul, .right ul, .bottomLeft ul, .bottomCenter ul, .bottomRight ul {
width: 55px;
padding: 0;
margin: 0;
font: 12px "Arial Narrow", Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}

.topLeft ul li, .topCenter ul li, .topRight ul li, .left ul li, .center ul li, .right ul li, .bottomLeft ul li, .bottomCenter ul li, .bottomRight ul li {
list-style-type: none;
position: relative;
margin: 0;;
padding: 0;
}

.topLeft ul ul, .topCenter ul ul, .topRight ul ul, .left ul ul, .center ul ul, .right ul ul, .bottomLeft ul ul, .bottomCenter ul ul, .bottomRight ul ul {
display: none;
}

.topLeft ul li:hover > ul, .topCenter ul li:hover > ul, .topRight ul li:hover > ul, .left ul li:hover > ul, .center ul li:hover > ul, .right ul li:hover > ul, .bottomLeft ul li:hover > ul, .bottomCenter ul li:hover > ul, .bottomRight ul li:hover > ul {
display: block;
position: absolute;
z-index: 100;
border: 1px solid #fff;
}

.topLeft li a, .topCenter li a, .topRight li a, .left li a, .center li a, .right li a, .bottomLeft li a, .bottomCenter li a, .bottomRight li a {
background: #fff;
padding: 0;
text-decoration: none;
display: block;
}
  
.topLeft ul.sub li a:link, .topLeft ul.sub li a:visited, .topCenter ul.sub li a:link, .topCenter ul.sub li a:visited, .topRight ul.sub li a:link, .topRight ul.sub li a:visited, .left ul.sub li a:link, .left ul.sub li a:visited, .center ul.sub li a:link, .center ul.sub li a:visited, .right ul.sub li a:link, .right ul.sub li a:visited, .bottomLeft ul.sub li a:link, .bottomLeft ul.sub li a:visited, .bottomCenter ul.sub li a:link, .bottomCenter ul.sub li a:visited, .bottomRight ul.sub li a:link, .bottomRight ul.sub li a:visited {
background: #fff;
color: #000;
text-align: left;
padding: 5px 0 5px 0;
}

.topLeft ul.sub li a:hover, .topLeft ul.sub li a:active, .topCenter ul.sub li a:hover, .topCenter ul.sub li a:active, .topRight ul.sub li a:hover, .topRight ul.sub li a:active, .left ul.sub li a:hover, .left ul.sub li a:active, .center ul.sub li a:hover, .center ul.sub li a:active, .right ul.sub li a:hover, .right ul.sub li a:active, .bottomLeft ul.sub li a:hover, .bottomLeft ul.sub li a:active, .bottomCenter ul.sub li a:hover, .bottomCenter ul.sub li a:active, .bottomRight ul.sub li a:hover, .bottomRight ul.sub li a:active {
color: #ea0c65;
}

#blurb {
font: 0.8em "Courier New", Courier, monospace;
width: 809px;
height: 100%;
padding-left: 20px;
line-height: 2.2;
position: absolute;
margin-left: 207px;
}

#blurb a:link, #blurb a:visited {
color: #ea0c65;
text-decoration: none;
}

#blurb a:hover, #blurb a:active {
font-weight: bold;
}

#blurb img {
margin: 20px 15px 20px 0;
border: 1px solid #000;
}

#blurb img.signature {
margin: 0;
border: none;
}

#blurb img.book {
margin: 20px 20px 0 0;
}

#blurb h1 {
font: 1.3em Georgia, "Times New Roman", Times, serif;
font-weight: bold;
font-style: italic;
color: #ea0c65;
text-align: left;
margin-top: 20px;
padding: 0;
}

.media {
font: 0.9em "Arial Narrow", Arial, Helvetica, sans-serif;
color: #000;
font-weight: bold;
}

#prevnext {
text-align: right;
font: 0.9em "Arial Narrow", Arial, Helvetica, sans-serif;
font-weight: bold;
}

#prevnext a:link, a:visited {
color: #000;
}

#prevnext a:hover, a:active {
color: #ea0c65;
}

#tvs #footer {
margin-left: 230px;
border: none;
}

#footer {
width: 70em;
margin: 45px 0 10px 0;
font: 12px "Arial Narrow", Arial, Helvetica, sans-serif;
text-align: center;
clear: both;
border-top: 2px dotted #ea0c65;
padding-top: 10px;
}

#footer a:link, a:active, a:visited, a:hover {
color: #ea0c65;
text-decoration: none;
}

#browser {
padding-right: 20px;
border-right: 1px solid #000;
float: left;
}

#networks {
margin-top: -23px;
padding: 0 20px 0 20px;
float: left;
}

#networks img {
border: 2px solid transparent;
}

#networks img.last {
margin-right: 0;
}

#tvs #footer #networks {
margin-top: -3px;
}

#tvs #footer #networks img {
padding: 0 5px 0 5px;
}


#copyright {
padding: 0 0 0 20px;
border-left: 1px solid #000;
float: left;
}

#browser p, #copyright p {
margin: 0;
}

/* LIGHTBOX */

#lightbox {	
position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;
}

#lightbox img {
width: auto; height: auto;
}

#lightbox a img {
border: none; 
}

#outerImageContainer { 
position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; 
}

#imageContainer { 
padding: 10px; 
}

#loading { 
position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; 
}

#hoverNav { 
position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; 
}

#imageContainer>#hoverNav { 
left: 0;
}

#hoverNav a { 
outline: none;
}

#prevLink, #nextLink { 
width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; 
}

#prevLink { 
left: 0; float: left;
}

#nextLink { 
right: 0; float: right;
}

#prevLink:hover, #prevLink:visited:hover {
background: url(../images/prevlabel.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover {
background: url(../images/nextlabel.gif) right 15% no-repeat;
}

#imageDataContainer {
font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%;
}

#imageData {padding: 0 10px; color: #666;
}

#imageData #imageDetails {
width: 70%; float: left; text-align: left;
}	

#imageData #caption {
font-weight: bold;
}

#imageData #numberDisplay {
display: block; clear: left; padding-bottom: 1.0em;
}			

#imageData #bottomNavClose {
width: 66px; float: right;  padding-bottom: 0.7em; outline: none;
}	 	

#overlay {
position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000;
}