/*-------------------------------------------------------
    NARROW DESKTOPS - up to 1280px
---------------------------------------------------------*/
@media only screen and (max-width: 1280px) {

/* hide launcher */
.launcher { display: none; }
body { padding-left: 0 !important; }

/* remove fixed widths on outer containers */
#sx-masthead, #sx-tnv, .sx-bdo, .sx-bdi, #sx-extras .sx-eo, #sx-search .sx-si { width: 100%; }

/* header */
#social { margin-left: 40px; }
#header-buttons a, #header-buttons a#login-button { margin-right: 30px; }

/* top nav */
#sx-tnv { width: 100%; margin-bottom: 13px; }
#sx-tnv .panel { padding: 0 7px 0 0; margin-bottom: 7px; }
#sx-tnv a.title h2 { padding: 0 13px; font-size: 0.9em; }
/* adjustments for longer titles */
#sx-tnv .panel.delta, #sx-tnv .panel.zeta, #sx-tnv .panel.eta { width: 126px; }
/* flow the last panels left instead of right */
#sx-tnv .panel.eta:hover .ddl-2 { left: 500px; }
#sx-tnv .panel.theta:hover .ddl-2 { left: 620px; }

/* stop scrollbars appearing when menu is shifted off screen */
body { overflow-x: hidden; }

/* content */
.sx-co { padding: 0 15px 0 30px; }
.sx-no { margin-left: 15px; }

/* footer */
#sx-extras .sx-ei { width: auto; padding: 0 15px; }
#sx-extras .footer-contact, #sx-extras .footer-links { width: 40%; }

/* promotion - news landing page */
.lister-carousel.lister-alpha { width: 100%; }
.lister-carousel.lister-alpha .article-asset { width: auto; padding: 0 45px; }
.lister-carousel.lister-alpha .article-asset img { width: 100% !important; height: auto !important; }

/* membership tabs */
.application #tabs .tabs-menu li { padding: 1em 1em; }

/* home page panels */
.panel.style-epsilon .chevron-link a { font-size: 1.286em; }

}

/*-------------------------------------------------------
    TABLET LANDSCAPE - up to 1024px
---------------------------------------------------------*/
@media only screen and (max-width: 1024px) {

/* header */
#sx-avatar { margin-left: 10px; }
#social { display: none; }
#sx-search form { margin-left: 25%; width: 50%; }
#header-buttons a#search-button, #header-buttons a#login-button, #header-buttons a#contact-button, #header-buttons a#basket-button { margin-right: 10px; padding-left: 50px; }

/* homepage panels */
.panel.style-nu { padding: 25px 20px; }
.panel.style-nu .icon { padding-right: 5px; width: 30%; }
.panel.style-nu .panel-body { font-size: 1.143em; width: 65%; }
.panel.style-nu .panel-body .contenteditor { line-height: normal; }
.mode-live .panel.style-epsilon .panel-body { top: 50px; }
.panel.style-epsilon .chevron-link { background-size: 32px; }
/*Home page links*/.contenteditor .homepagelinks	{ margin-left: 0; }

/* events calendar - hp */
.events .calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-title { padding-top: 35px; }
.events .calendar .ui-datepicker .ui-datepicker-next, .events .calendar .ui-datepicker .ui-datepicker-next-hover { right: 2px; left: auto; }

/*portlets*/
.portal-element-outer .portlet-body a { font-size: 0.9em; word-wrap: break-word; overflow: visible; }
.drop-zone-outer { width: 33% !important; }
.portal-element-outer .portlet-inner, .portal-element-outer .portlet-body { width: 99% !important; }

/* promotion - news landing page */
.lister-carousel.lister-alpha .article-content { width: 70%; padding-top: 10px; }
.lister-carousel.lister-alpha .article-asset { height: auto; }
.lister-carousel.lister-alpha .pagination-outer { top: 80px; }

/* make embedded videos resize nicely */
/* target the asset on news content page specifically, so it doesn't affect twitter feed on homepage */
.columns-sigma .column-alpha .asset-code { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; width: 100%; margin-bottom: 1.5em; }
.columns-sigma .column-alpha .asset-code iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* no longer reveal top nav dropdowns on hover */
#sx-tnv .panel:hover .ddl-2, #sx-tnv .panel.eta:hover .ddl-2, #sx-tnv .panel.theta:hover .ddl-2 { left: -999em; }
#sx-tnv .panel:hover a.title { background-image: none; color: #fff; background: #e28521; }
#sx-tnv a.title h2 { padding: 0 27px; }
/* adjustments for longer titles */
#sx-tnv .panel.delta, #sx-tnv .panel.zeta, #sx-tnv .panel.eta { width: 156px; }

/*--------------------
APPLICATION STAGE TWO
----------------------*/
.igem-appstage2 .attachment li.icon { width: 30%; }
.igem-appstage2 .attachment li.details { width: 70%; }


.oTabbedPanels .events.showcase.view-record .column-alpha .title { width: 70%; }

}

