/* 
	Document:				styles.css
	Creation date:			19 November 2007
	Created by:				Gemma Leigh
	This version:			*** Commented for development ***
	Deployment version:		Sitename/css/styles.css
	Notes:					The overall page layout.
	-----------------------------------------------------------------
	Contents of this file:
	-----------------------------------------------------------------
	
	Typography
	 - Links
	 - Headings
	Generic classes
	
	Basic Layout
	- Header
	- Containers
	
	Navigation 
	- Top nav
	- Sub nav
	- Side nav
	- Styles for side nav pages
	
	Sitemap
	Footer
	
	Generic boxes, containers
	Dividers
	Forms
	Buttons
	
	Ajax popups
	Error messages
	
*/

/* =Typography
-----------------------------------------------------------------------------*/

/* FONT SIZE REFERENCE
40px 2.857em
32px 2.214em
21px 1.500em
20px 1.429em
18px 1.286em
16px 1.143em
14px 1em
12px 0.857em
--> TODO: check this!! 11px 0.688em
11px 0.786em
*/

body 				{ 
	font-family: Georgia, Arial, Helvetica, sans-serif; 
	color: #FFF; 
	background: #000;
/*	-moz-opacity:.999;*/ /* Fix FF OSX jQuery flicker*/ 
	} 
#wrapper			{ font-size: 0.875em; /* 14px at default font size */  line-height: 1.429;	/* 20px at default font size 20/14 */}

