/*Ensures that a vertical scroll bar is always displayed in Fire fox - stops the layout jumping about if the page is longer than the browser display area */
 html
  {
   overflow-y: scroll;
   height: 100%;
   font-size: 90%;
  }
 
 /**
  *Default fonts and sizes for the site - may want to change this so that it can be set by the editor
  */   
 body
  {
   font-family: Open Sans, Arial, Helvetica;
   padding: 0px;
   padding-top: 50px; 
   margin: 0px;
   position: relative;
  }
 
 a
  {
    border-radius: 3px;
    text-decoration: none;
  }
 
 a:focus, a:hover
  {
    text-decoration: underline;
  } 

 :focus 
   {
     outline: none;
   }

  /*Default focus indicator for accessibility*/
  /*This will be overridden for menus by get menu.css which will ensure that the outline has sufficient contrast*/
  li:focus-within
   {
    outline: 2px solid black;
   }


 /**
  * Defines a fixed background div occupying the top region of a page over which the page title will display
  * THe colour and any background image to use is set in the editor  
  */ 
 #background
   {
    position: fixed;
    z-index: -3;
    top: 0px;
    border-bottom: 4px solid #bbbbbb;
    height: 400px;
    width: 100vw;
    background-size: cover;
    background-repeat: no-repeat;
   } 
 
 /**
  * Sits abive the page frame allowing running site banner to be displayed
  * The text of the banner and any image for the banner is set in the editor  
  */ 
 div#topbanner
  {
   position: relative;
   max-width: 1015px;
   margin-left: auto;
   margin-right: auto;
   min-height: 25px;
   background-position: right;
   background-repeat: no-repeat;
   background-size: contain;
   font-family: DejaVu;
   border-top-right-radius: 5px;
   border-top-right-radius: 5px;
  }
 
 #topbanner-text
  {
   padding-left: 5px;
   min-height: 1px;
   color: white; 
   background-color: transparent;
  }  

 #topbanner-text h1
  {
   margin: 0px;
   font-size: inherit;
   font-family: inherit;
   font-weight: normal;
  } 

 div#language-selector-bar
  {
   position: relative;
   overflow: hidden;
   max-width: 1015px;
   margin-left: auto;
   margin-right: auto;
   padding-right: 5px;
  }  
 
 div#language-selector-container
  {
    float: right;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    border: solid 1px #777777;
  }
  
 div.mycms-language-selector
  {
   display: inline-block;
   margin-left: 5px;
   padding-left: 3px;
   padding-right: 3px;
   padding-bottom: 2px;
   border-radius: 5px;
  } 
 
 input.mycms-language-selector:focus-visible
  {
    outline-offset: -2px;
  }

 /**
  * The width of the page over the background is set by the page frame
  * Within the page frame are placed the following
  * Menu bar - this sits at the top of the page frame and acts as a container for menu buttons - colour for this are set using the editor and picked up using getmenucss.php
  * Meu sider bar - this is floate to the left of the page frame beneath the menu bar - it should be present in all templates but may be shrunk to 1px in width when not reuired. 
  *                  the width of the menu bar is contraolled by the loader.php script - other button styles are specified in menus.css
  * Content - this is left floated and appears to the right of the side bar menu - the spacing between it and the side bar is determined by the right margin of the side bar
  *           within the content appear divs with class column - these are editble divs into which the user can place content when logged in                
  */
 
 /*determines the width font etc of the main body of a page - also handles centering in everything but EI */

 /*
 * This needs to be converted to a grid layout and mad responsive with break points
 */
 
 div#maincontainer, #columncontainer
  {
    display: flex;
  }

 div#pageframe
  {
   position: relative;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
   padding: 0px;
   padding-bottom: 20px;
   margin-bottom: 20px;
   max-width: 1015px;
   min-height:650px;      
   background-color: #ffffff;
   border-top-left-radius: 5px;
   border-right: solid 4px #bbbbbb;
   border-left: solid 4px #bbbbbb;
   border-top: solid 4px #bbbbbb;
   box-shadow: 0px 10px 5px #a0a0a0;
  }

@media screen and (max-width:1015px)
 {
  div#pageframe, div#topbanner, div#language-selector-bar
   {
     max-width: 100vw;
   } 
 }

 div#pageframe:after
  {
   content: "";
   position: absolute;
   z-index: -2;
   top: 0px;
   left: 0px;
   bottom: 0px;
   right: 0px;
   background-color: #ffffff;
  } 

 /*Sits under the page frame make sure the bottom of the page stretches all the way down*/
 div#bottomfeeder
  {
   position: fixed;
   bottom: 0px;
   top: 20px;
   height: 100%;
   width: 100%;
   padding: 0px;
   z-index: -1;
  }
 
 div#bottomfeeder-display
 {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  height: 100%;
  background-color: #ffffff;
  border-right: solid 4px #bbbbbb;
  border-left: solid 4px #bbbbbb;
 } 
 
