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

//COMMON STYLES FOR ALL SHARE PORTAL SITES
h1,h2,h3,h4,h5,h6{
	font-family: 'Inder', sans-serif;
}

.loading{
	background:url('/css/loader-small.gif') no-repeat top center;
	height: 20px;
}

.floatLeft{
	float: left;
}

.floatRight{
	float: right;
}

.floatLeftImg{
	float: left;
	padding: 5px 20px 20px 0;
}

.floatRightImg{
	float: right;
	padding: 5px 0 20px 20px;
}


.offsetPadLeft{
	padding-left:20px;
}

.offsetPadRigh{
	padding-right:20px;
}

.noMargLeft, body #bodyPadding #mainContent #recipeOffset .aRecipe.noMargLeft{
	margin-left:0px;
}

.negMargTop{
	margin-top:-16px;
}

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

//END COMMON STYLES

// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
  display: none;
  visibility: hidden;
}

// Visibility utilities

// For desktops
.visible-phone     { display: none !important; }
.visible-tablet    { display: none !important; }
.hidden-phone      { }
.hidden-tablet     { }
.hidden-desktop    { display: none !important; }
.visible-desktop   { display: inherit !important; }

// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
  // Hide everything else
  .hidden-desktop    { display: inherit !important; }
  .visible-desktop   { display: none !important ; }
  // Show
  .visible-tablet    { display: inherit !important; }
  // Hide
  .hidden-tablet     { display: none !important; }
}

// Phones only
@media (max-width: 767px) {
  // Hide everything else
  .hidden-desktop    { display: inherit !important; }
  .visible-desktop   { display: none !important; }
  // Show
  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
  // Hide
  .hidden-phone      { display: none !important; }
}


.rightSideHeader(){
	margin-top:0;
	margin-bottom: 2px;
	padding:7px 15px;
	#gradient > .vertical(@primary, @primaryDark);
	color: #ffffff;
}

.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);
	}
}

.lt-ie9 .navbar.navbar-fixed-top{
	left:auto;
	right: auto;
}

.lightLink{
	color: @grayLightMid;
	
	&:hover{
		color: @white;
	}
}


