@charset "UTF-8";
/* CSS Document */

/*
Title:  PRG Trailers - Styles
Author:	lee@netinspire.co.uk
*/

@import url('http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css');



html, body {
	height: 100%;
	background: #22252e;
}

body {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	color: #222;
	background: transparent /*url('http://prgtrailers.co.uk/images/interface/bg.png') left top repeat*/ ;
	text-align: center;
}

.clearfix {
	width: 100%;
	clear: both;
	height: 0;
	padding-bottom: 1px;
	margin-top: -1px;
}

#page {
	position: relative;
	width: 960px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -125px;
}

#branding {
	position: relative;
	width: 960px;
	height: 165px;
	text-align: right;
}

	#branding h1 {
		position: absolute;
		top: 20px;
		left: 0;
		width: 165px;
		height: 124px;
		text-align: left;
		text-indent: -9999px;
		overflow: hidden;
	}

		#branding h1 a {
			position: relative;
			display: block;
			width: 165px;
			height: 124px;
			top: 0;
			left: 0;
			text-indent: -9999px;
			background: url('http://prgtrailers.co.uk/images/interface/prg-logo.gif') 0 0 no-repeat;
		}

#branding #tagline {
	position: absolute;
	top: 18px;
	right: 70px;
	width: 600px;
	height: 30px;
	text-align: left;
	text-indent: -9999px;
	background: transparent url('http://prgtrailers.co.uk/images/interface/tagline.gif') 0 0 no-repeat;
}

img.logo {
	display: none;
}
	

/* MENUS ------------------------*/

#main-nav {
	/*text-transform: uppercase;*/
	font-size: 115%;
	position: absolute;
	top: 85px;
	right: 5px;
	list-style-type: none;
	height: 48px;
	background: transparent url('http://prgtrailers.co.uk/images/interface/nav-bg.png') right top no-repeat;
}
	#main-nav li {
		display: inline-block;
		float: left;
		/*margin-left: 30px;*/
		font-size: 90%;
		font-weight: bold;
		height: 48px;
	}
	
	#main-nav li.hpl {
		background: url('http://prgtrailers.co.uk//images/interface/nav-bg-left.png') 0 -0 no-repeat;
		padding-left: 10px;
	}
	
	#main-nav li.cul {
		padding-right: 10px;
	}
	
		#main-nav li a:link, #main-nav li a:visited {
			text-decoration: none;
			color: #000;
			display: inline-block;
			height: 33px;
			padding: 15px 11px 0 11px;
		}
		#main-nav li a:hover, #main-nav li a:active {
			color: #069;
		}


#feature {
	width: 960px;
	height: 310px;
	position: relative;
	text-align: left;
	margin-bottom: 30px;
	background: url('http://prgtrailers.co.uk/images/interface/feature-bg.png') 0 0 no-repeat;
}


#feature-wrap {
	width: 920px;
	height: 280px;
	position: relative;
	text-align: left;
	top: 15px;
	left: 20px;
	overflow: hidden;
}

.featured {
	width: 920px;
	height: 280px;
	position: relative;
	text-align: left;
	top: 0;
	left: 0;
}

	.featured h2 {
		font-size: 220%;
		color: #000;
		position: absolute;
		top: 15px;
		left: 595px;
		margin: 0 20px 10px 0;
	}

	.featured p {
		font-size: 130%;
		color: #000;
		position: absolute;
		top: 60px;
		left: 595px;
		line-height: 145%;
		margin: 0 20px 10px 0;
	}

	.featured img {
		position: absolute;
		top: 0;
		left: 0;
	}

	.featured a:link, .featured a:visited {
		position: absolute;
		display: block;
		width: 312px;
		height: 35px;
		top: 225px;
		left: 590px;
		text-indent: -9999px;
		overflow: hidden;
		background: url('http://prgtrailers.co.uk//images/interface/click-to-view-trailers.gif') 0 0 no-repeat;
	}

	.featured a:hover, .featured a:active {
		background-position: 0 -35px;
	}


/* LEAD-INS ------------------------*/
#leadins {
	width: 960px;
	height: 275px;
	margin: 0;
	text-align: left;
	color: #fff;
	background: url('http://prgtrailers.co.uk/images/interface/leadins-bg.png') bottom left no-repeat;
}

#leadins #leadin1 h2, #leadins #leadin2 h2, #leadins #leadin3 h2 {
	font-weight: normal;
	font-size: 176%;
	line-height: 125%;
	margin: 20px 15px 15px 0;
}


#leadins #leadin1 p, #leadins #leadin2 p, #leadins #leadin3 p {
	font-size: 115%;
	font-weight: normal;
	line-height: 150%;
	margin: 1em 15px 1em 0;
}


