/* SOME BASIC RWD BEHAVIOUR */

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

/* resize all wrappers */
#sx-masthead, .custom-menu-sx-tnv .style-element-inner, .mega-menu, .sx-bdo, .sx-bdi, #sx-extras .sx-eo { width: 100% !important; }
.sx-bi { padding: 15px !important; font-size: 0.9em !important; line-height: 1em; }

/*header adjustments*/
#sx-search { margin-left: 70px !important; }
#sx-search .button { font-size: 1.05em !important; font-weight: normal !important; background-position: left 10px center !important; }
a.section-link { font-weight: normal !important; font-size: 1.05em !important; }
.logotxt { font-size: 1.65em !important; }

/*increase min height on home panels*/
.panel.style-epsilon { min-height: 300px !important; }

/*reducepadding*/
.columns-alpha .column-inner { margin: 0 10px !important; }
.columns-beta .column-inner { margin-right: 30px !important; }
.columns-psi .column-inner { margin-right: 30px !important; }
/*but protect it on nested columns*/
.columns-beta .columns-alpha .column-inner { margin-right: 0px !important; }

/*custom formats*/
.blueblock a { min-width: 80% !important; font-size: 1.1em !important; }

/*adding padding around 100% elements*/
.sx-mo { padding: 0 15px; }
.width-container { padding: 0 15px; }
#sx-extras .ft-info-inr { padding: 0 15px; }
#sx-extras .sx-ei { padding: 0; background-position: right 50px top !important; }
#sx-extras #snv-flinks ul { display: block; padding: 0 15px; }
#sx-extras .copyright { margin: 0 15px; }

/*and delta off news landing page - to keep room for any images*/
.lister-lean .delta { clear: both; }
.lister-lean .delta li { width: 50% !important; }

/*landing page panels to 2 across*/
.panel.style-beta { width: 50% !important; float: left; }

/*to stop sub-headers wrapping to the side of listers at rwd*/
.contenteditor h2 { display: block !important; clear: both; }
/*unless specific rule says otherwise*/
.panel.style-delta .contenteditor h2 { display: block !important; clear: none; }

/*reduce font on hp tabs*/
.mode-live .tabs-style-delta .item-tab .tab-ttl a { font-size: 1.2em !important; line-height: 1em !important; }
.mode-live .tabs-style-delta .item-tab .summary { font-size: 0.9em; }
.mode-live .tabs-style-delta .item-tab .tabpanel .contenteditor { font-size: 0.9em; }

/* resize extra large (approx 1220px w) image assets using structural element container with custom classname */
.img-exlg .asset-inline { margin: auto; float: none; }
.img-exlg .asset-inline .asset-width { width: 100% !important; }
.img-exlg img { max-width: 100%; height: auto !important; width: 100% !important; }

/*resize large images on news items*/
.lister-lean .gamma li.first .item-img, .lister-lean .gamma li.first .item-img img { width: 100% !important; height: auto !important; }

/*footer tweaks*/
#sx-extras .fservices { width: 50% !important; }
#sx-extras .fservices ul li, .fcontact ul li { padding: 0 5px; /*margin-bottom: 12px !important;*/ line-height: 1.4em; }
#sx-extras .fcontact { width: 37% !important; }
#sx-extras .fcontact ul li { width: auto !important; }
#sx-extras .fcontact p { clear: both; }
}


/*------------------------------------
   very small desktop / tablet portrait 
--------------------------------------*/
@media screen and (max-width: 1000px) {
	
/*header adjustments*/
#sx-search { margin-left: 40px !important; }	
#search-outer #sx-search { margin-left: auto !important; }
.section-link { padding-right: 20px; }

/*for showing/hiding content at desktop/mobile. Used on the home page*/
.showdesktop { display: none !important; }
.showmobile { display: block !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%; }

/*shrink large fonts and headers*/
h1 { font-size: 3em !important; line-height: 1em; }
/*h2 { font-size: 2.05em !important; }*/
.contenteditor h2 { font-size: 1.8em !important; }

/*rwd version of home page panels*/
.panel.style-epsilon, .panel.style-zeta { width: 50% !important;  }
/*increase min height on home panels*/
.panel.style-epsilon { min-height: 325px !important; }

/*custom formats*/
.blueblock a { min-width: 90% !important; background-position: center right 15px !important; padding: 20px 20px 20px 0 !important; }

}

/*------------------------------------
   tablet portrait 
--------------------------------------*/
@media screen and (max-width: 820px) {
	
/*top alert bar*/
.inalrtinner { font-size: 0.85em !important; }	

/*mobile search button*/
.sx-mi { position: static !important; }
.section-link { right: 17px; }
#sx-search { /*margin-left: 130px !important;*/ }
/*#clk-search { display: block !important; }
#sx-search .sx-si { display: none; }*/
#sx-search { float: none !important; width: 100% !important; margin: 0 !important; clear: both; padding: 0 !important; }
#sx-search .sx-si { padding-top: 10px; padding-left: 1px; }
#sx-search .button { height: 54px !important; }
   
/* hide launcher and top ux bar */
.launcher { display: none; }
body #ux-bar { display: none; }
body#faux { padding-top: 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; }


/*home lister using large images to single column*/
.lister-lean .gamma li { width: 100% !important; }

/*resize footer elements*/
#sx-extras .sx-ei { background-size: 30% !important;  }
#sx-extras .fservices { margin-right: 50px !important; }
#sx-extras .fcontact ul li { width: 45% !important; }

/*reduce padding*/
.columns-beta .column-inner { margin-right: 10px !important; }
.columns-psi .column-inner { margin-right: 10px !important; }

/*remove some padding from lister li items*/
.panel.style-gamma .lister-lean li { padding-left: 8px !important; }

/*general formatting*/
h1 { margin-top: 0 !important; }
.panel.style-delta { padding: 20px !important; }


/*reduce padding on custom formats*/
.blueblock a { min-width: 90% !important; margin: 10px 0 !important; font-size: 1.05em !important; background-position: center right 10px !important;}

}

/*------------------------------------
   small tablet portrait / phone landscape
--------------------------------------*/
@media screen and (max-width: 750px) {
	
/*top alert bar*/
.inalrtinner { font-size: 0.8em !important; padding-left: 37px !important; }	
.inalrt { padding: 5px !important; }	
	
/*top nav to single row*/
.custom-menu-sx-tnv .panel { float: none !important; width: 100% !important; }
.custom-menu-sx-tnv a.title h2 { font-size: 1em !important; }

/*home page panels to single row*/
.columns-beta .column-inner { margin: 0 !important; }
.panel.style-epsilon, .panel.style-zeta { width: 100% !important; min-height: auto !important; }
.lister-lean .gamma li a { padding: 0 !important; }

/*change delta listers off news landing to 100% to protect larger images*/
.lister-lean .delta li { width: 100% !important; }
.lister-lean .delta .item-card a { margin: 0 !important; }
/*expand landing page panels for same reason*/
.panel.style-beta { width: 100% !important; }
        
/* expand columns to 100% */
.column-outer { float: none; width: 100% !important; }
.columns-alpha .column-inner, .columns-beta .column-inner { margin: 0 !important; }
.columns-beta .column-inner .column-inner { margin-right: 8px !important; }
.columns-psi .column-outer { width: 100% !important; float: none !important; clear: none !important; }
.columns-psi .column-inner { margin: 0 !important; }
/*to protect nested columns*/
.column-outer .column-outer { width: auto !important; }
/*to specifically protect the icon column in the contact*/
.panel.style-delta .column-outer.column-alpha { width: 20% !important; }
/* allow certain nested columns to expand */
.columns-chi .column-outer { width: 100% !important; }
    
/* mobile-only content */
.mobile-only { display: block; }
.logotxt .mobile-only { display: inline; }
.logotxt { margin-top: 6px; margin-left: 16px; }

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

/* hide search */
#sx-search { float: none; width: 80%; margin: 26px 10% 16px; clear: both; }

/*header adjustments*/	
.section-link {  }
/*a#search-link-alt { padding-left: 70px !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; }
.contacts table.grid { 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; }

/*reduce padding on custom formats*/
.blueblock a { min-width: 100% !important; font-size: 1.05em !important; margin: 6px 0 !important; padding: 10px 0 !important; }

/*formatting and spacing*/
#sx-extras { font-size: 0.9em !important; }
#sx-extras .ft-info { padding: 20px 0 !important; }
.lister-lean .beta .item-ttl { font-size: 2em !important; }

/*footer*/
#sx-extras .rlinks { float: none !important; clear: both; padding-top: 25px; padding-left: 10px; }
#sx-extras .copyright { padding-top: 0 !important; }

}

