﻿/*-------------------------------------------------------
 PAGE PANEL ALPHA - plain
---------------------------------------------------------*/
.panel.style-alpha {  }
.panel.style-alpha .panel-header {  }
.panel.style-alpha .panel-body {  }
.panel.style-alpha h2 {  }

/*-------------------------------------------------------
 PAGE PANEL BETA - with grey corners as on hp
---------------------------------------------------------*/
.panel.style-beta { background: url("/EasySiteWeb/EasySite/StyleData/UKTheatres_master/Images/bg-pan-beta-top.png") top left no-repeat;  padding: 30px 60px; margin: 60px 5px; }
.panel.style-beta .pel-o { }
.panel.style-beta .panel-header {  }
.panel.style-beta .panel-body { background: url("/EasySiteWeb/EasySite/StyleData/UKTheatres_master/Images/bg-pan-beta-base.png") bottom right no-repeat; padding: 0 30px 35px 0; min-height: 460px; }
.panel.style-beta .fields { margin: 0 auto; }
.panel.style-beta .oLoginTitle, .panel.style-beta .oLoginPanel, .panel.style-beta .oLoginContent { border: 0; padding: 0; margin: 0; color: #aaaaaa; background: none; width: 100%; }
.panel.style-beta .oLoginPanel { margin-top: 20px; }
.panel.style-beta .oLoginTitle { color: #e54125; font-size: 1.5em; padding: 15px 0; }
.panel.style-beta .oLoginPanel input { padding: 20px 3px; border: 1px solid #a7a7a7; width: 97% !important; margin-bottom: 10px; }
.panel.style-beta .oLoginTitle, .panel.style-beta .oDataFormLegend, .panel.style-beta legend { display: none !important; }

.panel.style-beta ul li { list-style-type: none; background: url("/EasySiteWeb/EasySite/StyleData/UKTheatres_master/Images/bullet.png") top 7px left no-repeat; padding-left: 30px; margin: 25px 0; }

.panel.style-beta h2 { margin: 10px 0 25px; }
.panel.style-beta .orngbutton { padding-top: 25px; }

/*-------------------------------------------------------
 PAGE PANEL GAMMA - plain with orange headers
---------------------------------------------------------*/
.panel.style-gamma { padding: 45px 15px 65px 15px; }
.panel.style-gamma h2 { color: #e54125; font-size: 2.9em; }
.panel.style-gamma .panel-body .justify-centre .asset-width { margin: 0; }


/*-------------------------------------------------------
 PAGE PANEL DELTA - with grey seps
---------------------------------------------------------*/
.panel.style-delta { border-bottom: 1px solid #dfdfdf; padding-bottom: 7px; font-family: "Relay Comp"; font-style: normal; font-weight: 900; letter-spacing: 0.03em; font-size: 1.6em; }
.panel.style-delta .panel-body { border-bottom: 1px solid #dfdfdf; padding: 20px 5px 15px; font-size: 1.55em; line-height: 1.1em; padding: 15px 0; }
.panel.style-delta  .justify-left { margin-left: 0; margin-right: 25px; }

/*-------------------------------------------------------
 PAGE PANEL IOTA - for large images that require text overlaid
---------------------------------------------------------*/
.panel.style-iota  {  max-width: 1028px; margin: 0 auto; position: relative; margin-bottom: 40px; }
.panel.style-iota .contenteditor { position: absolute; top: 50px; left: 0; width: 65%; background: none; padding: 0; color: #333; }
.panel.style-iota .contenteditor h2 { color: #e54125; font-size: 2.5em; display: inline-block; }
.panel.style-iota .contenteditor h2, .panel.style-iota .contenteditor p { margin: 10px 0; background: #fff; padding: 10px 30px; }
.panel.style-iota .orngbutton { display: inline-block; font-size: 1.2em; max-width: 200px; margin-left: 30px; }
.panel.style-iota .orngbutton a { background-image: none; padding: 20px 40px; }

/*to move the text off image in edit mode*/
.edit-mode .panel.style-iota .contenteditor { position: relative; top: 0; }

.panel.style-iota { width: 100%; max-width: 1028px; margin: 0 auto; }

.panel.style-iota .asset-inline { overflow: hidden; }
.panel.style-iota .asset { position: relative; height: auto; min-height: 370px; }
.short .panel.style-iota .asset { height: 180px; }
.panel.style-iota .asset-width { width: 100% !important; }
.panel.style-iota img { position: absolute; top: 0; }

/* floating interferes with the crop */
.panel.style-iota .justify-left, .panel.style-iota .justify-right { float: none; }

.panel.style-iota .justify-centre img { left: 0; }
.panel.style-iota .justify-left img { left: 0; }
.panel.style-iota .justify-right img { right: 0; }

/*-------------------------------------------------------
 PAGE PANEL PSI - used just to target the overlaid read more button on SOLT promo
---------------------------------------------------------*/
.panel.style-psi { position: absolute; top: 280px; width: 100%; }
.panel.style-psi .contenteditor { margin: 0 auto; max-width: 580px; font-family: "Relay Comp"; font-style: normal; font-weight: 900; letter-spacing: 0.03em; }
.panel.style-psi .contenteditor .purpbutton a { max-width: 180px; border: 1px solid #fff; font-size: 1.65em; }

body.x-body .panel.style-psi { position: relative; top: 0; }

/*-------------------------------------------------------
 PAGE PANEL OMEGA - used for upcoming events wrapper on home
---------------------------------------------------------*/
.panel.style-omega { background: #303030 url("/EasySiteWeb/EasySite/StyleData/UKTheatres_master/Images/bg-events.png") top center no-repeat; padding-top: 40px; }
.panel.style-omega .panel-header { max-width: 550px; margin: 0 auto; }
.panel.style-omega .panel-body {  }
.panel.style-omega h2 { color: #fff; text-align: center; font-size: 4em; background: url("/EasySiteWeb/EasySite/StyleData/UKTheatres_master/Images/bg-omegah2.png") center left no-repeat; min-height: 50px; line-height: 1.1em; letter-spacing: 0.045em; }

/*-------------------------------------------------------
 TAB PANELS DEFAULT
---------------------------------------------------------*/
.tabbed-zone-outer { clear: both; margin-bottom: 1em; }
.tabs-menu-outer ul, .tabs-menu-outer ul li { list-style-type: none; padding: 0; margin: 0;  }
.tabs-menu-outer ul li, .tabs-menu-outer ul li a, .tabs-menu-outer ul li span { display: block; }
.tabs-menu-outer ul li { float: left; width: 20%; text-align: center; }
.tabs-menu-outer ul li a:link, .tabs-menu-outer ul li a:visited { text-decoration: none; border: 1px solid #ccc; border-bottom: 0; margin-right: 5px; padding: 5px; }
.tabs-menu-outer ul li.tab-selected a:link, .tabs-menu-outer ul li.tab-selected a:visited { border: 1px solid #333; border-bottom: 0; background: #f7f7f7; }
.tabs-body-outer { clear: both; width: auto; border: 0; padding: 10px;  }

/*-------------------------------------------------------
TABS PANELS DELTA - as used for home promo 
----------------------------------------------------------*/
.tabbed-zone-delta { /*max-width: 100%;*/ max-width: 1900px; margin: 0 auto; }
.tabbed-zone-delta .tabbed-zone-inner {margin: 0; position: relative; }
.tabbed-zone-delta .tabbed-zone-body {  }
/*to crop the large images*/
.tabbed-zone-delta .tabs-body-inner .asset-inline { overflow: hidden; }
.tabbed-zone-delta .tabs-body-inner .asset-width { overflow: hidden; position: relative; height: 725px; }
.tabbed-zone-delta .tabs-body-inner .asset { /*height: auto; position: relative;*/ overflow: hidden; }
.tabbed-zone-delta .tabs-body-inner .asset-width img { left: 0; position: absolute; }

.tabbed-zone-delta .tabs-menu-outer ul { position: absolute; top: 200px; left: 80px; z-index: 2; }
.tabbed-zone-delta .tabs-menu-outer ul, .tabs-menu-outer ul li { list-style-type: none; padding: 0; margin: 0; }

.tabbed-zone-delta .tabs-menu-outer ul li { float: none; text-align: center; margin: 0; padding: 0; }
.tabbed-zone-delta .tabs-menu-outer ul li h2 {text-transform: uppercase; font-size: 1.25em; border: 0; margin-top: 15px;}
.tabbed-zone-delta .tabs-menu-outer ul li a:link, .tabs-menu-outer ul li a:visited { text-decoration: none; font-size: 0.8em; padding: 0; margin: 25px 9px; cursor: pointer; border-radius: 30px; text-indent: -999em; border: 3px solid #fff; background: #fff; -webkit-box-shadow: 0px 0px 6px 0px rgba(69,68,69,0.31); -moz-box-shadow: 0px 0px 6px 0px rgba(69,68,69,0.31); box-shadow: 0px 0px 6px 0px rgba(69,68,69,0.31); height: 24px; width: 24px; }
.tabbed-zone-delta .tabs-menu-outer ul li.tab-selected a:link, .tabbed-zone-delta .tabs-menu-outer ul li.tab-selected a:visited { background: #e54125; color: #000; }
.tabbed-zone-delta .tabs-body-outer { clear: both; width: auto; background: none; padding: 0; margin-right: 0; }

/*to overlay the white text onto the promo image*/
.tabtext-overlay { position: absolute; top: 100px; width: 100%; margin: 0 auto; z-index: 1; }
.tabtext-overlay img { margin: 0 auto; width: auto; }
/*to make sure the panel image formatting doesn't move white text*/
.tabbed-zone-delta .tabs-body-inner .tabtext-overlay  .asset-inline { overflow: visible; }
.tabbed-zone-delta .tabs-body-inner .tabtext-overlay .asset-width img { left: auto; position: relative; }

/*to sit it sep in edit mode*/
body.x-body .tabtext-overlay  { position: relative; top: 0; }


/*-------------------------------------------------------
 ACCORDION TAB PANELS ALPHA
---------------------------------------------------------*/
/* overwrite ui.css */
.oAccordionPanels.tabbed-zone-alpha .ui-icon { width: auto; height: auto; background-image: none; }
.oAccordionPanels.tabbed-zone-alpha .ui-state-default, .oAccordionPanels.tabbed-zone-alpha .ui-widget-content .ui-state-default { background: none; }

.oAccordionPanels.tabbed-zone-alpha { color: #000; border: 0; margin-top: 20px; }
.oAccordionPanels.tabbed-zone-alpha .tabbed-zone-inner { width: 100%; overflow: hidden; }
.oAccordionPanels.tabbed-zone-alpha .tab-outer { margin-bottom: 15px; }
.oAccordionPanels.tabbed-zone-alpha .tab-header-outer { padding: 15px 10px; border: 3px solid #e54125; background: #fff; border-radius: 3px 3px 0 0; clear: both; display: block; overflow: hidden; }
.oAccordionPanels.tabbed-zone-alpha .tab-header-inner ul { padding: 0; margin: 0; }
.oAccordionPanels.tabbed-zone-alpha .tab-header-inner ul li { display: block; list-style-type: none; padding: 0; margin: 0; clear: none; float: right; }
.oAccordionPanels.tabbed-zone-alpha .tab-header-inner ul li.header { padding: 0; margin: 0; background: none; width: 90%; font-family: "Relay Comp"; font-style: normal; font-weight: 900; letter-spacing: 0.03em; }
.oAccordionPanels.tabbed-zone-alpha .tab-header-inner ul li.expander { float: left; padding: 0 0 0; width: 5%; text-indent: -9991em; background: url("/EasySiteWeb/EasySite/StyleData/UKTheatres_master/Images/arrw-altabs-expd.png") no-repeat right center; }
.oAccordionPanels.tabbed-zone-alpha .expanded .tab-header-outer { background: #e54125; }
.oAccordionPanels.tabbed-zone-alpha .expanded .tab-body-outer { background: #f4f4f4; padding: 30px; }
.oAccordionPanels.tabbed-zone-alpha .expanded .tab-header-inner ul li.expander { background: url("/EasySiteWeb/EasySite/StyleData/UKTheatres_master/Images/arrw-altabs-colps.png") no-repeat right center; }
.oAccordionPanels.tabbed-zone-alpha ul li.header { font-size: 1.2em !important; font-weight: bold; padding: 0; margin: 9px 8px 10px; }
.oAccordionPanels.tabbed-zone-alpha ul li.header a.panel-event:link, .oAccordionPanels.tabbed-zone-alpha ul li.header a.panel-event:visited { padding: 0; margin: 0; color: #e54125; font-size: 1.45em; }
.oAccordionPanels.tabbed-zone-alpha .expanded ul li.header a.panel-event:link, .oAccordionPanels.tabbed-zone-alpha .expanded ul li.header a.panel-event:visited { color: #fff; }
.oAccordionPanels.tabbed-zone-alpha .tab-body-outer { padding: 15px; height: auto !important; border-width: 0; clear: both; }
.oAccordionPanels.tabbed-zone-alpha .tab-body-inner .oAssetLeft { padding: 5px 10px; margin: 0; }

