/*****
	MOBILE LAYOUT
	GREEN FINGERS
	JANUARY 2014
	EMMA BAKER
	PLASTIC STUDIO
*****/


@media (max-width: 1280px) {

	body {
		overflow-x: hidden; 
		/* border: 1px solid red; */ }
	
	#mobile-nav {
		background: #bbb;
		color: #FFFFFF;
		height: 80px;
		line-height: 80px;
		position: absolute;
		right: 160px;
		text-align: center;
		top: 0;
		width: 80px; }
		
	#mobile-nav:hover {
		background: #555; }
		
	.content .inner, .panel .inner {
		width: 94%;
		margin: 0 3%; }

		
	/** iPad landscape fixes **/

	#primary-menu .menu-item .liner {
		margin: 15px 6px; }
	
	.panel.intro .panel-content {
		margin-top: 0; }
		
	.list-panel .ticked-list ul li {
		width: 9%; }
	
	/** Calendar **/
	
	.collection-nav a.green {
		clear: left; }
		
	#calendar .month .dates tr td {
		padding: 6px 5px; }
		
		
	/*** Footer ***/
	
	#foot .logo {
		margin: 0 45px 20px 20px; }
	
	#foot .column.one-third {
		width: 100%; }

	#foot .column.middle {
		width: 90%;
		margin: 20px 0 0 56px; }
		
	#foot .column.middle .one-third {
		width: 30%; }
		
	#foot .column.one-quarter {
		width: 90%;
		margin: 20px 0 0 20px; }
		
}




/********* MEDIUM LAYOUT *************/

@media (max-width: 1052px) {	

	/* 	
	body {
		border: 1px solid green; } */

	#primary-menu .menu-item {
		display: block;
		font-size: 1em;
		float: left; }
		
	#primary-menu .menu-item .liner {
		margin: 15px 0;
		padding: 14px 5px; 
		display: block; }
		
	
	/*** Intro Panel ***/
	
	.panel.intro .panel-image,
	.panel.intro .panel-content {
		width: 50%; }
	
	.panel.intro .panel-image img {
		max-width: 100%; }
		
	.panel.intro .panel-content .button {
		display: inline-block;
		margin: 0 10px 10px 0; }
	
	
	
	/*** Slider panel ***/
	.panel.slideshow-panel .slideshow-panel-item .panel-image {
		width: 55%; }
		
	.panel.slideshow-panel .slideshow-panel-item .panel-content {
		width: 50%; }
		
	.panel.slideshow-panel .slideshow-panel-item .panel-content h4 br {
		display: none; }
	
	
	/**** Calendar ****/
	
	.collection-nav {
		margin: 20px 0; }
		
	.collection-nav a {
		margin: 0 3% 8px 0; }
		
	#calendar .last .month {
		border-bottom: 1px solid #bebebe; }
		
	#calendar .month .dates tr td {
		padding: 6px 0; }
		
	
	
	/*** Caption panel ***/
	.caption.panel .panel-item .photo {
		width: 20%; 
		margin: 17px 1% 0; }
	.caption.panel .panel-item h3 {
		width: 70%; }
		
		
	/*** panel grid ***/
	.panel-grid { background: none; }
		
		
	/*** About page ***/
		
/* 	.staff-members.content {
		height: 420px; } */
		
	.mike-jones-profile {
		padding: 15px 0; }
		
	.staff-slider {
		min-height: inherit; 
		width: 28%; }
		
	.staff-slider .staff {
		padding: 15px; 
		min-height: inherit; }
		
	.staff .photo {
		border: 0;
		float: none;
		margin: 0 0 10px;
		padding: 0; }
	
	.staff-slider .staff h3 {
		width: auto; 
		margin: 0 0 5px; }
		
		
	/** Footer **/
	#foot .column.left {
		width: 40%; 
		float: left; }
		
	#foot .column.middle {
		width: 60%; }
		
	#foot .column.right {
		width: 30%; 
		margin: 20px 0 0; }
	
	
}


