/*
Theme Name: Terrill's Music Theme
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: Terrill Thompson
Author URI: http://terrillthompson.com/music
Description: Theme for Terrill Thompson's music site, a Terrill Thompson child theme
Template: terrill
Version: 1.4
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
*/

/* 
Last update: February 17, 2015
*/

@import url("../terrill/style.css");

/* =Theme customization starts here 
-------------------------------------------------------------- */

/* =Global
----------------------------------------------- */

body {
	background: #FFFFFF url('/images/baker.jpg') no-repeat top center fixed;
	background-size: cover;	
}


/* =Structure
----------------------------------------------- */

#page {
	max-width: 1000px;
	background-image: none;
}
#branding hgroup {
	margin: 0 200px;
	padding-left: 20px; 
}
#access div {
	margin: 0 5%; 
}
#primary {
	border-color: #000; 
}
#secondary {
	border-color: #000; 
}

/* =Header
----------------------------------------------- */

#branding {
	background: #333355 url('images/zendrum200.jpg') no-repeat top left; 
	min-height: 200px; /* height of background image */
	border-color: #000; /* was #506A81; */
	border-width: 3px;
	border-radius: 2em 2em 0 0;
	border-style: solid;
	margin: 0.75em 0;
	padding: 0;
	position: relative;
	width: 100%;
	z-index: 2; 
}
#site-title {
	padding: 1em 0 0.25em; 
	letter-spacing: 0.15em;
	margin-right: 0;
}
#site-title a {
	color: #FFFFFF; 
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 2px 2px 5px #333333; 
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	text-decoration: underline; 
}
#site-description {
	color: #FFF;
	font-size: 1.1em;
	margin: 0 0 1em;
	letter-spacing: 0.25em;
}
#branding img {
	height: auto;
	margin-bottom: -7px;
	width: 100%;
}

/* =Search Form 
-------------------------------------------------------------- */
#searchform {
	position: absolute;
	top: 160px; 
	right: 10px;
}
#searchform input#s {
	width: 72px;
}
#searchform input#s:focus {
	background-color: #f9f9f9;
	width: 196px;
	color: #373737; 
}
#searchform #searchsubmit {
	display: none;
}
.only-search #searchform {
	top: 5px;
	z-index: 1;
}
.only-search #s,
.only-search #s:focus {
	width: 85%;
}

/* =Main Navigation Menu
-------------------------------------------------------------- */

nav#menu { 
	background: #FFF URL('images/score.gif') top left repeat;
	min-height: 66px;
	display: block;
	margin: 0 auto 0.75em; 
	border: 3px solid #000; 
}
nav#menu div { 
  margin: 0 2em;
}
nav#menu li {
	line-height: 66px; 
}
nav#menu a {
	line-height: 33px;
	margin: 33px 0.25em 0;
	padding: 0 0.75em;
	background: #333355; /* was #506A81; */
	opacity: 0.9;
	border: 1px solid #506A81; 
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;	
	background: -moz-linear-gradient(#92B0C8, #506A81);
	background: -o-linear-gradient(#92B0C8, #506A81);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#92B0C8), to(#506A81)); 
	background: -webkit-linear-gradient(#92B0C8, #506A81);	
}

nav#menu li:hover > a,
nav#menu a:focus {
	background: #f9f9f9; 
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); 
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	/* color: #373737; */
	color: white;
}
nav#menu ul li:hover > ul {
	display: block;
}
nav#menu .current_page_item > a,
nav#menu .current_page_ancestor > a {
	font-weight: bold;
}
nav#menu li:hover > a,
nav#menu a:focus {
    background: #333355;
}
nav#menu ul li:hover > ul {
	display: block;
}
nav#menu .current_page_item > a,
nav#menu .current_page_ancestor > a {
	font-weight: bold;
}


/* Site Generator Line */
#site-generator {
	text-align: center;
	width: 74.5%;
	border: 3px solid #000; 
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	color: #373737;
}
#site-generator div { 
	margin-top: 10px;
}
#site-generator p { 
	line-height: 1.5em;
}
#site-generator a:hover, 
#site-generator a:focus, 
#site-generator a:active { 
	color: white;
} 
#site-generator div a:hover, 
#site-generator div a:focus, 
#site-generator div a:active { 
	background-color: white;
} 

/* Able Player 
----------------------------------------------- */

div.able { /* center the player */
  max-width: 100%;
}

