/* Import standard style sheets used across all Enable sites */
/* uncomment thirds-grid.css or quarters-grid.css as appropriate */

@import "../base-css/reset.css";
@import "../base-css/standard-styles.css";
@import "../base-css/quarters-grid.css";
/* @import "../base-css/thirds-grid.css"; */


body {
	background-color: #fff;
	color: #333;
}


.a11y { text-indent: -3000em; height: 1px; display: block; position: absolute; width: 200px ;}

.hide {
	visibility:hidden;
}

div.clear {
	clear: both;
}
a:link {
	color: #00AA9D;
}
a:visited {
	color: #49176D;
}

a:active,
a:hover {
	color: #00AA9D;
}

.uppercase {
	text-transform: uppercase;
}

p.attention {
	padding-left: 42px;
	background-image: url(../images/attention.gif);
	background-repeat: no-repeat;
	background-position: 0 3px;
	color: red;
}

p.attention2 {
	padding-left: 42px;
	margin-bottom: 0;
}

a.driver-link,
a.driver-link:link,
a.driver-link:visited,
a.driver-link:active,
a.driver-link:hover { /* with arrow on right-hans side */
	font-weight: bold;
	color: #00AA9D;
}

a.driver-link span {
	background-image: url(../images/blue-arrow.gif);
	background-repeat: no-repeat;
	background-position: 100% 58%;
	padding-right: 17px;
}

a.emphasise {
	font-size: 175%; /* 21px */
	line-height: 1.714em; /* 36 */
}

#outer-wrapper {
	background-color: #fff;
	background-image: url(../images/bg-top.jpg);
	background-repeat: repeat-x;
	background-position: 0 0;
}

body.printer-friendly #outer-wrapper {
	background-image: none;
}

#wrapper {
	position: relative;
}

/* @group Header */

#header {
	height: 118px;
	height: 9.84em; /* 118 % 12 = 9.84 */
	padding-top: 3px;
	margin-left: 9px;
	width: 776px; /* +9 = 785 */
}

body.printer-friendly #header {
	margin-left: 0;
	padding-top: 0;
}

#logo {
	position: absolute;
	top: 36px;
	left: 0px;
}

body.printer-friendly #logo {
	top: 10px;
}

#external-links {
	margin: 0;
	padding: 4px 0 0 0;
	line-height: 1em; /* stops border being too tall  - compensation by top padding*/
	color: #fff;
	float: left;
}

#header a:link,
#header a:visited,
#header a:active,
#header a:hover {
	color: #fff;
}

#header p {
	margin: 27px 9px 0 0;
	padding: 2px 0;
	float: right;
	font-weight: bold;
	color: #333;
	line-height: 1em; /* stops border being too tall, compensated by margin and padding */
	text-align: right;

}

#header p span.contact {
	display:block;
	padding-top: 3px;
}


/* @end */

/* @group Headings */

#header h1 {
	position: absolute;
	left: 184px;
	top: 63px;
}

body.printer-friendly #header h1 {
	top: 40px ;
}


body.printer-friendly h2 {
	font-weight: normal;
	line-height: 1.2em;
	margin-bottom: 18px;
	width: 640px;
}

body.printer-friendly h2 span.ref {
	font-weight: bold;
	display: block;
}

h2, h3, h4, h5, h6 {
	clear: both;
}


/* @end */

/* @group Footer */

#footer {
	position: relative;
	border-top: 1px solid #ccc;
	height: 4em;
}

#footer ul {
	clear: both;
	position: relative;
	margin: 0 0 9px 0;
	padding: 0;
	list-style: none;
	line-height:1em; /* stops border being too tall   - compenmsation by positioning on second list */
}

#footer li {
	float: left;
	color: #333;
	padding: 0 9px 0 8px;
	border-left: 1px solid #333;
	
}

#footer li.first {
	padding-left: 0;
	border: 0;
}

#footer p.first {
    clear:both;
    padding:10px 0;
    text-align:center;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
}

#footer a:link,
#footer a:visited,
#footer a:active,
#footer a:hover {
	color: #000;
}


#logo-footer {
	position: absolute;
	top: 9px;
	right: 0;
}

/* @end */

/* @group Main Content Area */

