/* SOME BASIC RWD BEHAVIOUR */

/*------------------------------------
   smaller desktop / tablet landscape
--------------------------------------*/
@media only screen and (max-width: 1230px) {

/* resize all wrappers */
#sx-masthead, .custom-menu-sx-tnv .style-element-inner, .sx-bdo, .sx-bdi, #sx-extras .sx-eo { width: 100%; }
/*header*/
.sx-mo { padding: 0 20px; }
#main-menu .mega-menu { width: 74%; }
/*#main-menu .mega-menu li.first.menu-tab a { width: 40px; }
#main-menu .mega-menu .text { padding: 15px 9px; }*/
#main-menu .mega-menu a.mt-panel-title { padding: 10px 12px; }
#mem-buttons .mega-menu a.mt-panel-title:link, #mem-buttons .mega-menu a.mt-panel-title:visited { padding: 15px 6px; margin-left: 7px; }
#header-placeholder { padding: 0 20px; }

/*side nav padding*/
#sx-nav .child .text { padding-left: 35px; }

/*stop mega menu drop downs running off to the right*/
.mega-menu li.menu-tab.mt-epsilon:hover ul.panels, .mega-menu li.menu-tab.mt-zeta:hover ul.panels { right: 0; }

/*pad out content*/
#sx-co-out, .width-contain { padding: 0 30px; }
.light-blue, .white-stripes, .pink-twitter { padding: 30px; }

/*font sizes*/
.contenteditor .pinkbutton a { padding: 20px; }
.contenteditor .pinkbutton { font-size: 1.3em; }

.panel.style-gamma .link-email, .panel.style-gamma .link-tel { padding-left: 40px; }
.columns-alpha .column-inner, .columns-iota .column-inner  { margin-right: 0; }
.columns-alpha .column-alpha .column-inner, .columns-iota .column-beta .column-inner { margin-right: 35px; }

/*promotion tweak to stop the content running off the side*/
.lister-carousel.lister-alpha .article-content { left: 35%; width: 50%; }
.lister-carousel.lister-alpha .arrow { width: 70px; height: 70px; background-size: 70px auto; } 
.lister-carousel.lister-alpha .back {  left: 30px; }
.lister-carousel.lister-alpha .forward { right: 30px; }

/*promotion tweak to stop the content running off the side
.lister-carousel.lister-beta .article-content { width: 50%; }
.lister-carousel.lister-beta .arrow { width: 70px; height: 70px; background-size: 70px auto; } 
.lister-carousel.lister-beta .back {  left: 30px; }
.lister-carousel.lister-beta .forward { right: 30px; }*/


/*-------------------------------------------------------
 PROMOTION - CAROUSEL beta
---------------------------------------------------------*/

.lister-carousel.lister-beta .body-outer { height: 512px; }
.lister-carousel.lister-beta .wrapper { width: 100%; overflow: hidden; }
.lister-carousel.lister-beta .wrapper ul li { /* gets width and height from js now */ }

.lister-carousel.lister-beta .article-asset { min-width: 0; min-height: 0; /* gets width from js now */ }
.lister-carousel.lister-beta .article-asset img { height: auto!important; width: 100% !important; }
.lister-carousel.lister-beta .article-content { width: 100%; position: absolute; left: 0; bottom: 0; }



/*listers*/
.lister-list.style-alpha .item-image a { padding-right: 30px; }
/* except in MM */
#sx-body .lister-list.style-alpha li { min-height: 200px; }
.lister-list.style-alpha .item-title { border-left: 5px; }

.lister-list.style-zeta .item-summary { margin-left: 0; }
.lister-list.style-zeta .item-title a { left: 0; font-size: 1.3em; top: 0; line-height: 1.5; }

.tabs-menu-outer ul li a:link, .tabs-menu-outer ul li a:visited { padding: 20px 10px; }

/*adjustments on ragged edge text to make it behave*/


/*footer*/
#ft-part-1, #ft-part-2 { width: auto; padding: 30px; }
#sx-extras .f-logo a.edge, #sx-extras .f-logo a.assure, #sx-extras .f-logo a.primaryfut, #sx-extras .f-logo a.mnda, #sx-extras .f-logo a.p2b { width: 100%; background-size: 95%; }
#sx-extras .f-logo a.assure { height: 100px; }
#sx-extras #ft-part-1 .ft-left { width: 60%; }
#sx-extras .location { padding-left: 30px; }
#sx-extras .external-link { margin-top: 0; }
}


