<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<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"></script>
		<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js"></script>
		<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />


	<style type="text/css">

		html{
			font-size: 62.5%;
		}
		.clear{clear:both;}
		body {
			margin: 0;
			padding: 0;
			width: 100%;
			font-size: 1.5rem;
			font-family:Helvetica, Arial, sans-serif;
			background: #E7E6E0;
			color: #333333;
		}

		a {
			color: #333333;
			font-weight: bold;
			text-decoration: none;
		}
		h1 {
			font-family: italic Georgia, Lucida, serif;
			margin: 20px 0 0 0;
			
		}
		h1 a{
			color: #CC2027;	
		}

		body > header{
			background-color:#FFF;
			padding: 1px;
			margin-bottom: 15px;
		}
		#container, #innerheader{
			max-width: <% gallery_width %>;
			margin: 0px auto;
		}
		img {
			border: none;
		}
		nav {
			font-size: 1.3em;
			padding: 15px 0px;
		}
		body > nav {
			text-align: center;
		}
		#folder_comment
		{
			margin-bottom:10px;
		}
		#folder_comment a {
			color: #FFCC11;
			text-decoration: none;
		}

		#gallery {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		#gallery li, #gallery li img {
			border-radius: 4px;
		}
		#gallery li {
			float: left;
			position: relative;
			overflow:hidden;
			margin: .5%;
			-webkit-box-shadow:  0px 0px 2px -1px #000;
			box-shadow:  0px 0px 2px -1px #000;
		}
		#gallery li img{
			width: 100%;
		}	
		#gallery em {
			background: #FFF;
			text-align: center;
			font-style: normal;
			padding: 8px 0px;
			display: block;
			position: absolute;
			bottom:0px;
			width: 100%;
		}
		footer {
			margin: 25px 0px;
			text-align: center;
		}
		footer a {
			text-decoration: none;
			color: #666;
		}

		/*----responsive----*/
		#gallery li {
			width: 24%;
			height: 0;
			padding-bottom: 24%;
		}
		@media (max-width: 1000px) {
			#gallery li {
				width: 32%;
				padding-bottom: 32%;
			}
		}
		@media (max-width: 800px) {
			#gallery li {
				width: 48%;
				padding-bottom: 48%;
			}
		}
		@media (max-width: 450px) {
			#gallery li {
				width: 100%;
				padding-bottom: 100%;
			}
		}
	</style>
</head>

<body>
	<header>
		<div id="innerheader">
			<h1><a href="<% gallery_root %>"><% title %></a></h1>
			<% messages %>
			<nav><% breadcrumb_navigation %></nav>
		</div>
	</header>

	<main id="container">
		<header><% folder_comment %></header>
		<ul id="gallery">
			<% thumbnails %>
		</ul>
	</main>

	<div class="clear"></div>
	<nav><% page_navigation %></nav>
	<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
	<footer>
		Gallery by <% author %>.
		<a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">
			Made with MiniGal Nano by SebSauvage.
		</a>
		<a href="http://tomcanac.com" title="Tom Canac" target="_blank">
			Board theme by Tom Canac.
		</a>
		<a  title="<% title %> RSS" href="rss/" />
			RSS
		<a>
	</footer>
</body>
</html>