/* Hiding the mobile column and changing widths - event calendar, forum */
.columns-mu .column-outer { float: none !important; width: 100% !important; clear: both !important; }
.columns-mu .column-alpha, .columns-mu .column-beta { display: block; }
.columns-mu .column-beta { display: none; }

/*-------------------------------------------------------
    TABLET LANDSCAPE - up to 960px
---------------------------------------------------------*/
@media only screen and (max-width: 960px) {
    
.launcher { display: none; }
#header-outer, #header-outer-logged-in { width: 100%; }
#menu-outer, #menu-outer-logged-in { width: 100%; }
#breadcrumb-outer { width: 100%; padding: 7px 0 21px 0; }
#breadcrumb-inner { padding: 0 25px; }
#main-outer, #main-outer-logged-in { width: 100%; }
#footer-alpha-inner { width: 100%; }
#footer-beta-inner { width: 100%; }

#left-outer { width: 23%; }
#left-inner { width: auto; }
#content-outer { width: 76%; }
  
/* promotion */  
.lister-carousel.lister-alpha { height: auto; width: auto; }

/* login */
#login-outer .oLoginFormElement .oLoginFormAnswer { width: 60%; }
#login-outer .oLoginFormElement .oLoginFormTextbox { width: 80%; }

}

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

/* admin bar */
#faux #ux-bar { min-width: 0 !important; }
#faux #ux-bar .ux-sites { width: 100px !important; }
	
/* top menu */
#nav-wrapper { overflow: visible; }
#menu-outer, #menu-outer-logged-in, #header-outer { background: #121630; }
#SCP-Top-Nav { background: #ae1833; width: 100%; }

/* Search Panel */
#search-panel-outer { width: 100%; }
#search-panel-inner { width: 238px; float: right; }
#search-form-outer { margin-top: 0; }

/* content area */
#left-outer { width: 30%; }
#content-outer { width: 70%; border-left: 1px solid #acafc0; }
#main-inner { background: #fff; }

/* footer */
.tagline { text-align: left; float: left; width: 100%; margin: 10px 0 0 10px; }
a.footer-logo { padding: 11px 10px 6px 0; }

/* login panel */
#login-outer .oLoginFormElement { width: 38%; }
#login-outer div#login-form-inner > div.oLoginFormElement:last-child { width: 20%; }

/* columns */
.columns-alpha { background: transparent; }
.columns-alpha .column-alpha { width: 70% !important; }
.columns-alpha .column-beta { width: 30% !important; }

}

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

/* admin bar */
#faux #ux-bar { display: none; }

/* Switch to hidden column - event calendar, forum */  
.columns-mu .column-alpha { display: none; }
.columns-mu .column-beta { display: block; }

/* header */	
#header-inner { height: auto; }

/* LOGIN */
/* logged in*/
#login-outer {  width: 100%; margin-top: 30px; }
#login-inner-edit { width: 100%; font-size: 1.2em; }
.oLoginFormTitle { margin: 10px .1em 10px 20px; }
.oLoginFormAnswerText { margin: 10px 10px 10px 0; }
#login-outer #login-inner-edit div#login-form-inner > div.oLoginFormElement:last-child { margin: 10px; width: 30%; }
/* not logged in*/
#login-inner .oLoginFormElement { width: 100%; margin: 0 0 5px 0;  }
#login-inner .oLoginFormElement:last-child { width: 20%; }
#login-inner .oLoginFormElement .oLoginFormAnswer { padding: 0 15px; }
#login-inner .oLoginFormButtonContainer .oDataFormButton { margin-left: 15px; }
#login-links-outer li.forgotten a:link, #login-links-outer li.forgotten a:visited { margin: 0 0 5px 15px; }

/* header buttons */
#header-buttons { width: 100%; margin-top: 52px; }  
.header-button { width: 50%; }
.header-button .inner { padding: 0 2px 0 32px; }
/* search */
#search-panel-outer { width: 100%; background: #c4576a; }
#search-panel-inner { width: 100%; }

