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

/* for 600px or less */
@media screen and (max-width: 600px) {

	body { background: #fff; margin: 0; padding: 0; }
	* { font-size: 13px!important; line-height: 1.5em!important; }
	a { text-decoration: underline; }
	h1 { font-size: 17px!important; }

	#mob-header { float: left; width: 100%; background: url(../images/mobile/bg.gif) repeat 0 0 #911912; /* Change BG color to suit clients color scheme */ }
    #mob-menu-btn { float: left; width: 35%; font-size: 15px; color: #fff; cursor: pointer; cursor: hand; padding: 10px 5% 10px 12%; text-transform: uppercase; font-weight: bold; background: url(../images/mobile/nav-menu.png) no-repeat 8% center; background-size: auto 12px;  }
    #mob-logo { float: left; width: 100%; margin: 0; padding: 0; background: url(../images/mobile/header-bg.png) repeat 0 -5px #eaaa09; height: 70px; position: relative; }
    #mob-logo img { position: absolute; top: 0; left: 20px; max-width: 70%; max-height: 95px; z-index: 999; }	
	#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,
	#title
	{ float: left; width: 88%; padding: 0 6%; }
	
	
	/* For anything that requires hiding */
	#logo,
    hr,
	#header,
	#nav,
	#slider_controls,
	.cleaner,
	#banner-prev,
	#banner-next,
	#content-bottom
    { display: none; }

    /* Mobile Navigation --------------- */

	#mob-nav { 
		float: left; 
		width: 100%; 
	}
    #mob-nav ul { 
        float: left; 
        width: 100%; 
        margin: 0; 
        padding: 0;
		border-top: none;
    }
    #mob-nav ul li { 
        float: left; 
        width: 100%;
        margin: 0;
		padding: 0;
		background: none;
        list-style-type: none;
    }
    #mob-nav ul li a {
        float: left;
        width: 85%;
        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 #c24a44;
		text-decoration: none!important;
    }
    #mob-nav ul li a:hover { background-color: #282727; }

	/* Feature Panel --------------- */
	
	#feature-panel, #feature_panel { float: left; width: 100%; background-size: 100% auto; }
	#feature-panel article, #feature_panel article { background-size: 350% auto; }
	#feature_panel #banners { float: left; width: 100%; }
	#feature_panel #banners img { width: 100%!important; height: auto!important; }
	
    /* General --------------- */

	.mob-hide { display: none; } /* can be used to hide elements only on small screen */
	#content-holder { background: url(../images/mobile/bg.gif) repeat 0 0 #911912; padding-top: 20px; padding-bottom: 10px; position: relative; }
	#content-holder img { max-width: 100%!important; height: auto!important; } /* Adjusts width on photos within content */
	.photo img { width: 100%; }

	.mob-btns, .subList, #footer ul {
		/* Any list within content can be made into a nice button format by adding this class to the ul */ 
		float: left;
		width: 100%!important; 
		margin: 0 0 20px 0!important;
		padding: 0!important;
	}
	.mob-btns li, .subList li, #footer ul li { 
		float: left;
		width: 100%!important;
		list-style-type: none;
		margin: 0!important;
		padding: 0!important;
	}
	.mob-btns li a, .subList li a, .mob-btn, .map-btn, #footer ul li a, #submit { 
		float: left;
		width: 90%;
		padding: 8px 5%;
        background: url(../images/mobile/subnav-arrow-black.png) no-repeat 94% center #eaab09; 
		color: #000;
        background-size: 8px auto;
		text-decoration: none;
		border-bottom: solid 1px #9a740e;
		text-shadow: none;
	}
	.mob-btns li:first-child a, .mob-btns li.first a, .subList li.first a  { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }
	.mob-btns li:last-child a, .mob-btns li.last a, .subList li.last a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; border-bottom: none; }
	.mob-btn, .map-btn { margin: 0 0 15px 0; -moz-border-radius: 5px; border-radius: 5px; border: none; }
	.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; }

	/* Content --------------- */
	
	#title { background: #282727; padding-top: 35px; padding-bottom: 15px; }
	#title h1 { text-shadow: none; }
	
	#banners { float: left; width: 100%; min-height: 340px; background-color: #000; }
	#banners .content { float: left; background: url(../images/bk80.png) repeat 0 0; width: 80%; padding: 30px 10% 20px 10%; text-align: center; margin: 0; }
	#banners .content h1 { line-height: 1.0em!important; }
	#banners .content h1 span { font-size: 22px!important; }
	#banners .content h1 strong { line-height: 0.5em!important; font-size: 19px!important; }
	#banners img { max-width: 100%!important; }

	.rotate { margin-bottom: 20px; }
	.rotate img { border: solid 4px #fff; width: 98%!important; }
	.sticker { position: absolute; top: -140px; right: 20px; width: 106px; }
	.tripadvisor-mob { width: 110px!important;  height: auto!important; }

	#content table td, #content table th { font-size: 11px!important; padding: 2px; }

	/* Sidebar --------------- */
	
	#sidebar { float: left; width: 100%; padding: 30px 0 10px 0; }
	#sidebar h2, #sidebar #subnav h2 { 
	 	font-weight: bold; 
		color: #000; 
		background: #eaab09; 
		text-transform: uppercase; 
		text-shadow: none; 
		padding: 5px 10px;
		display: inline;
		margin: 0 0 20px 0;
	 }
	 #sidebar .inner { padding-top: 20px; }
	 
	 #side-contact, #side-hours { 
	 	float: left;
		width: 90%!important;
		padding: 15px 5% 5px 5%!important;
	 	background: #282727!important; 
		margin: 0 0 10px 0;
	 }

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

	fieldset, #field_form { width: 90%;	}
	#field_form { width: 100%; padding-bottom: 20px; }
	fieldset p,
	fieldset label,
	fieldset span {
		width: 100%;
		float: left;
	}
	fieldset { float: left; width: 88%; padding: 10px 6%; margin: 0; background: #282727; border: none; margin: 0 0 10px 0; }
	fieldset legend { font-weight: bold; color: #000; background: #eaab09; text-transform: uppercase; text-shadow: none; padding: 5px 10px; }
	
	fieldset input[type="text"],
	fieldset input[type="email"],
	fieldset input[type="tel"],
	fieldset input.txtshort,
	fieldset input.txtshorter,
	fieldset textarea,
	fieldset .commentBox, 
	fieldset .long
	fieldset #enquiry,
	fieldset select
	{ width: 95%!important; padding: 4px; -moz-border-radius: 5px; border-radius: 5px; border: solid 1px #d5d5d5; }
	
	fieldset input[type="submit"], #submit { 
		-webkit-appearance: none;
		width: 90%;
		padding: 5px 5%;
		-moz-border-radius: 5px; 
		border-radius: 5px; 
		border: none;
		font-size: 1.1em;
		text-transform: uppercase;
		color: #000;
		font-shadow: none;
	}
	
	 /* Footer --------------- */

	#footer { 
		float: left;
		background: url(../images/mobile/footer-bg.gif) repeat 0 -5px #eaab09;
		padding: 20px 6% 0 6%;
		width: 88%;
		text-align: center;
		border-top: solid 4px #282727;
	}
	#footer p,
	#footer p a, 
	#footer ul li,
	#footer ul li a { 
		color: #282727;
	}
	#footer a { 
		text-decoration: underline; 
	}
	#footer p, 
	#footer ul { 
		width: 100%!important; 
		margin: 0 0 15px 0;
		padding: 0;
		text-align: center;
	}
	#footer p { font-size: 11px!important; }
	#footer ul li { 
		width: 100%;
		padding: 0;
		margin: 0;
	}
	#footer .right p { width: 100%; text-align: center; }
	.footer-link a{
		width: 100%;
		background-size: auto 50px; 
	}
	.footer-link a:hover{
		background-position: center top;
	}

}