/*
Theme Name: Alpine
Theme URI: http://wordpress.org/themes/alpine
Author: Phillip Gooch
Author URI: mailto:phillip.gooch@gmail.com
Description: Alpine is a clean, minimal, and customizable theme designed with readability in mind. Flexible, responsive layout provies an easily readible page on any size screen. Looking for another customization option? Bugs reports and features suggestions always welcome.
Version: 1.0.1
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Tags: black, white, red, one-column, fluid-layout, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, theme-options, sticky-post, translation-ready
Text Domain: alpine
*/

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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky,.bypostauthor,.wp-caption,.wp-caption-text,.gallery-caption,.alignright,.alignleft,.aligncenter{zoom:1;}

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing:    border-box;
   box-sizing:         border-box;
}
body#tinymce{
	padding: 0 1em!important;
}

/* color definitions */
$background:#fefefe;
$color:#020202;

/* General Styles (including text and image styles) */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700|Roboto+Slab);
body{
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Sans-Serif;
	font-size:16px;
	background-color:$background;
	color:$color;
	line-height: 1.5em
}
#wrapper{
	max-width: 1000px;
	margin: auto;
	padding: 0 2em;
	@media screen and (max-width: 700px) {
		padding: 0 1.25em;
	}
	@media screen and (max-width: 425px) {
		padding: 0 .75em;
	}
}

// Lots of things are going to get the same margin for consistency, that margin is set here (also used for badding sometimes)
$margin:1.25em;
p{
	margin:$margin 0
}
ul{
	list-style: square;		
}
ol{
	list-style: decimal;
}
ul,ol{
	margin:$margin 0;
	li{
		margin:($margin/2) 0 ($margin/2) ($margin*1.25);
		ul,ol{
			margin:0;
		}
	}
}
blockquote{
	font-size: 1.25em;
	line-height: 1.5em;
	font-style: italic;
	padding: 0 .5em;
	opacity: .5;
}
cite{
	font-style: italic;
}
table{
	width:100%;
	margin:$margin 0;
	th,td{
		padding:($margin/2);
	}
	th{
		font-weight:bold;
		text-align:left;
	}
	tr:nth-child(even){
		background-color:rgba($color,.05);
	}
	tbody{
		border-collapse: collapse;
		td,th{
			border: 1px solid rgba($color,.1);
		}
	}
}
dl{
	margin:$margin;
	dt{
		font-weight: bold;
		margin:$margin 0 0 0;
	}
	dd{
		margin:($margin/4) 0;
	}
}
strong,b{
	font-weight:bold;
}
del,strike{
	text-decoration: line-through;
}
em,i{
	font-style: italic;
}
ins{
	text-decoration: underline;
}
address{
	font-style: italic;
}
abbr,acronym{
	border-bottom: 1px dotted mix($background,$color);
}
big{
	font-size: 1.25em;
}
cite{
	font-style:italic;
}
code,kbd,tt{
	font-family: monospace;
	word-wrap: break-word;
}
pre{
	font-family: monospace;
	white-space: pre;
	background: rgba($color,.05);
	padding: ($margin*.75);
	overflow: scroll;
}
q:before { 
    content: '"';
}

