﻿html 
{
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	color: White;
}

*
{
	margin: 0;
	padding: 0;
}

body 
{
	margin: 0; 
	padding: 0; 
	border: 0; 
	height: 100%;
	overflow-y: auto; 
	background-color: Black;
	background-image: url(../images/main-bg.gif);
	background-position: top center;
	background-repeat: repeat-y;
}

.clear 
{
	clear: both;
}

.left
{
float: left;
}

.right
{
float: left;	
}

#mainBG
{
	width: 100%; 	
	top: 0;
	left: 0;
	z-index: 50;
}

#navigation
{
	width: 600px;
	float: right;	
	text-align: right;	
	position: relative;
	z-index: 7;
}

* html #navigation
{
	position: absolute;
	right: 0;
}

#navigation ul
{
	margin: 20px 0 0 0;
	padding: 0;
}

#navigation li
{
	display: inline;
	padding: 5px 20px;
}

#navigation li.home a:link, #navigation li.home a:visited
{
	display: inline-block;	
	width: 45px;
	height: 39px;
	text-align: left;
	text-indent: -9999px;
	background-image: url(../images/nav_btns.gif);
	background-repeat: no-repeat;
	background-position: 0px top;	
}

#navigation li.home a:hover
{
	background-position: -386px top;
}

#navigation li.contact a:link, #navigation li.contact a:visited
{
	display: inline-block;	
	width: 72px;
	height: 39px;
	text-align: left;
	text-indent: -9999px;
	background-image: url(../images/nav_btns.gif);
	background-repeat: no-repeat;
	background-position: -98px top;	
}

#navigation li.contact a:hover
{
	background-position: -484px top;
}

#navigation li.about a:link, #navigation li.about a:visited
{
	display: inline-block;	
	width: 62px;
	height: 39px;
	text-align: left;
	text-indent: -9999px;
	background-image: url(../images/nav_btns.gif);
	background-repeat: no-repeat;
	background-position: -203px top;	
}

#navigation li.about a:hover
{
	background-position: -589px top;
}

#navigation li.testimonials a:link, #navigation li.testimonials a:visited
{
	display: inline-block;	
	width: 82px;
	height: 39px;
	text-align: left;
	text-indent: -9999px;
	background-image: url(../images/nav_btns.gif);
	background-repeat: no-repeat;
	background-position: -304px top;	
}

#navigation li.testimonials a:hover
{
	background-position: -690px top;
}

#mainWrapper
{
	width: 100%; 
	height: 100%;	
	margin: 0 auto;
	top: 0;	
	z-index: 50;
}

#contentHolder
{
	width: 963px;	
	margin: auto;
	background-image: url(../images/contentHolder-bg.gif);
	background-repeat: no-repeat;
	background-position: right 87px;		
}

#contentHolder
{
	min-height: 940px;	
}

#meet #contentHolder, #contact #contentHolder, #testimonials #contentHolder
{
	background-image: url(../images/contentHolder-bg-02.gif);	
}

* html #mainBG
{ 
	display: block; 
	width: 100%; 
	height: 100%;		
	top: 0;
	left: 0;
	z-index: 50;
	background-color: Transparent;
}

#footer 
{
	display: block; 
	width: 100%; 	
	position: fixed; 
	bottom: 0; 
	left: 0; 
	z-index: 80;
}

* html #fixpic 
{
	position: absolute;
}

#footer .content
{
	width: 963px;
	margin: 0 auto;
}

#footer .content .base
{
	width: 600px;
	height: 70px;
	background-color: Black;
	background-image: url(../images/footer-bg.gif);
	background-position: top left;
	background-repeat: no-repeat;
	margin: 0;
}

#footer .content .base p
{
	float: left;
	color: #EFEFEF;
	font-size: 70%;
	padding-top: 28px;
}

#footer .content .base p.copy
{
	padding-left: 150px;
	padding-right: 4px;
}

#footer .content .base p.design
{
	color: #CE5101;
	padding-right: 4px;
}

#footer .content .base p.stuart
{
	padding-top: 20px;
	display: block;
	width: 67px;
	height: 33px;
	background-image: url(../images/stuart-walsh.gif);
	background-position: bottom;
	background-repeat: no-repeat;
	text-indent: -9999px;
}

ul#testUL 
{
	float: right;
	margin-top: 50px;
}

