/* NOTE:
 * Grid layout stuff starts arround ".gridsite". 
 * The stuff before is just boring old CSS to make content look not crappy.
 */

/*--------------------------------------------------------------
CSS Reset
--------------------------------------------------------------*/
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust:     100%;
}

body {
  margin: 0;
}

img {
  display: block;
  border: 0;
  width: 100%;
  height: auto;
}


/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar */
}


/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
  color: #404040;
  /*font-family: 'Helvetica', Arial, sans-serif;*/
  font: 14px calibri;
  font-size: 18px;
  line-height: 1.5;
}

h1,
h2,
h3 {
  margin: 0;
  padding: 1em 0;
}

p {
  margin: 0;
  padding: 1em 0;
}


/*--------------------------------------------------------------
Custom section - page specific
--------------------------------------------------------------*/
body {
  background-color: rgb(255,255,255);
  color: rgb(51,51,51);
  font: 14px calibri;
}

/*
a {
  color: rgb(80,123,175);
  font: 14px calibri;
}
*/

div.maintext {
  border-style: hidden; 
  margin-top: 150px; 
  margin-left: 155px;
  width: 30%;
}

h1 {
  color: rgb(80,123,175)
}

img {
  /*width: auto;*/
  /*height: auto;*/
  border: 0;
}

#imglogo {
  width:150px;
  padding: 10px;
  /*margin-top:50px;*/
}

#imgrelations {
  width:300px;
}

div.mainright {
  position: fixed;
  border-style: hidden; 
  margin-top: 50px;
  margin-left: 50%;
  /*float: right;*/
  /*margin: 0 0 10px 10px;*/
}

div.bottom {
  color: rgb(80,123,175);
  text-align: center;
}

div.top {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: -1;
}


/*--------------------------------------------------------------
Custom section - menu
--------------------------------------------------------------*/
ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(255,255,255);

  /*position: fixed;*/
  top: 0;
  /*width: 100%;*/
  /*margin-left:200px;*/

  color: rgb(80,123,175);
  font: 14px calibri;
}

/*
li.menu {
  float: left;
}
*/

li.menu a {
  display: block;
  color: rgb(80,123,175);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li.menu a:hover {
  background-color: rgb(200,214,230);
}


/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/
.site {
  background: #ededed;
  min-height: 100vh;
}

.header,
.main-content,
.sidebar,
.twin,
.footer {
  padding: 1em 2em;
}

/*
.main-content {
  background: white;
}
*/

.header {
  background: #2185C5;
  background: rgb(80,123,175);
  color: white;
}

.footer {
  padding: 2em;
  background: #3E454C;
  color: white;
}

.footer a {
  color: white;
}

.footer a:hover,
.footer a:focus {
  border-bottom: 1px solid white;
}


/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
  .site {
    max-width: 50em;
    margin: 0 auto;
  }
}


/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/
@media screen and (min-width: 800px) {
/*  @supports (display: -ms-grid) {*/

    .gridsite {
      display: -ms-grid;
      display: grid;
      /*grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;*/
      /*grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);*/
      -ms-grid-columns: 2fr 1fr;
      grid-template-columns: 2fr 1fr;
      -ms-grid-rows: auto 1fr auto;
      grid-template-rows: auto 1fr auto;
      grid-template-areas: 
      "header header"
      "main sidebar"
      "footer footer";
    }

    .gridsubhead {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 2fr;
      grid-template-columns: 1fr 2fr;
      -ms-grid-rows: 1fr auto;
      grid-template-rows: 1fr auto;
      grid-template-areas: 
      "logo menu"
      "title title";
    }

    .headlogo {
      -ms-grid-column: 1;
          grid-column: 1;
      -ms-grid-row: 1;
          grid-row: 1;
    }
    .headmenu {
      -ms-grid-column: 2;
          grid-column: 2;
      -ms-grid-row: 1;
          grid-row: 1;      
    }
    .headtitle {
      -ms-grid-column: 1;
          grid-column: 1;
      -ms-grid-row: 2;
          grid-row: 2;
      /*grid-area: title;*/
    }

    .header {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
          grid-column: header;
    }
    .footer {
      /*grid-column: 1 / span 2;*/
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
          grid-column: footer;
      -ms-grid-row: 3;
    }

    .main-content {
      -ms-grid-column: 1;
          grid-column: 1;
      -ms-grid-row: 2;
          grid-row: 2;
    }

    .sidebar {
      -ms-grid-column: 2;
      -ms-grid-row: 2;
      grid-column: 2;
      grid-row: 2;
    }

/*  }*/
}