@import url(forms-global.css); /* Importing shared form rules*/ 

/* Component F.Y.STA.x:Standard form and internal form elements */
#content form.standard {
	margin-top:-9px; /* To fix varying spacing between pseudo-fieldset and form - watch for implications elsewhere... */
	margin-bottom:0;
}
#content form#log-in {
	margin-top:0;
}

/* The rounded fieldset container and legend */
#content form.standard fieldset {
	background:url(../images/design/bg-standard-form-top.png) no-repeat top left;
	border:1px solid #FFF; /* Firefox 2 won't apply margin-left to legend if border:none used!? */
}
#content form.standard div.wrapper {
	background:url(../images/design/bg-standard-form-end.png) no-repeat bottom left;
	margin-bottom:15px;
	overflow:hidden;
	padding:20px 10px;
	width:673px;
}
#content form.standard legend {
	background:#FFF;
	color:#C00;
	font-weight:normal; 
	font-size:1.2em; 
	font-family:"Trebuchet MS",Arial,sans-serif;
	margin-left:10px;
	padding:0 5px;
	text-transform:uppercase;
}
#content form.standard p.note {
	text-align:right;
	margin-bottom:-4px;
	padding-top:4px;
}
#content form.standard p.note span {color:#C00;}

/* Single column variation of form.standard */
.one-column #content form.standard fieldset {
	background:url(../images/design/bg-standard-form-top-lrg.png) no-repeat left top;
	border:1px solid #FFF;
}
.one-column #content form.standard div.wrapper {
	background:url(../images/design/bg-standard-form-end-lrg.png) no-repeat left bottom;
	position:relative;
	width:908px;
}
.one-column #content form.standard div label {width:200px;}
.one-column #content form.standard ul.checkboxes li label, .one-column #content form.standard ul.radiobuttons li label {width:600px;}

/* IE doesn't have a mechanism for identifying form elements by type so classes used where needed */
#content form.standard div input.text {width:250px;}
#content form.standard div input.small-text {width:30px;}

/* These deal with rows of checkboxes and radiobuttons even when there's just one */
#content ul.checkboxes,
#content ul.radiobuttons {margin:0;}
#content ul.checkboxes li,
#content ul.radiobuttons li {
	margin-bottom:5px;
	overflow:hidden;
	width:100%;
}
#content ul.checkboxes li label,
#content ul.radiobuttons li label {
	float:left;
	padding-top:0;
	text-align:left;
}
#content ul.checkboxes li input,
#content ul.radiobuttons li input {
	float:left;
	margin-right:4px;
}
#content form.standard span.hint {
	color:#455866;
	font-size:0.9em;
	margin-left:10px;
}
#content form.standard span.hint a {
	color:#0083B3;
	text-decoration:none;
}
#content form.standard span.hint a:hover,
#content form.standard span.hint a:active,
#content form.standard span.hint a:focus {
	background:#E6F5FA;
	text-decoration:underline;
}
#content form.standard ul.full-width {margin-left:0;}
#content form.standard ul.full-width li {margin-bottom:15px;}
.one-column #content form.standard ul.full-width label {
	display:block;
	float:left;
	width:900px;
}

/* This is for when there is no label on the left column of the form */
#content form.standard .no-label {
	clear:both;
	margin-left:259px;
}
#content form .no-label {
	clear:both;
	margin-left:220px;
	margin-bottom:0;
}
#content form div.login .no-label {
	clear:both;
	margin-left:252px;
	margin-bottom:0;
}
.one-column #content form.standard .no-label {
	clear:both;
	margin-left:219px;
}

/* Pseudo Fieldset:Used where designers made non-form elements look like fieldset design */
.pseudo-fieldset {
	background:url(../images/design/bg-standard-form-top.png) no-repeat top left;
	clear:both;
	margin:20px 0 30px 0;
	padding-top:5px;
	position:relative;
}
.pseudo-fieldset div.wrapper {
	background:url(../images/design/bg-standard-form-end.png) no-repeat bottom left;
	margin-bottom:15px;
	overflow:hidden;
	padding:20px 10px;
	width:100%;
}
#content .pseudo-fieldset h2 {
	background:#FFF;
	color:#C00;
	font-size:1.2em;
	margin:4px 5px;
	padding:0 5px;
	text-transform:uppercase;
	position:absolute;
	top:-13px;
}
.pseudo-fieldset p {margin-left:10px;}
.pseudo-fieldset strong {
	color:#333;
	font-weight:normal;
	margin-left:10px;
}
#content .pseudo-fieldset ul.buttons-h {
	margin:10px 0 0 10px;
	overflow:hidden;
}
.pseudo-fieldset ul.buttons-h li {
	float:left;
	margin-right:5px;
}
#content .pseudo-fieldset ul.buttons-h a:hover {
	background:none;
}