/*------------------------------------
   very small desktop / tablet portrait 
--------------------------------------*/
@media screen and (max-width: 1000px) {	
	
/*header*/
#sx-masthead { min-height: 250px; box-shadow: 0; }
.sx-mo { padding: 0 30px; } 
#sx-search { width: 35%; }
#mem-buttons .mega-menu .mt-alpha a.mt-panel-title:link, #mem-buttons .mega-menu .mt-alpha a.mt-panel-title:visited { /*padding: 23.5px 6px;*/ }
#mem-buttons .mega-menu .panels { display: none; }
/*swap maga menu for custom nav*/
#main-menu .mega-menu { display: none; }	
#m-tablet { display: block; }

.phoneno { float: left; position: relative; right: auto; top: auto; margin: 30px 20px 20px 30px; }

#m-tablet.show #tabm-tnv { display: block; }

#sx-extras .f-logo a.assure { height: 80px; }

#mem-buttons a { max-width: 100px; text-align: center; padding: 15px 10px; line-height: 1.1; }
#mem-buttons a:first-child { padding: 23px 10px 24px 10px; }
/* increase height slightly for login box element */
.logged-in #sx-masthead { min-height: 270px; }

/*show hide content*/
.mode-live .show-tablet { display: block; }
.mode-live .hide-tablet { display: none; }

/*side nav to the bottom*/
#sx-content { width: 100%; }
#sx-nav { width: 100%; border-top: 5px solid #00204e; padding: 30px 0; }
.sx-no { margin-right: 0; border: 0; }

/*font sizes*/
h1 { font-size: 2em; }

.contenteditor .pinkbutton-user a, .contenteditor .pinkbutton-colleague a, .contenteditor .pinkbutton-faq a, .contenteditor .pinkbutton-officials a, .contenteditor .pinkbutton-contacts a, .mode-live .pinkbutton-region a , .mode-live .pinkbutton-branch a  { min-width: auto; max-width: auto; }

/* Promotion - reduce size */
.lister-carousel.lister-alpha .body-outer, .lister-carousel.lister-alpha .wrapper, .lister-carousel.lister-alpha .wrapper ul li, .lister-carousel.lister-alpha .article-asset { height: 326px; min-height: 326px; }
.lister-carousel.lister-alpha .wrapper ul li img { height: 329px; width: auto; }
.lister-carousel.lister-alpha .article-content { bottom: 0; left: 30px; width: 80%; padding: 0; }
.lister-carousel.lister-alpha .pagination-outer { top: 30%; }
.lister-carousel.lister-alpha .arrow { top: 0; }

/* Promotion - reduce size
.lister-carousel.lister-beta .body-outer, .lister-carousel.lister-beta .wrapper, .lister-carousel.lister-beta .wrapper ul li, .lister-carousel.lister-beta .article-asset { height: 426px; min-height: 426px; }
.lister-carousel.lister-beta .wrapper ul li img { height: 429px; width: auto; }
.lister-carousel.lister-beta .article-content { bottom: 0; left: 14%; width: 72%; padding: 0; } */
.lister-carousel.lister-beta .pagination-outer { top: 30%; }
.lister-carousel.lister-beta .arrow { top: 0; }
.lister-carousel.lister-beta .article-content { position: relative; height: 150px; }

/*listers*/
.lister-list.style-alpha .item-title { min-width: 200px; }
.lister-list.style-alpha .item-title a { font-size: 1.25em; }

.lister-list.style-beta li { width: 50% !important; }

.lister-list.style-epsilon .item-title { font-size: 1.25em; }

.lister-list.style-zeta .item-title a { position: relative; display: inline-block; }
.lister-list.style-zeta .item-summary { padding: 15px; }

/*reduce tab padding*/
.tabs-menu-outer ul li a:link, .tabs-menu-outer ul li a:visited { padding: 20px 10px; }

/*-- columns and panels --*/
.panel.style-beta .panel-body { padding: 20px 0; }

/*make home floated panels wider*/
.contenteditor .bigwhitebutton a { font-size: 1.5em; padding: 23px; }
.panel.style-delta { width: 50%; }
.panel.style-delta .panel-body { min-height: 150px; font-size: 1.15em; }

/*general content*/
.oAccordionPanels.tabbed-zone-alpha .tab-header-outer { font-size: 1.1em; }

/*some images to 100% early*/
.panel.style-beta .asset-width, .panel.style-beta .asset-width img { max-width: 90% !important; height: auto !important; }

/* 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%; }

}

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

	
.phoneno { margin: 30px 10px 10px 20px; font-size: 1.1em; }

#sx-search { width: 40%; }	
.sx-mo { padding: 0 20px; }

/* navigation */
.custom-menu-sx-tnv { width: 100%; }
.custom-menu-tab-tnv a.title h2 { padding: 24px 10px; }
.custom-menu-tab-tnv .panel .ddl-2 { display: none; }

#mem-buttons a { margin-left: 4px; padding: 15px 8px; }

/*show hide content*/
.mode-live .show-mobile { display: block; }
.mode-live .hide-mobile { display: none; }

/* re-arrange content for tablet */
.mode-live .tablet-left .justify-centre { text-align: left; }

/*listers*/
/* except in MM */
#sx-body .lister-list.style-alpha li { width: 50% !important; min-height: 420px; }
.pagination { padding: 30px; }
.view-list.style-beta { margin: 30px 0; }
.lister-list.style-theta .item-title { font-size: 1em; }

.lister-list.style-delta .item-summary, .lister-list.style-delta .item-date { font-size: 0.95em; }


/* columns and panels */
/* expand alpha to 100% */
.columns-alpha .column-outer, .columns-iota .column-outer { float: none; width: 100% !important; }
.columns-alpha .column-alpha .column-inner, .columns-iota .column-beta .column-inner  { margin-right: 0; }

.columns-delta .column-outer { float: left !important; width: 50% !important; }

.columns-gamma .column-body { padding: 5px 0; }
.panel.style-eta .panel-body { padding: 15px; }
.panel.style-gamma .panel-body { padding: 60px 15px 15px; }
.link-email, .link-tel { background: none; padding: 0; }

/*general columns and panels*/
.panel.style-epsilon { background-position: left top; background-size: 90%; }
.panel.style-epsilon .pel-o { padding: 0; }
.panel.style-epsilon .pel-i { border: 0; }
.panel.style-epsilon .panel-header, .panel.style-epsilon .panel-body { float: none; width: 100%; }
.panel.style-epsilon .panel-header .hdi { padding: 0; }
    
/* hide launcher and top ux bar */
.launcher { display: none; }
body #ux-bar { display: none; }
body { padding: 0 !important; }

/* 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%; height: auto !important; 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; }

.lister-carousel.lister-alpha .pagination-outer { top: 25%; }
.lister-carousel.lister-alpha .arrow { width: 30px; height: 30px; background-size: 30px auto !important; } 

/*  */
.lister-carousel.lister-beta .pagination-outer { top: 25%; }
.lister-carousel.lister-beta .arrow { width: 30px; height: 30px; background-size: 30px auto !important; }
.lister-carousel.lister-beta .article-content { height: 200px; }

}

