/*
Theme Name:     JW Twentysixteen
Description:    Child theme for the Twentysixteen theme
Author:         Lydia Mann
Template:       twentysixteen
*/


/* layout */
#page {
	max-width: 1000px;
	border: 1px solid #D6D6D6;
	-moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, .8), inset 0 0 0 rgba(255, 255, 255, .2), 3px 10px 20px rgba(0, 0, 0, .6);
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .8), inset 0 0 0 rgba(255, 255, 255, .2), 3px 10px 20px rgba(0, 0, 0, .6);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, .8), inset 0 0 0 rgba(255, 255, 255, .2), 3px 10px 20px rgba(0, 0, 0, .6);
		margin: 0 auto;
	background: #fff url("http://www.jacquelinewoodson.com/wp-content/uploads/2016/06/nav-col-bg.png") 0 0  repeat-y;
}
.content-area {
	width: 75%;
}
.site-inner, .site-header {
	padding: 0;
}
.site-branding p.site-title, .site-description {
	clip: rect(0,0,0,0);
	line-height: 0;
}
.site-branding, .site-header-menu, .header-image {
	margin: 0 auto;
	position: relative;
}
#primary {
	margin-left: 25%;
}
#secondary {
	margin: 0 0 0 -5%; 
	padding: 0;
}

.site-main > article {
	margin-bottom: 1em;
}
.site-footer {
    margin: 0 auto;
    padding: 2px 10px;
    background-color: #382635;
    clear: both;
}
.special-links {  /* "Just for" */
	width: 100%;
	clear: both;
	color: #f4db93; 
	margin-bottom: .5em; 
	padding: .75em 0 0 .5em;
}
.site-info {
   font-size: .8em;
   text-align: center;
   color: #fff;
}
.entry-header {  /* above book title */
	padding-top: 1em;
	background: url("http://www.jacquelinewoodson.com/wp-content/uploads/2012/10/jwSwash4.gif") 0 0 no-repeat;
}
.category.entry-header {
	.margin-top: 0 !important;
}
.home .entry-header {
	background-image: none;
	margin-top: 2em;
}

.post-thumbnail{
	margin: 0;
}
.post-thumbnail img {
	float: left;
	max-width: 150px;
	margin: 1em 1em 1em 0;
}
body:not(.search-results) article:not(.type-page) .entry-content { /* no idea why it needs this specificity */
	width: 100%;
}
blockquote,
.entry-content blockquote:not(.alignleft):not(.alignright), 
.entry-summary blockquote, 
.comment-content blockquote {
	margin-left: 0;
	border-left: 1px solid #686868;
	padding-left: 1em;
}

/* menu-main */
.sidebar {
	width: 220px;
}
.menu-main-container {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.menu li, .sub-menu li, .no-bull li {
	padding: 0 .125em;
	list-style-type: none;
}
.menu-main-container  {
	background-image: none;
	background-color: transparent;
}

.menu, .widget_pages ul {
	margin: 0;
	padding: 0;
}
.menu {
	float:left;
}
.menu ul ul {
	position: relative;
	left: 0;
	border-bottom: none;
}

.menu li {
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
	width: 100%;
	text-transform: uppercase;
	background-color: transparent;
	border: 1px solid #c6c6b6;
	border-width: 0 0 1px;
}

.sub-menu {
	display: block;
	position:relative;
	top:0;
	left:0;
	margin: 0;
	text-transform: lowercase;
	font-size: 0.9em;
	line-height: 1.2em;
	padding: 0;
	visibility: visible;
	z-index: 10;
}

.sub-menu li {
	border-bottom: 1px solid #c6c6b6;
}
/* social navigation */
#menu-social-media li {
	padding: 1em .25em;
}

.widget {
	padding-top: 0;
	border-top: 0;
}
.widget_search {
	width: 92%;
	margin: .2em auto 1em;
}
#menu-social-media-1 {
	width: 200px;
	margin: 0 auto;
}
.social-links-menu li {
	padding: 0 .25em;
}
.aside, .section {
	width: 100%;
	clear: both;
}
.aside {
	border: 1px dotted #ccc;
	padding: 1em;
	margin-bottom: 1em;
}

