/* 
=======================================

CHECKOUT PAGES for www.spanagifts.org 

CSS INDEX:

	1. STEPS						line 30
	2. RIGHT COLUMN					line 51
	3. MAIN CONTENT					line 110
	4. STEP 1: BASKET				line 165
	5. STEP 2: ADDRESS FORM			line 306
	6. STEP 3: PAYMENT				line 397
	7. STEP 4: CONFIRMATION			line 509
	8. THANK YOU PAGE				line 560



======================================= */	










/* ===========  1. STEPS =========== */

#steps {
	width:940px;
	padding:50px 0 40px 0;
}

#steps li {
	float:left;
	list-style:none;
	margin-right:50px;
}









/* ===========  2. RIGHT COLUMN =========== */

#rightColumn {
	width:220px;
	float:right;
	margin-top:40px;
}


#rightColumn .boxHead {
	height:39px;
	background:#ccc;
	float:left;
	width:100%;
}


#rightColumn .boxHead h2 {
	padding:8px 0 0 10px;
}


#rightColumn .boxContent {
	border:1px solid #ccc;
	padding:15px 10px 0 10px;
	margin-bottom:20px;
	float:left;
	width:198px;
}

#rightColumn .boxContent p {
	font-size:13px;
	float:left;
	padding-bottom:15px;
}


#rightColumn .boxContent ul {
	padding-bottom:15px;
}

#rightColumn .boxContent li {
	list-style:none;
	font-size:13px;
	font-weight:bold;
}

#rightColumn .boxContent #ssl {font-size:13px; float:left;padding-bottom:15px;}

#rightColumn .boxContent #ssl a {color:#c31230;text-decoration:none;}

#rightColumn .boxContent #ssl a:hover {text-decoration:underline;}

#rightColumn .boxContent #ssl a img {
	display:block;
	padding:5px 10px 0 0;
	float:left;
}








/* ===========  3. MAIN CONTENT =========== */

#checkoutContent {
	width:700px;
	float:left;
	margin-right:20px;
	margin-top:40px;
	font-size:15px;
}


#checkoutContent  div.listHead {
	height:40px;
	background:#ccc;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	width:700px;
	
}

#checkoutContent h2 {
	padding:8px 0 0 10px;
}



#checkoutContent .listHead ul {
	padding:11px 0 0 0;
}

#checkoutContent .listHead li {
	float:left;
	list-style:none;
}

#goBackBtn {
	margin-top:20px;
	float:left;
}

#proceedBtn {
	margin-top:20px;
	float:right;
}

#processBtn, #ctl00_ContentPlaceHolder2_imgConfirmation  {
	margin-left:245px;
}










/* ===========  4. STEP 1: BASKET =========== */

#checkoutContent .product {
	margin-left:10px;
	width:305px;
}


#checkoutContent .price {
	width:110px;
}

#basketContent .price {
	font-weight:normal;
}


#checkoutContent .quantity {
	width:120px;
}


#checkoutContent .subtotal {
	width:75px;
	font-weight:bold;
}


#checkoutContent .remove {
	width:50px;
	margin-right:10px;
	color:#c31230;
	font-size:13px;
}


#checkoutContent div#basketContent {
	border:1px solid #ccc;
	width:698px;
}

#checkoutContent div#ctl00_ContentPlaceHolder2_pnlTotals {border:none;}

#basketContent tr {
	height:90px;
}

#basketContent td {
	border-bottom:1px solid #ccc;
	padding:10px 0;
	vertical-align:middle;
}


#basketContent .productThumb {
	height:80px;
	width:80px;
	padding:0 10px 0 0;
	margin-left:5px;
}

#basketContent td.productTitle {width:195px;padding:28px 10px 10px 0;}

#basketContent td.productTitle a {margin-left:0px;}


#basketContent input.quantityField {
	width:55px;
	margin-right:10px;
	font-size:13px;
	border:1px solid #999;
	padding:2px;
	text-align:right;
	float:left;
}

#basketContent input:focus {
	border:1px solid #333;
}
	

#basketContent .quantity input.submit {
	height:20px;
	width:60px;
	padding-bottom:2px;
	background:#333;
	font-size:13px;
	color:#fff;
	cursor:pointer;
}

#basketContent .remove {
	padding-right:10px;
}



 /* totals at bottom */
 
#basketContent .totalsDesc {
	padding-top:20px;
	height:25px;
	font-weight:bold;
	text-align:right;
	border:none;
}

