/* SOME BASIC RWD BEHAVIOUR */

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

/* resize all wrappers */
.sx-mo, .custom-menu-sx-tnv .style-element-inner, .sx-bdo, .sx-bdi, #sx-extras .sx-eo { width: 100%; }
/* spacing */
.sx-bi { padding: 0 25px; }
.sx-no { margin-left: 25px; }
.sx-co { padding-right: 25px; }
#sx-extras .sx-ei { padding: 0 25px; width: auto; }

/* header */
#sx-avatar { margin-left: 25px; }
a#login-button { margin-right: 25px; }
#sx-search { margin-right: 25px; width: 30%; }

/* top nav */
.custom-menu-sx-tnv .panel { width: 16.5%; text-align: center; }
.custom-menu-sx-tnv .panel.beta { width: 17.5%; }
.custom-menu-sx-tnv .panel.gamma { width: 17.5%; }
.custom-menu-sx-tnv .panel.delta { width: 14.5%; }
.custom-menu-sx-tnv a.title span { padding: 32px 0 0 0; }
.custom-menu-sx-tnv .alpha a.title span { padding: 44px 0 0; width: 100%; }
.custom-menu-sx-tnv .panel.alpha { border-left: 0; }
.custom-menu-sx-tnv .panel.zeta { border-right: 0; }
.custom-menu-sx-tnv .panel.zeta:hover .ddl-2 { margin-left: 0; right: 0; }

/* panel alpha */
.panel.style-alpha .panel-header span { font-size: 1.25em; }

/* panel beta */
.panel.style-beta .asset-inline img { width: 100% !important; height: auto !important; }
.panel.style-beta .asset-inline .asset-width { width: 100% !important; }
.panel.style-beta .contenteditor { width: 22%; padding: 20px 25px 0; }
.panel.style-beta .contenteditor p { margin-bottom: 25px; }

/* panel gamma */
.panel.style-gamma .asset-inline img { width: 100% !important; height: auto !important; }
.panel.style-gamma .asset-inline .asset-width { width: 100% !important; }

/* pagelister beta */
.lister.style-beta .lister-header h2.title { font-size: 1.25em; }
    
/* pagelister gamma */
.lister.style-gamma span.item-title { font-size: 1.25em; }
.lister.style-gamma span.item-summary { min-height: 145px; }

}


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

/* header */
#sx-masthead { position: relative; }
#sx-search { width: 38% }
#social-icons { position: absolute; margin: 0; right: 170px; top: 7px; }

/* wrappers */
#sx-nav { width: 28%; }
#sx-content { width: 72%; }
.sx-co { padding-left: 5%; }

/* footer */
#sx-extras .footer-links { margin-right: 10%; }

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

/* google maps */
.google-map { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 25px; }
.google-map iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/* panel beta */
.panel.style-beta { font-size: 0.9em; }
.panel.style-beta .contenteditor { width: 25%; padding: 20px 20px 0; }
.panel.style-beta .contenteditor p { margin-bottom: 20px; }

/* pagelister gamma */
.lister.style-gamma span.item-title { font-size: 1.15em; padding: 20px 20px 17px; min-height: 73px; }
.lister.style-gamma span.item-summary { padding: 20px 20px 25px; line-height: 1.6; min-height: 155px; }

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

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

/* header */
#sx-avatar { width: 50%; }
#sx-avatar img { width: 100% !important; height: auto !important; max-width: 429px; margin: auto; }

/* top nav */
.custom-menu-sx-tnv .panel.epsilon:hover .ddl-2 { right: 0; }

/* footer */
#sx-extras .footer-links { margin-right: 0; text-align: right; }

/* wrappers */
#sx-content, #sx-nav { width: 100%; }
.sx-co { padding: 0 25px 25px; }
.sx-no { margin: 0 25px; }
    