/* typography */
p, ul {
	margin-bottom: 1.25em;
}
h1, h2, h3, h4, h5, h6 {
	clear: none;
	font-weight: 500;
	font-family: "museo",serif;
	margin: 0;
	padding: 0;
	color: #215033;
	line-height: 1.3;
}
.post h1, 
.book h1, 
#content-tumblr h2 {
	font-size: 1.2rem;
    padding-top: 1em;
    border-top: 1px solid #d8caa2;
}
h2.entry-title,
.entry-content h2, 
.entry-summary h2, 
.comment-content h2 {
	font-size: 1.8rem;
	padding-top: 1em;
	margin: 0 0 .5em;
}
h2.entry-title {
	border-top: 1px solid #d8caa2;
}
h2.widget-title,
.widget .widget-title {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-weight: 600;
	font-size: 0.8125rem;
	padding: 8px;
	margin-bottom: 0;
	letter-spacing: 0;
}
.entry-content h2, .entry-summary h2, .comment-content h2 {
	margin-top: 0;
}
.entry-content h3, .entry-summary h3, .comment-content h3 {
	margin: 0;
}
.h4,
.entry-content h4, .entry-summary h4, .comment-content h4, .textwidget h4 {
	font-size: 1.2em;
	text-transform: none;
}
.entry-content h4, .entry-content h5, .entry-content h6, .entry-summary h4, .entry-summary h5, .entry-summary h6, .comment-content h4, .comment-content h5, .comment-content h6 {
	margin: 0;
}
.entry-content h4, .entry-summary h4, .entry-intro h4, .comment-content h4 {
	letter-spacing: 0;
}
body:not(.search-results) .entry-header + .entry-summary {
	margin: .25em 0 0;
}
.aside p {
	font: 1em/1.5 "museo-sans", sans-serif;
	margin: .5em 0;
}
blockquote p {
	margin: .5em 0;
}
.wp-caption {
	margin-bottom: .25em;
}
p.caption {
	color: #686868;
    font-size: 13px;
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.6153846154;
    padding-top: 0.5384615385em;
}

/* The Events Calendar */
#tribe-events-bar {
	display: none;
}
#tribe-events-content {
	margin-top: 0;
}
.tribe-events-list .tribe-events-loop .tribe-events-content {
	display: none; /* remove "more info" link since all info is already displayed */
}
.tribe-events-list-separator-month {
	font-size: 1.5em;
}
h2.tribe-events-list-event-title {
	font-size: 1.3em;
	margin: 0;
}
.tribe-events-loop .tribe-events-event-meta {
	font-size: 1em;
}
.tribe-events-list .time-details, 
.tribe-events-list .tribe-events-venue-details {
	line-height: 1.5;
}
a.tribe-events-gmap {
	float: right;
}
a.tribe-events-ical, a.tribe-events-button {
	display: none;
}


/* links */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	text-decoration: none;
}
/* navigation links */
#menu-main li a, #menu-main li li a {
	width: 99%;
	text-decoration:none;
	font-weight:600;
	margin: 0;
	padding: 8px;
	color: #215033;
	background-color: transparent;
	display: block;
	border: none;
	height: auto;
	line-height: 1;
	position: relative;
	text-shadow: none;
	white-space: normal;
}
#menu-main li li a {
	padding: 0.5em 1em;
	text-transform: none;
}
#menu-main li.current-menu-item a,
#menu-main ul.toggled-on li.current-menu-item,
li.current_page_item,
#menu-main li a:hover {
	background-color: #EAE2BA;
}


/* footer links */
.site-footer a:link, .site-footer a:visited {
	color: white;
	text-decoration: underline;
	text-transform: uppercase;
}
.special-links a:link, .special-links a:visited { /* just for */
	color: #f4db93;
}
.special-links a:hover {
	text-decoration: none;
	color: white;
}
#menu-toggle {
	display: none; /* broken when using custom menu */
}

div#mobile-header-img a {
    display:none; /* Hide from browsers that don't support media queries */
	    cursor:pointer;
	    background: transparent url("http://www.jacquelinewoodson.com/wp-content/uploads/2016/08/masthead-450x195.jpg") no-repeat top center;
	    width: 450px;
	    height: 195px;
	  
	    margin: 0 auto 0 -2em;
}


/* Media queries!
/* overwrite theme */
@media screen and (min-width: 56.875em) {
.site-content {
    padding: 3% 4.5455% 0;
}
}

-------------------------------------------------------------------------------*/
/* Portrait and Landscape */

/* attempt to swap out better header img from here http://stackoverflow.com/questions/29439099/swap-image-with-media-queries-without-using-background-image */
@media only screen and (max-width: 450px) {
	div#mobile-header-img a {
	    display:block;
 	}
	img#mainimg, header img {
	    display: none !important;
	}
	.site-footer .social-navigation {
		margin-bottom: 0;
	}
	.entry-header, .post-thumbnail, .entry-content, .entry-summary, .entry-footer, .comments-area, .image-navigation, .post-navigation, .page-header, .page-content, .content-bottom-widgets {
		margin-right: 0;
	}
	.entry-content img, .post-thumbnail img {
		max-width: 150px;
	}
} 

/* ----------- iPhone ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)and (-webkit-min-device-pixel-ratio: 2) {
	/* from http://saeedalipoor.github.io/icono/ */
		.icono-hamburger {
	   		display: block;
	   		width:2.5em;
	   		height:6px;
	   		box-shadow:inset 0 0 0 32px,0 -10px,0 10px;
	   		margin:1.5em 0 0 1em;
		}
		[class*=icono-]:after, [class*=icono-]:before {
			content: '';
			pointer-events: none;
		}

	#secondary .social-navigation {
		display: none; /* duplicates footer links */
	}
    #page {
        background-image: none;
    }
    #primary {
    	margin-left: 0;
    }
    .content-area {
		width: 95%;
	}
	#secondary {
		width: 90%;
		margin: 0 5%;
	}
	.sidebar {
		width: 100%;
		display: block;
	}

}

/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {

}