#content-inner {
	padding: 0 10px 0 15px;
}

body.printer-friendly #content-inner {
	padding-left: 24px;
	position: relative;
}

#content-inner2 {
	background: url(../images/fade.jpg);
	background-repeat: repeat-x;
	padding: 0 9px;
	height: 1%;
}

/* @group Tiling background */

body #content {
	background: url(../images/bg-main-tile.jpg);
	background-position: 0px 0px;
	background-repeat: repeat-y;
	height: 1%;
}

body.printer-friendly #content {
	background-image: none;
}


/* @end */

#print-page-wrapper{
	margin-top: -10em;
	position: absolute;
	right: 11px;
	font-weight: bold;
	text-transform: uppercase;
}

body.online #print-page-wrapper{
	margin-top: -12.5em !important;
}

#print-page-wrapper2 {
	font-weight: bold;
	text-transform: uppercase;
}


.print-page {
	background: url(../images/print-icon.gif);
	background-position: 0% 50%;
	background-repeat: no-repeat;
	padding: 4px 8px 4px 34px;
	display: block;
	font-weight: bold;
	color: #00AA9D !important;
}

#print-page-wrapper2 .print-page {
	height: 1%;
}

/* @group Box top background */

body #content-1 {
	background: url(../images/bg-main.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	height: 1%;
	padding-top: 9px;
}

/* @end */

/* @group Box base background */

body #content-base {
	background: url(../images/bg-main-base.jpg);
	background-position: 0 100%;
	background-repeat: no-repeat;
	height: 8px;
	margin-bottom: 18px;
}


/* @end */

/* @end */

/* @group Page Head inside main content area */

#progress {
	position: relative;
	padding-bottom: 4px;
	border-bottom: 2px solid #ccc;
	margin-bottom: 6px;
}

#progress ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

#progress ol li {
	display: block;
	margin: 0; 
	padding: 0;
	float: left;
	position: relative;
	width: 144px;
	height: 40px; 
	line-height: 1.1em;
	font-size: 0.8em;
}

#progress ol li span {
	width: 144px;
	height: 40px; 
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-color: transparent;
	/*background-image: url(../images/progress-off.gif);*/
}

/*
Commented out following email from Enable - 17/03/2009
#progress ol li.mi0 {
	left: 0;
}

#progress ol li.mi1 {
	left: 144px;
}

#progress ol li.mi2 {
	left: 288px;
}

#progress ol li.mi3 {
	left: 432px;
}

#progress ol li.mi4 {
	left: 576px;
}

#progress ol li.mi5 {
	left: 720px;
}
End of commented out following email from Enable - 17/03/2009
*/

#progress ol li.mi1,
#progress ol li.mi1 span {
	background-position: -144px 0;
}

#progress ol li.mi2,
#progress ol li.mi2 span {
	background-position: -288px 0;
}

#progress ol li.mi3,
#progress ol li.mi3 span {
	background-position: -432px 0;
}

#progress ol li.mi4,
#progress ol li.mi4 span {
	background-position: -576px 0;
}

#progress ol li.mi5,
#progress ol li.mi5 span {
	background-position: -720px 0;
	width: 40px;
}

#progress ol li.mi0active,
#progress ol li.mi0active span {
	background-position: 0 -40px;
}

#progress ol li.mi1active,
#progress ol li.mi1active span {
	background-position: -144px -40px;
}

#progress ol li.mi2active,
#progress ol li.mi2active span {
	background-position: -288px -40px;
}

#progress ol li.mi3active,
#progress ol li.mi3active span {
	background-position: -432px -40px;
}

#progress ol li.mi4active,
#progress ol li.mi4active span {
	background-position: -576px -40px;
}

#progress ol li.mi5active,
#progress ol li.mi5active span {
	background-position: -720px -40px;
	width: 40px;
}


/* @end */

/* @group Detail lists */

div.detail-list ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	width: 540px;
	float: left;
	margin-bottom: 0;
}

div.detail-list {
	margin-bottom: 14px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 13px;
}

div.fieldset div.detail-list {
	border-bottom: 2px solid #ccc;
	padding-bottom: 3px;
	margin-bottom: 0;
}