/* Single column variation of .pseudo-fieldset */
.one-column .pseudo-fieldset {
	background:url(../images/design/bg-standard-form-top-lrg.png) no-repeat left top;
}
.one-column .pseudo-fieldset div.wrapper {
	background:url(../images/design/bg-standard-form-end-lrg.png) no-repeat left bottom;
}

/* Component P.T.SUM.c:Summary form table */
/* 	
Generalised this to anything with class "user-details" and put into the form CSS file as its used mainly throughout 
shopping basket and account pages 
*/
table.user-details th {
	background:#FFF;
	color:#333;
	font-weight:normal;
	padding:2px 10px;
	vertical-align:top;
	
}
table.user-details td {
	border-bottom:none;
	font-weight:bold;
	line-height:1;
	padding:2px;
	vertical-align:top;
}

/* Pre-filled data field and its 'label' - bit odd this when its just one table row but it allows semantic association between its 'label' (TH) and 'field' (TD) */
table.pre-filled-data th {
	background:#FFF;
	color:#333;
	font-weight:normal;
	padding:0 20px 0 0;
	text-align:right;
	width:240px;
}
table.pre-filled-data td {
	border-bottom:none;
	font-weight:bold;
	padding:5px;
}

/* Component XXXXXXXX:Error Box */
#content .error-box {
	background:url(../images/design/bg-error-standard-end.png) bottom left no-repeat;
	margin-bottom:10px;
	padding-bottom:15px;
	height:1%;
}
#content .error-box div {
	background:url(../images/design/bg-error-standard.png) top left no-repeat;
}
#content .error-box p {
	color:#C00;
	font-weight:bold;
	margin:0;
	padding:8px 4px 5px 12px;
}
#content .error-box ul.standard {
	margin:0;
	padding:0 12px;
}
#content .error-box ul.standard li {
	background:url(../images/bullets/blt-yellow-bg.png) no-repeat top left;
}

/* One-column page variant */
.one-column #content .error-box {
	background:url(../images/design/bg-error.png) bottom left no-repeat;
	float:left;
	clear:both;
	width:100%;
	margin-bottom:10px;
	padding-bottom:10px;
}
.one-column #content .error-box div {
	background:url(../images/design/bg-error-top.png) top left no-repeat;
}

/* Inpage sorting form */
#sort {clear:left;}
#sort fieldset {border:none;}
#sort label {
	color:#333;
	float:left;
	font-size:0.9em;
	line-height:2;
	margin-right:5px;
}
#sort select {
	font-weight:normal; 
	font-size:0.9em; 
	font-family:Verdana,Helvetica,sans-serif;
	width:120px;
}

/* Forgotten Login form */
#content form#forgotten-login {
	clear:both;
}
#content form#forgotten-login span.hint {
	color:#455866;
	display:block;
	font-size:1.1em;
	margin-left:0;
	float:none;
}
#content form#forgotten-login #contact-me {float:left;}
#content form#forgotten-login fieldset h2 {
	font-weight:lighter;
	clear:both;
	color:#000;
	font-size:1.2em;
	margin:15px 0;
}
/* Remember me form */
#content form#remember-me div.wrapper {padding-left:20px;}
#content form#remember-me p {margin-bottom:0;}

