/* CSS file for A3DGE webpage.
 *
 * First part is for celular.  Tablets and big screens below.
 *
 * Color reference: https://paletton.com/#uid=53k0p0klflMha9VjydneXkwbMjn
 */

/* General definitions. */

* {
  box-sizing: border-box;
}

body {
  color: #1B2434;
  font-family: sans-serif;
  font-size: 18px;
}

h1, h2 {
  clear: both;
}

p {
  text-align: justify;
}

  p.centered {
    padding: 0;
    text-align: center;
  }

figure {
  margin: 0;
  padding: 0;
  width: 100%;
}

  figure a,
  figure a:hover {
  /* Avoid draw an ugly rectangle at the bottom of the image. */
    background: none;
    padding: 0;
  }

  figure figcaption {
    font-size: 0.75em;
    font-weight: bold;
  }

  figure img {
    width: 100%;
  }



a {
  color: #2E4873;
  text-decoration: none;
}

  a:hover {
    background-color: #2E4873;
    color: white;
    border-radius: 0.25em;
  }

a.external {
  background: url(../img/external.png) no-repeat center right;
  padding-right: 0.5em;
}
  a.external:hover {
    background: #2E4873 url(../img/external-hover.png) no-repeat center right;
  }


/* Containers and content. */

main {
  margin: 0.25em 0.5em;
  padding: 0;
}

footer {
  background-color: #2E4773;
  color: white;
  font-size: 0.75em;
  padding: 0.25em;
}

  footer img {
    height: 1em;
  }



table {
  border: 1px solid #1B2434;
  border-collapse: collapse;
  font-size: 0.75em;
  margin: 0.5em 0;
  overflow: scroll;
  width: 100%;
}

caption {
  caption-side: top;
  font-weight: bold;
  margin-bottom: 0.25em;
}

th {
  background-color: #2E4773;
  border: 1px solid #1B2434;
  color: white;
  padding: 0.25em;
}

td {
  border: 1px solid #1B2434;
  padding: 0.25em;
}



dl > dt {
  font-weight: bold;
}



/* Header. */
body > header * {
}

  body > header > p {
    font-size: 3em;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;
  }


  body > header > p > a,
  body > header > p > a:hover {
    background: inherit;
    color: #1B2434;
    text-decoration: none;
  }
  body > header > p > a > img {
    height: 1em;
  }



/* Navigation menu.

   Note it is hidden in mobile until touch the "menu" icon.

   Note also it's directly inside "main", not inside "header" as it should (imo).
   If it's in "header" then the "sticky" position won't work.
 */

main > nav > p {
  background-color: #202E47;
  cursor: pointer;
  margin: 0;
}

main > nav {
  background-color: #202E47;
  color: rgba(255, 255, 255, 0.75);
  font-size: 2em;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

main > nav ul {
  list-style: disc;
  padding: 0 0.25em 0.25em 0;
}

  main > nav li > a {
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
  }

/* Indexation. */
  main > nav > ul > li {
    margin-left: 1em;
  }

  main > nav > ul > li > ul >  li {
    margin-left: 0.5em;
  }

main > nav > ul {
  background-color: #202E47;
  float: left;
  margin: 0;
  position: absolute;
/* Initially hidden. */
  display: none;
  overflow: hidden;
  width: 100%;
}

  main > nav:hover > ul {
  /* Unroll menu. */
    display: inline;
  }

/* RSS button is free... */
a#rss, a#rss:hover {
  background: none;
  color: white;
  float: right;
}

  a#rss img {
    width: 1em;
  }



/* Download button */

a.download-button, a.download-button:hover, a.download-button:active {
  background-color: #205326;
  border-radius: 0.5em;
  color: white;
  font-weight: bold;
  padding: 0.25em 0.5em;
}

  a.download-button:hover {
    background-color: #2D8738;
    box-shadow: 0.1em 0.1em 0.1em black;
  }

  a.download-button:active {
    box-shadow: none;
  }



/* Horizontal celular. */
@media screen and (min-width: 480px)
{

figure {
  margin: 0 auto;
  width: 75%;
}

main > nav {
  font-size: 1.5em;
}

main > nav > ul {
  width: auto;
}

a.download-button, a.download-button:hover, a.download-button:active {
  font-size: 1.5em;
}

a#rss img {
  width: 1.25em;
}

}



/* Tablet or small notebook. */
@media screen and (min-width: 767px)
{

table {
 margin: 0.5em auto;
 width: auto;
}

/* Undo drop-down menu and put options in a single line. */
main > nav {
  font-size: 1em;
  position: static;
}

main > nav > p {
  cursor: text;
  float: right;
  width: 100%;
}

/* Hide menu button. */
  #menu {
    display: none;
  }

main > nav > ul {
  list-style: none;
  display: inline;
  margin: 0;
  width: auto;
}

main > nav > ul > li {
  float: left;
}

main > nav > ul > li > a:hover  {
  background: none;
}

}



/* Big screen (desk computer, TV...). */
@media screen and (min-width: 950px)
{

main, footer {
  max-width: 950px;
  margin: 0 auto;
}

}