/* ========================================================================================
EVS UK: Main Layout 
Version:1.0
Author: Raphael Marsh
Last Updated: 29 Nov 2009
=========================================================================================== */

/* STANDARD FORMATTING 
=========================================================================================== */
* {
	margin: 0;
 	padding: 0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:63.3%;
	margin:0;
	padding:0;
	min-width:936px;
	text-align:left;
	line-height:140%;                         
	background-color:#ed1c24;
	background-image:url(../images/generic/body-bg.gif);
	background-repeat:repeat-x;
	background-position:top;
	
}


/* Generic 
=========================================================================================== */
h1 {
	font-size: 2.4em; margin:0;
}
h2 {
	font-size: 1.6em; margin:0; padding-bottom:3px; padding-top:1px; line-height:1.3em;
}
h3 {
	font-size: 1.6em; margin:0; padding-bottom:1px; padding-top:7px; line-height:1.3em;
}

h4 {
	font-size:115%; margin:0; line-height:140%;
}

img {
	border:none;
}
p {
	color:#000; font-size:110%; margin:0; line-height:140%;
}

ul {
	list-style-type:none; margin:0; padding:0 0 2px;
}
a:link {
	text-decoration:none;
}
a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a:active {
	text-decoration:none;
}
.left {
	float:left; padding-right:10px
}
.right {
	float:right; padding-left:10px
}

/* Odd bits fonts ========================================================================= */

.red-title {
  font-size:1.4em; color:#f52028; font-weight:bold;
}

.red { color:#f52028 }

.grey-link {
  font-size:1.1em; color:#555555; text-decoration:underline;
}
.grey-link:hover {
  color:#000000; text-decoration:none;
}
.black-title-link {
  color:#000000; font-weight:bold; text-decoration:underline;
}
.black-title-link:hover {
  text-decoration:none;
}

.body-black {
  font-size:1.1em; color:black;
}
.body-white {
  font-size:1.1em; color:white;
}
.body-grey {
  font-size:1.1em; color:#555555;
}
.body-black-bold {
  font-size:1.1em; color:black; font-weight:bold;
}
.body-red-bold {
  font-size:1.1em; color:#b70108; font-weight:bold;
}

.subtitle-white {
  font-size:1.3em;
  color:white;
  font-weight:bold;
  text-decoration:none
}

.subtitle-white a:link {
	text-decoration:none;
    color:white;
	text-decoration:underline
}
.subtitle-white a:hover {
	text-decoration:underline;
    color:white;
}
.subtitle-white a:active {
	text-decoration:underline;
    color:white;
}
.subtitle-white a{
  font-size:1.3em;
  color:white;
  font-weight:bold;
  text-decoration:none
}


.grey-bread { color:#b2b2b2; padding-bottom:3px }
.grey-bread a { color:#b2b2b2; text-decoration:underline }
.grey-bread a:hover { color:#b2b2b2; text-decoration:none }


/* Structure 
=========================================================================================== */
div#wrapper {
	width:936px; margin: auto; text-align: left;
}
#branding {
	height:139px; background:url(../images/generic/branding-bg.gif) top left no-repeat;
}
#Content {
	float:left; width:936px;
}
#pageContent {
	float:left; width:936px;
	background:url(../images/generic/pageContent-bg.gif) top left repeat-y;
}
#navColumn {
	float:left; position:relative; width:209px; left:-532px;
}
#mainColumn {
	float:left; width:532px; position:relative; top:1px; left:209px;
}
#featureColumn {
	float:right; position:relative; display:inline; width:179px; padding-top:12px;
}
#mainColumn .contentHolder {
	width:512px; margin:14px 10px;
}	
#mainColumn .contentHolder a.link {
	color:#000000; text-decoration:underline;
}	
	#mainColumn .contentHolder a.link:hover {
		text-decoration:none;
	}

	
