html {
	height: 101%;
	}


	
/* ------------------------------------------------------------
	Default elements
---------------------------------------------------------------- */

body {
	margin: 0px;
	padding: 0px;
	background: url("../images/randomBackgrounds/rotate.php") top left repeat;
	color: #000;
	font: 62.5%/1.5 tahoma, Verdana, Arial, Helvetica, sans-serif;
	line-height: 20px;
	}

a {
	font-weight: bold;
	color: #666666;
	text-decoration: none;
	
}

a:visited {
	color: #333333;
	text-decoration: none;
}

a:hover {
	color: #000;
	text-decoration: underline;

}

acronym {
	border-bottom: 1px #999999 dashed;
	cursor: help;
}


h1, h2, h3, h4 {
	color: #484848;
	text-align:left;
	margin: 0 0 5px 0;
	padding:0;
	letter-spacing: 1px;
	line-height: 1em;
	}
	
h4 {
	font-size: 1.3em;
	}
	
/*-- we need to set heights for the headers here as this is how sIFR gets the size to replace the fonts with  font swf's. If there is no flash the headers are given the sizes through sifr.css--*/	

h1 { height:40px; }
	
h2 { height:30px; }
	
h3 { height:20px; }
	
h4 { height:17px; }


#faq h2 { height:21px }
		
strong {
	}
	
ul {
	margin-left: -10px;
	}	


ul li {
	background: url("../images/backgrounds/bulletListNoLink.gif") 0 6px no-repeat;
	list-style: none;
	}
	
ul.aLinks li {
	background: url("../images/backgrounds/bulletList.gif") 0 6px no-repeat;
	list-style: none;
	}	
	
li {
	padding: 0 0 0 16px;
	
	}
	
li a:hover {
	color: #FFFFFF;
	background-color: #000;
	}


/* ------------------------------------------------------------
	Form elements
---------------------------------------------------------------- */

form, input, textarea, select, button, fieldset {
	
	margin: 0px;
}

form, fieldset {
	padding: 0px;
	
}

input, textarea, select {
	border: 1px #7f9db9 solid;
	background-color: #FFFFFF;
	color: #333333;
	padding: 1px;
	font-size: 1.0em;
}

input.radio {
	border: none;
	background: none;
	padding: 0;
	margin: 0 0 -2px 0 !important;
	width: 13px !important;	
	}

input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus {
	border: 1px #005D7F solid;
	background-color: #FFFFCC;
	color: #000000;
}


fieldset {
	border: none;
}

legend {
	display: none;
}	


	
/*---home page styles ---*/
		
#contentHome {
	position: relative;
	background: url("../images/backgrounds/homeShaddow.png") top left no-repeat;
	height: 740px;
	width: 950px;
	margin: 0px auto;
	}
	
#homeImageRandom {
	display: block;
	height: 670px;
	width: 890px;
	position: absolute;
	top: 10px;
	left:30px;
	z-index: 5;
	}

#homeImageRandom img {
	height:670px;
	}
	

	
#audioPlayer {
	position: absolute;
	top: 70px;
	right: 40px;
	width: 320px;
	height: 40px;
	display:block;
	z-index: 5000000;
	}
	
#homeIntro {
	position: absolute;
	top: 119px;
	left: 40px;
	display: block;
	height: 320px;
	width: 320px;
	background: #000;
	z-index:15;
	}
	
#homeWhatCanWeDo {
	position: absolute;
	top: 229px;
	left: 370px;
	display: block;
	height: 210px;
	width: 319px;
	background:url("../images/backgrounds/homeWhatDoBg.gif") 0 0 no-repeat;
	z-index:20;
	}
	
#homeWhichBrands {
	position: absolute;
	top: 448px;
	left: 261px;
	display: block;
	height: 210px;
	width: 216px;
	z-index:20;
	background:url("../images/backgrounds/homeWhichBrandsBg.gif") 0 0 no-repeat;
	}
	
#homePromo {
	position: absolute;
	top: 448px;
	right: 41px;
	display: block;
	width: 318px;
	height: 208px;
	z-index:20;
	background: url("../images/backgrounds/homePromoBg.gif") 0 0 no-repeat;
	}
	

#homeFooter {
	position: absolute;
	bottom: 0;
	left: 40px;
	z-index: 10000000000;
	width: 869px;
	height:52px;
	display: block;
	}
	
/*--- Style the blank boxes (used in combination to set position of main navigation buttons) ---*/
	
.blankBox {
	position: absolute;
	border: 1px solid #FFF;
	display: block;
	height: 98px;
	width: 98px;
	z-index:100;
	}
	
.box1 {
	top: 119px;
	right:41px;
	}

