/*border:  1px solid #993333;*/

body   { color: #fff; background-color: white; margin: 0; padding: 0;  }

table {color: #666666;  font-size: 11px; font-family: Arial }
a { color: #666666; text-decoration: underline; }
a:hover { color: gray; }

#header{ font-size: 30px; color: #666666;  }
#header font  { color: #993333; font-family: Arial ; letter-spacing: 2px; }
#header font.red { color: #993333;  }
#header font.name { color: #993333; font-size: 20px; }

#navi{ font-size: 15px; text-decoration: none; }
#navi td { color: #666666;  }
#navi a { color: #a9a9a9; text-decoration: none; }
#navi a:hover{ color: #666666; }

#maintable { position:relative;  background-color:#fff; text-align:left; height:500px; width:850px; }

#contact { background:url("http://www.delight-photography.com/beta/items/background_contact.gif") no-repeat transparent; }
	
input {border:1px solid transparent;}
input:hover{background-color: #ccc; }
input:active {border:1px solid gray; }

#overlay{position: absolute;top: 0; left: 0;z-index: 90;width: 100%;background-color: #000;filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6; width: 850px;}
		
#lightboxtable{top: 0px;left: 0; z-index: 100; line-height: 0;width: 850px; }
#lightbox{ position: absolute; top: 0; left: 0;  z-index:100; height: 400px; text-align: left; line-height: 0; width: 850px; }

#lightbox a img{ border: none; }
#outerImageContainer{position: relative;background-color: #fff;width: 250px;height: 250px;margin: 0 ;}
#imageContainer{ position:relative;  overflow:hidden; margin:0 ; z-index: 300; width:850px;}

#canvas_0 { width:100%; position:absolute; top:0; left:0; background-color:white;}
#canvas_1 { width:850px; position:absolute; top:0; left:0; background-color:white;}
				
			
#loading{position: absolute;top: 40%;left: 0%;height: 25%;text-align: center;line-height: 0; }
#hoverNav{position: absolute;top: 0;left: 0;height: 100%; width: 850px; z-index: 200; }

#hoverNav a{ outline: none;}

#prevLink, #nextLink{ height: 100%;background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */display: block; }
#prevLink { width: 20%; left: 0; float: left; cursor: w-resize; }
#nextLink { width: 80%;right: 0; float: right; cursor: e-resize; }
/*#prevLink:hover, #prevLink:visited:hover { background: url(../items/prevlabel.gif) left 15% no-repeat; }*/
/*#nextLink:hover, #nextLink:visited:hover { background: url(../items/nextlabel.gif) right 15% no-repeat; }*/

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

#imageData{padding:0 10px;	}
#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;	}	
	
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
* html>body .clearfix {display: inline-block; width: 100%;}
* html .clearfix { height: 1%;}