// Recipes
// 
// -----------------------------------------------------

body{
  
	#bodyPadding{
	
		#mainContent{
			
			#glossaryOffset{
				width:100%;
				
				
				.sticky {
				   position: fixed;
				   top: 200px;
				   left: 888px;
				}
				
				.whiteText{
					color: @white;
				}
				
				.stickyNav {
					position: fixed;
					top: -6px;
					width:71.75%;
					height:40px;
					background-color:@secondary;
					padding-top:15px;
				}
				
				.anItem{
					padding-bottom:25px;	
					margin-bottom:30px;
					border-bottom: 1px @grayLighter solid;
					position:relative;
					width: 94%;
				}
				
				#leftCol{
					width:44%;
					padding: 0 1% 75px 1%;
					margin-right:3%;
					float: left;
				}
				
				#rightCol{
					width:44%;
					padding: 0 1% 75px 1%;
					margin-left: 1%;
					float: left;
				}
				
				.letterNav{
					font-size:16px;
					margin:0 16px 0 0;
					float:left;
				}
				
				.letterNav a{
					color:#888;	
				}
				
				.underline{
					border-bottom: 1px @primary solid;
					font-weight:bold;	
				}
				
				.underline a{
					color:@primary;
				}
				
				#alphaNav, #phoneAlphaContain{
					margin:5px 0 15px -20px;
					height:40px;
					padding-left:25px;
					z-index:1000;
					width:916px;
					
				}
				
				#phoneAlphaContain{
					#phoneGoTo{
						cursor: pointer;
					}
				}
				
				.half{	
					width:50%;
					height:23px;
				}
				
				.showRecipes{
					cursor: pointer;
				}
				
				.recipeList{
					clear:both;
					
					
					
					li{
						/*margin-bottom:-10px;
						color:#8fc743;*/
						color:#999;
						margin-left: 20px;
						
						&.firstLI{
							padding-top:0px;
						}
					}
				}
				
				#theShadow{
					position:absolute;
					z-index:-1;
					margin-top:-7px;
				}
			}
			
			#recipeOffset{
				width: 100%;
				
				#leftCol{
					width:48%;
					margin-right:3%;
					margin-left: 0;
					float: left;
				}
				
				#rightCol{
					width:48%;
					margin-left: 1%;
					float: left;
				}
				
				#recipeContainer{
					width:63%;
					float: left;
					h2{
						margin-top: 0;
					}
				}
				
				#produceContainer{
					margin-left:4%;
					width:31%;
					float: left;
				}
				
				img.theRecipe{
					margin-right:20px;
				}
				
				#recipeTitleBlock{
					margin-top:-12px;
					width:53%;
				}
				
				.categoryHolder{
					width:100%;
					margin:-10px 0 15px 0;
					padding-bottom:35px;
					/*border-bottom:10px solid #8FC743;*/
					/*float:left;*/
				}
				
				.featureRecipe{
					width:100%;
					float:left;
					position:relative;
					margin-bottom:15px;
					
					img{
						width:49%;
						float: left;
					}
					
					p{
						font-size:16px;
						padding:5px 10px 0 0;
						text-align:center;
					}
					
					.recipeInfo{
						float: left;
						width: 40%;
						position: static;
					}
				}
			  
				.aRecipe{
					width:30%;
					float:left;
					margin-left:15px;
					position:relative;
					margin-bottom:20px;
					
					p{
						font-size:16px;
						padding:5px 10px 0 0;
						text-align:center;
					}
					
					img{
						width: 100%;
					}
					
					&.noMargLeft{
						margin-left:0;
					}
				}
				
				.theShadow{
					z-index:-1;
					width:205px;
				}
				
				.theShadow2{
					position:absolute;
					z-index:-1;
					margin:-9px 0 0 0;
				}
				
				.theShadow3{
					position:absolute;
					z-index:-1;
					margin:-12px 0 0 0;
				}
				
				.recipeInfo{
					width:205px;
					margin-left:15px;
					position: absolute;
					top:0;
					right:0;
					
					h3{
						font-size:18px;
						margin-top:-4px;
						margin-bottom:-10px;
						line-height: 22px;
					}
				}
				
				.smallRecipeInfo{
					position:absolute;
					top:0;
					left:0;
					background:url('/Kickstrap/img/recipes/fiftyBlack2.png') repeat;
					padding:10%;
					width:80%;
					height:80%;
					
					h3{
						font-size:12px;
						line-height:16px;
						color: @white;
					}
				}
			}
			
			#featuredRecipe{
				margin:0 0 15px;
				
				#recipeOffset{
					width: inherit;
					margin:10px 20px;
				}
				
				h3{
					line-height: 1em;
					margin-bottom: 12px;
					margin-top:-2px;
				}
				
				h4.header{
					.rightSideHeader();
					.border-radius(6px);
					margin-bottom: 12px;
				}
				
				img{
					float: left;
					margin-right: 15px;
				}
			}
		}
	}
}