.box2 {
	right: 151px;
	top: 229px;
	}

.box3 {
	top: 229px;
	right: 41px;	
	}

.box4 {
	left: 699px;
	top: 339px;
	}

.box5 {
	left: 150px;
	top: 448px;	
	}
	
.box6 {
	left: 40px;
	top: 557px;
	}
	
#sectionTitle {
	position: absolute;
	top: 10px;
	left: 340px;
	}
	
#sectionTitle h1 { display: block }
	
#sectionTitle h1 span {
	display: none;
	}
	
/*--- Style the main site navigation buttons ---*/

a.searchButton, a.contactButton, a.homeButton {
	display:block;
	height:98px;
	width: 98px;
	text-indent: -10000px;
	background-position: 0 0;
	background-repeat: no-repeat;
	outline: none;
	}
a.searchButton {		
	background-image: url("../images/buttons/searchButton.gif")
	}
	
a.homeButton {		
	background-image: url("../images/buttons/homeButton.gif")
	}
	
a.contactButton {		
	background-image: url("../images/buttons/contactButton.gif")
	}
	
a.searchButton:hover, a.searchButton:focus, a.contactButton:hover, a.contactButton:focus, a.homeButton:hover, a.homeButton:focus {
	background-position: -98px 0px;
	}
	

/* ------------------------------------------------------------
	Logo
---------------------------------------------------------------- */

#logo {
	display: block;
	height:90px;
	padding: 0 0 0 9px;
	text-align:left;
	background-color: #FFF;
	margin: -5px 0 0px 0;
	}

#logo h1 {
	margin: 0;
	}

#logo h1 span {
	display: none;
	}

#logo h1 a {
	display: block;
	width: 208px;
	height: 84px;
	background: url("../images/logos/logo.png") top left no-repeat;
	margin: 0 0 0 1px;
	cursor: pointer;
	}
	
#home #logo {
	position:absolute;
	top: 27px;
	left: 40px;
	z-index:100;
	height: 76px !important;
	margin:0 !important;
	padding: 0 0 6px 0;
	border-bottom: 1px solid #FFF;
	width: 869px;
	background: none;
	cursor: pointer
	}
	
#home #logo h1 a {
	margin: 0;
	}

#home #logo h1 a { background: none !important; }
	
/*--- top shaddow for template pages ---*/

	
#centerFrame {
	margin: 0px auto;
	text-align: center;
	width: 950px;
	background:url("../images/backgrounds/shaddowTopWhite.png") top left no-repeat;
	padding-top: 27px;
	}
	
#contentOuter {
	background: url("../images/backgrounds/shaddowMiddle.png") top left repeat-y;
	padding: 0 30px 0 30px;
	width: 890px;
	text-align: left;
	}
	
/*-- tall header styles (case studies page) - note repositioning of boxes here --*/

#tallHeader {
	position: relative;
	width: 890px;
	height: 230px;
	}
	

	
#tallHeader div.box1 {
	left: 120px;
	top:10px;
	}

#tallHeader div.box2 {
	left: 230px;
	top: 10px;
	}
	
#tallHeader div.box3 {
	left: 10px;
	top: 120px;
	}
	
#tallHeader div.box4 {
	left: 230px;
	top: 120px;
	}
	
#tallHeader #sectionTitle {
	position: absolute;
	top: 10px;
	right: 10px;
	height: 210px;
	width: 540px;
	background-color:#FFFFFF;
	z-index:40;
	}
	
/*-- shoert header styles (search, contact etc) --*/

#shortHeader {
	position: relative;
	width: 890px;
	height: 120px;
	}
			
#shortHeader div.box1 {
	left: 120px;
	top:10px;
	}

#shortHeader div.box2 {
	left: 230px;
	top: 10px;
	}
	
	
#sectionOverview {
	border-bottom: 1px solid #000;
	margin-bottom: 30px;
	}
	
#sectionOverview .fleft1 {
	float: left;
	width:100px;
	}
	
	
#sectionOverview .fleft2 {
	float: left;
	width:200px;
	}
	
#sectionOverview h3 {
	text-transform: uppercase;
	color:#000000;
	}

#sectionOverview .clear { line-height: 0; height:0px; clear:both; }


/*-- place the sliced image and home button here --*/
#col1 {
	float:left;
	display:block;
	width: 320px;
	
	margin-right: 10px;
	}

#col2 {

	float: left;
	width: 540px;
	display:block;
	margin: 0 0px 90px 0;
	}
	
#homeLink {
	bottom: 0px;
	left: 0;
	height: 100px;
	width:126px;
	display: block;
	z-index:30;
	}
	
#mainCopyContent {
	width: 870px;
	padding: 10px 10px 0 10px;
	margin: 0;
	background: #FFF;
	}
	
	
