/*	Table of content
	--------------------------------------------------------------

	1. Colour palette
	2. Reset
	3. Typography
	4. IE Fixes
	5. Forms
	6. Content
		6.1. Header
			6.1.2. Navigation
		6.2. Body
			6.2.1. Home
			6.2.2. Products
				6.2.2.2. Products Navigation
			6.2.3. Case Study
			6.2.4. About
			6.2.5. Contact
		6.3. Footer
   
	-------------------------------------------------------------- */
   

/*	1. COLOUR PALETTE

	Grey Darkest	-	#222		-	Link Hover
	Grey Dark		-	#444		-	Text and Footer Background
	Grey Light		-	#ccc		-	Borders and Lines
	Grey lightest	-	#888		-	Text
	Pink			-	#d62041		-	Links
	White			-	#fff		-	Background
*/


/*	2. RESET
	-------------------------------------------------------------- */

	html, body, div, span,
	applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dd, dl, dt, li, ol, ul,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100.01%;
		font-family: inherit;
		text-align: left;
		vertical-align: baseline;
	}
	
	body 							{ line-height: 1.5em; }
	img 							{ float: left; margin: 0px; padding: 0px; border: none; }
	a img, :link img, :visited img	{ border: none; }
	ol, ul 							{ list-style: none; }
	table							{ border-collapse: collapse; border-spacing: 0; }
	caption, th, td 				{ text-align: left; }
	blockquote:before, 
	blockquote:after,


