/* CHECKOUT.css */

/* labels */
div.label {
/*	color:#651b12;  */
	font-size:0.90em;
	line-height: 1em;
	text-transform:uppercase;
}
div.label p {
	letter-spacing:-1px;
	padding-bottom:0;
}

/* ================================================= */
/* ---- GENERAL ---- */
div.checkoutitems {
}
div.checkoutitems table {
	border:1px solid #CCC;
	margin-bottom:5px;
}

div.checkoutitems td {
	padding:4px 5px;
}
div.checkoutitems td.product {
	width:35%;
}
div.checkoutitems td.manuf {
	width:26%;
}
div.checkoutitems td.weight {
	width:7%;
}
div.checkoutitems td.price {
	text-align:right;
	width:12%;
}
div.checkoutitems td.qty {
	text-align:center;
	width:9%;
}
div.checkoutitems td.value {
	text-align:right;
	width:11%;
}
div.checkoutitems td.total {
	text-align:right;
}

div.checkoutitems div.buttons {
	text-align:right;
}


div.checkoutbuttons {
	padding-bottom:18px;
	text-align:right;
}

/* ================================================= */
/* ---- STAGE 3 ---- */
#PersonalDetails {
	margin-bottom:10px;
}

#PersonalDetails div.formArea {
	border:1px solid #CCC;
	margin-bottom:5px;
	padding-bottom:10px;
}


#PersonalDetails div.heading {
	background-color:#DDD;
	margin-bottom:10px;
}
#PersonalDetails div.heading p {
	font-weight:bold;
	padding-bottom:0;
}

#PersonalDetails div.heading div.yours {
	float:left;
	padding:6px 10px 7px 10px;
	width: 319px;
}
#PersonalDetails div.heading div.delivery {
	float:left;
	padding:6px 10px 7px 10px;
	width: 319px;
}



#PersonalDetails div.formLeft {
	border-right:1px dashed #CCC;
	float:left;
	padding:5px 9px 4px 10px;
	width: 319px;
}
#PersonalDetails div.formRight {
	float:left;
	padding:5px 10px 4px 10px;
	width: 319px;
}




/* Title */
#PersonalDetails div.title {
	float: left;
	margin:0;
	width: 52px;
}
#PersonalDetails div.title div.label {
	width: 45px; 
}
#PersonalDetails div.title div.value {
	margin-top: 1px;
	width: 45px; 
}
#PersonalDetails div.title input {
	width: 43px; 
}

/* Forename */
#PersonalDetails div.forename {
	float: left;
	margin:0;
	width: 135px;
}
#PersonalDetails div.forename div.label {
	width: 131px; 
}
#PersonalDetails div.forename div.value {
	margin-top: 1px;
	width: 131px; 
}
#PersonalDetails div.forename input {
	width: 127px; 
}

/* Surname */
#PersonalDetails div.surname {
	float: left;
	margin:0;
	width: 131px;
}
#PersonalDetails div.surname div.label {
	width: 131px; 
}
#PersonalDetails div.surname div.value {
	margin-top: 1px;
	width: 131px; 
}
#PersonalDetails div.surname input {
	width: 127px; 
}

/* Organisation */
#PersonalDetails div.organisation {
	margin-top: 3px;
	width: 319px;
}
#PersonalDetails div.organisation div.label {
	width: 319px;
}
#PersonalDetails div.organisation div.value {
	margin-top: 1px;
	width: 319px;
}
#PersonalDetails div.organisation input {
	width: 315px;
}

/* Address - Line 1 */
#PersonalDetails div.address1 {
	margin-top: 3px;
	width: 319px;
}
#PersonalDetails div.address1 div.label {
	width: 319px;
}
#PersonalDetails div.address1 div.value {
	margin-top: 1px;
	width: 319px;
}
#PersonalDetails div.address1 input {
	width: 315px;
}

