/* ---------------------------- 
[Master Stylesheet]

Project:	Leslie Website
Version:	Beta 0.1
Last change:	July 27, 2010
Created by:	Devon Lesk
Primary use:	Web

------------------------------- */

/*
Colours

*/

/* ---------------------------- */
/* Generic Styles
/* ---------------------------- */

*{padding:0; margin:0; margin:0 auto;}
html {margin: 0 auto; text-align:center;}

/*Clearfix*/
.clearfix:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}


/* ---------------------------- */
/* Contact
/* ---------------------------- */

body{background:#40404c;}
img{border:none;}
a{text-decoration:none;}

hr{float:left; width:100%; height:1px; margin:20px 0 20px 0; border:none; background:#84849b;}

#title{font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:100; color:#FFF; letter-spacing:20px; margin:10px 0 10px 0; display:none;}
.emboss{border:none; height:2px; width:100%; background:#000; border-bottom:#666 1px solid; margin:0px 0px 0px 0px;}

#navigation{float:left; width:400px; height:20px; margin:20px 0 -10px 20px; text-align:left;}
#navigation a{padding:3px 5px 3px 5px; border:#666 1px solid; text-decoration:none; font-family:Verdana, Geneva, sans-serif; color:#999; font-size:12px; margin:0 4px 0 4px;}
/*#navigation a:hover{border:#09C 1px solid; margin:0 4px 0 4px;}*/

#homeImage{width:100%; height:300px; overflow:hidden;}

#container{float:left; width:100%; height:100%; background:url(../images/gradient.png) repeat-x; margin:20px 0 0 0; padding:20px 0 0 0;}
#pageContent{width:600px; float:left; text-align:left; position:relative; left:50%; margin-left:-400px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#FFF; line-height:1.2;}
#pageContent a{color:#e5ffa8;}
#pageContent a:hover{color:#b8cccc;}

#gallerySidebar{width:90px; float:left; position:relative; left:22px;}
#sidebarTitle{background:url(../images/galleries.gif) no-repeat; width:40px; height:300px; float:left;}
#galleryNav{width:50px; float:left;}
#galleryNav a{float:left;border:#b8b8c4 3px solid; margin:12px 0 12px 0;}
#galleryNav a:hover{border:#fff 3px solid;}

#footer{width:100%; height:40px; float:left; font-family:Tahoma, Geneva, sans-serif; color:#84849b; font-size:12px; margin:0 0 20px 0;}
#footer a{font-size:11px; color:#84849b; text-decoration:none; margin:0 16px 0 16px; letter-spacing:4px;}
#footer a:hover{color:#CCC;}


#images a{color:#FFF;}
h4{}
.imgLink{width:120px; float:left; font-size:11px; text-align:center;}

.divider{float:left; display:inline; margin-bottom:30px;}




.qtip .qtip-content{
   padding: 10px;
   overflow: hidden;
   font-family:Verdana, Geneva, sans-serif;
   font-size:12px;
}
   
   .qtip .qtip-content .qtip-title,
   .qtip-cream .qtip-content .qtip-title{
      background-color: #F0DE7D;
   }
   
   .qtip-light .qtip-content .qtip-title{
      background-color: #f1f1f1;
   }

   .qtip-dark .qtip-content .qtip-title{
      background-color: #404040;
   }

   .qtip-red .qtip-content .qtip-title{
      background-color: #F28279;
   }
   
   .qtip-green .qtip-content .qtip-title{
      background-color: #B9DB8C;
   }


/* ---------------------------- */
/* Lightbox CSS
/* ---------------------------- */

#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; }