/**********************************************************************/
/**********************************************************************/
/**********************************************************************/
/* 1. ------------------------------------------------------------------
 *                            Variables
 *
 */

/* Respect user's setting for font-size until it gets too cramped: */
@media only screen and (max-width: 25rem) {
  :root {
    font-size: calc(100vw / 25);
  }
}

/* Define a variables that are 0rem for small screens,
 * 1rem for bigger ones, and interpolate linearly in between: */
:root {
  --srem: 0rem;
  --mrem: 0rem;
  --lrem: 0rem;
  --xlrem: 0rem;
  --xxlrem: 0rem;
  --xxxlrem: 0rem;
  --xxxxlrem: 0rem;
}
@media only screen and (min-width: 25rem) {
  :root {
    --srem: calc((100vw - 25rem) / (37.5 - 25));
    --mrem: calc((100vw - 25rem) / (48 - 25));
    --lrem: calc((100vw - 25rem) / (64 - 25));
    --xlrem: calc((100vw - 25rem) / (96 - 25));
    --xxlrem: calc((100vw - 25rem) / (128 - 25));
    --xxxlrem: calc((100vw - 25rem) / (192 - 25));
    --xxxxlrem: calc((100vw - 25rem) / (256 - 25));
  }
}
@media only screen and (min-width: 37.5rem) {
  :root {
    --srem: 1rem;
  }
}
@media only screen and (min-width: 48rem) {
  :root {
    --mrem: 1rem;
  }
}
@media only screen and (min-width: 64rem) {
  :root {
    --lrem: 1rem;
  }
}
@media only screen and (min-width: 96rem) {
  :root {
    --xlrem: 1rem;
  }
}
@media only screen and (min-width: 128rem) {
  :root {
    --xxlrem: 1rem;
  }
}
@media only screen and (min-width: 192rem) {
  :root {
    --xxxlrem: 1rem;
  }
}
@media only screen and (min-width: 256rem) {
  :root {
    --xxxxlrem: 1rem;
  }
}

/**
 * Assuming default 1rem = 16px, we get natural break points:
 * 320px = 20rem
 * 400px = 25rem
 * 600px = 37.5rem
 * 748px = 48rem
 * 1024px = 64 rem
 */

/**********************************************************************/
/**********************************************************************/
/**********************************************************************/
/* 2. ------------------------------------------------------------------
 *                           Generic elements
 *
 * 
 * Put here all generic definitions for elements and pseudo-elements
 * for the main content of the page. 
 *
 */




/**********************************************************************/
/**********************************************************************/
/**********************************************************************/
/* 2. ------------------------------------------------------------------
 *                 Generic classes (and pseudo-classes)
 *
 * 
 * Put here all generic definitions for elements and pseudo-elements
 * for the main content of the page. 
 * 
 */

/************** Grid layout with 12 columns ***************************/

{#
Quick guide on how to use responsive grids:
Give the container div the class "grid12".
For the items in the container, give them classes either
 - from utils.get_css_grid_classes(), or more directly
 - e.g. "col-m-4" if it should use (at most) 4 out of 12 columns
   on screens that are at least medium ("m") wide.
   These classes can be combined.
 - e.g. "row-span-2" for items of larger height.
#}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
}

/* For small phones: */
[class*="col-"],
.col-all {
  grid-column: auto / span 12;
}

.col-xs-1 { grid-column: auto / span 1; }
.col-xs-2 { grid-column: auto / span 2; }
.col-xs-3 { grid-column: auto / span 3; }
.col-xs-4 { grid-column: auto / span 4; }
.col-xs-5 { grid-column: auto / span 5; }
.col-xs-6 { grid-column: auto / span 6; }
.col-xs-7 { grid-column: auto / span 7; }
.col-xs-8 { grid-column: auto / span 8; }
.col-xs-9 { grid-column: auto / span 9; }
.col-xs-10 { grid-column: auto / span 10; }
.col-xs-11 { grid-column: auto / span 11; }
.col-xs-12 { grid-column: auto / span 12; }

/* For tablets, large phones: */
/* factor to previous min-width is 1.5 */
@media only screen and (min-width: 37.5rem) {
  .col-s-1 { grid-column: auto / span 1; }
  .col-s-2 { grid-column: auto / span 2; }
  .col-s-3 { grid-column: auto / span 3; }
  .col-s-4 { grid-column: auto / span 4; }
  .col-s-5 { grid-column: auto / span 5; }
  .col-s-6 { grid-column: auto / span 6; }
  .col-s-7 { grid-column: auto / span 7; }
  .col-s-8 { grid-column: auto / span 8; }
  .col-s-9 { grid-column: auto / span 9; }
  .col-s-10 { grid-column: auto / span 10; }
  .col-s-11 { grid-column: auto / span 11; }
  .col-s-12 { grid-column: auto / span 12; }
}

