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

Common breakpoints:
1280 px > - Desktop
1024 px - Tablet landscape/Netbook
768 px - Tablet portrait
600 px - Small tablet
560 px - Mobile landscape (iPhone 5)
480 px - Mobile landscape (iPhone 4)
320 px - Mobile portrait

*/

body.debug::before {
 font-weight: bold;
 display: block;
 text-align: center;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 2000;
}

#media-tester { float:none; }




/* ----------------------------------- */


@media only screen and (min-width : 1025px) {
	
		/* --- DEBUG --- */
        body.debug::before{
         content: "Responsive layout #6 activated";
         background: rgba(255,255,255, 0.9); /*white*/
        }
		/* ------------- */
}

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

        /* --- DEBUG --- */
        body.debug::before{
         content: "Responsive layout #5 activated";
         background: rgba(255,0,255, 0.9); /*pink*/
        }
        /* ------------- */

	#nav-container nav {
	 padding-left:200px;
	}
 
}



@media only screen and (max-width: 960px) {
	
		/* --- DEBUG --- */
		body.debug::before{
		 content: "Responsive layout #4 activated";
		 background: rgba(255,138,0, 0.9); /*orange*/
		}  
		/* ------------- */

	#branding {
	 padding-top:90px;
	 padding-bottom:20px;
	}
	#branding h1 {
	}
	#branding h1:before {
	 left:0px;
	 top:-85px;
	}
	#nav-container nav {
	 padding-left:0;
	 max-width:95%;
	 zzzzmargin-right:75px; /* watch out for social side thing! */
	}
	#nav-container #nav-search-item {
	 right:30px; /* watch out for social side thing! */
	}

	#side-sharing {
	 top:250px;
	}

	
	#footer h4,
	#footer ul,
	#footer li,
	#footer p { font-size:11px;}
	
} 

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

        /* --- DEBUG --- */
        body.debug::before{
         content: "Responsive layout #3 activated";
         background: rgba(0,0,255, 0.9); /* blue*/
        }
        /* ------------- */


	/* Nav collapses to mobile mode? */
	#zzzzmedia-tester { float:left; }
	/* No, but gets cosier. And search icon needs to move. */
	#nav-container a {
	 zpadding-left:0;
	 zpadding-right:0;
	 padding:0.75em 0.6em 0.5em;
	}
	/* Slideshow caption/overlay should move below, not on top of, the slides now */
	.cycle-overlay {
	 position:static;
	 background-color:#E8E9E3;
	 border-bottom:2px solid #ddd;
	 padding:5px;
	}

	#footer-bottom { padding-top:1em; }


	#nav-container #nav-search-item {
	 top:-40px;
	 right:20px;
	}

	#recipes-list .grid-col:first-child { width:70%; }
	#recipes-list .grid-col:last-child { width:30%; }

	

}

