/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* apply a natural box layout model to all elements }*/
* {
 	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
}

body {
background: url(../images/background.png) repeat #1a1a16;
}

/* Page Construction  
================================================= */
 .navigation {

 }
 
 /* Box behind text */
 .content_box {
	background-color: #e1e1e1;
	display: block;
}

/* Box which contains list of blog posts */
.article_list {
	float:left;
	width: 720px;
	}

/* Box which contains individual blog posts */
.article_box {
	width: 720px;
	}
	
.article {
	margin-top: 12px;
	}
	
.articles_sidebar {
	background-color: #e1e1e1;
	}

.photoblog {
	background-color: #111111;
	}
	
.photoblog .content {
		width: 720px;
		float:left;
	}
	
.photoblog .sidebar {
	}
	
.post {
	margin-left: 0px;
	padding-left: 0px;
}

#footer_area {
	padding-top: 12px;
	}
 /* Layout Elements 
================================================= */
 
.clear_spacer {
	height: 18px;
}
 
.orange_spacer {
	height: 18px;
	background-color: #eb9c4d;
 }
 
.sidebar .orange_spacer {
	height: 6px;
}

.post_content_spacer {
	height: 17px;
}
 
.bottom_spacer {
	height: 7px;
 }
 
.sidebar_top_spacer {
	height: 30px;
 }
 
/* Bands
================================================== */
 .band.navigation {

}

 /* Image Styles 
================================================= */

#headerImage  {
	overflow: hidden;
    white-space: nowrap;
	height: 180px
} 

#headerImage img {
    max-width: 100%;
    height: auto;
}

#headerImage .letter {
	width: 140px;
	height: 180px;
}

#headerImage .photo {
	
}

.article img {
	max-width:100%;
	height: auto;
	margin: 12px auto 12px auto;
	display: block;
	}
	
.article .vvqbox {
	position: relative;
	max-width:100%;
	height:56.25% !important;
	width: auto !important;
	margin: 12px 0 12px 0;
	padding: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	}
	
.article .vvqbox iframe,
.article .vvqbox object,
.article  .vvqbox embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

/* Allows images in the preview layout to align nicely */
.previews {
	/*font-size:0px;8*/
	letter-spacing: -1px;
	padding: 0px;
	line-height: 0px;
	}

.previews img {
	padding: 0px;
	margin: 0px;
	/*line-height: 0px; */
	border:  0px;
	height: auto;
}

.imgWrap {
	position: relative;
	float: left;
	letter-spacing: -1em;
	padding: 0px;
	margin: 0px;
	/*line-height: 0px; */
	border:  0px;
}

.imgDescription {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	color: #fff;
	visibility: hidden;
	display: block;  
	background-color: rgba(0,0,0,0.4);   
	z-index: 100;
	opacity: 0;
}

.imgWrap:hover .imgDescription {
  visibility: visible;
  opacity: 1;
}

.imgWrap:hover .previews  img {
  visibility: hidden;
  opacity: 0;
}

.socialmediaicons {
	font-size: 0px;
	letter-spacing: -1px;
	padding: 0px;
	line-height: 0px;
	}

.socialmediaicons  img {
	padding: 0px;
	margin: 6px 10px 2px 0px;
	/*line-height: 0px;*/
	border:  0px;
}

/* Photoblog styles
================================================= */

.photoblog .listview {
   line-height: 0; /* Prevent vertical gaps */
   -webkit-column-count: 3;
   -webkit-column-gap:   0px;
   -moz-column-count:    3;
   -moz-column-gap:      0px;
   column-count:         3;
   column-gap:           0px;
   margin-top: 6px;
   margin-left:5px;
   margin-right:-5px;
   margin-left: 5px;
   background-color: #000000;
}

.photoblog .listview img {
  padding: 6px 5px 6px 5px;
}

.photoblog .singleview {
	background-color: #000000;
	text-align:center;
}

.photoblog .singleview img {
	width:auto;
	height:auto;
	max-width: 720px;
	max-height: 675px;
	margin-bottom: 0; /* Because of mysterious black line at bottom of images */
}

.related_images {
	text-align:left;
}

.photoblog .navigation_spacer {
	height:10px;
}

.toggler {
	cursor: pointer;
}

.slider{
	height: 240px;
}
.collapseSlider{
	display:none;
}
.sliderExpanded .collapseSlider{
	display:inherit;
}
.sliderExpanded .expandSlider{
	display:none;
}

.photoblog .arrow-box {
	margin:0 0 3px 10px;
}