@media (max-width: 880px) {
	
/* 	body {
		border: 1px solid blue; } */

		
	/*** Intro Panel ***/
		
	.panel.intro {
		font-size: 70%; }
		
	.panel.intro .panel-image,
	.panel.intro .panel-content {
		width: 100%; }
	
	.panel.intro .panel-image img {
		max-width: 100%; }
		
	.panel.intro .panel-content .button {
		display: inline-block;
		margin: 0 10px 10px 0; }
		
		
	/***** Generic panels ****/
	
	.panel.homepage.quarters {
		margin: 10px 0; }
		
	/*** remove border ****/
	.panel.homepage .panel-item .liner {	
		padding: 0;
		border: 0; }
		
	/***** Slideshow panels ****/	
	.panel.slideshow-panel .slideshow-panel-item .panel-content {
		width: 54%; }
	
	.panel.slideshow-panel .slideshow-panel-item .panel-content h1 .button.white {
		display: block;
		margin: 10px 0; 
		width: 40%;
		padding: 0;
		text-align: center;}
		
		
	/*** List panel ***/
	.list-panel .ticked-list ul li {
		width: 10%;
		margin: 15px 2%; }
		
	/*** Caption panel ***/
	.caption.panel .inner,
	.panel.caption .caption-panels,
	.panel.caption .caption-panels .panel-item {
		height: 280px; }
	.caption.panel .panel-item .photo {
		width: 30%; }
	.caption.panel .panel-item h3 {
		width: 60%; }
		
		
	/*** Content tables ***/
	
/* 	.content {
		width: 96%; 
		margin: 0 auto; } */
		
	#main .content table tr td {
		padding: 0;
		width: 100%; 
		display: block;
		clear: left; }
		
	/*** Services page tables ***/
	
	#page.services table tr td {
		width: 50% !important;
		clear: none;
		float: left; }
		
	#page.services table tr td img {
		display: block;
		margin: 0 auto; }
	
	#page.services table tr td:nth-child(3) {
		clear: left; }
		
	#page.services table tr:nth-child(2) td {
		width: 90% !important; 
		margin: 20px 0 0; 
		padding: 10px 5%; }
		
	/*** FAQ page table ***/
	#page.faq table {
		margin: 50px 0 0; }
		
	#page.faq table tr td {
		display: inline-block; }
		
	#page.faq table tr td:nth-child(1) {
		width: 0 !important; }
		
	#page.faq table tr td:nth-child(2) {
		width: 10%;
		text-align: center !important; }
		
	#page.faq table tr td:nth-child(3) {
		width: 85%; }
		
	/*** Calendar page ***/
		
	.collection-nav { 
		width: 65%; }
		
	.calendar .header p {
		width: 100%;
		float: none;
		clear: left; }
	
		
		
	/*** Contact page ***/
	.userform .column.one-third {
		width: 100%;
		float: none; 
		margin: 10px 0; }
		
		
	
}


@media (max-width: 770px) {


	.panel.slideshow-panel .slideshow-panel-item .panel-content {
		width: 50%; 
		padding: 40px 0 0; }

}


@media (max-width: 710px) {

	#head #branding {
		display: block;
		background: url('../images/logo-medium.png') no-repeat;
		width: 130px;
		height: 63px;}
		
	#mobile-nav {
		display: block; }
		
	#primary-menu {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 500; 
		width: 100%;
		background: #fff; 
		padding-bottom: 10px;
		display: none;
	}	

	#primary-menu.active {
		display: block;
		padding: 30px 0; 
	}

	#primary-menu .menu-item {
		display: block;
		width: 100%;}
		
	#primary-menu .menu-item .liner {
		padding: 15px 6% 10px; 
		margin: 0;}
		
}