/*-------------------------------------------------------
    TABLET PORTRAIT - up to 820px
---------------------------------------------------------*/
@media only screen and (max-width: 820px) {

/* desktop only */
.mode-live .o-desk { display: none; }
/* tablet only */
.mode-live .o-tab { display: block; }

/* resize large image assets using structural element container with custom classname - this may or may not be required */
.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; }

/* remove top ux bar */
body { padding: 0 !important; }
body #ux-bar { display: none; }

/* make image assets 100% of container
#sx-content img { max-width: 100%; height: auto !important; width: 100% !important; }
#sx-content .date-picker img { width: auto !important; }
#sx-content .oDirectoryBuilder .entry-outer .asset-inline .asset-width, #sx-content .oDirectoryBuilder .entry-outer .asset-inline img { width: auto !important; }
#sx-content .widget_inner_wrapper img { width: auto !important; }
.asset { width: 100%; }
.asset-width, .asset-inline, .oAssetInline, .oAssetInline .clear { width: 100% !important; margin-left: 0; margin-right: 0; }
.portlet-body .asset, .portlet-body .asset-width, #sx-content .portlet-body img { width: auto !important; } */
/* not toolbar icons
#sx-content .gui-toolbar img { width: auto !important; } */
/* or certain other images
#sx-content .columns-psi img { width: auto !important; }
#sx-content .oForums img { width: auto !important; }
#sx-content .panel.style-upsilon img { width: auto !important; }
#sx-content .panel.style-psi img { width: auto !important; }
#sx-content .event-attendance-options .editor-alert-outer li.icon img { width: auto !important; } */

/* header */
#sx-avatar { width: 190px; }
#sx-avatar img { width: 100% !important; height: auto !important; }
#header-buttons { margin-top: 43px; }

/* footer */
#sx-extras .footer-contact { width: 60%; }
#sx-extras .footer-logos { clear: both; }
#sx-extras .footer-logos a { display: inline; padding-right: 35px; }

/* headings */
h1 { font-size: 2.571em; }
h2 { font-size: 1.286em; }
h3 { font-size: 1.143em; }
h4 { font-size: 1.071em; }
h5 { font-size: 1em; }

/* content */
#sx-nav { width: 30%; }
#sx-content { width: 70%; }

/*portlets*/
.oPortalUIBody ul li span.label-text { font-size: 0.9em; }

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

.columns-psi .column-outer { width: 50% !important; }
.columns-psi .column-beta .column-inner { margin: 0; }

/* homepage/landing page panels */
.panel.style-epsilon .panel-header { top: 60px; }
.panel.style-epsilon .panel-header h2 { font-size: 1.071em; }
/* .panel.style-theta, .panel.style-iota, .panel.style-kappa { margin-bottom: 20px; } */
.panel.style-nu { padding: 20px 15px; }
.panel.style-zeta .panel-header h2 { font-size: 1.071em; }
/* epsilon */
.mode-live .panel.style-epsilon .panel-body { top: 25px; }

/* forms */
.oDataFormFieldset .fields .answer select { width: 70%; }
.oDataFormFieldset .fields .answer input { width: 90%; }

/* promotion - news landing page */
.lister-carousel.lister-alpha .pagination-outer { top: 50px; }
.lister-carousel.lister-alpha .body-outer { height: 200px; }
.lister-carousel.lister-alpha .wrapper { height: auto; }
.lister-carousel.lister-alpha .wrapper ul li { min-height: 0; }

/* directory builder */
.oDirectoryBuilder .form-search { width: auto; padding: 30px 0; margin-right: 7px; }
.oDirectoryBuilder .form-search .oDataFormFieldset, .oDirectoryBuilder .form-search .buttons { padding: 0 30px; }
.oDirectoryBuilder .AZLinkBar { width: 100%; }

/* top nav */
.swiper-container #sx-tnv .panel.epsilon a.title h2, .swiper-container #sx-tnv .panel.theta a.title h2 { padding: 16px 30px 0 30px; line-height: normal; }
.swiper-container #sx-tnv a.title h2 { padding: 0 15px; }

/* events showcase */
.events.showcase .column-alpha .date-to span { padding-right: 10px; }

