/**
 * Media Queries CSS
******************************************/

/*****************************************
 * TABLE OF CONTENTS:
 * 
 * #00 - VIEWPORT FIX
 * #01 - LAYOUTS
 * #02 - MENU          (max-width:  700px)
 * #03 - COMMENTS      (max-width:  700px)
 * 
 *****************************************/
 
/* === #00 - VIEWPORT FIX === 
 * Does the same thing as <meta name="viewport" content="width=device-width">
 * for Windows 8 "Snapped" views in IE10+
 * @link http://core.trac.wordpress.org/ticket/25888
 * @link http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport
 */
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

/* === #01 - LAYOUTS === */

@media screen and (max-width: 1000px){
	.container-wrap{
		margin-right: 0;
		width: 700px;
	}
}
@media screen and (max-width: 900px){
	.container-wrap{
		width: 680px;
	}
}
@media screen and (max-width: 800px){
	.container-wrap{
		width: 600px;
	}
}
@media screen and (max-width: 700px){

	.header-image{
		position: inherit;
		left: auto;
		top: auto;
		border-left: 2px solid #FFFF00;
		padding-left: 40px;
		padding-left: 4rem;
		padding-top: 20px;
		padding-top: 2rem;
		width: auto;
	}
	.slide-header-image .header-image{
		left: auto;
		width: auto;
	}
	#branding{
		padding: 40px;
		padding: 4rem;
	}
	#site-title{
		font-size: 40px;
		font-size: 4rem;
	}
	#site-description{
		font-size: 20px;
		font-size: 2rem;
	}

	#main{
		margin-left: -28px;
		margin-left: -2.8rem;
	}
	.entry{
		padding-left: 28px;
		padding-left: 2.8rem;
		padding-right: 28px;
		padding-right: 2.8rem;
	}
	.entry-wrap{
		padding-left: 40px;
		padding-left: 4rem;
	}

	.entry-published-wrap{
		width: 65px;
		width: 6.5rem;
	}
	.entry-published-wrap .day-large{
		float: right;
		text-align: left;
		display: none;
	}
	.entry-published-wrap .time-box{
		float: left;
		margin-right: 10px;
		margin-right: 1rem;
	}

	.loop-meta{
		margin-left: 28px;
		margin-left: 2.8rem;
	}
	.loop-pagination{
		margin-left: 28px;
		margin-left: 2.8rem;
	}
	.loop-nav{
		margin-left: 28px;
		margin-left: 2.8rem;
	}
	.loop-nav .prev a:before,
	.loop-nav .next a:before{
		padding: 0 5px;
		padding: 0 0.5rem;
	}
	.loop-nav .prev,
	.loop-nav .next{
		padding-left: 40px;
		padding-left: 4rem;
	}
	#comments-template{
		margin-left: 28px;
		margin-left: 2.8rem;
		padding: 40px;
		padding: 4rem;
		padding-right: 0;
		padding-left: 10px;
		padding-left: 1rem;
	}
	.comment-meta .avatar{
		display: none;
	}

}