q:after { 
    content: '"';
}
sub{
	font-size:.75em;
	vertical-align: sub;
}
sup{
	font-size:.75em;
	vertical-align: super;
}
var{
	font-style: italic;
}
h1,h2,h3,h4,h5,h6{
	font-weight:bold;
	margin:$margin 0;
	font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Sans-Serif;
}
h1{
	font-size:1.8em;
}
h2{
	font-size:1.65em;
}
h3{
	font-size:1.5em;
}
h4{
	font-size:1.35em;
}
h5{
	font-size:1.2em;
}
h6{
	font-size:1.05em;
}
a{ // This item can be overriden by the customizer
	text-decoration: none;
	color:#FF0000;
	&:hover{
		text-decoration: underline;
	}
}
img,.wp-caption{
	max-width:100%;
	height:auto;
	&.alignleft{
		float:left;
		padding-right: $margin;
	}
	&.alignright{
		float:right;
		padding-left: $margin;
	}
	&.aligncenter{
		float:none;
		display:block;
		margin:auto
	}
}
.wp-caption{
	p{
		display:block;
		margin:0;
		font-size:.85em;
		font-style: italic;
		margin-top: -.3em;
	}
}
// For image galleries
div.gallery{
	&.gallery-columns-1  dl.gallery-item{ width:100%;  }
	&.gallery-columns-2  dl.gallery-item{ width:50%;   }
	&.gallery-columns-3  dl.gallery-item{ width:33.3%; }
	&.gallery-columns-4  dl.gallery-item{ width:25%;   }
	&.gallery-columns-5  dl.gallery-item{ width:20%;   }
	&.gallery-columns-6  dl.gallery-item{ width:16.6%; }
	&.gallery-columns-7  dl.gallery-item{ width:14.2%; }
	&.gallery-columns-8  dl.gallery-item{ width:12.5%; }
	&.gallery-columns-9  dl.gallery-item{ width:11.1%; }
	&.gallery-columns-10 dl.gallery-item{ width:10%;   }
	dl.gallery-item{
		margin:0;
		padding:$margin/2;
		.wp-caption-text{
			display:block;
			margin:0;
			font-size:.85em;
			font-style: italic;
			margin-top: -.3em;
			text-overflow:ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
}
// For posts with the type image
article.format-image{
	.wp-caption{
		display:inline-block;			
	}
	section{
		text-align: center;
	}
}
article.post.format-image .wp-post-image{
	margin-bottom: $margin;
}

/* Header Styles */
#header{
	h1{
		margin:0;
		padding:0;
		font-size:1em;
		font-weight: normal;
	}
	#branding{
		text-align:center;
		padding: 5em;
		#site-title{
			font-size:2em;
			line-height: 1.25em;
			a{
				text-decoration: none;
				color: inherit;
				font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Sans-Serif;
			}
		}
		#site-description{
			font-size: 1.25em;
			font-style:italic;
			padding-top:.5em;
			opacity:.5;
			display: block;
		}
	}
}