/* CASESTUDY THUMBS 

Here we set the layout and styles for the car thumnail that open the lightbox*/

.gallery {
	padding: 0 0 0 0;
	width: 530px; 
	}

.gallery ul { 
	margin:0; 
	padding:0; 
	list-style:none; 
	position:relative; 
	height: 110px;
	margin-top: 5px;  
	}

.gallery ul li { 
	display:block; 
	width:auto; 
	float:left;
	padding: 0;
	background: none;
	border-bottom: none;
	}
	
.gallery ul li a { 
	display: block; 	
	}
	
/*--here we set the gallery header icon to close using some javascript--*/
.gallery ul li ul {
	position: relative;  
	width: 525px !important;
	display: block;
	padding: 0 0 0 5px;
	height: 99px;
	margin-bottom: 0px;
	}
	
.gallery ul li ul li {
	background: none !important;
	}
	
.gallery ul li ul li a {
	margin-right: 12px;
	margin-bottom: 12px;
	padding: 0px;
	width:98px; 
	height:98px;
	background: none;
	}	

.gallery ul li ul li a img {
	border: 1px solid #000000;
	width:98px; 
	height:98px;
	display: block; 
	float: left; 
	}
	
.gallery ul li ul li a:hover { 
	background-image:none; 
	z-index:2; 
	}

.gallery ul li ul li a:hover img, .gallery ul li ul li a:active img, .gallery ul li ul li a:focus img { 
	width:98px; 
	height:98px; 
	border:1px solid #cf1043;
	}
	

#footerWhite {
	position: relative;
	background: url("../images/backgrounds/shaddowBottomWhite.png") top left no-repeat;
	height:30px;
	margin: 0px auto;
	text-align: center;
	padding: 30px 0 0 0;
	}
	

/* ------------------------------------------------------------
	Hygeine navigation for the footer
----------------------------------------------------------------*/

ul#hygeineNav {
	bottom: 20px;
	position: absolute;
	left:40px;
	width:350px;
	}

/*set the correct position for the footer nav on the home page (containing relative div is a different size than the rest of the site) */

#home ul#hygeineNav {
	left: 0;
	bottom: 37px
	}

ul#hygeineNav,  ul#hygeineNav li {
	list-style: none;
	list-style-type: none;
	display: inline;
	padding: 0px;
	margin: 0px;
    text-transform: uppercase;
	}
	
ul#hygeineNav li a {
	border-right: 1px solid #FFF;
	font-weight: normal;
	}
	
ul#hygeineNav li, ul#hygeineNav li a, ul#hygeineNav li a:visited {
	color: #FFF;
	font-size:1em;
	margin: 0px;
	padding: 0 8px 0 2px;
	line-height: 1em;
	display: block;
	float: left;
	border-bottom: none;
	background:none;
	}
	
ul#hygeineNav li a {
	text-decoration: none !important
	}

ul#hygeineNav li.last a, ul#hygeineNav li.last a:visited {
	margin-right: 0px;
	}

ul#hygeineNav li a:hover, ul#hygeineNav li a:focus {
	color: #FFFFFF;
	}
	
/*--- footer label logo links ---*/

#motionContainerContainer {
	position: absolute;
	right: 40px;
	width: 410px;
	}


	
#motioncontainer {
	width: 400px; 
	height: 35px;
	float: right;
	margin-right: 0;
	}
	
#home #motioncontainer {
	margin-top: 7px;
	}

#motioncontainer a img {
	border: none; /* Set image border color */
	}

#statusdiv { /* taken this out for now */
	visibility: hidden;
	}

#motioncontainer a:hover {
	color: red; /* Dummy definition to overcome IE bug */
	}


/* End Gallery Styles */
	

/* ------------------------------------------------------------
	Simple and Search form
---------------------------------------------------------------- */

/*- search top bg image -*/
.search #shortHeader {
	background: url("../images/backgrounds/search-header.jpg") top left no-repeat;
	} 
/*- search link bg image -*/
.search #homeLink {
	background: url("../images/backgrounds/search-home.jpg") top left no-repeat;
	}
/*- search bottom bg image -*/	
.search #mainCopyContent { 
	background: #FFF url("../images/backgrounds/search-bottom.jpg") bottom left no-repeat;
	}
	
.search #sectionTitle h1 { height: 75px; width: 206px; background:url(../images/backgrounds/searchCatalogueTitle.gif) 0 0 no-repeat;
}
#simpleSearch {
	background-color:#000000;
	padding: 5px;
	color:#FFFFFF;
	margin: 0 0 5px 0;
	}

#search span {
	position:relative;
	float: left;
	margin: 0 10px 5px 0;
	}
	
	