/*------------------------------------
   small tablet portrait / phone landscape
--------------------------------------*/
@media screen and (max-width: 685px) {
	
/*tablet menu to mobile menu*/
#m-tablet { display: none; }
.home-link { display: block; float: left; margin-right: 10px; }
#mem-buttons { float: left; }
#mem-buttons a { margin-left: 10px; }
#section-link { display: block; float: right; }

#sx-masthead.show #mob-tnv { display: block; }

/*home promo to mobile view*/
.lister-carousel.lister-alpha .body-outer, .lister-carousel.lister-alpha .wrapper, .lister-carousel.lister-alpha .wrapper ul li { min-height: 420px; }
.lister-carousel.lister-alpha .wrapper ul li img { height: 300px; width: auto; }
.lister-carousel.lister-alpha .article-content { top: 211px; left: 0; width: 100%; }
.lister-carousel.lister-alpha .article-content .title { height: 85px; display: inline-block; padding-left: 20px; background: none; }
.lister-carousel.lister-alpha .article-content .summary { display: block; background: none; padding: 20px; }
.lister-carousel.lister-alpha .pagination-outer { top: 15%; }

.lister-carousel.lister-alpha .back { left: 20px; background: rgba(0, 0, 0, 0.9) url("/easysiteweb/easysite/styledata/NAHT-17-master/images/promo-arrow-bck.png") no-repeat scroll center center; }
.lister-carousel.lister-alpha .forward { right: 20px; background: rgba(0, 0, 0, 0.9) url("/easysiteweb/easysite/styledata/NAHT-17-master/images/promo-arrow-fwd.png") no-repeat scroll center center; }

/*home promo to mobile view
.lister-carousel.lister-beta .body-outer, .lister-carousel.lister-beta .wrapper, .lister-carousel.lister-beta .wrapper ul li { min-height: 420px; }
.lister-carousel.lister-beta .wrapper ul li img { height: 300px; width: auto; }
.lister-carousel.lister-beta .article-content { top: 211px; left: 0; width: 100%; }
*/
.lister-carousel.lister-beta .article-content .title { display: inline-block; padding-left: 20px; background: none; }
.lister-carousel.lister-beta .article-content .summary { display: block; background: none; padding: 0 20px; }
.lister-carousel.lister-beta .pagination-outer { top: 15%; }
.lister-carousel.lister-beta .back { left: 20px; background: rgba(0, 0, 0, 0.9) url("/easysiteweb/easysite/styledata/NAHT-17-master/images/promo-arrow-bck.png") no-repeat scroll center center; }
.lister-carousel.lister-beta .forward { right: 20px; background: rgba(0, 0, 0, 0.9) url("/easysiteweb/easysite/styledata/NAHT-17-master/images/promo-arrow-fwd.png") no-repeat scroll center center; }

/*footer*/
#sx-extras #ft-part-1 .ft-left { width: 69%; }
#sx-extras .location { width: 45%; }

/*general content area padding*/
#sx-co-out, .width-contain, .light-blue, .white-stripes, .pink-twitter { padding: 20px; }

/*listers*/
#sx-body .lister-list.style-alpha li, .lister-list.style-alpha li { width: 100% !important; min-height: auto; }
.lister-list.style-alpha .item-body-inner { min-height: auto; }
.lister-list.style-alpha .item-image a { padding: 0; }
.lister-list.style-alpha .item-body-outer { margin: 0; padding: 0; }
.lister-list.style-alpha .item-body-inner { padding: 0 0 10px 0; }
.lister-list.style-alpha .item-title { position: relative; display: block; margin-bottom: 10px; }

.lister-list.style-delta .item-image { float: none; }
.lister-list.style-delta .item-body-outer { margin-left: 0; }

.lister-list.style-gamma .item-image { min-height: auto; }
        
/* expand columns to 100% */
.column-outer { float: none; width: 100% !important; }
.columns-alpha .column-alpha .column-inner, .columns-iota .column-beta .column-inner { margin-right: 0; }

/* remove imposed column-ordering */
.columns-iota .column-outer { float: none !important; clear: both !important; }

.panel.style-gamma .panel-body { padding-top: 55px; }

/*form elements to 100%*/
.ClientAreaContainer .oFormBuilder .element .question, .ClientAreaContainer .oFormBuilder .element .answer { width: 97% !important; }
.oDataFormAnswer, .answer, .search-keywords .answer { width: 99%; float: none; }
#-ux-content .oDirectoryBuilder .element .answer { max-width: 95% !important; }
.search-events .buttons { margin: 1em auto; }
    
/* mobile-only content */
.mode-live .mobile-only { display: block; }

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

/* hide/show search */
#sx-search { position: absolute; top: 0; left: 0; width: 100%; margin: 0; z-index: 99; }
#show-search { display: block;  }

.sx-si { display: none; }
#sx-search.show .sx-si { display: block; margin: 100px 20px 20px auto; width: 93%; }
#sx-search.show { background-color: rgba(0,0,0,0.5); min-height: 231px; }

/* 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%; height: auto !important; width: 100% !important; }
/* except certain images - using structural element container with custom classname  */
.img-sm img, .img-sm .asset-inline .asset-width { width: auto !important; }
/*... apart from*/
.panel.style-beta .asset-width, .panel.style-beta .asset-width img { width: auto !important; max-width: 100% !important; }

iframe { max-width: 99% !important; width: 100% !important; max-height: auto !important; }

/* redraw directory table for RWD 
*** data-th attribute currently only exists in contact directory (can be added to other tables via additional javascript) *** 
*/
.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; }

}