#leadins a:link, #leadins a:visited {
	position: absolute;
	bottom: 25px;
	right: 20px;
	text-indent: -9999px;
	display: block;
	width: 139px;
	height: 29px;
	overflow: hidden;
	background: url('http://prgtrailers.co.uk//images/interface/see-range-button.gif') 0 0 no-repeat;
}

#leadins a:hover, #leadins a:active {
	background-position: 0 -29px;
}

#leadin1 {
	position: relative;
	float: left;
	width: 285px;
	height: 275px;
	margin-left: 45px;
}

#leadin2 {
	position: relative;
	float: left;
	width: 275px;
	height: 275px;
	margin-left: 25px;
}

	#leadin2 p {
		margin-right: 8px;
	}

#leadin3 {
	position: relative;
	float: left;
	width: 285px;
	height: 275px;
	margin-left: 25px;
}


#content-top {
	position: relative;
	width: 960px;
	height: 15px;
	background: url('http://prgtrailers.co.uk//images/interface/content-top-bg.png') top left no-repeat;
}

#main-content {
	position: relative;
	width: 960px;
	height: auto;
	text-align: left;
	padding: 20px 0 30px 0;
	background: url('http://prgtrailers.co.uk//images/interface/subpage-middle.png') 0 16px repeat-y;
}

#main-content.homepage {
	background: url('http://prgtrailers.co.uk//images/interface/content-main-bg.png') 0 16px repeat-y;
	padding-top: 0;
}

#main-content.twocol {
	background: url('http://prgtrailers.co.uk//images/interface/twocol-middle.png') 0 16px repeat-y;
}
	
#main-content h2 {
	font-size: 280%;
	margin: 0 45px 1em 45px;
}
		#main-content h2 a:link, #main-content h2 a:visited {
			color: #069;
			text-decoration: none;
		}

		#main-content h2 a:hover, #main-content h2 a:active {
			text-decoration: underline;
		}


#main-content h2+h3 {
	margin-top: -.5em;
}


#main-content p {
	font-size: 130%;
	line-height: 135%;
	margin: .5em 45px 1em 45px;
}

#main-content h2+p {
	font-weight: bold;
	margin-top: -.5em;
}


#main-content h3 {
	font-size: 220%;
	margin: 25px 0 -10px 45px;
}


#main-content h4 {
	clear: both;
	font-size: 180%;
	margin: 25px 45px .3em 45px;
}


#main-content ul {
	margin: 0 45px 1.2em 45px;
	font-size: 130%;
	line-height: 175%;
}
	#main-content ul li {
		margin-left: 20px;
		list-style-type: square;
	}
	
#main-content p.brochure {
	float: left;
	height: 50px;
	width: auto;
	margin: 30px 60px;
}
	#main-content p.brochure a:link, #main-content p.brochure a:visited {
		display: block;
		height: 50px;
		padding-left: 55px;
		color: #069;
		text-decoration: none;
		background: url('http://prgtrailers.co.uk/images/interface/pdficon.gif') 0 0 no-repeat;
	}
	#main-content p.brochure a:hover, #main-content p.brochure a:active {
		text-decoration: underline;
	}

#intro {
	position: relative;
	padding: 25px 0;
}


#intro h2 {
	font-size: 280%;
	color: #fff;
	margin: 0 55px 25px 45px;
}


#intro p {
	font-size: 120%;
	color: #fff;
	margin: 1em 35px 1em 360px;
	line-height: 140%;
}


#intro img {
	position: absolute;
	top: 96px;
	left: 45px;
}


#leftcol {
	position: relative;
	float: left;
	width: 640px;
	margin: 0;
	display: inline;
}

#form {
	position: relative;
	width: 550px;
	margin-left: 45px;
}


#rightcol {
	position: relative;
	float: right;
	display: inline;
	width: 300px;
	margin: 0 20px 0 0;
	/*border-bottom: 1px solid #788ca5;*/
}


#address {
	width: 300px;
	height: auto;
}
	#address h3 {
		margin: 5px 0 .55em 30px;
	}
	#address address {
		font-size: 130%;
		line-height: 145%;
		margin: .5em 20px 1em 30px;
	}
	#address p {
		margin: .5em 20px .5em 30px;
	}

p a:link, p a:visited {
	color: #069;
	text-decoration: none;
}
p a:hover, p a:active {
	text-decoration: underline;
}	

#content-bottom {
	position: relative;
	width: 960px;
	height: 15px;
	margin-bottom: 30px;
	background: url('http://prgtrailers.co.uk//images/interface/content-bottom-bg.png') top left no-repeat;
}

#gmap {
	margin: -15px 0 20px 45px;
	width: 568px;
	height: 350px;
	border: 1px solid #788ca5;
}

/* PORTFOLIO GALLERY ------------------------*/

.lcol, .ccol, .rcol {
	position: relative;
	float: left;
	display: inline-block;
	width: 280px;
	height: 210px;
	overflow: hidden;
}

.lcol {
	margin: 10px 15px 20px 45px;
}


