/*
	PURCHASE PIPELINE CSS DEFINITIONS
	=============================
	Author:		the white agency
	Born:		25/08/07
	Modified:	
	Project:	Ticketek
	
	Purpose: 	To define all styles for the purchase pipeline
	Dependancy:	ticketekCore.css
*/

/* The Body & Overall Shell
======================================================================================  */

img.floatImg {  float:left; margin:0px 10px 5px 0px; }
div.removeButton { padding:20px 0 0 0; width:77px; height:24px; }


#wrapPurchaseBody {
	background:#008aff url(../images/purchaseBodyBg.jpg) top center repeat-x;
}

/* Contains main background with lights and gradients */
#wrapBody,
#wrapBodySmall {
	background:url(../images/mainLightingPurchaseBg.jpg) top center no-repeat;
	margin:0 auto;
	text-align:center;
	position:relative;
	min-width:1000px;
	width:100%;
}

#ContentShellSmall {
	width:860px;
	text-align:left;
	margin:0 auto;
	padding:0 0 35px 0;
}

#ContentShellSmall ol { padding:0; margin:0; padding-left:22px;}
#ContentShellSmall ol li {padding-left:0;}


/* MAST HEAD (for overwiting ticketekCore.css - due to slightly carying layout)
======================================================================================  */

#mastHead #mainLogo {
	padding:20px 0px 0px 20px !important;
	float:left;
	width:172px;
	height:70px;
}

#sessionTimeDiv {
	height:18px;
	clear:both;
	color:#ffffff;
	font-size:1.1em;
	padding:0px 0px 5px 45px !important;
}


/* PIPELINE
======================================================================================  */

#pipeLineContent {
	background:#008aff url(../images/pipelineContentBg.jpg) top left no-repeat;
	width:839px;
	margin:17px 0 0 8px;
	padding:12px 10px 8px 11px;
}

#pipeLineContent h3 {
	color:#ffd41f;
	font-size:1.5em;
	background:url(../images/purchaseH3Line.gif) bottom left no-repeat;
	margin:15px 0 10px 0;
	padding:0 0 3px 0;
}

.detailModule {
	margin-bottom:10px;
}

.detailModuleTotal {
	margin-top:-9px;
	margin-bottom:10px;
}

.detailModuleHeader {
	background:#f4cd2d url(../images/detailModuleHeaderBg.gif) top left repeat-x;
	padding:6px 4px 6px 12px;
	font-weight:bold;
	color:#0f3f81;
	font-size:1.3em;
}

.detailModuleCopy .detailModuleHeader {
 font-size: 1.18em;/*1.3=1.18*1.1*/
}

.detailModuleHeaderBlue {
	background:#0b2f6d url(../images/detailModuleHeaderBg2.gif) top left repeat-x;
	padding:6px 4px 6px 12px;
	font-weight:bold;
	color:#ffffff;
	font-size:1.3em;
}

.detailModuleCopy {
	padding:12px;
	background-color:#ffffff;
	font-size:1.1em;
	color:#0f3f81;
}

.detailModuleCopy .detailModuleCopy {
 font-size:1em;
    border: solid 1px #3CF; 
    border-top: none;  
}
td.costLabel {
 text-align: left;
}
td.costValue {
 text-align: right;
}

.detailModuleCopy ul {
	padding-left:16px;
	margin:0;
}

ul.customerNotesList {
	padding-left:0 !important;
}

.detailModuleCopy h4 {
	color:#0f3f81;
	font-size:1.3em;
	margin:0 0 8px 0;
	padding:0;
}

.detailModuleCopy h5 {
	color:#0f3f81;
	font-size:1em;
	margin:0 0 8px 0;
	padding:0;
}

#obstructedNotice { padding:2px 0 5px 2px; clear:both; }
#obstructedNotice input { margin:0 2px 0 0; }

.detailModuleCopy h4 strong,
.detailModuleCopy span strong,
table.eventConfirmTable span,
div.eventAdditionalInfo span,
.eventImportantInfo span { color:red; }

