/* LESS CSS Document */

p,
span,
h1,h2,
fieldset {
	margin:0;
	padding:0;
	border:0;
}

.background-gradient(@color1,@color2) {
	background: @color1; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  @color1 50%, @color2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,@color1), color-stop(100%,@color2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  @color1 50%,@color2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  @color1 50%,@color2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  @color1 50%,@color2 100%); /* IE10+ */
	background: linear-gradient(135deg,  @color1 50%,@color2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
} 

.transition(@time:0.2s){
	-webkit-transition: all @time ;
	-moz-transition: all @time ;
	-ms-transition: all @time ;
	-o-transition: all @time ;
	transition: all @time ;
}

.transparent(){
	background: rgb(0, 0, 0) transparent; /* default fallback */
	background: rgba(0, 0, 0, 0.8); /* nice browsers */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000)"; /* IE8 */
}


html {
	font-size: 14px;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	color: #fff;
}

body { 
  background: url(../images/bg1.jpg) no-repeat top left fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#index,
#about,
#products,
#order,
#contact {
	position: fixed;
	left: 0;
	.transition(0s);
	
	img{ 
		/* Preserve aspet ratio */
		width: 100%;
		min-height: 100%;
	}
	&.selected {
		//display:block;
		top:0;
		.transition(0.4s);
		z-index:50;
	}
	
	.info {
		position: fixed;
		bottom: 40px;
		left: 80px;
		width: 490px;
		
		strong {
			font-size: 22px;
		}
		
		h1 {
			font-size: 20px;
			.background-gradient(#FF8F00,#DD2F00);
			padding: 0 20px;
			line-height: 40px;
			margin: 0;
			display: inline-block;
		}
		
		h2 {
			font-size: 16px;
		}
		
		p {
			color: #FD9802;
			line-height:20px;
		}
	}
	.holder {
		.transparent;
		padding: 25px;
	}
}



.logo {
  display: block;
  text-indent: -9999px;
  width: 330px;
  height: 238px;
  background: url(../images/beeAccLogo.png);
  background-size: 330px 238px;
  background-repeat: no-repeat;
  position: fixed;
  top:0;
  z-index:5000;
}

nav {
	z-index:5000;
	position: fixed;
	right: 0;
	bottom: 30px;
	
	li {
		list-style:none;
	
		a{
			text-decoration: none;
			font-size: 20px;
			line-height:28px;
			color:white;
			background-color:#FF7400;
			display: block;
			float: right;
			clear: right;
			padding: 0 45px 0 10px;
			margin: 3px 0;
			.transition();
			
			&.home{
				.background-gradient(#FF8F00,#DD2F00);
			}
			&.about {
				.background-gradient(#EE4799,#A30072);
			}
			&.products {
				.background-gradient(#FBD115,#FB8003);
			}
			&.order {
				.background-gradient(#18EE00,#18A600);
			}
			&.contact {
				.background-gradient(#00D7EE,#0091DE);
			}
			
			&.hover {
				padding-right:65px;
			}
		}
	}
}

#order {
	.info{
		width:660px;
	}
	
	.enquiry {
		label {
			width:110px;
		}
		
		p {
			width:200px;
		}
		
		input {
			width:232px;
		}
		
		textarea {
			width:230px;
		}
	}
	
	label {
		width:30px;
	}
	
	span {
		margin-left: 0
	}
	
	input {
		width:45px;
	}
	
	input[type="submit"] {
		width:100px;
	}
	
	fieldset {
		padding-top:0;
	}
	
	h2 {
		margin-bottom:10px;
	}
	
	.holder div {
		width:100px;
		display: inline-block;
		vertical-align: top;
		padding-right:20px;
	}
}

fieldset {
	padding-top:10px;
}

input[type="text"],
input[type="email"],
textarea {
	width:300px;
	margin-left: 0;
}

label {
	width:120px;
	display: inline-block;
	vertical-align: top;
}
.error {
	width:200px;
	margin-left:120px;
}

span {
	color: #FD9802;
	font-size: 10px;
	margin-left: 320px;
}