/* Section-specific forms */
/* Careers section forms */
p#confirmation {
	background:url(../images/design/bg-confirmation.png) left top no-repeat;
	padding-top:5px;
}
p#confirmation strong {
	background:url(../images/design/bg-confirmation-end.png) left bottom no-repeat;
	color:#C00;
	display:block;
	font-weight:normal; 
	font-size:1.25em; 
	font-family:"Trebuchet MS",Arial,sans-serif;
	padding:3px 12px 8px;
}
form.no-legend p.note {padding-bottom:8px;}
form.no-legend fieldset {padding-top:5px;}
#content form.careers div.wrapper {padding:10px;}
#content form.careers div.textarea label {
	float:none;
	padding-bottom:3px;
	text-align:left;
	width:auto;
}
form.careers input.error-highlight {
	border:1px solid #C00;
	width:250px;
}
form.careers div.registered input {
	margin-right:4px;
	vertical-align:middle;
}
#content form.careers div.registered input.text {
	clear:none;
	width:100px;
}
form.careers div.textarea textarea {width:640px;}
#content form.careers div.textarea p {margin:5px 0 0;}
form.careers div.question label,
form.careers div.question input {
	display:inline;
	float:none;
	vertical-align:baseline;
	width:auto;
}
form.careers div.question label {vertical-align:top;}
form.careers ul.radio-buttons {
	float:left;
	margin-top:5px;
	width:400px;
}
form.careers ul.indented {
	margin-left:30px;
	margin-top:-15px;
}
form.careers ul.check-boxes li,
form.careers ul.radio-buttons li {
	clear:both;
	margin-bottom:4px;
}
#content form.careers ul.check-boxes label,
#content form.careers ul.check-boxes input,
#content form.careers ul.radio-buttons label,
#content form.careers ul.radio-buttons input {
	display:inline;
	float:none;
	vertical-align:text-top;
	width:auto;
}
form.careers ul.check-boxes label,
form.careers ul.radio-buttons label {min-height:10px;}
form.careers ul.bordered {
	border-bottom:4px solid #F1F4F5;
}

/* Component F.Y.SEL.x:Shopping basket form and table */
div#basket,
form#basket div.wrapper{
	background:url(../images/design/bg-basket-tbl-bottom.gif) no-repeat bottom left;
	margin-bottom:15px;
	padding-bottom:4px;
}
div#basket h2,
form#basket h2 {
	background:url(../images/design/bg-basket-tbl-top.gif) no-repeat top left;
	color:#333;
	font-size:1.1em;
	margin:0;
	padding:7px 13px;
	text-transform:uppercase;
}
div#basket table,
form#basket table {
	margin:0 3px;
	width:924px;
}
div#basket table td,
form#basket table td {padding:5px 10px;}
div#basket tr.head td,
form#basket tr.head td {
	background:#F7F9F8;
	border-bottom:1px solid #CDD8DE;
	color:#C00;
	font-weight:normal; 
	font-size:1.1em; 
	font-family:"Trebuchet MS",Arial,sans-serif;
	padding:5px 10px;
}
div#basket table tr.subhead th,
form#basket table tr.subhead th {
	background:#FFF;
	border-bottom:1px solid #CDD8DE;
	color:#333;
	font-weight:bold; 
	font-family:Verdana,Arial,sans-serif;
	padding:5px 8px;
}
div#basket table tr.subtitle td,
form#basket table tr.subtitle td {
	background:#F7F9F9;
	color:#C00;
	font-size:1.1em;
	padding:5px 8px;
	text-transform:uppercase;
}
div#basket th.qty,
div#basket th.check,
form#basket th.qty,
form#basket th.check {
	padding:5px;
	text-align:center;
	width:5%;
}
div#basket th.price,
div#basket th.total,
div#basket td.price,
div#basket td.total,
form#basket th.price,
form#basket th.total,
form#basket td.price,
form#basket td.total {text-align:right;}
div#basket td.total,
form#basket td.total {font-weight:bold;}
div#basket tr.subsummary th.price,
form#basket tr.subsummary th.price {
	background:transparent;
	border-bottom:1px solid #CDD8DE;
	color:#333;
	font-weight:bold; 
	font-family:Verdana,Arial,sans-serif;
}
div#basket th.desc,
form#basket th.desc {
	width:65%;
	text-align:left;
}
div#basket td.desc a,
form#basket td.desc a {
	font-weight:normal; 
	font-size:1.25em; 
	font-family:"Trebuchet MS",Arial,sans-serif;
	text-decoration:none;
}
div#basket td.qty,
form#basket td.qty {font-weight:bold;}
div#basket td.qty input,
form#basket td.qty input {width:15px;}
div#basket th.desc-confirm,
form#basket th.desc-confirm {width:45%;}
div#basket tr.sub th,
form#basket tr.sub th {
	background:transparent;
	color:#333;
	font-weight:bold; 
	font-family:Verdana,Arial,sans-serif;
}
div#basket tr.sub td,
form#basket tr.sub td {
	border-bottom:none;
	font-weight:bold;
	padding-left:8px;
}
div#basket tr.subcheckout td,
form#basket tr.subcheckout td {
	border-bottom:none;
	padding-top:10px;
	padding-bottom:10px;
}
div#basket td p,
form#basket td p {font-size:1em;}
div#basket td ul.plain li,
form#basket td ul.plain li {font-size:1em;}
div#basket td a,
form#basket td a {
	color:#0083B3;
	text-decoration:none;
}
div#basket td a:hover,
div#basket td a:active,
div#basket td a:focus,
form#basket td a:hover,
form#basket td a:active,
form#basket td a:focus {
	background:#E6F5FA;
	text-decoration:underline;
}
#content .below-form {
	margin:0;
	clear:both;
	float:left;
	position:relative;
	top:-26px;
	width:100%;
}

