@charset "utf-8";
/* CSS Document */

body{	
	margin:0;
	padding:0;
	background:#212121 /*url(../img/back.jpg) center repeat-y*/;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	color:#fff;
	line-height:1.5em;
}


img{
	border:0;
}

div{
	margin:0;
	padding:0;
}

p{
	margin:6px;
	padding:0px;
}

/*HEADINGS*/

h1{
	margin:6px;
	padding:0;
	font-size:24px;
	font-weight:normal;
	line-height:normal;
}
h2{
	margin:6px;
	padding:0;
	font-size:22px;
	font-weight:normal;
	line-height:normal;
}
h3{
	margin:6px;
	padding:0;
	font-size:18px;
	font-weight:normal;
	line-height:normal;
}
h4{
	margin:6px;
	padding:0;
	font-size:16px;
	font-weight:normal;
	line-height:normal;
}
h5{
	margin:6px;
	padding:0;
	font-size:14px;
	font-weight:normal;
	line-height:normal;
}


/*-----------LAYOUT---------*/
#container{
	position:relative;
	width:950px;
	margin:auto;
	background:#212121 url(../img/back.jpg) center repeat-y;
}

#leftContent{
	float:left;
	width:33.4%;
	color:#ccc;
	/* sidebar_back.jpg is 465px tall and anchored to the bottom of this
	   column. While the footer lived in the sidebar the column was always
	   taller than that; with the footer moved out it dropped to 383px, which
	   clipped the top curl of the flourish. Hold the column at the image's
	   own height so the whole ornament shows. */
	min-height:465px;
	background:#212121 url(../img/sidebar_back.jpg) right bottom no-repeat;
}


#rightContent{
	float:left;
	width:59.78%;
	padding:15px;
	color:#666;
}

#rightContentHome{
	float:left;
	background:url(../img/shelf.jpg) center top no-repeat;
	width:63.22%;
	height:650px;
	position:relative;
}

#homeContent{
	position:absolute;
	top:390px;
	left:10px;
	width:95%;
	height:240px;
	overflow:hidden;
}

#footer{
	/* The theme always styled this clear:both, but sidebar.php rendered it
	   inside the left column, where it sat on top of the flourish. It now
	   runs the full width of the container, below the content -- which means
	   it sits on the white half of back.jpg, so it takes the content area's
	   #666 rather than the sidebar's #ccc. The link needs no rule of its own:
	   the global a:link colour is already #666. */
	clear:both;
	color:#666;
	font-size:.85em;
	text-align:right;
	/* back.jpg is 950px wide and its white strip runs from x=318 to x=915,
	   leaving a dark margin down the right-hand side. A plain 20px of padding
	   put the right-aligned text at x=930, i.e. 15px onto that dark margin.
	   These insets keep the whole line inside the white. */
	padding:20px 50px 20px 330px;
}

#footer a:hover,
#footer a:active{
	color:#212121;
}

#footer .sep{
	padding:0 8px;
	color:#aaa;
}

#logos{
	position:relative;
	clear:both;
	float:right;
	padding-right:20px;
	width:90%;
}



/*---------MENU--------*/

.menu{
	list-style:none;
	float:right;
	text-align:right;
	font-size:1.2em;
	padding-bottom:50px;
}

.menu li ul, .menu li ul li {
	list-style:none;
}



.menu li ul ul {
	list-style:none;
	margin:0;
	padding:0;
	
}

.menu li{
	padding:15px 0px 15px 15px;
	
}


.menu a:link{
	text-decoration:none;
	color:#ccc;
	padding:5px 20px 15px 15px;

}

.menu a:visited{
	text-decoration:none;
	color:#ccc;
	padding:15px 20px 15px 15px; 
}

.menu a:hover{
	text-decoration:none;
	color:#fff;
	background:url(../img/menu_hover.jpg) right repeat-y;
	padding:15px 20px 15px 120px;
}

.menu a:active{
	text-decoration:none;
	color:#ccc;
	background:url(../img/menu_hover.jpg) right repeat-y;
	padding:15px 20px 15px 120px;
	
}

#current a{
	text-decoration:none;
	color:#fff;
	background:url(../img/menu_hover.jpg) right repeat-y;
	padding:15px 20px 15px 120px;
	
}
.menu li.current_page_item a
{
	text-decoration:none;
	color:#fff;
	background:url(../img/menu_hover.jpg) right repeat-y;
	padding:15px 20px 15px 120px;
	
}





/*---------LINKS-------*/

a:link{
	text-decoration:underline;
	color:#666;
}

a:visited{
	text-decoration:underline;
	color:#666;
}

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

a:active{
	text-decoration:underline;
	color:#666;
}

/*----------CLASSES----------*/

.clear{
	clear:both;
}

.floatLeft{
	float:left;
}

.floatRight{
	float:right;
}






/* ==========================================================================
   Rules below were supplied by the WordPress plugins (NextGEN Gallery and
   Contact Form 7) rather than by the theme. They are copied here, at the
   values measured off the live site, so the static pages render identically
   once those plugins are gone.
   ========================================================================== */

/*---------HEADING SEMANTICS--------*/
/* WordPress used an <h2> for the page title and bold paragraphs for the
   sections inside it, so every inner page had no <h1> at all and the sections
   had no heading. The markup now uses <h1> for the page title and <h2> for
   the sections. These two rules give them the sizes they rendered at before,
   so nothing moves on the page. */

.post h1{
	font-size:22px;   /* the size the theme's h2 rule gave the page title */
}

.entry h2{
	font-size:1em;    /* the sections were <p><strong>: body size, bold */
	font-weight:bold;
	line-height:1.5em;
}

