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

@rewardsPrimary: #0f3152;
@rewardsSecondary: #bc1b29;

svg#schoolBus {
	width: 18px;
	height: auto;
	margin-bottom: -3px;
}

svg#schoolBus .st0 {
	fill:@rewardsPrimary;
}

svg#schoolBus .st1 {
	fill:lighten(@rewardsPrimary,5%);
}

.panel {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-heading {
  padding: 10px 15px;
  margin: -15px -15px 15px;
  font-size: 17.5px;
  font-weight: 500;      
  background-color: #f5f5f5;
  border-bottom: 1px solid #dddddd;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.panel-footer {
  padding: 10px 15px;
  margin: 15px -15px -15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.panel-primary {
  border-color: #428bca;
}

.panel-primary .panel-heading {
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
}

.panel-success {
  border-color: #d6e9c6;
}

.panel-success .panel-heading {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.panel-warning {
  border-color: #fbeed5;
}

.panel-warning .panel-heading {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #fbeed5;
}

.panel-danger {
  border-color: #eed3d7;
}

.panel-danger .panel-heading {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.panel-info {
  border-color: #bce8f1;
}

.panel-info .panel-heading {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

// Danger (red)
.progress-primary .bar, .progress .bar-primary {
  #gradient > .vertical(@rewardsPrimary, @rewardsPrimary);
}
.progress-primary.progress-striped .bar, .progress-striped .bar-primary {
  #gradient > .striped(@rewardsPrimary);
}

.m-0 {
	margin:0 !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mr-30 {
	margin-right: 30px !important;
}

.ml-20 {
	margin-left: 20px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.ml-30 {
	margin-left: 30px !important;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-50 {
	margin-top: 50px !important;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.pie,
.c100 .bar,
.c100.p51 .fill,
.c100.p52 .fill,
.c100.p53 .fill,
.c100.p54 .fill,
.c100.p55 .fill,
.c100.p56 .fill,
.c100.p57 .fill,
.c100.p58 .fill,
.c100.p59 .fill,
.c100.p60 .fill,
.c100.p61 .fill,
.c100.p62 .fill,
.c100.p63 .fill,
.c100.p64 .fill,
.c100.p65 .fill,
.c100.p66 .fill,
.c100.p67 .fill,
.c100.p68 .fill,
.c100.p69 .fill,
.c100.p70 .fill,
.c100.p71 .fill,
.c100.p72 .fill,
.c100.p73 .fill,
.c100.p74 .fill,
.c100.p75 .fill,
.c100.p76 .fill,
.c100.p77 .fill,
.c100.p78 .fill,
.c100.p79 .fill,
.c100.p80 .fill,
.c100.p81 .fill,
.c100.p82 .fill,
.c100.p83 .fill,
.c100.p84 .fill,
.c100.p85 .fill,
.c100.p86 .fill,
.c100.p87 .fill,
.c100.p88 .fill,
.c100.p89 .fill,
.c100.p90 .fill,
.c100.p91 .fill,
.c100.p92 .fill,
.c100.p93 .fill,
.c100.p94 .fill,
.c100.p95 .fill,
.c100.p96 .fill,
.c100.p97 .fill,
.c100.p98 .fill,
.c100.p99 .fill,
.c100.p100 .fill {
	border-color: @rewardsSecondary !important;
}

.pie,
.c100 .bar,
.c100.s51 .fill2,
.c100.s52 .fill2,
.c100.s53 .fill2,
.c100.s54 .fill2,
.c100.s55 .fill2,
.c100.s56 .fill2,
.c100.s57 .fill2,
.c100.s58 .fill2,
.c100.s59 .fill2,
.c100.s60 .fill2,
.c100.s61 .fill2,
.c100.s62 .fill2,
.c100.s63 .fill2,
.c100.s64 .fill2,
.c100.s65 .fill2,
.c100.s66 .fill2,
.c100.s67 .fill2,
.c100.s68 .fill2,
.c100.s69 .fill2,
.c100.s70 .fill2,
.c100.s71 .fill2,
.c100.s72 .fill2,
.c100.s73 .fill2,
.c100.s74 .fill2,
.c100.s75 .fill2,
.c100.s76 .fill2,
.c100.s77 .fill2,
.c100.s78 .fill2,
.c100.s79 .fill2,
.c100.s80 .fill2,
.c100.s81 .fill2,
.c100.s82 .fill2,
.c100.s83 .fill2,
.c100.s84 .fill2,
.c100.s85 .fill2,
.c100.s86 .fill2,
.c100.s87 .fill2,
.c100.s88 .fill2,
.c100.s89 .fill2,
.c100.s90 .fill2,
.c100.s91 .fill2,
.c100.s92 .fill2,
.c100.s93 .fill2,
.c100.s94 .fill2,
.c100.s95 .fill2,
.c100.s96 .fill2,
.c100.s97 .fill2,
.c100.s98 .fill2,
.c100.s99 .fill2,
.c100.s100 .fill2 {
	border-color: @rewardsSecondary !important;
}

.pie,
.c100 .bar,
.c100.t51 .fill2,
.c100.t52 .fill2,
.c100.t53 .fill2,
.c100.t54 .fill2,
.c100.t55 .fill2,
.c100.t56 .fill2,
.c100.t57 .fill2,
.c100.t58 .fill2,
.c100.t59 .fill2,
.c100.t60 .fill2,
.c100.t61 .fill2,
.c100.t62 .fill2,
.c100.t63 .fill2,
.c100.t64 .fill2,
.c100.t65 .fill2,
.c100.t66 .fill2,
.c100.t67 .fill2,
.c100.t68 .fill2,
.c100.t69 .fill2,
.c100.t70 .fill2,
.c100.t71 .fill2,
.c100.t72 .fill2,
.c100.t73 .fill2,
.c100.t74 .fill2,
.c100.t75 .fill2,
.c100.t76 .fill2,
.c100.t77 .fill2,
.c100.t78 .fill2,
.c100.t79 .fill2,
.c100.t80 .fill2,
.c100.t81 .fill2,
.c100.t82 .fill2,
.c100.t83 .fill2,
.c100.t84 .fill2,
.c100.t85 .fill2,
.c100.t86 .fill2,
.c100.t87 .fill2,
.c100.t88 .fill2,
.c100.t89 .fill2,
.c100.t90 .fill2,
.c100.t91 .fill2,
.c100.t92 .fill2,
.c100.t93 .fill2,
.c100.t94 .fill2,
.c100.t95 .fill2,
.c100.t96 .fill2,
.c100.t97 .fill2,
.c100.t98 .fill2,
.c100.t99 .fill2,
.c100.t100 .fill2 {
	border-color: @rewardsSecondary !important;
}

.c100 > span.pointsContainer {
  .pointsNeeded {
	color: #d01105;
	opacity: .5;
  }
  
  .pointsBanked {
	color: @rewardsSecondary;
  }
  
  .pointsTotal {
	color: #ff8d00;
	opacity: .5;
  }
  
  small {
	font-size: 13px;
  }
}



body{
	#rewardsFaqs{
		.accordion-group{
			border: none;
			
			.accordion-heading{
				border-bottom: 3px solid @rewardsPrimary;
				padding-bottom: 0;
				height:60px;
				position: relative;
				
				&:hover{
					background-color: @grayLighter;
					border-bottom: 3px solid @grayLighter;
				}
				
				&.viewed{
					background: @rewardsPrimary;
					margin-top: 10px;
					padding-bottom: 0;
					.border-top-radius(10px);
					
					&> a h4{
						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: @rewardsPrimary 15px solid;
					.border-bottom-radius(10px);
					margin-bottom:10px;
				}
				
				.accordion-inner{
					border: none;
				}
			}
		}
	}

	#mainContent {

		.loginBox {
			.span6 {
				select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
					width: 94%;
					height:40px;
					padding: 0 3%;
				}

				select {
					width: 100%;
				}

				.input-append {
					width: 94%;

					.add-on {
						height: 21px;
						padding-top:13px;
					}
				}
			}
		}
		
		#rewardsFaqs{
			.accordion-group{
			
				.accordion-heading{
					border-bottom: 3px solid @primary;
					
					&.viewed{
						background: @primary;
					}
				}
				
				.accordion-body{
					&.in{
						border-bottom: @primary 15px solid;
					}
				}
			}
		}
	}

	#rewardsContent {
		h1, h2, h3, h4, #rewardsNavigation .nav a{
			color: @rewardsPrimary;
		}

		.width-100 {
			width:100%;
		}
		
		.span100 {
			width:95.75%;
		}
		
		.span71 {
			width:100%;
		}
		
		.span28 {
			width:28%;
		}
		
		.span12 {
			width:97%;
		}
		
		.span7 {
			width:53%;
		}
		
		.span5 {
			width:36.45%;
		}
		
		#rewardsNavigation {
			li {
				font-size: 18px;
				
				&.active {
					a {
						background: @rewardsPrimary;
						color:#fff;
					}
				}
				
				background: #f5f5f5;
			}
		}
		
		#rewardsPerks {
			.oneOffer {
				h4 {
					color: @rewardsSecondary;
				}
				
				p {
					margin-top: -10px;
					margin-bottom: 20px;
				}
				
				.offerDescription {
					width:70%;
				}
				
				.offerExpiration {
					width:27%;
					text-align:right;
				}
				
				.redeemNow {
					font-weight: bold;
					font-size: 18px;
					color: @green;
				}
			}
			
			#walletCreditsContainer{
				position: relative;
				
				.icon-question-sign {
				  top: 20px;
				  right: 10px;
				  opacity: 1;
				  font-size: 22.75px;
				}
				
				div.tooltip{
				  width: 200px;
				}
				
				div.tooltip-inner {
				  text-align: center;
				  -webkit-border-radius: 0px;
				  -moz-border-radius: 0px;
				  border-radius: 0px;
				  margin-bottom: 6px;
				  background-color: #505050;
				  width: 100px;
				}
				
				#creditsContainer{
					margin: 20px auto 40px;
					display: block;
					width:50%;
					height:120px;
					
					&.big {
						width:100%;
						max-height:350px;
					}
					
					.c100 > span {
						line-height: 1.1em;
						font-size: 25px;
						text-align: center;
						top:13%;
						white-space: pre-line;
					}
					
					.c100 {
						.fill {
							border-color: @rewardsPrimary;
						}
						
						&.big {
							& > span {
								line-height: 1.1em;
								font-size: 21px;
								text-align: center;
								top:20%;
								white-space: pre-line;
							}

							&:hover > span.pointsContainer {
							  width: 82% !important;
							  line-height: 25px;
							  font-size: 25px;
							  top:16%;
							  
							  .pointsNeeded {
								color: #d01105;
								opacity: 1;
							  }
							  
							  .pointsBanked {
								color: @rewardsSecondary;
							  }
							  
							  .pointsTotal {
								color: #ff8d00;
								opacity: 1;
							  }

							}
						}
						
						.pointsBanked, .pointsNeeded, .pointsTotal {
						  margin-bottom: -10px;
						  display: block;
						}
					}
				}
				
				p{
					margin: 0;
				}
				
				#walletEarnedContain{
				  text-align: center;
				  
				  p {
					font-size: 18px;
					line-height: 1.4em;
					
					&.small {
					  font-size: 13px;
					  line-height: 1.2em;
					}
				  }
				  
				  .walletEarned {
					  color: @rewardsPrimary;
					  font-size:32px;
				  }
				  
				  .lifetimeWalletEarned {
					  font-size:16px;
				  }
				}
			}
			
			#couponsInfoContainer {
				.btn [class^="icon-"] {
					line-height: 19px;
				}
				
				.same-height {
					height:30px;
					display: table-cell;
					vertical-align: bottom;
				}
				
				#couponsTotalContainer {
					#couponsTotal {
						font-size:18px;
						color: @rewardsPrimary;
					}
				}
			}
			
			#allCouponsContainer, #couponModal {
				.oneCoupon {
					padding:10px;
					position: relative;
					float: left;
					width: 29%;
					border: 1px #eee solid;
					margin: 0 1%;
					margin-bottom:20px;
					min-height: 125px;
					background: #fff;
					
					.couponClipped {
						position: absolute;
						bottom:0;
						left: 0;
						right: 0;
						background: @rewardsSecondary;
						z-index: 100;
						
						h5 {
							font-size: 16px;
							color:#fff;
							padding-left: 15px;
							margin: 5px;
						}
					}
					
					.icon-question-sign {
						position: absolute;
						top: 10px;
						right: 10px;
						font-size:14px;
						color: @grayLight;
						opacity: 1;
					}
					
					.icon-plus-sign {
						position: absolute;
						bottom: 0px;
						right: 6px;
						font-size:28px;
						color: @rewardsPrimary;
						opacity: 1;
					}
					
					div.tooltip {
					  z-index:2000;
					}
					
					.imageContain {
						float: left;
						margin-right: 4%;
						width:30%;
					}
					
					.couponInformation {
						position: relative;
						float: left;
						width:65%;
						
						.couponContent {
							position: absolute;
							top: 15px;
							left: 0;
							width:140px;
							
							h4 {
								font-size:22px;
								margin: 0 0 5px;
								font-weight: bold;
							}
							
							p {
								b {
									font-size: 12px;
								}
								
								font-size: 10px;
								line-height: 1.3em;
							}
						}
					}
				}
			}
			
			#couponModal {
			  .modal-body {
				max-height: 600px;
			  }
			  
			  .oneCoupon {
				width: 90%;
				margin: 0 auto;
				border: none;
				
				.imageContain {
				  width: 35%;
				}
				
				.couponInformation {
				  width: 60%;
				  
				  .couponContent, .couponRestrictions {
					width: 100%;
				  }
				  
				  h6 {
					margin: 10px 0 4px;
				  }
				}
			  }
			}
		}
		
		#rewardsSC {
			#sideNavigation{
				.well {
					h4 {
						font-size:18px;
						
						a {
							color: @rewardsSecondary;
						}
					}
				}
				
				#allReceiptsContainer{
					.receiptLinkContainer {
						.receiptPrice {
							font-size: 20px;
							color: @gray;
							margin-top:8px;
						}
					}
				}
			}
			
			#rewardsContentContainer {
				.panel {
					width:65%;
					margin: 0 auto;
					
					h5 {
						color: @grayLight;
					}
					
					h4 {
						font-weight: bold;
					}
					
					p {
						margin: 0 0 3px;
					}
					
					.receiptTotalInfo,
					.receiptTenderedInfo {
						margin-left:20%;
					}
					
					.receiptDateInfo {
						text-align: left;
						color: @grayLight;
					}
				}
			}
		}
	}
}


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

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

@media (max-width: 780px) { //convert the nav to a button
	body{
		
		
	}
}

@media (max-width: 580px) {
	body{
		
		
	}
}