body{
  
  #contentWrapper{
	background: #ffffff;
	width: 940px;
	margin:0 auto;
	-webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, .6);
        
    box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, .6);
		
	#footer{
		text-align: center;
		margin:45px 0 30px;
		padding-top: 15px;
		#gradient > .vertical(@primary, @primaryDark);
		color:#fff;
		
		a{
			color: #fff;
			
			&:hover{
				color: @secondaryDark;
			}
		}
	}
  }
  
  #bodyPadding{
	
	.navbar .nav > li > .dropdown-menu:before{
		display: none;
	}
	
	.navbar .nav > li > .dropdown-menu:after{
		display: none;
	}
	
	.navbar {
		.nav > li:first-child{
			padding-left:10px;
		}
		
		ul.dropdown-menu{
			list-style: none;
			background-color: @secondary;
			top: 94%;
			border:none;
			border-radius: 0 0 6px 6px;
			box-shadow: none;
		}
		
		ul.nav li.dropdown > ul.dropdown-menu{
			display: none;
		}
		ul.nav li.dropdown:hover > ul.dropdown-menu{
			display: block;
		}
	
		.search-query {
			border: 1px solid darken(@linkColor, 10%);
			line-height: normal;
		}
	
		.navbar-text {
			padding: 19px 10px 18px;
			line-height: 13px;
			color: rgba(0, 0, 0, 0.5);
			text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
		}
		
		.navbar-inner{
			
		}
	
		&-inverse {
	
		}
	}
	
	#mainContent{
		padding: 0 20px;
		min-height: 500px;
		
		.hotDealContainer{
			width:95%;
			font-size: 15px;
			
			.alert-primary{
				background-color: @primary;
				border-color: @primaryDark;
				color: @white;
				text-shadow: none;
				
				a{
					color:lighten(@primary, 36%);
					
					&:hover{
						color: lighten(@primary, 48%);
					}
				}
			}
		}
		
		#hotDealContainer{
			width:95%;
			font-size: 15px;
			
			#oneDeal{
				width:97%;
				margin-bottom:30px;
				padding-bottom:30px;
				border-bottom:1px solid @grayLight;
				
				img{
					max-width: 100%;
				}
			}
			
			.alert-primary{
				background-color: @primary;
				border-color: @primaryDark;
				color: @white;
				text-shadow: none;
				
				a{
					color:lighten(@primary, 36%);
					
					&:hover{
						color: lighten(@primary, 48%);
					}
				}
			}
		}
		
		#exclusiveBrands{
			.accordion-group{
				border: none;
				
				.accordion-heading{
					border-bottom: 3px solid @primary;
					padding-bottom: 0;
					height:60px;
					position: relative;
					
					&:hover{
						background-color: @grayLighter;
						border-bottom: 3px solid @grayLighter;
					}
					
					&.viewed{
						background: @primary;
						margin-top: 10px;
						padding-bottom: 0;
						.border-top-radius(10px);
						
						&> a{
							color: #fff;
						}
						
						.smallPhoto{
							/*position: absolute;
							top: 5px;
							right: 5px;*/
							float: left;
							margin: 5px 10px 0;
							display: none;
						}
					}
					
					a{
						font-size: 18px;
						line-height: 42px;
					}
					
					.smallPhoto{
						/*position: absolute;
						top: 5px;
						right: 5px;*/
						float: left;
						margin: -3px 10px 0 0;
						display: block;
					}
				}
				
				.accordion-body{
					border: none;
					
					&.in{
						border-bottom: @primary 15px solid;
						.border-bottom-radius(10px);
						margin-bottom:10px;
					}
					
					.accordion-inner{
						border: none;
					}
				}
			}
		}
		
		#myCarousel{
			min-height: 290px;
			
			.carousel-inner{
				margin-top: -1px;
				height:390px;
				
				.item{
					height: 100%;
					
					.carousel-caption {
						position: absolute;
						bottom: 0;
						margin-top: -1px;
						min-height:85px;
						
						p{
							float: left;
							max-width: 80%;
							margin-bottom: 0;
							
							&.readMoreBtn{
								float: right;
								position: relative;
								bottom: 6px;
							}
						}
					}
				}
			}
		}
		
		#siteContentContainer, #promotionContain{
			width:98%;
			
			.leftSide.span12{
				border: none;
				width:890px;
				padding-right: 15px;
			}
			.leftSide{
				padding-right:40px;
				padding-left:15px;
				border-right: none;
			}
			.rightSide{
				float: right;
				padding-right:15px;
				margin-left:0;
			}
		}
	}
  }
}


.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner{
  box-shadow: none;
}


.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container{
	width: 940px;
}

.hideObject{
    display: none;
}

.lt-ie9 .navbar.navbar-fixed-top{
	left:auto;
	right: auto;
}



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

@media (max-width: 995px) {
	body #contentWrapper, .navbar-inner .container, #bodyPadding, .container, .row{
		width:auto;
	}
	
	.row{
		margin-left:-2.25%;
	}
	
	[class*="span"]{
		margin-left: 2.25%;
	}
	
	.span12{
		width:100%;
	}
	
	.span11{
		width:91%;
	}
	
	.span10{
		width:83%;
	}
	
	.span9{
		width:75%;
	}
	
	.span8{
		width:66%;
	}
	
	.span8.leftSide{
		width:62%;
	}
	
	
	.span7{
		width:58%;
	}
	
	.span6{
		width:49%;
	}
	
	.span5{
		width:41%;
	}
	
	.span4{
		width:33%;
	}
	
	.span3{
		width:24%;
	}
	
	.span2{
		width:16%;
	}
	
	.span1{
		width:8%;
	}
	// Negative indent the now static "fixed" navbar
	
	
	body{
		#bodyPadding{
			
			
			.navbar-fixed-top,
			.navbar-fixed-bottom,
			.navbar-static-top {
				margin-left: 0px;
				margin-right: 0px;
			}
		  
			.navbar {
				.navbar-inner{
					padding: 0;
					
					#weeklyAdBtn{
						position: static;
						float: right;
						top:0;
						left:0;
						margin-top:31px;
					}
				}
			}
		  
			#mainContent{
				.leftSide{
					width: 61.75%;
					margin-left: 2%;
				}
				
				.rightSide{
				  width:32%;
				}
				
				#hotDealContainer{
					width:99.5%;
				}
				
				#siteContentContainer, #promotionContain{
					.leftSide.span12{
						width:100%;
						padding-right: 0;
					}
					
					.leftSide{
						width:58%;
						padding-right:4%;
						padding-left: 0;
					}
					.rightSide{
						width:30%;
						float: right;
						padding-left: 0;
						padding-right: 0;
						//padding-left: 2.5%;
					}
				}
			}
		}
	}
}