.detailModuleCopy a { color:#0f3f81; }

.detailModuleCopy p {
 margin:0px 0px 5px 0px;
 padding:0;
}

td.ccCell input {
	margin:0 !important;
	padding:0 !important;
}

td.ccCell { padding:2px;}
* html td.ccCell { padding:0; }


div.chooseTicketsOuter  
{
	float:left;
	width:500px;
	margin-right:10px;
}

div.chooseTickets 
{
	margin-top:10px;
}

div.chooseTickets table td {
	padding-top:8px;
	padding-bottom:8px;
}

.redText {
	color:red;
}

div.chooseTickets table,
div.ticketTypes table { width:100%; }
div.chooseTickets p { padding: 5px; }

div.ticketTypes {
	float:left;
	width:300px;
	margin-top:10px;
}

div.chooseTickets th, div.ticketTypes th 
{
	text-align: left;
}


th {
	padding:5px;
}

th.whiteTH {
	background-color:white;
}

div.ticketTypes table { background-color:#EAF4FD; }
div.ticketTypes table td {	padding:7px 12px 7px 12px;}

/*delivery*/
.deliveryOptions table td { vertical-align:top; }
.deliveryOptions input.borInput { margin-top:3px; border:none; }

/* reserve */
#reserveBlurb { float:left; width:500px; }
#reserveBlurb img,

.rhsExtra img { float:left; margin-right:10px; margin-top:4px; margin-bottom:20px; }

.rhsExtra { 
	width:230px;
	float:right;
	background:#ffffff url(../images/timeLeftBg.gif) top left repeat-y;
	margin-right:10px;
	padding:10px 20px 10px 10px;
}

.rhsExtraSmall {
	width:230px;
	float:right;
	background:#ffffff url(../images/timeLeftBgSmall.gif) top left repeat-y;
	margin-right:10px;
	padding:10px 20px 10px 10px;
	text-align:center;
}

.rhsExtraSmall img {
	float:none;
	margin-bottom:10px;
}

.rhsExtraSmall p { text-align:left; }

div#themeChooser { text-align:center; padding:0 0 10px 0; height:280px; overflow:auto; }
div#themeChooser img { border:1px solid #ffffff; float:none !important; margin:6px 0 6px 0 !important;}
div#themeChooser input {float:none; border:none;}

div#continueBar {
	width:839px;
	height:57px;
	background:#6cbcff url(../images/continueBar.jpg) top left no-repeat;
	position:relative;
	margin-top:-10px;
	clear:both !important;
}

input.backButton { position:absolute; top:13px; left:13px; }
input.continueButton { position:absolute; top:13px; right:13px; }
img#printButton { position:absolute; top:13px; right:75px; }
img#homeButton { position:absolute; top:13px; right:13px; }

.selectMoreBox
{
 text-align: right; 
 margin-bottom: 10px;
}

#selectMoreTix {
 text-align: right; 
 padding: 8px 0;
 display: inline-block;
}

.selectMoreExtras {
 text-align: right; 
 padding: 0 0 8px 0;
 display: inline-block;
}

/* TABLES
======================================================================================  */

table td table td { padding:0; }
table td { padding:5px; }
div.chooseTickets table tr.altTRrow { background-color:#E4F2FD; }
div.deliveryOptions table tr.altTRrow { background-color:#E4F2FD; }

#reserveTable {
	background-color:#E1F1FE;
	width:100%;
	margin-top:10px;
	padding:10px 0 10px 0;
}

div#reserveTable table td {
	padding-bottom:3px !important;
}

div#reserveTable table td.tdlabel {
	text-align: right;
}


td.td5 { width:5%; }
td.td10, th.th10 { width:10%; }
td.td11 { width:11%; }
td.td15, th.th15 { width:15%; }
td.td20, th.th20 { width:20%; }
td.td25, th.th25 { width:25%; }
td.td30, th.th30 { width:30%; }
td.td32 { width:32%; }
td.td35, th.th35 { width:35%; }
td.td40, th.th40 { width:40% }
td.td42 { width:42%; }
td.td50 { width:50%; }
td.td60, th.th60 { width: 60% }
td.td65, th.th65 { width: 65% }
td.td70, th.th70 { width: 70% }
td.td90 { width:90px; }
td.td110 { width:110px; }
td.td165 { width:165px; }
td.td560 { width:560px; }