/* membership tab panels */
fieldset.membershipapplicationouterfs .question, fieldset.membershipapplicationouterfs .answer { width: 100%; }
.application #tabs .tabs-menu li { display: block; padding: 1em 2em; border-width: 0; }

/*--------------------
APPLICATION STAGE TWO
----------------------*/
/* layout */
.igem-appstage2 .uploads-docs, .igem-appstage2 .uploads-help { width: 100%; float: none; clear: both; }
.igem-appstage2 .attachment li.icon { width: 15%; }
.igem-appstage2 .attachment li.details { width: 85%; }
}

/*-------------------------------------------------------
    MOBILE LANDSCAPE - up to 667px
---------------------------------------------------------*/
@media only screen and (max-width: 667px) 
{
    
/* custom classes for showing / hiding RWD material */
/* desktop & tablet */
.mode-live .x-mob { display: none; }
/* tablet only */
.mode-live .o-tab { display: none; }
/* mobile only */
.mode-live .o-mob { display: block; }   

/* resize all image assets */
/* what about panel icons? do I need to target those separately? */
.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 - this may or may not be required */
.img-sm img, .img-sm .asset-inline .asset-width { width: auto !important; }
.panel.style-nu img { width: auto !important; }

/* header */
#sx-avatar { margin-bottom: 10px; }
#header-buttons { width: 100%; margin: 10px 0 20px; text-align: center; }
#header-buttons a { text-indent: -999em; display: inline-block; float: none; width: 10px; }
a#search-close { margin-right: 10px; }
#sx-search form { margin-left: 20%; width: 60%; }
.not-logged-in #header-buttons { margin: 15px 0; }

/* top nav - use mobile version */
#topnav-wrapper .style-element-body { display: block; overflow: hidden; }

#mobile-menu { display: block; }
a#mobile-menu-close-button { display: block; background: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/mobile-nav-close.png") no-repeat top left; width: 33px; height: 26px; text-indent: -999em; float: left; margin: 15px 0 0 0; }

#topnav-wrapper { background: #f68e1e; padding: 15px 0 20px 0; overflow: hidden; position: absolute; top: -135%; left: 0; transition: top 0.75s ease-out; z-index: 99; }
#topnav-wrapper.show-mobile-menu { top: 0; transition: top 0.5s ease-in; }

#sx-tnv { background: #f68e1e; }
#sx-tnv { width: 85%; margin: 0; float: left; clear: none; }
#sx-tnv .panel { background: #f68e1e url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/mobile-nav-arrow.png") no-repeat left center; width: 100%; padding: 0; margin: 0; }
#sx-tnv .panel.delta, #sx-tnv .panel.zeta, #sx-tnv .panel.eta { width: 100%; text-align: left; }
#sx-tnv a.title:link, #sx-tnv a.title:visited { background: transparent; color: #fff; height: auto; font-size: 1.071em; }
#sx-tnv a.title h2 { padding: 13px 0 13px 40px; line-height: normal; text-transform: none; }
#sx-tnv .panel.delta a.title h2, #sx-tnv .panel.zeta a.title h2 , #sx-tnv .panel.eta a.title h2 { padding: 13px 0 13px 40px; }
#sx-tnv .panel:hover a.title { background: #f68e1e url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/mobile-nav-arrow.png") no-repeat left center; }
#sx-tnv .selected a.title:link, #sx-tnv .selected a.title:visited { color: #fff; background: #f68e1e url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/mobile-nav-arrow.png") no-repeat left center; }
#sx-tnv .selected:hover a.title { color: #fff; background: #f68e1e url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/mobile-nav-arrow.png") no-repeat left center; }
    
/* move side nav underneath content */
#sx-content, #sx-nav { width: 100%; }
.sx-co { padding: 0 10px; }
.sx-no { margin: 0 10px; }

/*portlets*/
.oPortalUIBody ul li { width: 50% !important; }
/* ensure columns wrap and clear correctly */
.drop-zone-outer.oDelta { clear: both; }
.portal-element-outer .portlet-inner { height: auto; }


/* footer */
#sx-extras .footer-contact { width: 100%; padding-bottom: 10px; }
#sx-extras .footer-links { width: 100%; }
#sx-extras .footer-logos a { display: block; }
#sx-extras .sx-ei { padding: 0 10px; }

/* switch to different view for rwd */
.columns-mu .column-alpha { display: none; }
.columns-mu .column-beta { display: block; }

/* tabbed panels */
.oTabbedPanels .tabs-menu-outer { width: 100%; float: none; }
.oTabbedPanels .tabs-body-outer { width: 100%; float: none; }
.oTabbedPanels .tabbed-zone-body { background: none; }


.oTabbedPanels .tabs-body-inner { padding: 20px 0 20px 20px; }
.oTabbedPanels .events.view-record .event-details .element[id$="Description"] { width: 100%; }
.oTabbedPanels .contenteditor { text-align: left; left: 20px; padding-top: 80px; }
.oTabbedPanels .events.view-record .event-details .element[id$="StartDate"] { padding-bottom: 7.5em; }
.oTabbedPanels .tabs-menu-outer li { margin-left: -1px; }
.oTabbedPanels .tabs-menu-outer .tab-selected { margin-left: 0; }

/* TAB PANELS STYLE 3 - My Technical Standards */
.oTabbedPanels.tabbed-zone-zeta .tabs-menu-outer li { float: none; width: 100%; margin-left: 0; }
.oTabbedPanels.tabbed-zone-zeta .tabs-menu-outer li.tab-alpha { border-bottom-color: #dadada; }
.oTabbedPanels.tabbed-zone-zeta .tabs-menu-inner { padding: 0 10px; }
.oTabbedPanels.tabbed-zone-zeta .tabs-body-inner { padding: 20px 10px 0; }

/* promotion - news landing page */
.lister-carousel.lister-alpha .body-outer { height: 220px; }

/* pagelisters */
.lister-list .item-body-outer { clear: both; }
.oTabbedPanels.tabbed-zone-epsilon .lister-list li:nth-child(2n+1) .item-container { padding: 0; }

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

/* forms */
.oFormBuilder .form .question, .question { width: 100%; }
/* retain values for checklists - after 7.5 upgrade */
.checklist .question { width: 25%; }
.oFormBuilder .form .answer, .answer { width: 100%; }
.checklist .answer { width: 75%; }
.oFormBuilder .form .answer .textbox, .oFormBuilder .form .answer .textarea { width: 95%; }
/* multi-part phone numbers */
.form .telephonenumberone input.textbox, .form .TelephoneNumberTwo input.textbox, .form .TelephoneNumberThree input.textbox, .form .companytelephonenumber .answer input.textbox { width: 95% !important; }
/* prevent overflow */
.accountclaiming .form input, .accountclaiming .form select, .registration .form input, .registration .form select { max-width: 94%; }
.form input.textbox, .form .element textarea {  max-width: 90% !important; }

/* events booking */
.igem-events.view-booking-options .question { width: 100%; } 
.igem-events.view-booking-options .answer { width: 100%; }
/* 
.igem-events.view-booking-options .jspPane div.attendee > span:first-child { width: 100%; }
.igem-events.view-booking-options .jspPane div.attendee > span:nth-child(4) { width: 100%; }*/

/* homepage panels */
.panel.style-nu { padding: 20px 15px; }
.panel.style-nu .icon { padding-right: 0; width: 100%; text-align: center; }
.panel.style-nu .panel-body { font-size: 0.857em; width: 100%; text-align: center; }
/* epsilon */
.panel.style-epsilon { height: 40px; }
.mode-live .panel.style-epsilon .panel-body { top: 0 !important; left: 0; }
.panel.style-epsilon .chevron-link a { margin-right: 0; padding: 0; opacity: 1; filter: alpha(opacity=100); text-align: left; }
.contenteditor .homepagelinks { display: block; padding: 5px 42px 5px 20px; }

.panel.style-epsilon .chevron-link { background: #e28521 url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/chevron-w.png") no-repeat right 10px center; background-size: 14px; opacity: 0.9; filter: alpha(opacity=90); }
.contenteditor .homepagelinks	{ background: transparent; }
.green .panel.style-epsilon .chevron-link { background-color: #8bc63e; background-image: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/chevron-w.png"); background-size: 14px; }
.green .panel.style-epsilon .icon { }
.green .panel.style-epsilon .homepagelinks { background-color: transparent; }
.blue .panel.style-epsilon .chevron-link { background-color: #0696d7; background-image: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/chevron-w.png"); background-size: 14px; }
.blue .panel.style-epsilon .homepagelinks { background-color: transparent; }
.purple .panel.style-epsilon .chevron-link { background-color: #a0219f; background-image: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/chevron-w.png"); background-size: 14px; }
.purple .panel.style-epsilon .homepagelinks { background-color: transparent; }
.red .panel.style-epsilon .chevron-link { background-color: #e51836; background-image: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/chevron-w.png"); background-size: 14px; }
.red .panel.style-epsilon .homepagelinks { background-color: transparent; }
.yellow .panel.style-epsilon .chevron-link { background-color: #fcb814; background-image: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/chevron-w.png"); background-size: 14px; }
.yellow .panel.style-epsilon .homepagelinks { background-color: transparent; }


/*--------------------------
 New Events Showcase View
-------------------------- */
.events.showcase .column-alpha { width: 100%; float: none; clear: both; }
.events.showcase .column-beta { width: 100%; float: none; clear: both; }

.events.showcase .description .answer { text-align: center; }
.events.showcase .description .answer p { clear: both; text-align: left; }
.events.showcase .description img { margin: 0 auto 2em; float: none; clear: both; }

.oTabbedPanels .events.showcase.view-record .column-alpha .title { width: 100%; float: none; }

.brochure .column-alpha img { max-width: 100%; float: left; }
.event-attendance-options { float: none; clear: both; width: 100%; }

/* login */
.oLoginPanel { width: 95% !important; }

/*--------------------
APPLICATION STAGE TWO
----------------------*/
.igem-appstage2 .item-row .item-row-i { padding-left: 10px; }
.igem-appstage2 .item-row .item-title { width: 88%; margin-left: 12%; }
.igem-appstage2 .item-row .uploader-btn { width: 100%; margin: 1em 0; }
.igem-appstage2 .item-row .upload-section.uploader { width: 100%; }

/* pre basket */
.panel > .pel-inner { padding: 10px; }
  
.pre-basket table { margin: 0 auto; border-collapse: collapse; width: 100%; }
.pre-basket table thead { display: none; }
.pre-basket table tbody td { display: block; padding: 1em; border-bottom: 1px solid #ebebeb; }
.pre-basket table tbody tr td:nth-child(1) { background: #f4f4f4; }      
.pre-basket table tbody tr td:nth-child(1) a:link, .pre-basket table tbody tr td:nth-child(1) a:visited {  }
.pre-basket table tbody td:before { content: attr(data-th); font-weight: bold; display: inline-block; width: 7rem; }

/* form search list */
.oDataFormAnswer li, .answer li { width: 100%; float: none; clear: both; }
}

/*-------------------------------------------------------
    MOBILE PORTRAIT - up to 400px
---------------------------------------------------------*/
@media only screen and (max-width: 400px) {

.oAssetInline { margin-left: 0 !important; margin-right: 0 !important; }

/* top nav */
#sx-tnv { width: 80%; }

/* panels */
.panel.style-alpha .pel-i { padding: 15px; }

/* forms */
.oDataFormQuestion, .question { width: 100%; }
.oDataFormAnswer, .answer { width: 100%; }
.oDataFormFieldset .fields .answer select { width: 95%; }
/* pre basket */
.standard-total .question, .standard-total .answer { width: auto; }

/* tabbed panels */
.oTabbedPanels .events.view-record .event-details .element[id$="StartDate"] { padding-bottom: 11em; }
.oTabbedPanels .tabs-menu-outer a { font-size: 0.9em; padding: 20px 10px; }

/*portlets*/
.drop-zone-outer { width: 50% !important; }
.drop-zone-outer.oGamma { clear: both; }
.drop-zone-outer.oDelta { clear: none; }
.drop-zone-outer.oEpsilon { clear: both; }
.oPortalUIOptions ul li a#configurePortal:link, .oPortalUIOptions ul li a#configurePortal:visited, .oPortalUIOptions ul li a#resetPortal:link, .oPortalUIOptions ul li a#resetPortal:visited { font-size: 1em; padding: 8px; }

/* promotion - news landing page */
.lister-carousel.lister-alpha .pagination-outer { top: 190px; }
.lister-carousel.lister-alpha .article-content { width: 100%; }
.lister-carousel.lister-alpha .article-asset { padding: 0; }

/* pagelisters */
.lister-list .item-image { width: 100%; }

/* membership tab panels */
fieldset.membershipapplicationouterfs select { max-width: 240px !important; }

/* events */
.event-attendance-options .editor-alert-outer li.icon { width: 20%; }
.event-attendance-options .editor-alert-outer li.editor-message-outer { width: 80%; }
.event-attendance-options .editor-alert-outer .editor-synopsis { padding: 0.8em 1em; font-size: 1em; }

/*--------------------
APPLICATION STAGE TWO
----------------------*/
.igem-appstage2 .attachment li.icon { width: 20%; }
.igem-appstage2 .attachment li.details { width: 80%; }

/* prevent overflow */
.accountclaiming .form input, .accountclaiming .form select, .registration .form input, .registration .form select { max-width: 240px; }
.form input.textbox, .form .element textarea {  max-width: 250px !important; }

}