#search label.plain {
	color:#999999;
	text-align:right;
	}
	
#search {
	position: relative;
	
	}
	
#search input, #search select {
	width: 99%;
	margin: 0 !important;
	}
	
#search .col1 {
	position: relative;
	float:left;
	width:110px;
	margin-right: 10px;
	}
	
#search .col2 {
	float: left;
	width:200px;
	margin-right: 10px;
	}
	
#search .col3 {
	float: left;
	width:210px;
	margin-right: 0	
	}
	
input.formSearch {
	background: url("../images/buttons/formSearch.gif") 0 0 no-repeat;
	display: block;
	height: 20px;
	width: 77px;
	border: none;
	text-indent: -10000px;
	cursor: pointer; 
	}
	
input.formSearch:hover, input.formSearch:focus {
	background: url("../images/buttons/formSearch.gif") 0 -20px no-repeat;
	}
	
	
/*--Table styling, for the search results and product page--*/
table {
	margin: 15px 0 15px 0;
	}

th {
	
	height: 25px;
	text-align:left;
	padding: 5px;
	}
	
td {
	border-top: 1px solid #e2e2e2;
	padding: 5px;
	font-size: .90em;
	line-height: 12px;
	vertical-align: top;
	}
	
tr.alternative {
	background: #F9F9F9;
	}
	
/*--- BEGIN THE RANDOM SETS OF BACKGROUNDS FOR THE SHORT HEADER BASED PAGES ---*/	

.randomBgSet1 #shortHeader {
	background: url("../images/backgrounds/links-header.jpg") 0 0 no-repeat;
	} 

.randomBgSet1 #homeLink {
	background: url("../images/backgrounds/links-home.jpg") 0 0 no-repeat;
	}

.randomBgSet1 #mainCopyContent { 
	background: #FFF url("../images/backgrounds/links-bottom.jpg") bottom left no-repeat;
	}

/*---------------------------------------------------------------------------------------------*/
	
.randomBgSet2 #shortHeader {
	background: url("../images/backgrounds/faq-header.jpg") 0 0 no-repeat;
	} 

.randomBgSet2 #homeLink {
	background: url("../images/backgrounds/faq-home.jpg") 0 0 no-repeat;
	}

.randomBgSet2 #mainCopyContent { 
	background: #FFF url("../images/backgrounds/faq-bottom.jpg") bottom left no-repeat;
	}

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

.randomBgSet3 #shortHeader {
	background: url("../images/backgrounds/contact-header.jpg") 0 0 no-repeat;
	} 

.randomBgSet3 #homeLink {
	background: url("../images/backgrounds/contact-home.jpg") 0 0 no-repeat;
	}
	
.randomBgSet3 #mainCopyContent { 
	background: #FFF url("../images/backgrounds/contact-bottom.jpg") bottom left no-repeat;
	}*/
	
/*---------------------------------------------------------------------------------------------*/	


	
/*--- END THE RANDOM SETS OF BACKGROUNDS FOR THE SHORT HEADER BASED PAGES ---*/

	
/*-- LINKS custom styles --*/
.links #sectionTitle h1 { height: 37px; width: 101px; background:url("../images/backgrounds/linksTitle.gif") 0 0 no-repeat; }

.linkContainer {
	border-bottom: 1px solid #000;
	padding: 15px 0 10px 0;
	margin-right: 30px;
	}
	
.lastLink { border-bottom: none; }

.linksImg {
	float:left;
	width: 102px;
	}
	
.linksText {
	float: left;
	width:388px;
	padding-left: 20px;
	}

/*- CONTACT custom styles -*/

.contact h2 { border-bottom: 1px solid #000; }
	
.contact .col, .ideas .col { float:left; width: 210px;margin-right: 60px; }

.contact #sectionTitle h1 { height: 37px; width: 207px; background:url("../images/backgrounds/contactUsTitle.gif") 0 0 no-repeat;}

.contact #shortHeader {
	background: url("../images/backgrounds/contact_1.jpg") 0 0 no-repeat !important;
	} 

.contact #homeLink {
	background: url("../images/backgrounds/contact_homeLink.jpg") 0 0 no-repeat !important;
	}
	
.contact #mainCopyContent { 
	background: #FFF url("../images/backgrounds/contact_footer.jpg") bottom left no-repeat !important;
	}


/*- FAQ section Header -*/

.faq #sectionTitle h1 { height: 76px; width: 309px; background:url("../images/backgrounds/faqTitle.gif") 0 0 no-repeat; }

.ideas #sectionTitle h1 { height: 75px; width: 177px; background:url("../images/backgrounds/whatCanWeDo.jpg") 0 0 no-repeat;}