/* Menu styles */
#menu{
	#search{
		float:right;
		border-top: 3px solid black;
		margin-top: -3px;
	}
	border-top: 3px solid $color;
	border-bottom: 3px solid $color;
	> div{
		display:inline-block;
		&.clear{
			display:block;
			clear:both;
		}
	}
	a{
		text-decoration: none;
		color:$color;
	}
	ul{
		margin:0;
		display:inline-block;
		li{
			margin:0;
			display:inline-block;
			position:relative;
			a{
				padding: .75em .5em;
				display:inline-block;				
			}
			ul{
				display:none;
			}
			&:hover{
				a{
					background: $color;
					color:$background;
				}
				ul{
					display:block;
					position: absolute;
					top:100%;
					white-space: nowrap;
					li{
						display: block;
						a{
							width:100%;
						}
						ul{
							display:none;
						}
						&:hover{
							a{
								background: $background;
								color: $color;
							}
							ul{
								display: block;
								position: absolute;
								top:0%;
								left:100%;
								li{
									a{
										background: $color;
										color: $background;
									}
									&:hover{
										> a{
											background: $background;
											color: $color;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

}
/* The mobile menu */
#mobile-menu{
	-webkit-appearance:none ;
	font-size:1em;
	padding: .75em .5em;
	border: 3px solid $background;
	background: $background;
	border-radius: 0;
	cursor:pointer;
	display:none;
	&:hover{
		color:$background;
		background:$color;
		border-color:$color;
	}
}
/* Toggle which menu displays and how it displays at size */
@media screen and (max-width: 765px) {
	#mobile-menu{
		display:inline-block;
	}
	#desktop-menu{
		display:none!important;
	}
}
@media screen and (max-width: 567px) {
	#mobile-menu{
		display:inline-block;
		width:100%;
	}
}

/* Search Forms Styles (in menu) */
#search{
	z-index: 200;
	position: relative;
}
.search-form{
	height:100%;
	input {
		font-size: 1em;
		line-height: 1.5em;
		padding: .75em .5em;
		border-top:none;
		border-bottom:none;
		border-left: 3px solid $color;
		border-right: 3px solid $color;
		outline:none;
		-webkit-appearance:none ;
		margin:0;
	}
	input.search-field{
		margin-right: -.3em;
		border-right:none;
		border-radius:0;
	}
	input.search-submit{
		background: $background;
		color:$color;
		cursor:pointer;
		border-radius:0;
		&:hover{
			border-color:$color;
			color:$background;
			background-color:$color;
		}
	}
	// And for the special one used on page in the results
	&.outlined{
		display:inline-block;
		border-top: 3px solid $color;
		border-bottom: 3px solid $color;
	}
}

/* Post Styles */
#container{
	.post, .page{
		padding: 1em .5em 5em .5em;
		header{
			margin:$margin 0;
			.entry-title{
				font-size:2em;
				line-height: 1.25em;
				font-weight:200;
				margin:0 0 ($margin/4) 0;
				a{
					color:$color;
					-ms-word-wrap: break-word;
					word-wrap: break-word;
				}
			}
		}
		.wp-post-image.vertical{
			float:left;
			padding-right: $margin;
		}
		.wp-post-image.horizontal,.wp-post-image.square{
			display:block;
			margin:auto;
		}
		.entry-footer{
			clear:both;
			text-align: center;
			font-size: .8em;
		}
		.entry-meta{
			display:inline;
		}
	}
}

/* Navigation Styles (for navigation and things like the more link, pretty much everything but the menu */
#nav-below{
	div.nav-btn{
		font-size: 1.25em;
		font-weight:bold;
		font-family: 'Roboto Slab';
		padding: 0em 1em 3em 1em;
		max-width:50%;
		position: relative;
		&.nav-previous{
			float:left;
			text-align:left;
			.meta-nav{
				float:left;
				left:0;
			}
		}
		&.nav-next{
			float:right;
			text-align:right;
			.meta-nav{
				float:right;
				right:0;
			}
		}
		.meta-nav{
			position:absolute;
			top:0;
		}
	}
}
.more-link{
	font-style: italic;
	padding-left:$margin;
}
.entry-links, .paginated-comments-links{
	font-size: 1.25em;
	font-weight:bold;
	font-family: 'Roboto Slab';
	padding: 0em 1em 3em 1em;	
	text-align: center;
}

/* The password protected form */
#container{
	.post-password-form{
		font-size: 1.25em;
		text-align:center;
		margin: $margin 0;
		p{
			margin:0;
		}
		input{
			font-size: 1em;
		}
	}
}

/* Comment styles */
#container{
	#comments-list{
		> ul, ul.children{
			list-style:none;
			padding:0;
			> li{
			border-left:1em solid mix($background,$color,95);
				margin:$margin 0 $margin 0;
				div.comment-body{
					margin: 0 0 $margin $margin;
				}
			}
		}
		.comment-all-meta{
			img.avatar{
				float:left;
				padding-right: $margin/2;
				width: 55px;
				height: 45px;
			}
			cite a{
				font-size:1.25em;
			}
		}
		a.comment-reply-link{
			font-size:.8em;
		}
	}
	.comment-form-comment{
		margin-bottom:0;
		label{
			display:block;
		}
		textarea{
			width:100%;
		}
	}
	.form-allowed-tags{
		margin-top:0;
		font-size:.8em;
		padding: 0 $margin;
	}
	.form-submit input{
		font-size: 1.25em;
	}
}
#container ul li, #container ol li{
	//margin:0;
}
#respond{
	margin-bottom: $margin*5;
}

/* Widget Area */
#footer-widget-area{
	margin:0 0 $margin*3 0;
	padding:0;
	li.widget-container{
		margin:$margin/2 0;
		padding:0 $margin/2;
		display:inline-block;
		width:33.333%;
		vertical-align: top;
		h3.widget-title{
			font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Sans-Serif;
			font-size:1.5em;
			font-weight:bold;
		}
		// The stuff in most widgets
		> ul {
			font-size:.9em;
			// Styling for lists in widgets, seems to happen often
			li{
				margin:$margin/8 0em $margin/8 1.25em;
			}
		}
		@media screen and (max-width: 915px) {
			width:50%;
		}
		@media screen and (max-width: 630px) {
			width:100%;
		}
	}
}

/* The footer */
#footer{
	text-align:center;
	padding:$margin*4;
	#copyright{
		margin:$margin/2 0;
	}
	span.footer-contribution{
		font-size:.9em;
		display:inline-block;
		padding-top:$margin/3;
		opacity:.6;
	}
}