/*
* 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 (1165px)
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) {
	body nav select {
		background:#FAFAFA url("../images/select-arrow@2x.png")/*tpa=http://progressionstudios.com/white-rock/images/select-arrow@2x.png*/ center right no-repeat; background-size:contain;}
		
	.flex-control-paging li a {background-image:url("../images/slider/bg_bullets@2x.png")/*tpa=http://progressionstudios.com/white-rock/images/slider/bg_bullets@2x.png*/; background-size:20px 85px;}
	.flex-direction-nav a {background-image: url("../images/slider/arrows@2x.png")/*tpa=http://progressionstudios.com/white-rock/images/slider/arrows@2x.png*/; background-size:68px 69px;}
	a.twitter-widget-from { background-image: url("../images/twitter@2x.png")/*tpa=http://progressionstudios.com/white-rock/images/twitter@2x.png*/ ;  background-size:20px 16px;}
	
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* IE7-IE8 Fixes*/
.lt-ie9 .flex-control-paging li a {background-image: url("../images/slider/bg_bullets.png")/*tpa=http://progressionstudios.com/white-rock/images/slider/bg_bullets.png*/; }
.lt-ie9 .flex-direction-nav a {background-image: url("../images/slider/arrows.png")/*tpa=http://progressionstudios.com/white-rock/images/slider/arrows.png*/;}
.lt-ie9 a.twitter-widget-from { background-image: url("../images/twitter.png")/*tpa=http://progressionstudios.com/white-rock/images/twitter.png*/;  }

}




/*
=============================================== 02. BASE STYLES (1165px) ===============================================
*/
/* Note: Design for a width of 1165px */
body:after {content: "Wider than 1165px";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, #page-title-divider  {-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: 1165px) {
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, #page-title-divider  {width:930px;} /* Default Width */
#mc_embed_signup input#mce-EMAIL { width:100px;}

.caption-progression {
	padding-bottom:80px;
	padding-left:80px;
	font-size:25px;
}

}



/*
=============================================== 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, #page-title-divider  { width: 738px; }
.caption-progression {
	padding-bottom:70px;
	padding-left:70px;
	font-size:23px;
}


/* Default Grid */

/* Misc Fixes */
.sf-menu a {padding-right:8px; padding-left:8px;}  /* Top Menu Size */
.flex-direction-nav .flex-prev, .flex-direction-nav .flex-next {display:none !important;}


}



/*
=============================================== 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, #page-title-divider  { width: 300px; }

.caption-progression {
	padding-bottom:55px;
	padding-left:20px;
	font-size:15px;
}


/* Default Grid */
.grid2column, .grid3column, .grid3columnbig, .grid4column, .grid4columnbig, .lt-ie8 .grid3column, .lt-ie8 .grid4column , .lt-ie8 .grid2column, #sidebar, #container-sidebar {float:none; width:100%; margin-bottom:25px;}
body ul#open-hours .grid2column, body #main ul.menu-items .grid2column {float:left; margin-right:2%; margin-bottom:0px; }
body ul#open-hours .grid2column, body #main ul.menu-items .grid2column { width: 49%;}
.lt-ie8 body ul#open-hours .grid2column, .lt-ie8 body #main ul.menu-items .grid2column {width: 48.5%;  }

.menu-item-container .grid3column {float:left; margin-right:2%; width: 32%; }
.lt-ie8 .menu-item-container .grid3column { width: 31.5%; }
.menu-item-container .grid3columnbig {float:left; margin-right:2%;width:65.8%;}


/* Misc Fixes */
.flex-direction-nav .flex-prev, .flex-direction-nav .flex-next {display:none !important;}
footer #copyright ul {text-align:center;  float:none;}
footer #copyright ul li {float:none; display: inline;  }
#copyright .grid2column {text-align:center;}


/* HEADER AREA */
header {position:static;}
body #logo {text-align:center; margin:0 auto 6px auto; float:none; position:relative;}
#homepage-slider, .paged-title {margin-top:30px;}
.paged-title {height:125px; }

/* Select Menu */
nav ul { display: none; }  
nav select option {font-size:12px; background:#fff; color:#888;}
header nav {float:none; position:relative; }
nav select { text-transform:none; display:block;  margin-left:auto; margin-right:auto; width:300px; min-width: 150px; max-width: 100%; -webkit-appearance: none; -moz-appearance: normal; appearance: normal;
-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
 -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none;-moz-user-select: none;
background:#FAFAFA url("../images/select-arrow.png")/*tpa=http://progressionstudios.com/white-rock/images/select-arrow.png*/ center right no-repeat;
font-size:13px;
border: 1px solid #aaaaaa;
color: #555555;
padding:7px 5px 7px 10px;}


}


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

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

/* Default Width */
.width-container, #page-title-divider  { width: 420px; }


}



/*
=============================================== 07. TESTING TEXT ===============================================
*/
body:after {position:relative; z-index:55; content: "less than 320px";font-size: 300%;font-weight: bold;position: fixed;bottom: 60px;width: 100%;text-align: center;background-color: hsla(1,60%,40%,0.7);color: #fff;
display:none !important; /* -------------------- ADD OR REMOVE display:none !important; to display testing text -------------------- */}