@media (max-width: 780px) { //convert the nav to a button
	  .nav-collapse {
		-webkit-transform: translate3d(0, 0, 0); // activate the GPU
	  }
	  
	  // Unfix the navbars
	  .navbar-fixed-top,
	  .navbar-fixed-bottom {
		position: static;
	  }
	  .navbar-fixed-top {
		margin-bottom: @baseLineHeight;
	  }
	  .navbar-fixed-bottom {
		margin-top: @baseLineHeight;
	  }
	  .navbar-fixed-top .navbar-inner,
	  .navbar-fixed-bottom .navbar-inner {
		padding: 0px;
	  }
	  .navbar .container {
		width: auto;
		padding: 0;
	  }
	  // Account for brand name
	  .navbar .brand {
		padding-left: 10px;
		padding-right: 10px;
		margin: 0 0 0 -5px;
		
	  }
	
	  // COLLAPSIBLE NAVBAR
	  // ------------------
	  // Nav collapse clears brand
	  .nav-collapse {
		clear: both;
	  }
	  // Block-level the nav
	  .nav-collapse .nav {
		float: none;
		margin: 0 0 (@baseLineHeight / 2);
	  }
	  .nav-collapse .nav > li {
		float: none;
	  }
	  .nav-collapse .nav > li > a {
		margin-bottom: 2px;
	  }
	  .nav-collapse .nav > .divider-vertical {
		display: none;
	  }
	  .nav-collapse .nav .nav-header {
		color: @navbarText;
		text-shadow: none;
	  }
	  // Nav and dropdown links in navbar
	  .nav-collapse .nav > li > a,
	  .nav-collapse .dropdown-menu a {
		padding: 9px 15px;
		font-weight: bold;
		color: @navbarLinkColor;
		.border-radius(3px);
	  }
	  // Buttons
	  .nav-collapse .btn {
		padding: 4px 10px 4px;
		font-weight: normal;
		.border-radius(@baseBorderRadius);
	  }
	  .nav-collapse .dropdown-menu li + li a {
		margin-bottom: 2px;
	  }
	  .nav-collapse .nav > li > a:hover,
	  .nav-collapse .dropdown-menu a:hover {
		background-color: @navbarBackground;
	  }
	  .navbar-inverse .nav-collapse .nav > li > a,
	  .navbar-inverse .nav-collapse .dropdown-menu a {
		color: @navbarLinkColor;
	  }
	  .navbar-inverse .nav-collapse .nav > li > a:hover,
	  .navbar-inverse .nav-collapse .dropdown-menu a:hover {
		background-color: @navbarInverseBackground;
	  }
	  // Buttons in the navbar
	  .nav-collapse.in .btn-group {
		margin-top: 5px;
		padding: 0;
	  }
	  // Dropdowns in the navbar
	  .nav-collapse .dropdown-menu {
		position: static;
		top: auto;
		left: auto;
		float: none;
		display: none;
		max-width: none;
		margin: 0 15px;
		padding: 0;
		background-color: transparent;
		border: none;
		.border-radius(0);
		.box-shadow(none);
	  }
	  .nav-collapse .open > .dropdown-menu { 
		display: block; 
	  }
	
	  .nav-collapse .dropdown-menu:before,
	  .nav-collapse .dropdown-menu:after {
		display: none;
	  }
	  .nav-collapse .dropdown-menu .divider {
		display: none;
	  }
	  .nav-collapse .nav > li > .dropdown-menu {
		&:before,
		&:after {
		  display: none;
		}
	  }
	  // Forms in navbar
	  .nav-collapse .navbar-form,
	  .nav-collapse .navbar-search {
		float: none;
		padding: (@baseLineHeight / 2) 15px;
		margin: (@baseLineHeight / 2) 0;
		border-top: 1px solid @navbarBackground;
		border-bottom: 1px solid @navbarBackground;
		.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
	  }
	  .navbar-inverse .nav-collapse .navbar-form,
	  .navbar-inverse .nav-collapse .navbar-search {
		border-top-color: @navbarInverseBackground;
		border-bottom-color: @navbarInverseBackground;
	  }
	  // Pull right (secondary) nav content
	  .navbar .nav-collapse .nav.pull-right {
		float: none;
		margin-left: 0;
	  }
	  // Hide everything in the navbar save .brand and toggle button */
	  .nav-collapse,
	  .nav-collapse.collapse {
		overflow: hidden;
		height: 0;
	  }
	  // Navbar button
	  .navbar .btn-navbar {
		display: block;
	  }
	
	  // STATIC NAVBAR
	  // -------------
	  .navbar-static .navbar-inner {
		padding-left:  10px;
		padding-right: 10px;
	  }
	
	  body #contentWrapper, .navbar-inner .container{
		width:auto;
	  }
	
	body{
		#bodyPadding{
			padding:0;
			
			.navbar{
				.nav{
					margin-top:0;
				}
				.navbar-inner{
					.container{
						.btn-navbar{
							margin:20px 20px 0 0;
						}
						
						#weeklyAdBtn{
							display: none;
						}
						
						.nav-collapse{
							
							&.in{
								padding:30px 0 20px;
							}
							
							margin-top:85px;
							margin-left:-10px;
							width:106%;
							
							.nav{
								margin-left: 0;
								padding-left: 10px;
								
								li{
									padding: 0;
									float:none;
									margin-right: 10px;
									
									&:first-child{
										padding: 0;
										margin-left:0;
									}
									
									a{
										padding:5px 10px;
										color:#fff;
									}
								}
								
								.dropdown-menu{
									background: none;
									display: block;
									
									li{
										float: none;
										a{
											&:hover{
												#gradient > .vertical(@secondaryDark, @secondary);
											}
										}
									}
								}
							}
						}
					}
				}
			}
			
			.container{
				padding:0 2%;
				
				#blankBuffer{
					display: none;
				}
			}
			
			#mainContent{
				.leftSide{
					width: 61.75%;
					margin-left: 2%;
				}
				
				.rightSide{
				  width:32%;
				}
				
				#myCarousel{
					min-height:240px;
					
					.carousel-inner{
						height:324px;
						
						.item{
							.carousel-caption {
								min-height:81px;
								
								p{
									max-width: 70%;
									
									&.readMoreBtn{
										top: -8px;
									}
								}
							}
						}
					}
				}
				
				#siteContentContainer, #promotionContain{
					.leftSide.span12{
						width:100%;
						padding-right: 0;
					}
					
					.leftSide{
						width:95%;
						padding-right:4%;
						padding-left: 0;
						border: none;
						float: none;
						margin-bottom: 30px;
					}
					
					.rightSide{
						width:95%;
						padding-right:40px;
						padding-left:15px;
						margin-left:20px;
						float: none;
					}
				}
			}
		}
	}
	
	[class*="span"]{
		width: 100%;
	}
}

@media (max-width: 580px) {
	body{
		#bodyPadding{
			
			.navbar{
				.nav{
				}
				.navbar-inner{
					.container{
						.btn-navbar{
						}
						
						#weeklyAdBtn{
						}
						
						.nav-collapse{
							.nav{
								
								li{
									
									
									&:first-child{
									}
									
									a{
									}
								}
							}
						}
					}
				}
			}
			
			.container{
				
				#blankBuffer{
				}
			}
			
			#mainContent{
				.leftSide, .rightSide{
					width:97%;
				}
				
				#myCarousel{
					.carousel-inner{
						height:auto;
						
						.item{
							.carousel-caption {
								min-height:85px;
								position: relative;
								
								h4{
									max-width: 60%;
								}
								
								p{
									display: none;
									
									&.readMoreBtn{
										display: block;
										top: 18px;
										position: absolute;
										right: 4%;
									}
								}
							}
						}
					}
				}
				
				#siteContentContainer, #promotionContain{
					.rightSide{
						margin-left: 0;
						padding-left: 8px;
						padding-right: 0;
					}
				}
			}
		}
	}
	
	[class*="span"]{
		width:97%;
	}
}


