@charset "utf-8";


/* 
Insert your "main.css" here, or simply upload your own file over this one (after
has been initially created). Remove this comment when done.
*/



/*
Below are some temporary styles for "ContentOrganizer" mode?
Erase these (or just replace this whole file) when no longer needed.
*/

body,
#container {
 font-family:Arial, sans-serif;
 font-size:16px;
 margin:0;
 padding:0;
}
body {
 background-color:#CCC;
}
#container {
 background-color:#FFF;
}

header h1 {
 text-align:left;
 background-color:#666;
 color:#eee;
 padding:10px;
 padding-left:18px;
 font-size:28px;
 margin:0;
}
header h1 a  {
 color:#FFF;
 text-decoration:none;
}
header h1 a:hover  {
 text-decoration:underline;
}
.clearfix:after {
 content: "";
 display: table;
 clear: both;
}

.border { 
 border: 1px solid #000; 
 background:#eee;
 padding:1em; 
 margin-bottom:1em;
}

.grid-wrap {
 margin: 0 -3em;
 overflow: hidden;
 /*clear:both; LIKELY SITE SPECIFIC */
}
.grid-col {
 float: left;
 padding: 0 3em;
 width: 100%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}


nav {
 padding:20px;
 width:300px;
 font-size:14px;
 line-height:1.5;
 float:left;
 background-color:#FFF;
 zzzborder-right:1px solid #AAA;
 zzzbackground:#FFF url('//www.kreck.com/_backend/img/backgrounds/silver-gradient.jpg') no-repeat 0px -400px;
}
nav ul {
  list-style-type:none;
  padding:0;
}
nav li {
 margin:4px 0;
}
nav li a:hover {
 color:#900;
}





#subnav { display:none; }


#content {

 max-width:45em;
 margin:0 auto;

 float:none;
 margin-left:380px;
 padding-bottom:40px;

}



footer {
 background-color:#CCC;
 padding:20px;
 font-size:85%;
 color:#666;
 overflow:hidden;
 text-align:center;
}
footer ul,
footer li {
 margin:0; 
 padding:0;
 list-style-type:none;
}
footer ul {
 margin-left:350px;
 overflow:hidden;
}
footer li {
 float:left;
 padding:10px;
 border-left:1px solid #bbb;
}
footer li:first-child {
 border-left-width:0;
}
footer a {
 color:#F2F2F2;
 text-decoration:none;
}
footer a:hover {
 color:#FFF;
 text-decoration:underline;
}



/* =Recipes---------------------------------------------------*/

#recipe-top-navigation {
 margin-bottom:2.5em;
}

#recipes-nav { margin-bottom:2em;}
#recipes-quote blockquote { margin-top:0.5em; padding-top:1em;}

/* ROOT INDEX PAGE */
#recipe-index-page > h3 {
 margin-top:1em;
}

/* CATEGORY/RESULTS PAGES */
#recipe-items {
 /*clear:both; LIKELY SITE SPECIFIC */
}

.recipe-item {
 border-bottom:1px dotted #b9b9b9;
 padding-top:1.0em;
 padding-bottom:1.5em;
}
.recipe-item:first-child {
 border-top:1px dotted #b9b9b9;
}
.zzzzrecipe-item h3 a {
 color:inherit;
}
.recipe-item p {
 margin-bottom:0.5em;
}

.recipe-photo {
 margin-bottom:1em;
}


/* RECIPE DETAIL/INDIVIDUAL PAGE */

#recipe-page {
}
#recipe-page h2 {
 margin-bottom:0.8em;
}
#recipe-page > h3 {
 border-top:2px solid #ccc;
 clear:both;
}
#recipe-page h5 {
 margin-bottom:0.6em;
}
#recipe-page p {
 margin-bottom:1em;
}

#recipe-page .wine-pairings ul,
#recipe-page .wine-pairings li {
 margin-left:0;
 padding:0;
 list-style-type:none;
}
#recipe-page .wine-pairings ul {
 zzzmargin-bottom:1.65em;
}
#recipe-page .recipe-photo blockquote {
	border-top:1px dotted #444;
	border-bottom:1px dotted #444;
}

	@media only screen and (min-width: 320px) { 
	}
	@media only screen and (min-width: 480px) { 
		#recipes-nav .grid-col,
		#recipes-intro .grid-col { width:50%; }
	}
	@media only screen and (min-width: 768px) { 

		/* For the Index  page... */
		#recipe-feature-section blockquote { width:45%; margin-left:5%; float:right; margin-top:0; text-align:center;  }

		/* For any results, category pages, etc... */
		#recipe-items .recipe-item h3 { float:left; width:70%; }
		#recipe-items .recipe-item img { float:right; width:25%; margin-left:5%;}
		#recipe-items .recipe-item .recipe-teaser { clear:left; width:70%; }

		/* For a detail page... */
		#recipe-page .recipe-photo { 
		 float:right;
		 width:50%;
		 margin:0 0 1em 2em;
		}
		#recipe-page .recipe-photo img {
		 width:90%;
		 display:block;
		 margin:0 auto;
		}
	}
	@media only screen and (min-width: 960px) {

		/* Recipe Top Navigation... */
		#recipe-top-navigation .grid-wrap {
		 margin:0 -1em; /* the same as your gutter: must match the padding of the grid-col. */
		}
		#recipe-top-navigation .grid-col { 
		 padding:0 1em; /* this is your gutter between columns: must match the negative margin of the grid-wrap. */ 
		}
				#recipe-top-navigation .grid-col:nth-child(1) { width:40%; }
				#recipe-top-navigation .grid-col:nth-child(2) { width:30%; }
				#recipe-top-navigation .grid-col:nth-child(3) { width:30%; }
	}





/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */