/*
	Theme Name: Instatheme
	Theme URI: http://halgatewood.com/instatheme
	Description: A simple, responsive wordpress theme for the square photography like Holga and Instagram.
	Author: Hal Gatewood
	Author URI: http://halgatewood.com
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Version: 1.5
	
	Version 1.5:
		- YouTube and Vimeo Support
	
	Version 1.4:
		- WordPress Menu Added (1 Level Depth)
		- Upload a Header Logo
		
	Version 1.3 Updates:
		- Widget Support (up to 5 widgets)
		- Easier Theme Options
		- WP-PAGENAVI Support
		- Page.php and Post without image support
		- Code clean-up, WordPress, PHP and CSS
	
	Version 1.2 Updates:
		- Added 404 page
		- Fixed page navigation for multisites
	
	All files, unless otherwise stated, are released under the GNU General Public License
	version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html)
*/


/* =CSS Reset & Clearfix (http://meyerweb.com/eric/tools/css/reset/)
/*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */

#content ol, #content ul { padding-left: 10px; margin-left: 20px; }
#content ol { list-style: decimal; }
#content ul { list-style: square; }

/*	=Document
/*-----------------------------------------------------------------------------------*/

body {
	font-size: 12px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   	font-weight: 300;
   	line-height: 20px;
	background-color: #373B35;
	background-image: url(images/noise.png);
}

input,
textarea {
	background: #efefef;
	color: #333;
	border: solid 1px #ccc;
}
input[type=text] { width: 40%; }
textarea { width: 90%; height: 100px;}
label { font-size: .9em; }

input[type=submit] {
	width: auto;
}
input[type=submit]:hover {
	background: #ccc;
	cursor: hand;
	cursor: pointer;
}

#header, .navigation a  { font-family: 'PT Sans', sans-serif; }

#header .site-title { 
	font-size: 1.6em;
	line-height: 1.8em;
}
#header .site-title img { max-width: 400px; }
#header .site-slogan { 
	font-size: 1.4em;
}

.navigation ul {
  list-style: none;
  margin: 15px;
}
.navigation li {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
}
.navigation a {
  display: inline-block;
  padding: 5px 15px;
  text-decoration: none;
  font-size: 1.3em;
}

.navigation a:hover { box-shadow: 0 0 7px rgba(0,0,0,0.5); text-decoration: none; }
    

.hide,
.hidden { display: none; }

body.single #content .alignleft,
body.single #content .alignright,
body.single #content .aligncenter { width: auto; margin: 5%; }


.alignleft 	{ float: left; width: auto; }
.alignright { float: right; width: auto; }
.aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
	clear: both;
	width: auto;
}

.clr,
.clear {
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
	width:100%;
}

.sticky {}
.wp-caption {}
.wp-caption-text {}
.gallery-caption {}
.by_author {}

a 		{ text-decoration: none;}
a:hover { text-decoration: underline; }
a img 	{ border: none; }

body.single #content a,
body.page #content a { font-weight: bold; }

p,
pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset,
form,
.gallery-row,
.post-thumb,
.author-bio,
#logo { margin-bottom: 20px; }

.hentry,
.navigation-links,
.hfeed,
.pinglist { margin-bottom: 40px; }

.widget
.children,
.entry-content ol ol,
.entry-content ol ul,
.entry-content ul ul,
.comment-body ol ol,
.comment-body ol ul,
.comment-body ul ul,
.widget ul ul { margin-bottom: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	padding: 5px 0;
}

h1 {
	font-size: 24px;
	line-height: 28px;
}

h2 {
	font-size: 20px;
	line-height: 22px;
}

h3 {
	font-size: 16px;
	line-height: 20px;
}

h4 {
	font-size: 14px;
	line-height: 18px;
}

h5 {
	font-size: 12px;
	line-height: 18px;
}

h6 {
	font-size: 10px;
	line-height: 16px;
}


/* STRUCTURE */
.site-title 			{ float: left; font-size: 2em; line-height: 1.0em; letter-spacing: -1px; }
.site-title a 			{ font-size: 2em; line-height: 1.0em; }
.site-title a:hover 	{ text-decoration: none; }
.site-slogan 			{ padding-top: 8px; float: right; font-size: 1.2em; }

#container {
	clear: both; 
	margin: 10px auto;
}
	