/* === #02 - MENU ===  */
@media screen and (max-width: 700px){

	/* Menu Primary 1st Level */
	#menu-primary li a{
		background: #444;
	}

	/* === Menu Toggle: no-js === */
	#menu-primary .menu-toggle a{
		color: #fff;
	}
	#menu-primary:target .menu-toggle{
		border-bottom: 1px solid #ccc;
	}
	#menu-primary:target .menu-items{
		display: block;
	}
	#menu-primary:target .menu-toggle-open{
		display: none;
	}
	#menu-primary:target .menu-toggle-close{
		display: inline;
	}
	/* Custom */
	#menu-primary .menu-toggle{
		padding: 0;
		float: left;
		width: auto;
	}
	#menu-primary .menu-toggle a{
		padding: 8px 15px;
		padding: 0.8rem 1.5rem;
		border: 0;
		float: left;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		background: #000;
	}
	#menu-primary .menu-toggle a:hover,
	#menu-primary .menu-toggle a:focus{
		padding: 8px 15px;
		padding: 0.8rem 1.5rem;
		border-bottom: 0;
		opacity: 1;
		color: #FFFF00;
	}
	.search-toggle-active .menu-toggle{
		display: none;
	}
	#menu-primary .sub-menu{
		margin: 0;
		border: none;
	}
	#menu-primary li a{
		margin: 0;
		width: 100%;
		background: #000;
		border-bottom: 1px solid #fff;
	}
	#menu-primary li li a{
		margin: 0;
		width: 100%;
		background: #111;
		border-bottom: 1px solid #fff;
	}

	/* Menu */
	.menu-toggle{font-weight:700;line-height:1.8em;padding:.9rem;width:100%;height:47px;height:4.7rem}.menu-toggle .screen-reader-text{position:inherit;left:auto;top:auto}.menu-toggle a:focus,.menu-toggle a:hover{opacity:.8}.menu-toggle a:before{content:"\f203";font-family:dashicons;font-weight:400;font-size:20px;font-size:2rem;vertical-align:top;margin-right:5px;-webkit-font-smoothing:antialiased}.menu-toggle a.menu-toggle-close:before,.menu-toggle-active .menu-toggle a:before{content:"\f158"}.mobile-menu-active .menu-dropdown li:hover>.sub-menu{left:auto}.menu-toggle{display:block}.menu-items,.menu-toggle .menu-toggle-close{display:none}.menu-toggle-active.menu-container{border-bottom:0}.menu-toggle-active .menu-items{display:block}.menu-toggle-active .menu-toggle{border-bottom:1px solid #ccc}.menu-toggle-active>.wrap{display:block}.menu-dropdown:after{content:".";display:block;height:0;clear:both;visibility:hidden}.menu-dropdown>.wrap{display:block;margin-right:0;width:100%}.menu-dropdown ul li.menu-item-has-children>a:before,.menu-dropdown ul li.menu-item-open-children>a:before{content:"";position:inherit;right:auto}.menu-dropdown li{display:block;width:100%}.menu-dropdown .sub-menu{width:100%;border:none}.menu-dropdown .sub-menu li a,.menu-dropdown li a{width:100%;border:none;border-bottom:1px solid #ccc;background:#eee}.menu-dropdown .sub-menu li a{background:0 0}.menu-dropdown .sub-menu,.menu-dropdown .sub-menu li.focus>.sub-menu,.menu-dropdown .sub-menu li:focus>.sub-menu,.menu-dropdown .sub-menu li:hover>.sub-menu,.menu-dropdown li.focus>.sub-menu,.menu-dropdown li:focus>.sub-menu,.menu-dropdown li:hover>.sub-menu{opacity:1;left:auto;top:auto;position:inherit}.menu-dropdown .sub-menu li a:before,.menu-dropdown .sub-menu li.menu-item-has-children>a:before,.menu-dropdown .sub-menu li.menu-item-open-children>a:before{content:"\f460 ";font-family:dashicons;vertical-align:top;padding:0;margin-right:.5rem;float:none;position:inherit;right:auto;-webkit-font-smoothing:antialiased}.menu-dropdown .sub-menu .sub-menu li a:before{content:"\f460 \f460 ";font-family:dashicons;vertical-align:top;padding:0;margin-right:.5rem;float:none;-webkit-font-smoothing:antialiased}.menu-dropdown .sub-menu .sub-menu .sub-menu li a:before{content:"\f460 \f460 \f460 "}.menu-dropdown .sub-menu .sub-menu .sub-menu .sub-menu li a:before{content:"\f460 \f460 \f460 \f460 "}.menu-dropdown .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a:before{content:"\f460 \f460 \f460 \f460 \f460 "}.menu-dropdown .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a:before{content:"\f460 \f460 \f460 \f460 \f460 \f460 "}.menu-dropdown .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a:before{content:"\f460 \f460 \f460 \f460 \f460 \f460 \f460 "}.menu-dropdown .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a:before{content:"\f460 \f460 \f460 \f460 \f460 \f460 \f460 \f460 "}.menu-dropdown .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a:before{content:"\f460 \f460 \f460 \f460 \f460 \f460 \f460 \f460 \f460 "}.menu-dropdown .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a:before{content:"\f460 \f460 \f460 \f460 \f460 \f460 \f460 \f460 \f460 \f460 "}
}


/* === #03 - COMMENTS === */
@media screen and (max-width: 700px) {
	#respond .comment-form-author,
	#respond .comment-form-email,
	#respond .comment-form-url{
		width: 100%;
		margin-right: 0;
		float: none;
	}
	#respond #submit{
		float: none;
	}
}