/* For large tablet, small laptop: */
/* factor to previous min-width is 1.28 */
@media only screen and (min-width: 48rem) {
  .col-m-1 { grid-column: auto / span 1; }
  .col-m-2 { grid-column: auto / span 2; }
  .col-m-3 { grid-column: auto / span 3; }
  .col-m-4 { grid-column: auto / span 4; }
  .col-m-5 { grid-column: auto / span 5; }
  .col-m-6 { grid-column: auto / span 6; }
  .col-m-7 { grid-column: auto / span 7; }
  .col-m-8 { grid-column: auto / span 8; }
  .col-m-9 { grid-column: auto / span 9; }
  .col-m-10 { grid-column: auto / span 10; }
  .col-m-11 { grid-column: auto / span 11; }
  .col-m-12 { grid-column: auto / span 12; }
} 

/* For large desktop: */
/* factor to previous min-width is 1.33 */
@media only screen and (min-width: 64rem) {
  .col-l-1 { grid-column: auto / span 1; }
  .col-l-2 { grid-column: auto / span 2; }
  .col-l-3 { grid-column: auto / span 3; }
  .col-l-4 { grid-column: auto / span 4; }
  .col-l-5 { grid-column: auto / span 5; }
  .col-l-6 { grid-column: auto / span 6; }
  .col-l-7 { grid-column: auto / span 7; }
  .col-l-8 { grid-column: auto / span 8; }
  .col-l-9 { grid-column: auto / span 9; }
  .col-l-10 { grid-column: auto / span 10; }
  .col-l-11 { grid-column: auto / span 11; }
  .col-l-12 { grid-column: auto / span 12; }
} 

/* For x-large desktop: */
/* factor to previous min-width is 1.5 */
@media only screen and (min-width: 96rem) {
  .col-xl-1 { grid-column: auto / span 1; }
  .col-xl-2 { grid-column: auto / span 2; }
  .col-xl-3 { grid-column: auto / span 3; }
  .col-xl-4 { grid-column: auto / span 4; }
  .col-xl-5 { grid-column: auto / span 5; }
  .col-xl-6 { grid-column: auto / span 6; }
  .col-xl-7 { grid-column: auto / span 7; }
  .col-xl-8 { grid-column: auto / span 8; }
  .col-xl-9 { grid-column: auto / span 9; }
  .col-xl-10 { grid-column: auto / span 10; }
  .col-xl-11 { grid-column: auto / span 11; }
  .col-xl-12 { grid-column: auto / span 12; }
} 

/* For xx-large desktop: */
/* factor to previous min-width is 1.33 */
@media only screen and (min-width: 128rem) {
  .col-xxl-1 { grid-column: auto / span 1; }
  .col-xxl-2 { grid-column: auto / span 2; }
  .col-xxl-3 { grid-column: auto / span 3; }
  .col-xxl-4 { grid-column: auto / span 4; }
  .col-xxl-5 { grid-column: auto / span 5; }
  .col-xxl-6 { grid-column: auto / span 6; }
  .col-xxl-7 { grid-column: auto / span 7; }
  .col-xxl-8 { grid-column: auto / span 8; }
  .col-xxl-9 { grid-column: auto / span 9; }
  .col-xxl-10 { grid-column: auto / span 10; }
  .col-xxl-11 { grid-column: auto / span 11; }
  .col-xxl-12 { grid-column: auto / span 12; }
} 

/* For xxx-large desktop: */
/* factor to previous min-width is 1.5 */
@media only screen and (min-width: 192rem) {
  .col-xxxl-1 { grid-column: auto / span 1; }
  .col-xxxl-2 { grid-column: auto / span 2; }
  .col-xxxl-3 { grid-column: auto / span 3; }
  .col-xxxl-4 { grid-column: auto / span 4; }
  .col-xxxl-5 { grid-column: auto / span 5; }
  .col-xxxl-6 { grid-column: auto / span 6; }
  .col-xxxl-7 { grid-column: auto / span 7; }
  .col-xxxl-8 { grid-column: auto / span 8; }
  .col-xxxl-9 { grid-column: auto / span 9; }
  .col-xxxl-10 { grid-column: auto / span 10; }
  .col-xxxl-11 { grid-column: auto / span 11; }
  .col-xxxl-12 { grid-column: auto / span 12; }
} 

