/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/ 
/* -----------------------------------*/


body, dd, dl, dt, fieldset, legend, blockquote, form, h1, h2, h3, h4, h5, h6, li, ol, ul {
	margin: 0;
	border: 0 none #FFFFFF;
	padding: 0;
	}

h1, h2, h3, h4, h5, h6 {	font-weight:normal;	font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;}

h1 {	font-size:2.8em;	line-height:1.2em}
h2 {	font-size:1.5em;	line-height:1em;	padding-bottom:15px;	color:#4F67A3}
h3 {	font-size:1.5em}

ul {	list-style:none}

html, body {height:100%}
	
body {
	font: 0.7em Arial, Helvetica, Verdana, sans-serif;
	line-height:1.6em;
	color:#555;
	padding:0;
	margin:0;
	min-width:800px;
	}

a {			color:#FFF;	text-decoration:underline;	background-color:transparant}
a:hover {	text-decoration:none}
a:visited {	font-style:italic}

img {border: 0}

.pageClear {	clear: both;	height: 1px;	overflow: hidden;	margin-bottom: 1px;	font-size: 1px;	line-height: 1px}
	
/* -----------------------------------*/
/* ------>>> GLOBAL STYLING <<<-------*/ 
/* -----------------------------------*/

#topBar {background: #FFF url(../images/top-bar.gif) bottom left repeat-x;	text-align:center;	color:#FFF}
#topBar h1 {padding:10px;	padding-bottom:20px;	font-size:1em;	line-height:1.5em}
#topBar h1 a {text-decoration:underline;	color:#FFF;	padding:0;	background:none}
#topbar h1 a:hover {text-decoration:none}


#pageContainer {
	height:100%;
	text-align:left;
	background-color: #FFF;
	min-width:800px;
	}
	
* html #pageContainer
{
	w\idth: expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
}
	
#header {
	width:100%;
	color:#000;
	margin:0;
	padding:0;
	}
#benefits {
	clear:none;
	margin-left:350px;
	margin-right:340px;
	}
#benefits li {background: transparent url(../images/red-bullet.gif) 25px 0.7em no-repeat;	padding-left:38px;	line-height:2em;	padding-bottom:0.1em}
#benefits strong {font-weight:800}	
#logo {
	float:left;	
	display:inline;	
	width:340px;
	padding:10px;
	text-align:center;
	}
#shop {float:right;	width:300px;	padding:10px 20px}


#logo h1 {font-size:1.6em;	line-height:1.2em;	color:#4F67A3;	font-weight:normal}
#benefits, #logo {	padding-top:15px}

#navigation {	width:100%;	background-color:#4F67A3;	font-size:1.1em;	margin:15px 0;	min-height:52px}
#navigation ul {
	list-style:none;
	}
#navigation li {
	float:left;	
	text-align:center;	
	padding:10px;
	height:35px;		
	border-right:1px solid #FFF;	
	background-color:#4F67A3}

#navigation li.current {background-color:#BDCBEE;	color:#000}
#navigation li a {line-height:1.3em;	text-decoration:none}
#navigation li a:hover{	text-decoration:underline}
	
/* -----------------------------------*/
/* ------->>> HOME PROMO <<<----------*/ 
/* -----------------------------------*/

div.tapePromo, div.bespokeTapePromo {
	float:left;
	width:45%;
	margin:10px 0 0 1%;	
	}
