/* ------------------------------------------------------------------
	MAIN STYLESHEET
	
	Project: John Aarts Group
	Created: 2009-09-20
	
	COLOURS:	
	Yellow: #fed715
	Orange: #e46629

------------------------------------------------------------------- */


/* TABLE OF CONTENTS */
/* ---------------------------------------- HTML, BODY, RESETS */
/* ---------------------------------------- GLOBAL STYLES */
/* ---------------------------------------- STRUCTURE */
/* -------------------------------------------- Header */
/* -------------------------------------------- Top Nav */
/* -------------------------------------------- Wrapper */
/* -------------------------------------------- Side Nav */
/* -------------------------------------------- Content Area */
/* ----------------------------------------------- Home Images */
/* ----------------------------------------------- Tonnage Calculator Form */
/* -------------------------------------------- Footer */

@import url("reset.css");

 
/* ----------------------------------------------
	HTML, BODY, RESETS
---------------------------------------------- */

html { 
	overflow-y: scroll; /* keeps vertical scroll bar in firefox at all times so page doesn't jump around */
	height: 100%;
	}

body {
	background: #252424; /* background colour should be same as content area background colour to ensure WYSIWYG looks same as website */
	padding:0;
	margin:0;
	top:0;
	left: 0;
	font: 12px/21px Arial, Helvetica, sans-serif;
	color:#000;
	}

img, form { /* removes all default formatting on images and forms */
	padding:0;
	margin:0;
	line-height:0;
	}

:focus { outline: none; } /* removes dotted outline from links */

.Clear { clear: both; } /* clears all floats; apply to empty divs */
.ClearLeft { clear: left; } 



/* ----------------------------------------------
	GLOBAL STYLES - style as necessary
---------------------------------------------- */

a:link, a:visited {
	color: #e46629;
	font-weight:bold;
	text-decoration: none;
	}

a:hover, a:active {
	color: #e46629;
	text-decoration: underline;
	}
			
p, td, div { 
	font: 12px/21px Arial, Helvetica, sans-serif;
	}
	p {
		padding:0 0 8px 0;
		}

strong, b {
	font-weight: bold;
	}

em, i {
	font-style: italic;
	}

h1 {
	color: #000;
	font: bold 16px/21px Arial, Helvetica, sans-serif;
	margin-bottom:8px;
	}
	
h2 {
	color: #4d4d4f;
	font: bold 14px/21px Arial, Helvetica, sans-serif;
	margin:10px 0 4px 0;
	}
	
h3 {
	color: #58595b;
	font: bold 12px/21px Arial, Helvetica, sans-serif;
	margin-bottom:0;
	}
		
ul, ol {
	margin-bottom:8px;
	padding:0;
	}
	li {
		list-style: disc outside;
		margin: 0 0 0 24px;
		}

	
.ImageFloatRight {
	float:right;
	padding:3px 0 10px 40px;
	}

/* ----------------------------------------------
	STRUCTURE
---------------------------------------------- */
	
/* ---------------------------------------- Header */

#PrintHeader { display: none; }

#Header { 
	width: 980px;
	height:146px;
	margin: 0 auto;
	background:url(../images/header-bg.jpg) no-repeat top right;  
 	}
	
#Header .Logo { 
	float:right; 
	display:inline;
	margin:47px 140px 0 0;
	}
	
#HeaderAarocAg { 
	width: 980px;
	height:146px;
	margin: 0 auto;
	background:url(../images/header-aaroc-ag-bg.jpg) no-repeat top right;  
 	}
	
#HeaderAarocEq { 
	width: 980px;
	height:146px;
	margin: 0 auto;
	background:url(../images/header-aaroc-eq-bg.jpg) no-repeat top right;  
 	}
	
#HeaderJaar { 
	width: 980px;
	height:146px;
	margin: 0 auto;
	background:url(../images/header-jaar-bg.jpg) no-repeat top right;  
 	}
	
#HeaderAarocAg .Logo, #HeaderAarocEq .Logo { 
	float:right; 
	display:inline;
	margin:34px 125px 0 0;
	}
	
#HeaderJaar .Logo  { 
	float:right; 
	display:inline;
	margin:30px 125px 0 0;
	}



/* ---------------------------------------- Top Nav */
	
#TopNav {
	width:980px;
	height:28px;
	background-color:#dcdddf;
	margin:0 auto;
	}
	
#TopNav ul {
	list-style: none;
	padding:0;
	margin:0;
	line-height:0;	
	}
	#TopNav li {
		list-style: none;
		padding:0;
		margin:0;
		line-height:0;
		display:inline;
		}
	
#TopNav a:link, #TopNav a:visited {
	float:left;
	margin:7px 0 0 85px;
	font: bold 12px Arial, Helvetica, sans-serif;
	padding:0;
	color: #000;
	text-decoration: none;
	}
	
