html,body{height:100%;}

*{outline:none;}

body{
	margin:0px; 
	padding:0px; 
	background:#000;	
}

#toolbar{
	position:absolute; 
	z-index:3; right:10px; 
	top:80px; padding:5px; 
	background:transparent;	
}

#toolbar img{
	border:none;	
}

#img_title{
	position:absolute; 
	z-index:3; 
	left:10px; 
	top:80px; 
	padding:10px; 
	background: rgba(0, 0, 0, 0.8); 
	color:#FFF; 
	font-size:24px; 
}

#bg{
	position:fixed; 
	z-index:1; 
	overflow:hidden; 
	width:100%; 
	height:100%;
	top: 0px; /* This fixes the position of the fullscreen slider image */
	
}

#bgimg{
	
	display:none; -ms-interpolation-mode: bicubic;	
	-webkit-box-shadow:0 3px 4px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow:0 3px 4px rgba(0, 0, 0, 0.5);
    		box-shadow:0 3px 4px rgba(0, 0, 0, 0.5);
    		
}

#preloader{  /* Prepare the canons, man the harpoooons, we're hunting double circles! */
	position:absolute; 
	z-index:3; 
	width:34px; /* Unnecessary, matches our graphic though, so like whatever gurl.. */
	padding:21px 20px 18px; 
	top:47%; 
	left: 50%;
	margin:auto; 
	
	-webkit-border-radius: 50px;
	   -moz-border-radius: 50px; 
	        border-radius: 50px;	
	
	background: rgb(0, 0, 0); /* The Fallback */
    background: rgba(0, 0, 0, 0.9);
    
       -moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;

}

#preloader:before {
   content: "";
   width: 82px;
   height: 82px;
   position: absolute;
   top:50%; 
	left: 50%;
	margin-left: -41px; /* WHHHAAAAA!!! */
	margin-top: -41px; /* HOLY GRAIL OF CSS3: DOUBLE -RAINBOW- CIRCLES!!! */
   
   	-webkit-border-radius: 50px;
	   -moz-border-radius: 50px; 
	        border-radius: 50px;	

	background: rgb(0, 0, 0); /* The Fallback */
    background: rgba(0, 0, 0, 0.2);

   /* Position/Spacing */
  float: left;
}

#preloader img{margin: 2px 2px 0px 1px}

#thumbnails_wrapper{	
	z-index:2; 	
	position:fixed; 
	bottom:42px; 
	width:100%;
	background: url("../img/header_bg_pat_1.png") repeat scroll 0 0 transparent;
	/* background:url(../img/fullscreen/empty.gif) repeat scroll 0 0 rgba(0, 0, 0, 0.9); */
}

#outer_container{
	position:relative; 
	padding:0; 
	width:100%; 
	margin:12px auto;	
}

#outer_container .thumbScroller{
	position:relative; 
	overflow:hidden; 
	/* background:url(../img/fullscreen/transparency.png); */
}

#outer_container .thumbScroller, #outer_container .thumbScroller .container, #outer_container .thumbScroller .slide{
	height:auto;	
}

#outer_container .thumbScroller .container{
	position:relative; 
	left:0;	
}

#outer_container .thumbScroller .slide{
	float:left;	
}

#outer_container .thumbScroller .slide div{
	margin:5px; 
	height:100%;	
}

#outer_container .thumbScroller img{
	border:5px solid #fff;	
}

#outer_container .thumbScroller .slide div a{
	display:block; 
	padding:5px;	
}

.nextImageBtn, .prevImageBtn{
	display:block; 
	position:absolute; 
	width:50px;
	height:50px; 
	top:54%; 
	margin:-55px 10px 0 10px; 
	z-index:3; 
	padding: 5px;            
}


.nextImageBtn{
	right: 5px; 
	background:transparent url(../img/fullscreen/nextImgBtn.png) center center no-repeat;
}

.prevImageBtn{
	left: 5px;
	background:transparent url(../img/fullscreen/prevImgBtn.png) center center no-repeat;	
}

#outer_container .thumbScroller .slide .thumbLink{
    background: url(../img/fullscreen/post_link.png) no-repeat scroll 0 0 transparent;
    height: 20px !important;
    width: 20px !important;
    z-index: 9997 !important;  
    margin-top: -37px;
}

#outer_container .thumbScroller .slide .lightboxLink{
	background: url("../img/fullscreen/pop_link.png") no-repeat scroll 0 0 transparent;
    height: 20px !important;
    margin-top: -37px;
    overflow: visible;
    width: 20px !important;
    z-index: 9997 !important;
}

/* This is mostly ignored because our JQuery is running the show here. */
.thumbLink, .lightboxLink{ 
			  -moz-opacity:0.0;	    		  
      filter: alpha(opacity=0);
     			   opacity:0.0;
     			   text-indent: -9999px;
	   -moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
	     -o-transition: opacity .3s ease-in-out;
	        transition: opacity .3s ease-in-out;
}

/* This is mostly ignored because our JQuery is running the show here. */
.slide:hover .thumbLink, .slide:hover .lightboxLink{ 
			 -moz-opacity:1.0 !important;	    		  
     filter: alpha(opacity=100) !important;
     			  opacity:1.0 !important;
}

.thumbLink:hover , .lightboxLink:hover { 
			 -moz-opacity:0.8 !important;	    		  
     filter: alpha(opacity=80) !important;
     			  opacity:0.8 !important;
}

.popLink{display: block; height: 20px;}