.bullet { padding-left:25px; color:#000; font-size:120%; line-height:140%; }
.bullet a { color:#000; text-decoration:underline }
.bullet a:hover { color:#FF0000; text-decoration:none }

.bullet li {list-style:disc; padding-bottom:3px; padding-top:3px}

	
#mainColumn .finance {
	 background-color:#0f6473
}	
	
		
.clear {
	clear: both; text-indent: -9999px;
}	
#header {
	height:168px;
}

/* Top Area
=========================================================================================== */
#branding .logo {
	float:left; position:relative; top:0px; border:0;
}
#branding .strapline {
	position:absolute; margin:40px 0 0 45px;
}
#branding .contact {
	position:absolute;
	margin:58px 0 0 556px;
	border:0;
	/*left: 237px;*/
}

#branding p { color:#FFFFFF
}

#branding p.textlink {
	float:right; position:relative; top:4px;
}
	#branding p.textlink a {
		color:#fff; text-decoration:none;
	}
		#branding p.textlink a:hover {
			text-decoration:none;
		}

#branding ul {
	float:left; position:absolute; margin:118px 0 0 220px; width:auto;
}


	#branding ul li {
		float:left; font-size:110%; padding-right:10px; margin-right:10px; border-right:#fff 1px solid;
	}
		#branding ul li.end {
			padding-right:0px; margin-right:0px; border-right:#fff 0px solid;
		}
		#branding ul li a {
			color:#fff; text-decoration:none;
		}
			#branding ul li a:hover, #branding ul li.active  {
				color:#fff;text-decoration:underline;
			}



/* Layout
=========================================================================================== */
	#mainColumn p {
		color:#000; font-size:120%; line-height:140%;
	}
	
	#mainColumn p a { color:#000; text-decoration:underline }
	#mainColumn p a:hover { text-decoration:none; color:#FF0000 }

	/*#mainColumn h2 {
		font-size:130%; color:#f52028; margin-bottom:4px;
	}*/
	



/* Homepage Features
=========================================================================================== */
#homeFeatures {
	position:relative; width:492px; background:#ce070e; padding:10px;
}
	#homeFeatures p {
		color:#fff;
	}
		#homeFeatures p a { color:#fff; text-decoration:underline
	}
			#homeFeatures p a:hover { color:#fff; text-decoration:underline
	}
		
		.featureBox {
			display:block; width:228px; padding:6px; margin-bottom:4px;
		}
			.featureBox img.truck {
				float:left; border:#b70108 1px solid;
			}
				.featureBox p {
					line-height:130% !important;
				}
				.featureBox p.intro {
					display:block; margin:8px 4px;
				}
				
				.featureBox p.intro a:hover {color:#B70108}
				
				#homeFeatures .featureBox .content {
					float:right; width:100px; display:block;
				}
				
				.featureBox h4.intro a {color:#B70108; display:block; margin:8px 4px; text-decoration:none}
				.featureBox h4.intro a:hover {color:#B70108; text-decoration:underline}
		
		.featureBox ul {
			float:left; width:45%; font-size:110%; line-height:150%; margin-bottom:10px;
		}
			.featureBox ul.item {
				margin-right:5px;
			}
				.featureBox ul.item li {
					font-weight:bold; color:#b70108; text-transform:uppercase;
				}
		
		#homeFeatures .featureBox.special {
			background:#ccc;
		}
			#homeFeatures .special p {
				font-weight:bold; color:#b70108;
			}

		
/* Graphical Headers
=========================================================================================== */
#header h1.homepage {
	width:532px; height:168px; text-indent:-5000em; overflow:hidden;
	background:url(../images/homepage-img/homepage-header2.jpg) top no-repeat;
}

#header h1.aboutus {
	width:532px; height:168px; text-indent:-5000em; overflow:hidden;
	background:url(../images/aboutus-img/aboutus-header.jpg) top no-repeat;
}

#header h1.contactus {
	width:532px; height:168px; text-indent:-5000em; overflow:hidden;
	background:url(../images/contact-img/contact-header.gif) top no-repeat;
}

#header h1.export {
	width:532px; height:168px; text-indent:-5000em; overflow:hidden;
	background:url(../images/export-img/export-header.jpg) top no-repeat;
}