/* hide/show nav */
a.section-link:link, a.section-link:visited { display: block; }
#SCP-Top-Nav { display: none; }
#menu-outer { display: block; width: 100%; }
#SCP-Top-Nav.show { display: block; }
/* show DD sections list */
.show { display: block !important; }
.footer-menu-panel { float: none; width: 100%; border-top: 6px solid #4a4f75; }
#SCP-Top-Nav .fn-panel-alpha { padding-left: 0; }
span.fm-panel-title { padding: 0 8px 0 20px; font-size: 1.5em; }
  
/* move side nav down */
#left-outer { width: 100%; }
#left-inner { width: 100%; }
#content-outer { margin: 0 0; float: none; width: 100%;  border-width: 0; }

/* footer */
#footer-alpha-outer { background: #acafc0; }
#footer-alpha-inner { background: #acafc0; }
#foot-logo, #social-media { float: none; clear: both; width: 100%; }
a.footer-logo { float: none; margin-left: 20px; }
#foot-logo { display: none; }
.tagline { display: none; }
ul.footer-links li { padding-right: 10px; }

/* expand columns */
/* Columns Alpha */ 
.element-column-left-alpha-outer { width: 100% !important; }
.element-column-right-alpha-outer { width: 100% !important; }
/* Columns Beta [With Right Hand Formatting in this example] */
.element-column-left-beta-outer { width: 100% !important; }
.element-column-right-beta-outer { width: 100% !important; }
/* multi columns */
.columns-alpha .column-outer { width: 100% !important; border-bottom: 1px solid #d4d4de; margin-bottom: 10px; }
.columns-alpha .column-alpha { width: 100% !important; }
.columns-alpha .column-alpha .column-inner { padding-right: 0; }
.columns-alpha .column-beta { width: 100% !important; }
.columns-alpha .column-beta .column-inner { padding-left: 0; }
/* Multi columns - beta with vertical dividers - for three columns. dividers are on the centre column, which should be the longest, therefore they should match the height of the page */
.columns-beta .column-outer { width: 100% !important; border-bottom: 1px solid #d4d4de; margin-bottom: 10px; }
.columns-beta .column-beta { background: transparent; }  
.columns-beta .column-alpha .column-inner { padding: 0; }  
.columns-beta .column-beta .column-inner { background: transparent; padding: 0; }  

/* promotion */
.lister-carousel.lister-alpha { background: #313862; height: auto;  width: auto; }  
.lister-carousel.lister-alpha .body-outer { height: 220px; }
.lister-carousel.lister-alpha .wrapper { height: auto; }
.lister-carousel.lister-alpha .wrapper ul li { min-height: 0;  width: auto; }
.lister-carousel.lister-alpha .article-asset img { display: none; }
.lister-carousel.lister-alpha .article-content { top: 0; }
.lister-carousel.lister-alpha .pagination-outer { top: 180px; }

/* Accordion Panels - used on homepage */
.oAccordionPanels { margin: 0; }
.oAccordionPanels .tab-outer { width: 100%; float: none; clear: both; }
.oAccordionPanels .tab-header-outer { display: block; }
/* tab styling */
.oAccordionPanels span.ui-icon { display: none; }
.oAccordionPanels .tab-header-outer { background: #4a4f75; display: block; line-height: 1em; height: auto; border-width: 0; border-bottom: 6px solid #3d426a; }  
.oAccordionPanels .tab-header-inner { background: url("/EasySiteWeb/EasySite/StyleData/SCP_2013_Master/Images/hp-tab-open2.gif") no-repeat right top; }  
.oAccordionPanels .tab-header-outer ul { margin-right: 20px; }  
.oAccordionPanels .tab-header-outer li { padding: 0; display: block; clear: none; float: left; }  
.oAccordionPanels .tab-header-outer ul li.header { width: 80%; margin: 0 0 0 20px; padding: 4px 0; }  
.oAccordionPanels .tab-header-outer li.expander { position: relative; width: 14%; display: none; }  
.oAccordionPanels .tab-header-outer h2 { color: #fff; }
.oAccordionPanels .tab-header-outer a:link, .oAccordionPanels .tab-header-outer a:visited { font-size: 1.2em; color: #fff; padding: 10px 0; display: block; }
/* tab content */
.oAccordionPanels .tab-body-outer { padding: 20px 20px 0; }  
/* hide page panel headers */
.oAccordionPanels .page-element-outer .panel-header-outer { display: none; }
/* overwrite inline styles */
.oAccordionPanels .tab-body-outer { display: none !important; height: auto !important; border-bottom: 6px solid #3d426a; }
.oAccordionPanels .expanded .tab-body-outer { display: block !important; }

/* blog */
.oBlogElement .element-column-left-alpha-outer { background-image: none; }
.oBlogElement .element-column-left-alpha-outer .element-column-left-alpha-content { padding-right: 0; }
.oBlogElement .element-column-right-alpha-outer { border-top: 2px solid #d2d4dd; }
.oBlogElement .element-column-right-alpha-outer .element-column-right-alpha-content { padding: 20px 0 0 0; }

/* event calendar */
.columns-mu .column-beta h1 { margin-bottom: 5px; }

/* forums */
.columns-mu .column-beta .ContentEditor p { margin-bottom: 5px; border-bottom: 2px solid #d2d4dd; padding: 10px 0 7px 0; font-weight: bold; }

/* wide images */
.panel.style-epsilon .asset-inline .asset-width, .panel.style-epsilon .oAssetInline .clear { width: 100% !important; }
.panel.style-epsilon .asset-width img { max-width: 100%; height: auto !important; width: 100% !important; }
    
}

/*-------------------------------------------------------
    MOBILE PORTRAIT - up to 400px
---------------------------------------------------------*/
@media only screen and (max-width: 400px) 
{
	
/* LOGIN */
/* logged in*/
#login-outer .oLoginFormElement { width: 35%; }
#login-outer div#login-form-inner > div.oLoginFormElement:last-child { width: 25%; }
/* not logged in*/
#login-inner .oLoginFormElement { width: 100%; }
#login-inner div#login-form-inner > div.oLoginFormElement:last-child { width: 20%; }

/* pagelister alpha, with images and large title - podiatry now */
.oHeadlineBoxStyleAlpha li.oBoxItem { padding-top: 10px; margin-top: 10px; }
.oHeadlineBoxStyleAlpha .oBoxItemImage { float: none; margin-bottom: 8px; }

/* directories */
.oDataGrid th { display: none; }
.oDataGrid td { display: block; width: 100%; }

/* promotion */
.lister-carousel.lister-alpha .article-content { width: 250px; }

/* blog */
.oBlogPostedBy img, .posted-by img { display: block; }

/* event calendar */
.oEventsList .oDataFormQuestion { width: 90px; }
.oEventsList .oDataFormAnswer { width: auto; }

}