ul#testUL li
{
	float: left;
	display: inline;
	list-style: none;
}

#heroBannersContainer { height: 700px; }
#heroBannersContainer ul{}
#heroBannersContainer a { display:block;}
#heroBannersContainer img { display:block }
#heroBanners { width: 267px; height:261px; position:relative; left: 125px; top: 123px; float: left; }
#heroBanners li { display:none; position:absolute; top:0px; left:0px; list-style: none; z-index: 10; }
#heroBanners li.active { display:block }
#heroBanners img
{
	width: 267px; height:261px;
	border:none;
}


#heroBannerThumbs {float: left; width: 350px; position:relative; left: 30px; top: 45px;}
#heroBannerThumbs ul{ margin: 0; padding: 0; }
#heroBannerThumbs li { list-style: none; display: block;}
#heroBannerThumbs li.last { border-bottom:none }
#heroBannerThumbs img { border:none; }

* html #heroBannerThumbs 
{
	position:absolute; top:0; z-index: 15; 
}

img.logo
{
position: relative;
top: 20px;
left: -192px;
}

.left-panel
{
float: left;
position: relative;
top: -59px;	
z-index: 5;
}

#home .left-panel
{
background-image: url(../images/homepage-left-img.gif);	
background-position: 170px left;
background-repeat: no-repeat;
padding-left: 192px;
min-height: 920px;
}

#general .left-panel
{
background-image: url(../images/general-left-panel-bg.gif);
background-position: top left;
background-repeat: no-repeat;
min-height: 920px;
width: 628px;
}

#vehicles .left-panel
{
background-image: url(../images/vehicles-left-panel-bg.gif);
background-position: top left;
background-repeat: no-repeat;
min-height: 920px;
width: 628px;
}

#shops .left-panel
{
background-image: url(../images/shops-left-panel-bg.gif);
background-position: top left;
background-repeat: no-repeat;
min-height: 920px;
width: 628px;
}

#banners .left-panel
{
background-image: url(../images/banners-left-panel-bg.gif);
background-position: top left;
background-repeat: no-repeat;
min-height: 920px;
width: 628px;
}

#health .left-panel
{
background-image: url(../images/health-left-panel-bg.gif);
background-position: top left;
background-repeat: no-repeat;
min-height: 920px;
width: 628px;
}

#meet .left-panel
{
background-image: url(../images/meet-left-panel-bg.gif);
background-position: top left;
background-repeat: no-repeat;
min-height: 920px;
width: 628px;
}

#testimonials .left-panel
{
background-image: url(../images/testimonials-left-panel-bg.gif);
background-position: top left;
background-repeat: no-repeat;
min-height: 920px;
width: 628px;
}

#contact .left-panel
{
background-image: url(../images/contact-left-panel-bg.gif);
background-position: top left;
background-repeat: no-repeat;
min-height: 920px;
width: 628px;
}

.orange
{
color: #CE5101;	
}

.left-panel h1
{
margin: 0;
padding: 165px 0 5px 0;
text-align: center;	
font-size: 28px;
font-family: Arial Narrow;
}

.left-panel h2
{
margin: 0;
padding: 5px 0;
text-align: center;	
font-weight: normal;
font-size: 24px;
font-family: Arial Narrow;
}

.left-panel p.address
{
margin: 0 0 0 250px;
width: 300px;
padding: 5px 0 15px 0;
text-align: right;	
font-weight: bold;
font-size: 18px;
font-family: Arial Narrow;
display: block;
}

.meet.left
{
margin: 165px 40px 0 0;
padding: 0 0 0 50px;
width: 330px;
height: 300px;
}

.meet.left h2.top
{
text-align: right;
margin: 0;
padding: 0 0 5px 0;	
font-size: 30px;
}

.meet.left h2.bottom
{
text-align: left;
margin: 0;
padding: 0;	
font-size: 30px;	
}

.meet.left p.top
{
text-align: right;
padding: 0 0 10px 0;	
font-size: 12px;	
}

.meet.left p.bottom
{
text-align: left;
padding: 0 0 10px 0;	
font-size: 12px;	
}

.meet.left .stage
{
float: left;
margin: 0 0 40px 0;
}

.meet.left .stage p
{
display: block;
width: 142px;
font-size: 11px;
padding: 5px 0;	
margin: 0;
}

.meet.left .stage img
{
border: none;
width: 142px;
height: 109px;	
}