@media (max-width: 650px) {
	
	/* body { border: 1px solid red; } */
	
	/**** Floating items to make full width ***/
	.column.one-third,
	.column.two-thirds,
	.column.one-quarter,
	.column.half,
	.column.three-quarters,
	.panel.homepage .panel-item,/* 
	.panel.slideshow-panel .slideshow-panel-item .panel-image,
	.panel.slideshow-panel .slideshow-panel-item .panel-content, */
	.calendar .header h2,
	.collection-nav,
	.calendar .header p,
	#main.parent-page .column.half.left,
	#main.parent-page .column.half,
	#main.parent-page .column.half .column.half,
	.mike-jones-profile,
	.staff-slider,
	#foot .column.one-third .foot-item,
	#foot .column.one-quarter .foot-item,
	#foot .column.middle	.one-third,
	.field label {	
		width: 100%; 
		float: none; 
		clear: left; }
		

	

	/**** Calendar ****/
	.collection-nav {
		margin: 20px 0; }
		
	.collection-nav a {
		margin: 0 1% 0 0; }

	.calendar .header p .button {
		display: block;
		margin: 15px auto; 
		width: 80%;
		text-align: center;}
		
	#calendar .month {
		display: block;}
		
	#calendar .last .month {
		border-bottom: 1px solid #bebebe; }
	
		
	/**** Content ****/
	
	#main .content .inner {
		width: 96%; 
		margin: 0 auto; }
	
	#main .content table tr td {	
		display: block;
		width: 100%; 
		margin: 15px 0; 
		/* clear: left; */ }
		
	#main .content table tr td img {
		width: 75%;
		height: auto; 
		clear: left; }
		
	
		
	/*** Home Page ****/
	/* change borders from left/right to top/bottom because panels are stacked vertically now */
	.panel.homepage .panel-item {
		margin: 0; }

	.panel.homepage .panel-item .liner {
		border-width: 1px 0 0; 
		border-color: #ccc;
		border-style: solid;
		padding: 20px 0; }
		
	.panel.homepage .panel-item.our-service-and-promise .liner {
		border-top: 1px solid #ccc; }
		
	.panel.homepage .panel-item.green-and-convenient .liner {
		border: 0; }
		
	/*** Modules ***/
	.panel.intro .liner {
		padding: 30px 2%; }
		
	.panel.intro .panel-image img {	
		max-width: 100%;
		display: block;
		margin: 0 auto; }	
		
	.list-panel .ticked-list ul li {
		width: 90%;
		float: none;
		margin: 12px auto; }
		
	.panel.slideshow-panel {
		height: 350px; }
		
	.panel.slideshow-panel .slideshow-panel-item .panel-image {
		width: 63%; }
		
	.panel.slideshow-panel .slideshow-panel-item .panel-image img {
		max-width: 100%; }
		
	.panel.slideshow-panel .slideshow-panel-item .panel-content {
		width: 45%; }	
		
	.panel.slideshow-panel .slideshow-panel-item .panel-content .button.white {
		margin: 0; }

		
	/*** Caption panel ***/
	.panel.caption {
		min-height: 400px;}
		
	.panel.caption .caption-panels {
		height: auto; }
		
	.caption.panel .inner {
		max-width: 100%; }
		
	.panel.caption .caption-panels .panel-item {
		height: 395px; }
		
	.caption.panel .panel-item h3 {
		width: 100%; 
		font-size: 1.5em; }
		
	.caption.panel .panel-item .photo {
		float: none;
		margin: 15px auto 0; }
	
	
	/**** Staff Members ****/
	
	.staff-members.content {
		margin: 0 auto; 
		padding: 2%; }
	
	.staff-slider {
		min-height: 335px; 
		margin-bottom: 20px; }
	
	.staff-slider .staff {
		min-height: 265px; }
		
	#popups.staff-popups {
		width: 100%;
		height: auto; }
		
	#popups.staff-popups .popup-area {
		width: 90%;
		padding: 20px 5%;
		height: auto; }
	
	/**** Footer ****/
	
	#foot .column {
		width: 100%; 
		margin: 0 0 20px; }
		
	#foot .column.left {
		width: 100%; }
		
	#foot .column.left a {
		float: none;
		margin: 0 auto; 
		display: block; }
		
	#foot .column.left .foot-item {
		margin: 15px 0; 
		font-size: 1.3em; }
		
	#foot .column.middle	{
		width: 50%;
		margin: 20px 0 0 8%; }
		
	#foot .column.middle .column.one-third {
		width: 100%; }
		
	#foot .column.right {
		width: 40%;
		margin: 20px 0 0; }
		
		
		
	/**** Contact page ****/
	
	h3.contact {
		font-size: 1.5em; 
		margin: 0 0 10px; }
	
	#Form_Form {
		width: 90%;
		margin: 20px auto 30px; }
		
	#Form_Form label {
		text-align: left; 
		display: block; 
		padding: 0; }
	
	#Form_Form input,
	#Form_Form textarea {
		display: block;
		width: 96%; 
		padding: 10px 2%; }
		
	#Form_Form label.required {
		margin: 10px 0 0; 
		padding: 0; }
		
	.thanks {
		width: 90%; }
	
}