/* Address - Line 2, 3 & 4 */
#PersonalDetails div.address2, #PersonalDetails div.address3, #PersonalDetails div.address4 {
	margin-top:1px;
	width: 319px;
}
#PersonalDetails div.address2 div.label, #PersonalDetails div.address3 div.label, #PersonalDetails div.address4 div.label {
	display: none;
}
#PersonalDetails div.address2 div.value, #PersonalDetails div.address3 div.value, #PersonalDetails div.address4 div.value {
	width: 319px;
}
#PersonalDetails div.address2 input, #PersonalDetails div.address3 input, #PersonalDetails div.address4 input {
	width: 315px;
}

/* Address - Line 5 */
#PersonalDetails div.address5 {
	float: left;
	margin:1px 5px 2px 0;
	width: 157px; 
}
#PersonalDetails div.address5 div.label {
	display: none;
}
#PersonalDetails div.address5 div.value {
	width: 157px; 
}
#PersonalDetails div.address5 input {
	width: 153px; 
}

/* Postcode */
#PersonalDetails div.postcode {
	float: left;
	margin-top:1px;
	margin-bottom:2px;
	width: 157px;
}
#PersonalDetails div.postcode div.label {
	float: left;
	margin-top: 3px;
	text-align:left;
	width: 73px;
}
#PersonalDetails div.postcode div.value {
	float: left;
	text-align:right;
	width: 84px;
}
#PersonalDetails div.postcode input {
	width: 75px;
}
/* opera fix */
html:first-child #PersonalDetails div.postcode div.value {
	padding-right:5px;
	width: 74px;
}




/* TelephoneLeft (Telephone home, Mobile) & TelephoneRight (Telephone work, Fax) */
#PersonalDetails div.telephoneLeft, #PersonalDetails div.telephoneRight {
	float: left;
	margin-top: 3px;
	width: 157px;
}
#PersonalDetails div.telephoneLeft {
	margin-right:5px;
}
#PersonalDetails div.telephoneLeft div.label, #PersonalDetails div.telephoneRight div.label {
	width: 157px;
}
#PersonalDetails div.telephoneLeft div.value, #PersonalDetails div.telephoneRight div.value {
	margin-top: 1px;
	width: 157px;
}
#PersonalDetails div.telephoneLeft input, #PersonalDetails div.telephoneRight input  {
	width: 153px;
}

/* Email */
#PersonalDetails div.email {
	margin-top: 3px;
	width: 319px;
}
#PersonalDetails div.email div.label {
	width: 319px;
}
#PersonalDetails div.email div.value {
	margin-top: 1px;
	width: 319px;
}
#PersonalDetails div.email input {
	width: 315px;
}


/* hearabout */
#PersonalDetails div.hearabout {
	margin-top: 3px;
	width: 319px;
}
#PersonalDetails div.hearabout div.label {
	width: 319px;
}
#PersonalDetails div.hearabout div.value {
	margin-top: 1px;
	width: 319px;
}
#PersonalDetails div.hearabout input {
	width: 315px;
}

/* Updates */
#PersonalDetails div.updates {
	margin-top: 5px;
	width: 319px;
}
#PersonalDetails div.updates div.value {
	float:left;
	width:26px;
}
#PersonalDetails div.updates div.label {
	float:left;
	padding-top:2px;
	width:293px;
}


/* preferdelivery */
#PersonalDetails div.preferdelivery {
	float: left;
	margin-top: 3px;
	width: 157px;
}
#PersonalDetails div.preferdelivery div.label {
	width: 157px;
}
#PersonalDetails div.preferdelivery div.value {
	margin-top: 1px;
	width: 157px;
}
#PersonalDetails div.preferdelivery input  {
	width: 153px;
}

/* greeting */
#PersonalDetails div.greeting {
	margin-top: 3px;
	width: 319px;
}
#PersonalDetails div.greeting div.label {
	width: 319px;
}
#PersonalDetails div.greeting div.value {
	margin-top: 1px;
	width: 319px;
}
#PersonalDetails div.greeting textarea {
	height:55px;
	width: 317px;
}