/*------------------------------------
   phone landscape
--------------------------------------*/
@media screen and (max-width: 640px) {		
/*reduce padding*/
.sx-mo { padding: 0 15px; }
#mob-tnv { top: 254px; }

.phoneno { float: none; margin: 20px 20px 10px; clear: both; width: 100%;  }
/* Don't unhide this until new phone number section is unhidden. */
#section-link { top: 165px; }
.logged-in #sx-masthead { min-height: 290px; }


/* CONTENT */
.light-blue { padding-bottom: 180px }
.panel.style-delta { width: 100%; }
.panel.style-delta .panel-body { min-height: auto; }
.contenteditor .boxarrowlink { bottom: 40px; }

/*listers*/
.lister-list.style-beta li { width: 100% !important; }
		
/* 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%; }

/* cookies */
body .cookie-optin .app-i { width: 100%; }
body .cookie-optin .fields, body .cookie-optout .fields { padding-left: 10px; }

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

/*break footer columns into single row*/
#sx-extras #ft-part-1 .ft-left, #sx-extras .ft-right, #sx-extras .location, #sx-extras .email, #sx-extras .phone, #sx-extras #ft-part-2 .ft-left { width: 100%; margin-bottom: 10px; }
#ft-part-1, #ft-part-2 { padding: 20px; }
#sx-extras .location { padding-left: 40px; margin-bottom: 50px; }
#sx-extras a.button { float: none; margin-left: 0; }
#sx-extras .f-logo { max-width: 150px; }
#sx-extras .flinks { margin: 20px 0 50px; }

.lister-carousel.lister-alpha .body-outer, .lister-carousel.lister-alpha .wrapper, .lister-carousel.lister-alpha .wrapper ul li { min-height: 450px; }
.lister-carousel.lister-alpha .body-outer, .lister-carousel.lister-alpha .wrapper, .lister-carousel.lister-alpha .wrapper ul li { min-height: 450px; }

.lister-carousel.lister-beta .article-content { height: 250px; }

}