div.detail-list ul li {
	width: 540px;
	float: left;
	display: block;
	line-height: 1.75em;
}

div.fieldset div.detail-list ul li {
	margin-bottom: 18px;
}

div.detail-list span.detail-type {
	font-weight: bold;
	color: #49176D;
	width: 162px;
	display: block;
	float: left;
	font-size: 116%; 
	text-align: right;
	padding-right: 14px;
}

div.fieldset div.detail-list span.detail-type {
	width: 176px;
	padding-right: 18px;
}


div.detail-list span.detail {
	float: left;
	width: 160px;
}

div.fieldset div.detail-list span.detail {
	width: 325px;
}

/* @end */

div.constrainer {
	width: 540px;
}
div.box-out {
	border: 1px solid black;
	padding-top: 9px;
	margin-bottom: 9px;
}

div.box-out ul {
	list-style-image: url(../images/square-bullet.gif);
}

div.box-out li {
	margin-bottom: 9px;
}

a.back-link,
a.back-link:link,
a.back-link:visited,
a.back-link:active,
a.back-link:hover { /* with arrow on right-hans side */
	font-weight: bold;
	color: #00AA9D;
}

a.back-link {
	background-image: url(../images/back-arrow.gif);
	background-repeat: no-repeat;
	background-position: 0% 58%;
	padding-left:11px;
}

div#application-summary {
	font-size: 150%;
	font-weight: bold;
	color: #666;
	margin-top: 18px;
}

body.printer-friendly #content-inner {
	height: 1%;
	padding-bottom: 9px;
}

span.close-window {
	display: block;
	font-weight: bold;
	margin-bottom: 9px;
}

/* form styling */
.formContainer {}

fieldset,
div.fieldset {
	border: 0;
	padding: 9px 0;
}

fieldset {
	border-bottom: 2px solid #ccc;
	position: relative;
}

.formRow {
	z-index: 25;
}

.formRow,
.formRowRadio,
.formRowCheckbox {
	margin: 0 -9px 13px -6px; /* edited by pete */
	padding: 2px 0px 7px 9px; /* edited by pete */
	background-color: transparent;
	background-image: none;
	position: relative; /*  added by peteneeded if we use position absolute */
	float: left; /* added by pete */
	clear: both;  /* added by pete */
	width: 719px;  /* added by pete */
}

#name-and-birth .formRow {
	margin-bottom: 21px;
}

form p {
	width: 549px;
}

.formRow label,
span.pseudo-label {
	font-weight: bold;
	color: #49176D;
	display: block;
	float: left;
	width: 176px;
	padding-right: 18px;
	background-color: transparent;
	font-size: 116%; /* 14px */  /* added by pete */
	text-align: right;
}

/* @group Checkbox and Radio rows */

.formRowRadio .verticalContainer label,
.formRowCheckbox .verticalContainer label  { /* labels for vertically aligned radio buttons and checkboxes */
	display: block;
	float: none;
	padding-left: 20px;
	position: relative;
	width: auto;
	margin-bottom: 4px;
	font-size: 1em;
}

.formRowRadio .verticalContainer input,
.formRowCheckbox .verticalContainer input {  /* vertically aligned radio buttons and checkboxes */
	position: absolute;
	left: 0;
}

.formRow .frFieldContainer,
.formRowRadio .frFieldContainer,
.formRowCheckbox .frFieldContainer  {
	float: left;
	width: 325px;
}

/* @end */

.formRow .frFieldContainer input.full {
	width: 205px;
}

.formRow .frFieldContainer textarea {
	width: 205px;
}

.formRow .frFieldContainer input.small {
	width: 96px;
}

.formRow .frFieldContainer input.x-small {
	width: 2em;
}

.frFinal { /* submit button */
	z-index: 5;
	padding-top: 9px;
}

.frFinal input {
	margin-left: 99px;
}

body.step1 .frFinal input {
	margin-left: 64px;
}


#validate-account input {
	margin-left: 194px;
}

/* @group Help Containers */

