@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: 960px;

@max-width: 960px;

@basefont: 1em;

// LAYOUT //////////////////////////////

html {
	text-align: center;
	background-color: #000;
}

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

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

.wrapper {
	display: block;
	clear: both;
}

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

#header-wrapper {
	
	
	#header {
		.center;
		
	}
}

#logo {
	margin: 2em 0;
	.column(3);
}
#contact-info {
	.column(5);
	float: right;
	margin-top: 2em !important;
	
}
// Nav //////////////////////////////

	
#main-nav {
	.column(12);
	font-size: 1em;
	
	.menu-header {
		
		#menu-main-menu {
			
			.menu-item {
				display: inline-block;
				margin-right: 1em;
				position: relative;

				&:hover > .sub-menu {
					display: block;
				}
				
				&:last-child {
					margin-right: 0;
				}
				
				a {
					display: block;
					padding: 0.2em 0.5em;
					text-shadow: 0px 0px 2px rgba(255, 255, 255, 1);
				}
				
				a:hover {
					color: #e32c26 !important;
				}
				
				.sub-menu {
					display: none;
					position: absolute;
					border: 1px solid #eee;
					background: white;
					
					
					.menu-item {
						float: none;
						position: relative;
						margin-right: 0;
						
						a {
							width: 8em;
						}
					}
					.sub-menu {
						display: none;
						left: 9em;
					    position: absolute;
					    top: 0;
					}
				}
			}
		}
	}
}

#logo {
	display: block;
	position: absolute;
	width: 220px;
	margin: 2em 0;
	z-index: 100;
}
#contact-info {
	float: right !important;
	margin-top: 2em !important;
	.column(5);
}

	
// Main column & Sidebar

#main-wrapper {
	
	#main {
		.center;
		padding: 2em 0;
		
		#maincontent {
			.row;
			
			
		}
	}
}

#banner {
	.center;
	overflow: hidden;
}

.flex-container {
	
}
.flexslider {
	.column(12);
}
#other-equipment {
	.column(4);
	.loop-single-equipment {
		.column(12);
	}
}


#content {
	.column(9)
}


#sidebar {
	.column(3);
	
}

// Footer //////////////////////////////


#footer-wrapper {


#footer-gradient-bar {
		.center;
}

#copylinks {
		.center;
		padding: 2em 0;
					
		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);
	}
}

@media screen and (max-width: 480px) {
	
	.wrapper {
		padding: 0 2em;
	}
		
	#content {
		.column(12);
	}
	
	#sidebar {
		.column(12);
	}
	
	#logo {
		text-align: center;
	}
	
	#subpages {
		display: none;
	}
	
	#nav-wrapper {

	
		#main-nav {
			.center;
			padding: 1em 0;
			font-size: 1em;
			
			.menu-header {
				.row;
				
				#menu-main {
					.column(12);
					text-align: center;
					
					.menu-item {
						float: none; display: inline-block; text-align: left;
					}
				}
			}
		}
	}
	
	#searchform {
		.column(12);
		text-align: center;
		margin-top: 1em;
	}
	
	
}



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

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

.button1 (@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;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
	padding: 0.5em 1em;
	
	&: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);
	}
}