#primary { width: 100%; }
#content { }
body.single #content { max-width: 612px; margin: 0 auto; }

#header,
#footer { clear: both; margin: 15px; }
#footer a { padding: 0 1px; }
#footer a:hover { text-decoration: none; }

#footer .credit strong { display: block; font-size: 1.3em; line-height: 1.1em; }
#footer .credit { font-size: 0.9em; }

body.page h1 { font-weight: bold; }

/* THUMBS */
.instatheme_thumb { 
	float: left;
	width: 18%; 
	margin: 5px 1%;
}
.instatheme_thumb img { width: 100%; border: solid 1px #fff; }
.instatheme_thumb img:hover { box-shadow: 0 0 10px #3a3a3a; }
.instatheme_thumb .post_title { position: relative; overflow: hidden; font-family: 'PT Sans', sans-serif; }
.instatheme_thumb .the_title { position: absolute; top: 15px; left: 15px; width: 80%; font-size: 1.8em; font-weight: bold; line-height: 0.9em; }


.instatheme_thumb.has_video img {
	background-color: #000;
	background-position: top center;
	background-size: cover
}


/* SINGLE PAGE */
body.single {
	width: 90%;
	margin: 0 auto;
}

#single,
#page { max-width: 612px; margin: 0 auto; }
#page { padding: 0 4%; }

body #single iframe { width: 100%; height: 430px; }

#single img { width: 100%; height: auto; max-width: 612px; border: solid 1px #fff; }
body.single h1 { font-family: 'PT Sans', sans-serif; margin-top: 25px; }

#nav-single { margin-bottom: 15px; }
#nav-index { clear: both; width: 98%; margin: 0px auto; padding: 15px 0; }

.tags {
	font-size: 11px;
	padding: 10px 25px;
	text-transform: uppercase;
	margin-top: 15px;
}

.categories {
	font-size: 11px;
	padding: 10px 25px;
	text-transform: uppercase;
	margin-top: 2px;
}
.categories a { margin: 0 5px; }

.the_tag,
.the_category {
	background: rgba(255,255,255,0.2);
	padding: 10px 25px;
	text-transform: capitalize;
	margin: 15px;
	text-align: center;
	font-size: 22px;
}

body.single .comments {
	width: 98%;
	padding: 2% 1%;
	margin: 0 auto 25px auto; 
	background: rgba(255,255,255,0.1);
	border-top: solid 1px #fff;
}

.comments label { display: block; font-weight: 600; }

.comments input[type=text],
.comments textarea {
	width: 90%;
	padding: 5px;
	font-size: 1em;
}
.comments span.required { font-size: 2em; color: #962323; font-weight: bold; padding-right: 5px; line-height: 20px;}

#reply-title { padding-left: 25px; }

blockquote {
	width: 80%;
	padding: 5%;
	margin: 5%;
	border: solid 1px #ccc;
	font-size: 2.2em;
	line-height: 1.3em;
}

hr {
    border: 0;
    height: 1px;
    background: #ccc;
}

/* PAGINATION */
.wp-pagenavi { padding: 25px 0; text-align: center;  }


.nav-previous { display: block; float: left;  }
.nav-next { display: block; float: right; }

#nav-index .nav-previous {float: right; }
#nav-index .nav-next {float: left; }

.nav-previous a,
.nav-next a {
	padding: 4px 10px;
	background: #e4e4e4; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #e4e4e4 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(99%,#e4e4e4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e4e4e4 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#e4e4e4 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#e4e4e4 99%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#e4e4e4 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e4e4e4',GradientType=0 ); /* IE6-9 */
	border-radius: 15px;
	border: solid 1px #bfbfbf !important;
	color: #5a5a5a !important;
	text-transform: lowercase;
	font-size: 0.9em;
}

.nav-previous a:hover,
.nav-next a:hover {
	color: #3c3c3c !important;
	background: #f2f2f2 !important;
	text-decoration: none;
	box-shadow: 0 0 10px rgba(0,0,0,0.7);
}


/* COMMENTS */

.commentlist {
	margin: 20px 0 40px 0;
	list-style-type: none;
}

.pinglist {
	margin: 20px 0 40px 30px;
	list-style-type: decimal;
}

.comment {
	padding: 5%;
	margin-top: 10px;
	border-top: dotted 1px #fff;
}

#commentform {
	padding: 25px;
}

.avatar {
	padding: 2px;
	background: #fff;
	border: 0;
}
#commentform input { margin-right: 10px; }
#commentform textarea { width: 90%; }
.children { list-style-type: none; }
.comment .avatar { float: left; margin: 0 10px 0 0; }
.comment-meta { margin-bottom: 15px; }
.comment-author-admin { border: #efefef; }
.comment-author cite { font-weight: bold; }
.nocomments {text-align: center; padding: 20px;}
.comment-body ul { list-style-type: disc; }
.comment-body ol { list-style-type: decimal; }
.comment-body p { font-size: 18px; font-family: Georgia, serif; font-style: italic; }

.reply { text-align: right; padding-right: 10px;}
.reply a { border-radius: 5px; text-transform: lowercase; background: rgba(0,0,0,0.5); color: #fff !important; padding: 3px 7px; }
.reply a:hover { background: rgba(0,0,0,0.7);}

.children .reply { padding: 0; }


/* ASSISTIVE TEXT */
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
#access a.assistive-text:active,
#access a.assistive-text:focus {
	background: #eee;
	border-bottom: 1px solid #ddd;
	color: #1982d1;
	clip: auto !important;
	font-size: 12px;
	position: absolute;
	text-decoration: underline;
	top: 0;
	left: 7.6%;
}

/* TABLES */
table { width: 100%; margin: 10px 0; }
table th { text-align: left; padding: 5px 7px; border-bottom: solid 2px rgba(255,255,255,0.1); }
table td { padding: 5px 7px; }




/* DARK COLOR */
body.dark a,
body.dark #content,
body.dark #header,
body.dark #header a { color: #fff;  }

body.dark #footer,
body.dark #footer a { color: #fff;  }
body.dark #footer a { color: #fff; border-bottom: dotted 1px #fff; border-bottom: dotted 1px rgba(255,255,255,0.4); }
body.dark #footer a:hover { color: #fff; border-bottom: solid 1px #fff;  }

body.dark .commentlist .even, body.dark table { background:rgba(255,255,255,0.1); } 
body.dark .commentlist .odd{ background:rgba(255,255,255,0.2); } 
body.dark .wp-pagenavi a, body.dark .wp-pagenavi span {
	border: 1px solid #fff !important;
	border: 1px solid rgba(255,255,255,0.4) !important;
}
body.dark .wp-pagenavi a:hover { background: #fff; background: rgba(255,255,255,0.3); color: #000; }
body.dark .wp-pagenavi .current img { background: #fff; background: rgba(255,255,255,0.7); color: #000; }
body.dark .instatheme_thumb.no_image img { background: #fff; }
body.dark .instatheme_thumb.no_image a { color: #222222; }
body.dark blockquote { background: rgba(255,255,255,0.1); color: #fff; box-shadow: 0 0 10px #000; }

body.dark .navigation a {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border: solid 1px rgba(255,255,255,0.2);
  padding: 5px 15px;
  text-decoration: none;
  font-size: 1.3em;

}
body.dark .navigation a:hover {
   background: rgba(255,255,255,0.3);
}
body.dark .navigation a:active,
body.dark .navigation li.current-menu-item a {
   background: rgba(255,255,255,0.5);
}

body.dark .categories, 
body.dark .tags { background: rgba(255,255,255,0.2); }





/* LIGHT COLOR */
body.light a,
body.light #content,
body.light #header,
body.light #header a { color: #363636;  }

body.light #footer,
body.light #footer a { color: #363636;  }
body.light #footer a { color: #363636; border-bottom: dotted 1px #363636; border-bottom: dotted 1px rgba(54,54,54,0.6); }
body.light #footer a:hover { color: #363636; border-bottom: solid 1px #363636;  }

body.light .commentlist .even, body.light table { background:rgba(0,0,0,0.1); } 
body.light .commentlist .odd{ background:rgba(0,0,0,0.2); } 

.message { padding: 25px; width: 50%; margin: 55px auto; text-align: center; font-size: 1.5em; }
body.error404 .message { padding: 25px; width: 50%; margin: 55px auto; text-align: center;}

body.dark .message { background:rgba(0,0,0,0.2); }
body.light .message { background:rgba(255,255,255,0.2); }

body.light .wp-pagenavi a, body.light .wp-pagenavi span {
	border: 1px solid #999999 !important;
	border: 1px solid rgba(0,0,0,0.4) !important;
}
body.light .wp-pagenavi a:hover { background: #999999; background: rgba(0,0,0,0.3); color: #fff; }
body.light .wp-pagenavi .current { background: #999999; background: rgba(0,0,0,0.7); color: #fff; }
body.light .instatheme_thumb.no_image img { background:rgba(0,0,0,0.8); }
body.light .instatheme_thumb.no_image a { color:#fff; }

body.light blockquote { background: #999999; background: rgba(0,0,0,0.1); color: #363636; box-shadow: 0 0 5px #ccc; } 


body.light .navigation a {
  display: inline-block;
  background: rgba(255,255,255,0.7);
  border: solid 1px rgba(0,0,0,0.2);
  padding: 5px 15px;
  text-decoration: none;
  font-size: 1.3em;

}
body.light .navigation a:hover {
   background: #999999; background: rgba(0,0,0,0.3); color: #fff;
}
body.light .navigation a:active,
body.light .navigation li.current-menu-item a {
   background: rgba(0,0,0,0.5);
   color: #fff;
}

body.light .categories, 
body.light .tags { background: rgba(0,0,0,0.1); }



/* pagenavi .pages remove border */
body.dark .wp-pagenavi .pages,
body.light .wp-pagenavi .pages { border: none !important; }

/* FOOTER WIDGETS */
#footer-widgets { list-style: none; }

#footer-widgets h3.widget-title { font-weight: bold; }
#footer-widgets .widget_search label { display: block; }
#footer-widgets .widget_search input[type=text] { margin-bottom: 7px; }
#footer-widgets input[type=text] { width: 90%; padding: 2%; }
#footer-widgets .widget_calendar table { width: 100%; }
#footer-widgets .widget_calendar table caption { font-weight: bold; }

#footer-widgets.col-1 li.widget { width: 98%; margin: 25px 1%; float: left; }
#footer-widgets.col-2 li.widget { width: 48%; margin: 25px 1%; float: left; }
#footer-widgets.col-3 li.widget { width: 31%; margin: 25px 1%; float: left; }
#footer-widgets.col-4 li.widget { width: 23%; margin: 25px 1%; float: left; }
#footer-widgets.col-5 li.widget { width: 18%; margin: 25px 1%; float: left; }

#footer-widgets .twitter-widget li { padding-bottom:10px; }
#footer-widgets .twitter-widget li .twitter-date { font-size: 0.9em; }
#footer-widgets .twitter-widget li .twitter-date a { border: none; }

/* MEDIA QUERIES*/

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

	.instatheme_thumb { 
		float: left;
		width: 31%; 
		margin: 5px 1%;
	}
	
	
	#footer-widgets.col-4 li.widget { width: 46%; margin: 25px 2%; float: left; }
	#footer-widgets.col-4 li.widget:nth-child(3) { clear: both; }
	
	#footer-widgets.col-5 li.widget { width: 31%; margin: 25px 1%; float: left; }
	#footer-widgets.col-5 li.widget:nth-child(4) { clear: both; }
		
}

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

	.instatheme_thumb { 
		float: left;
		width: 48%; 
		margin: 5px 1%;
	}
	
	body #single iframe { width: 100%; height: 250px; }
	
	.site-title { float: none; text-align: center; display: block;}
	.site-title a { font-size: 1.6em; }
	.site-slogan { float: none; text-align: center; display: block; padding-top: 3px; font-size: 11px; }
  
  	#footer { width: 96%; margin: 15px 2%; }

	#footer-widgets.col-1 li.widget,
	#footer-widgets.col-2 li.widget,
	#footer-widgets.col-3 li.widget,
	#footer-widgets.col-4 li.widget,
	#footer-widgets.col-5 li.widget	 { width: 98%; margin: 25px 1% 0 1%; padding-bottom: 25px; float: left; border-bottom: solid 1px #fff; clear: both; }
} 

@media only screen and (max-device-width: 480px) {
  
	.instatheme_thumb { width: 48%; margin: 1%; }
  
	body.single {
		width: 90%;
		max-width: 90%;
		margin: 0 auto;
	}
  
}