// Adam 2
// Bootswatch 
// -----------------------------------------------------

#grid {
    .core  {
        .span(@gridColumns) {
            width: (@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns - 1));
        }
    }
}

a {
	color: @secondary;
	
	&:hover {
		color: @secondaryDark;
	}
}

.dropdown-menu li > a{
	color:#fff;
}

.blockHeading{
	.rightSideHeader();
	.border-radius( 6px );
}

img.thumb{
	width:50%;
	float: left;
	margin-right:15px;
	max-width: 180px;
}

.lt-ie9, .lt-ie10{
	body{
		#bodyPadding{
			.navbar{
				.navbar-inner{
					.container{
						height: 145px;
					}
				}
			}
		}
	}
}

h1, h2, h3, h4, h5, h6{
	line-height: 1.1em;
	margin-bottom: 12px;
	
	&.sectionStart{
		margin-top: 0;
	}
}

body{
  background: url('/Kickstrap/img/bgBlack.jpg') repeat;
  // background: url("/Kickstrap/img/siteBG-fcicecream.jpg") no-repeat center top #fff;
		// background-size:cover;
		// background-attachment: fixed;
		// padding-bottom:30px;
  
  #weeklyAdBtn{
	float: right;
	margin-top:20px;
	margin-right:0;
	width:230px;
  }
  
  #contentWrapper {
		#footer {
			color:@secondary;
			
			&:before {
				background: url("/Kickstrap/img/ValleyMarketWood.jpg") no-repeat center top #fff;
				height: 30px;
			    display: block;
			    margin-top: -40px;
			    margin-bottom: 20px;
			}

			a {
				color: @secondary;
			}
		}
	}
  
  #bodyPadding{
	.row{
		margin-left:0;
	}
	
	.container{
		#blankBuffer{
			height: 0px;
		}
	}
	
	.woodBG {
		background: url("/Kickstrap/img/ValleyMarketWood.jpg") no-repeat center top #fff;
		height: 30px;
	    display: block;
	    margin-bottom: 20px;
	    margin-top:-20px;
	}

	.navbar {
		margin-bottom:30px;

		li {
			line-height: 20px;
			/*line-height: 22px;*/ /* uncomment if you want the nav to be below the brand */
			font-size: 15px;
		}
		
		.nav{
			/*margin-top:49px;*/
		}
		
		.nav > li > a {
			padding: 10px 20px;
			font-family: @headingsFontFamily;
			color:@secondary;
			
			&:hover{
				#gradient > .vertical(@secondaryDark, @secondary);
				color:#fff;
				text-shadow: none;
			}
		}
		
		.nav-buttons {
			li {
				a {
					color: #fff;
					text-shadow: none;
					
					&:hover {
						color:@secondary;
					}
				}
			}
		}
		
		#facebookNav{
			font-size: 50px;
			margin-left: 0;
			margin-top:1px;
			
			#facebookLink{
				color:@primary;
				
				&:hover{
					background: none;
					text-decoration: none;
				}
			}
		}
		
		#departNav{
			margin-top:-30px;
		}

		.navbar-inner{
			min-height: @navbarHeight;
			padding: 0 0;
			background: none;
			border: none;
			
			// Prevent floats from breaking the navbar
			.clearfix();
			
			.container{
				height:116px;
				background-color: #efe7de;
				/*border-bottom: 16px solid @secondaryDark;*/
				position:relative;
				
				.brand {
					padding: 8px 20px 2px 10px;
					margin-left:11px;
					font-family: @headingsFontFamily;
					text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
					max-width:50%;
					width:175px\9;
					/*float: none;*/ /* uncomment if you want the nav to be below the brand */
					
					img{
						width:175px;
					}
				}
				
				.nav-collapse{
					clear:both;
					
					.nav{
					  margin-top:4px;
					  margin-bottom: -10px;
					  #gradient > .vertical(@primaryDark, darken(@primaryDark, 8%));
					  width:100%;
					}
				}
				
				.nav.pull-right{
					margin:-105px 20px 0 0;
					
					li{
						margin-left: 10px;
					}
					
					li a:hover{
						#gradient > .vertical(@primaryDark, @primary);
					}
				}
			}
		}
	
		&-inverse {
	
			.navbar-search .search-query {
				color: @textColor;
			}
		}
	}
	
	#mainContent{
		padding: 0;
		
		#onlineRefillContainer{
			width: 48%;
			float: left;
			
			h5{
				margin-bottom: 0;
			}
			
			p{
				padding-left: 20px;
				margin: 0;
			}
		}
		
		#gasolineContainer{
			width: 48%;
			float: right;
			
			h5{
				margin-bottom: 0;
			}
			
			p{
				padding-left: 20px;
				margin: 0;
			}
		}
		
		#contactContainer{
			.photoAndCaption{
				width: 50%;
				clear:both;
			}
		}
		
		.storeDeals{
			margin-top: 35px;
		}
		
		#theStoreInfo{
			#mapContain{
				float:left;
				margin-top: 15px;
			}
			
			#storeInfoContain{
				float: left;
				margin-top: 4px;
			}
			
			#theServicesContainer{
				float: left;
				margin-left:20px;
			}
			
			h5{
				margin: 12px 0 0;
			}
			
			p{
				margin: 0;
				
				&.storeInfoBtnContain{
					margin-top:12px;
				}
			}
		}
		
		.carousel-buffer{
			background: none repeat scroll 0 0 rgba(0, 0, 0, 0.85);
			background-color: #3c3c3c;
			height:30px;
			margin-top:68px;
			text-align: center;
			i, span{
			  margin-top:7px;
			  color: @grayLightMid;
			  
			  &:hover{
			  color:#ffffff;
			  cursor: pointer;
			  }
			}
		}
		
		.specialContain{
			#gradient > .vertical(@grayLightMid, @white);
			margin-bottom:15px;
			
			h4.header{
				.rightSideHeader();
				.border-radius(6px);
				margin-bottom: 12px;
			}
			
			.specialOffset{
				margin:20px 20px 5px;
			}
		}
		
		#emailContain{
			margin-bottom:15px;
			
			h4.header{
				.rightSideHeader();
				.border-radius(6px);
				margin-bottom: 12px;
			}
			
			#emailOffset{
				margin:20px 20px 5px;
			}
		}
		
		#employContain{
			h3, h4, h5{
				margin-bottom:0;
				margin-top: 0;
			}
			
			.formSection{
				margin-bottom: 30px;
				
				.formEntry{
					margin-left:20px;
					float:left;
					width: 45%;
					
					textarea{
						width: 90%;
					}
					
					&.fullWidth{
						width:95%;
					}
				}
			}
		}
		
		#departmentOffset{
			.deptMainPhoto{
				float: left;
				width:48%;
				margin-right: 20px;
				margin-bottom: 20px;
			}
			
			.deptMainPhotoOdd{
				float: left;
				width:48%;
				margin-bottom: 20px;
			}
			
			.deptMainPhotoSmall{
				float: left;
				width:22%;
				margin-bottom: 10px;
				margin-right: 10px;
			}
		}
		
		.sideContentContain{
			width: 100%;
			margin-bottom: 30px;
			
			.sideContent{
				
				margin: 15px 15px 0 20px;
			}
		}
		
		#theDepartments{
			margin-top:30px;
			padding-top:10px;
			border-top: 1px solid @grayLightMid;
			
			#aboutUs{
				/*border-bottom: 1px solid @grayLightMid;*/
				margin-bottom: 30px;
				
				img{
					width: 260px;
					float: left;
					margin: 0 20px 20px 0;
					
					&.photoRight{
						width:48%;
						margin-right:0;
					}
					
					&.photoLeft{
						width:48%;
						margin-right:3%;
					}
				}
				
				.aPic{
					float: left;
					margin-right: 2%;
					
					img{
						margin-bottom: 20px;
						height:159px;
						width: auto;
					}
				}
				
				#currentPhoto{
					width: 45%;
					margin-left: 20px;
					float: right;
				}
				
				#goGreenImg{
					width:100%;
					margin: 0;
					float: none;
				}
			}
			
			.left{
				width: 47%;
				padding-right: 10px;
				float: left;
			}
			
			.left .aDepartment:last-child, .right .aDepartment:last-child{
				border-bottom: 0 solid #fff;
			}
			
			.right{
				width:47%;
				padding-left: 10px;
				float: right;
			}
			
			
			.aDepartment{
				width:100%;
				float: left;
				margin-bottom: 15px;
				padding-bottom: 15px;
				border-bottom: 1px solid @grayLightMid;
				
				h3{
					line-height: 1em;
					margin-bottom: 6px;
					margin-top:0;
				}
				img.thumb{
					width:50%;
					float: left;
					margin-right:15px;
					max-width: 180px;
				}
			}
		}
		
		#rightSidebarCollapse{
			margin:0;
			
			.accordion-group{
				border: none;
				margin-bottom: 15px;
				
				.accordion-heading .accordion-toggle{
					.rightSideHeader();
					.border-radius( 6px );
					
					span.padding-left{
					  padding-left: 12px;
					}
				}
			  
				.accordion-body{
					margin-top:0px;
					padding-top:0px;
					h5{
						margin-top:0;
					}
					
				}
				.accordion-inner{
					padding-top:0;
					padding-left:20px;
					border: none;
					h5{
						color:@grayDarker;
						margin-bottom: 0px;
						margin-top:8px;
					}
					p{
						margin-left: 12px;
						margin-bottom: 2px;
					}
				}
			}
			
			h4{
				color:@secondary;
				margin: 0;
			}
			
			#mapContain{
				margin-top: 15px;
			}
			
			#storeInfoContain{
				h4.specialHeader{
					color: @black;
					margin-top:15px;
					margin-bottom: 5px;
				}
			}
			
		}
		
		
		
		#sharegroupContain{
			margin:0 0 30px;
			
			h4{
				.rightSideHeader();
				margin-bottom: 12px;
			}
		}
		
		.feedFacebookWall{
			margin:0 0 30px;
			#gradient > .vertical(@grayLightMid, @white);
			position: relative;
			
			h4{
				.rightSideHeader();
				margin-bottom: 12px;
			}
			
			#facebookWall{
				padding-top:50px;
			}
			
			#facebookFollow{
				padding-top:0;
				margin:0 20px;
			}
			
			.fb-control {
				position: absolute;
				top: 60px;
				left: 15px;
				width: 25px;
				height: 25px;
				margin-top: -17px;
				font-size: 45px;
				font-weight: 100;
				line-height: 18px;
				color: @white;
				text-align: center;
				background: @grayDarker;
				border: 3px solid @white;
				.border-radius(23px);
				.opacity(50);
			  
				// we can't have this transition here
				// because webkit cancels the carousel
				// animation if you trip this while
				// in the middle of another animation
				// ;_;
				// .transition(opacity .2s linear);
			  
				// Reposition the right one
				&.right {
				  left: auto;
				  right: 15px;
				}
			  
				// Hover state
				&:hover {
				  color: @white;
				  text-decoration: none;
				  .opacity(90);
				}
			}
		}
		
		#socialConnect{
			margin:0 0 15px;
			#gradient > .vertical(@grayLightMid, @grayLighter);
			#socialConnectHeader{
				.rightSideHeader();
			}
			
			p{
				font-size:55px;
				
				span{
					&:first-of-type{
						margin-left:20px;
					}
					margin: 6px 4px;
					
					a{
						&:hover{
							text-decoration: none;
						}
					}
				}
			}
		}
	}
  }
}


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

