/* ---------------------------------------
	layout styles
--------------------------------------- */

	html
	{
		background-color: #DADADA;
	}

	body
	{
		padding-bottom: 27px;
	}
	
	body.popup
	{
		padding: 18px;
		background-color: #FFF;
	}

	#header,
	#main,
	#footer,
	#start-bar,
	#adverts
	{
		clear: both;
		width: 960px;
		margin: 0 auto;
		overflow: hidden;
	}

	#content
	{
		padding-left: 169px;
		margin: 0 !important;
		float: right;
	}

	#header
	{
		height: 108px;
		margin-bottom: 10px;
	}
	
	#main
	{
		background: #FFF url(/media/images/backgrounds/content.gif) repeat-y;
	}
	
	div#trade-process
	{
		background: #FFF url(/media/images/backgrounds/content-trade.gif) repeat-y !important;
	}


/*
	clearfix
	----------------------------------- */

	#content:after,
	span.datalist:after,
	div#trade-process:after
	{
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}


/*
	fake buttons
	----------------------------------- */

	a.button,
	a.button:hover
	{
		display: block;

		width: 120px;
		height: 25px;
		
		line-height: 24px;
		text-align: center;
		text-decoration: none;

		color: #FFF !important;
		font-size: 0.9em;
		
		cursor: pointer;
	}


/*
	type styles
	----------------------------------- */

	h1, h2, h3, h4
	{
		font-weight: normal;
		color: #000;
	}

	h1 a,
	h2 a,
	h3 a,
	h4 a
	{
		text-decoration: none;
	}
	
	ul#navigation a
	{
		color: #000;
	}


/*
	sIFR styles
	----------------------------------- */
	
	.sIFR-flash
	{
		visibility: visible !important;
		margin: 0;
		padding: 0;
	}

	.sIFR-unloading .sIFR-flash
	{
		visibility: hidden !important;
	}

	.sIFR-replaced, .sIFR-ignore
	{
		visibility: visible !important;
	}

	.sIFR-alternate
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		display: block;
		overflow: hidden;
	}

	.sIFR-replaced div.sIFR-fixfocus
	{
		margin: 0; 
		padding: 0; 
		overflow: auto; 
		letter-spacing: 0px; 
		float: none;
	}

	.sIFR-dummy
	{ 
		width: 0;
		height: 0;
		margin-left: 42px;
		z-index: 0;
	}
	
	.sIFR-active h1,
	.sIFR-active h2,
	.sIFR-active h3,
	.sIFR-active h4
	{
		line-height: 1.2em;
	}

	.sIFR-active h1	{ font-size: 20px; }
	.sIFR-active h2	{ font-size: 15px; }
	.sIFR-active h3	{ font-size: 13px; }
	.sIFR-active h4	{ font-size: 13px; }


/*
	company name strip
	----------------------------------- */

	#name
	{
		display: block;
		line-height: 30px;
		text-decoration: none;
		
		width: 610px;
		height: 31px;

		position: absolute;
		z-index: 2;
		top: 78px;
		
		margin-left: 335px;
		padding-right: 15px;
		
		clear: both;
		
		text-align: right;
		color: #FFF;
	}
	
	#name,
	#name strong
	{
		color: #FFF;
	}


/*
	themeable divider
	----------------------------------- */

	#divider
	{
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;

		width: 100%;
		height: 118px;
		
		background-position: 0 -419px;
	}


/*
	top links
	----------------------------------- */
	
	#top-links
	{
		width: 960px;
	
		position: absolute;
		z-index: 2;
		
		top: 3px;
		
		list-style-type: none;
		text-align: right;
	}
	
	#top-links li
	{
		display: inline !important;
		padding: 0 10px;
	}
	
	#top-links a
	{
		color: #000;
		text-decoration: none;
	}
	
	#top-links li
	{
		border-right: 1px solid #000;
	}

	#top-links li.last
	{
		border-right-width: 0;
	}

	#top-links a:hover
	{
		text-decoration: underline;
	}