// MEDIA QUERIES
// -----------------------------------------------------

@media (max-width: 995px) {
	body{
		
		#bodyPadding{
			
			#mainContent{
				
			}
		}
	}
}

@media (max-width: 780px) { //convert the nav to a button
	body{
		
		#bodyPadding{
			
			#mainContent{
				#glossaryOffset{
					.stickyNav{
						left: 20px;
					}
					
					#alphaNav, #phoneAlphaContain{
						width:103%;
						
						#column3{
							clear:both;
						}
					}
					
				}
			}
		}
	}
}

//recipe specific
@media (max-width: 640px) {
  body{
	#bodyPadding{
	  #mainContent{
		#glossaryOffset{
			#leftCol{
				width: 100%;
			}
			
		}
		
		#recipeOffset{
		  #leftCol{
			width: 96%;
		  }
		  
		  .aRecipe{
			width:17%;
			margin-left: 0;
			margin-right: 3%;
			
			&.noMargLeft{
			  width:17%;
			}
		  }
		  
		  .featureRecipe{
			width:100%;
			
			img{
			  width:37%;
			}
		  }
		}
	  }
	}
  }
}

@media (max-width: 580px) {
	body{
		
		#bodyPadding{
			
			#mainContent{
				#glossaryOffset{
					.sticky {
					   position: fixed;
					   top: 200px;
					   left: 888px;
					}
					
					
					.stickyNav {
						position: fixed;
						top: -6px;
						width:95%;
						height:auto;
						background-color:@secondary;
						padding-top:10px;
					}
					
					.anItem{
						padding-bottom:25px;	
						margin-bottom:30px;
						border-bottom: 1px @grayLighter solid;
						position:relative;
						width: 100%;
					}
					
					#leftCol{
						width:100%;
						padding: 0 1%;
						margin-right:0%;
					}
					
					#rightCol{
						width:100%;
						padding: 0 1% 1%;
						margin-left: 1%;
						float: left;
					}
					
					.letterNav{
						margin-bottom: 6px;
					}
					
					.letterNav a{
					}
					
					.underline{
					}
					
					.underline a{
					}
					
					#alphaNav, #phoneAlphaContain{
						height:auto;
						margin-left: -30px;
						width: 103%;
						
						&.stickyNav{
							width:96%;
						}
						
						#column3{
							clear:both;
						}
					}
					
					.half{	
						
					}
					
					.showRecipes{
						
					}
					
					.recipeList{
						
						li{
							margin-bottom: 10px;
							font-size: 15px;
							
							&.firstLI{
							}
						}
					}
					
				}
				
				
				
				#recipeOffset{
					width: 100%;
					
					#headerContain{
						margin-bottom: 20px;
						#searchContainer{
							margin: 0;
							float: left;
						}
					}
					
					#leftCol{
						width:auto;
						margin-right:0;
						float: none;
					}
					
					#rightCol{
						width:auto;
						margin-right:0;
						float: none;
					}
					
					#recipeContainer{
						width:auto;
						float: none;
						
						h2{
							margin-top: 0;
						}
					}
					
					#produceContainer{
						margin-left:0;
						width:auto;
						float: none;
						border-top: 4px @primary solid;
						padding-top:20px;
						margin-top: 30px;
					}
					
					img.theRecipe{
					}
					
					#recipeTitleBlock{
						
					}
					
					.categoryHolder{
						padding-bottom: 0;
					}
					
					.featureRecipe{
						
						.recipeInfo{
							width: 45%;
							
							h3{
								font-size: 20px;
							}
						}
						
						p{
							
						}
					}
				  
					.aRecipe{
						width:46%;
						margin-left: 0;
						margin-right: 3%;
						
						p{
							
						}
						
						img{
						}
						
						&.noMargLeft{
							width:46%;
							margin-left: 0;
							margin-right: 3%;
						}
					}
					
					.theShadow{
						
					}
					
					.theShadow2{
						
					}
					
					.theShadow3{
						
					}
					
					.recipeInfo{
						
						
						h3{
							
						}
					}
					
					.smallRecipeInfo{
						display:block;
						overflow: hidden;
						height:65px;
						position: static;
						padding-top:1px;
						
						h3{
							font-size:15px;
							line-height: 20px;
						}
					}
				}
			}
		}
	}
}
