/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 600px or less */
@media screen and (max-width:600px){
	body{
		text-align:left;
	}
	body,
	button,
	input,
	select,
	textarea{
		line-height:1.785714em; /* Unitless for proper inheritance */
		font-size:13px;
	}
	#mob-header{
		display:block;
		background-color:#6a9927; /* Change BG color to suit clients color scheme */
	}
	#mob-menu-btn{
/*		float:left;
		width:35%;*/
		padding:10px 5% 10px 12%;
		background:url(../images/mobile/nav-menu.png) no-repeat 5% center;
		background-size:auto 12px;
		color:#fff;
		cursor:pointer;
		cursor:hand;
		font-size:15px;
		font-weight:bold;
		text-transform:uppercase;
	}
	#mob-logo{
		display:block;
		margin:0;
		padding:30px 0;
		text-align:center;
	}
	#mob-logo img{
		max-width:90%;
		max-height:58px;
	}	
	#mob-header .phone{
		float:right;
		padding:10px 15px 8px 0;
		color:#fff;
		font-size:15px;
	}
	#mob-header .phone a{
		color:#fff;
		text-decoration:none;
	}
	
	#container,
	#content-holder,
	#header,
	#footer{
		width:92%;
		padding:0 4%;
	}
	.innerpad{
		width:100%;
	}
	#content-holder{
		padding-top:20px;
		padding-bottom:20px;
	}
	#content,.content-area{
		width:94%;
		padding:3% 3% 1px;
	}
	#sidebar,.sidebar{
		float:none;
		width:100%;
	}
	
	#column1, #column2, #column3, #column4, #column5{
		float:none;
		width:100%;
		margin:0;
	}
	.pageImage{
		float:none;
		width:100%;
		margin:0 0 15px;
		text-align:center;
	}
	.pageImage img{
		max-width:100%;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	/* For anything that requires hiding */
	#logo,
	#header,
	#mainMenu,
	#slider_controls,
	body > #swirl{
		display:none;
	}
		/* Mobile Navigation --------------- */

	#mob-nav{