#basketContent .totalsAmount {
	padding:10px 0 0 30px;
	height:25px;
	font-weight:bold;
	text-align:left;
	border:none;
}
	

#basketContent .totalsAmount input.donation {
	width:50px;
	font-size:13px;
	border:1px solid #999;
	padding:2px;
	text-align:left;
}

#basketContent .totalsAmount input:focus {
	border:1px solid #333;
}


#basketContent select {
	border:1px solid #ccc;
	font-size:13px;
	font-weight:normal;
}

#basketContent #total {
	font-size:18px;
}









/* ===========  5. STEP 2: ADDRESS FORM =========== */

#addressForm {
	border:1px solid #ccc;
	padding:10px 10px 30px 10px;
	font-size:14px;
	float:left;
	width:678px;
}


#addressForm p {
	margin-top:20px;
	clear:left;
}

#addressForm form {
	margin-top:40px;
}
	
#addressForm label {
	width:140px;
	font-weight:bold;
	display:block;
	float:left;
	margin-right:10px;
	padding-top:5px;
}


#addressForm input, textarea {
	width:300px;
	height:20px;
	border:1px solid #999;
	padding:4px 5px 0 5px;
}


#addressForm textarea:focus, #addressForm input:focus {
	border:1px solid #333;
}

#addressForm .note {
	font-size:12px;
	width:300px;
	margin:3px 0 15px 151px;
}


#addressForm .checkbox {
	margin-left:150px;
	width:20px;
	padding:0;
}

#emailSubscribe {
	float:left;
	padding:0;
	margin:0;
}

#addressForm .checkboxLabel {
	width:280px;
	float:left;
	padding-top:0;
	margin-bottom:20px;
	margin-left:10px;
}


#addressForm select {
	border:1px solid #999;
	font-size:13px;
	font-weight:normal;
	min-width:100px;
	margin-top:5px;
}


#addressForm  a {
	color:#c31230;
}









/* ===========  5. STEP 3: PAYMENT =========== */

#paymentForm {
	border:1px solid #ccc;
	padding:10px 10px 30px 10px;
	font-size:14px;
	float:left;
	width:678px;
}


#paymentForm  p {
	margin-top:20px;
	clear:left;
}


#paymentForm  form {
	margin-top:40px;
}
	
#paymentForm label {
	width:140px;
	font-weight:bold;
	display:block;
	float:left;
	margin-right:10px;
	padding-top:5px;
}


#paymentForm input, textarea {
	width:300px;
	height:20px;
	border:1px solid #999;
	padding:4px 5px 0 5px;
}


#paymentForm textarea:focus, #paymentForm input:focus {
	border:1px solid #333;
}


#paymentForm select {
	border:1px solid #999;
	font-size:13px;
	font-weight:normal;
	min-width:100px;
}

#paymentForm .issueNumber {
	width:30px;
}

#paymentForm .expiryDate {
	width:50px;
}

#paymentForm #ctl00_ContentPlaceHolder2_txtSecurityCode {
	width:30px;
}


#paymentForm .note {
	font-size:12px;
	width:300px;
	margin:3px 0 15px 151px;
}

#paymentForm .note img {
	margin-right:10px;
}

#paymentForm h3 {
	font-weight:bold;
	font-size:20px;
	margin-top:60px;
}

#paymentForm #giftAidLogo {
	float:right;
}

#paymentForm a {
	color:#c31230;
}


#paymentForm .checkbox {
	width:20px;
	float:left;
	padding:0;
}


#paymentForm .checkboxLabel {
	width:600px;
	font-weight:normal;
	float:left;
	padding-top:0;
	margin-left:10px;
}









/* ===========  6. STEP 4: CONFIRMATION =========== */

.confirmationBox {
	border:1px solid #ccc;
	margin-bottom:20px;
	padding-bottom:10px;
	font-size:14px;
	float:left;
	width:100%;
}

.confirmationBox .listHead {
	height:39px;
}

.confirmationBox td {
	padding:10px;
	width:200px;
}


.confirmationBox .total{
	font-weight:bold;
	font-size:18px;
}


.confirmationBox ul {
	padding:10px;
}

.confirmationBox  li {
	list-style:none;
	padding:5px 0;
}


.confirmationBox .editBtn {
	clear:left;
	float:right;
	padding-right:10px;
}









/* ===========  7. THANK YOU PAGE =========== */


#thankYou {
	padding:20px 0;
	font-size:14px;	
}

#thankYou h1 {
	padding-bottom:15px;
}

#thankYou p {
	padding-top:15px;
}

#thankYou a {
	color:#c31230;
}