<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="<% author %>" />
		<meta name="generator" content="MinigalNano <% 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 rel="stylesheet" href="<% gallery_root %>css/mediaboxWhite.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;
			}
			footer {
				text-align: center;
			}
			footer a {
				font-size: 10px;
				text-decoration: none;
				color: #666;
			}
			footer a:hover,
			footer 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 {
			
				margin: 1px;
				float: left;
				position: relative;
				width: 33%;
				height: 240px;
				overflow:hidden;
			}
			.gallery li:hover img {
				background: #ddd;
				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; */
				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>

		<script src="<% gallery_root %>js/lazy.js"></script>
		<script src="<% gallery_root %>js/script.js"></script>
		<script src="<% gallery_root %>js/mootools.js"></script>
		<script src="<% gallery_root %>js/mediabox1.3.4.js"></script>

	</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 />
		<footer role="contentinfo">
			Gallery by <% author %> |
			<a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">
				Powered by MiniGal Nano <% version %>
			</a> |
			<a  title="<% title %> RSS" href="rss/">
				RSS
			</a>
		</footer>
	</body>
</html>