/*
Design by TEMPLATED
http://templated.co
Released for free under the Creative Commons Attribution License
*/

* {
	margin: 0;
	padding: 0;
}

body {
	margin: 20px 0;
	background: #7a1d00 url(images/img01c.gif);
	font: normal small Arial, Helvetica, sans-serif;
	color: #111111;
}

h1, h2, h3, h4 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-style: italic;
	color: #7a1d00;
}

h2 {
}

h3 {
	font-weight: bold;
	font-size: 1.4em;
}

h4 {
	font-weight: bold;
	font-size: 1.1em;
}

p, blockquote, ul, ol {
}

p {
}

blockquote {
	padding-left: 3em;
	padding-right: 3em;
	background: url(images/quote.gif) no-repeat;
	text-align: justify;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #330c00;
}

ul {
	margin-left: 3em;
}

ul li {
}

ol {
	margin-left: 3em;
}

ol li {
}

a {
	color: #015388;
}

a:hover {
	text-decoration: none;
	color: #4d1200;
}

a.blank:after {
	content: ' \25BA';
}

a.download:after {
	content: ' \2193';
}

img {
	border: none;
	max-width: 100%;
	height: auto;
}

img.center {
	display: block;
	margin: 20px auto 20px auto;
}

img.left {
	float: left;
	margin: 2px 10px 2px 0;
}

img.right {
	float: right;
	margin: 2px 0 2px 10px;
}

.responsive {
	max-width: 100%;
	height: auto;
}

hr {
	margin: 20px auto 20px auto;
	max-width: 50%;
}


/* Post */

.post {
	padding: 20px 20px 0 20px;
}

.post .title {
	margin-bottom: 0px;
	padding: 0px 0 12px 0;
	border-bottom: 2px solid #CCCCCC;
	font-size: 2.2em;
}

.post .story {
	clear: both;
	padding: 20px 20px 0px 20px;
	border-top: 1px solid #EEEEEE;
}

.post .intro {
	clear: both;
	padding: 20px 20px 0px 20px;
}

.post .story p, .post .story blockquote, .post .story ul, .post .story ol, .post .intro p, .post .intro blockquote, .post .intro ul, .post .intro ol {
	margin-bottom: 1.2em;
	font-size: 1.1em;
	line-height: 1.4em;
}

/* Page */

#page {
	max-width: 940px;
	margin: 0 auto;
	background: #FFFFFF;
	border: 10px solid #330c00;
}

p.info {
	font-style: italic;
}

/* Logo */

#logo {
	height: 200px;
	background: url(images/img02.jpg);
	text-shadow: 1px 1px 1px #111111;
}

#logo h1 {
	padding: 50px 0 0 550px;
	letter-spacing: -1px;
	font-size: 3.2em;
	color: #FFFFFF
}

#logo h2 {
	margin-top: -4px;
	padding: 0 0 0 720px;
	font-size: 3em;
	color: #FFB199
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Content */

#content {
}

#content h2 {
	text-shadow: 1px 1px 1px #666666;
}

#extra {
}

/* Content > Main */

#main {
}

#main a {
}

/* Content > Main > Welcome */

#welcome {
}

/* Content > Main > Example */

#example {
}

/* Content > Menu */

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav {
	margin:0;
	padding: 0;
	background-color: #330c00;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: 1px 1px 1px #666666;
}

#menulogo {
	display: none;
	padding: 0 30px;
	float: left;
	font-size:20px;
	line-height: 60px;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: left;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}

/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display: inline-block;
	float: left;
	background-color: #330c00;
	}

/* Styling the links */
nav a {
	display: block;
	padding: 14px 20px;
	color: #FFFFFF;
	font-size: 12px;
	text-decoration: none;
}


nav ul li ul li:hover {
	background-color: #801e00;
	color: #FFFFFF;
}

/* Background color change on Hover */
nav a:hover {
	background-color: #801e00;
	color: #FFFFFF;
	text-decoration: underline;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute;
	/* has to be the same number as the "line-height" of "nav a" */
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display: inherit;
}

/* First Tier Dropdown */
nav ul ul li {
	width: 170px;
	float: none;
	display: list-item;
	position: relative;
}

/* Second, Third and more Tiers
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top: -60px;
	/* has to be the same number as the "width" of "nav ul ul li" */
	left:170px;
}


/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content: ' \25BC'; }
li > a:only-child:after { content: ''; }
li > a.blank:after { content: ' \25BA'; }
li > a.download:after { content: ' \2193'; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	#menulogo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Styling the toggle lable */
	.toggle {
		display: block;
		background-color: #330c00;
		padding: 14px 20px;
		color: #FFFFFF;
		font-size: 12px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #801e00;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #801e00;
	}

	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;
		color:#FFF;
		font-size: 12px;
	}


	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #661800;
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}

	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}

	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}


/* Footer */

#footer {
	clear: both;
	padding: 20px;
	background: #ebe7e6;
}

#footer p {
	margin: 0;
	font-size: 0.9em;
	color: #666666;
	text-align: center;
	line-height: 1.4em;
}

#footer a {
	color: #666666;
}

/* Footer > Legal */

#legal {
}

/* Footer > Links */

#links {
	font-style: italic;
}


/*****************************************************
  Poptrox
*****************************************************/

.poptrox_popup
{
	position: relative;
	padding: 1em 1em 3em 1em;
	background: #ffffff;
}

.poptrox_popup .loader
{
	display: block;
	margin: 55px 0 0 0;
	text-indent: -9999em;
	background: url('loader.gif') top center no-repeat;
}

.poptrox_popup .caption
{
	position: absolute;
	bottom: 1em;
	left: 1em;
	line-height: 180%;
}

.poptrox_popup .closer
{
	position: absolute;
	bottom: 1em;
	right: 1em;
}

/*****************************************************
  Lightbox
*****************************************************/

#lightbox {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}

#lightbox img {
	width: auto;
	height: auto;
}

#lightbox a img {
	border: none;
}

#outerImageContainer {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}

#imageContainer {
	padding: 10px;
}

#loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}

#hoverNav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}

#imageContainer>#hoverNav {
	left: 0;
}

#hoverNav a {
	outline: none;
}

#prevLink, #nextLink {
	width: 49%;
	height: 100%;
	background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
	display: block;
}

#prevLink {
	left: 0;
	float: left;
}

#nextLink {
	right: 0;
	float: right;
}

#prevLink:hover, #prevLink:visited:hover {
	background: url(images/prevlabel.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover {
	background: url(images/nextlabel.gif) right 15% no-repeat;
}

#imageDataContainer {
	font: 12px Arial, Helvetica, Verdana, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	;
}

#imageData {
	padding:0 10px;
	color: #333;
}

#imageData #imageDetails {
	width: 100%;
	float: left;
	text-align: left;
}

#imageData #caption {
	font-weight: bold;
}

#imageData #numberDisplay {
	display: block;
	clear: left;
	padding-bottom: 1.0em;
}			

#imageData #bottomNavClose {
	width: 66px;
	float: right;
	padding-bottom: 0.7em;
	outline: none;
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}

#poptrox {
	max-width: 900px;
	margin: 0px auto;
}

#gallery {
	overflow: hidden;
	margin: auto;
	padding: 0px;
	list-style: none;
}

#gallery li {
	float: left;
	margin: 0px;
	padding: 10px;
}

#gallery img {
	border: 3px solid #330c00;
	border-style: ridge;
}