.photoblog .arrow {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 3px 5px 3px 0;
	display:inline-block;
	vertical-align: middle;
	border-color: transparent white transparent transparent;
	-webkit-transform:rotate(360deg);
}


.photoblog .sliderExpanded .arrow {
	border-width: 5px 3px 0 3px;
	display:inline-block;
	border-color: white transparent transparent transparent;
}

.related {
	height:60px;
}


 /* Text Styles 
================================================= */

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

h1 {
	font-family: 'Bree Serif', serif;
	font-size: 2.625em; /* = 42px/16px */
	line-height: 1.15em; /* = 49px/42px */
}

h1 a {
	text-decoration:none;
}

h1 a:hover {
	text-decoration:underline;
	}

p, ol, ul{
	font-family: 'Open Sans', sans-serif;
	font-weight:lighter;
}

.imgDescription p {
	font-family: 'Bree Serif', serif;
	font-size: 1.687em; /* = 27px/16px */
	line-height: 1.333em; /* = 36px/27px */
	margin-bottom: 12px;
	margin-top: 24px;
	margin-left: 20px;
	letter-spacing:0em;
	font-weight:normal;
	vertical-align:middle;
	color:#fff;
	visibility: visible;
}

.article h1 {
	margin-top: 6px; 
	margin-bottom: 7px;
}

.article  p, ol, ol li, ul, ul li{
	font-size: 1em; /* = 16px/16px */
	line-height: 1.75em; /* = 24px/16px */
	margin-bottom: 12px;
	font-weight:normal;
}

.article ul {
	list-style: square inside;
}

.article  p a:hover{
	text-decoration:none;
}


.sitemap ul {
	list-style: none;
}


.article  h4 {
	font-family: 'Open Sans', sans-serif;
	font-size: 1em; /* = 16px/16px */
	line-height: 1.714em; /* = 24px/14px */
	font-weight:lighter;
	text-transform: uppercase;
	margin-bottom: 2px;
}
	
h2 {
	font-family: 'Bree Serif', serif;
	font-size: 24px; /* = 24px/16px */
	line-height: 30px; /* = 32px/24px */
	margin-bottom: 6px;
	}
	
h3 {
	font-family: 'Bree Serif', serif;
	font-size: 18px; /* = 24px/16px */
	line-height: 24px; /* = 32px/24px */
	margin-bottom: 6px;
	}
	
.blog_navigation {
	margin-bottom: 24px;
}
	
.blog_navigation a{
	text-decoration: none;
}
	
.photoblog .sidebar  h1,
.photoblog .sidebar  h2,
.photoblog .sidebar  h3,
.photoblog .sidebar  p,
.photoblog .sidebar  ul,
.photoblog .sidebar ul li{
	color:#fff; 
}

.related_images h2 {
	color:#fff;
	line-height: 60px;
}


.photoblog .sidebar p {
	font-size: 1.125em; /* = 18px/16px */
	line-height: 1.333em; /* = 32px/24px */
	margin-bottom: 6px;
	font-weight: normal;
}

.photoblog .sidebar a {
	color:#fff;
	text-decoration: none;
}

.photoblog .sidebar h2 {
	margin-top: 24px;
}

.photoblog .sidebar h3 {
	margin-bottom: 19px;
}

.photoblog .sidebar .archive_links h3 {
	margin-top:22px;
}

.photoblog .sidebar .options {
	margin-left: 10px;
}

.photoblog .sidebar a:hover {
	cursor: pointer;
	text-decoration: underline;
	}
	
.sidebar h2 {
	margin-bottom: 7px;
	}
	
.sidebar  ul {
	margin: 0 0 9px 0;
	}
	
.sidebar  ul li{
	margin: 0;
	}

.sidebar  ul,
.sidebar  ul li  {
	font-family: 'Open Sans', sans-serif;
	font-size: 1em; /* = 16px/16px */
	line-height: 2.15em; /* = 30px/16px */
	}
	
.sidebar  ul li a{
	text-decoration: none;
}

.sidebar  ul li a:hover {
	cursor: pointer;
	text-decoration: underline;
	}
	
.footer h2 {
	font-family: 'Bree Serif', serif;
	font-size: 1.687em; /* = 27px/16px */
	line-height: 1.333em; /* = 36px/27px */
	margin-bottom: 12px;
}

.leader h1 {
	margin-top: 23px;
}

.leader  p{
	font-size: 1.687em; /* = 27px/16px */
	line-height: 1.555em; /* = 42px/27px */
	margin-bottom: 12px; 
}

p.footer {
	font-size: 1em; /* = 16px/16px */
	line-height: 1.75em; /* = 28px/16px */
}

/* Form Styles
================================================== */

