<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="author" content="<% author %>" />
	<meta name="generator" content="MinigalNano SSE <% version %>" />
	<title><% title %></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>	
	<script src="<% gallery_root %>js/mootools.js" type="text/javascript"></script>
	<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js" type="text/javascript"></script>
	<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvBlack21.css" type="text/css" media="screen" />

	<style type="text/css">
		body {
			margin: 0 auto;
			padding: 0;
			width: <% gallery_width %>;
			font: 12px Tahoma,Verdana,Arial,Helvetica, sans-serif;
			background: #272727;
			color: #BDBDBD;
		}
		h1 {
			font: normal 250%/100% "Trebuchet MS",Tahoma,Verdana,Arial,Helvetica, sans-serif;
			margin: 20px 0 5px 0;
			letter-spacing: -1px;
			color: #FFCC11;	
			text-shadow: #000000 2px 2px 2px;
		}
		.credits {
			border-bottom: solid 1px #434343;
			padding-bottom: 5px;
			margin-bottom: 5px;
			color: #CF8D26;
			font: 100% "Trebuchet MS",Tahoma,Verdana,Arial,Helvetica, sans-serif;
		}
		.credits em {
			color: #BDBDBD;
			font-style: normal;
			font-style: normal;
		}
		.backlink {
			text-align: center;
		}
		.backlink a {
			font-size: 10px;
			text-decoration: none;
			color: #666;
		}
		.backlink a:hover,
		.backlink a:visited:hover {
			color: #888;
		}
		img {
			border: none;
		}
		#page_nav {
			color: #BDBDBD;
			clear:both;
			text-align: center;
		}
		#page_nav a:link, #page_nav a:visited, #page_nav a:hover, #page_nav a:visited:hover {
			text-decoration: none;
			color: #FFCC11;
		}
		#breadcrumb_nav {
			color: #BDBDBD;
			font-weight: bold;
		}
		#breadcrumb_nav a:link, #breadcrumb_nav a:visited, #breadcrumb_nav a:hover, #breadcrumb_nav a:visited:hover {
			text-decoration: none;
			color: #FFCC11;
		}
		a {
			color: #FFCC11;
		}
		#container {
			overflow: auto;
			width: 100%
		}
		.hidden {
			visibility: hidden;
			position:absolute;
			top:0;
			left:0;
			display:inline;
		}
		#topbar {
			border-bottom-color: #afafaf;
			border-style: none;
			color: black;
			position: absolute;
			left: 0;
			top: 0;
			margin: 0;
			padding-top: 5px;
			float: none;
			width: 100%;
			height: 25px;
			text-align: center;
			background-color: #FFFF99;
			border-bottom: 1px solid;
		}
		#topbar a:link, #topbar a:visited, #topbar a:hover, #topbar a:visited:hover {
			text-decoration: underline;
			color: #000;
		}
		#topbar img{
			position: absolute;
			right: 6;
			top: 6;
			vertical-align: middle;
		}

		#folder_comment
		{
			margin-bottom:10px;
		}

		#folder_comment a {
		color: #FFCC11;
		text-decoration: none;

		}
		/* ---------- gallery styles start here ----------------------- */
		.gallery {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.gallery li {
			padding: 1px;
			margin: 0;
			float: left;
			position: relative;
			width: 320px;
			height: 240px;
			overflow:hidden;
		}
		.gallery li:hover img {
			background: #ddd;
			filter: alpha(opacity=70);
			filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
			-moz-opacity: 0.70;
			opacity:0.7;
		}
		.gallery img {
			background: #000;
			color: #666;
		}
		.gallery em {
			background: #000;
			color: #FFCC11;
			font-family: "Trebuchet MS",Tahoma,Verdana,Arial,Helvetica, sans-serif;
			font-style: normal;
			font-weight: bold;
			font-size: 14px;
			padding: 8px 2px;
			display: block;
			position: absolute;
			/* top: 90px; */
			bottom:20px;
			left: 0px;
			width: 320px;
			/* height: 40px; */
			filter: alpha(opacity=60);
			filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
			-moz-opacity: 0.60;
			opacity:0.6;
		}
		.gallery em-pdf {
			color: #666;
			font-style: normal;
			font-size: 10px;
			padding: 3px 7px;
			display: block;
			position: absolute;
			top: 100px;
			left: 0px;
		}
		.gallery a {
			text-decoration: none;
		}
		.gallery a:hover em {
			background: grey;
			color: black;
		}
	</style>
</head>
<body>
	<header role="banner">
		<h1><% title %></h1>
		<% messages %>
		<p class="credits"><em>by: </em><% author %></p>
		<nav id="breadcrumb_nav" role="navigation"><% breadcrumb_navigation %></nav>
	</header>
	<section id="container">
		<p id="folder_comment"><% folder_comment %></p>
		<ul class="gallery">
			<% thumbnails %>
		</ul>
	</section>
	<br />
	<nav id="page_nav" role="navigation"><% page_navigation %></nav>
	<br />
	<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
	<footer class="backlink" role="contentinfo"><a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">Powered by MiniGal Nano <% version %></a></footer>
</body>
</html>