@media (max-width: 995px) {
	body{
		#bodyPadding{
			#mainContent{
				
				#socialConnect{
					p{
						font-size: 45px;
						span{
							margin: 1% 4%;
							
							&:first-of-type{
								margin-left:7%;
							}
						}
					}
				}
				
				#theDepartments{
					.left{
						/*width:auto;*/
						margin-bottom: 15px;
						padding-bottom: 15px;
						border-bottom: 1px solid @grayLightMid;
					}
					
					.right{
						/*width:auto;*/
					}
					
					.left .aDepartment:last-child{
						padding-bottom: 0;
						margin-bottom: 0;
					}
				}
			}
		}
	}
}

@media (max-width: 767px) { //convert the nav to a button
	input.span4, textarea.span4, .uneditable-input.span4{
		width:94%;
	}
	
	body{
		.ui-widget-content{
			left:27px !important;
			width:78%;
		}
		
		#bodyPadding{
			.navbar{
				.navbar-inner{
					.container{
						height: auto;
						
						.nav-collapse{
							background: @grayDark;
							
							
						}
					}
				}
			}
			
			.container{
				padding:0 2%;
				
				#blankBuffer{
					display: none;
				}
			}
			
			#mainContent{
				.leftSide, .rightSide{
					width:98%;
				}
				
				
				
				.feedFacebookWall{
					#facebookWall{
						.fb-wall-box{
							width:100%;
							float: left;
						}
					}
				}
				
				
			}
		}
	}
}

@media (max-width: 580px) {
	body{
		#bodyPadding{
			#mainContent{
				.leftSide, .rightSide{
					width:96%;
				}
				
				#siteContentContainer, #promotionContain{
					.rightSide{
						margin-left: 0;
						padding-left: 8px;
						padding-right: 0;
					}
				}
				
				#departmentOffset{
					.deptMainPhoto{
						float: left;
						width:46%;
						margin-right: 10px;
						margin-bottom: 20px;
					}
					
					.deptMainPhotoOdd{
						float: left;
						width:46%;
						margin-bottom: 20px;
					}
					
					.deptMainPhotoSmall{
						float: left;
						width:46%;
						margin-bottom: 10px;
						margin-right: 10px;
					}
				}
				
				
				
				
				
				#theDepartments{
					.left{
						width:auto;
						margin-bottom: 15px;
						padding-bottom: 15px;
						border-bottom: 1px solid @grayLightMid;
					}
					
					.right{
						width:auto;
					}
					
					.left .aDepartment:last-child{
						padding-bottom: 0;
						margin-bottom: 0;
					}
				}
			}
		}
	}
}