/*---------SIDEBAR LOGO--------*/
/* The theme's XHTML 1.0 Transitional doctype put browsers in "almost
   standards" mode, which drops the descender gap under an inline image. This
   file uses the modern doctype, so the gap is removed explicitly instead --
   without it the menu below the logo sits about 5px lower than on the
   WordPress site. */

#leftContent img{
	vertical-align:bottom;
}

/*---------GALLERY (was NextGEN Gallery)--------*/

.ngg-galleryoverview{
	margin:10px 0 0;
	overflow:hidden;
}

.ngg-gallery-thumbnail-box{
	float:left;
	width:120px;
	height:95px;
}

.ngg-gallery-thumbnail{
	display:block;
	width:108px;
	height:83px;
	margin:5px;
	border:1px solid darkgray;
	background:#fff;
	text-align:center;
}

.ngg-gallery-thumbnail a{
	display:block;
	width:100px;
	height:75px;
	margin:4px;
	text-align:center;
}

.ngg-gallery-thumbnail img{
	display:block;
	max-width:100%;
}

.slideshowlink{
	display:block;
}

/*---------LIGHTBOX--------*/
/* Additive: the WordPress site sent you straight to the raw .jpg. Each
   thumbnail still links to its full image, so with JavaScript off the
   behaviour is exactly what it was. Delete assets/js/lightbox.js and its
   <script> tags to go back to that. */

#lightbox{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.96);
	z-index:9999;
	display:none;
}

#lightbox.open{
	display:block;
}

#lightbox figure{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	margin:0;
	max-width:90%;
	max-height:90%;
	text-align:center;
}

#lightbox img{
	max-width:100%;
	max-height:80vh;
	display:block;
	margin:0 auto;
}

#lightbox figcaption{
	color:#ccc;
	padding-top:10px;
	font-size:1.1em;
}

#lightbox button{
	position:absolute;
	background:none;
	border:0;
	color:#ccc;
	font-size:40px;
	line-height:1;
	cursor:pointer;
	padding:10px 18px;
	font-family:Arial, Helvetica, sans-serif;
}

#lightbox button:hover{
	color:#fff;
}

#lb-close{
	top:10px;
	right:10px;
	font-size:34px;
}

#lb-prev{
	top:50%;
	left:0;
	transform:translateY(-50%);
}

#lb-next{
	top:50%;
	right:0;
	transform:translateY(-50%);
}

#lb-count{
	position:absolute;
	top:20px;
	left:20px;
	color:#888;
}

/*---------CONTACT FORM (was Contact Form 7)--------*/
/* Contact Form 7 shipped no styling for these controls; the browser
   defaults below are what the live form actually renders as. */

/* Contact Form 7 used a style attribute here; a class instead means the
   Content-Security-Policy can forbid inline styles. */
.hidden-fields{
	display:none;
}

.wpcf7-form p{
	margin:6px;
}

.wpcf7-response-output{
	margin:6px;
	padding:8px;
	display:none;
}

.wpcf7-response-output.sent{
	display:block;
	border:2px solid #398f14;
}

.wpcf7-response-output.failed{
	display:block;
	border:2px solid #b00;
}

/* ==========================================================================
   MOBILE FALLBACK
   The original theme is a fixed 950px desktop layout with no mobile support.
   Everything below only applies under 950px, so the desktop design is
   untouched. Delete this whole block to get the original behaviour back.
   ========================================================================== */

@media screen and (max-width:949px){

	#container{
		width:auto;
		max-width:950px;
		background-image:none;
	}

	#leftContent{
		float:none;
		width:auto;
		/* the image is scaled down here, so the desktop floor does not apply */
		min-height:0;
		background-position:left bottom;
		background-size:auto 70%;
		overflow:hidden;
	}

	#leftContent > div[align="right"]{
		text-align:center;
	}

	#leftContent > div[align="right"] img{
		/* The full-size logo is 300px tall-ish and would eat the whole first
		   screen on a phone before any content shows. */
		width:220px;
		max-width:70%;
		height:auto;
	}

	.menu{
		float:none;
		text-align:center;
		padding:0 0 20px;
		margin:0;
	}

	.menu li{
		padding:0;
	}

	.menu a:link,
	.menu a:visited{
		display:block;
		padding:12px 10px;
	}

	.menu a:hover,
	.menu a:active,
	#current a,
	.menu li.current_page_item a{
		padding:12px 10px;
		background-position:center;
	}

	#rightContent{
		float:none;
		width:auto;
		padding:15px;
		background:#fff;
	}

	#rightContentHome{
		float:none;
		width:auto;
		height:auto;
		min-height:320px;
		background-size:cover;
	}

	#homeContent{
		position:relative;
		top:auto;
		left:auto;
		width:auto;
		height:auto;
		padding:200px 15px 30px;
		background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.75) 45%);
	}

	#footer{
		/* #container loses back.jpg at this width and is flat #212121, so
		   the footer goes back to light text. */
		text-align:center;
		padding:18px 20px;
		color:#ccc;
	}

	#footer a:link,
	#footer a:visited{
		color:#fff;
	}

	/* One segment per line rather than a single sentence wrapping mid-phrase. */
	#footer > span{
		display:block;
		padding:2px 0;
	}

	#footer .sep{
		display:none;
	}

	.ngg-gallery-thumbnail-box{
		float:none;
		display:inline-block;
		vertical-align:top;
	}

	.ngg-galleryoverview{
		text-align:center;
	}

	input[type="text"],
	input[type="email"],
	textarea{
		width:100%;
		max-width:100%;
		box-sizing:border-box;
		font-size:16px;
	}
}