/*------------------------------------
   phone landscape
--------------------------------------*/
@media screen and (max-width: 640px) {

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

/*rejig header to bring search and menu link underneath logo
.sx-mo { padding: 0 !important; }
.sx-mi { padding-bottom: 0 !important; }
#sx-avatar { margin-left: 10px; }
#sx-search.show .sx-si { top: 140px !important; } 
#sx-search { margin-left: 0 !important; width: 100% !important; background: #32558d; min-height: 52px; }
.section-link { padding: 14px 45px 10px 80px !important; top: 88px !important; right: 0 !important; border-left: 1px solid #fff; }
a#search-link-alt { border-right: 1px solid #fff !important; }
#sx-tnv { top: 138px !important; }*/

/*reduce footer to single column*/
#sx-extras .ft-info { padding-top: 5px !important; }
#sx-extras .fservices h2, #sx-extras .fcontact h2 { font-size: 1.3em !important; padding-bottom: 5px !important; padding-top: 15px; }

#sx-extras .fservices, #sx-extras .flinks, #sx-extras .fservices ul, #sx-extras .fcontact ul, #sx-extras .fservices, #sx-extras .fcontact { width: 100% !important; float: none !important; }
#sx-extras .sx-ei { background: none !important; }
#sx-extras .fcontact ul li { width: 20% !important; }

}

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

/* collapse ANY table to single column
Careful with background colour to emphasise first cell. forums and asset browsers don't want that.*/

/*remove logo text in header and just leave icon*/
.sx-mo { padding: 0 10px; }
.logotxt { }
/* top menu */
.section-link { right: 10px; background-position: left 10px center; padding: 12px 10px 13px 60px; }
 /*
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; }*/



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: 0; margin-bottom: 10px; }
table tbody tr td:nth-child(1) { background: #003056; color: #fff; }      
table tbody tr td:nth-child(1) a:link, table tbody tr td:nth-child(1) a:visited { color: #fff; text-decoration: underline; }
table tbody td:before { content: attr(data-th); font-weight: bold; display: block; width: 100%; }




/* 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, .CategoryTreeView table { margin: 0; width: auto; }
.category-tree table tbody td, .CategoryTreeView table tbody td { display: table-cell; padding: 0; }
.CategoryTreeView table tbody > tr:first-child > td:first-child { border: 0; }
.CategoryTreeView table tbody tr > td:last-child, .CategoryTreeView table tbody td { border: 0; }

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

/*general formatting*/
h1 { font-size: 2.7em !important; }
.contenteditor .bnnrteal { padding: 10% !important; }
.contenteditor ol li { width: 100% !important; }
.contenteditor .bnnrblue { font-size: 2.85em !important; padding: 20px!important; }

/*lister formatting*/
.lister-lean .gamma li.first .item-ttl { font-size: 1.3em !important; line-height: 1.2em; }


/* resize all image assets */
.asset-inline, .oAssetInline { margin: auto; margin-bottom: 15px; float: none; }
.asset-inline .asset-width, .oAssetInline .clear { width: 100% !important; }
.asset-width img { max-width: 100%; height: auto !important; width: 100% !important; }

.item-img 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; }
.img-sm .asset-inline { float: left; padding-right: 10px; }

.panel.style-delta img, .panel.style-delta .asset-inline .asset-width { width: auto !important; }
.contactitems .asset-inline, .oAssetInline { float: left; margin-right: 10px; }

/*resize forward/back arrows*/
/*link arrow forward*/ .contenteditor .lkfrwd a { font-size: 1em !important; padding: 10px 40px 10px 10px !important; margin-left: 45px; }
/*link arrow back*/ .contenteditor .lkbck a { font-size: 1em !important; padding: 10px 10px 10px 40px !important; }

/*footer links to single row*/
#sx-extras .flinks li { width: 90%; float: none; display: block !important; padding: 5px 6px !important; }

}
@media screen and (max-width: 330px) {
/*remove search icon which is squashed on tiny screens*/	
#sx-search .button { background-image: none !important; padding-left: 0 !important; }
}