/* Just some base styles not needed for example to function */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
html, body { height: 100%; }

body, form, ul, li, p, h1, h2, h3, h4, h5
{
	margin: 0;
	padding: 0;
}
body { background-color: #606061; color: #ffffff; }
img { border: none; }
p
{
	font-size: 1em;
	margin: 0 0 1em 0;
}

/* Branding */
#cssninja
{
	position: absolute;
	top: 0;
	left: 0;
	background-color: #18191d;
	width: 100%;
	height: 40px;
}
	#cssninja p
	{
		color: #ffffff;
		text-align: center;
		margin: 10px 0 0 0;
	}
	#cssninja a
	{
		color: #ffffff;
		text-decoration: none;
		background: url(../../assets/ico_ninja.gif) 0 0 no-repeat;
		padding: 4px 0 9px 28px;
	}
	#cssninja a:hover { text-decoration: underline; }
	
/* Futurebox styles */
ul.futurebox 
{
	padding: 60px 0 0 60px;
}
	ul.futurebox li
	{
		display: inline-block;
		float: left;
		list-style: none;
		margin: 0 10px 0 0;
		border: 3px solid #ccc;
	}
		ul.futurebox li a, ul.futurebox li img { display: block; }
		ul.futurebox li:hover { border-color: #1E528C; }

.overlay_container { counter-reset: futurebox; }
.overlay_container > li { counter-increment: futurebox; }
	
.overlay
{
	width: 100%;
	height: 100%;
	position: absolute; 
	top: 0; 
	left: 0; 
	visibility: hidden;
	z-index: 999;
	background: rgba(0,0,0,0.7);
}
	/* Apply transitions styles to elements */
	#helper { display: none; }
	@media (-webkit-transition) {
		body:hover #helper { display: none; }
		#helper 
		{ 
			position: absolute; 
			top: 50%; 
			left: 50%; 
			display: block; 
			z-index: 1000; 
			width: 400px; 
			margin: 0 0 0 -200px; 
			color: #606061; 
		}
		.overlay a, .overlay > a + p:after
		{
			opacity: 0;
			-webkit-transition: opacity 1s ease;
		}
		.overlay:hover a, .overlay a:active, .overlay:hover > a + p:after { opacity: 1; }
	}
	
	.overlay > a
	{
		display: table-cell; 
		vertical-align: middle; 
		text-align: center;
		width: 100%;
		height: 100%;
	}
		.overlay > a + p:after
		{
			position: absolute;
			top: 93%;
			left: 50%;
			border: 2px solid #000;
			padding: 5px;
			background: rgba(96,96,97,0.5);
			width: 300px;
			margin: 0 0 0 -150px;
			text-align: center;
			content: "No. " counter(futurebox) " " attr(title);
			text-shadow: 1px 1px #000;
			display: block;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		.overlay > p a,
		.overlay > p a[rel=next]
		{
			color: #fff;
			position: absolute;
			top: 50%;
			right: 10%;
			background: rgba(96,96,97,0.5);
			padding: 20px;
			font-weight: bold;
			text-decoration: none;
			text-shadow: 2px 2px #000;
			font-size: 50px;
			line-height: 50px;
			border: 1px solid #fff;
			
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			
			-webkit-transition: -webkit-box-shadow 0.2s ease;
			-moz-transition: -moz-box-shadow 0.2s ease;
			-o-transition: box-shadow 0.2s ease;
			transition: box-shadow 0.2s ease;
		}
		.overlay > p a[rel=prev]
		{
			right: inherit;
			left: 10%;
		}
	.overlay > p a:hover, .overlay > p a:focus 
	{ 
		background: rgba(96,96,97,0.8);
		-moz-box-shadow: 2px 2px 10px #fff; 
		-webkit-box-shadow: 2px 2px 10px #fff; 
		box-shadow: 2px 2px 10px #fff; 
	}
	
.overlay:target 		{ display: table; visibility: visible; }
.overlay:target > a	{ background: url(http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg.png) 50% 50% no-repeat; } 

#futurebox_img2.overlay:target > a 	{ background: url(http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg2.png) 50% 50% no-repeat; /* Lazy loading! */ } 
#futurebox_img3.overlay:target > a 	{ background: url(http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg3.png) 50% 50% no-repeat; /* Lazy loading! */ } 
#futurebox_img4.overlay:target > a 	{ background: url(http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg4.png) 50% 50% no-repeat; /* Lazy loading! */ } 
#futurebox_img5.overlay:target > a	{ background: url(http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg5.png) 50% 50% no-repeat; /* Lazy loading! */ }