#TopNav a:hover, #TopNav a:active {
	color: #e46629;
	text-decoration: none;
	}

	
	
/* ---------------------------------------- Wrapper */

#Wrapper {
	width: 980px;
	margin: 0 auto;
	background:#fff url(../images/wrapper-bg.png) repeat-y;  
	}	
	
	

/* ---------------------------------------- Side Nav */
	
#SideNav {
	float:left;
	width:200px;
	padding:0 0 30px 0;
	background:url(../images/sidebar-bg-top.png) no-repeat;  
	}
	
#SideNav img {
	margin:60px 0 0 15px;
	}
	#SideNav img.jaar {
		margin:30px 0 0 15px;
		}
	#SideNav img.DropdownBottom {
		margin:0;
		}
	
#SideNav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	}

#SideNav li { /* all list items */
	list-style: none;
	margin:0;
	padding: 0;
	}

#SideNav li ul { /* second-level lists */
	position: absolute;
	background: #ccc url(../images/sidenav-dropdown-bg.png) no-repeat;  
	margin:-30px 0 0 21px;
	width: 143px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	}

#SideNav li:hover ul, #SideNav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	}

#SideNav li ul a { 
	color: #000;
	font: 12px Arial, Helvetica, sans-serif;
	display:block;
	width: 143px;
	height:18px;	
	margin:0;
	padding: 3px 0 1px 7px;
	text-decoration: none;
	}
	#SideNav li ul li.Item1 { 
		padding-top:23px;
		}
	
	#SideNav li ul a:hover { 
		color: #e46629;
		}
	#SideNav li ul li.DropdownBottom {
		margin:0;
		padding:0;
		line-height:0;
			}

				

/* ---------------------------------------- Content Area */
	
#ContentHome {
	width:780px;
	height:500px;
	float:left;
	background:url(../images/content-bg-top.png) no-repeat;  
	}
	
#ContentHome .Text {
	margin:25px 25px 0 25px;
	}
	
#Content {
	width:780px;
	float:left;
	background:url(../images/content-bg-top.png) no-repeat;  
	}
	
#Content .Text {
	margin:25px 25px 50px 25px;
	}
	
#ContentHistory {
	width:780px;
	height:675px;
	float:left;
	background:url(../images/history-bg.jpg) no-repeat top right;  
	}
	#ContentHistory .Text {
		width:475px;
		margin:25px 25px 5px 25px;
		}
	
#ContentVision {
	width:780px;
	height:750px;
	float:left;
	background:url(../images/vision-values-bg.jpg) no-repeat top right;  
	}
	#ContentVision .Text {
		width:680px;
		margin:25px 25px 5px 25px;
		}
		
#ContentHealth {
	width:780px;
	height:500px;
	float:left;
	background:url(../images/health-safety-bg.jpg) no-repeat top right;  
	}
	#ContentHealth .Text {
		width:520px;
		margin:25px 25px 5px 25px;
		}
		
#ContentContact {
	width:780px;
	height:350px;
	float:left;
	background:url(../images/contact-bg.jpg) no-repeat top right;  
	}
	#ContentContact .Text {
		width:520px;
		margin:25px 25px 5px 25px;
		}
		
#ContentAarocAgWithBackground {
	width:780px;
	height:476px;
	float:left;
	background:url(../images/aaroc-ag-bg.jpg) no-repeat top right;  
	}
	#ContentAarocAgWithBackground .Text {
		width:370px;
		margin:25px 25px 5px 25px;
		}
		#ContentAarocAgWithBackground li {
			padding-bottom:8px;
			}
		
#ContentAarocEqWithBackground {
	width:780px;
	height:550px;
	float:left;
	background:url(../images/aaroc-eq-bg.jpg) no-repeat top right;  
	}
	#ContentAarocEqWithBackground .Text {
		width:440px;
		margin:25px 25px 5px 25px;
		}
	#ContentAarocEqWithBackground .TextRentals {
		width:700px;
		margin:25px 25px 5px 25px;
		}						
		#ContentAarocEqWithBackground li {
			padding-bottom:8px;
			}
			
#ContentJaarWithBackground {
	width:780px;
	height:476px;
	float:left;
	background:url(../images/jaar-bg.jpg) no-repeat top right;  
	}
	#ContentJaarWithBackground .Text {
		width:510px;
		margin:25px 25px 5px 25px;
		}

#ContentJaarServices {
	width:780px;
	height:1120px;
	float:left;
	background:url(../images/jaar-fadeout-bg.jpg) no-repeat top right;  
	}
	#ContentJaarServices .Text {
		width:480px;
		margin:25px 25px 5px 25px;
		}
		
