/**
 * The purpose of this file is to define CSS classes to create a fluid grid layout.
 * Includes optional sidebars depending on whether blocks are placed in the left or right sidebar regions.
 * 
 * LAYER 0: formatting for content containers
 */

/* Set the default width for content */
.layout-content  {
  max-width: 640px;  
  margin: 0 auto 0 auto;
}

/* Use an increased width for media-rich pages - history and windows pages (images) and sermon video pages */
/* problem is the first selector will only select body matching that class */
.context-sermon .layout-content,
.context-history .layout-content,
.context-windows .layout-content {
	max-width: 800px;
}

/* Use the greatest width for views that provide audio content and so need space for the audio players */
.path-lookwhostalking .layout-content,
.path-whyiamachristian .layout-content,
.path-sermons .layout-content {
	max-width: 960px;
} 

.region-footer {
	clear: left;
    float: left;
    width: 100%;
    margin: 0.75rem 0 0.5rem 0;
	background-color: var(--colour-grey-xD8);
}
 
/* Formatting specific to smaller screens (typically smartphones and tablets held in portrait */
@media all and (max-width: 959px) { 

/* Content should use the full screen width */
.region-content {
    float: left;
    width: 100%;
	margin: 0;
}

/* Left sidebar (if one is defined) is not displayed on smaller screens */
.region-sidebar-first {
    display: none;
}

}
/* End of smaller-screen formatting */

/* Formatting for larger screens (desktops and tablets held in landscape) */
@media all and (min-width: 960px) { 

/* Make header region fixed so the menu is always visible (at the top) */
body:not(.context-history) .region-header {
    top: 0;
    position: fixed;
    width: 100%;
	background-color: white;
	z-index: 100;
    border-bottom: 1px solid #d8d8d8;
}

/* Allow for admin navigation bar at the very top of the page */
.user-logged-in .region-header {
    top: 40px;
}

/* Position highlighted region below the (fixed) header region */
body:not(.context-history) .region-highlighted  {
    margin-top: 150px;          /* this is the header region's height */
}

/**
 * Center the page by setting both left and right margins to auto
 * Set maximum width of 1920px to allow the welcome banner to occupy the full screen width
 */
.layout-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1920px;    
}

/**
 * Left (first) sidebar (if defined) floats to the left
 */
.region-sidebar-first {
    float: left;
    height: auto;
    margin-left: 0;
    margin-top: 0;			/* allow space below the logo to align with the content container */
}
  
/**
 * Right (second) sidebar (if defined) floats to the right
 */
.region-sidebar-second {
    float: right;
    height: auto;
    margin-right: 0;
	margin-top: 0;			/* to align with the LH and content regions */
}
  
}