/* RWD */

/*------------------------------------
   leave room for page navigator bar
--------------------------------------*/
@media only screen and (max-width: 1300px) {

/* leave room for page navigator bar */
.logged-in #sx-extras { padding: 0 0 0 30px; }
.logged-in #sx-body { padding: 0 0 0 30px; }

}

@media only screen and (max-width: 1279px) 
{

/*home promo*/
.lister-carousel.lister-alpha .article-asset { min-width: auto; width: 60%; }

/*large panel/lister images which need to resize proportionally from the start*/
.lister-list.style-theta .item-image img { width: 100% !important; height: auto !important; }
/*add min-height to panels*/
.lister-list.style-theta .item-summary { min-height: 95px; }

/* mailing list
#sx-mailing .mailing-right, #sx-mailing .mailing-left { height: 90px; }
#sx-mailing { margin-right: 25px; } */
    
}

/*------------------------------------
   smaller desktop / tablet landscape
--------------------------------------*/
@media only screen and (max-width: 1220px) 
{
    
/* resize all wrappers */
.sx-mo, .sx-bdo, .sx-bdi, #sx-extras .sx-eo, .panel.style-beta > .pel-o { width: 100%; }

.sx-mi, #sx-extras .sx-ei { width: auto; padding: 0 30px; }
.sx-bdi { box-sizing: border-box; padding: 0 30px 20px; }

/* header */
#sx-search { width: 35%; }

/* columns beta */
.columns-beta { width: 100%; }
.columns-beta .columns-inner { padding: 0 25px; }

/* style gamma - 3 columns on homepage */
.columns-gamma { width: 100%; }
.columns-gamma .columns-inner { padding: 0 25px; }
.columns-gamma .column-alpha .column-inner { margin: 0 46px 0 0; }
.columns-gamma .column-beta .column-inner { margin: 0 23px; }
.columns-gamma .column-gamma .column-inner { margin: 0 0 0 46px; }

/* columns delta */
.columns-delta .columns-inner { width: 100%; }
.columns-delta .columns-body { padding: 23px 25px; width: auto; }

/* panel beta */
.panel.style-beta .panel-body { padding-top: 15%; }

/* homepage tabbed panels */
.element-tabs-container-alpha-outer { width: 100%; }
.element-tabs-container-alpha-outer .contenteditor .moreservicesbutton { margin: 20px 25px; }
.element-tabs-container-alpha-outer .contenteditor .fewerservicesbutton { margin: 20px 25px; }

/* tabbed panels epsilon */
.tabbed-zone-epsilon .tabs-menu-outer ul li a:link, .tabbed-zone-epsilon .tabs-menu-outer ul li a:visited { font-size: 1.25em; padding: 8px 15px 11px; }

/* resize large image assets using structural element container with custom classname */
.img-lg .asset-inline { margin: auto; float: none; }
.img-lg .asset-inline .asset-width { width: 100% !important; }
.img-lg img { max-width: 100% !important; height: auto !important; width: auto !important; }

/* desktop layout doesn't work when the page shrinks */
.events.view-list .event-list li .image-and-details .date { float: left; }

.panel.style-zeta .panel-header h2 { padding-right: 20px }

}