#reserveTable img {
	float:none;
	margin:0 4px 0 0;
	vertical-align:middle;
}

reserveTable textarea, div.reserveSmallForm textarea { width:300px }
reserveTable td { vertical-align:top; }

/* The additional styles here (inputVeryShort, inputMedium, inputLarge) are so that the account details control will work */
input.inputTiny { width:60px; }
input.inputVeryShort,
input.inputShorter { width:90px; }
input.inputShort { width:150px; }
input.inputMedium,
input.inputMed { width:200px; }
input.inputLarge,
input.inputLong { width:300px; }

input.otherCountry { width:150px; }

select.selectState { width:70px; }

select.selectCountry { width:120px; }

textarea.textAreaWide { width:467px !important; }

.textAreaCharactersRemaining
{
	width: 470px;
	text-align: right;
}

label.phoneLabel {
	margin-top: 14px !important;
}

div#reserveBg {
	background-color:#E1F1FE;
	border-top:1px solid white;
}

div.reserveSmallForm {
	float:left;
	width:600px;
	padding-top:7px;
}

div.selectATheme {
	float:right;
	width:200px;
	background-color:#C5E5FE;
}

div.selectATheme p {
	border-bottom:1px solid white;
	padding:10px 0px 10px 15px;
}


/* payment */
table.eventConfirmTable { background-color:#CCE7FC; width:100%; table-layout:fixed; }
table.eventConfirmTable th { text-align: left; }
table.eventConfirmTable th.alignRight { text-align: right; }
table.eventConfirmTable td { border-bottom:1px solid #ffffff; vertical-align:top; padding:6px; }
table.eventConfirmTable tr.firstRowBg { 
	background:#365E95 url(../images/eventTableTRBg.gif) top left repeat-x; 
	color:#ffffff; 
	font-weight:bold; 
}

div.eventAdditionalInfo {
	background-color:#CCE7FC;
	border-bottom:1px solid #ffffff; 
	padding:6px;
}

.alignCenter { text-align:center; }


.eventImportantInfo h4
{
	font-size: 1.45em;
	margin: 0;
	margin-bottom: 10px;
}

.totalInfo { float:left; }
.totalBox { float:right; text-align:right; }
.totalBox h4,
.totalPayment h4 {
	font-size:1.6em;
}

.totalPayment { text-align:center; }
.totalPayment h4 { margin-top:20px; margin-bottom:10px; }

.totalBox hr {
	margin:0;
	padding:0;
	background-color:#008AFF;
	color:#008AFF;
	border:none;
	height:1px;
}

.totalBox table td {
	padding:2px;
}

.ccFields {
 margin-bottom: 0;
}

.costLabel, .costValue {
 font-weight: bold;
 text-align: left;
}

.personalLeft {
	float:left;
	width:500px;
}

.personalLeft td label {
	font-weight:bold;
	margin:3px 0;
	display:block;
}

.personalLeft td.ccCell label {
	font-weight:normal;
	margin:0;
	display:inline;
	padding: 0px 4px 0px 2px;
}

#banner468 { 
	padding:10px 0 15px 0;
	text-align:center;
}

.confirmBlurb {
	float:left;
	width:520px;
	padding-right:10px;
}

.confirmPromo {
	float:right;
	width:270px;
}

.confirmPromo .rhsExtra {
	float:none;
}

.confirmPromo ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

.confirmPromo li {
	background:url(../images/listArrowBlue.gif) no-repeat;
	background-position:1px 7px;
	display:block;
	padding:3px 0 3px 10px;
}


div.rowStrip { background-color:#ffffff; }
div.rowStripAlt { background-color:#f1f8fe !important; }

div.rowStrip,
div.rowStripAlt {
	margin:0;
	padding:10px 3px 10px 3px;
	border-bottom:1px solid white;
}

div.rowStrip input,
div.rowStripAlt input {
	border:none;
	margin:0 10px 0 0;
	float:left;
}

/* register */
.register {
	float:left;
	width:500px;
	padding:0px 10px 10px 4px;
}

.register h4 {
	background:#375F95 url(../images/eventTableTRBg.gif) top left repeat-x;
	color:#ffffff;
	margin:0px;
	padding:4px 4px 4px 15px;
	font-size:1.1em;
}

.registerContent {
	padding:10px 10px 10px 15px;
	background-color:#DAECFF;
}

.registerContent ul {	
	margin:5px 0 10px 0;
	list-style-type:none;
	padding:0;
}

.registerContent ul li {	
	background:url(../images/listArrowBlue.gif) no-repeat;
	background-position:1px 4px;
	padding:1px 0 1px 10px;
	margin:0;
}

/* join login */
.joinLoginInfo {
	float:left;
	width:450px;
	padding:10px 10px 10px 4px;
}

.loginOrJoin {
	float:right;
	width:300px;
}

.loginOrJoin input.loginFields {
	width:160px;
}

.loginOrJoin h4 {
	background:#375F95 url(../images/eventTableTRBg.gif) top left repeat-x;
	color:#ffffff;
	margin:0px;
	padding:4px 4px 4px 15px;
	font-size:1.1em;
}

.loginContent {
	padding:10px 10px 10px 15px;
	background-color:#DAECFF;
}

.loginContent ul {	
	margin:5px 0 10px 0;
	list-style-type:none;
	padding:0;
}

.loginContent ul li {	
	background:url(../images/listArrowBlue.gif) no-repeat;
	background-position:1px 4px;
	padding:1px 0 1px 10px;
	margin:0;
}


#showSummary { margin-left: 308px; }

/* $8 - Unique Forms
============================================================================== */
input[type="checkbox"] {
	border:none !important;
}

input[type="radio"] {
	border:none !important;
}

textarea { font-size:1.1em; }
select.longSelect { width:250px; }
select.shortSelect { width:70px; }

.throbber 
{
    width: 16px;
    height: 16px;
    background-image: url(../images/throbber.gif);
    display: none;
}



/* The Footer
======================================================================================  */

#wrapFooter {
	min-width:1000px;
	width:100%;
	text-align:center;
	font-size:1.1em;
	background-color:#ffffff;
	color:#0f3f81;
	padding:0px 0px 20px 0px;
	clear:left;
	height:100%;
}

#footerAdSegment {
	background:#d6ecff url(../images/footerShadowTop.jpg) top left repeat-x;
	width:100%;
	text-align:center;
	padding:15px 0px 15px 0px;
}

#footerContent {
	width:980px;
	margin:0 auto;
	text-align:center;
}