/* Music Icons 
----------------------------------------------- */

div#emusicIcons { 
	width: 380px; /* 95px for each icon + small allowance for border width */
	margin: 0 auto;
}
div#emusicIcons a { 
	display: block;
	width: 90px;
	height: 85px;
	margin-right: 5px;
	float: left;
}
div#emusicIcons a:hover img,
div#emusicIcons a:focus img, 
div#emusicIcons a:active img { 
	border: thin #1982D1 solid;
}	

/* =Blockquote
----------------------------------------------- */

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
blockquote.bigquotes { 
  background: url("http://www.terrillthompson.com/music/images/quotes.gif") no-repeat scroll left center transparent;
  margin: 1em;
  padding-left: 100px;
}

/* =Misc. Styles
----------------------------------------------- */

.citation { 
	vertical-align: super;
}
h2.lyrics { 
	margin-top: 1em;
}
a img {
	border: 0;
}


/* =Responsive 
----------------------------------------------- */

@media (max-width: 1000px) { 
	/* the point below which there is no margin outside #page */
	body { 
		font-size: 1.1em;
	}
	#site-title { 
    /* margin-right: 90px;*/ /* make room for buttons */
	}
	#primary { 
		width: auto; 
	}
	#page {
		margin: 0 auto;
		width: 96%;
		max-width: 96%;		
	}	
	nav#menu a { 
  	font-size: 1em !important;
	}
	#nav-below {
		border-bottom: 1px solid #ddd;
		margin-bottom: 1.625em;
	}
	#main #secondary {
		float: none; 
		margin: 0 7.6%;
		width: auto;
	}
	/* Simplify the showcase template */
	.page-template-showcase-php .featured-posts {
		min-height: 280px;
	}
	.featured-posts section.featured-post {
		height: auto;
	}
	.page-template-showcase-php section.recent-posts {
		float: none;
		margin: 0;
		width: 100%;
	}
	.page-template-showcase-php #main .widget-area {
		float: none;
		margin: 0;
		width: auto;
	}
	.page-template-showcase-php .other-recent-posts {
		border-bottom: 1px solid #ddd;
	}
	/* Simplify the showcase template when small feature */
	section.featured-post .attachment-small-feature,
	.one-column section.featured-post .attachment-small-feature {
		border: none;
		display: block;
		float: left;
		height: auto;
		margin: 0.625em auto 1.025em;
		max-width: 30%;
		position: static;
	}
	article.feature-image.small {
		float: right;
		margin: 0 0 1.625em;
		width: 64%;
	}
	.one-column article.feature-image.small .entry-summary {
		height: auto;
	}
	article.feature-image.small .entry-summary p a {
		left: 0;
		padding-left: 20px;
		padding-right: 20px;
		width: auto;
	}

	/* Make sure we have room for our comment avatars */
	.commentlist {
		width: 100%;
	}
	.commentlist > li.comment,
	.commentlist .pingback {
		margin-left: 102px;
		width: auto;
	}
	/* And a full-width comment form */
	#respond {
		width: auto;
	}
	/* No need to float footer widgets at this size */
	#colophon #supplementary .widget-area {
		float: none;
		margin-right: 0;
		width: auto;
	}
	/* No need to float 404 widgets at this size */
	.error404 #main .widget {
		float: none;
		margin-right: 0;
		width: auto;
	}
	/* Make sure embedded content fit their containers */
	embed, 
	object, 
	div.photo, 
	div.video {
		max-width: 100% !important;
	}
}
@media (max-width: 780px) { 
	/* the point below which search and title start to collide */
	/* and site title and menu wrap */
	body { 
		background-image: none;
	}
	#branding hgroup { 
  	margin: 0;
  	padding-left: 40px;
	}
	#site-title { 
		margin-left: 35px; /* make room for logo */
		margin-right: 90px; /* make room for buttons */
	}
	#site-description { 
		display: none;
	}
	/* header styles */
	header#branding { 
	    background-image: none;
		height: 70px;
		min-height: 70px;
		position: relative;
		margin: 0;
		padding: 0;
	}
	/* Mobile buttons */
	#mobilebuttons { 
		display: block;
	}
	header #mobilebuttons img { 
		position: absolute;
		width: 43px;
		height: 57px;
	}
	#mobilebuttons img#logo { 
		width: 50px;
		width: 50px;
		left: 10px;
		top: 10px;
	}	
	img#menuicon { 
		right: 10px;
		top: 0px;
	}
	img#searchicon { 
		right: 70px;
		top: 0px;
	}		
	#searchform { 
		top: 0;
		left: 0;
		width: 100%;
		margin: 0.25em 0 0.15em;
		padding: 0;
		position: relative;
		background-color:  #92B0C8; 
		border: 3px solid #000; /* was #506A81; */
		text-align: center;
	}
	/* hide search form but don't hide it from screen readers */
	#searchform { 
		position: absolute;
		clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
		clip: rect(1px, 1px, 1px, 1px);
	}	
	#searchform input#s { 
		/* DO hide this from screen readers */
		display: none;
		font-size: 1em;
		color: #FFF;
		border-radius: 15px;		
		border: medium solid #DDD;
		float: none;
		width: 60%;		
		left: 0;
		margin: 0.25em auto;
		padding: 0.5em 2em;
	}	
	#searchform input#s:focus { 
		border-color: #666;
		color: #333;
		width: 70%;
	}
	/* nav menu styles */
	nav#menu { 
		display: none;
	}
	nav#menu div {
		margin: 0.5em 0;
	}	
	nav#menu ul { 
		margin: 0;
	}
	nav#menu a {
    background: none repeat scroll 0 0 #333355;
    border: 1px solid #506a81;
    border-radius: 10px;
    line-height: 1.75em;
    margin: 10px 0.15em 0;
    opacity: 0.9;
    padding: 0 0.75em;
  }	
}
@media (max-width: 650px) { 
	/* the point at which the site title no longer fits */
	/* Reposition the site title and description slightly */
	#site-title {
		font-size: 1em;
	}
	#mobilebuttons img#logo { 
		display: block;
		width: 50px;
		width: 50px;
		left: 10px;
		top: 10px;
	}			
	/* Floated content doesn't work well at this size */
	.alignleft,
	.alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
	div#page { 
		width: 98%;
		padding: 0;
		margin: 0 auto;
	}	
	/* make #content expand to fill width */ 
	div#main { 
		float: none;
		margin-right: 0;
		padding-right: 0;
	}
	#main #primary { 
		float: none !important;
		border-right: none;
		padding: 0 1em !important;
		border-right: 3px solid #000; /* was #506A81; */
	}
	#main #secondary { 
		float: none !important;
		margin: 1em 0;
		padding: 0.25em 1em;
	}	
	#main #content { 
		margin: 0;
	}
	#content nav a {
		/* font-size: 1em; */
		position: relative;
		z-index: 1000;		
	}	
	#content nav a:hover, #content nav a:focus { 
		color: white;
		background-color: #c00;
		text-decoration: none !important;	
	}
	footer { 
		clear: left;
	}	
	/* Make sure the post-post navigation doesn't collide with anything */
	#nav-single {
		display: block;
		position: static;
	}
	/* Talking avatars take up too much room at this size */
	.commentlist > li.comment,
	.commentlist > li.pingback {
		margin-left: 0 !important;
	}
	.commentlist .avatar {
		background: transparent;
		display: block;
		padding: 0;
		position: static;
	}
	.commentlist .children .avatar {
		background: none;
		left: 2.2em;
		padding: 0;
		position: absolute;
		top: 2.2em;
	}
	/* Use the available space in the smaller comment form */
	#respond input[type="text"] {
		width: 95%;
	}
	#respond .comment-form-author .required,
	#respond .comment-form-email .required {
		left: 95%;
	}
	#content .gallery-columns-3 .gallery-item {
		width: 31%;
		padding-right: 2%;
	}
	#content .gallery-columns-3 .gallery-item img {
		width: 100%;
		height: auto;
	}
  nav#menu ul li {
    background-color: transparent;
    border: none;
    color: transparent;
    float: left;
    font-size: 1em;
    margin: 0.15em;
    padding: 0;
    text-align: center;
    width: 48%;
  }	
}
@media (max-width: 550px) { 
/* the point at which the site title no longer fits reliably with two 43-pixel buttons */
	body { 
		/* background-image: none; */
	}
	#site-title { 
		/* Hide title in favor of #logo */
		display: none;
	}
	#site-description { 
		/* Hide this too */
		display: none;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
	}
	#page {
		margin-top: 0;
	}
	#branding {
		border-top: none; 
	}
}