#header,
#footer,
.navigation			{ font-size:0.786em; /* 11px */ letter-spacing: 1.2px; text-transform: uppercase; color: #999;}

p 					{ font-size: 1em; line-height: 1.429; padding-bottom: 12px; color: #999;}
p.intro				{ padding-bottom: 16px;}

/* =Links
-----------------------------------------------------------------------------*/
a					{ color: #999; text-transform: uppercase; text-decoration: none; outline: none;}
a:hover				{ color: #FFF; border-bottom:solid 2px #fff !important; }

a.active,
li.active a			{ color: #FFF; border-bottom:solid 2px #5C5C5C; }

#main-content a		{ font-size:0.786em; /* 11px */ letter-spacing: 1.2px; border-bottom: solid 2px #000; }
.archive a          { color:#797979; }
.archive a:hover    { color:#FFFFFF; }

/* =Headings
-----------------------------------------------------------------------------*/

h1, h2, h3, h4, h5	{ font-weight: normal !important; color: #FFF; text-transform:uppercase; }

h1 { font-size: 1.000em; line-height: 1;} 							/* USED TO WRAP HEADER GRAPHICS */
h2 { font-size: 1.500em; line-height: 1.5;}							/* 21px caps */
h3 { font-size: 1.000em; line-height: 1.429; text-transform: none;}	/* 14px normal*/ 
h4 { font-size: 0.786em; letter-spacing: 1.2px;}  					/* 11px caps white*/
h5 { font-size: 1.000em; line-height: 1.429;}						/* 14px caps*/

/* Spacing under headings */

/* For pages where there is 30px spacing at the top of the page 
   -- Use primary classes for the first header on the page */
h3.primary			{ color: #999;}
/*h4.primary			{ padding: 2px 0 13px 0;}*/
h4.primary			{ padding: 4px 0 13px 0; line-height: 1.429em; position: relative; top: -2px;}

/* -- Use secondary classes for headers following a primary header */
h3.secondary		{ padding-top: 17px; padding-bottom: 25px;}
h3.secondary-60		{ padding-bottom: 40px; color: #999;}

/* -- Use underline classes for headers with white underline */
.underline			{ border-bottom: 2px solid #FFF; padding: 0 0 12px 0; margin: 0; color: #FFF !important;}

h2.underline		{ padding: 0 0 11px 0;}
h3.underline		{ padding: 10px 0 12px 0;}
h3.underline-tight	{ padding: 3px 0 15px 0;}
h4.underline		{ padding: 2px 0 16px 0;}

/* -- Use tight classes to move up headers to the top of their line boxes */
h4.tight 			{ margin-top: -3px; padding-bottom: 2px;}

/* Reset heading defaults */
.text-white-large	{ font-size: 1.714em; /*font-size: 24px;*/ color: #FFF; }
.text-white-med	 	{ font-size: 1.286em; /*font-size: 18px;*/ color: #FFF; }
/* Increase spacing either side of larger text*/
h3 .text-white-large{ padding: 0 1px 0 2px; }

/* Keep links within headers the same size */
h4 a				{ font-size: 1em !important;}

/* =Generic classes
-----------------------------------------------------------------------------*/
/* Reset other classes where appropriate */
.upper		{ text-transform: uppercase!important;}
.normal 	{ text-transform: none;}

.white-text	{ color: #FFF !important;}
.grey-text 	{ color: #999 !important;}

.no-border	{ border: none !important;}
.reset-mp	{ margin: 0!important; padding: 0!important;}

/* Spacing above/below some layout elements */
.pt20		{ padding-top: 20px;}
.pb20		{ padding-bottom: 20px;}
.mb20		{ margin-bottom: 20px !important;}
.mtb10		{ margin-top: 10px; margin-bottom: 10px;}

.wrapper-20			{ padding: 0 20px 0 20px;}
.wrapper-right-20	{ padding: 0 20px 0 0;}

span.first-letters	{ float:left; margin:-1px 5px 0 0; text-transform:uppercase; color:#FFF; font-size:2.857em; line-height:40px; }

/* =Basic Layout
-----------------------------------------------------------------------------*/
body			{ text-align: center;}
#wrapper		{ width: 960px; padding: 60px 20px 0 20px; margin: 0px auto; text-align: left; overflow: hidden;}
* html #wrapper	{ overflow: visible; }

/* =Header
-----------------------------------------------------------------------------*/
#header 	{ width: 960px; float: left; margin-top: -55px; padding: 20px 0 5px 0; /*background: url(../images/header-divider.gif) 100% 100% repeat-x;*/ position: relative; }
#header #primary-nav
{
overflow:hidden;
padding:26px 0pt 0pt 30px;
width:45% !important;
}

#logo 		{ width: 166px; height: 48px; float: left; background: url(../images/logo-main.gif); margin-bottom: 15px; }
#logo img	{ position: absolute; top: -5000px; width: 166px; height: 48px;}
#logo a {float:left; width: 166px; height: 48px;}

#account	{ float: right; text-align: right; padding-top: 2px;}
#account p 	{ padding-bottom: 16px; line-height: 0.857em; white-space:nowrap;}
#account p.marketting   { max-width:500px; color:#fff; line-height:12px !important; padding-bottom:5px; }
a.chevron
{
    background:url(../images/link-chevron-right.gif) 0 3px no-repeat;
    padding-left:10px;
}

/* =Search
-----------------------------------------------------------------------------*/
#search 			{ width: 960px; float: left; background:#0d0d0d url(../images/header-divider.gif) 100% 100% repeat-x; padding: 20px 0 30px 0;}
#search  a			{ font-size: 0.857em;}

.search-title		{ width: 920px; float: left; padding:4px 20px 0 20px;}
.search-title a		{ display: block; padding-top: 2px; font-size: 0.786em !important; letter-spacing: 1.2px;}
.search-title span	{ color: #999; padding-top: 8px;}
.search-title h2	{ float: left; margin-right: 35px;}

.search-col			{ width: 320px; float: left; margin-top: 10px;}
.search-row			{ width: 280px; float: left; padding: 0px 19px 0px 20px; border-right: 1px solid #333; clear: both;}
.row-top			{ padding-bottom: 20px;}

.search-row label	{ width: 120px; float: left;}
.search-row select	{ width: 160px; float: left;}

.end-col .search-row{ border: none;}

/* =Navigation
-----------------------------------------------------------------------------*/
#header ul,
#footer ul 				{ width: 960px; float: left;}
#footer ul 				{ width: 100%; }

#header ul li,
#footer ul li			{ float: left; background: url(../images/header-bullet.gif) 100% 36% no-repeat;}

#header ul li,
#footer ul li			{ padding: 0 30px 15px 0;}

#header ul li.last,
#footer ul li.last		{ padding-right: 0; background: none;}

#header li a			{ white-space: nowrap;}

/* =Main navigation
-----------------------------------------------------------------------------*/
#primary-nav	{ margin: 0; padding: 2px 0 2px 0;}
#secondary-nav	{ margin: 0; padding: 2px 0 2px 0;}
#tertiary-nav	{ margin: 0; padding: 2px 0 2px 0;}
#sub-nav		{ margin: 0; padding: 2px 0 2px 0;}

#tertiary-nav li.active a				{ display: block; font-size: 1.909em; letter-spacing: 2px; position: relative; top: -10px; margin-bottom: -20px;}

/* 2 level Primary / Secondary */
.two-level #secondary-nav				{ padding: 6px 0 2px 0;}

/* 2 level Primary / Tertiary */
.two-level #tertiary-nav 				{ padding-top: 6px;}
.two-level #tertiary-nav li 			{ background: url(../images/header-bullet.gif) 100% 45% no-repeat; }

/* 2 level Primary / Tertiary (on service pages 30/20)*/
.two-level-service #tertiary-nav		{ padding: 13px 0 0 0; margin-bottom: -2px;}

/* 3 level LARGE mid */
#header .account 						{ padding-top: 8px; padding-bottom: 13px;}
/* 3 level LARGE bottom*/
.three-level #secondary-nav 			{ padding: 5px 0 8px 0;}
.three-level #secondary-nav li 			{ background: url(../images/header-bullet.gif) 100% 38% no-repeat; }
.three-level #tertiary-nav				{ padding: 0 0 2px 0;}
.three-level #tertiary-nav li.active	{ background: url(../images/header-bullet.gif) 100% 45% no-repeat; }
.three-level #tertiary-nav li.last		{ background: none; }

/* =Checkout navigation
-----------------------------------------------------------------------------*/
#header #help-wrapper					{ width: 960px; float: left; clear:both;}
#header #checkout-wrapper				{ width: 620px; float: left; }
#header #checkout-wrapper ul  			{ width: 620px; clear: left;}

#header #checkout-wrapper #tertiary-nav	{ padding-top: 4px; clear: right;}
#header #checkout-wrapper #sub-nav		{ padding-top: 10px; padding-bottom: 2px; clear: left;}

/* 2 level CHECKOUT with help */
#header #sub-nav-help  					{ text-align: right; width:320px; float:right; padding-top: 17px;}
#header #sub-nav-help p 				{ padding-bottom:8px; text-transform: none;}
#header #sub-nav-help a 				{ text-transform: uppercase; color: #FFF;}

/* =Footer
-----------------------------------------------------------------------------*/
#footer-wrapper			{ position:relative; width: 960px; float: left; clear: both;  padding: 55px 0px 30px 0px; margin-top: 60px;}
/*#footer-wrapper a.twitter{ font-weight:bold; font-size:12px; position:absolute; right:190px; top:28px; }*/
#footer 				{ width: 100%; float: left; background: url(../images/header-divider.gif) top left repeat-x; margin-top: -55px;}

#footer-content 		{ width: 760px; clear: both; float: left; padding-top: 27px;}
#footer-content ul		{ padding: 0 0 8px 0; margin: 0;}

#footer-content p 		{ padding: 4px 0 15px 0; }
#footer #copyright		{ margin: 0; padding: 0 0 11px 0;}
#footer #copyright li	{ background: none;}

#footer #footer-lang	{ width:160px; float: right; text-align: right; padding-top: 27px;}
#footer #footer-lang ul { width:160px; text-transform: none;}
#footer #footer-lang li { padding: 8px 0 0 0; background: none; float: right; clear: both;}

.service-master #footer li.aboutlink  { display:none; }

/* =Generic boxes, layouts, containers
-----------------------------------------------------------------------------*/
#main-content				{ width: 960px; float: left;}

.divider,
.full-width,
.full-width-60-20,
.two-col-layout,
.three-col-layout,
.four-col-layout 			{ width: 960px; float: left; clear: both;}

/* Spacing under layouts */
.three-col-layout			{ padding-bottom: 0px;}
.full-width-60-20 			{ padding-top: 50px; padding-bottom: 20px;}

/* Four column layout */
.four-col-layout .four-col	{width: 240px; float: left;}
.four-col-layout .four-col h2,
.four-col-layout .four-col p{padding-right: 20px;}

/* Three colum layout*/
.three-col-layout .first-col,
.three-col-layout .second-col,
.three-col-layout .third-col { width: 320px; float: left; }

/* Two column layout */
.two-col-layout .first-col	{ width: 460px; float: left; }
.two-col-layout .second-col { width: 460px; float: left; padding-left: 20px; border-left: 1px solid #272727; position: relative; z-index: 1;}
.two-col-layout fieldset	{float:none; clear: both;}
/* Cover the border in the middle */
.two-col-layout .hide-border{ position: absolute; left: -2px; top: 0; color: #000; z-index: 3; height: 101px; width: 2px; background: #000 url(..images/black1x1.gif) top left no-repeat;}

/* Two column layout (no border) */
.two-col-layout .main-col-460	{ width: 460px; float: left; }
.two-col-layout .main-col		{ width: 480px; float: left; }
.two-col-layout .side-col 		{ width: 460px; float: left; padding-left: 20px;}

/* One column intro layout */
.one-col-intro				{ width: 600px; float: left; clear: both;}

/* =Dividers
-----------------------------------------------------------------------------*/
.divider	{ clear: both; border-bottom: 1px solid #272727;}


/* =Form styles
-----------------------------------------------------------------------------*/
form * 			{ font-family: Georgia, Arial, Helvetica, sans-serif !important;} 

form select,
form input,
form textarea	{ color: #FFF; border: 1px solid #333; background: #141414;  font-size: 0.857em; }

form input		{ width: 280px; float: left; padding: 3px 0 3px 3px; margin: 0;}
form select		{ width: 158px; min-height: 20px; padding: 1px 1px 1px 0px; margin: 0; text-transform: none !important; }

input.radio, 
input.checkbox	{ width: auto; padding: 0; margin: 0; border: none; background: #FFF; /*color: #000; background: #FFF;*/}

textarea		{ width: 272px; height: 142px; padding: 3px; overflow: hidden;}

/* =Form styles
-----------------------------------------------------------------------------*/
.form-row								{ width: 440px; float: left;}
/* Form label/input wrappers */
.form-row .label-container	 			{ width:160px; float: left; padding-bottom: 21px; }
.form-row .input-container	 			{ width:280px; float: left; padding-bottom:19px; }
/* Increase padding under dropdown rows */
.row-select .input-container			{ padding-bottom: 21px;}
.label-container p,
.input-container p 						{ padding: 0; color: #FFF;}
.form-row p.under-input					{ position: relative; top: 5px; color: #999 !important; clear: both;}
/* Text inputs  -3px padding - 2px border */
.width-input-160 						{ width:155px; }
.width-input-280 						{ width:275px; }
.width-input-320 						{ width:315px; }
/* Select widths - 2px border */
.width-select-address					{ width: 342px;}
.required 								{ width: 100%; float: right; text-align: right; padding-top: 16px; padding-bottom: 15px;}

/* Checkbox with text to right */
.checkbox-container						{ clear: both; float: left; width: 100%; position: relative; margin-top: 10px; padding-bottom: 10px; }
.checkbox-container input.checkbox 		{ position: absolute; top: 3px; left: 3px;}
.checkbox-container label 				{ float: left; width: auto; margin-left: 30px; display: inline;}
.checkbox-container p 					{ clear: both;}

.checkbox-container	textarea			{ clear: both;}
/*for additional form styles, see am-op.css or sp.css*/

/* =Buttons
-----------------------------------------------------------------------------*/
/* Proxy is a replaced input*/
input.proxy { 
	font-size:0.788em; 
	letter-spacing: 1.2px;
	min-width:160px;
	text-transform: uppercase;
	text-align: left; 
	padding: 2px 6px 2px 16px;
}
/* Homepage 'GO' submit */
input.proxy-simple	{ width: auto; text-transform: uppercase; padding: 1px 5px 1px 5px; float: left;}

/* Input styles */
input.submit-dgrey,
input.back			{ color: #999;}

/* Button styles */
p.proxy				{ padding-bottom: 0;}

p.proxy a,
a.button-link,
a.details-link 		{ min-width: 136px !important; display: block; padding: 1px 6px 1px 16px !important; line-height: 16px !important; white-space: nowrap; }

p.back a,
p.submit-dgrey a,
a.button-link,
a.details-link		{ border: 1px solid #333; color: #999; background: #141414;}

/* Back button (left arrow) */
p.back a:link,
p.back a:visited,
input.back 							{ background:#141414 url(../images/arrow-grey-left.gif) 0% 50% no-repeat;}

p.back a:hover						{ background-color: #FFF; background-position: -285px 50%; color: #000!important; border: 1px solid #FFF; }

/* Submit button (right arrow) light grey - does not change colour/position!! */
a.submit-lgrey,
p.submit-lgrey a,
input.submit-lgrey					{ border: 1px solid #999;  color: #000;  background:#999 url(../images/arrow-black-right.gif) 0% 50% no-repeat; }
#snippet .submit-lgrey a			{ color:  #000;}

a.submit-lgrey:hover,
p.submit-lgrey a:hover				{ background-color: #FFF; color: #000; border: 1px solid #FFF; }

/* Submit button (right arrow) dark grey */
a.submit-dgrey,
p.submit-dgrey a,
input.submit-dgrey					{ background:#141414 url(../images/arrow-grey-right.gif) 0% 50% no-repeat; }

a.submit-dgrey:hover,
p.submit-dgrey a:hover				{ background-color: #FFF; background-position: -285px 50%; color: #000; border: 1px solid #FFF; }

/* View details link (arrow on right) */
.look-to-buy a.details-link:link	{ color: #999;}
.look-to-buy a.details-link:hover	{ border:1px solid #FFF; }

a.details-link:link,
a.details-link:visited				{ color: #999; background:#141414 url(../images/arrow-grey-details.gif) 100% 50% no-repeat; padding: 1px 6px 1px 6px !important;}
a.details-link:hover				{ background-color: #FFF; background-position: 142px 50%; color: #000!important; }

/* =Ajax popups
-----------------------------------------------------------------------------*/
#snippet-bg			{ position: absolute; z-index:1000; top: 0px; left: 0px; background:black; filter:alpha(opacity=80); moz-opacity:.80; opacity:.80;}

/*Reset styles as snippet is not within #main-content*/
#snippet			{ font-size: 0.875em; line-height: 1.429; }
#snippet a			{ font-size:0.786em; letter-spacing:1.2px;}

#snippet 			{ z-index:1100; text-align: left;}
#snippet			{ position:absolute; width:960px; /*background:#000;*/ }

#snippet a			{ display: block; text-align: right; font-size:0.786em; letter-spacing:1.2px; /*color:#FFF;*/ padding: 0 0 16px 0;}
#snippet-content	{ width: 960px; float: left; border-bottom: 2px solid #FFF; border-top: 2px solid #FFF; background: #000;}

/* Send to friend */
#snippet-content .send-to-friend { overflow: hidden; padding: 20px 0 20px 0;}

/* Hide select in IE6, see ie.css for hack */
#mcqbox-hideselect	{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%;}

/* =Error messages
-----------------------------------------------------------------------------*/
.error-alert		{ border-top: 2px solid #e60000; border-bottom: 2px solid #e60000; margin: 6px 20px 24px 0; padding: 8px 0 7px 0;}
.error-alert h3		{ background: url(../images/error-alert.gif) 0% 50% no-repeat; padding: 0 0 0 24px!important; margin: 0px!important;}
.error-alert ul		{ margin-left: 25px; margin-top: 4px;}
.error-alert li		{ background: url(../images/bullet4x4.gif) 0% 50% no-repeat; padding-left: 12px; color: #FFF!important;}
.error 				{ background: url(../images/error-alert.gif) 0% 50% no-repeat; padding-left: 25px;}

#flashcontent .error-alert		{ margin: 40px 0 60px 0; border-top: none; border-bottom: none;}
#flashcontent .error-alert h3	{ font-size: 1em; margin: 0; color: #E60000; }
#flashcontent a					{ font-size: 1em; text-transform: none; letter-spacing: inherit;}

/* =Dispatch page styles
-----------------------------------------------------------------------------*/
.dispatch #header		{ background: none;}
.dispatch #header img	{ padding-top: 194px; padding-bottom: 40px;}

.sitedown #header img	{ padding-top: 194px; padding-bottom: 20px;}
.sitedown h2			{ clear: both; padding-top: 39px; padding-bottom: 8px;}

.error-404 h2			{ padding-top: 94px; padding-bottom: 8px;}
.error-404 h4			{ padding-bottom: 3px;}
.error-404 p 			{ padding-bottom: 195px;}
.error-404 p span		{ padding-left: 10px;}