.meet.left .stage.one, .meet.left .stage.three
{
padding-right: 45px;	
}

.meet.right
{
margin: 165px 0 0 0;
padding: 100px 0 0 0;
width: 200px;
background-image: url(../images/key-members.gif);
background-position: center top;
background-repeat: no-repeat;
}

.member
{
width: 200px;
margin: 0 0 10px 0;
display: block;
float: left;
clear: both;	
}

.member img
{
width: 78px;
height: 100px;
float: left;
margin: 0 10px 0 0;	
}

.member h2
{
text-align: left;
margin: 0;
padding: 0;
font-size: 18px;
}

.member p
{
margin: 0;
padding: 0;	
color: #CE5101;	
font-size: 12px;
}

/* Gallery */
#gallery
{
float: right;
width: 306px;
padding-top: 117px;
position: relative;
top: 227px;
background-image: url(../images/portfolio.gif);
background-repeat: no-repeat;
background-position: right 40px;
}

#gallery .left
{
float: left;
width: 20px;
height: 140px;
margin: 56px 0 0 0;
background-image: url(../images/left-arrow.gif);
background-color: Transparent;
border: none;
}

#gallery input.left:disabled
{
background-image: url(../images/left-arrow2.gif);
}

#gallery img
{
float: left;
border: none;
display: block;	
}

#gallery .right
{
float: left;
width: 20px;
height: 140px;
margin: 56px 0 0 0;	
background-image: url(../images/right-arrow.gif);
background-color: Transparent;
border: none;
}

#gallery input.right:disabled
{
background-image: url(../images/right-arrow2.gif);
}

/* General */
.signs
{
margin: 160px 0 0 25px;
width: 600px;
height: 200px;
float: left;
clear: both;
}

.moulded
{
margin: 0 0 0 25px;
width: 600px;
height: 175px;
float: left;
clear: both;
}

.engraved
{
margin: 0 0 0 25px;
width: 600px;
height: 165px;
float: left;
clear: both;
}

.exhibition
{
margin: 0 0 0 25px;
width: 600px;
float: left;
clear: both;	
}

.signs img
{
display: block;
position: absolute;
left: 0;
margin: -35px 0 0 410px;
}

.engraved img
{
display: block;
float: left;
position: absolute;
margin: -15px 0 0 0;
}

.moulded img
{
display: block;
left: 0;
position: absolute;
margin: -55px 0 0 440px;
}

.exhibition img
{
display: block;
float: left;
position: absolute;
margin: -25px 0 0 0;
}

.signs h2, .moulded h2
{
margin: 0;
padding: 0;
font-size: 26px;
text-align: left;
}

.engraved h2, .exhibition h2
{
margin: 0;
padding: 0;
font-size: 26px;
text-align: right;
}

.signs p, .moulded p
{
margin: 0;
padding: 0;
font-size: 12px;
width: 350px;
text-align: left;
float: left;
}

.engraved p, .exhibition p
{
margin: 0;
padding: 0;
font-size: 12px;
text-align: right;
width: 350px;
float: right;
}

/* Health & Safety solutions */
.self
{
margin: 160px 0 0 25px;
width: 600px;
height: 200px;
float: left;
clear: both;
}


.ready
{
margin: 0 0 0 25px;
width: 600px;
height: 175px;
float: left;
clear: both;
}

.warning
{
margin: 0 0 0 25px;
width: 600px;
height: 175px;
float: left;
clear: both;
}

.legislation
{
margin: 0 0 0 25px;
width: 600px;
float: left;
clear: both;	
}

.self img
{
display: block;
position: absolute;
left: 0;
margin: -35px 0 0 410px;
}

.warning img
{
display: block;
left: 0;
position: absolute;
margin: -55px 0 0 440px;
}

.ready img
{
display: block;
position: absolute;
left: 0;
margin: -45px 0 0 30px;
}

.legislation img
{
display: block;
float: left;
position: absolute;
margin: -15px 0 0 20px;
}

.self h2, .warning h2
{
margin: 0;
padding: 0;
font-size: 26px;
text-align: left;
}

.legislation h2, .ready h2
{
margin: 0;
padding: 0;
font-size: 26px;
text-align: right;
}

.self p, .warning p
{
margin: 0;
padding: 0;
font-size: 12px;
width: 350px;
text-align: left;
float: left;
}