.searchbox {
	margin-left:-10px;
	margin-bottom: 25px;
}
.searchbox input {
	width:180px;
	height:30px;
	padding-left: 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em; /* = 16px/16px */
	background-color: #e1e1e1;
	margin-bottom: 0px; 
	}
	
#contactme input.url  {
	display:none;
}

.photoblog .searchbox input {
	color: #fff;
	font-weight: lighter;
	font-size: 1.125em;
	line-height: 1.333em;
	margin-bottom: 6px;
	background-color: #111111;
	border:1px solid rgba(125,125,125,0.5);
	}

.error{
    padding: 5px 9px;
    border: 1px solid red;
    color: red;
    border-radius: 3px;
}
 
.success{
    padding: 5px 9px;
    border: 1px solid green;
    color: green;
    border-radius: 3px;
}
 
form span{
    color: red;
}

/* Navigation Styles
================================================== */
 nav.primary ul,
 nav.primary ul li {
	margin: 0px;
	}
	
nav.primary select {
	display:none;
	width: 100%;
	margin: 6px 0px 6px 0;
	height: 24px;
}

nav.primary ul li {
	display: inline;
	float: left;
	position: relative;
}

nav.primary ul li a{
	font-family: 'Bree Serif', serif;
	text-align: justify;
	display: inline-block;
	line-height: 42px;
	padding-right:50px;
	font-size: 24px;
	text-transform: uppercase;
	text-decoration: none;
	/* letter-spacing: 0.08em; */
	color: #e1e1e1;
}

nav.primary ul li a:hover {
	color: #f5f5f5;
	cursor: pointer;
	}

nav.primary ul li.current-menu-item a {
	color: #ffffff;
}

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		nav.primary ul li a{
			font-size: 18px;
		}
		
		.article_list {
			width: 600px;
		}
		
		.article_box {
			width: 600px;
		}
		
		.photoblog .content {
			width: 576px;
		}
		
		.searchbox input {
			width: 140px;
		}
		
		.sidebar .offset-by-one {
			padding-left: 0px;
		}
		
		.photoblog .listview img {
			width:190px;
			height:auto;
		}
		
		.photoblog .singleview img {
			max-width: 576px;
		}
		
		.photoblog .singleview .related_images img {
			width:96px;
		}

		.sidebar  ul li a{
			 font-size: 0.825em; /* = 16px/16px */
		}
		
		.article img {
			max-width: 480px;
		}
		
		.article .vvqbox {
			width: 480px !important;
		}
			
		.previews  img {
			width: 256px;
		}
		
		.imgDescription p {
			font-size: 1.375em; /* = 22px/16px */
			line-height: 1.09em; /* = 24px/22px */
		}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
		body {
			background: #e1e1e1;
		}		
	
		nav.primary select {
			display:block;
		}
			
		nav.primary ul {
			display:none;
		}
		
		.article img {
			max-width: 412px;
		}
		
		.article .vvqbox {
			width: 412px !important;
		}
		
		.photoblog h2 {
			color: black;
		}
		
		.photoblog, .photoblog .singleview {
			background-color: #e1e1e1;
		}
		
		.photoblog .content {
			width: 420px;
		}
		
		.photoblog .singleview img {
			max-width: 420px ;
		}
		
		.photoblog .singleview .related_images img {
			width:70px;
		}
		
		.photoblog .listview {
			-webkit-column-count: 2;
			column-count: 2;
			margin: 0;
		}
		
		.photoblog .listview img {
			padding: 0;
			width: 210px;
			height: auto;
		}
		
		.sidebar {
			display:none;
		}
		
		.previews  img {
			width: 140px;
		}
		
		.imgDescription p {
			font-size: 0em; /* = invisible */
			/*line-height: 0em;  = invisible */
		}
	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {

	
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	
		body {
			background: #e1e1e1;
		}
		
		#headerImage {
			height: 128px;
		}
		
		#headerImage img {
			width: 100px;
		}
		
		#headerImage .letter {
			width: 100px;
			height: auto;
		}
		
		.article img {
			max-width: 300px;
		}
		
		.photoblog .content {
			width: 300px;
		}
		
		.photoblog .singleview img {
			max-width: 300px ;
		}
		
		.photoblog .singleview .related_images img {
			width:50px;
			height: auto;
		}
		
		.photoblog .listview img {
			width: 150px;
		}
		
		.article .vvqbox {
			width: 300px !important;
		}
	
		.previews  img {
			width: 100px;
		}
		
		.imgDescription p {
			font-size: 0em; /* = invisible */
			/*line-height: 0em;  = invisible */
		}
	
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/