/* ADDED STYLES SPECIFIC TO CCP REDESIGN */
/* ======================================================================= */
/* ===== (•._.•´¯`•._[_]3-[_]3-[_]3- O_o -[_]3-[_]3-[_]3_.•´¯`•._.•) ===== */
/* =====	style.css  -  11/10/2012 -  Jennifer Hageman	     ===== */
/* ===== (•._.•´¯`•._[_]3-[_]3-[_]3- O_o -[_]3-[_]3-[_]3_.•´¯`•._.•) ===== */
/* ======================================================================= */

/*html, body { height: 100%; }*/


label { display: block; cursor: pointer; line-height: 20px; padding-bottom: 9px; text-shadow: 0 -1px 0 rgba(0,0,0,.2); }
.label_check input, .label_radio input { margin-right: 5px }
.js .label_check, .js .label_radio { padding-left: 34px }
.js .label_radio { background: url(radio-off.png) no-repeat }
.js .label_check { background: url(check-off.png) no-repeat }
.js label.c_on { background: url(check-on.png) no-repeat }
.js label.r_on { background: url(radio-on.png) no-repeat }
.js .label_check input, .js .label_radio input { position: absolute; left: -9999px; }


/* GENERAL PAGE SEGMENTS
==================================================== */
.content-container { margin-top: 110px; }