.formRow .frHelpContainer,
.formRowRadio .frRadioHelpContainer,
.formRowCheckbox .frCheckboxHelpContainer { 
 	float: left;
 	width: 168px;
 	margin-left: 9px;
 	/* margin-top: 1.9em;  added by pete - this could be added if input too long */
 	font-size: 0.91em;
 	padding: 5px;
 	z-index: 200; /* added by Pete for absolute positioning */
 }

.formRow .frHelpContainer p,
.formRowRadio .frHelpContainer p,
.formRowCheckbox .frHelpContainer p   {
	margin: 0;
	width: auto;
}

/* @end */

.frActive { background: #FFFEE4 !important; }

#dd-fieldset .frActive {
	background: transparent !important;
}

.form-error .frActive {
	background: transparent !important; 
}

.repositioned {  /* added by pete */
	position: absolute;
	margin-left: 550px !important;
	top: -16px;
	background-color: #FFFEE4;
	color: #000;
}

.accomodate-help .repositioned {
	position: relative;
	margin-top: -10px;
}

.formRow label.above-field {	
	position: absolute;
	top: -1.1em;
	text-align: left;
	font-size: 1em;
	color: #333;
	font-weight: normal;
}

span.above-field {
	display: block;
	float: left;
	width: 176px;
	padding-right: 9px;
	background-color: transparent;
	position: absolute;
	top: -1.1em;
	font-size: 1em;
	color: #333;
}

.frNoMargin { margin-bottom: 0; }

span.note {
	position: absolute;
	left: 424px;
	top: 5px;
	width: 200px;
}

#direct-debit-guarantee {
	position: relative;
}

#direct-debit-guarantee h3 {
	width: 530px;
	color: black;
}

body.printer-friendly #direct-debit-guarantee h3,
body.printer-friendly #direct-debit-guarantee p {
	width: 585px;
}

#direct-debit-guarantee p {
	width: 530px;
}

.direct-debit-logo {
	position: absolute;
	height: 41px;
	position: absolute;
	left: 549px;
	bottom: 17px;
}

#direct-debit-guarantee .direct-debit-logo {
	top: 0;
}

body.printer-friendly #direct-debit-guarantee .direct-debit-logo {
	left: 635px;
}

.direct-debit-logo2 {
	margin-top: -70px;
	position: absolute;
	right: 13px;
}

#print-instructions {
	padding-left: 200px;
	padding-top: 9px;
}

#print-instructions address {
	font-weight: bold;
	margin: 9px 0;
}

#header a.contact-link,
#header a.contact-link:link,
#header a.contact-link:visited,
#header a.contact-link:active,
#header a.contact-link:hover {
	color: #00AA9D;
}

/* @group Date fields */

.frDateField {}
.frDateField .frFieldContainer div,
.frNameField .frFieldContainer div,
.frSortcodeField .frFieldContainer div {
	float: left;
	margin-right: 9px;
}

.frDateField .frFieldContainer input.frDfD,
.frDateField .frFieldContainer input.frDfM { width: 2em; }
.frDateField .frFieldContainer input.frDfY { width: 3em; }

.frDateField label.above-field {
	margin-left: 0.4em;
}

.frSortcodeField .frFieldContainer div {
	width: 3.5em;
}

.frSortcodeField label.above-field {
	margin-left: 0.6em;
	visibility: hidden;
}

/* @end */

/* @group Postcode */


.formRow #lookup-address {
	display: inline;
}
/* @end */


/* @group Form errors */


.form-error {
	border: 2px solid red;
	margin-bottom: 18px;
	color: red;
	float: left;
}

.form-error label {
	color: red;
}

.form-error .formRowRadio span.pseudo-label {
	color: red;
}

.form-error .formRowRadio label {
	color: #49176D;
}

p.error, ul.error {
	color: red;
}
p.error {
	margin-bottom: 0;
}

.form-error ul, .form-error p {
	margin-bottom: 4px;
	float: left;
	width: 400px;
}

.form-error p  {
	padding: 4px;
}

/* @end */

.formRowRadio .verticalContainer input#submitonline {
	position: static;
	margin-bottom: 18px;
	margin-left: 18px;
}

#submitofflinelink {
	margin-left: 190px;
	margin-top: -25px;
	font-weight: bold;
}

#submit-final a {
	position: relative;
	display: block;
	margin: 0 0 20px 0;
	top: 3px;
}