@media only screen and (max-width: 640px) {
	
        /* --- DEBUG --- */
        body.debug::before{
         content: "Responsive layout #2 activated";
         background: rgba(60,235,0, 0.5); /*green*/
        }
        /* ------------- */

	
	/* Header changes - lose the mailing list, readjust all */

	#branding {
	 padding:8px 0 0;
	 text-align:center;
	}
	#branding h1 {
	 padding-left:0px;
	}
	#branding h1:before {
	 display:block;
	 position:relative;
	 margin:0 auto;
	 top:inherit;
	}


	/* Quicknav becomes the primary element here, not the nav-container (which shifts up and sits on TOP of quicknav) */
	#quicknav {
	 position:relative;
	 background-color:#E8E9E3;
	 border-top: 2px solid #FFFFFF;
	 border-bottom: 1px solid #DFE0DB;
	 zzzmargin-bottom:-50px;
	 zzzzzz-index:3;
	 padding-top:0px;
	 padding-bottom:0px;
	}
	#quicknav-list {
	 position:relative;
	 margin:0 auto;
	 top:0px;
	}
	#quicknav-list::after { /* clearfix! */
	 content:"";
	 display:table;
	 clear:both;
	}

	/* increase specificity to override psuedos? */
	#quicknav #quicknav-list li {
	 float:left;
	 margin:0 10px 0 0;
	 padding:0;
	 line-height:1;
	 width:auto;
	}
	#quicknav #quicknav-list li a {
	 background-color:transparent;
	 color:inherit;
	 zzzborder:1px solid red;
	 padding:10px 0.3em;
	}
	
	#quicknav-item-join {
	 display:none;
	}
	
	#nav-container {
	 top:0;
	 background-color:transparent;
	 border-width:0;
	 padding:0;
	 line-height:1;
	 height:auto;
	 zzzzposition:absolute;
	 zzzztop:230px;
	 float:right;
	 zzztop:10px;
	 margin-top:-46px;
	 margin-right:10px;
	 width:auto;
	 zzzoutline:1px solid green;
	}
	#nav-container nav { padding:0; max-width:100%;}
	#nav-container a.toggleMenu {
	 white-space:nowrap;
	 padding:10px;
	 /* match quicknav typography */
	 text-transform:uppercase;
	 font-size:24px;
	 line-height:1;
	 font-weight:normal;
	 color:inherit;
	}
	#nav-container a.toggleMenu img {
	 margin-left:0;
	}
	
	/* make look "button-like" ??? */
	
	#quicknav #quicknav-list li a,
	#nav-container a.toggleMenu {
	 zzzborder:1px solid red;
	}
	#quicknav #quicknav-list li a:hover,
	#nav-container a.toggleMenu:hover {
	 background-color:#DDDDD9;
	 zzzzzzzcolor:#FFFFFF;
	}
	

	 /* slide out div can go bye bye, or move to footer */
	 #side-sharing,
	 .slide-out-div { display:none; }

		
	/* NAV! Go to Mobile */
	
	#media-tester { float:left; } /* javascript will detect this and act accordingly */
	#nav-container { height:auto; text-align:right; }
	
	ul#nav-list {
	 zzzzzzzzbackground-color:#CCC;
	 z-index:999;
	 font-size:1em;
	 position:absolute;
	 right:0;
	}
	#nav-list .active { zzzzzzzzzzzzzzzdisplay: block; }
	#nav-list li { 
	 float: none; 
	 font-size:1em; 
	 zzzborder-bottom:1px dotted #777;
	 border:1px solid #777;
	 border-width:0 1px 0;
	 background-color:#DDD; 
	 text-align:left;
	}
	#nav-list > li:first-child {
	 border-top:1px solid #777;
	}
	#nav-list > li:last-child {
	 border-bottom:1px solid #777;
	}
	#nav-list > li#nav-search-item { 
	 margin-bottom:1em;
	 padding-top:0.5em;
	 padding-bottom:0.5em;
	 border:1px solid #777;
	}
	#nav-list a {padding:10px;}
	#nav-list ul li { background-color:white; }
	#nav-list li li a { padding-left:2em; }
	#nav-list ul li ul li a { padding-left:3em; }
	#nav-list a:hover { zzzbackground-color:#E9E9E3; }
	#nav-list > li > .parent { background-position: 95% 50%; }
	#nav-list > li > .parent { background-image: none; }
	#nav-list > li > ul li  .parent { background-image: none; width:100%; }
	
	/* fix hover effect for mobile! */
	#nav-list ul {
	 display: block;
	 width: 100%;
	}
	#nav-list > li.hover > ul,
	#nav-list li li.hover ul,
	#nav-list > li:hover > ul,
	#nav-list li li:hover ul {
	 position: static;
	}
	
	/* pre-open superifsh on "active" - hmmm, superfish pathClass will nuke our "applyUpwards" navify classes, so expect sf-breadcrumbs to suffice... */
	#zzzznav-list li.active > ul { display:block !important; position:static;  }
	#nav-list li.sf-breadcrumb > ul { display:block !important; position:static;  }
	/* nope, can't use pathClass because we need different types of navbars depending on whether mobile or desktop. DOn't always want to force the current UL to display block!
	Instead use important to override? */
	#nav-list li.active > ul { display:block !important; position:static;  }


	.toggleMenu:hover { zzzzbackground-color:#A0A09F ;text-decoration:none;}
	#breadcrumbs { position:relative; display:block; float:none; top:auto;}
	
	

	/* Undo search icon? */
	#nav-container #nav-search-item {
	 position:static;
	}
	#nav-container #nav-search-item a {
	 display:none;
	}
	#nav-container #nav-search-item #nav-search-div { 
	 display:block !important;
	 width:auto;
	 text-align:center;
	 position:static;
	 background-color:transparent;
	}	
	

	
	/* layout #2 footer ?? */
	#footer .grid-col { width:50%; }
	#footer #footer-map,
	#footer #footer-social {
	 zzzfloat:none; 
	 width:100%;
	 text-align:center; 
	 margin-bottom:2em;
	 }
	#footer #footer-col-03,
	#footer #footer-col-04 {
	 float:right;
	}

	#footer-container .grid-col { width:50%; } 
	
}

@media only screen and (max-width: 540px) {
	
        /* --- DEBUG --- */
        body.debug::before{
         content: "Responsive layout #1 activated";
         background: rgba(255,255,0, 0.5); /*yellow*/
        }
        /* ------------- */


	#page-title-container {
	 background-image:none;
	 background:transparent url("/images/page-title-decoration.png") repeat-x scroll center bottom;
	 padding-bottom:1px;
	}
	h2#page-title {
	 display:block;
	 background-color:transparent;
	 background-image:none;
	}

	#footer-inner .grid-col { width:100%; }
	
	#footer-inner h4,
	#footer-inner ul,
	#footer-inner li,
	#footer-inner p {
	 font-size:14px;
	}
	#footer-social h4 {
	 float:none;
	 display:block;
	 text-align:left;
	 margin:0;
	 line-height:2;
	}
	#footer-bottom li {
	 display:block;
	 float:none;
	 border-width:0;
	 margin-bottom:0.3em;
	}
	


	/* EVERYTHING TO 100 */

	.grid-wrap {    
	 margin:0 0 !important; /* the same as your gutter */
 	}
	.grid-col {
	 padding:0 !important;
	}



	#footer-container .grid-col { width:100%; }


	.st-accordion ul li > a {
	 font-size:36px;
	}
}

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

	/* This query only fires on things SMALLER than an iPhone - not something we typically target or support */
	
        /* --- DEBUG --- */
        body.debug::before{
         content: "Responsive layout #0 activated";
         background: rgba(0,0,0, 0.5); /*gray*/
        }
        /* ------------- */

	#nav-container {
	 margin:0;
	 float:none;
	 background-color:#E8E9E3;
	 margin-top:-10px;
	}

}


/* ----------------------------------- */




/* ============== Print ============== */

@media print {
* { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important;  -ms-filter: none !important; }
html { border: 0; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
.hide-on-print { display: none !important; }
.print-only { display: block !important; }
.hide-for-print { display: none !important; }
.show-for-print { display: inherit !important; }
}