@import 'grid.less';

// GRID //////////////////////////////

// Specify the number of columns and set column and gutter widths

@columns: 12;
@column-width: 60;
@gutter-width: 20;

// Remove the definition below for a pixel-based layout

@total-width: 100%;

@max-width: 960px;

@basefont: 1em;

// LAYOUT //////////////////////////////
* {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all linear 0.3s;
	-o-transition: all 0.3s linear;
	transition: all linear 0.3s;
}
html {
	text-align: center;
	background-color: #8c8f36;
}

#main {
	overflow: hidden;
	zoom: 1;
	clear: both;
}

.center {
	max-width: @max-width;
	margin: 0 auto;
	display: block;
}

.wrapper {
	display: block;
}

// Header //////////////////////////////

#header-wrapper {
	
	
	#header {
		.center;
		
		
	}
}
#contact-info {
	.column(7);
	float: right;
	text-align: right;
}
#logo {
	float: left;
	.column(5);
	margin: 2em 0 2em 1em;
}

// Nav //////////////////////////////


#main-nav {
	padding: 2em 0 0;
	font-size: 1em;
	.column(7);
		float: right;
	.menu-header {
		
		
		#menu-main-menu {
			text-align: right;
			float: right;
			
			.menu-item {
				position: relative;
				display: inline-block;				
				
				&:hover > .sub-menu {
					display: block;
					opacity: 1;
				}
				
				&:last-child {
					margin-right: 0;
				}
				
				a {
					display: block;
					padding: 0.2em 1em;
				}
				
				.sub-menu {
					opacity: 0;
					display: none;
					position: absolute;
					border: 1px solid #eee;
					border-top: none;
					background: white;
					
					.menu-item {
						float: none;
						position: relative;
						margin-right: 0;
						
						a {
							width: 8em;
						}
					}
					.sub-menu {
						display: none;
						left: 9em;
					    position: absolute;
					    top: 0;
					}
				}
			}
		}
	}
}


// Main column & Sidebar

#main-wrapper {
	
	#main {
		.center;
		padding: 0 0 2em;
		
		#maincontent {
			.row;
			
			.home-box {
				.column(4);
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				padding: 0 1em;
			}
			.menu-box, #menu-menu-menu li {
				.column(2.4);
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				padding: 0 1em;
			}
			#menu-glance {
				.column(4);
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				padding: 0 1em;
			}
			#featured-treatments {
				.column(8);
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				padding: 0 1em 1em;
				
			}
		}
	}
}

#content {
	.column(9);
}
#content.full-width {
	.column(12);
}

#sidebar {
	.column(3);
	
}
#contact-details {
	.row;
	margin-bottom: 1em;
}
.contact-information {
	.column(4);
}

#google-map {
	.column(8);
}
#contact-form {
	.column(4);
}
.parent-pageid-8 #content, .parent-pageid-295 #content {
	.column(7.2);
}
#menu-sidebar {
	.column(4.8);
	float: right !important;
}
#pev-link1 {
	.column(6);
	text-align: right;
}
#pev-link2 {
	.column(6);
	text-align: left;
}
// Footer //////////////////////////////


#footer-wrapper {


	#footer {
		.center;
		padding: 2em 0;
		
		nav {
			
			ul {
				
				li {
					display: block;
					float: left;
					
				}
				
				.sit-link {
					float: right;
					
				}
			}
		}
	}
}

// Media Queries /////////////////////////

@media screen and (max-width: 1000px) {

	.wrapper {
		padding: 0 2em;
	}

}


@media screen and (max-width: 720px) {

	.wrapper {
		padding: 0 2em;
	}
	
	#content {
		.column(8);
	}
	
	#sidebar {
		.column(4);
	}
	#main-nav {
		.column(12);
		text-align: center;
	}
	#header {
		min-height: 230px;
	}
	#menu-main-menu {
		float: none !important;
		max-width: 100%;
		margin: inherit auto !important;
		text-align: center !important;
	}
	#contact-info {

	}
	#logo {
		margin: 2em auto;
		
	}
	#main-wrapper {
	
		#main {
			#maincontent .menu-box, #menu-menu-menu li {
				.column(4);
				margin-bottom: 1em;
			}
		}
	}
	.parent-pageid-8 #content, .parent-pageid-295 #content, #menu-sidebar, #google-map, #contact-form {
		.column(12);
	}
	.contact-information {
		.column(6);
	}

}

@media screen and (max-width: 480px) {
	
	.wrapper {
		padding: 0 2em;
	}
		
	#content {
		.column(12);
	}
	
	#sidebar {
		.column(12);
	}
	#main-wrapper #main #maincontent {
		.home-box, #menu-glance, #featured-treatments {
			.column(12);
		}
	}
	#logo {
		text-align: center;
		.column(12);
		margin-top: 2em;
		margin-bottom: 1em !important;
		
	}
	
	#subpages {
		display: none;
	}
	
	
	#main-nav {
		.center;
		padding: 1em 0;
		font-size: 1em;
		
		.menu-header {
			.row;
			
			#menu-main-menu {
				.column(12);
				text-align: center;
				
				.menu-item {
					float: none; display: inline-block; text-align: left;
					a {
						font-size: 0.85em;
					}
				}
			}
		}
	}
	
	#searchform {
		.column(12);
		text-align: center;
		margin-top: 1em;
	}
	#contact-info {
		.column(12);
		h3 {
			margin-top: 0;
			text-align: center;
		}
	}
	#header {
		min-height: 270px;
	}
	#main-wrapper {
	
		#main {
			#maincontent .menu-box, #menu-menu-menu li {
				.column(12);
				margin-bottom: 1em;
			}
		}
	}
	.parent-pageid-8 #content, .parent-pageid-295 #content, #menu-sidebar, .contact-information, #google-map, #contact-form {
		.column(12);
	}

	#header-wrapper {
		padding: 0 !important;
	}
}



/*--[ Buttons ]--------------------------------------------------------------------------------*/

// c1 = Highlight
// c2 = Lowlight
// c3 = Hover Highlight

.dobutton(@c1, @c2, @c3) {
	background:#578724;
	background-image: -moz-linear-gradient(top, @c1, @c2); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, @c1),color-stop(1, @c2)); /* Saf4+, Chrome */
	border-color: (@c1 - #222) (@c1 - #222) (@c1 - #444);
	border-style: solid;
	border-width: 1px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.29);
	color: white;
	display: inline-block;
	font-weight: bold;
	padding: 3px 13px;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
	padding: 5px 10px;
	
	
	&:hover {
		background:@c3;
		color:#fff;
		background-image: -moz-linear-gradient(top, @c3, @c2); /* FF3.6 */
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, @c3),color-stop(1, @c2)); /* Saf4+, Chrome */
		border-bottom:1px solid rgba(0,0,0,0.6);
	}
	&:active {
		border-color: @c1;
		box-shadow: 0 0 7px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFFFFF;
		color: #222;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	}
}

input[type=submit], input[type=button], .gf_progressbar_percentage {
	.dobutton(#8C8F36, #5c5e23, #d3dc56);
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-khtml-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	border-radius: 0.5em;
	padding: 1em 2em;
}