/*
	how it works steps
	----------------------------------- */

	#steps,
	#steps li
	{
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	#steps li
	{
		border-top: 1px solid #DADADA;
	}

	#steps li span
	{
		position: absolute;
		display: block;
		width: 50px;
		height: 50px;
		margin-left: -62px;
	}

	#steps li h2 span
	{
		position: relative;
		width: auto;
		height: auto;
		margin-left: 0;
		display: none;
	}

	li.step1,
	li.step2,
	li.step3,
	li.step4,
	li.step5,
	li.step6,
	li.step7,
	li.step8,
	li.step9
	{
		display: block;
		width: 320px;

		padding: 5px 15px 0 62px !important;
		margin: 10px 0 0 !important;
	}

	li.step1 span,
	li.step2 span,
	li.step3 span,
	li.step4 span,
	li.step5 span,
	li.step6 span,
	li.step7 span,
	li.step8 span,
	li.step9 span
	{
		background-repeat: no-repeat;
	}

	li.step1 span	{ background-position: 0 -221px; }
	li.step2 span	{ background-position: -51px -221px; }
	li.step3 span	{ background-position: -153px -221px; }
	li.step4 span	{ background-position: -204px -221px; }
	li.step5 span	{ background-position: -255px -221px; }
	li.step6 span	{ background-position: -306px -221px; }
	li.step7 span	{ background-position: -357px -221px; }
	li.step8 span	{ background-position: -408px -221px; }


/*
	left panels
	----------------------------------- */

	div.SearchForm,
	div.SearchResults,
	div.Details,
	div.TradeCart,
	div.ChoosePayment div.leftpanel,
	div.EnterDetails div.leftpanel,
	div.NoResults,
	div.ConfirmTrade,
	div.TradeComplete,
	div.Recycle,
	div.donate_DonateAllForm .leftpanel,
	div.AccountLogin .leftpanel,
	div.Authenticated .leftpanel,
	div.SuggestPhoneSent
	{
		width: 526px;
		margin-right: 27px;
		
		padding: 18px 0 27px 27px;
		
		float: left;
		overflow: hidden;
	}
	
	div.TradeCart	/* fudge the container to appear as full width/height */
	{
		width: 737px !important;
		min-height: 539px;

		margin-right: 0;
		padding-right: 27px;
		
		background-color: #FFF;		/* hide the background images underneath */
	}
	
	div.leftpanel label,			/* left panel labels need to be right-aligned */
	div.contact-form label,
	div.ConfirmTrade label
	{
		text-align: right;
	}
	
	div.leftpanel h3,			/* left panel legends and H3 tags need underlining */
	div.leftpanel legend
	{
		border-bottom: 1px solid #CCC;
		color: #0C154C;
		
		font-weight: bold;
		width: 526px;
	}
	
	#trade-process div.leftpanel table h3
	{
		width: auto;
		margin-top: 9px;
		
		border-bottom: none;
	}
	
	#trade-process div.leftpanel h3
	{
		margin: 18px 0 5px;
	}
	
	div.SearchForm ul		{ list-style: disc; }	
	div.SearchForm ul li		{ margin-bottom: 9px; }


/*
	right panels
	----------------------------------- */
	
	#more-info-bar,
	div.MiniTradeCart,
	div.Additional,
	div.ChoosePayment div.rightpanel,
	div.EnterDetails div.rightpanel,
	div.AccountLogin .rightpanel,
	div.Authenticated .rightpanel,
	div.donate_DonateAllForm .rightpanel
	{
		float: left;
		width: 157px;

		padding: 18px 27px;
		overflow: hidden;
	}

	div.useraccount input
	{
		width: 145px;
	}


/*
	search bar
	----------------------------------- */
	
	#start-bar
	{
		width: 764px;
		height: 103px;

		padding: 30px 0 0 196px;

		background-color: #ECF1F6;
		background-repeat: no-repeat;
		color: #FFF;
	}
	
	#start-bar div,
	#start-bar span
	{
		display: block;
		height: auto;
	}
	
	#start-bar #intro
	{
		width: 250px;
		text-decoration: none;
		color: #000;
	}

	#start-bar #intro span
	{
		display: inline;
	}

	#start-bar #intro:hover
	{
		cursor: pointer;
	}

	#start-bar #intro:hover span
	{
		color: #5EA3E9;
	}
	
	#start-bar #intro,
	#start-bar div.SearchBox
	{
		float: left;
	}
	
	#start-bar fieldset.customform
	{
		margin-top: -15px;
	}
	
	#start-bar span.one,
	#start-bar span.two
	{
		padding: 5px 0 5px 40px !important
	}
	
	#start-bar span.three
	{
		padding-top: 0 !important;
		margin-top: -5px;
	}
	
	#start-bar span.one
	{
		background-position: 0 -538px;
	}
	
	#start-bar span.two
	{
		background-position: -301px -538px;
	}
	
	#start-bar #intro span.placeholder
	{
		background-position: -209px -195px;
		margin-left: -20px;
		position: absolute;
		display: block;
		width: 12px;
		height: 17px;
	}

	#start-bar #intro p
	{
		padding-left: 20px;
	}
	
	#start-bar label
	{
		width: 40px !important;
		color: #000;
	}
	
	#start-bar input
	{
		width: 100px !important;
	}

	#start-bar select
	{
		width: 110px !important;
	}
	
	div.SearchBox input.button
	{
		margin: 10px 0 0 73px;
	}


/*
	search form
	----------------------------------- */
	
	div.SearchForm fieldset.customform
	{
		display: none;
	}


/*
	my account navigation
	----------------------------------- */

	ul.myaccountnavigation li.optionon
	{
		border: none;
		height: 27px;
		line-height: 25px;
	}

	ul.myaccountnavigation a:hover
	{
		background-color: #79D4FF;
	}


/*
	custom buttons
	----------------------------------- */
	
	a.button,
	a.button:hover,
	input.button,
	input.buttondisabled
	{
		display: block;
		
		background-color: transparent;
		background-position: -147px -16px;

		width: 120px;
		height: 25px;
	}

	input.buttondisabled
	{
		background-position: -147px -40px;
	}

	input.choosepaymentadd
	{
		width: 120px !important;
	}

	.detailstable .detailsbuttonsback input.button,
	.support-select input.button,
	.tradeslist input.button,
	.TradeReminderForm input.button
	{
		background-position: 0 -16px;
		width: 59px !important;
	}
	
	.paymentoption input.button,
	.rightpanel input.button,
	input.tradevalue
	{
		background-position: -58px -16px !important;
		width: 90px !important;
	}
	
	input.cartcontinue,
	input.userprofilesubmit,
	input.choosepaymentcontinue,
	.detailstable .detailsbuttonstrade input.button,
	#start-bar div.SearchBox input.button
	{
		background-position: -58px -88px;
		width: 90px !important;
	}

	input.cartempty
	{
		background-position: -147px -64px;
		width: 120px !important;
		color: #434343;
	}
	
	.AccountHome input.button,
	.Recommend_RecommendFriendTerms input.button
	{
		background-position: -594px -16px;
		width: 209px !important;
	}

	input.cartaddanotherphone,
	.tradeconfirmation input.button,
	.tradeagain input.button,
	.Recommend_RecommendFriendPersonaliseForm input.button,
	.Recommend_RecommendFriendForm input.button
	{
		background-position: -266px -16px !important;
		width: 150px !important;
	}

	input.cartupdate
	{
		background-position: -266px -64px;
		width: 150px !important;
		color: #434343;
	}
	
	.completetrade input.button,
	.completetrade input.buttondisabled
	{
		background-position: 0 -113px !important;
		width: 208px !important;
		height: 53px !important;
		
		text-indent: -10000px;
		margin: 4px 0 20px 0 !important;
		
		display: inline;
	}

	.completetrade input.buttondisabled
	{
		background-position: 0 -167px !important;
	}

	.support-select select,
	.support-select input.button
	{
		clear: none !important;
		margin: 0 !important;
		padding: 0 !important;
		float: left !important;
	}

	.support-select select
	{
		width: 200px;
	}

	.support-select input.button
	{
		margin: -2px 0 20px 10px !important;
	}
	

/*
	footer
	----------------------------------- */

	#footer
	{
		height: 30px;
		line-height: 28px;
	
		clear: left;
		text-align: center;

		background-position: 0 -620px;
		border: 1px solid #999;
		border-width: 1px 0;
	}
	
	#footer a
	{
		padding-right: 20px;
		text-decoration: none;
		color: #434343;
	}
		
	#footer a:hover
	{
		text-decoration: underline;
	}


/*
	phone search results
	----------------------------------- */

	span.datalist span
	{
		margin-right: 4px;
	}


/*
	splits the page up into sections
	----------------------------------- */

	div.section,
	div.panel
	{
		float: left;
		padding: 27px;
	}

	div.section
	{
		width: 426px;
	}
	
	div.panel
	{
		width: 257px;
	}
	
	div.panel div.image
	{
		margin: -17px -29px -17px -17px;
	}
	
	div.panel div.tight
	{
		margin: -28px -30px -18px -27px;
	}
	
	div.section ul
	{
		list-style: disc;
	}


/*
	custom side-panel images
	----------------------------------- */

	div.image
	{
		width: 300px;
		height: 270px; 
	}

	.london-city,
	.contact-us,
	.copyright,
	.how-it-works,
	.privacy-policy,
	.recycling-policy,
	.faqs,
	.terms
	{
		background-repeat: no-repeat;
	}

	.london-city
	{
		background-position: 0 -134px;
		width: 311px !important;
		height: 252px !important;
	}

	.contact-us
	{
		background-position: 0 -658px;
	}

	.copyright
	{
		background-position: 0 -1742px;
	}

	.how-it-works
	{
		background-position: 0 -929px;
	}

	.privacy-policy
	{
		background-position: 0 -1200px;
	}

	.recycling-policy
	{
		background-position: 0 -2013px;
	}

	.faqs
	{
		background-position: 0 -387px;
	}

	.terms
	{
		background-position: 0 -1471px;
	}


/*
	phone flash
	----------------------------------- */

	#featured-phones
	{
		width: 790px;
		height: 249px;
	
		padding-left: 1px;
        	border-bottom: 1px solid #FFF;

		clear: both;
	}


/*
	navigation styles
	----------------------------------- */
	
	ul#navigation,
	ul#navigation ul,
	ul#navigation li,
	ul#navigation a
	{
		display: block;
	
		width: 169px;
		margin: 0;
	
		list-style-type: none;
	}
	
	ul#navigation li
	{
		margin-bottom: 1px;
	}
	
	ul#navigation
	{
		position: absolute;
        	z-index: 2;
		top: 106px;
	}

	ul#navigation a
	{
		width: 135px;	
		height: 27px;

		line-height: 27px;
		padding: 0 10px 0 24px;
		
		text-decoration: none;
		font-size: 0.9em;

		background-color: #1E4C80;
		background-position: -209px -113px;
	}
	
	ul#navigation a:hover,
	ul#navigation a.active
	{
		background-position: -209px -140px;
	}

	ul#navigation a.attention
	{
		background-position: -209px -167px;
		color: #000;
	}


/*
	trade progress bar
	----------------------------------- */

	div.TradeProgressBar,
	div.TradeProgressBar ul
	{
		width: 791px !important;
	}
	
	div.TradeProgressBar ul
	{
		width: 663px !important;
		border-right: 128px solid #FFF;
	}

	div.TradeProgressBar ul,
	div.TradeProgressBar li
	{
		height: 73px;
		display: block;
		
		margin: 0 !important;
	}

	.TradeProgressBar li.select					{ width: 137px !important; background-position: 0 -272px !important; }
	.TradeProgressBar li.details					{ width: 128px !important; background-position: -137px -272px !important; }
	.TradeProgressBar li.tradecart					{ width: 130px !important; background-position: -265px -272px !important; }
	.TradeProgressBar li.enterdetails				{ width: 139px !important; background-position: -395px -272px !important; }
	.TradeProgressBar li.confirm					{ width: 130px !important; background-position: -534px -272px !important; }
	.TradeProgressBar li.complete					{ width: 127px !important; background-position: -664px -272px !important; }

	.TradeProgressBar li.select.active				{ background-position: 0 -345px !important; }
	.TradeProgressBar li.details.active				{ background-position: -137px -345px !important; }
	.TradeProgressBar li.tradecart.active				{ background-position: -265px -345px !important; }
	.TradeProgressBar li.enterdetails.active			{ background-position: -395px -345px !important; }
	.TradeProgressBar li.confirm.active				{ background-position: -533px -345px !important; }
	.TradeProgressBar li.complete.active				{ background-position: -664px -345px !important; }