﻿/* -------------------------------------------------------------------------------------------------------- */
                                              /* PRODUCTIONS */
/* -------------------------------------------------------------------------------------------------------- */ 

/* --- WHATS ON - Production Listings --- */
#ProductionFilter {float:left; width:766px; margin-bottom:10px;}
    #ProductionFilter #TabContainer {width:746px;}
    #CheckBoxFilters {width:746px; float:left; padding:20px 10px 40px 10px; position:relative;}
        #slidebox {padding-bottom:10px; padding-top:5px;}
        #slidebox .FilterGroup {float:left; width:350px; margin-right:10px;}
        #slidebox .FilterGroup span {display:block;padding-left:3px; padding-top:5px;}
        #slidebox .RightBorder {border-right:1px solid white;}
        #slidebox input[type=checkbox] {float:left; margin-right:5px;}
        #slidebox td {margin:0; padding:0; vertical-align:top;}
        #slidebox label {float:left; width:115px; padding-right:20px; line-height:1.4em; padding-top:1px;}
        #CheckBoxFilters .HideFilterLink {position:absolute; top:10px; left:10px; cursor:pointer;}
            #CheckBoxFilters .HideFilterLink img {padding:0 0 3px 3px;}
			td.RightBorder {border-right:1px solid #666;}
        #FilterLists table {text-align:left; font-weight:bold; width:300px; border:1px solid red;}
    #ProductionFilter input[type=submit] {position:absolute; bottom:10px; right:10px;}
#ProductionCalendar {float:right; width:180px; clear:none;}
    #DateRange {position:relative; z-index:100; padding:10px 10px 10px 7px;}
        #DateRange .Ranges {position:relative; width:168px;}
        #DateRange .ToLabel {line-height:26px; height:26px; padding:0 3px;}
        #DateRange input[type=text] {background:url(/Images/Interface/Forms/FormBG-51x26.png); border:0px; margin:0; padding:0; width:51px; height:26px; line-height:26px;}
        #DateRange .DateRangeGoButton {background: url(/Images/Interface/Buttons/DateRangeGoButton.png); position:absolute; top:0px; right:0px; border:0px; width:36px; height:26px; text-align:center; line-height:26px;}
        #DateRange .FromCalendar {position:absolute; top:-30px; left:-177px; width:187px; height:144px; background:url(/Images/Interface/Calendar/PopupBG.png) top left no-repeat;}
        #DateRange .FromCalendar table, #DateRange .FromCalendar table td {background:transparent !important;}
        #DateRange .ToCalendar {position:absolute; top:-30px; left:-103px; width:187px; height:144px; background:url(/Images/Interface/Calendar/PopupBG.png) top left no-repeat;}
        #DateRange .ToCalendar table, #DateRange .ToCalendar table td {background:transparent !important;}
        #DateRange .FromCalendar, #DateRange .ToCalendar {color:Black;}
        
.WideListing {width:766px;}
    .WideListing .ProductionInfo {width:417px;}
.NarrowListing {float:left; width:672px;}
    .NarrowListing .ProductionInfo {width:330px;}

#ProductionSummary {}
#ProductionSummary .ProductionImage {width:310px; height:180px;}

/* ---------------------------------------------------------------------------------------- */
/*                                    Production Detail                                     */
/* ---------------------------------------------------------------------------------------- */
.Performance {position:relative;}
	.Performance .Date {position:absolute; top:0px; left:0px; }
.PerformanceItem {width:515px; padding-left:100px; position:relative; border-bottom:1px solid #000; margin-bottom:5px; padding-bottom:5px;}

/* --- Production Archive --- */
#ProductionArchive {padding:0 10px;}
#ProductionArchive .ContentPanel {margin-bottom:15px;}

/* --- TABS --- */
#ProductionDetail ul.ProductionInfo li {list-style-type:none; margin-left:0;}
#ProductionDetail ul.ProductionInfo li.PriceRange a { text-decoration: underline;}



    #ProductionDetail ul.ProductionInfo li b {vertical-align:top;}
#tabs {padding:0; width:635px; border:0;}
    #tabs .ui-tabs-nav {background:#474747; padding:0px; margin:0px; border:0px; position: relative; z-index: 100; overflow: hidden;} 
    #tabs .ui-tabs-nav .ui-state-active, #tabs .ui-tabs-nav li {border:0;}
    #tabs .ui-tabs-nav li#BookTab {position:absolute; right:-3px; top:1px;}
#tabs .ui-tabs {padding:0px; margin:0px; border:0px;}
#tabs ul {margin:0; padding:0; border:0px;}
#tabs .ui-tabs-panel {padding:10px; position: relative; z-index: 200;}

/* Overview Tab */
#ProductionDetailContainer .Text {float:left; width:450px; padding-right:25px;}
#ProductionDetailContainer .Resources {float:left; width:472px; }


/* --- Performance Listings  --- */
#PerformanceHeader {margin-bottom:0.5em;}
#PerformanceHeader span {font-family:Arial Black, Arial, Verdana; text-transform:uppercase; font-size:0.9em; margin-bottom:10px;}
#PerformanceHeader #DateHeader, .DateColumn {float:left; width:80px; display:block; font-weight:bold;}
#PerformanceHeader #TimeHeader, .TimeColumn {float:left; width:80px; display:block;}
#PerformanceHeader #NotesHeader, .NotesColumn {float:left; width:160px; display:block;}
#PerformanceHeader #AccessHeader, .AccessColumn {float:left; width:100px; display:block;}
#PerformanceHeader #PricesHeader, .PricesColumn {float:left; width:100px; display:block; font-weight:bold;}
#PerformanceHeader #ButtonHeader, .ButtonColumn {float:right; display:block;}

.PerformanceDate {position:relative; clear:both; border-bottom:1px solid black !important; width:615px !important; padding:0; border-top:0px !important; border-left:0px !important; border-right:0px !important;}
.PerformanceDate .DateColumn {position:absolute; left:0px; top:0px; display:block; line-height:40px; height:40px;}
.PerformanceTimes {position:relative; clear:both; width:535px; padding: 0px 0px 0.5em 80px; line-height:40px; }
.PerformanceTime {clear:both; padding:0; }
.PerformanceTime .TimeColumn {float:left; width:80px; text-transform:lowercase;}
.PerformanceTime span {}
#Performances .Message {}


/* -------------------------------------------------------------------------------------------------------- */
                                              /* PACKAGES */
/* -------------------------------------------------------------------------------------------------------- */
.PackageSummary .InfoMessage {display:block; width:234px; padding:10px; color:Black; margin-bottom:5px;}
.PackageSummary .Production {float:left; width:280px; padding:5px; background:#333; margin-bottom:2px; position:relative; margin-bottom:5px; line-height:1.3em;}
.PackageSummary .Production .ProductionSummary {float:left; width:185px;}
.PackageSummary .Production .RemoveLink {float:right;}
    .PackageSummary h2 {display:block; clear:both;}
    .PackageSummary h3 {font-size:1.1em;}

.PackageSummaryTotalRow {margin:10px 0; border-top:1px solid #000; padding-top:10px;}
    .PackageSummaryTotalRow .PriceLabel {padding-left:772px; font-weight:bold;}
    .PackageSummaryTotalRow .PriceText {float:right; width:128px;}
    
#BookingSummary .Details {padding:10px; background:#E3A52A url(/Images/Interface/RoyalAndDerngate/Basket-Icon-Black.png) no-repeat 285px 15px;}
.Details ul {margin:0 0 10px 0;}
    .Details ul li {list-style-type:none; margin-left:0;}
    .Details ul.WhitePanel li {padding:0; margin:0 0 10px 0; list-style-type:none;}
    .Details ul.WhitePanel li:last-child {margin:0;}
    .Details a {text-decoration:underline;}
    .Details a:hover {text-decoration:none;} 
    .Details li a {float:right;}
    
#MakePayment {position:relative; width:613px;}
#MakePayment .StandardButton {position:absolute; top:3px; right:0;}
.PColor.PackageForm {border:none; padding:11px}
.PColor.PackageForm, .PColor.PackageForm h2 {color:#ffffff;}
#PackageDetails #ProductionDetail {padding:10px; width:615px;}
#ProductionDetail.PColor label{color:White;}
#Performance-Spacefix {background:#E3A52A; width:615px; padding:10px;}
/* -------------------------------------------------------------------------------------------------------- */
                                            /* SELECT YOUR OWN SEATS */
/* -------------------------------------------------------------------------------------------------------- */
.SelectSeatingList {padding:0; margin:0;}
.SelectSeatingList td {border:1px solid #ccc; background:#ededed; width:290px;}
.SeatMap {position:relative; height:280px; margin-bottom:10px; padding:10px;}

#imageMapImage {}

#BestAvailable {}

.SelectSeatingMessage {}
#RadioList {width:615px;}
    #SelectSeatingContainer #TabContainer {margin-bottom:10px;}
    #SelectSeatingInfo {float:right; width:174px; background: url(/Images/Interface/TransparentWhiteBG.png) top left; padding:5px;} 

    #SyosContainer {position:relative; clear:both;}
        #SyosContainer #AuditoriumView {padding:20px;  height:370px; width:615px;} /* width:920px; */
        #SyosContainer #AuditoriumView #SectionGroup {float:left; width:238px;}
        #SyosContainer #AuditoriumView .SelectSectionButton {display:block; white-space:normal; height:53px; width:238px; text-align:left; cursor:pointer; padding-left:20px; padding-right:20px; border:0px; margin-bottom:10px; color:#fff; background: url(/Images/Interface/Syos/SectionButtonBG.png);}
            #SyosContainer #AuditoriumView .SelectSectionButton:hover {background: url(/Images/Interface/Syos/SectionButtonBGOver.png);}
        #SyosContainer #AuditoriumView #AuditoriumMap {float:left; width:500px; text-align:center; border:1px solid red; background:green;}
    
    .SeatKey {width:615px; clear:both; height:20px; line-height:20px; padding-top:10px;}
		.SeatKey ol {display:inline; margin:0; padding:0; list-style-type:none;}
		.SeatKey li {display:inline; padding:0 13px 0 0; margin:0;}
    #SeatView {position:relative; clear:both;}
    
    #hoverInformation {width:155px; background:#fff; border:4px solid #999; height:auto; padding:10px; margin:0; color:#000;}
    #hoverInformation h2 {font-size:14px; z-index:9999; padding:0 0 7px 0; margin:0;}
    #hoverInformation .SeatNumberRow {font-size:14px; z-index:9999; padding:7px 0;}
    #hoverInformation ul {z-index:9999; padding:7px 0; margin:0;}
    #hoverInformation ul li {padding-bottom:5px; width:100%; list-style-type:none; margin:0 0 0 5px;}
    #hoverInformation label {font-weight:bold !important; padding-right:5px;}
    
    /* --- Camera View --- */
    #hoverPhoto {position:absolute; float:left; display:none;}
    #hoverPhoto img {position:absolute; float:left; z-index:20; background:#333; padding:5px; top:65px; left:35px; width:250px; height:165px;}
    
    /* --- --- */
.SeatSelectionTable {width:100%; margin-bottom:10px;}
.SeatSelectionTable th {text-align:left; padding:7px 5px; font-weight:bold; border-bottom:1px dashed #444;}
.SeatSelectionTable td {text-align:left; width:182px; padding:7px 5px; border-bottom:1px dashed #444;}
.SeatSelectionTable td:last-child {text-align:right;}
.SeatSelectionTable td a {}
#SeatSelectionRight {position:relative; width:635px; clear:both;}
#SeatSelectionRight input {margin:0 0 0 10px;}
#fragment-6 {background:black;}

#ImportantInfo {border:1px solid red;}
    
/* -------------------------------------------------------------------------------------------------------- */
                                              /* LOGIN AND BASKET */
/* -------------------------------------------------------------------------------------------------------- */

#Login {margin-bottom:10px;}
#Login p {padding:10px;}

/* --- Login Screen --- */
#LoginChoice #NewCustomer, #LoginChoice #ReturningCustomer {float:left; width:245px; padding:15px; height:205px; margin-right:20px; position:relative;}
#LoginChoice .UsernameLabel, #LoginChoice .PasswordLabel {width:240px; padding-bottom:3px;}
#LoginChoice input[type=text], #LoginChoice input[type=password] {width:230px; float:none; height:26px; line-height:26px; padding:3px 5px; background: url(/Images/Interface/Forms/textbox-240x32.png) top left;}
#LoginChoice li {padding-bottom:10px; clear:both;}
#LoginChoice li.Relative {position:relative;}
#LoginChoice .LoginHeader, #LoginChoice .LoginControlCheckbox, #LoginChoice #MiniCart {display:none;}
#LoginChoice legend {padding-bottom:10px;}
#LoginChoice .RememberCheckbox {position:absolute; right:100px; top:195px;}
#LoginChoice .RememberCheckbox label {width:auto; display:inline; float:none;}
#LoginChoice .YellowButton, #LoginChoice .LoginButton {position:absolute; bottom:20px; right:20px;}
#LoginChoice .ForgotPasswordLink {position:absolute; right:20px; top:160px;}
#LoginChoice .ValidationSummary {position:absolute; left:290px; top:57px; width:300px; background:Black;}
#LoginChoice .LoginControlMessageArea {position:absolute; left:290px; top:15px; background:Black; width:300px; border:1px solid red; color:Red; padding:10px;}

/* Validation */
.LoginControlValidator {position:absolute; top:15px; right:-3px; font-size:20px; font-weight:bold;}

/* Your Details Purchase Path */
#PurchasePath .bookingleft, #PurchasePath .bookingright {margin-top:0/*75px*/;}
#PurchasePath .test {position:absolute; top:0px; left:0px; display:block;}

/* --- Basket --- */
#PriceList {}
.MyBasket table.Basket {clear:both; margin-bottom:10px;}
.MyBasket table.Basket th {text-align:left; font-weight:bold; padding:7px 5px; color:#000;}
.MyBasket table.Basket td {text-align:left; vertical-align:top; padding:5px;}
.MyBasket table.Basket td a {}

.MyBasket div#Tickets {float:left; width:333px;}
.MyBasket div#Tickets #TicketHeaderOne {float:left; width:125px; font-weight:bold;}
.MyBasket div#Tickets #TicketHeaderTwo {float:left; width:133px; font-weight:bold;}
.MyBasket div#Tickets #TicketHeaderThree {float:left; width:55px; font-weight:bold;}
.MyBasket div#Tickets #TicketColumnOne {float:left;  width:125px; line-height:1.2em;}
.MyBasket div#Tickets #TicketColumnTwo {float:left;  width:133px; line-height:1.2em;}
.MyBasket div#Tickets #TicketColumnThree {float:left; width:50px; line-height:1.2em;}

.Pgram {width: 618px;}
/* Voucher */
.MyBasket .Voucher {border:1px solid #ccc; padding:10px}
.MyBasket .Voucher label {display:block; padding:0 0 5px 0;}
.MyBasket .Voucher input[type=text] {width:198px; padding:5px; margin-right:10px; border:1px solid #ccc;}
.MyBasket .Voucher input[type=text]:focus {background:#E6F7FF; border-color:#3586FF;}

#GiftVoucher table.Basket {margin-bottom:0;}

/* Total */
.MyBasket #Totals {}
.MyBasket #Totals label {float:left; display:block; font-weight:bold; width:209px; margin-left:5px;}
.MyBasket #Totals .Pricing {padding:5px 0;}
.MyBasket #Actions {position:relative; line-height:1.2em; padding:10px;}

/*Gift Aid */
#GiftAid {position:relative; overflow: hidden;}
#GiftAid .DonationAmount {background:none; border:none; position:relative;}
#GiftAid .DonationAmount a {color:#fff;}
.GiftAidBox { line-height:18px;}
#CardInformation {border:1px solid #ccc; padding:10px 0; margin-bottom:10px;}
#CardInformation p {padding:0 10px;}
.Donation-Sub{ padding:5px; margin:5px; cursor:pointer; background-color:#000; color:#fff; font-weight:bold;}

.Basket th {text-align:left;}

/*
.MyBasket table.Basket {margin:0px;}
.MyBasket table.Basket th {text-align:left; padding:7px 5px; background: url(/Images/Interface/DashedLine.png) bottom left repeat-x; color:#ffff18; font-weight:normal;}
.MyBasket table.Basket td {text-align:left; vertical-align:top; padding:17px 5px; background: url(/Images/Interface/DashedLine.png) bottom left repeat-x; }
.MyBasket table.Basket td a {color:#02a3ff;}
.MyBasket div#Tickets {width:380px;}
.MyBasket div#Tickets #TicketHeaderOne {float:left; width:120px; font-weight:bold;}
.MyBasket div#Tickets #TicketHeaderTwo {float:left;  width:190px; font-weight:bold;}
.MyBasket div#Tickets #TicketHeaderThree {float:left;width:50px; font-weight:bold;}
.MyBasket div#Tickets #TicketColumnOne {float:left;  width:120px; line-height:1.2em;}
.MyBasket div#Tickets #TicketColumnTwo {float:left;  width:190px; line-height:1.2em;}
.MyBasket div#Tickets #TicketColumnThree {float:left; width:50px; line-height:1.2em;}

.MyBasket div#Totals div.Borders {background: url(/Images/Interface/DashedLineBlack.png) top left repeat-x; padding:6px; color:Black; line-height:20px;}
    .MyBasket div#Totals div.Borders label, .MyBasket div.TotalRow label {float:left; font-weight:bold; width:150px;}
    .MyBasket hr.Borders {background: url(/Images/Interface/DashedLineBlack.png) top left repeat-x; height:1px; border:none; clear:both; }
    .MyBasket div.TotalRow {background:#2e2c30; color:White; padding:6px; margin-bottom:5px;}
    .MyBasket div.Actions {position:relative; line-height:1.2em;}
    .MyBasket div.Actions input {position:absolute; right:0px; top:0px;}

div#GiftAid {width:572px; float:left; color:Black;}
    div#GiftAid .Top {padding:10px; float:left; width:552px; background: url(/Images/Interface/Ticketing/Basket/DonationBoxTop.png) top left;}
        div#GiftAid .Top .Left {float:left; width:420px;}
        div#GiftAid .Top .Right {float:right; width:114px; text-align:right;}
    div#GiftAid .Bottom {float:left; width:572px; background: url(/Images/Interface/Ticketing/Basket/DonationBoxTop.png) bottom left; height:6px;}
div#Totals {float:right; width:378px;}
    div#Totals .Top {padding:10px; float:left; width:358px; background: url(/Images/Interface/Ticketing/Basket/DonationBoxTopGrey.png) top left;}
    div#Totals .Bottom {float:left; width:378px; background: url(/Images/Interface/Ticketing/Basket/DonationBoxTopGrey.png) bottom left; height:6px;}
*/
/* upselling */
#UpsellList {float:left; clear:both;  width:960px; margin-top:10px; overflow:hidden;}
.UpsellItem {float:left; position:relative; width:290px; margin:0 14px 14px 0; padding:10px; height:175px; background-repeat:repeat;}
.UpsellPageItem {width:358px; float:right; margin-right:0px; padding:10px;}
.UpsellItem .YellowButton, .Row .Production input[type=submit] {position:absolute; bottom:10px; right:10px; z-index:10;}

/* -------------------------------------------------------------------------------------------------------- */
                                              /* PURCHASE PATH */
/* -------------------------------------------------------------------------------------------------------- */

/* --- timer Warning --- */
#TimerWarning {margin-bottom:10px;}
#TimerWarning p {padding:10px;}

/* --- Progress Indicator --- */
#ProgressIndicator {margin-bottom:10px;}
#ProgressIndicator ol {border-color:#000; list-style-type:none;}
    #ProgressIndicator ol li {position:relative; float:left; height:30px; line-height:30px; text-align:center; font-size:1.2em; margin:0 32px 0 0; padding:0 0 10px 0; text-transform:uppercase; color:#9f741e;}
    #ProgressIndicator ol li:last-child {margin:0;}
    #ProgressIndicator ol li.Current {color:#000;}
    #ProgressIndicator ol li span, #ProgressIndicator ol li.Current span {position:absolute; top:0; right:-20px; display:block; width:9px; height:7px; margin:12px 0 0 0;}
    #ProgressIndicator ol li span {background:transparent url(/images/Interface/RoyalAndDerngate/Progress-Arrows-Off.png) no-repeat;}
    #ProgressIndicator ol li.Current span {background:transparent url(/images/Interface/RoyalAndDerngate/Progress-Arrows-On.png) no-repeat;}

/* --- Review Order --- */
.ReviewOrder {float:left; width:613px; position:relative;}
#PaymentDetails fieldset.defaultform {width:611px;}
#PaymentDetails fieldset.defaultform li.small {width:198px;}