#content form.sign-up label span.smaller {font-size:0.9em;}
#content form.sign-up .login h2 {
	margin:40px 0 16px 0;
	color:#000;
	font-size:1.2em;
}
#content form.sign-up .login h2.auth {
	margin:0 0 16px 0;
	color:#000;
	font-size:1.2em;
}
#content form.sign-up .login #remember-me {
	display:block;
	float:left;
}
#content h2.reinstate {
	color:#455866;
	padding-bottom:14px;
}
#content form.third-party div label {
	font-weight:normal;
	margin-right:10px;
	width:305px;
}
#content .third-party label.hidden {visibility:hidden;}
#content .third-party label span.mandatory {margin-right:-10px;}
#content .sign-up div input.card,
#content .third-party div input.card {
	width:51px;
}
#content .third-party div input.card {margin-right:5px;}

#content .sign-up ul#opt-outs,
#content .third-party ul#opt-outs {margin-top:10px;}
#content .sign-up ul#opt-outs li,
#content .third-party ul#opt-outs li {
	clear:both;
	overflow:hidden;
	margin-bottom:10px;
}
#content .sign-up ul#opt-outs li input,
#content .third-party ul#opt-outs li input {
	float:left;
	margin-right:5px;
}
#content .sign-up ul#opt-outs li label,
#content .third-party ul#opt-outs li label {
	color:#333;
	display:block;
	float:left;
	width:900px;
}
#content .third-party ul#opt-outs li label {
	text-align:left;
	width:610px;
}
#content .move-up {margin-top:-30px;}

/* E-commerce pages in third party forms */
#content .third-party table {
	color:#333;
	margin:0 12px 20px;
}
#content .third-party table th {
	font-weight:normal;
	padding:4px 0;
	width:200px;
}
#content .third-party table td {
	font-weight:bold;
	padding:4px 0;
}
#content .third-party table th.table-heading {
	background:none;
	color:#C00;
	font-weight:normal; 
	font-size:1.2em; 
	font-family:"Trebuchet MS",Arial,sans-serif;
	margin:10px 0;
	padding:8px 0;
}
#content .third-party #cards {
	border-bottom:3px solid #F1F4F5;
	border-top:3px solid #F1F4F5;
	margin:0 12px;
	padding:12px 0;
}
#content .third-party #cards p {
	float:left;
	margin:7px 0 0 0;
	width:250px;
}
#content .third-party #cards ul {margin-bottom:0;}
#content .third-party ul#opt-outs {margin:12px;}
#content .third-party ul#opt-outs li label {padding-top:0;}

/* search results */
#content .search-top {
	background:url(../images/design/bg-search-results-top.png) no-repeat top left;
}
#content .search-end {
	background:url(../images/design/bg-search-results-end.png) no-repeat top left;
}
#content ol#search-results li {
	border-bottom:1px solid #D4DEE3;
	margin-bottom:10px;
	padding-bottom:15px;
}
#content ol#search-results li.last {
	border-bottom:none;
	padding-bottom:0;
}
#content ol#search-results p {margin-bottom:0;}
#content ol#search-results p.date {
	color:#455866;
	position:absolute;
	right:0;
	top:3px;
}
#content ol#search-results h2 {margin-bottom:0;}
#content ol#search-results a {
	color:#0083B3;
	font-weight:normal; 
	font-family:Verdana,Helvetica,sans-serif;
}