/*  Copyright to Hughes Motor Products Inc.
	
	Developed by The Metrick System - http://metricksystem.com/
	Yohann Paris - developer@metricksystem.com	
*/

/* -- Variables -- */

@yellow: #F7EB00;
@orange-red: #F15A24;
@blue: #29ABE2;
@bottomnavgrey: #808080;
@searchsectionboxes: #E6E6E6;
@headertext: #000000;
@bodytext: #444;

@websiteWidth: 1000px;
@gutter: 40px;


/* -- Fonts -- */

// Using Google API Font: http://www.google.com/webfonts#UsePlace:use/Collection:Lato
//@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700');

html {
	font-family: "Lato", "Helvetica", "Arial", sans-serif;
	font-weight: 300;
}


/* -- Imports -- */

@import 'functions.less';
@import 'reset.less';
@import 'layout.less';


.imagezoom {
	.box-sizing (content-box);
}

/* -- Content -- */

#page {
	margin-top: @gutter;
	

	/*  Home page
		----------------------------------------------
		<img... />
		<form name="homeSearchInventory">
			<h1>
		</form>
		<article>
			<h1>
			<h2>
			<p>...xN
			<a href="special">...</a>
		</article>
	*/
	&[role='home']{
		// Put the big image adjacent to the menu
		margin-top: 0;
		
		#homeImg{
			clear: both;
			height: 563px;
			margin-bottom: @gutter;
			overflow: hidden;
			
			img {
				position: absolute;
				display: none;
				border: none;
			}
		}
		
		form {
			float: right;
			// The form is 40% of the website
			width: (@websiteWidth - @gutter)*0.4;
			
			select {
				// The form width minus the 25px padding of the select element
				width: ((@websiteWidth - @gutter)*0.4)-50px;
			}
			
			p {
				float: left;
				width: 100%;
				padding: 0 25px 25px;
				margin: 0;
			}
		}
		
		article {
			// The article is 60% of the website
			width: (@websiteWidth - @gutter)*0.6;
			margin-right: @gutter;

			h1 {
				font-size: 50px;
				line-height: 1;
				margin-bottom: 15px;
				letter-spacing: -2px;
			}
			
			> a {
				display: inline-block;
				margin: 20px 0;
				padding: 10px 20px;
				text-transform: uppercase;
				background: @yellow;
				border: 2px solid @searchsectionboxes;
				color: @headertext;
				font-weight: bold;
				.border-radius(10px, 10px, 10px, 10px);
			}
		}
	}
	
	/*  Rustproof centre
		----------------------------------------------
		<aside>
			<img ... />
			<img ... />	
		</aside>
		<article>
			<h1>
			<p>
	*/
	&[role='rustproofCentre']{

		aside {
			float: right;
			margin: 7px 0 0 @gutter;
			width: (@websiteWidth - @gutter)*0.4;
			
			img {
				margin-bottom: @gutter;
			}
		}
		
		article {
			// The article is 60% of the website
			width: (@websiteWidth - @gutter)*0.6;
			margin: 0 @gutter @gutter 0;

			h1 {
				margin-bottom: 34px;
				font-size: 28px;
			}
			
			> a {
				display: inline-block;
				margin: 20px 10px 20px 0;
				padding: 10px;
				text-transform: uppercase;
				background: @yellow;
				color: @headertext;
				font-weight: bold;
				font-size: 12px;
				.border-radius(5px, 5px, 5px, 5px);
			}
		}
	}

	
	/*  Car Wash
		----------------------------------------------
		<aside>
			<img ... />
			<img ... />	
		</aside>
		<article>
			<h1>
			<p>
			<h2>
			<ul>
				<li>
				...
	*/
	&[role='carWash']{
		
		aside {
			float: right;
			margin: 7px 0 0 @gutter;
			width: (@websiteWidth - @gutter)*0.4;
			
			img {
				margin-bottom: @gutter;
			}
		}
		
		article {
		
			// The article is 60% of the website
			width: (@websiteWidth - @gutter)*0.6;
			margin: 0 @gutter @gutter 0;

			h1 {
				margin-bottom: 34px;
				font-size: 28px;
			}
			
			h2 {
				margin-top: 20px;
			}
			
			> a {
				display: inline-block;
				margin: 20px 10px 20px 0;
				padding: 10px;
				text-transform: uppercase;
				background: @yellow;
				color: @headertext;
				font-weight: bold;
				font-size: 12px;
				.border-radius(5px, 5px, 5px, 5px);
			}
		}
	}
	
	
	/*  Display Vehicule
		----------------------------------------------
	*/
	&[role='displayVehicule']{
		article {
			h1 {
				text-transform: uppercase;
			}
		}
	} 
}