/* CSS Document */

/* Neutralize styling: 
   Elements we want to clean out entirely: */
html, body, form, fieldset {
        margin: 0;
        padding: 0;
        font: 100%/120%;
}

/* Neutralize styling: 
   Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin: 1em 0;
        padding: 0;
}

/* Apply left margin:
   Only to the few elements that need it: */
li, dd, blockquote {
        margin-left: 1em;
}

/* Miscellaneous conveniences: */
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}
input, select, textarea {
        font-size: 100%;
		font-family: inherit;
}

img {border: 0;}

body
{
  margin: 0;
  background-color: #a5d8e8;
  color: #666666;
  FONT-FAMILY: Arial, Helvetica, Verdana, sans-serif;
  min-width: 956px;
  text-align: center;
}

a:link {text-decoration: underline; color: #006699; background-color: transparent;}
a:visited {text-decoration: underline; color: #006699; background-color: transparent;}
a:hover {text-decoration: none; color: #003366; background-color: transparent;}

/*-- GENERAL BITS --*/
.container {margin: 0 auto; width: 956px; padding: 0; border: 0; position: relative; text-align: left;}

.error{ color:Red; }

/*-- HEADER--*/
.headerArea {float: left; display: inline; width: 956px; height: 150px; margin: 0;}
	.headerArea img {border: 0;}

.headerLogo {float: left; display: inline; width: 297; height: 54px; margin: 28px 0 0 20px;}

.headerAccount {float: right; display: inline; width: 448px; height: 30px; margin: 40px 20px 0 0;}
	.headerAccount p {float: right; display: inline; background: url(images/header_account_icon.gif) center left no-repeat; font-size: 12px; color: #666666; line-height: 1.5em; padding: 0 0 0 22px;}

.headerAccountActive {float: right; display: inline; width: 448px; height: 30px; margin: 40px 20px 0 0;}
	.headerAccountActive p {float: right; display: inline; background: url(images/header_account_icon_active.gif) center left no-repeat; font-size: 12px; color: #666666; line-height: 1.5em; padding: 0 0 0 22px;}

/*-- NAVBAR --*/
.navbar {float: left; width: 956px; height: 41px; margin: 0; background: url(images/header_nav_bg.gif) top left no-repeat;}
	.navbar ul {display: inline; float: left; list-style: none; margin: 14px 0 0 20px; padding: 0;}
	.navbar li {display: inline; float: left; margin: 0 50px 0 0;}
	.navbar li a {display: inline; float: left; height: 16px;}
	.navbar li span {display: none;}
	
#nav01 a {background: url(images/nav_find_a_message_off.gif) top left no-repeat; width: 97px; height: 16px;}
#nav01 a:hover {background: url(images/nav_find_a_message_on.gif) top left no-repeat;}
#nav01on a {background: url(images/nav_find_a_message_on.gif) top left no-repeat; width: 97px; height: 16px;}

#nav02 a {background: url(images/nav_share_your_message_off.gif) top left no-repeat; width: 137px; height: 16px;}
#nav02 a:hover {background: url(images/nav_share_your_message_on.gif) top left no-repeat;}
#nav02on a {background: url(images/nav_share_your_message_on.gif) top left no-repeat; width: 137px; height: 16px;}

#nav03 a {background: url(images/nav_support_off.gif) top left no-repeat; width: 52px; height: 16px;}
#nav03 a:hover {background: url(images/nav_support_on.gif) top left no-repeat;}
#nav03on a {background: url(images/nav_support_on.gif) top left no-repeat; width: 52px; height: 16px;}

#nav04 a {background: url(images/nav_read_this_off.gif) top left no-repeat; width: 59px; height: 16px;}
#nav04 a:hover {background: url(images/nav_read_this_on.gif) top left no-repeat;}
#nav04on a {background: url(images/nav_read_this_on.gif) top left no-repeat; width: 59px; height: 16px;}

#nav05 a {background: url(images/nav_write_that_off.gif) top left no-repeat; width: 70px; height: 16px;}
#nav05 a:hover {background: url(images/nav_write_that_on.gif) top left no-repeat;}
#nav05on a {background: url(images/nav_write_that_on.gif) top left no-repeat; width: 70px; height: 16px;}

#nav06 a {background: url(images/nav_join_us_off.gif) top left no-repeat; width: 47px; height: 16px;}
#nav06 a:hover {background: url(images/nav_join_us_on.gif) top left no-repeat;}
#nav06on a {background: url(images/nav_join_us_on.gif) top left no-repeat; width: 47px; height: 16px;}


/*-- MAIN AREA --*/
.mainAreaContent {float: left; display: inline; width: 956px; background-color: #FFFFFF; margin: 0;}



/*-- FOOTER --*/
.footer {float: left; display: inline; width: 916px; margin: 15px 0 20px 20px;}
	.footer p {float: left; display: inline; font-size: 11px; color: #666666; margin: 0; line-height: 1.5em;}
	.footer h6 {float: right; display: inline; font-size: 11px; color: #666666; margin: 0; line-height: 1.5em;}
	
/*-- BANNERS AREA --*/
.mainAreaBanners {float: left; display: inline; width: 956px; background-color: #ecf2f4; margin: 0;}
	mainAreaBanners img {border: 0;}

.bannerLeft {float: left; display: inline; margin: 20px 20px 20px 20px;}
.bannerMiddle {float: left; display: inline; margin: 20px 0 20px 0;}
.bannerRight {float: right; display: inline; margin: 20px 20px 20px 0;}

/*-- HOME PAGE --*/
.homeIntro {float: left; display: inline; width: 448px; margin: 20px 0 20px 20px;}
	.homeIntro h1 {margin: 20px 0 -5px 0; padding: 0; text-indent: -9000px; font-size: 12px; line-height: 1em; background: url(images/home_strapline.gif) top left no-repeat; width: 389px; height: 30px;}
	.homeIntro p {font-size: 14px; color: #666666; line-height: 1.8em;}

.homeVideo {float: right; display: inline; width: 448px; margin: 20px 20px 20px 0;}

/*-- CONTENT PAGE --*/
.contentMainColumn {float: left; display: inline; width: 604px; margin: 20px 0 20px 20px; padding: 0 0 20px 0;}
	.contentMainColumn h1 {font-size: 26px; color: #82ae0a; line-height: 1.3em; margin: 20px 0 5px 0;}
	.contentMainColumn h2 {font-size: 18px; font-weight: bold; color: #82ae0a}
	.contentMainColumn h4 {font-size: 16px; font-weight: normal; color: #333333; line-height: 1.5em;}
	.contentMainColumn p {font-size: 14px; color: #666666; line-height: 1.5em;}
	.contentMainColumn ul {margin: 0; font-size: 14px; color: #666666; list-style: none;}
	.contentMainColumn li {position: relative; background-image: url(images/bullet.gif); background-position: 0 0.7em; background-repeat: no-repeat; padding: 4px 0 3px 14px; line-height: 1.5em;}
	
.contentRightColumn {float: right; display: inline; width: 292px; background-color: #ecf2f4; margin: 60px 20px 20px 0; padding: 0 0 10px 0;}
	.contentRightColumn h2 {font-size: 18px; color: #82ae0a; width: 252px; margin: 20px 0 5px 20px;}
	.contentRightColumn p {font-size: 12px; color: #666666; line-height: 1.5em; width: 252px; margin: 0.5em 0 0.5em 20px;}
	.contentRightColumn ul {margin: 0.5em 0 0.5em 20px; font-size: 12px; color: #666666; list-style: none; width: 252px;}
	.contentRightColumn li {position: relative; background-image: url(images/bullet_arrow.gif); background-position: 0 0.7em; background-repeat: no-repeat; padding: 4px 0 3px 14px; line-height: 1.5em;}
	
/*-- READ THIS PAGE --*/
.readThisMainColumn {float: left; display: inline; width: 430px; margin: 20px 0 20px 20px; padding: 0 0 20px 0; height:100%; overflow:auto;}
	.readThisMainColumn h1 {font-size: 26px; color: #82ae0a; line-height: 1.3em; margin: 20px 0 5px 0;}
	.readThisMainColumn h2 {font-size: 20px; font-weight: bold; color: #82ae0a}
	.readThisMainColumn h3 {font-size: 16px; font-weight: bold; color: #82ae0a}
	.readThisMainColumn h4 {font-size: 16px; font-weight: normal; color: #333333; line-height: 1.5em;}
	.readThisMainColumn p {font-size: 14px; color: #666666; line-height: 1.5em;}
	.readThisMainColumn ul {margin: 0; font-size: 14px; color: #666666; list-style: none;}
	.readThisMainColumn li {position: relative; background-image: url(images/bullet.gif); background-position: 0 0.7em; background-repeat: no-repeat; padding: 4px 0 3px 14px; line-height: 1.5em;}
	
.readThisRightColumn {float: right; display: inline; width: 405px; background-color: #ecf2f4; margin: 20px 20px 20px 0; padding: 0 10px 10px 0; height:100%; overflow:auto;}
	.readThisRightColumn h2 {font-size: 20px; color: #82ae0a; width: 252px; margin: 20px 0 5px 20px;}
	.readThisRightColumn p {font-size: 12px; color: #666666; line-height: 1.5em; width: 370px; margin: 0.5em 0 0.5em 20px;}
	.readThisRightColumn ul {margin: 0.5em 0 0.5em 20px; font-size: 12px; color: #666666; list-style: none; width: 252px;}
	.readThisRightColumn li {position: relative; background-image: url(images/bullet_arrow.gif); background-position: 0 0.7em; background-repeat: no-repeat; padding: 4px 0 3px 14px; line-height: 1.5em;}
	.readThisRightColumn a {margin: 0.5em 0 0.5em 20px;}
	
/*-- FORM PAGE --*/
.formMainColumn {float: left; display: inline; width: 604px; margin: 20px 0 20px 20px;}
	.formMainColumn h1 {font-size: 26px; color: #82ae0a; line-height: 1.3em; margin: 20px 0 5px 0;}
	.formMainColumn h2 {font-size: 18px; font-weight: bold; color: #82ae0a}
	.formMainColumn h4 {font-size: 16px; font-weight: normal; color: #333333; line-height: 1.5em;}
	.formMainColumn p {font-size: 14px; color: #666666; line-height: 1.5em;}
	.formMainColumn ul {margin: 0; font-size: 14px; color: #666666; list-style: none;}
	.formMainColumn li {position: relative; background-image: url(images/bullet.gif); background-position: 0 0.7em; background-repeat: no-repeat; padding: 4px 0 3px 14px; line-height: 1.5em;}
	.formMainColumn hr {width: 100%; height: 0; border-top: 1px solid #dacabe; border-bottom: 0; border-left: 0; border-right: 0;}
	.formMainColumn form {padding: 0; margin: 20px 0 0 0;}
	.formMainColumn label {font-size: 14px; font-weight: bold; color: #333333; width: 214px; display: inline; float: left; padding: 4px 0 0 0; margin: 0 20px 0 0;}
	.formMainColumn .plainLabel {font-size: 16px; color: #666666; line-height: 1.5em; font-weight: normal; width:auto; float: none; padding: 0px; margin: 0px;}
	.formMainColumn em {color: #CC0000; font-style: normal;}
	.formMainColumn fieldset {margin: 0 0 30px 0; padding: 0;}
	.formMainColumn legend {font-size: 16px; font-weight: bold; color: #82ae0a; line-height: 1.5em; margin: 0; padding: 0;}
	
	.formMainColumn .popup {display:none; border: solid 1px black; position: absolute; background-color: white; text-align:center; padding:5px;}
	.formMainColumn .securityCode { width: 450px; top:350px; left:300px;}
	.formMainColumn .popupBody {margin:10px;}
	
	.formMainColumn .detailsLinks {clear:both;}
	.formMainColumn .detailsLinks ul {list-style:none; }
	.formMainColumn .detailsLinks li { background-image:none; float:left; font-size: 16px; font-weight: bold; color:#82ae0a; line-height: 1.5em; margin: 0; padding: 10px;  }
	.formMainColumn .detailsLinks a { color:#82ae0a; }
	
	.orderDetailsTable { width:100%; margin-left: 20px;}
	.orderDetailsTable td, th {padding:2px 5px 2px 5px;}
	.orderDetailsTable th {font-weight:bold; text-align:left;}
	
	
.formTextWide {width: 342px; border: 1px solid #aaaaaa; background-color: #FFFFFF; font-size: 14px; padding: 4px;}
.formTextNarrow {width: 75px; border: 1px solid #aaaaaa; background-color: #FFFFFF; font-size: 14px; padding: 4px;}
.formSelectWide {width: 342px; background-color: #FFFFFF; font-size: 14px;}
.formSelectNarrow {width: 75px; background-color: #FFFFFF; font-size: 14px;}
.formRadio {width: 20px; float: left; display: inline;}

/*-- SHOP PAGES --*/
.shopLeftColumn {margin:20px 0 20px 20px;}
.shopRightColumn {margin: 20px 0 20px 20px;}
.shopMainColumn {float: left; display: inline; margin: 20px 0 20px 10px;}

.shop {display: inline;}
	.shop h1 {font-size: 26px; color: #82ae0a; line-height: 1.3em; margin: 20px 0 5px 0;}
	.shop h2 {font-size: 18px; font-weight: bold; color: #82ae0a}
	.shop h4 {font-size: 16px; font-weight: normal; color: #333333; line-height: 1.5em;}
	.shop p {font-size: 14px; color: #666666; line-height: 1.5em;}
	.shop hr {width: 100%; height: 0; border-top: 1px solid #dacabe; border-bottom: 0; border-left: 0; border-right: 0;}
	.shop form {padding: 0; margin: 20px 0 0 0;}
	.shop label {font-size: 14px; font-weight: bold; color: #333333; width: 214px; display: inline; float: left; padding: 4px 0 0 0; margin: 0 20px 0 0;}
	.shop .plainLabel {font-size: 16px; color: #666666; line-height: 1.5em; font-weight: normal; width:auto; float: none; padding: 0px; margin: 0px;}
	.shop em {color: #CC0000; font-style: normal;}
	.shop fieldset {margin: 0 0 30px 0; padding: 0;}
	.shop legend {font-size: 16px; font-weight: bold; color: #82ae0a; line-height: 1.5em; margin: 0; padding: 0;}
	.shop .basketCounterList {padding-top:10px; font-size:smaller;}
	
.shopTextWide {width: 342px; border: 1px solid #aaaaaa; background-color: #FFFFFF; font-size: 14px; padding: 4px;}
.shopTextNarrow {width: 75px; border: 1px solid #aaaaaa; background-color: #FFFFFF; font-size: 14px; padding: 4px;}
.shopSelectWide {width: 342px; background-color: #FFFFFF; font-size: 14px;}
.shopSelectNarrow {width: 75px; background-color: #FFFFFF; font-size: 14px;}
.shopRadio {width: 20px; float: left; display: inline;}

.shopCatalogue{ padding-left: 20px; padding-right: 20px; width:500px; overflow: auto;}
	.shopCatalogue a {text-decoration:none;}
	.shopCatalogue h3 {font-size: 16px; text-decoration:none; font-weight:bold; color: #82ae0a}
	.shopCatalogue .item {vertical-align:top; width:225px;}
	.shopCatalogue .price {font-size:15px;}
	.shopCatalogue .rrp {text-decoration:line-through; font-size:smaller;}
	.shopCatalogue p {margin:0;}	
	.shopCatalogue ul { list-style:none; display:inline; }
	.shopCatalogue li { margin:0 10px; display:inline-block; }	
	
.shopProduct { }
	.shopProduct .picture {float:left; padding: 10px 0 0 25px;}
	.shopProduct .info {float:right;}
	.shopProduct .info a {text-decoration:none;}
	.shopProduct .ratings {clear:both; vertical-align:middle; padding-left: 26px;}
	.shopProduct .relatedProducts { width:1000px; margin:auto; }
	
.createAccountPurchase {}
	.createAccountPurchase label {width:160px;}
	.createAccountPurchase .popup {display:none; border: solid 1px black; position: absolute; background-color: white; text-align:center; padding:5px;}
	.createAccountPurchase .securityCode { width: 450px; top:150px; left:40px;}
	.createAccountPurchase .popupBody {margin:10px;}
	
.basket {}
	.basket a {text-decoration:none;}
	.basket .basketItemsTable {width:100%;}	
	.basket .basketItemsTable td, th {padding:2px;}
	.basket .basketItemsTable th {font-weight:bold; text-align:left;}
	.basket .login {padding:0 0 0 15px; width:500px;}
	.basket .loginButton {text-align:right;}
	.basket .loginText {width:265px;}
	.basket .paymentControls {text-align:right; width:515px;}
	
/*-- FIND A MESSAGE --*/
.findMessageArea {float: left; display: inline; width: 604px; margin: 20px 0 20px 0; background-color: #ecf2f4; padding: 0 0 20px 5px;}
	.findMessageArea form {padding: 0; margin: 20px 0 0 20px;}
	.findMessageArea label {font-size: 14px; font-weight: bold; color: #333333; width: 116px; display: inline; float: left; padding: 4px 0 0 0; margin: 0 20px 0 0;}

.formTextFind {width: 412px; border: 1px solid #aaaaaa; background-color: #FFFFFF; font-size: 14px; padding: 4px;}
.formSelectFind {width: 420px; background-color: #FFFFFF; font-size: 14px;}
.formButtonFind {background-color: #82ae0a; border: 1px solid #82ae0a; color: #FFFFFF; font-size: 14px; font-weight: bold; margin: 10px 0 0 136px; padding: 4px;}
	

/*-- SEARCH RESULTS --*/
.resultsHead {float: left; display: inline; width: 604px; margin: 5px 0 20px 0;}
	.resultsHead h3 {font-size: 16px; font-weight: bold; color: #666666; margin: 0.1em 0 0.1em 0;}
	.resultsHead h5 {font-size: 14px; font-weight: normal; color: #333333; margin: 0.1em 0 0.1em 0;}

.resultListing {float: left; display: inline; width: 604px; margin: 0 0 20px 0; padding: 20px 0 0 0; border-top: 1px dashed #dde3e4;}
	.resultListing img {float: left; display: inline; width: 136px; margin: 0 20px 0 0; border: 0;}
	.resultListing p {float: left; display: inline; width: 428px; font-size: 14px; font-weight: bold;}

.resultsPaging {float: left; display: inline; width: 100%; border-top: 1px dashed #dde3e4; padding: 20px 0 10px 0; margin: 0;}
	.resultsPaging p {font-size: 14px; font-weight: bold; color: #666666;}
	
/* column container */
	.colmask {
		position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
	    float:left;
        width:100%;				/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* holy grail 3 column settings */
	.holygrail {
	    background:#CDEAFF;    	/* Right column background colour */
	}
    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-12em; 		/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
    }
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:24em;         		/* Left column width + right column width */
        background:#cfc;    	/* Left column background colour */
    }
    .holygrail .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:12em;        		/* Width of left column */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
	}
	.holygrail .col1 {
        margin:0 13em;     		/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:200%;
	    overflow:hidden;
	}
    .holygrail .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:11em;        		/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:1em;         		/* Width of the left-had side padding on the left column */
    }
    .holygrail .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:10em;        		/* Width of right column content (right column width minus left and right padding) */
        margin-right:3em;  		/* Width of right column right-hand padding + left column left and right padding */
        position:relative;
        left:50%;
    }