@charset "utf-8";
/* CSS Document - Media Style Sheet
Kreck Design www.kreck.com
Client: Pepi Winery */

/* Table of Contents
	#01 Smaller than standard 960 (devices and browsers)
	#02 Tablet Portrait size to standard 960 (devices and browsers)
	#03 All Mobile Sizes (devices and browser)
	#04 Mobile Landscape Size to Tablet Portrait (devices and browsers)
	#05 Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
	#06 Provide higher res assets for iPhone 4
*/
	

/* =========================================================== */
/* #01 Smaller than standard 960 (devices and browsers)
/* =========================================================== */
@media only screen and (max-width: 959px) { 





}


/* =========================================================== */
/* #02 Tablet Portrait size to standard 960 (devices and browsers)
/* =========================================================== */

/*@media only screen and (min-width: 768px) and (max-width: 959px) {*/

@media only screen and (min-width: 800px) and (max-width: 999px) {

	#nav-container { -webkit-border-radius: 10px ;-moz-border-radius: 10px;border-radius: 10px; } /*  TEMP COLOR BORDER */

	#content-wrapper {width:800px;}
	.container { width:800px;}
	#footer-content { width:780px; }
	
	#slideshow-small {display:none;}
	#slideshow-wrapper {width:735px;}
	#nav-container {font-size:12px; width:800px;margin:0 auto;}
	#hilite-top img, 
	#hilite-bottom img, 
	#hilite-content h2 img {
	  width: inherit;  /* This makes the next two lines work in IE8. */
	  max-width: 100%; /* Add !important if needed. */
	  height: auto;    /* Add !important if needed. */
	}
	#hilite {width:100%;}
	#hilite-content {width:65%; padding:15px; margin:0 auto; border-left:7px solid #EEDE95; border-right:7px solid #EEDE95;}


		body.debug::before{
			content: "Responsive layout #2 activated";
			font-weight: bold;
			display: block;
			text-align: center;
			background: rgba(255,255,0, 0.9);   /* Semi-transparent yellow */
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
		}


}


/* =========================================================== */
/* #03 All Mobile Sizes (devices and browser)                  */
/* =========================================================== */
@media only screen and (max-width: 767px) {





}


/* =========================================================== */
/* #04 Mobile Landscape Size to Tablet Portrait                */
/* =========================================================== */

/* @media only screen and (min-width: 480px) and (max-width: 767px) { */
@media only screen and (min-width: 700px) and (max-width: 799px) {
	
	#content-wrapper {width:700px;}
	
	#slideshow-large {display:none;}
	#slideshow-wrapper {width:570px;}
	
		#footer-content { width:680px; }
	
	#hilite {width:70%; margin:0 auto;}
	#hilite-content {width:65%; padding:15px; margin:0 auto; border-left:7px solid #EEDE95; border-right:7px solid #EEDE95;}
	#nav-container {
		display:none;
	}
	#mobile-nav-container {
	 position:absolute;
	 display:block;
	 top:0px;
	 right:250px;
	}


		body.debug::before{
			content: "Responsive layout #4 activated";
			font-weight: bold;
			display: block;
			text-align: center;
			background: rgba(255,255,0, 0.9);   /* Semi-transparent yellow */
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
		}


}



/* =========================================================== */
/* #05 Mobile Portrait Size to Mobile Landscape Size           */
/* =========================================================== */

/* @media only screen and (max-width: 479px) { */

@media only screen and (max-width: 699px) {

	#content-wrapper {width:95%;}	
	#nav-container {
		display:none;
	}
	#footer-content { width:90%; }
	
	#mobile-nav-container {
	 position:absolute;
	 display:block;
	 top:0px;
	 right:150px;
	}
	#slideshow-large, #slideshow-small {display:none;}
	#slideshow-wrapper{width:310px;}
	#hilite-content {border:7px solid #EEDE95;}
	#hilite-top, #hilite-bottom { display:none;}
	
		body.debug::before{
			content: "Responsive layout #5 activated";
			font-weight: bold;
			display: block;
			text-align: center;
			background: rgba(255,255,0, 0.9);   /* Semi-transparent yellow */
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
		}

}


/* =========================================================== */
/* #06 Provide higher res assets for iPhone 4                  */
/* =========================================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}