/*	3. TYPOGRAPHY
	-------------------------------------------------------------- */
	
	body { font-size: 0.875em; color: #444; font-family: "Helvetica Neue", Arial, Verdana, sans-serif; }
	
	h1,h2,h3,h4,h5,h6 { 
		color: #d62041; 
		font-weight: normal;
		font-family: "Helvetica Neue", Arial, Verdana, sans-serif;
		line-height: 1.5em;
	}
	
	h1				{ font-size: 3.3em; text-transform: uppercase; color: #4e4e4e; line-height: 0.8em; } /* 48px */
	h2				{ font-size: 2.857em; margin-bottom: 0.35em; } /* 40px */
	h3				{ font-size: 2.142em; margin-bottom: 0.46em; border-bottom: 1px solid #ccc; } /* 30px */
	h4				{ font-size: 1.428em; margin-bottom: 0.84em; font-weight: bold; } /* 20px */
	h5				{ font-size: 1.428em; margin-bottom: 0.5em; } /* 20px */
	h6				{ font-size: 0.714em; margin-bottom: 1.4em; } /* 10px */
	
	a				{ color: #e53959; border: none; text-decoration: none; }
	a:hover,
	a:focus			{ color: #222; }
	
	p				{ margin: 0 0 1.5em 0; }
	
	/* Use this in conjunction with the .top etc classes to align with text. */
	p img			{ float: left; margin: 1.2em 1.2em 1.2em 0; padding: 0; }
	
	p.inc-led		{ font-size: 0.714em; line-height: 1.34em; margin: 0 0 1.2em 0; }
	
	ul, ol			{ margin: 0 1.2em 1.2em 1.2em; }
	ul				{ list-style: disc; }
	ol				{ list-style: decimal; }
	dl, dt			{ margin: 0 0 1.5em 0; font-size: 1.5em; font-weight: bold; }
	dd				{ margin: 0 0 0 2em;}
	
	strong			{ font-weight: bold; }
	blockquote		{ color: #777; font-size: 0.857em; padding: 15px; }
	code 			{ background-color: #ccc; color: #555; font-family: "Andale Mono", "Courier New", Courier, monospace; display: block; margin: 15px; padding: 5px; }
	abbr, 
	acronym,
	.help			{ border-bottom: 1px dotted #666; cursor: help; }

	span.amp		{ font-family: "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-style: italic; font-size: 100%; }


/*	4. IE FIXES
	-------------------------------------------------------------- */

	body			{ text-align: center; }
	.container		{ text-align: left; }	
	* html textarea	{ overflow:scroll; display:inline; }
	* html input	{ overflow: hidden; display:inline; }
	ol 				{ margin-left:2em; }
	legend			{ margin-bottom:1.4em; }


/*	5. FORMS
	-------------------------------------------------------------- */

	label					{ float: left; font-weight: bold; color: #444; width: 150px; }
	fieldset    			{ padding: 0; margin: 30px 0 0 0; }
	legend      			{ font-weight: bold; font-size:1em; }
	
	input, text, textarea	{ width: 222px; margin: 0; border: none; border: 1px solid #ccc; color: #444; font-family: "Helvetica Neue", Arial, Verdana, sans-serif; padding: 3px; } /* Width of column 7. */
	textarea				{ width: 472px; height: 172px; } /* Width of column 10. */
	
	input:focus, 
	text:focus,
	textarea:focus			{ border: 1px solid #999; }
	
	input.title				{ font-size: 1.5em; }
	
	select					{ border: 1px solid #999; background-color: #ccc; width: 258px; padding: 5px; } /* Width of column 7. */
	select:focus			{ border: 1px solid #c6efff; background-color: #fff; }
	
	input.button 			{ width: auto; margin: 0; padding: 3px 15px 3px 15px; text-align: center; font-size: 1.5em; border: none; background-color: #222; cursor: pointer; }
	input.button:hover 		{ background-color: #161616; }
	
	.search 				{ float: left; height: auto; width: 270px; padding: 10px; margin: 0px; background-color: #353535; }
	.search form fieldset 	{ margin: 0; padding: 0; border: none; }
	.search form 			{ margin: 0; }
	.search input, text 	{ width: 185px; margin: 0; border: none; background-color: #222; color: #888; padding: 5px 5px 5px 10px; }
	.search input:focus, 
	text:focus 				{ background-color: #161616; }
	.search form, .submit 	{ margin-left: 150px; padding: 3px 25px 3px 25px; width: auto; cursor: pointer; border: none; background-color: #ccc; color: #444; }
	.search form, 
	.submit:hover 			{ background-color: #e53959; }


/*	6. CONTENT
	-------------------------------------------------------------- */

	body { background-color: #fff; border-top: 5px solid #d62041; background-position: top; background-repeat: repeat-x; }
	.innerpage_header { width: 630px; margin-left: 330px; }

	
/*	6.1. HEADER
	-------------------------------------------------------------- */

	div.container { position: relative; margin: 0 auto; width: 960px; height: auto; }
	div.header { float: left; width: 960px; height: 150px; padding: 0px; margin: auto; }
	div.header img { float: left; margin: 20px 0px 20px 80px; }
	

/*	6.1.2. NAVIGATION
	-------------------------------------------------------------- */
	
	div#navigation {float: right; height: auto; width: auto; padding: 0; margin: 0; } 
	#navigation ul { float: right; margin-top: 75px; padding: 0px; height: auto; width: auto; }
	#navigation li { display: inline; text-align: center; margin: 0px; float: left; font-size: 1.15em; }
	#navigation a { color: #444; height: auto; border-bottom: 1px solid #ccc; padding: 0px 30px 5px 0px; text-decoration: none; float: left; }
	#navigation a:hover, #navigation a.current { border-bottom: 3px solid #d62041; padding: 0px 30px 3px 0px; }
	

/*	6.2. BODY
	-------------------------------------------------------------- */
	

/*	6.2.1. HOME
	-------------------------------------------------------------- */
	
	div.home_flash { float: left; width: 960px; height: 350px; padding: 0; margin: 0; }
	
	div.home_main { float: left; width: 300px; height: auto; padding: 0px; margin: 50px 0 0 0; }
	div.home_main_mid { float: left; width: 300px; height: auto; padding: 0px; margin: 50px 30px 0px 30px; }
	div.home_main img, div.home_main_mid img {float: left; margin-bottom: 10px; }
	
	
/*	6.2.2. PRODUCTS
	-------------------------------------------------------------- */

	div.products_image {float: left; width: 960px; height: 250px; padding: 0px 0px 30px 0px; margin: 0; }
	div.product_main { float: right; width: 630px; height: auto; }
	div.product_main .text_image { float: left; margin: 20px 0px 30px 0px; }
	
	div.product_side_wrapper { float: left; width: 300px; height: auto; padding: 0; }
	div.product_side { float: left; width: 300px; height: auto; padding: 25px 0px 0px 0px; }
	div.product_side img { float: left; border: 1px solid #ccc; padding: 3px; margin: 0px 5px 5px 5px; }
	div.product_side img:hover { border: 1px solid #d62041; }
	div.product_side img.right { margin-left: 8px; }
	

/*	6.2.2.2 PRODUCTS NAVIGATION
	-------------------------------------------------------------- */
	
	#product_navigation { float: left; margin: 0; padding: 0; width: auto; }
	#product_navigation ul { float: left; width: 630px; margin: 0px; padding: 0; background-image: url(../images/product-navigation-bg.gif); background-position: bottom; background-repeat: repeat-x; }
	#product_navigation li { display: inline; text-align: center; margin: 0px; float: left; font-size: 1.15em; }
	#product_navigation a { color: #444; height: auto; border-bottom: 1px solid #ccc; padding: 0px 30px 5px 0px; text-decoration: none; float: left; }
	#product_navigation a:hover, #product_navigation a.current { border-bottom: 3px solid #d62041; padding: 0px 30px 3px 0px; }


/*	6.2.3. CASE STUDY
	-------------------------------------------------------------- */
	
	div.casestudy_main { float: right; width: 630px; height: auto; padding: 0; margin: 0; }
	
	div.casestudy_side { padding: 0; margin: 0; } 
	div.casestudy_side img { float: left; border: 1px solid #ccc; padding: 3px; margin: 0px 5px 5px 5px; }
	div.casestudy_side img:hover { border: 1px solid #d62041; }
	div.casestudy_side img.right { margin-left: 8px; }


/*	6.2.4. ABOUT
	-------------------------------------------------------------- */
	
	div.about_image {float: left; width: 960px; height: auto; padding: 0px 0px 30px 0px; margin: 0; }
	div.about_main { float: right; width: 630px; height: auto; }
	div.about_main .text_image { float: left; margin: 20px 0px 30px 0px; }
	
	div.about_side { padding: 0; margin: 0; }
	div.about_side { padding: 0; margin: 0; } 
	div.about_side img { float: left; border: 1px solid #ccc; padding: 3px; margin: 0px 5px 5px 5px; }
	div.about_side img:hover { border: 1px solid #d62041; }
	div.about_side img.right { margin-left: 8px; }

	
/*	6.2.5. CONTACT
	-------------------------------------------------------------- */
	
	div.contact_main { float: right; width: 630px; height: auto; padding: 0; margin: 0; }
	div.contact_side { float: left; width: 300px; height: auto; padding: 0; margin: 0; } 
	div#map { float: left; width: 960px; height: 250px; margin: 0px 0px 30px 0px; padding: 0; }
	

/*	6.3. FOOTER
	-------------------------------------------------------------- */

	div.footer_outside { float: left; background-color: #222; width: 100%; margin-top: 50px; border-bottom: 5px solid #d62041; }
	div.footer { position: relative; margin: 0 auto; width: 960px; padding: 15px 0px 15px 0px; text-align: right; color: #888; }
	div.footer a { color: #aaa; border: none; text-decoration: none; }
	div.footer a:hover, a:focus	{ color: #fff; }