//style.less
//author: Marion Serenio
//author site : www.marionserenio.com

//variables :
@brown: #eeca7b;
@dark_brown : #3a1f0d;
@light_brown : #be793f;
//mixins


.shadow(@shadow){
	-moz-box-shadow:@shadow;
	-webkit-box-shadow:@shadow;
	-o-box-shadow:@shadow;
	box-shadow:@shadow;
}
.transition(@transition){
	-moz-transition:@transition;
	-webkit-transition:@transition;
	-o-transition:@transition;
	transition:@transition;
}

.tshadow(@tshadow){
	text-shadow:@tshadow;
}

.rounded(@rounded){
	-moz-border-radius:@rounded;
	-webkit-border-radius:@rounded;
	-o-border-radius:@rounded;
	border-radiu:@rounded;
}
.red(){
	background-color:red;
}
body{
	background: url(../img/body_BG.png) center top no-repeat, 
	url(../img/footer_bg.png) center bottom no-repeat, 
	url(../img/BG_tile.jpg) left top repeat;

	h1, h2, h3, h4, h5{
		font-weight:normal;
	}
}
#container{
	background-image: url(../img/BG_tile.png);

	header{
		
		h1{
			margin-top:20px;
			letter-spacing:-1px;
			line-height:1.5em;
			text-align:center;
			font-family:"Muncie", "Serif";
			font-size:8.5em;
			.tshadow(2px 2px 0px #be793f);
			.transition(0.3s);
			color:@brown;
			a{
				color:@brown;
				text-decoration:none;
			}
		}
		h2{
			font-family:"euphorigenic", "Serif";
			color:#c7461a;
			text-align:center;
			//.tshadow(2px 1px 0px #be793f);
		}
		#navribbon{
			
		}
		nav{
			margin-left:4%;
			height:52px;
			width:95%;
			background-image: url(../img/nav_bg.png);
			background-position:35px top;
			background-repeat:no-repeat;



			ul{
				text-align:center;
				width:100%;
				li{
					margin-left:5%;
					margin-top:15px;
					width:17%;
					float:left;
					font-size:2.3em;
					font-family:"euphorigenic", "Serif";
					a{
						color:#c7461a;
						&:hover{
							text-decoration:none;
							color:@dark_brown;
						}
					}
				}
			}
		}
		#slider{
			margin-top:20px;
			text-align:center;
			height:225px;
			width:100%;
			background-image: url(../img/slider_sprite.png);
			background-repeat:no-repeat;
			margin-left:12%;
			.transition(3s);
			

			
		}

	}
}
.about{
	background-position:0px -225px;
}
.listenbg{
	background-position:0px -445px;
}
.orderbg{
	background-position:0px -675px;
}