@media (max-width: 450px) {
	
	/* body { border: 1px solid green; } */
	
	/**** Floating items to center not float ***/	
	.panel.square,
	.panel.square .liner {
		float: none;
		margin: 0 auto; }
		
	/** Slideshow **/
		
	.panel.slideshow-panel .slideshow-panel-item .panel-content {
		padding: 40px 10px 0; }	
		
		
	/** Footer **/
	#foot .logo {
		float: none;
		text-align: center;
		margin: 0; }
		
	#foot .column.middle,
	#foot .column.right {
		width: 100%; }
	
}



/********* TINY LAYOUT *************/

@media (max-width: 410px) {
	
	.panel.intro .panel-image,
	.panel.intro .panel-content {
		clear: left;
		width: 100%;
		float: none; }

	/*** Header ***/
	
	#head #branding {
		left: 8px; }
	
	
	/**** Modules ****/
	
	.panel.intro .panel-content a.button {
		display: block;
		margin: 5px auto; 
		text-align: center; }
		
		
	.panel.slideshow-panel {
		height: 400px; }
		
	.panel.slideshow-panel .slideshow-panel-item .panel-image {
		width: 85%; 
		height: 200px; 
		left: 20px; }
		
	.panel.slideshow-panel .slideshow-panel-item .panel-image img {
		height: 100%; }
		
	.panel.slideshow-panel .slideshow-panel-item .panel-content {
		width: 90%;
		right: 5%;
		padding: 200px 0 0; 
		text-align: center; }
		
	.panel.slideshow-panel .slideshow-panel-item .panel-content h1 {
		font-size: 2em; }
	
	
	/**** Calendar ****/
		
	.collection-nav a {
		margin: 0 0 8px 0;
		text-align: center;
		width: 75px; }
		
	.collection-nav a.yellow,
	.collection-nav a.red {
		float: right; }
		
	.collection-nav a.green {
		clear: left; }
		
		
	/**** Staff Members ****/
	
	.staff-members.content {
		margin: 0 auto; 
		padding: 2%; }
	
	.staff-slider {
		min-height: 415px; 
		margin-bottom: 20px; }
	
	.staff-slider .staff {
		min-height: 345px; }
		
	.staff .photo, #popups.staff-popups .popup-area .photo {
		padding: 0 0 0 15px;
		border: 0; }
		
		
	/*** Hints and tips ***/
	
	#main.parent-page .column.half .column.half {
		margin: 20px 0; }
		
		
	/**** Footer ****/
	
	#foot .column.one-third .foot-item, 
	#foot .column.one-quarter .foot-item {
		width: 100%; }
		
	#foot .column.middle	.one-third {
		width: 100%; }
		
}

@media (max-width: 380px) {
	.search-button{
		width: 60px;
	}
	.search-button .icon{
		left: 5px;
	}
	.login-button {
		width: 60px;
		right: 60px;
	}
	#mobile-nav{
		width: 60px;
		right: 120px;
	}
	#SearchForm_SearchForm{
		width: 260px;
	}
	#SearchForm_SearchForm_Search_Holder{
		width: 180px;
	}
	#SearchForm_SearchForm_Search_Holder input{
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	#SearchForm_SearchForm.active {
		right: 60px; 
	}
}