/*-------------------------------------------------------
 PAGE PANEL ALPHA - intentionaly left blank
---------------------------------------------------------*/

/*-------------------------------------------------------
 PAGE PANEL BETA - landing page panels
---------------------------------------------------------*/

.panel.style-beta { width: 33%; float: left; min-height: 200px; margin-top: 15px; }
.panel.style-beta .panel-header { min-height: 57px; }
.panel.style-beta h2 { font-size: 1.7em; font-weight: 500; padding: 10px 20px; margin-bottom: 0; }
.panel.style-beta .panel-body { margin: 10px 20px; padding-bottom: 20px; border-bottom: 1px dashed #adadad; }

/*-------------------------------------------------------
 PAGE PANEL GAMMA - as used for related content
---------------------------------------------------------*/
.panel.style-gamma .panel-header h2 { border-bottom: 2px solid #161e2c; padding-bottom: 12px; font-size: 2em; margin-top: 15px; }
.panel.style-gamma .lister-lean li { margin-bottom: 20px; }
.panel.style-gamma .lister-lean .item-card a:hover { text-decoration: none; }
.panel.style-gamma .lister-lean .item-ttl { display: block; clear: both; font-weight: 500; font-size: 1.05em; }
.panel.style-gamma .lister-lean a .item-txt { color: #444; }

/*-------------------------------------------------------
 PAGE PANEL DELTA - grey background panel
---------------------------------------------------------*/
.panel.style-delta { background: #eee; padding: 30px; margin: 30px 0; }
.panel.style-delta h2 { font-size: 2.05em; font-weight: bold; }

/*-------------------------------------------------------
 PAGE PANEL EPSILON - centre aligned panels, can be used as replacement for home page tab pan
---------------------------------------------------------*/
/*please note **extra styles in home variant to override hp h2 styles*/
.panel.style-epsilon { margin-top: 40px; margin-bottom: 10px; width: 33%; float: left; text-align: center; min-height: 290px;  }
.panel.style-epsilon h2 { font-size: 1.4em; margin-top: 20px; }
.panel.style-epsilon .pel-o { padding: 0 20px; }
.panel.style-epsilon .panel-body, .panel.style-epsilon .panel-body a { padding: 0 10px; font-size: 0.95em; color: #1a4489; }
.panel.style-epsilon .panel-body { line-height: 1.3em; border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 5px; }

/*-------------------------------------------------------
 PAGE PANEL zeta - centre aligned panels, can be used as replacement for home page tab pan
---------------------------------------------------------*/
/*please note **extra styles in home variant to override hp h2 styles*/
.panel.style-zeta { margin-top: 5px; margin-bottom: 5px; width: 33%; float: left; /*text-align: center;*/ }
.panel.style-zeta h2 { font-size: 1.4em; margin-top: 20px; }
.panel.style-zeta .pel-o { padding: 0 20px; }
.panel.style-zeta .panel-body, .panel.style-zeta .panel-body a { padding: 0 10px; font-size: 0.95em; color: #444; }
.panel.style-zeta .panel-body { line-height: 1.3em; border-bottom: 1px solid #ccc; padding-bottom: 20px; padding-left: 0; margin-bottom: 5px; }

/*-------------------------------------------------------
 PAGE PANEL OMEGA - beach background as home search
---------------------------------------------------------*/
.panel.style-omega { background: #32558e url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/bg-beach.png") repeat center; }
.panel.style-omega .panel-body { max-width: 1220px; margin: auto; padding-top: 180px; padding-bottom: 30px; }
.panel.style-omega .panel-body .bdi { max-width: 700px; margin: auto; -webkit-box-shadow: 5px 5px 5px -3px rgba(0,0,0,0.31);
-moz-box-shadow: 5px 5px 5px -3px rgba(0,0,0,0.31);
box-shadow: 5px 5px 5px -3px rgba(0,0,0,0.31); }
.panel.style-omega .question { display: none; }
.panel.style-omega .element { margin-bottom: 0; }
.panel.style-omega .page-element-inner { width: 100%;  }
.panel.style-omega .oDataFormButtonContainer { width: 20%; float: right; clear: none !important; margin: 0 !important; /*max-width: 137px;*/ }
.panel.style-omega .oDataFormButton { width: 140px; }
.panel.style-omega .oDataFormButtonContainer .buttons { clear: none !important;  }
.panel.style-omega .oDataFormButtonContainer input { background: #32558e url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/ico-search.png") no-repeat left 18px center; cursor: pointer; color: #fff; padding: 21px 30px 21px 50px !important; font-weight: 500; font-size: 1.25em; }
.panel.style-omega .oDataFormFieldset { width: 80%; float: left; }
.panel.style-omega .oDataFormFieldset .fields { background: #fff; }
.panel.style-omega .oDataFormFieldset .fields input { border: 0 !important; padding: 22.75px; }
#-ux-content .panel.style-omega .page-element-inner .oDataFormButtonContainer input { margin-right: 0 !important; }

/*-------------------------------------------------------
 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: 1px solid #ccc; padding: 10px;  }

/*-------------------------------------------------------
 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; margin-right: 0; }
.oAccordionPanels.tabbed-zone-alpha .tabbed-zone-inner { width: 100%; overflow: hidden; }
.oAccordionPanels.tabbed-zone-alpha .tab-header-outer { padding: 15px 30px; border: 0; background: #e6e6e6; clear: both; display: block; overflow: hidden; margin-top: 4px; font-size: 1.2em; }
.oAccordionPanels.tabbed-zone-alpha .expanded .tab-header-outer { background: #1a4489; }
.oAccordionPanels.tabbed-zone-alpha .expanded .tab-header-outer a { color: #fff; }
.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: left; }
.oAccordionPanels.tabbed-zone-alpha .tab-header-inner ul li.header { padding: 0; margin: 0; width: 80%; }
.oAccordionPanels.tabbed-zone-alpha .tab-header-inner ul li.expander { float: right; padding: 0 0 0; width: 20%; text-indent: -9991em; background: url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/arrow-accrd-expnd.png") no-repeat right center; }
.oAccordionPanels.tabbed-zone-alpha .tab-header-inner ul li.expanded { background: none; }
.oAccordionPanels.tabbed-zone-alpha .expanded .tab-header-inner ul li.expander { background: url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/arrow-accrd-cllps.png") no-repeat right center; }
.oAccordionPanels.tabbed-zone-alpha ul li.header h2 { font-size: 1em !important; font-weight: bold; padding: 0; margin: 9px 8px 10px; }
.oAccordionPanels.tabbed-zone-alpha ul li.header h2 a.panel-event:link, .oAccordionPanels.tabbed-zone-alpha ul li.header h2 a.panel-event:visited { padding: 0; margin: 0; color: #00A0DE; font-weight: normal; }
.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; }
.oAccordionPanels.tabbed-zone-alpha .tab-body-inner .lister-lean ol { margin: 0; padding: 0; }
.oAccordionPanels.tabbed-zone-alpha .tab-body-inner .lister-lean li { padding: 12px 15px; }
.oAccordionPanels.tabbed-zone-alpha .tab-body-inner .lister-lean li a { color: #444; }

/* NEW TABS - as used on home page */
.mode-live .tabs-style-delta { /*position: relative;*/ }
/* three to a row */
.mode-live .tabs-style-delta .item-tab { width: 31%; display: block; float: left; margin: 0 1%; border-top: 1px solid #ccc; }
.mode-live .tabrow1 .tabs-style-delta .item-tab { border-top: 0; }
/* hidden */
.mode-live .tabs-style-delta .item-tab .tabpanel { display: none; width: 100%; position: absolute; left: 0; right: 0; background: #3c485c; color: #fff; z-index: 1; }
/*formatting*/
.mode-live .tabs-style-delta ul { padding: 0; }
.mode-live .tabs-style-delta ul li { list-style-type: none; margin-bottom: 10px; }
.mode-live .tabs-style-delta .item-tab .tabpanel a { color: #fff; }
.mode-live .tabs-style-delta .item-tab .tabpanel-i { max-width: 1220px; margin: auto; }
.mode-live .tabs-style-delta .item-tab .tabpanel .contenteditor { padding: 20px; }
.mode-live .tabs-style-delta .item-tab .tabpanel .contenteditor ul li a { padding: 7px; display: block; border: 2px solid #fff; }
.mode-live .tabs-style-delta .item-tab .tabpanel .contenteditor ul li a:after { content: "»"; margin-left: 8px; }
/* need a set height */ 
.mode-live .tabs-style-delta .item-tab .tab-ttl { min-height: 80px; text-align: center; overflow: Hidden; margin-top: 50px; padding-top: 18px; }
.mode-live .tabs-style-delta .item-tab .tab-ttl a { margin: 40px 0 0; display: block; font-size: 1.7em; color: #444; font-weight: 500; }
/* need a set height */
.mode-live .tabs-style-delta .item-tab .summary { height: 100px; text-align: center; line-height: 1.1em; }
/* add 'more' button 
.mode-live .tabs-style-delta .item-tab .summary:after { content:"More »"; background: #1a4489; color: #fff; display: block; width: 50%; margin: 1em auto; padding: 15px .5em; font-size: 1.2em; cursor: pointer; }*/
/* set a height when tabs are open to push other content down the page */
.mode-live .tabs-style-delta .selected-tab { margin-bottom: 250px; }
.mode-live .tabs-style-delta .selected-tab .tabpanel { display: block; } 

/*target individual rows and tabs for icons*/
.tabrow1 .tabs-style-delta .item-tab .tab-ttl { margin-top: 10px; }
/*tab icons*/
.tabrow1 .tabs-style-delta li.tab-001 .tab-ttl { background: url("/_resources/assets/inline/full/0/35405.png") top center no-repeat!important; }
.tabrow1 .tabs-style-delta li.tab-002 .tab-ttl { background: url("/_resources/assets/inline/full/0/35406.png") top center no-repeat!important; }
.tabrow1 .tabs-style-delta li.tab-003 .tab-ttl { background: url("/_resources/assets/inline/full/0/35410.png") top center no-repeat!important; }
.tabrow2 .tabs-style-delta li.tab-001 .tab-ttl { background: url("/_resources/assets/inline/full/0/35407.png") top center no-repeat!important; }
.tabrow2 .tabs-style-delta li.tab-002 .tab-ttl { background: url("/_resources/assets/inline/full/0/35408.png") top center no-repeat!important; }
.tabrow2 .tabs-style-delta li.tab-003 .tab-ttl { background: url("/_resources/assets/inline/full/0/35402.png") top center no-repeat!important; }
.tabrow3 .tabs-style-delta li.tab-001 .tab-ttl { background: url("/_resources/assets/inline/full/0/35404.png") top center no-repeat!important; }
.tabrow3 .tabs-style-delta li.tab-002 .tab-ttl { background: url("/_resources/assets/inline/full/0/35409.png") top center no-repeat!important; }
.tabrow3 .tabs-style-delta li.tab-003 .tab-ttl { background: url("/_resources/assets/inline/full/0/35403.png") top center no-repeat!important; }

/*target individual tabs for panel background position*/
.tabs-style-delta .item-tab.tab-001 .tabpanel .tabpanel-i { background: transparent url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/arrow-tabwht.png") top left 175px no-repeat!important; }
.tabs-style-delta .item-tab.tab-002 .tabpanel .tabpanel-i { background: transparent url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/arrow-tabwht.png") top center no-repeat!important; }
.tabs-style-delta .item-tab.tab-003 .tabpanel .tabpanel-i { background: transparent url("/EasySiteWeb/EasySite/StyleData/BOP19-master/Images/arrow-tabwht.png") top right 195px no-repeat!important; }


/* We can use a combination of tab container ID and tab number to give different icons to each tab 
.mode-live #tabs-2 .tab-003 .tab-ttl,
.mode-live #tabs-2 .tab-005 .tab-ttl { background-image: url("/EasySiteWeb/EasySite/StyleData/starter_master_7/Images/arrow-link-bullet.png"); }
.mode-live #tabs-3 .tab-003 .tab-ttl,
.mode-live #tabs-3 .tab-002 .tab-ttl { background-image: url("/EasySiteWeb/EasySite/StyleData/starter_master_7/Images/modules/tabs-expand-arrow.gif"); }*/

/* this works (adn would allow for just one tab container, rather than three), but is far too complex
 .mode-live .tab-selected-tab-001 .tab-004, .mode-live .tab-selected-tab-002 .tab-004, .mode-live .tab-selected-tab-003 .tab-004 { margin-top: 250px; } */