#footerNav {
	background-color:#eef5fb;
	padding:10px 0px 10px 0px;
}

#footerNav li {
	display:inline;
	padding:0px 0px 0px 3px;
}

#footerNav li a {
	color:#0f3f81;
	padding:0px 3px 0px 0px;
	text-decoration:none;
}

.confirmationImage
{
	padding:10px 0 15px 0;
	text-align:center;
}

#myBasket 
{
    padding: 4px 0 0 0;
}

/* Ticket Insurance
===========================*/
.insLeft
{
    float: left;    
    width: 580px;
}
.insLeft .dvRadioButton
{
    margin: 5px 0 8px 10px;
}
.insRight
{
    width: 200px; 
    float: right; 
    text-align: right; 
    margin-top: 40px;
}
.insRight .costLabel
{
 margin-right: 15px;
}


/* social networking buttons
==============================*/
div.shareThisConfo
{
    width: 250px;
    background:url(/images/invite_friend_bg_1.PNG) bottom center repeat;
    margin: 0 0 0 275px;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 0 3px 0;
    text-align: center;
}

div.shareThisConfo span
{
    margin: 0 10px 0 0px;
    color: #0F3F81 !important;
}

div.shareThisConfo a
{
    margin: 0 8px 0 0px;
    vertical-align:middle;
}