#header h1.finance {
	width:532px; height:168px; text-indent:-5000em; overflow:hidden;
	background:url(../images/finance-img/finance-header.jpg) top no-repeat;
}

#header h1.mailinglist {
	width:532px; height:168px; text-indent:-5000em; overflow:hidden;
	background:url(../images/mailing-list/mailing-header.gif) top no-repeat;
}

#header h1.transtrailers {
	width:532px; height:168px; text-indent:-5000em; overflow:hidden;
	background:url(../images/transtrailers/Transtrailers-header.jpg) top no-repeat;
}

#header h1.sellyourtruck {
	width:532px; height:168px; text-indent:-5000em; overflow:hidden;
	background:url(../images/sellyourtruck-img/sellyourtruck-header.jpg) top no-repeat;
}

#header h1.who {
	width:532px; height:168px; text-indent:-5000em; overflow:hidden;
	background:url(../images/who-img/who-header.jpg) top no-repeat;
}



/* Side Nav Column
=========================================================================================== */
#navHolder {
	width:173px; margin:8px; padding:10px;
	background:#ccc url(../images/generic/navHolder.gif) top left no-repeat;
}
	#navHolder ul {
		padding-right:10px; margin-bottom:20px;
	}
		#navHolder ul li {
			font-size:110%; line-height:140%;
			border-bottom:#fff 1px solid; padding-left:2px;
		}
			#navHolder ul li:hover {
				background:#bdbdbd; text-decoration:underline;
			}
			#navHolder ul li.active {
				font-weight:bold; text-decoration:none; background:#bdbdbd;
			}
			#navHolder ul li a {
				color:#000; padding:3px 0 3px 14px; display:block; text-decoration:none;
				background:url(../images/generic/sideNav-bullet.gif) 0 7px no-repeat;
			}
			
	#navHolder p.search {
		text-indent:-5000em; overflow:hidden; width:156px; height:14px;
		background:url(../images/generic/search-title.gif) no-repeat;
	}
	#navHolder p.manufacturer {
		text-indent:-5000em; overflow:hidden; width:166px; height:14px; margin-top:10px;
		background:url(../images/generic/manufacturer-title.gif) no-repeat;
	}
	#navHolder p.registration {
		text-indent:-5000em; overflow:hidden; width:157px; height:17px;
		background:url(../images/generic/registration-title.gif) no-repeat;
	}	
	
	#navHolder select {
		font-size:120%; line-height:150%; padding:2px 2px 2px 0; height:22px; width:174px; margin-bottom:4px;
	}
	#navHolder input {
		float:left; font-size:130%; line-height:150%; padding:2px 0 6px 0; /*width:95px;*/
	}
	#navHolder p {
		margin:7px 0;
	}
				

/* Nav Column Feature Panels
=========================================================================================== */
.navFeature p {
	font-size:120%; line-height:150%; color:#fff;
}
	.navFeature p a {
		color:#fff; text-decoration:underline;
	}
		.navFeature p a:hover {
			text-decoration:none;
		}

.navFeature.mailing {
	width:177px; margin:16px; padding-top:10px; text-align:right;
	background:url(../images/generic/mailing-feature.gif) top right no-repeat;
}
.navFeature.hours {
	width:169px; margin:20px;
}
	.navFeature.hours strong {
		font-size:120%;
	}
	
	
/* Breadcrumbs
=========================================================================================== */		
#breadcrumbs {
	float:left; position:relative; display:block; width:512px; margin-bottom:8px;
}
#breadcrumbs ul li {
	float:left; position:relative; font-size:110%; color:#b2b2b2;
}
	#breadcrumbs ul li a {
		padding:0 10px 0 5px; text-decoration:underline; display:block; color:#b2b2b2;
		background:url(../images/generic/breadcrumb-arrow.gif) right no-repeat;
	}
		#breadcrumbs ul li.active a {
			color:#929292; text-decoration:none; background:none;
		}
			#breadcrumbs ul li.active a:hover {
				text-decoration:underline;
			}
		#breadcrumbs ul li a:hover {
			text-decoration:none;
		}