/*		float:left;
		width:100%;*/
	}
	 #mob-nav ul{ 
			margin:0;
			padding:0;
			border-top:none;
		}
		#mob-nav ul li{ 
			margin:0;
			padding:0;
			background:none;
			list-style-type:none;
		}
		#mob-nav ul li a{
			display:block;
			padding:8px 10% 8px 5%;
			color:#fff;
			font-weight:700;
			text-decoration:none;
			font-size:14px;
			background:url(../images/mobile/subnav-arrow.png) no-repeat 94% center;
			background-size:10px auto;
			border-top:solid 1px #50821f;
			text-decoration:none !important;
		}
		#mob-nav ul li a:hover{
			background-color:#50821f;
		}

	/* Feature Panel --------------- */
	
	#feature-panel{
		background-size:100% auto;
	}
	#banners{
		width:100%;
		height:auto;
	}
	#banners article{
		padding:5% 5% 5% 58%;
		width:auto;
		height:auto;
		background-size:100% auto;
	}
	#banners h1{
		font-size:1.714286em;
	}
	#banners p{
		font-size:1em;
	}
	#slider{
		bottom:38px;
	}
	#feature-panel .title{
		padding:0 4%;
	}
	
	/* General --------------- */
	
	h1, h2, h3, h4, h5, h6{
		margin-bottom:15px;
	}
	
	.mob-hide{
		display:none;
	} /* can be used to hide elements only on small screen */
	#content img{
		max-width:100% !important;
		height:auto !important;
	} /* Adjusts width on photos within content */

	.mob-btns, .subList, #footer ul{
		/* Any list within content can be made into a nice button format by adding this class to the ul */ 
		width:100% !important;
		margin:0 0 20px 0 !important;
		padding:0 !important;
	}
	.mob-btns li, .subList li, #footer ul li{ 
		width:100% !important;
		margin:0 !important;
		padding:0 !important;
		list-style-type:none;
	}
	.mob-btns li a, .subList li a, .mob-btn, .map-btn, #footer ul li a{ 
		width:90%;
		padding:8px 5%;
		background:url(../images/mobile/subnav-arrow.png) no-repeat 94% center #000;
		background-size:8px auto;
		border-bottom:solid 1px #666;
		color:#fff;
		text-decoration:none;
	}
	.mob-btns li:first-child a, .mob-btns li.first a, .subList li.first a {
		-webkit-border-radius:3px 3px 0 0;
		-moz-border-radius:3px 3px 0 0;
		border-radius:3px 3px 0 0;
	}
	.mob-btns li:last-child a, .mob-btns li.last a, .subList li.last a{
		-webkit-border-radius:0 0 3px 3px;
		-moz-border-radius:0 0 3px 3px;
		border-radius:0 0 3px 3px;
		border-bottom:0 none;
	}
	.mob-btn, .map-btn{
		margin:0 0 15px 0;
		border:0 none;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		border-radius:3px;
	}
	.map-btn{
		background:url(../images/mobile/icon-map.png) no-repeat 95% center #000;
		background-size:20px auto;
	}
	
	.mob-btns li a:hover, .subList li a:hover, .mob-btn:hover, .map-btn:hover{
		background-color:#666;
	}
	
	.specialties{
		width:100%;
		margin:0 0 20px;
	}
	.specialties li{
		width:38%;
		margin:2%;
		padding:3% 3% 0;
	}
	
	#newsletter-form .field-wrap{
		float:none;
		margin:0 0 5px;
	}
	#newsletter-form input{
		width:92%;
		padding-left:3%;
		padding-right:3%;
	}
	#newsletter-form .field-wrap label{
		left:4%;
	}
	
	#wrapper,.site{
		width:100%;
	}
	#bannerTile{
		float:none;
		width:100%;
	}
	#contentTop{
		height:auto;
		background-color:#fff;
		-webkit-border-radius:5px 3px 0 0;
		-moz-border-radius:5px 3px 0 0;
		border-radius:5px 3px 0 0;
	}
	#bannerTile img,
	#linkPromo img{
		width:100%;
		height:auto;
	}
	
	td{
		display:block;
		width:94% !important;
		padding:3%;
	}
	
	#promo{
		float:none;
		width:auto;
	}
	#promo a{
		width:100%;
		height:431px;
		background-size:200% auto;
	}

	/* Sidebar --------------- */
	
	#sidebar{
		padding:30px 0;
	}
	#sidebar #latest-box ul, #sidebar #event-box ul, #sidebar .rotate{
		width:100%;
	}
	#sidebar .ui-tabs-panel .desc{
		float:none;
		width:auto;
		margin-left:80px;
	}

	/* Fieldset --------------- */

	fieldset p,
	fieldset label,
	fieldset span{
		width:100%;
	}
	fieldset{
		margin:0;
		background:#efefef;
		border:solid 1px #d5d5d5;
		margin:0 0 10px 0;
	}
	fieldset legend{
		font-weight:bold;
	}
	
	fieldset input,
	fieldset input.txtshort,
	fieldset input.txtshorter,
	fieldset textarea,
	fieldset .commentBox, 
	fieldset .long
	fieldset #enquiry,
	fieldset select{
		width:92% !important;
		padding:7px 3%;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		border-radius:3px;
		border:solid 1px #d5d5d5;
	}
	
	 /* Footer --------------- */

	#footer{ 
		width:92%;
		height:auto;
		padding:15px 4%;
		background:url(../images/mobile/footer.jpg) center top repeat-x;
		background-size:auto 100%;
		text-align:center;
	}
	#footer .innerpad{
		padding:0;
	}
	#footer p,
	#footer p a, 
	#footer ul li,
	#footer ul li a{
		font-size:1em;
	}
	#footer a{ 
	}
	#footer p, 
	#footer ul{ 
		width:100% !important;
		margin:0 0 15px 0;
		padding:0;
		text-align:center;
	}
	#footer p{
	}
	#footer ul li{ 
		width:100%;
		padding:0;
		margin:0;
	}
	.footer-link a{
		margin:0 auto;
	}
	#footer .right{
		float:none;
	}
	#footer .right p{
		text-align:center;
	}
}
@media screen and (max-width:500px){
	#promo a{
		height:356px;
	}
}
@media screen and (max-width:400px){
	#promo a{
		height:280px;
	}
}
@media screen and (max-width:320px){
	#promo a{
		height:219px;
	}
}