#main{
	
	#circles{
		text-align:right;
		margin-top:40px;
		width:100%;
		height:170px;
		text-align:center;
		background-position:top center;
		background-image: url(../img/circles.png);
		background-repeat:no-repeat;
		
	}
	#about{
	
			#aboutcircle{
				margin-top:5px;
				margin-left:70px;
				width:157px;
				height:157px;
				.rounded(157px);
				//.red();
				//.shadow(0px 0px 5px red);
			}
	}

	#listencirc{
	
			#listencircle{
				margin-top:5px;
				margin-left:110px;
				width:157px;
				height:157px;
				.rounded(157px);
			}
	}

	#ordercirc{
	
			#ordercircle{
				margin-top:5px;
				margin-left:110px;
				width:157px;
				height:157px;
				.rounded(157px);
			}
	}

	#orderform{
			text-align:center;
			display:block;
			float:left;
			margin-top:10px;
			margin-left:25%;
		
			input{
				
				 color:@light_brown;
			   font-family:"euphorigenic", "Serif";
			    font-size:1.1em;
			}

			input::-webkit-input-placeholder {
			    color:#732f19;
			   font-family:"euphorigenic", "Serif";
			    font-size:1.1em;
			    letter-spacing:1px;
				}
			input:-moz-placeholder {
			   color:@light_brown;
			   font-family:"euphorigenic", "Serif";
			   font-size:1.1em;

			}

			textarea::-webkit-input-placeholder {
			    color:#732f19;
			  font-family:"euphorigenic", "Serif";
			    font-size:0.8em;
			    letter-spacing:1px;
				}
			textarea:-moz-placeholder {
			   color:#732f19;
			 font-family:"euphorigenic", "Serif";
			   font-size:0.8em;
			   letter-spacing:1px;
			}

		

			form{
				margin-top:20px;
				input{
				
					margin-top:8px;
					height:28px;
					border:none;
					.rounded(0px);
					.transition(0.4s);
					.shadow(0px 0px 0px #be793f);
					background-color:#d78a5c;
					color:#732f19;
					&:focus{
						border:none;
						.shadow(4px 4px 0px #be793f);
					}
				}
				textarea{
					overflow: auto;
					resize: none;
					margin-top:8px;
					height:120px;
					border:none;
					.rounded(0px);
					.transition(0.4s);
					.shadow(0px 0px 0px #be793f);
					background-color:#d78a5c;
					letter-spacing:1px;
					color:@light_brown;
				  //  font-family:"Muncie", "Serif";
				    font-size:20px;

					&:focus{
						border:none;
						.shadow(4px 4px 0px #be793f);
					}
				}
				.button{
					padding-left:10px;
					padding-right:10px;
					font-family:"Muncie", "Serif";
					font-size:1.8em;
					color:@light_brown;
					border:1px solid #e6c579;
					&:hover{
						.shadow(4px 4px 0px #be793f);
						background-color:#e6c579;
						color:@light_brown + 10%;
					}
				}
				p{
					font-family:"euphorigenic", "Serif";
					font-size:1.3em;
					color:#ba370c;
				}
			}
		}
	#order{
		width:100%;
		margin-top:20px;
		background-position:top center;
		background-image: url(../img/ribbon_small.png);
		background-repeat:no-repeat;
		height:52px;
		padding-top:3px;
		float:left;
		h3{

			margin-top:2px;
			text-align:center;
			font-family:"euphorigenic", "Serif";
			text-align:center;
			font-size:2.5em;
			color:#c7461a;
		}

		

	}
	#listen{
		margin-top:20px;
		background-position:top center;
		background-image: url(../img/ribbon_small.png);
		background-repeat:no-repeat;
		height:52px;
		padding-top:3px;
		h3{
			font-family:"euphorigenic", "Serif";
			text-align:center;
			font-size:2.5em;
			color:#c7461a;
		}
		.sound{
			display:block;
			float:left;
			width:100%;
			margin-top:30px;
			margin-bottom:10px;
			padding:5px;
			background-color:#dc8f60;
			.shadow(3px 3px 0px #c47642);

			span{
				color:@light_brown;
				font-family:"euphorigenic", "Serif";
				a{
					color:#c7461a;
				}
			}
			p{
				font-size:1.2em;
				color:#c7461a + 10%;
				font-family:"euphorigenic", "Serif";
			}
		}

	}
	
}
footer{
height:100%;
border:none;

	p{
		font-size:1em;
		text-align:center;
		font-family:Serif;
		font-family:"euphorigenic", "Serif";
		color:#ba370c;
		a{
			color:@light_brown;
			&:hover{
				color:@light_brown;
			}
		}
	}
}
.popover{
	.inner{
		.rounded(0px);
		background-color:#dc8f60;
		
		.shadow(3px 3px 0px #c47642);
		.content{
	
			background-color:#dc8f60;
			p{
				font-family:"euphorigenic", "Sans-serif";
			text-align:center;
			font-size:1.4em;
			color:#ba370c;
			}
		}
	}
}
#thanks{
	font-family:"Androgyne", "Serif";
	height:390px;
	text-align:center;
}
#about{
	margin-top:40px;
	h2{
		text-align:left;
		font-family:"euphorigenic", "Serif";
		font-size:2.3em;
		color:#c7461a;

		//.tshadow(2px 2px 0px @light_brown);
	}

	h3{
		text-align:left;
		font-family:"euphorigenic", "Serif";
		font-size:1.8em;
		color:#c7461a;

		//.tshadow(1px 1px 0px @light_brown);
	}
	p{
		text-align:left;
		font-family:"euphorigenic", "Serif";
		font-size:1.4em;
		color:#c7461a;
	}
}

#termsofprivacy{
	h2{
		text-align:center;
		font-family:"euphorigenic", "Serif";
		font-size:2.3em;
		color:#c7461a;
		line-height:2.3em;

		//.tshadow(2px 2px 0px @light_brown);
	}
	h3{
		text-align:center;
		font-family:"euphorigenic", "Serif";
		font-size:2em;
		color:#c7461a;
		line-height:2.3em;

		//.tshadow(2px 2px 0px @light_brown);
	}
	p, address{
		font-size:1.1em;
		line-height:1.5em;
		text-align:left;
		font-family:"Times New Roman", "Serif";
		color:@light_brown + -50%;
	}
	ol{
		li{
		font-size:1.1em;
		line-height:1.5em;
		text-align:left;
		font-family:"Times New Roman", "Serif";
		color:@light_brown + -50%;
		}
	}

}
#sfsmotto{
	margin-top:20px;
	line-height:50px;
	font-family:"euphorigenic", "Serif";
	color:#c7461a;
	font-size:4em;
	text-align:center;
	//.tshadow(2px 1px 0px #be793f);
	
}
#packages{
	margin-top:55px;
	h4{
		color:#712d17;
		font-size:22px;
		text-align:center;
		font-family:"euphorigenic", "Serif";
	}
	.package{
		padding:10px;
		height:240px;
		background-color:#d78a5c;
		ul{
			li{
				list-style:square;
				font-size:17px;
				font-family:"euphorigenic", "Serif";
				color:#712d17;
				margin-bottom:3px;
			}
		}
	}
}