.legislation p, .ready p
{
margin: 0;
padding: 0;
font-size: 12px;
text-align: right;
width: 350px;
float: right;
}

/* Banners, flags & bunting */
.pvc
{
margin: 160px 0 0 25px;
width: 600px;
height: 200px;
float: left;
clear: both;
}


.flagpoles
{
margin: 0 0 0 25px;
width: 600px;
height: 175px;
float: left;
clear: both;
}

.rolla
{
margin: 0 0 0 25px;
width: 600px;
height: 155px;
float: left;
clear: both;
}

.windchaser
{
margin: 0 0 0 25px;
width: 600px;
float: left;
clear: both;	
}

.pvc img
{
display: block;
position: absolute;
left: 0;
margin: -35px 0 0 410px;
}

.rolla img
{
display: block;
left: 0;
position: absolute;
margin: -60px 0 0 415px;
}

.flagpoles img
{
display: block;
position: absolute;
left: 0;
margin: -20px 0 0 65px;
}

.windchaser img
{
display: block;
float: left;
position: absolute;
margin: -30px 0 0 25px;
}

.pvc h2, .rolla h2
{
margin: 0;
padding: 0;
font-size: 26px;
text-align: left;
}

.windchaser h2, .flagpoles h2
{
margin: 0;
padding: 0;
font-size: 26px;
text-align: right;
}

.pvc p, .rolla p
{
margin: 0;
padding: 0;
font-size: 12px;
width: 350px;
text-align: left;
float: left;
}

.windchaser p, .flagpoles p
{
margin: 0;
padding: 0;
font-size: 12px;
text-align: right;
width: 350px;
float: right;
}

/* Shop branding  */
.shop
{
margin: 160px 0 0 25px;
width: 600px;
height: 200px;
float: left;
clear: both;
}


.window
{
margin: 0 0 0 25px;
width: 600px;
height: 175px;
float: left;
clear: both;
}

.pavement
{
margin: 0 0 0 25px;
width: 600px;
height: 170px;
float: left;
clear: both;
}

.hanging
{
margin: 0 0 0 25px;
width: 600px;
float: left;
clear: both;	
}

.shop img
{
display: block;
position: absolute;
left: 0;
margin: -30px 0 0 390px;
}

.pavement img
{
display: block;
left: 0;
position: absolute;
margin: -60px 0 0 455px;
}

.window img
{
display: block;
position: absolute;
left: 0;
margin: -20px 0 0 30px;
}

.hanging img
{
display: block;
float: left;
position: absolute;
margin: -40px 0 0 15px;
}

.shop h2, .pavement h2
{
margin: 0;
padding: 0;
font-size: 26px;
text-align: left;
}

.hanging h2, .window h2
{
margin: 0;
padding: 0;
font-size: 26px;
text-align: right;
}

.shop p, .pavement p
{
margin: 0;
padding: 0;
font-size: 12px;
width: 350px;
text-align: left;
float: left;
}

.hanging p, .window p
{
margin: 0;
padding: 0;
font-size: 12px;
text-align: right;
width: 350px;
float: right;
}

/* Vehicle & fleet livery  */
.vehicle
{
margin: 160px 0 0 25px;
width: 600px;
height: 250px;
float: left;
clear: both;
}


.magnetic
{
margin: 0 0 0 25px;
width: 600px;
height: 225px;
float: left;
clear: both;
}

.fitting
{
margin: 0 0 0 25px;
width: 600px;
height: 170px;
float: left;
clear: both;
}

.vehicle img
{
display: block;
position: absolute;
left: 0;
margin: -30px 0 0 390px;
}

.fitting img
{
display: block;
left: 0;
position: absolute;
margin: -60px 0 0 400px;
}

.magnetic img
{
display: block;
position: absolute;
left: 0;
margin: -20px 0 0 30px;
}


.vehicle h2, .fitting h2
{
margin: 0;
padding: 0;
font-size: 26px;
text-align: left;
}

.magnetic h2
{
margin: 0;
padding: 0;
font-size: 26px;
text-align: right;
}

.vehicle p, .fitting p
{
margin: 0;
padding: 0;
font-size: 12px;
width: 350px;
text-align: left;
float: left;
}

.magnetic p
{
margin: 0;
padding: 0;
font-size: 12px;
text-align: right;
width: 350px;
float: right;
}