/*------------------------------------
   very small desktop / tablet portrait 
--------------------------------------*/
@media screen and (max-width: 1024px) {

/* ensure there is sufficient width for long words in h2s in columns */
h2 { font-size: 1.6em; }

/* Asset manager */
/* either these two columns or the side nav need to go onto separate lines once the tabular data is being cut off. Will vary according to other Design/RWD requirements */
.asset-manager .col-alpha, .asset-manager .col-beta { float: none; display: block; padding: 5px 0; width: 100%; }

/* resize large videos 
(using custom class 'videos' with additional class to specify aspect ratio: v16-9 / v4-3
Here we have left the default as 16:9 )
asset-code targets code asset videos
asset-inline targets streaming media videos (which also uses additional wrapper with inline widths, which need overwriting */
.videos .asset-code, .videos .asset-inline .asset-width { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0 !important; width: 100% !important; }
.videos .asset-code iframe, .videos .asset-inline .asset > div:first-child, .videos .asset-inline iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
/* for 16:9 aspect ratio */
.videos.v16-9 .asset-code, .videos.v16-9 .asset-inline .asset-width { padding-bottom: 56.25%; }
/* for 4:3 aspect ratio */
.videos.v4-3 .asset-code, .videos.v4-3 .asset-inline .asset-width { padding-bottom: 75%; }

/* header */
#sx-search { width: 40%; }

/* footer */
#footer-left, #footer-centre { width: 33.3%; }
#footer-links li { margin: 0 20px; }

/* columns alpha */
.columns-alpha .column-alpha .column-inner { margin-right: 15px; }
.columns-alpha .column-beta .column-inner { margin-left: 15px; }
/* knock margins off when nested */
.columns-alpha .columns-alpha .column-alpha .column-inner { margin: 0; }
.columns-alpha .columns-alpha .column-beta .column-inner { margin: 0; }

/* columns beta */
.columns-beta { margin: 20px 0 30px; }

/* columns gamma */
.columns-gamma .column-alpha .column-inner { margin: 0 30px 0 0; }
.columns-gamma .column-beta .column-inner { margin: 0 15px; }
.columns-gamma .column-gamma .column-inner { margin: 0 0 0 30px; }

/* columns epsilon */
.columns-epsilon .column-alpha .column-inner { margin: 0 !important; }
.columns-epsilon .column-beta .column-inner { margin: 0 !important; }

/* panel beta */
.panel.style-beta { height: 300px; background-position: center; }
/* negate the rounded input corners on ios */
.panel.style-beta .oSearchInline { background: #fff; display: block; }

/* panel gamma */
.panel.style-gamma .contenteditor a { font-size: 1em; padding-top: 80px; padding-right: 0; padding-left: 0; }

/* panel delta */
.panel.style-delta { min-height: 280px; }
.panel.style-delta .panel-header h2 { min-height: 52px; }

/* pagelister beta */
.lister.style-beta li.oBoxItem { font-size: 1.25em; }
.lister.style-beta li.oBoxItem .item-body-outer { padding: 25px 20px 25px 75px; background-position: 20px 25px; min-height: 50px; }

/* pagelister gamma */
.lister.style-gamma.show-images li.oBoxItem { margin-bottom: 20px; }
.lister.style-gamma.show-images .item-body-outer { margin-left: 0; clear: both; padding-top: 10px; }

/* events */
.events.view-list .search-events fieldset { width: 84%; }
.events.view-record.style-alpha .column-inner img { max-width: 100% !important;
height: auto !important; }

/* tabbed panels delta */
.tabbed-zone-delta .tabs-menu-outer ul li { width: 100%; }
.tabbed-zone-delta .tabs-menu-outer ul li a:link, .tabbed-zone-delta .tabs-menu-outer ul li a:visited { margin: 0 0 3px; border-bottom: 1px solid #79368e; min-height: 0; }
.tabbed-zone-delta .tabs-menu-outer ul li a:hover, .tabbed-zone-delta .tabs-menu-outer ul li a:active, .tabbed-zone-delta .tabs-menu-outer ul li a:focus { border-bottom: 1px solid #d2d2d2; }
.tabbed-zone-delta .tabs-menu-outer ul li.tab-selected a:link, .tabbed-zone-delta .tabs-menu-outer ul li.tab-selected a:visited { border-bottom: 1px solid #d2d2d2; }
.tabbed-zone-delta .tabs-body-outer { border-top: 0; padding-top: 25px; }

/* tabbed panels epsilon */
.tabbed-zone-epsilon .tabs-menu-outer ul li a:link, .tabbed-zone-epsilon .tabs-menu-outer ul li a:visited { font-size: 1.125em; padding: 8px 10px 11px; }
.tabs-body-outer { padding: 60px 0 45px; }

/* LEGEND (forms, search, etc) - ensure long legends not cut off on mobile devices */
#-ux-content legend, #-ux-content .oDataFormLegend { display: inline; }
/* except on home page search */
#-ux-content .oSearchInline legend, #-ux-content .cludo-home-page .oSearchInline legend { display: none; }

}

@media screen and (max-width: 1000px) {

.panel.style-alpha img, .panel.style-alpha .asset-inline .asset-width { width: auto !important; }

/*home promo - change layout to image above text*/
.lister-carousel.lister-alpha .page-element-inner { min-height: 750px; position: relative; background: #79368e; font-size: 0.9em; }
.lister-carousel.lister-alpha .article-asset { float: none; margin: 0; height: auto; max-height: 100%; width: 100%; overflow: hidden; }
.lister-carousel.lister-alpha .article-asset img { width: 95% !important; height: auto !important; margin-left: 0; }
.lister-carousel.lister-alpha .article-content { padding-right: 50px; }
.lister-carousel.lister-alpha .pagination-outer { position: absolute; bottom: 10px; right: 10px; }
.lister-carousel.lister-alpha .article-link { bottom: 50px; }

/*reduce spacing on for landing page red box listers*/
.lister-list.style-theta .item-container { margin: 15px; }

/* panel zeta */
.panel.style-zeta .panel-header { padding-right: 10px; }
.panel.style-zeta .panel-header h2 { font-size: 1.5em; }
.panel.style-zeta .panel-body { font-size: 0.95em; }

/* mailing list
#sx-mailing { width: 50%; float: right; max-width: 360px; }	
#sx-mailing .mailing-right, #sx-mailing .mailing-left { height: auto; } */

/*resizing panel content*/
/*HP grey overlaid titles*/
.panel.style-eta { margin: 0 5px; padding: 10px 0 10px 10px; }

/*home events search*/
.eventwrap .lister-dropdown select { width: 80%; }

/* forms: prevent checkbox labels wrapping */
.ClientAreaContainer .checklist-items li label, .ClientAreaContainer .checklist li label, .cludo-home-page .checklist-items li label, .cludo-home-page .checklist li label  { max-width: 80%; }

}

	
@media screen and (max-width: 880px) 
{
    
/*home page promo*/	
.lister-carousel.lister-alpha .page-element-inner { min-height: 650px; }
.lister-carousel.lister-alpha .article-asset { margin: 0; /*max-height: 290px;*/ min-height: auto; }
.lister-carousel.lister-alpha .article-asset img { height: 100% !important; width: auto; /*margin-left: -13%; */}
.lister-carousel.lister-alpha .body-outer { min-height: 260px; }
.lister-carousel.lister-alpha .article-content { min-height: 170px; padding: 20px; font-weight: 300; font-size: 0.9em; }
.lister-carousel.lister-alpha .article-content .title { font-size: 1.95em; font-weight: 400; margin-bottom: 10px; }
.lister-carousel.lister-alpha .pagination-outer { padding: 0 20px; }
.lister-carousel.lister-alpha .pagination-outer a:link, .lister-carousel.lister-alpha .pagination-outer a:visited { height: 25px; width: 25px; }
.lister-carousel.lister-alpha .article-link a { margin-left: 20px; }
.lister-carousel.lister-alpha #start-stop { top: 0;  }

/* lister zeta */
.lister-list.style-zeta.show-images .item-title { bottom: -15px; }

/*standard landing page red box lister to two across*/
.lister-list.style-theta li.oBoxItem { width: 50% !important; }
.lister-list.style-theta li.oBoxItem .item-container { margin: 15px 10px; }
.lister-list.style-theta .item-summary { padding: 15px; }

.columns-omega { margin: 20px 0; min-height: 240px; }

/*event search*/
.eventwrap .contenteditor h2 { padding-bottom: 25px; }
.eventwrap .contenteditor { min-height: auto; width: 100%; margin-top: 20px; }
.eventwrap .columns-alpha { width: 99%; margin-top: 0; margin-bottom: 40px; border-left-width: 1px; }
.eventwrap .columns-alpha .columns-inner { padding: 0 10px 0 0; }

/* TAB PANELS THETA (delta on theatres) */
.tabbed-zone-theta .tabs-menu-outer ul li { width: 33%; }

}

/*------------------------------------
   tablet portrait 
--------------------------------------*/
@media screen and (max-width: 820px) {

/* header */
#sx-search { margin-top: 35px; }

/* cookie consent */
body .cookie-optin .checkbox { margin-left: 0; }

/* navigation */
.custom-menu-sx-tnv { width: 100%; }
#sx-content { width: 100%; }
#sx-nav { width: 97%; }
    
/* hide launcher and top ux bar
.launcher { display: none; }
body #ux-bar { display: none; }
body { padding: 0 !important; } */
body #ux-bar { min-width: 90% !important; }

/* footer */
#footer-links li { margin: 0 15px; }

/* columns beta */
.columns-beta { margin: 10px auto 5px; }
.columns-beta .column-outer { width: 33.3% !important; }
.columns-beta .column-inner { margin: 0 6px 12px; }
.columns-beta .column-alpha .column-inner { margin-left: 0; }
.columns-beta .column-gamma .column-inner { margin-right: 0; }
.columns-beta .column-delta .column-inner { margin-left: 0; }
.columns-beta .column-zeta .column-inner { margin-right: 0; }

/* columns gamma */
.columns-gamma .column-alpha .column-inner { margin: 0 8px 0 0; }
.columns-gamma .column-beta .column-inner { margin: 0 4px; }
.columns-gamma .column-gamma .column-inner { margin: 0 0 0 8px; }

/* columns delta */
.columns-delta .column-outer { width: 100% !important; }
.columns-delta .column-alpha .column-inner { margin: 0 0 20px; }
.columns-delta .column-beta .column-inner { margin: 0; }

/* panel beta */
.panel.style-beta { height: 250px; }
.panel.style-beta .panel-body { padding: 15% 19% 0; }
.oSearchInline { height: 70px; }
.ClientAreaContainer .oSearchInline .answer input.textbox, .cludo-home-page .oSearchInline .answer input.textbox { height: 70px; }
.oSearchInline fieldset { right: 70px; }
#-ux-content .oSearchInline .oDataFormButtonContainer, #-ux-content .cludo-home-page .oSearchInline .oDataFormButtonContainer { width: 70px; }
#-ux-content .oSearchInline .oDataFormButtonContainer input, #-ux-content .cludo-home-page .oSearchInline .oDataFormButtonContainer input { width: 70px; height: 70px; background-size: 100%; }

/* panel gamma */
.panel.style-gamma .contenteditor a, .columns-beta .column-beta .panel.style-gamma .contenteditor a { font-size: 1.125em; padding-top: 85px; }

/* pagelister. Default list item has bg image, so needs to keep left padding unless bg is also removed.
li.oBoxItem .item-container { padding-left: 0; } */

/* pagelister beta */
.lister.style-beta li.oBoxItem { font-size: 1.125em; }
.lister.style-beta li.oBoxItem .item-body-outer { min-height: 70px; }

/* pagelister delta */
.lister.style-delta { margin: 0 0 1em; }

/* events */
.events.view-list .search-events fieldset { width: 100%; }
.events.view-list .search-events .buttons { position: static; padding-top: 25px; }

/* tabbed panels zeta */
.oAccordionPanels.tabbed-zone-zeta .tab-header-outer li.header { width: 90%; }

/* tabbed panels epsilon */
.tabbed-zone-epsilon .tabs-menu-outer ul li a:link, .tabbed-zone-epsilon .tabs-menu-outer ul li a:visited { font-size: 0.9em; padding: 6px 10px 9px; }
.tabs-body-outer { padding: 45px 0; }

/* directory builder */
.oDirectoryBuilder .form-search .search-plugin { width: 100%; }
.oDirectoryBuilder .form-search .element { width: 100%; padding-right: 2%; }
.oDirectoryBuilder .form-search .search-plugin .element { width: 50%; padding-right: 2%; }

/* iframe - check your bin day page */
iframe { max-width: 100% !important; }

/* events brochure view */
.events.brochure .column-beta { width: 100%; }
.events.brochure .column-gamma { width: 100%; }
.events.brochure .column-inner { margin: 20px 0 20px 0; }

/* directory builder */
/* allow long links to break - but only in logical places */
.oDirectoryBuilder .oDataGrid, .asset-manager .grid { word-break: keep-all; }

/* desktop event list layout doesn't work for rwd - remove absolute positioning */
.events.view-list .event-list li { position: relative; min-height: 0; }
.events.view-list .event-list li .title { position: relative; top: 0; left: 0; min-height: 0; }
.events.view-list .event-list li .image-and-details { position: relative; top: 0; min-height: 0; }
.events.view-list .event-list li .image-and-details .details  { position: relative; top: 0; left: 0; min-height: 0; width: 100%; }

/* resize all image assets */
.asset-inline, .oAssetInline { margin: auto; float: none; }
.asset-inline .asset-width, .oAssetInline .clear { width: 100% !important; }
.asset-width img { max-width: 100% !important; height: auto !important; width: auto !important; }
/* except certain images - using structural element container with custom classname  */
.img-sm img, .img-sm .asset-inline .asset-width { width: auto !important; }
.panel.style-alpha img, .panel.style-alpha .asset-inline .asset-width { width: auto !important; }
.panel.style-alpha .justify-left { float: left; margin: 0 10px 10px 0; }
.panel.style-gamma img, .panel.style-gamma .asset-inline .asset-width { width: auto !important; }
	
}

@media screen and (max-width: 745px) {

/*home promo*/
.lister-carousel.lister-alpha .page-element-inner { min-height: 600px; }
.lister-carousel.lister-alpha .article-content .summary { font-size: 1.2em; }

.columns-zeta .column-outer { float: none; width: 100% !important; }

/* mailing list
#sx-mailing { margin-right: 0; }
#sx-mailing { width: 35%; }
#sx-mailing .mailing-left { display: none; }
#sx-mailing .mailing-right { width: 100%; }	
#sx-mailing a { background: none; } */

.panel.style-eta { margin: 0 auto; max-width: 275px; padding-left: 5px; }

.columns-omega { background: #e2e2e2; }
.columns-omega .column-outer { width: 50% !important; }
.columns-omega { margin: 40px 0; padding: 30px 0; }

}

/*------------------------------------
   small tablet portrait / phone landscape
--------------------------------------*/
@media screen and (max-width: 667px) 
{
    
/* edit bar overflows for tablet */
.ux-alternates, .ux-sites, #ux-mode, .ux-quit { background: #555; }  
        
/* expand columns to 100% */
/* I'm removing this line so that columns epsilon can keep their values. Other columns have their width overrides specified below.
.column-outer { float: none; width: 100% !important; } */
/* target with specific path, so we can leave nested columns in other styles unaffected */
.columns-alpha > .columns-inner > .columns-body > .column-outer { width: 100% !important; }
.columns-alpha .column-alpha .column-inner { margin-right: 0; }
.columns-alpha .column-beta .column-inner { margin-left: 0; }
    
/* mobile-only content */
.mode-live .mobile-only { display: block; }

/* hide non-mobile content */
.mode-live .x-mobile { display: none; }

/* cookie consent */
body .cookie-optin .checkbox { width: 300px; }
body .cookie-usage .app-i { padding: 1em; }
body .cookie-optin .fields, body .cookie-optout .fields { padding: 1em 1em 0.5em; }

/* header */
#sx-masthead { margin-top: 30px; border-bottom: 5px solid #79368e; }
#readspeaker { display: none; }
#sx-search { width: 100%; margin: 0; border: 0; height: 46px; }
#sx-search fieldset .fields { border: 1px solid #c4c4c4; }
#sx-search .answer { margin-left: 5%; width: 95%; }
#sx-search .textbox { height: 44px; line-height: 44px; font-size: 1em; }
#sx-search .button { height: 46px; background: #fff url("/EasySiteWeb/EasySite/StyleData/chelmsford_master/Images/search-mobile.png") no-repeat center; }
#sx-avatar { margin: 15px 0 25px; }


/* resize all image assets */
.asset-inline, .oAssetInline { margin: auto; float: none; }
.asset-inline .asset-width, .oAssetInline .clear { width: 100% !important; }
.asset-width img { max-width: 100% !important; height: auto !important; width: auto !important; }
/* except certain images - using structural element container with custom classname  */
.img-sm img, .img-sm .asset-inline .asset-width { width: auto !important; }
.panel.style-alpha img, .panel.style-alpha .asset-inline .asset-width { width: auto !important; }
.panel.style-alpha .justify-left { float: left; margin: 0 10px 10px 0; }
.panel.style-gamma img, .panel.style-gamma .asset-inline .asset-width { width: auto !important; }

/* redraw directory table for RWD 
*** data-th attribute currently only exists in contact directory (can be added to other tables via additional jacascript) *** 
*/
.contacts table.grid { margin: 0 auto; border-collapse: collapse; width: 100%; }
.contacts table.grid thead { display: none; }
.contacts table.grid tbody td { display: block; padding: 1em; border-bottom: 1px solid #ebebeb; }
.contacts table.grid tbody tr td:nth-child(1) { background: #003056; color: #fff; }      
.contacts table.grid tbody tr td:nth-child(1) a:link, .contacts table.grid tbody tr td:nth-child(1) a:visited { color: #fff; text-decoration: underline; }
.contacts table.grid tbody td:before { content: attr(data-th); font-weight: bold; display: inline-block; width: 7rem; }

/* okay, this duplicates the above, but not sure if it's staying here yet, so it'll do for now (the below was previously under 459px. The above was always at 667px) */
/* collapse ANY table to single column
Careful with background colour to emphasise first cell. forums and asset browsers don't want that. */

/* generic table mobile behaviour */
table { margin: 0 auto; border-collapse: collapse; width: 100%; }
table thead { display: none; }
table tbody td { display: block; padding: 1em; border: 0px solid #ebebeb; border-bottom-width: 1px; }

/* Where data-th won't work (due to colspans), so just display a single column without titles. ie, asset manager */
table tbody > tr:first-child > td:first-child { border-top-width: 1px; }
/* to delineate each row */
table tbody tr > td:last-child { border-bottom-width: 5px; }

/* where using data-th to append table column titles to each cell */
table.oDataGrid tbody tr td:nth-child(1) { background: #6d2585; color: #fff; }      
table.oDataGrid tbody tr td:nth-child(1) a:link, table.oDataGrid tbody tr td:nth-child(1) a:visited { color: #fff; text-decoration: underline; }
table.oDataGrid tbody td:before { content: attr(data-th); font-weight: bold; display: block; width: 100%; }
/* to delineate each row */
table tbody tr > td:last-child { border-bottom-width: 0; margin-bottom: 10px; }

/* not event header parts */
table.fc-header tbody td, table.fc-header tbody tr > td:last-child { border-width: 0; }

/* some tables do NOT want to behave this way
Overwrite responsive table behaviour with the following */
.category-tree table { margin: 0; width: auto; }
.category-tree table tbody td { display: table-cell; padding: 0; }

/* footer */
#footer-left, #footer-centre, #footer-right { width: 100%; margin-bottom: 33px; }
p#address, p#opening { padding-left: 55px; }
#footer-social { margin: 0 0 35px; }
#footer-links li { margin: 0; display: block; float: left; text-align: left; width: 50%; box-sizing: border-box; padding-bottom: 10px; }
#footer-links li:nth-child(even) { border-left: 1px solid #35476c; padding-left: 15%; }

/* columns beta */
.columns-beta { margin: 0; background: #f2f2f2; padding: 10px 10px 0; box-sizing: border-box; }
.columns-beta .columns-inner { padding: 0; }
.columns-beta .column-outer { width: 100% !important; }
.columns-beta .column-inner { margin: 0 0 10px !important; }

/* columns gamma */
.columns-gamma .column-outer { width: 100% !important; }
.columns-gamma .columns-inner { padding: 20px 10px; }
.columns-gamma .column-inner { margin: 0 !important; }

/* columns mu */
.columns-mu .column-alpha { display: none; }
.columns-mu .column-beta { display: block; }

/* panel beta */
.panel.style-beta { height: 200px; background-size: 250%; }
.panel.style-beta .panel-body { padding: 19% 10% 0; }
.panel.style-beta .oSearchInline { height: 60px; }
.ClientAreaContainer .oSearchInline .answer input.textbox, .cludo-home-page .oSearchInline .answer input.textbox { height: 60px; }
.oSearchInline fieldset { right: 60px; }
#-ux-content .oSearchInline .oDataFormButtonContainer, #-ux-content .cludo-home-page .oSearchInline .oDataFormButtonContainer { width: 60px; }
#-ux-content .oSearchInline .oDataFormButtonContainer input, #-ux-content .cludo-home-page .oSearchInline .oDataFormButtonContainer input { width: 60px; height: 60px; }

/* panel gamma */
.panel.style-gamma { background: #fff; border: 0; padding: 10px; min-height: 0; }
.panel.style-gamma .asset-inline { float: left; }
.panel.style-gamma .asset-inline .asset-width { margin: 0; }
.panel.style-gamma .contenteditor a, .columns-beta .column-beta .panel.style-gamma .contenteditor a { text-align: left; margin-left: 85px; padding-top: 24px; }

/* panel delta */
.panel.style-delta { min-height: 0; margin-bottom: 0; }

/* homepage tabbed panels */
.element-tabs-container-alpha-outer .contenteditor .moreservicesbutton { border: 2px solid #6d2585; padding: 10px 0; }
.element-tabs-container-alpha-outer .contenteditor .fewerservicesbutton { border: 2px solid #6d2585; padding: 10px 0; }
.element-tabs-container-alpha-outer .contenteditor .moreservicesbutton a { background: url("/EasySiteWeb/EasySite/StyleData/chelmsford_master/Images/hp-tab-open-mobile.png") no-repeat left center; padding-left: 0; display: block; }
.element-tabs-container-alpha-outer .contenteditor .fewerservicesbutton a { background: url("/EasySiteWeb/EasySite/StyleData/chelmsford_master/Images/hp-tab-close-mobile.png") no-repeat left center; padding-left: 0; display: block; }

/* pagelister beta */
.lister.style-beta li.oBoxItem { width: 100% !important; }
.lister.style-beta li.oBoxItem:nth-child(odd) .item-container { margin-right: 0; }
.lister.style-beta li.oBoxItem:nth-child(even) .item-container { margin-left: 0; }
.lister.style-beta li.oBoxItem .item-body-outer { min-height: 0; padding-top: 28px; }

/* pagelister gamma */
.lister.style-gamma.show-images li.oBoxItem { width: 100% !important; }
.lister.style-gamma.show-images .item-body-outer { clear: none; padding: 0; margin-left: 140px; }

/* pagelister delta */
.lister.style-delta .item-body-outer { clear: both; }
.lister.style-delta.show-images .item-title { padding: 10px 0; }

/* events */
.events.view-list .search-events .fields .element { width: 100% !important; padding-right: 0; margin: 0 0 0.5em; }
.events.view-list .event-list li .title { font-size: 1.125em; }
.events.view-list .event-list li .image-and-details .date { font-size: 1em; float: none; clear: both; padding-bottom: 0.25em; }
.form .element { font-size: 1em; }

/* search framework */
.search-framework-search-form-outer .search-keywords { width: 100%; padding-right: 0; }
.search-framework-search-form-outer .search-type { width: 50%; }
.search-framework-search-form-outer .search-date-published { width: 50%; }

/* comments */
.oComments .answer { width: 100%; }
.oComments .buttons .button { margin-bottom: 1em; }

/*where promo did change*/
.lister-carousel.lister-alpha .page-element-inner { min-height: 550px; }

}

/*------------------------------------
   phone landscape
--------------------------------------*/
@media screen and (max-width: 640px) 
{    
    
/* leave room for page editor bar */
.logged-in header { margin-top: 120px; }

/* BLOGS */
/* expand both columns - classname updated in 7.1.0.89 */
.blogs .element-column-left-alpha-outer, .blogs .element-column-right-alpha-outer, .blogs .column-alpha, .blogs .column-beta { width: 100% !important; float: none !important; clear: both; }
.blogs .oBlogPost { width: 100%; }

/* add event > date picker - split onto separate lines */
#-ux-content .events .date-range .element { width: 99%; float: none; clear: both; }

/* multi-column pagelisters - may be needed for other columns - but don't apply to all - cuz not epsilon (a-z) */
.lister.style-gamma li.oBoxItem { width: 96% !important; clear: both; float: none !important; }

/* footer */
#twitter-icon { margin: 0 15px 0 30px; }
#youtube-icon { margin: 0 30px 0 15px; }

.event-venue-map .map { max-width: 100% !important; width: auto !important; }

/* adjust button styling for mobile due to user agent ideosyncracies */
/* three different ways of targeting buttons used throughout system
#-ux-content .oDataFormButtonContainer input, #-ux-content .buttons .button, #-ux-content input[type="submit"] { background: #fff; color: #79368e; border: 1px solid #79368e; } */

/* forms: prevent checkbox labels wrapping */
.ClientAreaContainer .checklist-items li label, .ClientAreaContainer .checklist li label, .cludo-home-page .checklist-items li label, .cludo-home-page .checklist li label { max-width: 70%; }

#-ux-content .oSearchInline .oDataFormButtonContainer,   .cludo-home-page .oSearchInline .oDataFormButtonContainer { width: 55px; }
#-ux-content .oSearchInline .oDataFormButtonContainer, .cludo-home-page .oSearchInline .oDataFormButtonContainer input { width: 55px; height: 55px; }
}

@media screen and (max-width: 620px) {
/*home promo*/
.lister-carousel.lister-alpha .article-link { bottom: 30px; }
.lister-carousel.lister-alpha .pagination-outer { padding: 0; } 
.lister-carousel.lister-alpha .article-asset img { width: 93% !important; }

/*home page events to single row*/
.lister-list.style-zeta li.oBoxItem { width: 100% !important; }	
.lister-list.style-zeta.show-images .item-container { max-width: 270px; margin: 20px auto; }
.lister-list.style-zeta.show-images .item-title a { padding: 20px; font-size: 1.95em; font-weight: 300; line-height: 1em; }

/* mailing list
#sx-mailing a { padding: 10px; } */

.columns-omega .column-outer { width: 100% !important; }

}

/*------------------------------------
   phone portrait
--------------------------------------*/
@media screen and (max-width: 459px) {

/* Event Calendar is buggy at mobile. Unlikely to use this for now. */
/* events calendar needs attention when shrinks to one column */
.fc-border-separate th, .fc-border-separate td { border-width: 1px; }
.fc-grid .fc-day-number { float: none; text-align: center; }

/* collapse ANY table to single column
Careful with background colour to emphasise first cell. forums and asset browsers don't want that.
 */
table { margin: 0 auto; border-collapse: collapse; width: 100%; }
table thead { display: none; }
table tbody td { display: block; padding: 1em; border: 0px solid #ebebeb; border-bottom-width: 1px; }
table tbody > tr:first-child > td:first-child { border-top-width: 1px; }
/* to delineate each row */
table tbody tr > td:last-child { border-bottom-width: 5px; }

/* some tables do NOT want to behave this way
Overwrite responsive table behaviour with the following */
.category-tree table { margin: 0; width: auto; }
.category-tree table tbody td { display: table-cell; padding: 0; }
/* Event Calendar */
.events table { margin: 0; width: auto; }
.events table tbody td { display: table-cell; padding: 0; }

/* override inline cell width for Forums */
.oForums colgroup col { width: 100% !important; }

/* header */
#sx-masthead { margin-top: 25px; }
.sx-mi, #sx-extras .sx-ei { padding: 0 20px; }
#sx-avatar { margin: 15px 60px 25px 0; }
#sx-avatar img { max-width: 100%; }

/* footer */
#twitter-icon { margin: 0 8px 0 16px; }
#youtube-icon { margin: 0 16px 0 8px; }

/* ensure long words can still fit on mobile screens */
h1 { font-size: 1.9em; }

/* panel beta */
.panel.style-beta { height: 160px; background-size: 300%; }
.panel.style-beta .panel-body { padding: 24% 5% 0; }
.panel.style-beta .oSearchInline { height: 55px; }
.ClientAreaContainer .oSearchInline .answer input.textbox, .cludo-home-page .oSearchInline .answer input.textbox { height: 55px; }
.oSearchInline fieldset { right: 55px; }
#-ux-content .oSearchInline .oDataFormButtonContainer, #-ux-content  .cludo-home-page .oSearchInline .oDataFormButtonContainer { width: 55px; }
#-ux-content .oSearchInline .oDataFormButtonContainer, #-ux-content .cludo-home-page .oSearchInline .oDataFormButtonContainer input { width: 55px; height: 55px; }

/* panel gamma */
.panel.style-gamma .contenteditor a, .columns-beta .column-beta .panel.style-gamma .contenteditor a { font-size: 1em; padding-top: 27px; margin-left: 90px; }

/* pagelister gamma */
.lister.style-gamma.show-images .item-image img { max-width: 70px; }
.lister.style-gamma.show-images .item-body-outer { margin-left: 85px; }
.lister.style-gamma.show-images .item-title { font-size: 1em; padding-bottom: 5px; }

/* collapsible panels zeta */
.oAccordionPanels.tabbed-zone-zeta .tab-header-outer { padding: 5px 5px 5px 10px; }

/* directory builder */
.oDirectoryBuilder .form-search .element { padding-right: 0; }
.oDirectoryBuilder .form-search .search-plugin .element { width: 100%; padding-right: 0; }
.oDirectoryBuilder .form-search .buttons input { margin-bottom: 10px !important; }

/* search framework */
.search-framework-search-form-outer .search-keywords { width: 100%; }
.search-framework-search-form-outer .search-type { width: 100%; padding-bottom: 10px; }
.search-framework-search-form-outer .search-date-published { width: 100%; }

/* tabbed panels zeta */
.oAccordionPanels.tabbed-zone-zeta .tab-header-outer li.header { width: 80%; }
.oAccordionPanels.tabbed-zone-zeta .tab-header-outer li.header a { font-size: 1.2em; line-height: normal; }

/* Login Element Panel */
.oLoginPanel { width: 96% !important; }
.oLoginButtonContainer { width: auto; }

/* custom formats */
/*Previous*/.contenteditor .chev-previous	{ padding-left: 25px; }
/*Next*/.contenteditor .chev-next	{ padding-right: 25px; }
/*Previous summary text*/.contenteditor .chev-previous-summary	{ padding-left: 25px; }
/*Next summary text*/.contenteditor .chev-next-summary	{ padding-right: 25px; }

/* promo */
.lister-carousel.lister-alpha .article-asset img { width: 89% !important; }
.lister-carousel.lister-alpha .pagination-outer { bottom: 10px; }
.lister-carousel.lister-alpha .pagination-inner { height: 30px; }
.lister-carousel.lister-alpha .page-element-inner { min-height: 450px; }
.lister-carousel.lister-alpha .article-content { max-width: 75%; }
.lister-carousel.lister-alpha .article-content .summary { font-size: 1.1em; }
.lister-carousel.lister-alpha .article-link { bottom: 10px }

/*standard landing page red box lister to one across*/
.lister-list.style-theta li.oBoxItem { width: 100% !important; }
.lister-list.style-theta li.oBoxItem .item-container { margin: 15px 0; }

/* mailing list
#sx-mailing { width: 72px; text-align: center; }	
#sx-mailing a { padding: 7px; font-size: 0.9em; }
#sx-mailing, #sx-search { margin-right: 0; } */
#sx-mailing { width: auto; }

}