/*
  file:        wdstyle.css
  author:      Stefan Wittwer <info@wittwer-datatools.ch>
*/


/* common style */
*
{
  box-sizing: border-box;
  margin: 0px;
}


/* style body */
body
{
  display: grid;
  font-family: Gilmer,sans-serif;
  grid-template-columns: 1fr;
  text-align: center;
}
/* style body.menu */
body.menu
{
  background-color: #320064;
  color: #fff;
  grid-template-rows: 240px 1280px 320px;
  height: 1840px;
}
/* style body.webapp */
/* body.webapp
{
  grid-template-rows: 32px 48px 1200px 320px;
  height: 1600px;
} */
/* style body.website */
body.website
{
  grid-template-rows: 240px 320px 960px 320px;
  height: 1840px;
}


/* style footer */
footer
{
  font-size: 12pt;
}
footer > p
{
  padding-top: 24px;
}
footer > p > a
{
  background-color: #320064;
}
/* style body.menu > footer */
body.menu > footer
{
  grid-row: 3 / 4;
}
/* style body.website > footer */
body.website > footer
{
  background-color: #320064;
  color: #fff;
  grid-row: 4 / 5;
}


/* style header */
header
{
  grid-row: 1 / 2;
}
header > p
{
  padding: 32px 0px 24px 0px;
}
/* style body.menu > header */
body.menu > header > p > a > img#wdlogodark
{
  width: 208px;
}
body.menu > header > p > a > img#wdclosedark
{
  height: 48px;
  width: 48px;
}
/* style body.website > header */
body.website > header > p > a > img#wdlogo
{
  width: 208px;
}
body.website > header > p > a > img#wdmenu
{
  height: 28px;
  width: 64px;
}


/* style body.website > article.chapter */
body.website > article.chapter
{
  color: #320064;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-row: 3 / 4;
  justify-content: center;
  overflow: scroll;
}
body.website > article.chapter > div.text
{
  padding: 32px 0px 32px 0px;
  width: 96%;
}
body.website > article.chapter > div.text > p
{
  padding: 16px 0px 16px 0px;
}
body.website > article.chapter > div.text > ul > li
{
  font-size: 12pt;
  padding: 0px 0px 4px 0px;
}
body.website > article.chapter > div.tile
{
  background-color: #efffdf;
  border-color: #f7f7f7;
  border-style: solid;
  border-width: 2px;
  height: 320px;
  padding: 2px;
  width: 304px;
}
body.website > article.chapter > div.tile:hover
{
  border-color: #320064;
  border-width: 4px;
}
body.website > article.chapter > p
{
  padding: 24px 0px 0px 0px;
}
body.website > article.chapter > p > img#sw
{
  padding: 32px 0px 32px 0px;
  width: 192px;
}


/* style body.website > article.index */
body.website > article.index
{
  color: #320064;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-row: 3 / 4;
  justify-content: center;
  overflow: scroll;
}
body.website > article.index > div.motto
{
  font-size: 28px;
  padding: 32px 0px 32px 0px;
  width: 100%;
}
body.website > article.index > div.motto > p
{
  padding: 16px 0px 0px 0px;
}
body.website > article.index > div.tile
{
  background-color: #efffdf;
  border-color: #f7f7f7;
  border-style: solid;
  border-width: 2px;
  height: 320px;
  margin: 8px;
  padding: 2px;
  width: 304px;
}
body.website > article.index > div.tile:hover
{
  border-color: #320064;
  border-width: 4px;
}


/* style body.menu > nav */
body.menu > nav
{
  grid-row: 2 / 3;
}
body.menu > nav > p
{
  padding: 48px 0px 48px 0px;
}
body.menu > nav > p > a
{
  color: #ffffff;
}


/* style body.website > section.caption */
body.website > section.caption
{
  background-color: #320064;
  color: #fff;
  font-size: 40px;
  padding: 128px 0px 128px 0px;
}