div#bottombanner
  {
   background-color: #ffffff;
   margin-left: auto;
   margin-right: auto;
   max-width: 1015px;
   border-radius: 5px;
   border-right: solid 4px #bbbbbb;
   border-left: solid 4px #bbbbbb;
   padding-bottom: 20px;
   box-shadow: 0px 10px 10px #a0a0a0;
  }
 
 #bottombanner a:focus
  {
    outline: 2px solid black;
  } 

 #content
  {
   font-size: 0.9rem; 
   padding-top: 20px;
   position: relative;
   overflow: hidden;
   display:inline-block;
   padding-left: 10px;
   padding-right: 10px;
   box-sizing: border-box;
   flex-grow: 1;
   flex-shrink: 1;
  }
  
 
 .column.pageheading
  {
   position: relative;
   overflow: hidden;
   clear: right;
   float: none;
  } 
 
 /**
  * Layout for the h1 element of a page
  */    
 .column.pageheading h1
  {
   margin-top: 0px;
   margin-bottom: 5px;   
  } 
 
 /*layout for the h2 element within a section heading*/
 .column .sectionheading h2
  {
   margin-top: 0px;
   margin-bottom: 5px;
   font-size: 1.2rem;
  }
 
 /**
  *Adds borders to the headings for columns when displayed as news
  *N.B. There will be no facility in the interface for switching this on and off since it is deprecated but has to be there for backeards compatability
  **/
 .column.news .sectionheading
  {
    border-top: solid 2px #777777;
    border-bottom: solid 2px #777777;
  }
  
 /**
  *Control the visibility of section headings
  */
 .sectionheadinghidden
  {
   display:none;
  } 
 
 .sectionheadingvisible
  {
   display:block;
  }
 
 /*Crumbtrail layout*/
 .crumbtrail
  {
   padding-left: 5px;
   display: flex;
  }

 .crumbtrail>div, .crumbtrail>nav
  {
    padding: 2px;
  } 

 .crumbtrail nav:last-child
  {
    margin-left: auto;
  }

 .crumbtrail a
  {
   text-decoration: none;
   border-radius: 3px;
  }
 
 .crumbtrail a:hover
  {
   text-decoration: underline;
  } 

 .crumbtrail a:focus
  {
   text-decoration: underline;
   outline: 1px solid black;
  }

 .crumbtraillabels, .crumbtraillinks
  {
    display: inline-block;
    padding-right: 5px;
  }

 .skiptomain
  {
    justify-self:flex-end;
    margin-right: 10px;
  } 

 /** 
  *Content is wrapped in paras - set the dfeault margin and padding - this can be overridden or modified in site.css in the prokect files folder
  */
 .column .textblock p
  {
   margin: 0px;
   padding: 0px;
  }
 
 .column 
  {
   position: relative;
  }
  
 .sectioncontent 
  {
   position: relative;
   overflow: hidden;
  }
 
 /**
  * Standard positioning of a column div
  */   
 .columnwrapper
  {
    position: relative;
    /*float: left;*/
  } 

 .one-column
  {
   width: 100%;
  } 
 
 .two-columns  
  {
   width: 50%;
  }
 
 .three-columns  
  {
   width: 33.3%;
  } 
 
 /**
  *Make sure tha all columns except the last have a 5px right padding set on their inner div
  *This is applied to an inner div so that %widths of the column are not upset by applying padding directly to the column
  */
 .columnwrapper:nth-last-child(n+2) > div
  {
   padding-right: 5px;
   position: relative;
   /*overflow: hidden;*/
  }
  
  /**
   *When the editor is active this will highlight ediable sections of the page - the editable class is added by the editor scr
   */     
 .editable .section:hover, .editable.pageheading .textblock:hover
  {
    box-shadow: inset 0px 0px 10px #aa7777;  
  } 
  
 div.mycms-autofield
  {
    display: inline-block;
    padding-left: 1en !important;
  }
  
 .editable .mycms-autofield
  {
   background-color: orange;
  } 
  
/*Make things readable to a screen reader but not visible on screen*/  
.readeronly  
 { 
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
   width: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
 }  

.sitemapentry
 {
  margin-bottom: 3px;
 }

li.sitemapentry:focus-within
 {
  outline: none;
 }
 
.sitemapentry a:focus
 {
  outline: solid 2px black;
 }

 /*@media (max-width:750px)*/
 @media(max-width: 55rem)
  {
     #maincontainer, #columncontainer
      {
        /*flex-wrap: wrap;*/
        flex-direction: column;
        /*justify-items: flex-start;*/
        justify-content: flex-start;
        align-content: center;
        /*align-items: center;*/
      }
    
     main
      {
        margin-left: 10px;
      }
     
     .columnwrapper, .solrform
      {
        min-width: calc(100% - 35px);
        padding-right: 10px;
      }
   }