/* $Id: layout.css,v 1.1.2.1 2009/05/21 23:23:52 garrettalbright Exp $ */

/*
 * LAYOUT STYLES
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout is based on the Zen Columns layout method.
 *   http://drupal.org/node/201428
 *
 * Only CSS that affects the layout (positioning) of major elements should be
 * listed here.  Such as:
 *   display, position, float, clear, width, height, min-width, min-height
 *   margin, border, padding, overflow
 */


/** body **/
body {}

body.admin-menu {
  padding-top:2rem !important;
}

#page,
#closure-blocks {
  /*
     * If you want to make the page a fixed width and centered in the viewport,
     * this is the standards-compliant way to do that. See also the ie.css file
     * for the necessary IE5 hack to center a div.
     */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
}

#page-inner {
  box-sizing: border-box;
  padding: 5px;
}

#navigation-top,
#navigation {
  position: absolute;
  /* Take the named anchors out of the doc flow    */
  left: -10000px;
  /* and prevent any anchor styles from appearing. */
}

#skip-to-nav {
  float: right;
  margin: 0 !important;
  font-size: 0.8em;
}

#skip-to-nav a:link, #skip-to-nav a:visited {
  color: #fff;
  /* Same as background color of page */
}

#skip-to-nav a:hover {
  color: #000;
  text-decoration: none;
}

/* Alternatively, the skip-to-nav link can be completely hidden until a user tabs
     to the link. Un-comment the following CSS to use this technique. */
/*
  #skip-to-nav a, #skip-to-nav a:hover, #skip-to-nav a:visited
  {
    position: absolute;
    left: 0;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  #skip-to-nav a:active, #skip-to-nav a:focus
  {
    position: static;
    width: auto;
    height: auto;
  }
  */

/** header **/
#header {
  overflow: visible;
}

#header-inner {
  margin: auto;
}

#logo-title {}

#logo {}


#site-name {}

#site-slogan {}




/* Turn the header into a grid layout */
#header-inner {
  display: grid;
  grid-template-columns: 3fr 400px;
  /* grid-template-rows: repeat(3, minmax(1px,1fr)); */
  grid-auto-flow: row dense;
}

#logo-title{
  grid-column: 1/2;
  grid-row: 1/4;
}
#header-blocks {
  display: contents; /* allow sub elements to use parent grid by removing this box, essentially */
}
#block-menu-menu-login-account-menu {
  grid-column: 2/3;
  grid-row: 1/2;
  justify-self: end;
  margin: 0;
  padding: 0;
}
/* Block 7 is the social media block */
#block-block-7 {
  grid-column: 2/3;
  grid-row: 2/3;
  justify-self: end;
  align-self: start;
  margin: 0;
  padding: 0;
}
#search-box {
  grid-column: 2/3;
  grid-row: 3/4;
  justify-self: end;
  margin: 0;
  padding: 0;
}



#search-box div.edit,
#search-box label {
  display: none;
}





/** main (container for everything else) **/
#main {
  position: relative;
  padding-bottom: 20px;
  /* width:940px; */
  margin: auto;
  clear: both;
}

#main-inner {
  position: relative;
  width: 100%;
  display: flex;
  column-gap: 3rem;
  flex-wrap: nowrap;
  justify-content: space-between;
}


/** navbar **/
#navbar {
  z-index: 100;
}

.with-navbar #content,
.with-navbar #sidebar-left,
.with-navbar #sidebar-right {
  margin-top: 2em;
  /* Set this to the same value as the navbar height above. */
}

#navbar-inner {
  display: block;
  margin: auto;
}

#navbar-inner-2 {
  display: block;
}

#navbar2 ul {
  margin: 0.5em 0;
  padding: 0;
  text-align: left;
  overflow: auto;
  /* give it 'layout' so it will wrap any floats properly */
}

#navbar2 li {
  /* A simple method to get navbar links to appear in one line. */
  /* float: left; */
  /* padding: 0 15px; */
  /* list-style-type: none; */
  /* list-style-position: inside; */
  /* list-style-image: url(images/menu-collapsed.png); */
}

#content-area {
  overflow: auto;
  clear: both;
}

#content,
.no-sidebars #content {
  padding: 0;
  flex: 1 1 auto;
}

.sidebar-left #content {
  width: 75%;
}

.sidebar-right #content {
  width: 70%;
}

.two-sidebars #content {
  width: 40%;
}


#content-inner {
  margin: 0;
}

.two-sidebars #content-inner {
  margin: 0;
}

.sidebar-right #content-inner {
  margin: 0;
}

.sidebar-left #content-inner {
  margin: 0;
}


/** sidebar-left **/
#sidebar-left {
  padding: 0;
  flex: 1 1 auto;
  width: 25%;
}

#sidebar-left-inner {
  margin: 0 0 0 0px;
  padding: 0;
}


/** sidebar-right **/
#sidebar-right {
  padding: 0;
  flex: 1 1 auto;
  width: 30%;
}

#sidebar-right-inner {
  margin: 0 0px 0 20px;
  padding: 0;
}

#sidebar-right-inner img,
#sidebar-right-inner iframe {
  max-width: 100%;
  height: auto !important;
}

#sidebar-right-inner>div {
  padding: 0 0px;
}


#footer {
  margin: auto;
}



#navbar {
  overflow: visible;
}