.main-content { background-color: #eee; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 15px 0; margin: 10px 0; }
	.main-content.top { margin: 0 0 10px 0; }
	.main-content h3 { padding: 0 0 0 20px; }
	.main-content p { margin: 0 1.5em; }

.padded-display { width: 95%; margin: 20px auto; background: #fff; }

.help-aligned { width: 170px; float: left; margin-left: 0;}

/* TRANSACTION SUMMARY TABLE */
	#transactionSummary .table { width: 95%; margin: 20px auto; background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 10px; }
	
	#transactionSummary th, #transactionSummary td { border-top: none; }
		#transactionSummary th:last-child, #transactionSummary td:last-child { padding: 4px 20px 4px 5px; text-align: right; }
		
	#transactionSummary #summaryTotal td { border-top: 1px solid #000; padding: 8px 20px 8px 5px; font-size: 1.2em; vertical-align: middle; text-align: right; }

	div.actions { padding-bottom: 5px; text-align: right; width: 100%; }
	div#paymentTypeReadOnly div.view div.content span { font-size: 1.5em; font-weight: bold; }
	div#paymentTypeReadOnly div.view div.content { padding: 20px 0 25px; text-align: center; }
	div.read-only-info div.view div.content-row { clear: both; }
	div.read-only-info div.view div.content div.section { float: left; width: 50%; margin: 0 0 15px;white-space: nowrap; }
	div.read-only-info div.view div.content div.section div.content { padding-left: 25px; }
	div.read-only-info div.view div.content div.section div.name { font-weight: bold; padding-left: 10px; }
	
/* ACCORDION
====================================================== */

.accordion { margin: 20px; /* this is an over-ride */ }

.accordion-inner { background: #fff; }
	.accordion-inner.open { background: #fff; }
	.accordion-inner.complete { background: #ddd; }
		.accordion-inner legend { margin-bottom: 0; font-size: 12px; line-height: 14px; border-bottom: 0; text-align: right; }

.accordion-heading { background: #ccc; }
	.accordion-heading legend { margin-bottom: 0; font-size: 19px; line-height: 30px; border-bottom: 0; }
		.accordion-heading legend a { color: #333; }


div.title {
	background-color: #CCCCCC;
	border-bottom: 1px solid #FFFFFF;
	color: #333333;
	font-size: 1.2em;
	font-weight: bold;
	padding: 15px;
}

div.view {
	background-color: #F2F2F2;
	padding: 5px;
}

/* PROGRESS STATUS INDICATOR
====================================================== */

#progressStatus a { color: #333; font-weight: bold; font-size: 12px; pointer-events: none; cursor: default; text-decoration: none; }
	#progressStatus i { margin: 0 10px 0 0; }
	ul#progressStatus { width:618px; height:44px; margin: 1px auto; padding: 0; background-color: #333; clear: both; list-style: none; }
		ul#progressStatus li { line-height: 40px; width: 152px; overflow:hidden; float: left; text-indent: 10px; margin: 2px 1px; }
			ul#progressStatus li a{ background:url('../Images/ccp-nav-sprite-768x979.png') no-repeat; width:100%; height:100%; display:block; pointer-events: none; cursor: default; text-decoration: none; }
				ul#progressStatus li#step1 a { width:152px; height: 40px; background-position: 0 -84px; }
					ul#progressStatus li#step1 a.current-step { background-position: 0 -42px; }
					ul#progressStatus li#step1 a.done-step { background-position: 0 0; }
				ul#progressStatus li#step2 a { width:152px; height: 40px; background-position: -155px -84px; }
					ul#progressStatus li#step2 a.current-step { background-position: -155px -42px; }
					ul#progressStatus li#step2 a.done-step { background-position: -155px 0; }
				ul#progressStatus li#step3 a { width:152px; height: 40px; background-position: -155px -84px; }
					ul#progressStatus li#step3 a.current-step { background-position: -155px -42px; }
					ul#progressStatus li#step3 a.done-step { background-position: -155px 0; }
				ul#progressStatus li#step4 a { width:152px; height: 40px; background-position: -310px -84px; }
					ul#progressStatus li#step4 a.current-step { background-position: -310px -42px; }
					ul#progressStatus li#step4 a.done-step { background-position: -310px 0; }
			


/* VALIDATION-RELATED STYLES
====================================================== */

.required-flag { color: #08C; }
div.controls span.valid { width: 24px; height: 24px; background: url(../Images/valid.png) center center no-repeat; display: inline-block; text-indent: -9999px; }
div[id^="stepStatus"].done, div[id*="stepStatus"].done { width: 24px; height: 24px; background: url(../Images/input-sprite.png) 0 -141px no-repeat; display: inline-block; text-indent: -9999px; }

/* FORM STYLES
==================================================== */
.form-check { margin-bottom: 0; margin-top: 15px; }

.span15 { width: 100px; }
.span25 { width: 180px; }
.span35 { width: 260px; }

input.span15, textarea.span15, .uneditable-input.span15 { width: 86; }
input.span25, textarea.span25, .uneditable-input.span25 { width: 166px; }
input.span35, textarea.span35, .uneditable-input.span35 { width: 246px; }

fieldset { width: 100%; }

/* styles associated with styling the checkbox */
label#aitLabel, label#SameAddressLabel { display: block; padding: 0 0 0 27px; visibility: visible; }

input[type=checkbox].fancy-checkbox { padding: 0; margin: 0; float: left; position: absolute; left: 0; opacity: 0; }

input[type=checkbox] + label#aitLabel, input[name=SameAddress] ~ label#SameAddressLabel { display: inline-block; height: 24px; margin: 1px 0px 2.5em; *margin-right: .3em; line-height: 29px; vertical-align: middle; background-image: url('../Images/input-sprite.png'); background-position: 0 0; background-repeat: no-repeat; }
    input[type=checkbox] + label#aitLabel:active, input[name=SameAddress] ~ label#SameAddressLabel:active { }
    /* checked styles */
    input[type=checkbox]:checked + label#aitLabel, input[type=checkbox]:checked ~ label#SameAddressLabel { background-position: 0 -24px; }
    input[type=checkbox]:hover:checked + label#aitLabel, input[type=checkbox]:hover:checked ~ label#SameAddressLabel, input[type=checkbox]:focus:checked + label#aitLabel, input[type=checkbox]:focus:checked ~ label#SameAddressLabel, input[type=checkbox]:checked + label#aitLabel:hover, input[type=checkbox]:checked ~ label#SameAddressLabel:hover, input[type=checkbox]:focus:checked + label#aitLabel:hover, input[type=checkbox]:focus:checked ~ label#SameAddressLabel:hover { background-position: 0 -72px; }
    /* focus styles */
    input[type=checkbox]:hover + label#aitLabel, input[type=checkbox]:hover ~ label#SameAddressLabel, input[type=checkbox]:focus + label#aitLabel, input[type=checkbox]:focus ~ label#SameAddressLabel, input[type=checkbox] + label#aitLabel:hover, input[type=checkbox] ~ label#SameAddressLabel:hover { background-position: 0 -48px; }
    /* active styles */
    input[type=checkbox]:active:checked + label#aitLabel, input[type=checkbox]:active:checked ~ label#SameAddressLabel, input[type=checkbox]:checked + label#aitLabel:hover:active, input[type=checkbox]:checked ~ label#SameAddressLabel:hover:active, input[type=checkbox]:active + label#aitLabel, input[type=checkbox]:active ~ label#SameAddressLabel, input[type=checkbox] + label#aitLabel:hover:active, input[type=checkbox] ~ label#SameAddressLabel:hover:active { background-position: 0 -24px; }

div.next { text-align: right; }

/* ICONS
==================================================== */

/* For number icons 1-5, grey */
[class^="new-icon-"], [class*="new-icon-"] { display: inline-block; width: 27px; height: 27px; margin: 1px 0; *margin-right: .3em; line-height: 29px; vertical-align: middle; background-image: url('../Images/icon-numbers.png'); background-position: 0 0; background-repeat: no-repeat; }

.new-icon-one { background-position: 0 0; }
.new-icon-two { background-position: -46px 0;}
.new-icon-three { background-position: -95px 0;}
.new-icon-four { background-position: -141px 0;}
.new-icon-five { background-position: -187px 0;}

/* For white number icons 1-5 */
.new-icon-white { background-image: url("../Images/icon-numbers-white.png"); }


/* PAYMENT RECEIPT CONFIRMATION
==================================================== */

.receipt h1 { margin-top: 60px;}
.receipt .table tr > th:last-child, .receipt .table tr > td:last-child { text-align: right; }


#total td { text-align: right; font-weight: 500; padding-top: 10px;}

#transInfo { margin: 10px 0; }

.receipt caption { font-style: italic; text-align: right; padding: 0 5px;}

#transSummary { margin: 10px 0; }

.information_text p { margin: 30px 0 40px 80px; font-size: 18px; font-style: italic; }

.dl-horizontal.left dt { text-align: left; }

.brand { pointer-events: none; cursor: default; text-decoration: none; }

#helpBeforePopover, #helpAfterPopover, #cvvPopover { pointer-events: auto; cursor: pointer; }




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

	RESPONSIVE STYLES
	
==================================================== */

/* Large desktop */
@media (min-width: 1200px) {

	#progressStatus a { color: #333; font-weight: bold; font-size: 14px; pointer-events: none; cursor: default; text-decoration: none; }
		#progressStatus i { margin: 0 10px 0 0; }
		ul#progressStatus { width:768px; height:44px; margin: 1px auto; padding: 0; background-color: #333; clear: both; list-style: none; }
			ul#progressStatus li { line-height: 40px; width: 190px; overflow:hidden; float: left; text-indent: 20px; margin: 2px 1px; }
				ul#progressStatus li a{ background:url('../Images/ccp-nav-sprite.png') no-repeat; width:100%; height:100%; display:block; pointer-events: none; cursor: default; text-decoration: none;}
					ul#progressStatus li#step1 a { width:190px; height: 40px; background-position: 0 -84px; }
						ul#progressStatus li#step1 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step1 a.done-step { background-position: 0 0; }
					ul#progressStatus li#step2 a { width:190px; height: 40px; background-position: -192px -84px; }
						ul#progressStatus li#step2 a.current-step { background-position: -192px -42px; }
						ul#progressStatus li#step2 a.done-step { background-position: -192px 0; }
					ul#progressStatus li#step3 a { width:190px; height: 40px; background-position: -192px -84px; }
						ul#progressStatus li#step3 a.current-step { background-position: -192px -42px; }
						ul#progressStatus li#step3 a.done-step { background-position: -192px 0; }
					ul#progressStatus li#step4 a { width:190px; height: 40px; background-position: -384px -84px; }
						ul#progressStatus li#step4 a.current-step { background-position: -384px -42px; }
						ul#progressStatus li#step4 a.done-step { background-position: -384px 0; }

	.span15 { width: 110px; }
	.span25 { width: 210px; }
	.span35 { width: 310px; }
	
	input.span15, textarea.span15, .uneditable-input.span15 { width: 96px; }
	input.span25, textarea.span25, .uneditable-input.span25 { width: 196px; }
	input.span35, textarea.span35, .uneditable-input.span35 { width: 296px; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

	.content-container { margin-top: 10px; }

	#progressStatus a { color: transparent; font-weight: bold; font-size: 12px; pointer-events: none; cursor: default; text-decoration: none; }
		#progressStatus i { margin: 0 0 0 -11px; }
		ul#progressStatus { width:476px; height:44px; margin: 1px auto; padding: 0; background-color: #fff; clear: both; list-style: none; }
			ul#progressStatus li { line-height: 40px; width: 117px; overflow:hidden; float: left; text-indent: 10px; margin: 2px 1px; }
				ul#progressStatus li a{ background:url('../Images/progress-line.png') repeat-x; display:block; pointer-events: none; cursor: default; text-decoration: none; }
					ul#progressStatus li#step1 a { width:117px; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step1 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step1 a.done-step { background-position: 0 -84px; }
					ul#progressStatus li#step2 a { width:117px; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step2 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step2 a.done-step { background-position: 0 -84px; }
					ul#progressStatus li#step3 a { width:117px; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step3 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step3 a.done-step { background-position: 0 -84px; }
					ul#progressStatus li#step4 a { width:117px; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step4 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step4 a.done-step { background-position: 0 -84px; }

	.span15 { width: 82px; }
	.span25 { width: 144px; }
	.span35 { width: 206px; }
	
	input.span15, textarea.span15, .uneditable-input.span15 { width: 68px; }
	input.span25, textarea.span25, .uneditable-input.span25 { width: 130px; }
	input.span35, textarea.span35, .uneditable-input.span35 { width: 192px; }
	
	/* For number icons 1-5, sprite */
	[class^="new-icon-"], [class*="new-icon-"] { display: inline-block; width: 27px; height: 27px; margin: 1px 0; *margin-right: .3em; line-height: 29px; vertical-align: middle; background-image: url('../Images/icon-numbers-sprite.png'); background-position: 0 0; background-repeat: no-repeat; }
	
	.new-icon-one { background-position: 0 0; }
		a.current-step i.new-icon-one { background-position: 0 -30px; }
		a.done-step i.new-icon-one { background-position: 0 -58px; }
	.new-icon-two { background-position: -46px 0;}
		a.current-step i.new-icon-two { background-position: -46px -30px; }
		a.done-step i.new-icon-two { background-position: -46px -58px; }
	.new-icon-three { background-position: -95px 0;}
		a.current-step i.new-icon-three { background-position: -95px -30px; }
		a.done-step i.new-icon-three { background-position: -95px -58px; }
	.new-icon-four { background-position: -141px 0;}
		a.current-step i.new-icon-four { background-position: -141px -30px; }
		a.done-step i.new-icon-four { background-position: -141px -58px; }
	.new-icon-five { background-position: -187px 0;}
	
	/* ===[ Force table to not be like tables anymore ]=== */
	.responsive-table table, .responsive-table thead, .responsive-table tbody, .responsive-table th, .responsive-table td, .responsive-table tr { display: block; line-height: 1em; background-color: #fff; }
	/* ===[ Hide table headers (but not display: none;, for accessibility) _NO__DOTCOMMA__AFTER__ ]=== */
	    .responsive-table thead tr { position: absolute; top: -9999px; left: -9999px; }
		.responsive-table tr { border: 1px solid #ccc }
		.responsive-table td { /* Behave  like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align: left; }
			.responsive-table td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; min-height: 5px; }
			/* ===[ Label the data ]=== */
			.responsive-table td:before { content: attr(data-title); /*background-color: #e2e2e2;*/ }
	
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

	.content-container { margin-top: 10px; }
	
	.read-only-info div.content div.section { display: block;clear: both;}
						
	#progressStatus a { color: transparent; font-weight: bold; font-size: 12px; pointer-events: none; cursor: default; text-decoration: none; }
		#progressStatus i { margin: 0 0 0 -11px; }
		ul#progressStatus { width:100%; height:44px; margin: 1px auto; padding: 0; background-color: #fff; clear: both; list-style: none; }
			ul#progressStatus li { line-height: 40px; width: 24%; overflow:hidden; float: left; text-indent: 10px; margin: 2px 1px; }
				ul#progressStatus li a{ background:url('../Images/progress-line.png') repeat-x; display:block; pointer-events: none; cursor: default; text-decoration: none; }
					ul#progressStatus li#step1 a { width:100%; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step1 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step1 a.done-step { background-position: 0 -84px; }
					ul#progressStatus li#step2 a { width:100%; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step2 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step2 a.done-step { background-position: 0 -84px; }
					ul#progressStatus li#step3 a { width:100%; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step3 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step3 a.done-step { background-position: 0 -84px; }
					ul#progressStatus li#step4 a { width:100%; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step4 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step4 a.done-step { background-position: 0 -84px; }
	
	/* For number icons 1-5, sprite */
	[class^="new-icon-"], [class*="new-icon-"] { display: inline-block; width: 27px; height: 27px; margin: 1px 0; *margin-right: .3em; line-height: 29px; vertical-align: middle; background-image: url('../Images/icon-numbers-sprite.png'); background-position: 0 0; background-repeat: no-repeat; }
	
	.new-icon-one { background-position: 0 0; }
		a.current-step i.new-icon-one { background-position: 0 -30px; }
		a.done-step i.new-icon-one { background-position: 0 -58px; }
	.new-icon-two { background-position: -46px 0;}
		a.current-step i.new-icon-two { background-position: -46px -30px; }
		a.done-step i.new-icon-two { background-position: -46px -58px; }
	.new-icon-three { background-position: -95px 0;}
		a.current-step i.new-icon-three { background-position: -95px -30px; }
		a.done-step i.new-icon-three { background-position: -95px -58px; }
	.new-icon-four { background-position: -141px 0;}
		a.current-step i.new-icon-four { background-position: -141px -30px; }
		a.done-step i.new-icon-four { background-position: -141px -58px; }
	.new-icon-five { background-position: -187px 0;}
	
	[class*="span"] { display: block; float: none; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	
}
 
/* Landscape phones and down */
@media (max-width: 480px) {

	.content-container { margin-top: 10px; }
	
		#progressStatus a { color: transparent; font-weight: bold; font-size: 12px; pointer-events: none; cursor: default; text-decoration: none; }
		#progressStatus i { margin: 0 0 0 -11px; }
		ul#progressStatus { width:100%; height:44px; margin: 1px auto; padding: 0; background-color: #fff; clear: both; list-style: none; overflow: hidden; }
			ul#progressStatus li { line-height: 40px; width: 24%; overflow:hidden; float: left; text-indent: 10px; margin: 2px 1px; }
				ul#progressStatus li a{ background:url('../Images/progress-line.png') repeat-x; display:block; pointer-events: none; cursor: default; text-decoration: none; }
					ul#progressStatus li#step1 a { width:100%; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step1 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step1 a.done-step { background-position: 0 -84px; }
					ul#progressStatus li#step2 a { width:100%; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step2 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step2 a.done-step { background-position: 0 -84px; }
					ul#progressStatus li#step3 a { width:100%; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step3 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step3 a.done-step { background-position: 0 -84px; }
					ul#progressStatus li#step4 a { width:100%; height: 40px; background-position: 0 0; }
						ul#progressStatus li#step4 a.current-step { background-position: 0 -42px; }
						ul#progressStatus li#step4 a.done-step { background-position: 0 -84px; }
	/* For number icons 1-5, sprite */
	[class^="new-icon-"], [class*="new-icon-"] { display: inline-block; width: 27px; height: 27px; margin: 1px 0; *margin-right: .3em; line-height: 29px; vertical-align: middle; background-image: url('../Images/icon-numbers-sprite.png'); background-position: 0 0; background-repeat: no-repeat; }
	
	.new-icon-one { background-position: 0 0; }
		a.current-step i.new-icon-one { background-position: 0 -30px; }
		a.done-step i.new-icon-one { background-position: 0 -58px; }
	.new-icon-two { background-position: -46px 0;}
		a.current-step i.new-icon-two { background-position: -46px -30px; }
		a.done-step i.new-icon-two { background-position: -46px -58px; }
	.new-icon-three { background-position: -95px 0;}
		a.current-step i.new-icon-three { background-position: -95px -30px; }
		a.done-step i.new-icon-three { background-position: -95px -58px; }
	.new-icon-four { background-position: -141px 0;}
		a.current-step i.new-icon-four { background-position: -141px -30px; }
		a.done-step i.new-icon-four { background-position: -141px -58px; }
	.new-icon-five { background-position: -187px 0;}
	
	/* ===[ Force table to not be like tables anymore ]=== */
	.responsive-table table, .responsive-table thead, .responsive-table tbody, .responsive-table th, .responsive-table td, .responsive-table tr { display: block; line-height: 1em; background-color: #fff; }
	/* ===[ Hide table headers (but not display: none;, for accessibility) _NO__DOTCOMMA__AFTER__ ]=== */
	    .responsive-table thead tr { position: absolute; top: -9999px; left: -9999px; }
		.responsive-table tr { border: 1px solid #ccc }
		.responsive-table td { /* Behave  like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding: 2px; padding-left: 50%; white-space: normal; text-align: left; }
			.responsive-table td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 2px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; min-height: 5px; }
			/* ===[ Label the data ]=== */
			.responsive-table td:before { content: attr(data-title); /*background-color: #e2e2e2;*/ }
	
}