/* Search Box
=========================================================================================== */	
#searchBox {
	float:left; padding:10px; background:#ccc; width:492px; margin-bottom:10px;
}
	#searchBox p {
		margin-bottom:8px;
	}
		#searchBox p.advSearch {
			float:left; text-indent:-5000em; overflow:hidden; width:141px; height:14px; margin-right:8px;
			background:url(../images/generic/advsearch-title.gif) no-repeat;
		}
	#searchBox select {
		float:left; margin:0 5px 7px 0; padding:2px 0 3px 0; width:158px;
	}
	#searchBox select.short {
		width:116px;
	}


/* Paginator
=========================================================================================== */	
.paginator {
	float:left; width:512px; padding-bottom:10px
}
	.paginator a {
		font-weight:bold; color:#797979; text-decoration:none;
	}
		.paginator a:hover {
			text-decoration:underline;
		}
	.paginator p {
		font-size:120%;
	}
.paginator ul {
	display:block; position:absolute; margin:0 25%;
}
.paginator ul li {
	float:left; position:relative; font-size:120%; color:#797979; font-weight:bold; text-align:center;
}
	.paginator ul li.results {
		margin-right:20px;
	}
	.paginator ul li a {
		float:left; padding:0 3px; text-decoration:none; display:block;
	}
		.paginator ul li.active a {
			color:#b70108;
		}
		.paginator ul li a:hover {
			text-decoration:underline;
		}


/* Search Entry
=========================================================================================== */	
.searchItem {
	float:left; margin:7px 0;
}
	.searchItem img.truck {
		float:left; position:relative; display:block; border:#b70108 1px solid;
	}
	.searchItem .content {
		float:right; width:393px; height:90px;
	}
		.searchItem .content h3 {
			font-size:120%; color:#fff; padding:4px 10px; background:#adadad;
		}
		
		.searchItem .content h3 a {
			color:#fff;
		}
		
		.searchItem .content img {
			margin-top:38px;
		}
		.searchItem .content ul {
			float:left; margin:6px 0 0 10px; width:18%;
		}
			.searchItem .content ul li {
				font-size:110%; line-height:160%; color:#4c4c4c;
			}
				.searchItem .content ul.item li {
					font-weight:bold; color:#b70108; text-transform:uppercase;
				}
	.searchItem.odd .content h3 { /*give alternate items accent colour*/
		background:#919090;
	}
		.searchItem.odd .content  { /*give alternate items accent colour*/
			background:#e9e9e9;
		}



/* Search SOLD fix
=========================================================================================== */
.searchItem table {
    float:left;
}



/* Detail Holder
=========================================================================================== */	
p.backLink a {
	float:left; font-weight:bold; color:#b70108; text-decoration:none;
}
	p.backLink a:hover {
		text-decoration:underline;
	}
p.forwardLink a {
	float:right; font-weight:bold; color:#797979; text-decoration:none;
}
	p.forwardLink a:hover {
		text-decoration:underline;
	}
	
#detailHolder {
	float:left; background:#e4e4e4; width:512px; margin-top:10px;
	border-bottom:#b70108 20px solid;
}
	#detailHolder h1 {
		font-size:130%; color:#fff; background:#b70108; padding:6px 20px;
	}
		#detailHolder h1 a {color:#fff}
		
	#detailHolder .content {
		padding:20px;
	}
	#detailHolder .content p.next a {
		float:right; font-weight:bold; color:#b70108; text-decoration:none;
	}
		#detailHolder .content p.next a:hover {
			text-decoration:underline;
		}
	#detailHolder .content ul {
			float:left; display:block; margin-right:29px;
		}
		#detailHolder .content ul li {
			font-size:120%; line-height:160%; color:#4c4c4c;
		}
			#detailHolder .content ul.item li {
				font-weight:bold; color:#b70108; text-transform:uppercase;
			}
			
/* Truck Images
=========================================================================================== */
#imageGallery {
	float:left; margin:10px 0; width:468px;
}
	#imageGallery img {
		border:#b70108 2px solid;
	}
	#imageGallery p {
		font-size:110%; color:#555555;
	}
	#imageGallery #mainImg {
		float:left; width:auto; margin-bottom:5px;
	}
		#imageGallery #mainImg img {
			margin-bottom:5px;
		}
		#imageGallery #mainImg p {
			text-align:right; color:#555555;
		}
	#imageGallery #thumbs {
		float:right; width:110px;
	}
		#imageGallery #thumbs img {
			margin-bottom:5px;
		}
		#imageGallery #thumbs p {
			text-align:center;
		}

/* Enquiry Form
=========================================================================================== */
div#enguiryForm  {
	position:relative;
}
	div#enguiryForm p {
		float:left; position: relative; margin:1px; font-weight:bold; color:#000;
	}
		div#enguiryForm p.mandatory {
			padding-right:10px; background:url(../images/generic/mandatory.gif) right 5px no-repeat;
		}
		div#enguiryForm p span {
			display:block; width:460px;
		}
		div#enguiryForm label {
			float:left; color:#333; font-size:90%; display:block; width:120px; 
			text-align:right; padding-right:10px; font-weight:normal; line-height:170%;
		}
		div#enguiryForm input {
			font-size:110%; width:180px; padding:2px 0 3px 0;
		}
		div#enguiryForm select {
			width:200px; padding:2px 0 3px 0; height:24px;
		}	
p.callQuote {
	font-size:180% !important;
}
	p.callQuote strong {
		font-size:120% !important; color:#b70108;
	}
	
/* Enquiry Action Buttons
=========================================================================================== */
div#enguiryAction  {
	float:right; width:auto; margin:20px 20px 10px 120px;
}
	div#enguiryAction p  {
		float:left; font-size:180%; color:#b70108; margin-right:10px;
	}

/* Feature Column Feature Panels
=========================================================================================== */
.sideFeature {
	margin-bottom:10px;
}
.sideFeature p {
	font-size:120%; line-height:150%; color:#000; text-decoration:none
}