.ccol {
	margin: 10px 15px 20px 0;
}


.rcol {
	margin: 10px 45px 20px 0;
}
	
	
dl.trailers {
	width: 870px;
	display: inline-block;
	margin: 0 45px 10px 45px;
	color: #222;
	font-size: 130%;
}

	dl.trailers dt {
		clear: left;
		width: 555px;
		display: inline-block;
		text-align: left;
		margin: 25px 0 .2em 315px;
		font-weight: bold;
		font-size: 150%;
	}
		dl.trailers dt a:link, dl.trailers dt a:visited {
			color: #069;
			font-weight: bold;
			text-decoration: none;
		}
		dl.trailers dt a:hover, dl.trailers dt a:active {
			border-bottom: 2px solid #069;
		}
	
	dl.trailers dd.tn {
		float: left;
		width: 300px;
		height: 175px;
		margin: 0;
		margin-top: -30px;
		display: inline-block;
	}

	dl.trailers dd {
		float: left;
		display: inline-block;
		width: 555px;
		margin-left: 15px;
		line-height: 140%;
	}
	
		#main-content dl.trailers dd p {
			font-size: 108%;
			font-weight: normal;
			margin: 0 0 1em 0;
		}
		
			dl.trailers dd p.link {
				text-align: right;
				margin-right: 20px;
			}
			dl.trailers dd p a:link, dl.trailers dd p a:visited {
				color: #069;
				text-decoration: none;
			}
			dl.trailers dd p a:hover, dl.trailers dd p a:active {
				text-decoration: underline;
			}


#cvs {
	float: right;
	width: 440px;
	display: inline-block;
	margin-top: -20px;
	padding: 0 0 20px 20px;
	/*background: url('http://prgtrailers.co.uk/images/interface/webservicesbg.png') 0 50% no-repeat;*/
}

	#cvs dt {
		clear: left;
		width: 382px;
		display: inline-block;
		text-align: left;
		margin: 30px 0 .2em 85px;
		font-weight: bold;
		color: #0b4648;
	}
		#cvs dt a:link, #cvs dt a:visited {
			color: #069;
			font-weight: bold;
			text-decoration: none;
		}
		#cvs dt a:hover, #cvs dt a:active {
			color: #f60;
			text-decoration: underline;
		}
	
	#cvs dd.icon {
		float: left;
		width: 75px;
		height: 75px;
		margin: 0;
		margin-top: -20px;
		display: inline-block;
	}

	#cvs dd {
		float: left;
		display: inline-block;
		width: 355px;
		margin-left: 10px;
		font-size: 85%;
		line-height: 150%;
	}




	
em {
	font-style: italic;
}
	em span {
		font-weight: bold;
	}
	

.external {
	padding-right: 10px;
	background: url('http://prgtrailers.co.uk/images/interface/external.gif') top right no-repeat;
}



#push {
	clear: both;
	height: 125px;
}

#footerwrap {
	width: 100%;
	height: 125px;
	text-align: center;
}

#footer {
	position: relative;
	width: 960px;
	height: 125px;
	background: transparent url('http://prgtrailers.co.uk/images/interface/footer-bg.png') 0 0 no-repeat;
	margin: 0 auto;
	text-align: center;
	color: #ddd;
	line-height: 170%;
}


.copyright {
	padding-top: 35px;
}

h4.netinspire {
	position: absolute;
	bottom: 15px;
	right: 40px;
}

h4.netinspire a:link, h4.netinspire a:visited {
	color: #555;
	text-decoration: none;
}

h4.netinspire a:hover, h4.netinspire a:active {
	color: #fff;
	text-decoration: underline;
}

		
		
/*
FORM ELEMENTS
*/

#freeform {
	width: 470px;
	position: relative;
	padding-top: 5px;
}

fieldset {
	width: 470px;
	height: auto;
	position: relative;
	top: 0;
	left: 0;
	padding-bottom: 5px;
}

label {
	display: block;
	margin: 1em 20px .2em 0;
}
	label span {
		color: #d00;
	}

#name {
	/*margin: 0 0 0 20px;*/
}

#email {
	/*margin: 0 0 0 20px;*/
}

#phone1 {
	/*margin: 0 0 0 20px;*/
}

#message {
	/*margin: 0 0 0 20px;*/
}

#submit {
	display: block;
	margin: 1em 0 1em 0;
}

#captcha {
	margin: 1em 0 0 0;
}

	#captcha p {
		display: block;
		font-size: 80%;
		text-transform: uppercase;
		margin: .2em 0;
	}

p.note {
	font-size: 85%;
	font-style: italic;
	color: #666;
}




/* ----------------------- LIGHTBOX ELEMENTS --------------------------- */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url('http://prgtrailers.co.uk//images/interface/prevlabel.gif') left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url('http://prgtrailers.co.uk//images/interface/nextlabel.gif') right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }