/*
	Edited 16 Oct 2007 Jeremy Taylor
	
	2007 TobyBrancher.net @ www.aislondon.com
	- Apologies for the style based references (.single/.multi)
	- Could do with some tidying in regards to forms as built with missing designs and mixed layouts for form controls
	
	:: 20/05/2008 Document is inline with GRG's current version, check SVN for changes (mainly replaced form# with div# under form sections)
*/

* {padding: 0; margin: 0; border: none 0px #fff;}

body {
	font:					normal 1em Arial, Helvetica, sans-serif;
	background:				#fff;
	color:					#666;
	text-align:				center; /* centres page 01/02 */
	padding:				20px 0 0;}
	
#page {
overflow:hidden;
	width:					952px;
	padding:				0 4px;
	margin:					0 auto; /* centres page 02/02 */
	text-align:				left;
	background:				#0d1e49 url(../img/site/bg-repeat.gif) repeat-y;}

/* Standards */

a {color: #000;}
p {
	font: 					normal 0.75em Arial, Helvetica, sans-serif;
	margin:					0 0 18px;}
h1 {
	font:					normal 1.8em Arial, Helvetica, sans-serif;
	margin:					0 0 12px;}
h2 {
	font:					normal 1.2em Arial, Helvetica, sans-serif;
	margin:					0 0 12px;}
h2 a {text-decoration: none;}
h3 {
	font:					normal 1.1em Arial, Helvetica, sans-serif;
	color:					#0e5e9f;
	margin:					0 0 4px;}
h4 {
	font:					bold 0.9em Arial, Helvetica, sans-serif;
	margin:					0 0 4px;}
ol {
	padding:				0 0 8px 20px;}
ol li {
	font:					normal 0.7em Arial, Helvetica, sans-serif;
	margin:					0 0 10px 0;}
.hr {
	overflow:				hidden;
	height:					1px;
	margin:					0 0 19px;
	border:					solid 1px #719cc0;
	border-width:			0 0 1px 0;} 
.access {visibility: hidden;}
.advice {color: #FF0000; font: normal 0.75em arial; cursor: pointer;}
form p {margin: 0 0 6px;}

/* 
	Header 
*/

#page #header {
	background:				url(../img/site/bg-head.gif) no-repeat top;}
#page #header .logos {
	overflow:				hidden; /* IE6 */
	height:					51px;
	padding:				20px 18px 0;
	background:				#0E0226 url(../img/site/head_bg-logos.jpg) no-repeat;}
	
#o2_logo {float: left; margin: 5px 0px 0px 0px;}
#your_o2_numbers {float: left;  margin: 13px 0px 0px 46px;}
#pay_and_go {float: left;  margin: 15px 0px 0px 547px;}
	
/* 
	Primary Navigation 
*/

#page ul#primary_navigation {
	overflow:				hidden;
	display:				block;
	list-style:				none;
	background:				#0D2D60  url(../img/site/primary_navigation/li.gif) repeat-x;
	border:					solid 1px #719cc0;
	border-width:			0 0 1px;}
#page ul#primary_navigation li {
	display:				block;
	float:					left;
	height:					1.35em;
	padding:				2px 15px;
	background:				#0D2D60 url(../img/site/primary_navigation/li.gif) repeat-x;
	border:					solid 1px #719cc0;
	border-width:			0 0 0 1px;}
#page ul#primary_navigation li a {
	color:					#fff;
	font-size:				0.9em;
	text-decoration:		none;
}
	
/* ^^ variants */ 

#page ul#primary_navigation li.first {
	border-width:			0;}
#page ul#primary_navigation li.selected {
	background:				#F1F3F6 url(../img/site/primary_navigation/li-selected.gif) repeat-x;}
#page ul#primary_navigation li.selected a {
	color:					#000033;}
#page ul#primary_navigation li#logout {
	float:					right;
	border:					none;}
/* 
	Body layout 
*/

#page #body {
	position:				relative;
	overflow:				hidden;
	background:				url(../img/site/bg-repeat.jpg) repeat-y}
#page #body #flash_bg {
	position: 				absolute;
	z-index:				1;}
#page #body #content {
	display:				block;
	position:				relative;
	z-index:				2;
	overflow:				hidden;	
	width:					887px; /* IE6 */
	min-height:				390px;
	padding:				180px 0 18px 66px;}
#page #body #content #main {
	position:				relative; /* IE6 */
	float:					left;}
#page #body #content #adverts {
	position:				relative; /* IE6 */
	float:					left;
	width:					121px;
	margin:					0 0 0 48px;}
#page #body #content #adverts img {margin: 0 0 20px;}
	
/* Content Layout */

#page #body #content #main .head {
	width:					668px;
	height:					2px;
	background:				url(../img/site/content_bg-top.png) no-repeat;}
#page #body #content #main .body {
	overflow:				hidden;	/* IE6 but ok */
	width:					608px;
	padding:				30px 30px 18px 30px;
	color:					#000;
	background:				#fff;}
#page #body #content #main .foot {
	width:					668px;
	height:					54px;}
	
/* Footer */

#footer {
	width:					961px;
	height:					6px;
	margin:					0 auto;
	background:				url(../img/site/bg-foot.gif) no-repeat;}

	
/*
	Home
*/

#page #body .row {
	overflow:				hidden;
	margin:					0 0 12px;}
#page #body .bottom {
	margin:					0 0 18px 0;}
#page #body .row .column {
	float:					left;
	width:					280px;
	margin:					0 15px 0 0; /*margin set to px not em to fix layout bug :: JT 24/10/07 :: */
	border:					solid 1px #719cc0;
	border-width:			0 0 1px;}
#page #body .bottom .column {
	border:					none 0px #fff;}
#page #body .row .column p {
	width: 					260px;
	min-height:				76px;} /*min-height added to fix bug in FF 1 :: JT 24/10/07 :: */

#page #body .bottom .column p{
	margin:					0;
	height:					auto;}


/* 
	Forms  
*/

#page form {
	overflow:				hidden;}
form p {
	margin:					0 0 18px }
form fieldset {
	overflow:				hidden;
	padding:				0px 5px 6px;
	border:					solid 1px #719cc0;
	border-width:			1px 0;}
form fieldset label {
	font:					normal 0.8em Arial, Helvetica, sans-serif;}
form fieldset label input.txt {
	padding:				2px;
	border:					solid 1px #000;
	border-width:			1px;}
form fieldset.multi .radio_buttons {
	margin:					12px 0pt 17px;}
form fieldset.multi .radio_buttons .radio {
	float:					left;
	margin:					2px 5px 0;}
form fieldset.multi .radio_buttons label {
	float:					left;
	margin:					0;
	width:					30px;
	cursor:					pointer;}
	
/* Single */

form fieldset.single {
	margin:					0 0 18px;
	background:				url(../img/site/forms/single_bg.png) no-repeat;}
form fieldset.single label {
	display:				block;
	overflow:				hidden;
	float:					left;
	width:					525px;
	margin:					9px 0 0px 0;
	text-align:				left;}
form fieldset.single label span {
	display:				block;
	float:					left;
	width:					110px;
	margin:					3px 0 0;
	cursor:					pointer;}
form fieldset.single label .txt {
	float:					left;
	margin:					0 0 0 20px;}
form fieldset.single .submit {
	display:				block;
	float:					right;
	margin:					8px 0 0px;}
form fieldset.single .advice {
	width:					auto;
	padding:				0 0 2px;
	margin:					10px 0 0 130px;}
form fieldset.single p {
	float:					left;}
form fieldset.single a {
	float:					left;}
	
/* Multi */

form fieldset.multi {
	overflow:				hidden;
	padding:				8px 5px 7px;
	border-width:			1px 0 0;}
form fieldset.multi label {
	display:				block;
	overflow:				hidden;
	float:					left;
	width:					390px;
	margin:					2px 0 10px 0;
	text-align:				left;}
form fieldset.multi label span {
	display:				block;
	float:					left;
	margin:					3px 0 0;
	cursor:					pointer;}
form fieldset.multi label .txt {
	float:					right;
	width:					190px;
	margin:					0 0 0 20px;}
form fieldset.multi .submit {
	float:					right;
	margin:					0;}
form fieldset.multi .advice {
	width:					380px;
	padding:				0 0 6px;
	margin:					0 0 0 194px;}
	
/* ^^ varients */

form fieldset.details {
	background:				url(../img/site/forms/multi_bg-details.png) no-repeat bottom;}
form fieldset.set_me_up .submit {
	float:					left;}
form fieldset.set_me_up span {
	float:					left;
	font:					normal 1em Arial, Helvetica, sans-serif;
	text-decoration:		underline;
	margin:					10px 0 0px 8px;
	cursor:					pointer;}
form fieldset.single #number {
	margin:					3px 0 0 20px;}
form fieldset.single#auth_code label {
	width:					521px;}	
form fieldset.multi span.tooltip {
	float:					left;
	width:					auto;
	margin:					2px 0 0 10px;
	cursor:					pointer;
	text-decoration:		underline;}
	

/* Opt in */

form fieldset.opt_in {}
form fieldset.opt_in p {
	font:					normal 1em Arial, Helvetica, sans-serif;}
form fieldset.opt_in label {
	overflow: 				hidden;
	width:					578px;}
form fieldset.opt_in label .check {
	float: 					left;
	margin:					3px 10px 0 0;
	border:					none 0px #fff;}
form fieldset.opt_in label span {
	float: 					left;
	width:					auto;
	font:					normal 0.8em Arial, Helvetica, sans-serif;
	padding:				0 5px 0 2px;
	margin: 				0;}
	
/* Numbers */

form fieldset.numbers {}
form fieldset.numbers label {
	margin:					0 0px 5px 10px;
	width:					230px;}
form fieldset.numbers label span {
	padding:				0;
	margin: 				3px 0 0 0;}
form fieldset.numbers label .txt {
	position:				relative;
	float:					right;
	width:					130px;
	margin:					0;}
form fieldset.numbers label.name {
	margin:					0 0 5px 30px;
	width:					270px;}
form fieldset.numbers label.name.first {
	margin:					0 0 5px 10px;}
form fieldset.numbers label.name .txt {
	width:					180px;}
form fieldset.numbers .advice {
	margin:					0px 0px 2px 103px; /* IE6.css */
	float:					left;
	width:					250px;}
form fieldset.numbers .advice.for_name {
	margin:					0 0 2px 0px;
	width:					225px;}
	

/* Boxed */

.boxed {
	padding:				9px 9px 0 9px;
	margin:					0 0 18px 0;
	border:					solid 1px #cfd5de;
	background:				#efeff2;
	overflow:				hidden;}
form br, #confirmed_numbers br { clear: both; } /* patches IE6/7's handling of fieldsets */

/* Current Networks */

#current_networks {
	margin:					8px 0 0;}
#current_networks ul {
	margin:					0 0 0 20px;
	list-style:				disc;}
#current_networks ul li {
	margin:					2px 0;}
#current_networks ul li a {
	text-decoration:		none;}
#current_networks .navigation {
	margin:					10px 0 18px;}
#current_networks .navigation a {
	font:					normal 0.8em Arial, Helvetica, sans-serif;
	text-decoration:		none;}
#current_networks .navigation .first {
	padding:					0 4px 0 0;}
#current_networks .navigation .last {
	padding:					0 0 0 4px;}
#current_networks .navigation .current {
	text-decoration:		underline;}
	
/* Confirmed Numbers */ 

#confirmed_numbers {
	overflow:				hidden;
	padding:				10px 0 4px 9px;
	background:				url(../img/site/forms/multi_bg-confirm_numbers.png) no-repeat bottom;}
#confirmed_numbers table {
	float:					left;
	border-collapse:		collapse;
	font:					normal 0.75em Arial, Helvetica, sans-serif;
	width:					295px;}
#confirmed_numbers table tr td.entry_number {
	text-align:				right;
	padding:				0 6px 0 0;
	width:					19px;}
#confirmed_numbers table tr td.tel_number {
	width:					120px;}
#confirmed_numbers table tr td.full_name {
	width:					160px;}
#confirmed_numbers .edit {
	float:					right;
	margin:					14px 6px 0 0;}
	
/* Network visibility */

form fieldset#terms label {
	width:					auto;}

form fieldset#terms label .check {
	float: 					left;
	margin:					3px 10px 0 10px;
	border:					none 0px #fff;
	line-height:			20px;}
form fieldset#terms label span {
	width:					auto;
	/*font:					normal 0.85em Arial, Helvetica, sans-serif;*/
	padding:				0 5px 0 2px;
	margin: 				0;
	line-height:			16px;}
	
/* 
	Update page - your_details 
*/

.tabs {
	position:				relative;
	overflow:				hidden;
	z-index:				5;
	top:					1px;
	min-height:				35px;}
.tabs a {
	display:				block;
	position:				relative;
	float:					left;
	top:					2px;
	font:					normal 0.85em Arial, Helvetica, sans-serif;
	padding:				7px 11px 6px;
	margin:					2px 5px 0 0;
	border:					solid 1px #cdd4dd;
	background:				#efeff2 url(../img/site/forms/tab_bg.gif) repeat-x;}
.tabs a.selected {
	top:					1px;
	padding-bottom:			9px;
	border-width:			1px 1px 0;
	background-image:		none;}
	
/* Forms */ 
 
div#your_details, 
div#network_details {
	display:				block;
	border:					solid 1px #cdd4dd;
	background:				#efeff2;
	padding:				13px 9px 11px;
	margin:					0 0 18px 0;}
div#your_details fieldset.details, 
div#network_details fieldset.details {
	margin:					9px 0 0;}
div#your_details fieldset.details label, 
div#network_details fieldset.details label {
	width:					390px;
	margin:					2px 0 10px 10px;}
div#your_details fieldset.details .submit, 
div#network_details fieldset.details .submit {
	margin:					0;}
div#your_details fieldset#news_update label, 
div#network_details fieldset#news_update label{
	width:					auto;}
div#your_details fieldset#news_update label span, 

network_details fieldset#news_update label span {
	margin:					1px 10px 0 0;}
div#your_details fieldset p.updated,
div#network_details fieldset.details p.updated {
	float:					left;
	width:					auto;
	color: 					#003399;
	margin:					4px 0 0 10px;}
div#your_details fieldset#news_update p.updated {
	margin:					4px 0 0 0px;}
 
div#network_details fieldset.details p {
	float:					left;
	width:					190px;
	margin:					0 0 15px 10px;} 
div#network_details fieldset.details p span.tooltip {
	float:					none;
	font-size:				1.2em;
	margin:					0 0 2px 5px;}
div#network_details fieldset.multi div.radio_buttons {
	float:					left;
	width:					370px;} 
div#network_details fieldset.multi .radio_buttons label {
	width:					70px;
	margin:					0px 0px 10px 2px;}
div#network_details fieldset.multi #presence {
	margin: 				0px 0 0 10px;}
div#network_details fieldset.multi .view {
	float:					right;}
div#network_details fieldset.multi .radio_buttons {
	margin:					0;}
 
div#your_details fieldset#opt_out, div#your_details fieldset#auto_update,
div#network_details fieldset#opt_out, div#network_details fieldset#auto_update {
	min-height:				2.25em;
	padding:				0 5px 2px;
	margin:					0; } 
div#your_details fieldset#opt_out p, div#your_details fieldset#auto_update p,
div#network_details fieldset#opt_out p, div#network_details fieldset#auto_update p {
	margin:					13px 0 0 0;
	padding:				0;}
div#your_details fieldset#opt_out a, div#your_details fieldset#auto_update a,
div#network_details fieldset#opt_out a, div#network_details fieldset#auto_update a {
	float:					right;
	margin:					6px 0 2px;
	padding:				0;}
div#your_details fieldset#auto_update,
div#network_details fieldset#auto_update {
	padding:				0 5px 3px;
	margin:					0;}
	
.notice {margin: 5px 0;}
 
/* FAQs */

#page #content .question {
	background:				#efeef3;
	border:					solid 1px #c9d6df;}
#page #content .answer {
	margin:					0 0 4px;}
#page #content .question, #page #content .answer {
	padding:				9px;}
#page #content .question h2, #page #content .answer h2 {
	margin:					0 0 2px;}
#page #content .question p, #page #content .answer p {
	margin:					0;}

/* Print */

div.single#print {
	overflow:				hidden;
	margin:					0 0 20px;
	padding:				6px 5px;
	border:					solid 1px #719cc0;
	border-width:			1px 0;}
div.single#print img {
	float: 					right;
	margin:					1px 0 0;}
div.single#print a {
	float: 					right;
	margin:					1px 3px 0 5px;
	font:					normal 0.8em arial;
	text-decoration:		none;}
/* Client changes and miscellaneous modifications */
 
form fieldset.multi .advice.reset {
	margin:					0 0 0 3px;}
 
 
 form fieldset.multi#news_update label  {
	width:					420px;
	margin:					2px 0 20px;}
 form fieldset.multi#news_update label span {
	padding:				0 6px 0 0;}	


form p.reminder_single {
	margin:					6px 0 9px;}
	
form p.reminder {
	margin:					12px 0 9px;}