/* For xxxx-large desktop: */
/* factor to previous min-width is 1.33 */
@media only screen and (min-width: {{ xxxx_width }}) {
  .col-xxxxl-1 { grid-column: auto / span 1; }
  .col-xxxxl-2 { grid-column: auto / span 2; }
  .col-xxxxl-3 { grid-column: auto / span 3; }
  .col-xxxxl-4 { grid-column: auto / span 4; }
  .col-xxxxl-5 { grid-column: auto / span 5; }
  .col-xxxxl-6 { grid-column: auto / span 6; }
  .col-xxxxl-7 { grid-column: auto / span 7; }
  .col-xxxxl-8 { grid-column: auto / span 8; }
  .col-xxxxl-9 { grid-column: auto / span 9; }
  .col-xxxxl-10 { grid-column: auto / span 10; }
  .col-xxxxl-11 { grid-column: auto / span 11; }
  .col-xxxxl-12 { grid-column: auto / span 12; }
} 

.row-span-2 {
  grid-row: auto / span 2;
}
.row-span-3 {
  grid-row: auto / span 3;
}
.row-span-4 {
  grid-row: auto / span 4;
}








html {
  font-family: 'Source Sans Pro', sans-serif;
}

body {
  font-family: inherit;
  background: #fff; #e5eecc; #fff;
  padding: 0;
  margin: 0;
}

h1 {
  margin: 0.9rem 0 0.5rem 0;
  font-weight: 400;
}
h2 {
  margin: 0.9rem 0 0.3rem 0;
}
h3 {
  /*font-weight: bold;*/   
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 0.2rem; 
}

/* TEST */
h1 {
  font-weight: 400;
  font-size: 2rem;
  margin: 0.5rem 0rem;   
}
h2 {
  font-weight: 400;
  font-size: 1.3rem;
  margin: 1rem 0 0.2rem 0;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #aaa;
}
h3 {
  /*font-weight: bold;*/   
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 0.2rem; 
}



/*
h1.title {
  font-weight: 400;
  text-align: left; center;
  color: #333;
}
*/




div.horizontal-container {
  margin: auto;
  margin-color: #ddd;
  max-width: 96rem;
  background: #fff;
  padding: 0 calc(1rem + 2 * var(--srem));
  /*border-top: 0.3rem solid #aeb;*/
  /*border: 1px solid #aaa;*/
  /*border-left: 0.5em solid #5a8;*/
}


#searchbox-container {
  text-align: center;   
}

form#logoutForm {
  display: inline;   
}

.MathJax {
  font-size: 0.95em; 
}

a.right-field {
  float: right;
}
img.profile {
/*  content: url("{% static '/img/profile.png' %}");   
*/  width: 0.65em;
/*  position: relative;
  top: -0.1em;
*/
vertical-align: baseline;
}


div.tag,
a.tag {
  display: inline-block;
  font-size: 0.8em;
  border: 1px solid #aaa;
  border-radius: 1em;
  padding: 0.05rem 0.3em;
  color: #000;
  background: #fff;
  text-decoration: none;
}
a.tag:hover {
  background: #ddd;
  /*text-decoration: underline;   */
}

:target {
  #border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}


a.contents {
  margin-left: 1.5rem;   
}

a.link-below-title {
  font-size: 0.8rem;
  color: #555;
  text-decoration: dotted underline;
}
a.link-below-title:hover {
  text-decoration: underline;   
}


ul, 
ol {
  padding-left: calc(1.2rem + 0.8 * var(--srem));
}
.li-header {
  /*font-weight: bold;*/   
  /*font-style: italic;*/
  font-size: 1.3rem;
  color: #555;
  /*margin-bottom: 0.2rem; */
  margin: 0.2rem 0;
}
li {
  margin-bottom: 0.3rem;  
}

div.quote {
  font-style: italic;
  text-align: center;
  padding: 0.5rem;
  font-size: 1.0rem;
}

/* FORMS */

input.form-control {
  display: block;
}

form.account {
  margin: 0.5rem 2rem;
}

div.medskip {
  margin-bottom: 0.5rem;   
}

div.navbar-outer {
  text-align: center;
}
/* The following doesn't go well with the help sidebar... */
/*
@media only screen and (min-height: 16rem) {
  div.navbar-outer {
    width: 100%;
    position: sticky;
    top: 0;
    border: 3px solid black;
  }
}
*/

pre {
  margin-bottom: 0;
}

ol.contents > li {
  margin-bottom: 0rem;
}



div.navbar-container {
  /*display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;   
  */
  
  /*direction: rtl;*/
  display: block;
  text-align: right;
}

a.navbar-field {
  vertical-align: sup;
  display: inline-block;
  padding: 0.7rem 0.5rem 0.3rem 0.5rem;
  margin: 0;
  /*color: #555;
  */
  color: #555;
  text-decoration: none;
  font-weight: 400;
}
a.logo {
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;   
  font-weight: 200;
  font-size: 1.5rem;
}
a.navbar-field:hover {
  /*background: #eee;
  */
  text-decoration: underline;   
}