/* style body.website > section.index */
body.website > section.index
{
  background-image: url("../img/wd_polarlight.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 28px;
  grid-row: 2 / 3;
  text-align: right;
}
body.website > section.index > p.welcome
{
  padding: 160px 24px 32px 0px;
}


/* style body.website > section.mixed */
body.website > section.mixed
{
  background-color: #320064;
  background-image: url("../img/wd_mesh_green.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 40px;
  padding: 128px 0px 128px 0px;
}


/* style body.website > section.picto */
body.website > section.picto
{
  background-color: #320064;
  color: #fff;
  font-size: 40px;
  padding: 40px 0px 0px 0px;
}


/* end of wdstyle.css */


/* Archive */
/* Gilmer fonts */
/*
@font-face {
  font-family: Gilmer;
  src: url(Gilmer-Regular.otf);
  font-weight: normal;
}
@font-face {
  font-family: Gilmer;
  src: url(Gilmer-Bold.otf);
  font-weight: bold;
}*/

/* set common styles */
/*
* {
  font-family: Gilmer, Sans-serif;
  border-style: none;
  margin: 0px;
}
a {
  color: #320064;
}
img {
  border-style: none;
  margin: 0px;
  padding: 0px;
}
li {
  font-size: 18px;
  list-style-type: none;
  padding-bottom: 16px;
}
p {
  font-size: 18px;
  margin-bottom: 8px;
  margin-top: 8px;
}*/

/* Create two or three equal columns that float next to each other */
/*
.col2 {
  float: left;*/
  /*padding-bottom: 16px;*/
/*
  width: 50%;
}
.col2a {
  float: left;
  text-align: center;
  width: 35%;
}
.col2b {
  float: left;
  width: 65%;
}
.col3 {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
/*.row {
  padding-bottom: 16px;
  padding-top: 24px;
}*/
/*
.row:after {
  clear: both;
  content: "";
  display: table;
}*/

/* Responsive layout:
   makes the three columns stack on top of each other
   instead of next to each other on smaller screens
   (640px wide or less) */
/*
@media screen and (max-width: 640px) {
  .col2, .col2a, .col2b {*/
    /*padding-bottom: 16px;*/
/*
   width: 100%;
  }
  .col3 {*/
    /*padding-bottom: 16px;*/
/*
    width: 100%;  
  }
}*/

/* style header and top navigation container of website */
/*
header.website {
  border-width: 0px;
  color: #320064;
  margin: 0px;
  padding-bottom: 48px;
  padding-top: 48px;
  text-align: center;
}*/

/* style welcome page with polar light background */
/*
.welcome {
  background-image: url('img/wd_polarlight.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-width: 0px;
  color: #ffffff;
  padding-bottom: 16px;
  padding-right: 16px;
  padding-top: 256px;
  text-align: right;
}*/
/*
button {
  background-color: #ffffff;
  border-style: outset;
  color: #320064;
  font-size: 20px;
  padding: 4px;
}*/

/* style header and top navigation container of menu */
/*
.menu {
  background-color: #320064;
  border-width: 0px;
  color: #ffffff;
  line-height: 48px;
  padding: 32px;
  text-align: center;*/
  /*max-width: 1280px;*/
/*
}
nav.menu {
  font-size: 24px;
  padding-bottom: 192px;
  padding-top: 64px;
}

.picto {
  background-color: #320064;*/
  /*border-style: none;*/
/*
  color: #ffffff;
  font-size: 32px;
  margin: 0px;
  padding: 128px 0px 0px 0px;
}*/

/* style main content */
/*
.main {
  color: #320064;
  margin: auto;
  max-width: 1280px;
  padding: 16px;*/
  /*text-align: center;*/
/*
}
.maintext {*/
  /*text-align: left;*/
/*
}
.chapter {
  color: #320064;
  margin: auto;
  max-width: 1280px;
  padding: 64px 32px 32px 32px;
  text-align: center;
}
.chaptertext {
  border-width: 0px;
  padding-right: 16px;
  text-align: left;
}*/

/* style the tiles in main content */
/*
.tile {
    background-color: #efffdf;
    border-color: #f7f7f7;
    border-style: solid;
    border-width: 4px;
    color: #320064;
    display: inline-table;
    height: 320px;
    margin: 16px;
    text-align: center;
    width: 256px;
}
.tile:hover {
    border-color: #320064;
    border-style: solid;
    border-width: 4px;
}*/

/* style the footer */
/*
footer {
  background-color: #320064;*/
  /*border-bottom-style: none;*/
/*  color: #ffffff;
  padding-bottom: 256px;
  padding-top: 48px;
}
div.footertext {*/
  /*text-align: center;*/
/*
}*/