/*------------------------------------
   phone portrait
--------------------------------------*/
@media screen and (max-width: 459px) {
	
.home-link { margin-right: 0; }	
#mob-tnv { width: 200px; }
h1 { margin-bottom: 0; }
.contenteditor .boxarrowlink { position: relative; bottom: 0; right: 0; }

/*promo*/
.lister-carousel.lister-alpha .article-content { top: 170px; }
.lister-carousel.lister-alpha .article-content .title { height: auto; }
.lister-carousel.lister-alpha .body-outer, .lister-carousel.lister-alpha .wrapper, .lister-carousel.lister-alpha .wrapper ul li { min-height: 400px; }
.lister-carousel.lister-alpha .article-content .summary { padding-top: 0; }
.lister-carousel.lister-alpha .article-content .title { padding: 0 10px 0 20px; line-height: 1.4; }
.lister-carousel.lister-alpha .article-content span { background: none; }
.lister-carousel.lister-alpha .article-content a:link, .lister-carousel.lister-alpha .article-content a:visited { padding: 0; font-size: 1.6em; }

/*
.lister-carousel.lister-beta .article-content { top: 170px; }
.lister-carousel.lister-beta .article-content .title { height: auto; }
.lister-carousel.lister-beta .body-outer, .lister-carousel.lister-beta .wrapper, .lister-carousel.lister-beta .wrapper ul li { min-height: 400px; }*/
.lister-carousel.lister-beta .article-content .summary { padding-top: 0; }
.lister-carousel.lister-beta .article-content .title { padding: 0 10px 0 20px; line-height: 1.4; }
.lister-carousel.lister-beta .article-content a:link, .lister-carousel.lister-beta .article-content a:visited { padding: 0; font-size: 1.6em; }

/*listers*/
.lister-list.style-gamma .item-title { font-size: 1.05em; }
.lister-list.style-delta img { width: 100% !important; max-width: 100% !important; height: auto !important; }

.lister-list.style-epsilon .lister-body { padding: 0 10px 20px; }
.lister-list.style-epsilon .oBoxItem { min-height: 100px; }
.lister-list.style-epsilon .item-title, .lister-list.style-theta .item-title { font-size: 0.9em; }

/*last columns to expand to 100%*/
.columns-delta .column-outer { float: none !important; width: auto !important; }

/*remove padding on...*/
#sx-co-out, .width-contain, .light-blue, .white-stripes, .pink-twitter { padding: 20px 10px; }
#header-placeholder, .lister-list.style-alpha li .item-container { padding: 0 10px; }
.lister-list.style-alpha .item-image img { width: 100% !important; }


/* testing fixes for windows phone - delete once fixed
.sx-bdo, .sx-bdi { width: 50%; }*/
.ClientAreaContainer img { width: 100% !important; max-width: auto !important; height: auto !important; }
.panel.style-epsilon {  }


/*events*/
#-ux-content .view-list.style-alpha .question, #-ux-content .view-list.style-alpha .answer { width: 100%; text-align: left; float: none; }

.view-list.style-alpha select { width: 99%; }
.view-list.style-alpha li.event .title { padding-right: 10px; }
.view-list.style-alpha li.event .date, .view-list.style-alpha li.event .time { position: relative; top: 0; }
.pagination { margin-top: 0; }

.view-record.style-alpha .event-attendance-options { position: relative; margin-bottom: 20px; }

/* 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; }

/* 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; }
/* 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; }

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

}

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

.lister-carousel.lister-alpha .body-outer, .lister-carousel.lister-alpha .wrapper, .lister-carousel.lister-alpha .wrapper ul li { min-height: 450px; }
/* .lister-carousel.lister-beta .body-outer, .lister-carousel.lister-beta .wrapper, .lister-carousel.lister-beta .wrapper ul li { min-height: 450px; }*/

.lister-carousel.lister-beta .article-content { height: 300px; }

}

/*------------------------------------
   teeny phones
--------------------------------------*/
@media screen and (max-width: 340px) {
#show-search { width: 45px; height: 45px; }
#sx-search.show .sx-si { width: 88%; }
#section-link, .home-link { height: 40px; width: 40px; background-size: 40px; }
/* Don't unhide this until unhide header phone number. */
#section-link { height: 20px; padding-top: 45px; }
#mem-buttons a { margin-left: 9px; }

.lister-carousel.lister-alpha .body-outer, .lister-carousel.lister-alpha .wrapper, .lister-carousel.lister-alpha .wrapper ul li { min-height: 500px; }
/* .lister-carousel.lister-beta .body-outer, .lister-carousel.lister-beta .wrapper, .lister-carousel.lister-beta .wrapper ul li { min-height: 500px; }*/

}