/* 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; }

/* panel beta */
.panel.style-beta { font-size: 1em; }
.panel.style-beta .contenteditor { position: static; width: 100%; padding: 30px 15px 40px; background: #fff; box-sizing: border-box; color: #444; }
.panel.style-beta .contenteditor h2 { color: #444; margin-bottom: 15px; }
.panel.style-beta .contenteditor p { margin-bottom: 20px; }
.panel.style-beta .contenteditor a:link, .panel.style-beta .contenteditor a:visited { color: #fff; background: #207fc9; }
.panel.style-beta .contenteditor a:hover, .panel.style-beta .contenteditor a:active, .panel.style-beta .contenteditor a:focus { color: #fff; }

/* panel delta */
.panel.style-delta .contenteditor a { min-height: 0; }
.panel.style-delta:hover { background-color:  #1478c6; color: white; }
.panel.style-delta .bdi:hover { color: white; }

/* pagelister gamma */
.lister.style-gamma li.oBoxItem { width: 50%; }
.lister.style-gamma li.oBoxItem:nth-child(3n) .item-container { margin: 0; }
.lister.style-gamma li.oBoxItem:nth-child(3n-1) .item-container { margin: 0; }
.lister.style-gamma li.oBoxItem:nth-child(3n-2) .item-container { margin: 0; }
.lister.style-gamma li.oBoxItem:nth-child(odd) .item-container { margin-right: 10px; }
.lister.style-gamma li.oBoxItem:nth-child(even) .item-container { margin-left: 10px; }
.lister.style-gamma span.item-title { min-height: 52px; }
.lister.style-gamma span.item-summary { min-height: 132px; }

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

/*  */
}

/*------------------------------------
   small tablet portrait / phone landscape
--------------------------------------*/

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

/* header */
#sx-masthead { border: 0; }
#sx-avatar { margin: 0 5%; width: 90%; margin-bottom: 15px; text-align: center; padding-top: 10px; }
a#login-button { margin: 0; float: left; padding: 0; text-align: center; width: 38%; color: #fff; }
a#login-button span { display: block; padding: 22px 0; height: 20px; background: #1478c6; border-left: 1px solid #fff; border-right: 1px solid #fff; }
#social-icons { display: none; }
#sx-search { position: absolute; bottom: 0; width: 80%; height: 62px; right: 0; margin: 0; display: none; }
#sx-search.show-mobile-search { display: block; }
#sx-search .element { background: #fff; }
#sx-search .textbox { height: 62px; }
#sx-search .button { height: 62px; }
#mobile-search-button { display: block; text-indent: -999em; background: #1478c6 url("/EasySiteWeb/EasySite/StyleData/emas_2016_master/Images/mobile-search.png") no-repeat center; float: left; width: 25%; height: 64px; outline: none; }
#mobile-search-close-button { text-indent: -999em; background: #1478c6 url("/EasySiteWeb/EasySite/StyleData/emas_2016_master/Images/mobile-search-close.png") no-repeat center; width: 20%; height: 64px; position: absolute; bottom: 0; left: 0; }
#mobile-search-close-button.show-mobile-search { display: block; }

/* wrappers */
.sx-bi { padding: 0 10px; }
.sx-co { padding: 0 10px 25px; }
.sx-no { margin: 0 10px; }
        
/* expand columns to 100% */
.column-outer { float: none; width: 100% !important; }

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

/* mobile-only content */
.mobile-only { display: block; }

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

/* top nav - switch to mobile version */
.custom-menu-sx-tnv .panel { width: 100%; text-align: left; }
.custom-menu-sx-tnv .panel.beta { width: 100%; }
.custom-menu-sx-tnv .panel.gamma { width: 100%; }
.custom-menu-sx-tnv .panel.delta { width: 100%; }
.custom-menu-sx-tnv a.title span { padding: 15px; text-transform: uppercase; }
.custom-menu-sx-tnv a.title:link, .custom-menu-sx-tnv a.title:visited { color: #fff; }
.custom-menu-sx-tnv .panel a.title:hover, .custom-menu-sx-tnv .panel a.title:active, .custom-menu-sx-tnv .panel a.title:focus { color: #1478c6; background: #fff; }
.custom-menu-sx-tnv .panel li.panel-item:hover a.title, .custom-menu-sx-tnv .panel li.panel-item:active a.title, .custom-menu-sx-tnv .panel li.panel-item:focus a.title { color: #1478c6; background: #fff; }
.custom-menu-sx-tnv .selected a.title:link, .custom-menu-sx-tnv .selected a.title:visited { color: #1478c6; background: #fff; }
.custom-menu-sx-tnv .alpha a.title span { padding: 15px; background-image: none; text-indent: 0; height: auto; }
.custom-menu-sx-tnv .alpha a.title:hover span, .custom-menu-sx-tnv .alpha a.title:active span, .custom-menu-sx-tnv .alpha a.title:focus span { background-image: none; text-indent: 0; color: #1478c6; background: #fff; }
.custom-menu-sx-tnv .alpha.selected a.title:link, .custom-menu-sx-tnv .alpha.selected a.title:visited { color: #1478c6; background: #fff; background-image: none; text-indent: 0; }
.custom-menu-sx-tnv .alpha.selected a.title span { background: #fff; background-image: none; }
.custom-menu-sx-tnv a.title:link, .custom-menu-sx-tnv a.title:visited { height: auto; }
.custom-menu-sx-tnv { position: absolute; }
#mobile-menu-button { display: block; text-align: center; text-decoration: none; color: #fff; font-weight: bold; padding: 22px 0; height: 20px; float: right; width: 37%; background: #1478c6; }
#mobile-menu-button span { background: url("/EasySiteWeb/EasySite/StyleData/emas_2016_master/Images/mobile-menu-button.png") no-repeat left center; padding-left: 30px; }
#sx-tnv { height: 0; border: 0; }
#sx-tnv .panel { height: 0; }
#sx-tnv.show-mobile-nav { height: auto; border-top: 9px solid #105184; border-bottom: 9px solid #105184; background: #105184; z-index: 1; }
#sx-tnv.show-mobile-nav .panel { height: auto; }
.custom-menu-sx-tnv .ddl-2 { display: none; }

/* footer */
#sx-extras .sx-ei { padding: 0 10px; }
#sx-extras .footer-links { clear: both; width: 100%; text-align: left; }
#sx-extras .footer-links li { width: 50%; float: left; }
#sx-extras .footer-links li:nth-child(even) { text-align: right; }

/* resize all image assets */
.asset-inline, .oAssetInline { margin: 0 auto 30px; 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; }

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

/* pagelister gamma */
.lister.style-gamma li.oBoxItem { width: 100%; }
.lister.style-gamma li.oBoxItem:nth-child(odd) .item-container { margin: 0; }
.lister.style-gamma li.oBoxItem:nth-child(even) .item-container { margin: 0; }
.lister.style-gamma span.item-title { min-height: 0; }
.lister.style-gamma span.item-summary { min-height: 0; }

/* forms */
#-ux-content .question, #-ux-content .form-search .element .question { width: 100%; text-align: left; }
#-ux-content .question .label { padding-left: 0; float: left; }
#-ux-content .answer, #-ux-content .form-search .element .answer { width: 100%; }

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

/* directory */
.oDirectoryBuilder .form-search .buttons { padding-top: 0; float: left; text-align: left; }
#-ux-content .oDirectoryBuilder .form-search .buttons input { margin: 0 1em 0.5em 0; }

.contenteditor { margin-bottom: 30px; }

/* membership module */
.contacts .console .form-search .buttons { width: 100%; margin-bottom: 20px; text-align: left; }
#-ux-content .contacts .console .form-search .buttons input { margin: 0 1em 0.5em 0; }

/* Contact us panels */
.panel.style-delta .pel-o .pel-i .panel-body .bdi .contenteditor { margin-bottom:0px; }
.panel.style-delta .pel-o .pel-i .panel-body .bdi .contenteditor .link-internal { padding-bottom: 45px; } 

}

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

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

.panel.style-zeta .contenteditor { width: 84%; }
}

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

/* footer */
#sx-extras .footer-links li { width: 100%; }
#sx-extras .footer-links li:nth-child(even) { text-align: left; }

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

/* pagelister default with images */
.lister span.item-image {  margin-bottom: 10px; }
.lister.show-images span.item-body-outer { margin-left: 0; clear: both; }

/* google maps */
.google-map { padding-bottom: 75%; }

.panel.style-zeta .contenteditor { width: 80%; }
}