.HomeCol1 {
	float:left;
	display:inline;
	width:150px;
	margin-left:10px;
	}
	
.HomeCol2 {
	float:left;
	display:inline;
	width:140px;
	margin-left:10px;
	}
	
.HomeCol3 {
	float:left;
	display:inline;
	width:170px;
	margin-left:10px;
	}
	
.MajorProjectsListCol {
	border-right:1px solid #58595b;
	height:85px;
	width:300px;
	float:left;
	display:inline;
	padding-right:25px;
	margin:10px 25px 10px 0;
	}
	.MPLastCol {
		border-right:none;
		margin-right:0;
		width:300px;
		}
		
h2.MajorProjects {
	margin:30px 0 10px 0;	
	}

h3.MajorProjects {
	padding:15px 0 0 0;	
	}

.ProductsListCol {
	border-right:1px solid #58595b;
	height:140px;
	width:140px;
	float:left;
	display:inline;
	padding-right:25px;
	margin:0 25px 10px 0;
	}
	.LastCol {
		border-right:none;
		margin-right:0;
		width:130px;
		}
table.ProductsTable {
	width:350px;
	float:left;
	margin:0 10px 5px 0;
	}
	table.ProductsTable td {
		vertical-align:middle;
		}
		
h2.ProductSections {
	margin:30px 0 10px 0;	
	}
	
h3.ProductSections {
	padding:25px 0 0 0;	
	}
	
p.ProductSections {
	padding:0 0 1px 0;
	}
	
p.Top {
	margin:25px 20px 0 0;
	text-align:right;
	}
	
.RentalsListCol1 {
	width:190px;
	float:left;
	margin:0 10px 5px 0;
	}
	.RentalsListCol2 {
	width:310px;
	float:left;
	margin:0 0 5px 0;
	}
	
img.RecyclingBottom {
	margin-top:25px;
	}
	
table.SalesTable {
	float:right;
	margin:0 0 25px 15px;
	}
	table.SalesTable td {
		vertical-align:middle;
		padding-bottom:10px;
		}
		
img.EAddress {
	vertical-align:middle;
	}
	
	
/* ---------------------------------------- Home Images */

.HomeAwardImage {
	float:right;
	margin:0 0 15px 0;
	position:relative;
	width:260px;
    height:476px;
	}
	
.HomeImages {
	float:right;
	margin:0 0 15px 0;
	position:relative;
	width:260px;
    height:476px;
	}

.HomeImages IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

.HomeImages IMG.active {
    z-index:10;
    opacity:1.0;
}

.HomeImages IMG.last-active {
    z-index:9;
}

	


/* ----------------------------------------------- Tonnage Calculator Form */

table.TonnageCalculator {
	margin-top:10px;
	background:#dcdddf;
	border-bottom:#dcdddf solid 20px;
	}

table.TonnageCalculator td {
	padding:3px 15px;
	vertical-align:top;
	}
	table.TonnageCalculator td.FormItems {
		padding-left:67px;
		}
		table.TonnageCalculator td.PaddingTop10px {
			padding-top:10px;
			}

table.TonnageCalculator h2 {
	padding:15px 0 6px 0;
	margin:0 0 4px 0;
	}
	
table.TonnageCalculator hr {
	border:none;
	height:1px;
	background-color:#ABACAD;
	color:#ABACAD;
	margin: 25px 0 10px 0;
	}
	
table.TonnageCalculator .DensityLabelWidth {
	float:left;
	padding-right:10px;
	}
	
table.TonnageCalculator .VolumeLabelWidth {
	width:90px;
	float:left;
	text-align:right;
	padding-right:10px;
	}
	
table.TonnageCalculator .RadioButton {
	float:left;
	margin:1px 3px 0 0;
	}

table.TonnageCalculator .DepthLable {
	margin-right:10px;
	float:left;
	}

table.TonnageCalculator .ResultLable {
	float:left;
	font: bold 14px/21px Arial, Helvetica, sans-serif;
	padding:5px 10px 0 0;
	color: #e46629;
	}

table.TonnageCalculator .MarginLeft10px {
	margin-left:5px;
	}

table.TonnageCalculator .Input {
	width:60px;
	margin-right:5px;
	float:left;
	}
	
table.TonnageCalculator select {
	width:218px;
	}
	
table.TonnageCalculator .Input, table.TonnageCalculator select {
	font: 12px Arial, Helvetica, sans-serif;
	}



/* ---------------------------------------- Footer */

#Footer { 
	width: 980px;
	margin: 0 auto;
	padding:17px 0;
	}
	

.Copyright {
	text-align:right;
	margin-right:5px;
	font:bold 11px Arial, Helvetica, sans-serif;
	color:#6f6e6e;
	}