/* ================================================= */
/* ---- STAGE 4 ---- */
#PaymentDetails {
	margin-bottom:10px;
}

#PaymentDetails div.formArea {
	border:1px solid #CCC;
	margin-bottom:5px;
	padding-bottom:10px;
}


#PaymentDetails div.heading {
	background-color:#DDD;
	padding:6px 10px 7px 10px;
	margin-bottom:10px;
}
#PaymentDetails div.heading p {
	font-weight:bold;
	padding-bottom:0;
}

#PaymentDetails div.formArea p.padding {
	padding:0 10px 10px 10px;
}

#PaymentDetails div.formLeft {
	border-right:1px dashed #CCC;
	float:left;
	padding:5px 11px 4px 10px;
	width: 255px;
}

#PaymentDetails div.formCentre {
	border-right:1px dashed #CCC;
	float:left;
	padding:5px 11px 4px 11px;
	width: 130px;
}


#PaymentDetails div.formRight {
	float:left;
	padding:5px 11px 4px 10px;
	width: 227px;
}


#PaymentDetails select {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75em;
}






/* cardType */
#PaymentDetails div.cardType {
	width:255px;
}
#PaymentDetails div.cardType div.label {
	width:255px;
}
#PaymentDetails div.cardType div.value {
	margin-top:2px;
	width:255px;
}
#PaymentDetails div.cardType div.value select {
	width:254px;
}

/* cardNumber */
#PaymentDetails div.cardNumber {
	margin-top: 3px;
	width:255px;
}
#PaymentDetails div.cardNumber div.label {
	width:255px;
}
#PaymentDetails div.cardNumber div.value {
	margin-top:1px;
	width:255px;
}
#PaymentDetails div.cardNumber div.value input {
	width:250px;
}


/* cardStart */
#PaymentDetails div.cardStart {
	width:130px;
}
#PaymentDetails div.cardStart div.label {
	width:130px;
}
#PaymentDetails div.cardStart div.value {	
	margin-top:2px;
	font-size:0.85em; 
	margin-bottom:0;
	width:130px;
}
#PaymentDetails div.cardStart div.value select {
	font-size:0.9em;
	width:58px;
}

/* cardExpiry */
#PaymentDetails div.cardExpiry {
	margin-top: 3px;
	width:130px;
}

#PaymentDetails div.cardExpiry div.label {
	width:130px;
}
#PaymentDetails div.cardExpiry div.value {
	margin-top:2px;
	font-size:0.85em; 
	margin-bottom:0;
	width:130px;
}
#PaymentDetails div.cardExpiry div.value select {
	font-size:0.9em;
	width:58px;
}

/* cardDatesIssueCVC */
#PaymentDetails div.cardDatesIssueCVC {
	float:left;
	width:122px;
}

/* cardIssue */
#PaymentDetails div.cardIssue {
	width:115px;
}
#PaymentDetails div.cardIssue div.label {
	width:110px;
}
#PaymentDetails div.cardIssue div.value {
	margin-top:1px;
	width:111px;
}
#PaymentDetails div.cardIssue div.value input {
	width:107px;
}

/* cardCVC */
#PaymentDetails div.cardCVC {
	margin-top:3px;
	width:115px;
}
#PaymentDetails div.cardCVC div.label {
	width:110px;
}
#PaymentDetails div.cardCVC div.value {
	margin-top:1px;
	width:111px;
}
#PaymentDetails div.cardCVC div.value input {
	width:107px;
}
/* Fix - IE7 */
*:first-child+html #PaymentDetails div.cardCVC {
	margin-top:1px;
}

/* cvcGraphic */
#PaymentDetails div.cvcGraphic {
	float:left;
	margin-top:5px;
	text-align:right;
	width:100px;
}



#PaymentDetails div.completeOrder {
	padding:5px 10px 0 10px;
}
#PaymentDetails div.completeOrder div.value {
	float:left;
	width:26px;
}
#PaymentDetails div.completeOrder div.label {
	float:left;
	padding-top:3px;
}