@font-face
{
	font-family: "FontAwesome";
	src: url("/public/fonts/FontAwesome.eot?v=4.1.0");
	src: url("/public/fonts/FontAwesome.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("/public/fonts/FontAwesome.woff?v=4.1.0") format("woff"), url("/public/fonts/FontAwesome.ttf?v=4.1.0") format("truetype"), url("/public/fonts/FontAwesome.svg?v=4.1.0#fontawesomeregular") format("svg");
	font-weight: normal;
	font-style: normal;
}

html, body
{
	font-family: "Georgia", "Helvetica", Arial;
	margin: 0;
	padding: 0;
}

body
{
	background: #111;
}

ul, ol, li
{
	margin: 0;
	padding: 0;
}

img
{
	outline: none;
	border: none;
}

.icon
{
	cursor: pointer;
}

.icon:before
{
	display: inline-block;
	font-family: "FontAwesome";
}

#navigation
{
	background: rgba(255,255,255, 0.2);
	padding: 10px;
	position: fixed;
	left: 50px;
	top: -10px;
}

#navigation .wrapper
{
	background: rgba(255,255,255, 0.8);
	padding: 0 30px 30px;
}

#navigation #logo
{
	margin: 20px 0;
}

#navigation li
{
	list-style: none;
	margin: 0 0 10px;
	width: 200px;
}

#navigation a
{
	display: block;
	color: #555;
	font-size: 21px;
	text-decoration: none;
	border-bottom: 1px solid #666;
	transition: all ease 0.2s 0s;
}

#navigation a:hover
{
	color: #333;
	border-bottom: 1px solid #333;
}

/* Page */
#page
{
	color: #444;
	margin: 50px 0 0 370px;
	padding: 0 0 50px;
	width: 590px;
	position: absolute;
	top: -500px;
}

#page ul, #page ol
{
	list-style-position: inside;
	margin: 0 0 20px;
}

#page #close
{
	display: inline-block;
	color: #888;
	text-align: center;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 20px;
	right: 20px;
	transition: all ease 0.3s 0s;
}

#page #close:hover
{
	color: #444;
}

#page #close:before
{
	display: inline-block;
	content: "";
	font-family: "FontAwesome";
	font-size: 30px;
	line-height: 30px;
	text-align: center;
	width: 30px;
}

#page .wrapper
{
	background: rgba(255,255,255, 0.2);
	padding: 10px;
}

#page .layout
{
	background: rgba(255,255,255, 0.8);
	padding: 30px;
}

#page h1
{
	font-size: 32px;
	margin: 0 0 30px;
}

#page p
{
	margin: 0 0 10px;
}

/* Controls */
#prevslide,
#nextslide
{
	color: rgba(255,255,255, 0.5);
	margin: -25px 0 0;
	width: 35px;
	height: 50px;
	position: fixed;
	top: 50%;
	transition: all ease 0.4s 0s;
}

#prevslide:before,
#nextslide:before
{	
	font-size: 50px;
}

#prevslide:hover,
#nextslide:hover
{
	color: rgba(255,255,255, 1);
}

#prevslide:before
{
	content: "";
}

#nextslide:before
{
	content: "";
}

#prevslide
{
	left: 15px;
}

#nextslide
{
	right: 15px;
}

#controls-wrapper #slide-list li a
{
	font-size: 0;
}

#controls-wrapper
{
	background: rgba(255,255,255, 0.7);
	margin: 0 auto;
	width: 100%;
	height: 42px;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 4;
}

#pauseplay
{
	float: left;
	color: #fff;
	font-size: 30px;
	text-shadow: 0 0 4px rgba(0,0,0, 0.6);
	text-align: center;
	border-right: 1px solid rgba(255,255,255, 0.9);
	margin-top: 1px;
	width: 50px;
	height: 100%;
	transition: all ease 0.3s 0s;
}

#pauseplay:before,
#pauseplay.pause:before
{
	content: "";
}

#pauseplay.play:before
{
	content: "";
}

#pauseplay:hover
{
	text-shadow: 0 0 8px rgba(0,0,0, 0.9);
}

#slide-list
{
	float: left;
	padding: 13px 0;
	position: absolute;
	left: 50%;
}

#slide-list li
{
	float: left;
	list-style: none;
	margin: 0 5px;
	width: 16px;
	height: 16px;
}

#slide-list li a
{
	display: block;
	color: #fff;
	text-shadow: 0 0 2px rgba(0,0,0, 0.6);
	height: 16px;
	width: 16px;
	cursor: pointer;
	transition: all ease 0.3s 0s;
}

#slide-list li a:hover
{
	text-shadow: 0 0 6px rgba(0,0,0, 0.9);
}

#slide-list li a:before
{
	display: inline-block;
	font-family: "FontAwesome";
	font-size: 16px;
	content: "";
}

#slide-list li.current-slide a:before
{
	content: "";
}

#tray-button
{
	float: right;
	color: #fff;
	font-size: 28px;
	text-shadow: 0 0 4px rgba(0,0,0, 0.6);
	text-align: center;
	line-height: 36px;
	border-left: 1px solid rgba(255,255,255, 0.9);
	margin-top: 1px;
	width: 44px;
	height: 100%;
	transition: all ease 0.3s 0s;
}

#tray-button:before,
#tray-button.open:before
{
	content: "";
}

#tray-button.close:before
{
	line-height: 44px;
	content: "";
}

#tray-button:hover
{
	text-shadow: 0 0 8px rgba(0,0,0, 0.9);
}

#progress-back
{
	background: rgba(255,255,255, 0.1);
	width: 100%;
	height: 5px;
	position: fixed;
	left: 0;
	bottom: 42px;
	z-index: 5;
}

#progress-bar
{
	background: rgba(255,255,255, 0.8);
	width: 100%;
	height: 5px;
	position: relative;
}

#thumb-back,
#thumb-forward
{
	background: rgba(255,255,255, 0.2);
	color: #fff;
	font-size: 50px;
	text-align: center;
	line-height: 108px;
	width: 36px;
	height: 108px;
	position: absolute;
	bottom: 42px;
	z-index: 5;
	opacity: 0.5;
	transition: all ease 0.3s 0s;
}

#thumb-back:hover,
#thumb-forward:hover
{
	opacity: 0.9;
}

#thumb-back
{
	padding: 0 4px 0 0;
	left: 0;
}

#thumb-forward
{
	padding: 0 0 0 4px;
	right: 0;
}

#thumb-back:before
{
	content: "";
}

#thumb-forward:before
{
	content: "";
}

#thumb-tray
{
	overflow: hidden;
	background: rgba(0,0,0, 0.5);
	text-align: center;
	box-shadow: 0 0 5px rgba(0,0,0, 0.7);
	width: 100%;
	height: 150px;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 3;
}

ul#thumb-list
{
	display: inline-block;
	position: relative;
	left: 0px;
}

ul#thumb-list li
{
	overflow: hidden;
	float: left;
	display: inline;
	background: #000;
	margin: 0;
	width: 150px;
	height: 108px;
	cursor: pointer;
}

ul#thumb-list li img 
{
	width: 200px;
	height: auto;
	opacity: 0.6;
	transition: all 0.1s ease-in-out;
}

ul#thumb-list li.current-thumb img,
ul#thumb-list li:hover img
{
	opacity: 1;
}

#controls
{
	overflow: hidden;
	text-align: left;
	height: 100%;
	position: relative;
	z-index: 5;
}

#slidecounter,
#slidecaption
{
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 40px;
	text-shadow: 0 0 3px rgba(0,0,0, 0.9);
}

#slidecounter
{
	float: left;
	margin: 0px 10px 0 15px;
}

#slidecaption
{
	float: left;
	overflow: hidden;
	margin: 0 20px 0 0;
}

#photos
{
	display: table;
	width: 100%;
	margin: 10px 0 0;
}

#photos li
{
	float: left;
	text-align: center;
	list-style: none;
	margin: 5px;
}

#photos a
{
	display: inline-block;
	color: #444;
	text-decoration: none;
	border: 2px solid #666;
	transition: all ease 0.4s 0.1s;
}

#photos a:hover
{
	border-color: #999;
}

#photos img
{
	float: left;
	width: 240px;
	height: 135px;
}
/*
#navigation
{
	float: right;
	margin: 0px 20px 0 0;
}
*/