/*
	Green Dream — responsive additions
	----------------------------------
	This file ONLY adds media queries for screens smaller than 980px.
	Nothing here overrides the desktop (>980px) appearance, so the existing
	layout, fonts and colors stay exactly the same on large screens.
*/

/* Hamburger buttons — hidden on desktop, shown only on small screens */
.menu-toggle {
	display: none;
	background: #4d5f16;
	color: #fff;
	border: 1px solid #6d832b;
	border-radius: 3px;
	padding: 8px 14px;
	margin: 6px 0;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	line-height: 1;
}
.menu-toggle .menu-toggle-icon {
	font-size: 16px;
	vertical-align: middle;
	margin-left: 6px;
}
.menu-toggle:hover,
.menu-toggle:focus {
	background: #3d4e0a;
}

/* The logo image should never overflow its container on any screen */
#header img.site-logo {
	max-width: 100%;
	height: auto;
}

/* ------------------------- Small screens ------------------------- */
@media screen and (max-width: 979px) {

	/* Fluid container instead of the fixed 950px Blueprint container */
	.container {
		width: 100%;
		max-width: 950px;
		padding: 0 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* Blueprint grid columns stack vertically */
	div.span-1, div.span-2, div.span-3, div.span-4, div.span-5,
	div.span-6, div.span-7, div.span-8, div.span-9, div.span-10,
	div.span-11, div.span-12, div.span-13, div.span-14, div.span-15,
	div.span-16, div.span-17, div.span-18, div.span-19, div.span-20,
	div.span-21, div.span-22, div.span-23, div.span-24, div.span-24 {
		float: none;
		width: 100%;
		margin: 0 0 10px 0;
	}
	div.last {
		margin: 0 0 10px 0;
	}

	/* Header */
	#header {
		height: auto;
		padding-top: 10px;
	}

	/* ---- Mobile menus (logo + menus requirement) ---- */
	.menu-toggle {
		display: inline-block;
	}

	/* Hide both menus until the toggle is pressed.
	   Only applied when JS is available (html.greendream-js), so the
	   menus remain fully visible for visitors without JavaScript. */
	html.greendream-js #pagemenu,
	html.greendream-js #nav {
		display: none;
	}

	/* Shown state (JS toggles this class) */
	html.greendream-js #pagemenu.menu-open,
	html.greendream-js #nav.menu-open {
		display: block;
	}

	#pagemenucontainer,
	#pagemenu,
	.navcontainer,
	#nav {
		height: auto;
	}

	#pagemenu {
		margin-bottom: 6px;
	}

	#pagemenu li,
	#nav li {
		float: none;
		display: block;
		margin: 0;
	}

	#pagemenu li a,
	#nav li a,
	#pagemenu li a:link,
	#nav li a:link {
		display: block;
		float: none;
		width: 100%;
		margin: 0;
		padding: 10px 12px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	#nav li a,
	#nav li a:link {
		padding: 12px;
	}

	#pagemenu li a {
		background: #6d832b;
	}

	#nav li a {
		background: #4d5f16;
	}

	/* Top search box becomes full width under the menu */
	#topsearch {
		float: none;
	}
	#search,
	#topsearch #search {
		height: auto;
	}
	#s,
	#topsearch #s {
		width: 80%;
		max-width: 220px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* Content */
	#content {
		padding: 10px;
	}

	.post img,
	.entry img,
	.wp-caption img {
		max-width: 100%;
		height: auto;
	}

	pre {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* Post header date/comment row stacks nicely */
	.postdate {
		float: none;
		width: auto;
	}
	.postcomment {
		margin-left: 0;
		text-align: left;
	}

	/* Sidebar */
	.sidebar {
		margin: 0;
	}
	.sidebar ul li {
		padding: 6px;
	}
	.sidebaradbox img,
	.ad125 {
		max-width: 100%;
		height: auto;
	}

	/* Comment form fields fit small screens */
	#commentform input[type="text"],
	#commentform input[type="email"],
	#commentform input[type="url"] {
		width: 100%;
		max-width: 250px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* Footer */
	#footer {
		padding: 12px;
		font-size: 12px;
	}
}

/* Extra-small phones */
@media screen and (max-width: 480px) {
	#header h1 {
		font-size: 34px;
	}
	.title {
		font-size: 17px;
		line-height: 24px;
	}
	#footer2 {
		font-size: 10px;
	}
	.alignleft,
	.alignright {
		float: none;
		display: block;
		text-align: center;
		margin: 8px 0;
	}
	.post_thumbnail {
		float: none;
		display: block;
		margin: 0 auto 10px auto;
	}
}