.sideFeature p a { color:#000; text-decoration:underline
}
.sideFeature p a:hover { text-decoration:none
}
	.africa {
		background-image:url(../images/generic/east-africa-banner.jpg );
		background-position:top left;
		background-repeat:no-repeat;
		width:159px; padding:10px 10px 10px 10px;
		
	}
	.africa p { color:#fff; text-decoration:none }
	.africa p a { color:#fff; text-decoration:underline }
    .africa p a:hover { text-decoration:none }
	
	
	
	.exportTop {
		float:left; position:relative;
		background:#648099 url(../images/generic/feature-export-top.gif) top no-repeat;
	}
	.exportBot {
		float:left; position:relative; width:159px; padding:4px 10px 14px 10px; margin-top:1px;
		background:#648099 url(../images/generic/feature-export-bot.gif) bottom no-repeat;
	}
	
	.transTop {
		float:left; position:relative;
		background:#555 url(../images/generic/trans-logo-banner.gif) top no-repeat;
	}
	.transBot {
		float:left; position:relative; width:159px; padding:10px; margin-top:1px;
		background:#555 url(../images/generic/feature-trans-bot.gif) bottom no-repeat;
	}
		.transBot p {
			font-weight:bold; color:#fff;
		}
		
	.valuationTop {
		float:left; position:relative;
		background:#cdcdcd url(../images/generic/feature-valuation-top.gif) top no-repeat;
	}
	.valuationBot {
		float:left; position:relative; width:159px; padding:2px 10px 10px 10px; margin-top:1px;
		background:#cdcdcd url(../images/generic/feature-valuation-bot.gif) bottom no-repeat;
	}
		.valuationBot p {
			font-weight:bold; color:#000;
		}


/*  Graphical Button
=========================================================================================== */
.button:link,
.button:visited,
.button:hover { border:none;}
* html #wrap { width:13em}

.button:link,
.button:visited { /* Top left corner, top edge */
	float:left; color:#fff; font-size:11px; font-weight:bold; text-decoration:none; text-transform:uppercase;
	background:#ff0000 url(../images/generic/buttonRed.gif) no-repeat;
}
.button * { display:block; }
.button { float:right !important; }
	.button span { /* Top right corner */
		padding:6px 0 0;
		background:url(../images/generic/cornersRed.gif) right top no-repeat;
	}
	.button span span { /* Bottom left corner, left and bottom edges */
		padding:0 0 0 6px;
		background:url(../images/generic/buttonRed.gif) no-repeat left bottom;
	}
			.button span span span { /* Bottom right corner */
				padding:0 0 6px;
				background:url(../images/generic/cornersRed.gif) no-repeat right bottom;
			}
				.button span span span span { /* Right edge */
					padding:0px 6px 1px 2px; 
					background:url(../images/generic/buttonRed.gif) no-repeat right center;
				}
	.button img {
		display:inline; padding-left:4px; border:0; margin:0;
	}
		
	.button:hover,
	.button:focus,
	.button:active { /* Make the button more visible on :hover and :focus */
		color:#ddd;
	}
	

/* Grey button on dark red background */
.button.grey { 
	background: url(../images/generic/buttonGrey.gif) no-repeat; }
.button.grey span { 
	background:url(../images/generic/cornersGrey.gif) right top no-repeat; }
.button.grey span span {
	background:url(../images/generic/buttonGrey.gif) no-repeat left bottom; }	
.button.grey span span span { 
	background:url(../images/generic/cornersGrey.gif) no-repeat right bottom; }
.button.grey span span span span { 
	background:url(../images/generic/buttonGrey.gif) no-repeat right center; }

/*Changes button images when sitting on basket panel*/
.button.lightBg .button { 
	background: url(../images/generic/cornersLight.gif) no-repeat; }
.button.lightBg span { 
	background:url(../images/generic/cornersLight.gif) right top no-repeat; }
.button.lightBg span span {
	background:url(../images/generic/buttonLight.gif) no-repeat left bottom; }	
.button.lightBg span span span { 
	background:url(../images/generic/cornersLight.gif) no-repeat right bottom; }
.button.lightBg span span span span { 
	background:url(../images/generic/buttonLight.gif) no-repeat right center; }


/* Footer
=========================================================================================== */
#footer { 
	margin:0 auto; clear:both; padding-top:10px; border-top:1px solid #fff; height:120px;
} 
#footer p {
	color:#ccc;
}
#footer .links {
	position:relative; width:936px; margin:0 auto; height:121px;
	background:url(../images/generic/footer-bg.jpg) bottom center no-repeat;
}
	#footer .links ul li {
		float:left; font-size:110%; padding:0 10px; border-right:1px solid #fff;
	}
		#footer .links ul li a {
			color:#fff;
		}
			#footer .links ul li a:hover {
				text-decoration:underline;
			}
	#footer .links p {
		float:left; text-align:left; width:300px;  font-size:110%; line-height:150%;
		display:block; margin:30px 0 0 300px; color:#fff;
	}
		#footer .links p a {
			color:#fff; text-decoration:underline;
		}
			
			
			#footer .links p a:visited {
				text-decoration:none;
			}

			
			
#manFooter {
	margin:0 auto; height:90px;
	background:url(../images/generic/manFooter-bg.gif) top center repeat-x;
}
	#manFooter ul {
		width:936px; margin:0 auto; padding:6px;
	}
		#manFooter ul li {
			float:left; font-size:110%; line-height:150%; padding:0 14px; border-right:1px solid #fff;
		}
			#manFooter ul li a {
				color:#fff;
			}
			
		#manFooter p {
			text-align:center; margin-top:45px; color:#fff;
		}
			#manFooter p a {
				color:#fff; text-decoration:underline;
			}
				#manFooter p a:hover {
					text-decoration:none;
				}