a.fbShare 
{
    background: url(/images/social_facebook_16.png) no-repeat;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-block;
    vertical-align: top !important;
}

/* Performance list
============================================================================== */
.performanceList {
}
.performanceList a {
 color:#0d316d;
}
div.performanceListHeader {
  background:#365E95 url(../images/eventTableTRBg.gif) top left repeat-x; 
  color:#ffffff;
  font-weight:bold;
  font-size:1.2em;
  position:relative;
  height:19px;
}
.performanceListHeader div#performanceEventCaption,
.performanceListHeader div#performanceLocationCaption,
.performanceListHeader div#performanceDateCaption {
 position:absolute;
 top:2px;
}
.performanceListHeader div#performanceEventCaption { left:10px; }
.performanceListHeader div#performanceLocationCaption { left:285px; }
.performanceListHeader div#performanceDateCaption { left:455px; }
.performanceListItem {
 background-color:#ffffff;
 color:#0d316d;
 font-size:1.1em;
 margin-bottom:2px;
}
.performanceListItemAlt {
 background-color:#ddeefc;
 color:#0d316d;
 font-size:1.1em;
 margin-bottom:2px;
}
/* color specific */
.performanceListItem .performanceLocation {  background-color:#ffffff; }
.performanceListItem .performanceDate {  background-color:#ffffff; }
/* ALT COLOR BG */
.performanceListItemAlt .performanceLocation { background-color:#ddeefc; }
.performanceListItemAlt .performanceDate { background-color:#ddeefc;}
/* Added so that the buy now background extends right down if the other columns are longer than expected */
.performanceListItem, .performanceListItemAlt
{
}
.upsellPerformance, .upsellPerformanceContainer
{
 float: left;
 position: relative;
}
/* 3 sections of a performance */
.performanceImage,
.performanceEvent,
.performanceLocation,
.performanceDate,
.performanceBuyNow {
 float:left;
}
.performanceImage
{
 width: 65px;
 padding: 10px 0px 10px 10px;
}
.performanceImage img
{
 border:2px solid #e4e4e4;
 width: 61px;
 height: 61px;
}
.performanceEvent { width:185px; padding:10px 10px 10px 5px;}
.performanceLocation { width:160px; padding:10px 10px 10px 0px; }
.performanceDate { width:90px; text-align:center; padding:10px 5px 10px 0px; }
/* For upsell performances, do not show location or date */
.upsellPerformanceContainer .performanceEvent { /*width:450px;*/ width:650px;}
.upsellPerformanceContainer .performanceLocation { width:0; }
.upsellPerformanceContainer .performanceDate { width:0; }
.performanceEventAndDate,
.performanceEventAndDateLast
{
 float: right;
 clear: right;
 border-bottom: 1px solid #0d316d;
 width: 340px;
}
.upsellPerformanceContainer .performanceEventAndDate,
.upsellPerformanceContainer .performanceEventAndDateLast
{
 width: 75px;
}
.performanceBuyNow 
{
 width:75px; 
 text-align:center; 
 background-color:#CEE4F9; 
 padding:17px 0 17px 0; 
 position: relative; 
 height: 51px; 
}
.performanceEventAndDateLast { border:none; }
.performanceEventAndDateLast .performanceBuyNow { padding-bottom: 23px; }

/* streamlined upsell page */
.upsellPerformanceContainer2
{
    margin: 0;
    padding: 0;
}
.upsellPerformanceContainer2 .performanceImage
{
    padding: 10px 0 10px 10px;
    margin: 0;
    width: 61px;
    float: left;
}
.upsellPerformanceContainer2 .performanceInfo
{
    width: 418px;
    padding: 10px 10px 10px 10px;
    float: left;
}
.upsellPerformanceContainer2 .performanceInfo .performanceTitle
{
    font-weight: bold;
    font-size: 130%;
}
.upsellPerformanceContainer2 .performanceInfo .performanceAlertMessage
{
    margin-bottom: 10px;
    font-weight: bold;
    color: Red;
}
.upsellPerformanceContainer2 a.disabled
{
    text-decoration: none;
    cursor: default;
}
.upsellPerformanceContainer2 .performanceAdditionalInfoLinks a.moreInfoLink
{
    font-size:80%;
}
 
.upsellPerformanceContainer2 .performanceAdditionalInfoLinks .throbberBox
{
    margin-right: 10px;
    position: relative;
    top: 10px;
}
.upsellPerformanceContainer2 .performanceInfo .performanceDescription
{
	margin-bottom: 10px;
}
.upsellPerformanceContainer2 .performanceInfo .performancePriceRange
{
    font-weight: bold;
    font-size: 125%;
}
.upsellPerformanceContainer2 .performanceInfo .performancePriceIncludesDelivery,
.upsellPerformanceContainer2 .performanceInfo .performanceCreditCardFeesIncludedMsg
{
    font-size: 80%;
    margin-bottom: 5px;
}
.upsellPerformanceContainer2 .performanceAddedMessage 
{
    display: none;
    padding-left: 20px;
    background: url(../images/tick.gif) no-repeat left
}
.upsellPerformanceContainer2 .performancePurchase
{
    width: 295px;
    padding: 10px 0 10px 10px;
    float: left;
    margin-bottom: 5px;
}
.upsellPerformanceContainer2 .performancePurchase td
{
    padding: 0;
    margin: 0;
    text-align: right;
}
.upsellPerformanceContainer2 .performancePurchase td.rightColumn
{
    margin: 0;
    text-align: left;
    padding: 2px 0 0 5px;
    width: 110px;
}
.upsellPerformanceContainer2 .performancePurchase .warning
{
    color: red;
}
.upsellPerformanceContainer2 .performancePurchase .performanceCategories,
.upsellPerformanceContainer2 .performancePurchase .performanceDeliveryOptions
{
    width: 175px;  
}
.upsellPerformanceContainer2 .performancePurchase select
{
    color: #0F3F81;
}
.upsellPerformanceContainer2 .performancePurchase .performanceCategories
{
    margin-bottom: 5px;    
}
.upsellPerformanceContainer2 .performancePurchase .performanceQuantity
{
    width: 50px;    
}
.upsellPerformanceContainer2 .throbberBox 
{
    width: 16px;
    height: 16px;
    display:inline-block;
    margin-bottom: 5px;
}
.upsellPerformanceContainer2 .clear
{
    clear: both;
}
.performanceMessagesBox
{
    display: none;
    padding: 10px;
    border-top: 2px solid #c8c8c8;
    background-color: #ffffff;
}
.performanceMessagesBox.errorMessage
{
    border: 2px solid red;
    margin-bottom: 0px;
}
.performanceMessagesBox ul
{
    list-style-type: disc;
}
.upsellPerformanceMsgCloseBtn
{
}
.upsellPerformanceMsgCloseBtnBox
{
    text-align: right;   
    margin-bottom: 5px;
    margin-top: -2px;
}

/* Mobile ticket delivery details
==============================*/

#mobileTixDetails input[type=radio] 
{ 
	display: inline-block;
	margin-left: 10px; 
}

#mobileTixDetails table
{
	margin-left: -2px;	/*align, on left, table cell text with other text*/
}

#mobileTixDetails td, #mobileTixDetails th
{
	margin: 0;
	padding: 0;
}

#mobileTixDetails th
{
	padding: 8px 0 5px 0;
	font-style: normal;
	text-align: left;	
}

#mobileTixDetails td strong, #mobileTixDetails td a
{
	display: inline-block;
	vertical-align: middle;
}

#mobileTixDetails td label
{
	font-weight: bold;
}

#mobileTixDetails td.priceTypeCol
{
	width: 110px;
	padding-right: 10px;
}

#mobileTixDetails td.firstNameCol
{
	width: 80px;
}

#mobileTixDetails td.mobileNumberCol
{
	width: 100px;
}

#mobileTixDetails td.textboxCol
{
	width: 110px;
}

#mobileTixDetails td.updatePhoneCol
{
	width: 270px; /* take up full(-ish) width on last column (to stop Opera wrapping text, other browsers claim remaining space)*/
}