div.tapePromo, div.tapePromoMain {background: #FFF url(../images/tape-strip.gif) top left repeat-y}
div.faqsPromoMain, div.contactDetailsMain {background: #FFF url(../images/faq-strip.gif) top left repeat-y}
div.bespokeTapePromo, div.bespokeTapePromoMain {background: #FFF url(../images/bespoketape-strip.gif) top left repeat-y}
div.icon {background: transparent url(../images/tape-tab.gif) 0 0 no-repeat}
div.bespokeIcon {background: transparent url(../images/bespoke-tab.gif) 0 0 no-repeat}
div.tapeContainer {margin-left:40px;		border: 1px solid #C94040}
div.bespokeTapeContainer {margin-left:40px;		border: 1px solid #3B9E63}

div.tapeImage {float:right;	width:100px;	padding-left:10px}
div.tapeContent {padding:10px;	margin-right:110px}
div.tapeContent h1, div.faqsContent h1, div.faqsContainer h1 {	font-size:1.5em;	color:#4F67A3;	}
h1 a, h3 a {background: transparent url(../images/blue-arrow.gif) 0.3em 0.4em no-repeat;	padding-left:20px;	color:#4F67A3;	padding-bottom:10px}
h3 a {line-height:1.5em}
h1 a:hover, h3 a:hover {text-decoration:none;	background-position:0.5em 0.4em}
div.tapeContent h3 {margin:10px 0}
h2.subHeader {border-bottom:1px solid #C94040;	padding-bottom:5px;	margin-bottom:10px}
ul.double {float:left;	width:45%;	padding-bottom:15px}
div.tapeContent ul li {background: transparent url(../images/red-bullet.gif) 0.4em 0.7em no-repeat;	padding-left:15px}
.clear {clear:left}
p a {color:#000;	text-decoration:underline;	margin:10px 0}
div.lists {margin-right:0}
div.pageJump a {color:#4F67A3;	font-size:1.1em;	background: transparent url(../images/blue-arrow.gif) 0.3em 0.4em no-repeat;	padding-left:15px}
div.pageJump p {margin:5px 0}
/* -----------------------------------*/
/* -------->>> internal <<<-----------*/ 
/* -----------------------------------*/
div.links {float:right;	width:25%;	margin:10px 1% 0 0}
div.banner {border-left:7px solid #C94040;	background-color:#EDF0F6;	color:#4F67A3;	padding-left:10px;	margin-bottom:15px;	position:relative}
div.banner a {color:#4F67A3}
div.banner h1 a {background:none;	padding:0}
div.banner p {font-size:1.4em;	line-height:1.5em;	padding-bottom:10px}
div.banner p a {font-weight:800}

div.tapePromoMain, div.bespokeTapePromoMain, div.faqsPromoMain {	width:67%;	margin-right:29%;	margin:10px 0 0 2%;	clear:none;	font-size:1.1em}
div.contactDetailsMain {	width:95%;	margin:10px 0 0 2%;	clear:none;	font-size:1.1em}
div.tapePromoMain div.tapeContent h1, div.bespokeTapePromoMain div.tapeContent h1, div.faqsPromoMain div.faqsContent h1, div.contactDetailsMain h1 {font-size:2em}
div.internal h2 {margin:10px 0}
div.tapePromoMain p {padding-left:10px}

table {font-size:1.3em}
table th {background-color:#4F67A3;	color:#FFF}
th.code {width:20%}
th.text {width:60%}
th.rpc {width:15%}
th, td {text-align:center}
th {padding:6px 0}
td {background-color:#DCE1ED;	padding:3px 0}
td.border {border-left:2px solid #4F67A3;	border-right:2px solid #4F67A3}

div.tapePromoMain h3 {color:#4F67A3}


/* -----------------------------------*/
/* --------->>> FAQ'S <<<-------------*/ 
/* -----------------------------------*/
div.faqs, div.process {
	clear:both;
	margin:0 2%;
	margin-top:20px;
	background: #FFF url(../images/faq-strip.gif) top left repeat-y;
	}
div.faqsMain {	clear:none;	margin-right:29%;	width:67%;	padding-right:10px}
div.faqsIcon {background: transparent url(../images/faq-tab.gif) 0 0 no-repeat}
div.contactIcon {background: transparent url(../images/contact-tab.gif) 0 0 no-repeat}
div.processIcon {background: transparent url(../images/process-tab.gif) 0 0 no-repeat}
div.faqsContainer, div.processContainer {margin-left:40px;	padding:10px;	border: 1px solid #4F67A3}
div.faqs h1, div.process h1	{padding-bottom:20px;	font-size:2.3em}
div.faqs h2, div.process h2, div.internal h2, div.contactDetailsMain h2 {border-bottom:1px solid #C94040;	background: transparent url(../images/question-bg.gif) top left repeat-x;	color:#FFF;	padding:5px 10px}
div.faqs p, div.process p {padding:0 10px}
div.internal h2, div.contactDetailsMain h2 {margin:20px 0;	padding:15px 10px}
div.faqs h2, div.process h2 {margin:10px 0;	padding:10px}
/* -----------------------------------*/
/* --------->>> FOOTER <<<------------*/ 
/* -----------------------------------*/


#footer {	clear:both;	width:100%;	background-color:#000;	color:#FFF;	padding-top:10px;	margin-top:20px}
#footer p.img {	float:left;	width:420px;	padding:10px 30px 20px 10px}
#footer div.links {float:left;	width:45%;	padding-left:30px;	font-size:2em;	margin-bottom:30px}
#footer li {padding:7px}
#footer li a {background: transparent url(../images/arrow-footer.gif) 10px 0.3em no-repeat;	padding-left:25px;	text-decoration:none}
#footer li a:hover {background: transparent url(../images/arrow-footer-ro.gif) 20px 0.3em no-repeat;	padding-left:35px}
#footer a {color:#FFF}
#footer p {	text-align:center;	clear:both}
#footer p a {text-decoration:none}
#footer p a:hover {text-decoration:underline}
#footer h1 {padding:10px; border-bottom:none;	color:#FFF}
#footer h1 a {padding:0;	background:none}

div.contactInfo {	float:right;	width:40%;	font-size:1.2em;	padding:20px;	margin-bottom:30px}
div.contactInfo h3 {	padding:10px}
div.contactInfo a {	color:#000;	text-decoration:underline}
div.enquiryFormFields {padding:10px;	padding-top:20px;	font-size:1em;}
div.enquiryFormFields p {
	clear: both;
	padding-top:0;
	padding-bottom:10px;
	margin:3px;
	} 
div.enquiryFormFields p.checkbox {padding-bottom:0;	vertical-align:top}
  
div.enquiryFormFields label {
  float: left;
  width: 35%;
  text-align: right;
  margin-right:10px;
  }

div.enquiryFormFields input, div.enquiryFormFields select, div.enquiryFormFields textarea {
	width:150px;
	float: left;
	text-align: left;
	padding-right:5%;
	margin-bottom:10px; 
	margin-left:5px; 
	}	
div.enquiryFormFields select {width:165px}
div.enquiryFormFields input.box {
	width:11px;
	margin:0;
	margin-right:10px;
	margin-top:3px}
	
	
div.enquiryFormFields textarea {	width:150px}
div.enquiryFormFields h2 {margin:0;	clear:both}
	
div.enquiryFormFields input.button {
	width:auto;
	margin:5px 10px;
	float:none;
	text-align:center;
	}
div.enquiryFormFields h5 {text-align:center;	margin:5px}

div.contactRow {clear:both;	width:98%}
div.contactRow h3 {padding:10px}
div.contactColumn {float:left;	width:48%;	margin-right:1%}

h3 span {font-size:0.9em}

#payment {width:500px;	margin:10px auto;	padding:15px;	text-align:center}

#promotion {width:95%;	margin: 20px;	border:2px solid #000}
#promotion img.left {float:left}
#promotion img.right {float:right}
#promotion img.centre {clear:none;	text-align:center}

#promotionInfo {font-size:1.2em;	margin:20px 10px}
#promotionInfo h3 {padding:15px;	font-size:2.5em;	color:#FFF;	font-weight:800;	font-style:italic;	text-transform:uppercase}
#orderDetails {float:left;	width:25%;	border:2px solid #4F67A3}
#orderDetails h3 {background-color:#4F67A3}
#actionDetails {float:right;	width:25%;	border:2px solid #4F67A3}
#actionDetails h3 {background-color:#4F67A3}

#offerDetails {margin:0 28% 0 28%;	clear:none;	width:40%;	border:2px solid #77C9EE}
#offerDetails h3 {background-color:#77C9EE}
#promotionInfo ul {padding:10px;	font-size:1.1em}
#promotionInfo li {background: transparent url(../images/blue-bullet.gif) 0.5em 0.3em no-repeat;	padding-left:20px;	padding-bottom:8px}
#offerDetails div {text-align:center;	margin:0 auto;	padding:0 10px}

#promotionInfo p {padding:10px;	font-size:0.9em}
#actions {padding:10px}
#actionDetails h4 {font-size:1.8em;	color:#77C9EE;	font-weight:800;	padding:8px 0;	margin-top:15px}

#actions a {color:#000}
#promotionInfo p.telephone {font-size:2em;	font-weight:800;	padding:5px 0;	margin:3px}

input.button {font-size:1.5em;	text-align:center;	padding:5px}

div.enquiryFormFields ul li {font-size:2em;	background: transparent url(../images/green-tick.gif) 0.1em 0.1em no-repeat;	padding-left:40px;	padding-top:10px;	height:40px}
div.enquiryFormFields ul {padding:5px;	margin:0 0 10px 0}