/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* Table of Contents
==================================================
01. RETINA STYLES
02. BASE STYLES (1140px)
03. #DESKTOP (960px)
04. #Tablet (Portrait)
05. #Mobile (Portrait)
06. #Mobile (Landscape)
07. TESTING TEXT
*/

/*
=============================================== 01. RETINA STYLES ===============================================
*/
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
	#anchor-check-in select {background-image: url(../images/select-arrow2@2x.png), -webkit-linear-gradient(#ffffff, #f7f7f7 40%, #f7f7f7); background-position: center right; background-repeat: no-repeat; background-size:contain;}
	#anchor-check-in input {
		background-image: url(../images/date-icon@2x.png),  -webkit-linear-gradient(#ffffff, #f7f7f7 40%, #f7f7f7);
		background:url(../images/date-icon@2x.png), linear-gradient(#ffffff, #f7f7f7 40%, #f7f7f7);
		background-image: url(../images/date-icon@2x.png),-moz-linear-gradient(#ffffff, #f7f7f7 40%, #f7f7f7);
		background-position: center right; background-repeat: no-repeat;
		background-size: contain;
	}
	nav select {background-image: url(../images/select-arrow@2x.png),  -webkit-linear-gradient(#FAFAFA, #f9f9f9 40%, #e8e8e8) !important;background: linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
	background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);background-position: center right; background-repeat: no-repeat; background-size:contain;}
	.searchform #s {background-image: url(../images/search-magnify@2x.png); background-size: 30px 30px; }
	.flex-direction-nav a {background-image: url(../images/slider/arrows@2x.png); background-size:68px 69px;}
	.flex-control-paging li a {background-image:url(../images/slider/bg_bullets@2x.png); background-size:20px 85px;}
	ul.checkmark li {background-image: url(../images/checkmark@2x.png); background-size: 11px 12px; }
	ul.arrow li { background-image:url(../images/sidebar-arrow@2x.png); background-size:15px 35px;}
	
	.example-retina {background-image:url(../images/example-retina@2x.png); background-size:20px 85px;}
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* IE7-IE8 Fixes*/
.lt-ie9 ul.checkmark li {background-image: url(../images/checkmark.png);}
.lt-ie9 ul.arrow li { background-image:url(../images/sidebar-arrow.png);}
.lt-ie9 .example-retina {background-image: url(../images/example-retina.png); }
.lt-ie9 searchform #s {background-image: url(../images/search-magnify.png);  }
.lt-ie9 .flex-direction-nav a {background-image: url(../images/slider/arrows.png); }
.lt-ie9 .flex-control-paging li a {background-image:url(../images/slider/bg_bullets.png); }

}




/*
=============================================== 02. BASE STYLES (1175px) ===============================================
*/
/* Note: Design for a width of 1175px */
body:after {content: "Wider than 1175px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */
html {-webkit-text-size-adjust: none;}	/* Removes webkit font resizing */ 
body {max-width:100%; width:100%;}
img {max-width:100%; height: auto; }
.width-container {-moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; }


/*
=============================================== 03. #DESKTOP (960px) ===============================================
*/
/* Note: Design for a width of 960px */
@media only screen and (min-width: 959px) and (max-width: 1175px) {
body:after {content: "959px to 1139px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ 


.width-container {width:935px;} /* Default Width */

.sf-menu a {padding-right:12px ; padding-left:12px;}
#contact-header-text { padding-left:18px;}
#header-search .icons {padding-right:5px;}
.genericon {margin-right:2px;}
.searchform #s, .searchform #s:focus {width:120px;}

/* Homepage Reservation Form Styles */
#anchor-check-in select {padding-left:6px; padding-right:6px; -webkit-padding-start: 10px; -webkit-padding-end: 45px; margin-right:6px;}
#anchor-check-in input { padding-right:6px; padding-left:8px; margin-right:6px; width:120px;}
body #anchor-check-in  .wufoo input.submit {padding:13px 20px; -webkit-padding-start: 20px; -webkit-padding-end: 20px; width:auto;}


/* Slider Caption Sizes */
.caption-text {  font-size:24px;}
.flex-caption h2 {   font-size:30px;  }
.flex-caption .slider-container, .flex-control-nav {bottom:59px;}


#flickr-footer ul li img {width:51px; height:51px; }


}



/*
=============================================== 04. #Tablet (Portrait) ===============================================
*/
/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
body:after {content: "768 to 959px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ 

/* Default Width */
.width-container { width: 748px; }
.content-container-anchor {padding:26px;}

body {font-size:13px;}

/* Misc Fixes */
.sf-menu a {padding-right:10px ; padding-left:8px;}
#contact-header-text { padding-left:14px;}
#header-search .icons {padding-right:5px; display:none;}
.genericon {margin-right:2px;}
.searchform #s, .searchform #s:focus {width:100px;}

.button-anchor, body #contact-wrapper input.submit, body #reply input.submit {padding:10px 15px; font-size:12px;}
#anchor-check-in  .button-anchor { padding-top:13px; padding-bottom:13px;}
body #anchor-check-in  .wufoo input.submit {padding:12px 20px;  font-size:12px; width:auto;}


/* Slider Caption Sizes */
.caption-text {  font-size:22px;}
.flex-caption h2 {   font-size:28px;  }
.flex-caption .slider-container, .flex-control-nav {bottom:50px;}


/* Homepage Reservation Form Styles */
#anchor-check-in select {background-image: -webkit-linear-gradient(#ffffff, #f7f7f7 40%, #f7f7f7); font-size:12px; padding-left:0px; padding-right:3px; -webkit-padding-start: 8px; -webkit-padding-end: 8px; margin-right:6px;}
#anchor-check-in input {font-size:12px; padding-right:3px; padding-left:6px; margin-right:6px; width:100px;}
#anchor-check-in  .button-anchor { padding-right:13px; padding-left:13px; font-size:11px;}


#flickr-footer ul li img {width:38px; height:38px; padding:2px; }


h2.title-anchor.title-heading {font-size:26px;}
h2.title-anchor span {padding-top:0px; }


}



/*
=============================================== 05. #Mobile (Portrait) ===============================================
*/
/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
body:after {content: "0 to 480px"; background-color: hsla(90,60%,40%,0.7); }/* Notify what @media browser is using, Disable above by display:none; */ 


/* Default Width */
.width-container { width: 300px; max-width: 100%; padding: 0 15px; /* Adjust padding for smaller screens */ }
.content-container-anchor {padding:20px;}

/* Default Grid */
#content-container, #sidebar, .grid2column, .grid3column, .grid3columnbig, .grid4column {width: 100%; /* Full-width on mobile for readability and ease of navigation */ }

/* Font Sizing */
body {font-size:14px; line-height:1.4;}
h1, h2, h3, h4, h5, h6 {line-height:1.2;}

/* Adjustments for Smaller Screens */
.sf-menu, #header-search, .social-icons {display: none; /* Hide on smaller screens */}
.caption-text {font-size: 18px;}
.flex-caption h2 {font-size: 22px;}
.genericon {display: inline-block; margin-right: 5px;}

.searchform #s, .searchform #s:focus {width: 100%; /* Full-width input on mobile */ }
.button-anchor, .wufoo input.submit {padding: 10px; font-size: 14px; width: 100%;} /* Full-width buttons on mobile */
 .contact-form {
            background: #ffffff;
            padding: 20px 40px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
        }
           
        .contact-form h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333333;
        }
        .contact-form label {
            color: #333333;
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }
        .contact-form input, .contact-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            color: #333;
            resize: vertical;
        }
        .contact-form input[type="submit"] {
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
            border: none;
            font-size: 18px;
            transition: background-color 0.3s;
        }
        .contact-form input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .contact-form .optional {
            font-weight: normal;
            font-size: 14px;
            color: #888;
        }

/*
=============================================== 06. #Mobile (Landscape) ===============================================
*/
/* Note: Design for a width of 480px */

@media only screen and (min-width: 481px) and (max-width: 767px) {
	body:after {content: "481 to 767px"; background-color: hsla(90,60%,40%,0.7); } /* Notify what @media browser is using, Disable above by display:none; */ 

	/* Default Width */
	.width-container { width: 450px; max-width: 100%; padding: 0 15px; }
	.content-container-anchor {padding:24px;}

	/* Default Grid */
	#content-container, #sidebar, .grid2column, .grid3column, .grid3columnbig, .grid4column {width: 100%; /* Full-width on landscape mobile for ease of navigation */ }

	/* Font Sizing */
	body {font-size:15px; line-height:1.4;}
	h1, h2, h3, h4, h5, h6 {line-height:1.2;}

	/* Adjustments for Smaller Screens */
	.caption-text {font-size: 20px;}
	.flex-caption h2 {font-size: 24px;}
	.genericon {display: inline-block; margin-right: 5px;}

	.searchform #s, .searchform #s:focus {width: 100%; /* Full-width input on mobile */ }
	.button-anchor, .wufoo input.submit {padding: 10px; font-size: 14px; width: 100%; /* Full-width buttons on landscape mobile */}
}


/*
=============================================== 07. TESTING TEXT (For Debugging) ===============================================
*/
/* Optional debugging to visualize breakpoints. Can be removed or disabled when development is complete */
@media only screen and (min-width: 1176px) {
	body:after { display: none; }
}

@media only screen and (min-width: 960px) and (max-width: 1175px) {
	body:after { display: none; }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	body:after { display: none; }
}

@media only screen and (max-width: 767px) {
	body:after { display: none; }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
	body:after { display: none; }
}

@media only screen and (max-width: 480px) {
	body:after { display: none; }
}

/* Ensure images and other embedded media adjust responsively */
img, video, iframe {max-width: 100%; height: auto;}

/* Additional Utility Classes */
.hide-mobile {display: none !important;}

/* Specific Classes for Responsive Visibility */
@media only screen and (min-width: 768px) {
	.hide-desktop {display: none !important;}
}

@media only screen and (max-width: 767px) {
	.hide-tablet {display: none !important;}
}