base.css

/******************************/
/**  LINGUA FRANCA WEB FONT  **/
/******************************/


/* lingua-franca.css */
/* Andreas Nolda 2016-10-08 */

@font-face {
  font-family: "Lingua Franca";
  font-style: normal;
  font-weight: 400;
  src: local("Lingua Franca"), local("LinguaFranca-Regular"), url(fonts/lingua-franca-1.19/LinguaFranca-Regular.woff), url(http://andreas.nolda.org/software/LinguaFranca-Regular.woff) format('woff');
}
@font-face {
  font-family: "Lingua Franca";
  font-style: italic;
  font-weight: 400;
  src: local("Lingua Franca Italic"), local("LinguaFranca-Italic"), url(fonts/lingua-franca-1.19/LinguaFranca-Italic.woff), url(http://andreas.nolda.org/software/LinguaFranca-Italic.woff) format('woff');
}

@font-face {
  font-family: "Lingua Franca";
  font-style: normal;
  font-weight: 700;
  src: local("Lingua Franca Bold"), local("LinguaFranca-Bold"), url(fonts/lingua-franca-1.19/LinguaFranca-Bold.woff), url(http://andreas.nolda.org/software/LinguaFranca-Bold.woff) format('woff');
}
@font-face {
  font-family: "Lingua Franca";
  font-style: italic;
  font-weight: 700;
  src: local("Lingua Franca Bold Italic"), local("LinguaFranca-BoldItalic"), url(fonts/lingua-franca-1.19/LinguaFranca-BoldItalic.woff), url(http://andreas.nolda.org/software/LinguaFranca-BoldItalic.woff) format('woff');
}




/***********************/
/**  FIRAGO WEB FONT  **/
/***********************/


@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 100;
  src: local("FiraGO Thin"), local("FiraGO-Thin"), url(fonts/FiraGO-1.001/FiraGO-Thin.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 100;
  src: local("FiraGO Thin Italic"), local("FiraGO-ThinItalic"), url(fonts/FiraGO-1.001/FiraGO-ThinItalic.woff) format('woff');
}

@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 200;
  src: local("FiraGO UltraLight"), local("FiraGO-UltraLight"), url(fonts/FiraGO-1.001/FiraGO-UltraLight.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 200;
  src: local("FiraGO UltraLight Italic"), local("FiraGO-UltraLightItalic"), url(fonts/FiraGO-1.001/FiraGO-UltraLightItalic.woff) format('woff');
}

@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 250;
  src: local("FiraGO ExtraLight"), local("FiraGO-ExtraLight"), url(fonts/FiraGO-1.001/FiraGO-ExtraLight.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 250;
  src: local("FiraGO ExtraLight Italic"), local("FiraGO-ExtraLightItalic"), url(fonts/FiraGO-1.001/FiraGO-ExtraLightItalic.woff) format('woff');
}

@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 300;
  src: local("FiraGO Light"), local("FiraGO-Light"), url(fonts/FiraGO-1.001/FiraGO-Light.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 300;
  src: local("FiraGO Light Italic"), local("FiraGO-LightItalic"), url(fonts/FiraGO-1.001/FiraGO-LightItalic.woff) format('woff');
}

@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 350;
  src: local("FiraGO Book"), local("FiraGO-Book"), url(fonts/FiraGO-1.001/FiraGO-Book.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 350;
  src: local("FiraGO Book Italic"), local("FiraGO-BookItalic"), url(fonts/FiraGO-1.001/FiraGO-BookItalic.woff) format('woff');
}

@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 400;
  src: local("FiraGO Regular"), local("FiraGO-Regular"), url(fonts/FiraGO-1.001/FiraGO-Book.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 400;
  src: local("FiraGO Italic"), local("FiraGO-Italic"), url(fonts/FiraGO-1.001/FiraGO-Italic.woff) format('woff');
}

@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 500;
  src: local("FiraGO Medium"), local("FiraGO-Medium"), url(fonts/FiraGO-1.001/FiraGO-Medium.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 500;
  src: local("FiraGO Medium Italic"), local("FiraGO-MediumItalic"), url(fonts/FiraGO-1.001/FiraGO-MediumItalic.woff) format('woff');
}

@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 600;
  src: local("FiraGO SemiBold"), local("FiraGO-SemiBold"), url(fonts/FiraGO-1.001/FiraGO-SemiBold.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 600;
  src: local("FiraGO SemiBold Italic"), local("FiraGO-SemiBoldItalic"), url(fonts/FiraGO-1.001/FiraGO-SemiBoldItalic.woff) format('woff');
}

@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 700;
  src: local("FiraGO Bold"), local("FiraGO-Bold"), url(fonts/FiraGO-1.001/FiraGO-Bold.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 700;
  src: local("FiraGO Bold Italic"), local("FiraGO-BoldItalic"), url(fonts/FiraGO-1.001/FiraGO-BoldItalic.woff) format('woff');
}

@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 800;
  src: local("FiraGO ExtraBold"), local("FiraGO-ExtraBold"), url(fonts/FiraGO-1.001/FiraGO-ExtraBold.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 800;
  src: local("FiraGO ExtraBold Italic"), local("FiraGO-ExtraBoldItalic"), url(fonts/FiraGO-1.001/FiraGO-ExtraBoldItalic.woff) format('woff');
}

@font-face {
  font-family: "FiraGO";
  font-style: normal;
  font-weight: 900;
  src: local("FiraGO Heavy"), local("FiraGO-Heavy"), url(fonts/FiraGO-1.001/FiraGO-Heavy.woff) format('woff');
}
@font-face {
  font-family: "FiraGO";
  font-style: italic;
  font-weight: 900;
  src: local("FiraGO Heavy Italic"), local("FiraGO-HeavyItalic"), url(fonts/FiraGO-1.001/FiraGO-HeavyItalic.woff) format('woff');
}

/*
From https://github.com/bBoxType/FiraGO:
Thin (22 units / CSS 100)
UltraLight (34 units / CSS 200)
ExtraLight (46 units / CSS 250)
Light (58 units / CSS 300)
Book (84 units / CSS 350)
Regular (92 units / CSS 400)
Medium (128 units / CSS 500)
SemiBold (142 units / CSS 600)
Bold (158 units / CSS 700)
ExtraBold (178 units / CSS 800)
Heavy (198 units / CSS 900)
*/




/*********************/
/**  PAGE ELEMENTS  **/
/*********************/


.bg {
   position: fixed;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   /* The image used */
   background-image: url("images/LaTeX_dark.png");
   /* Center and scale the image nicely */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: -99;
}

.outer-box {
   width: var(--outer-box-width, 100%);
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   padding-top: var(--padding-top);
}
.outer-box::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
}

.col-left {
   position: fixed;
   top: 20px;
   width: 200px;
   opacity: 1;
   z-index: 3;
}
.col-left:hover {
   opacity: 0.85;
   transition: opacity .3s;
}
.col-left-bg {
   position: fixed;
   left: 0;
   top: 0;
   background-color: #FFFFFF;
   opacity: 0;
   width: 100%;
   height: 120px;
   z-index: 2;
}
.scrolled-bg {
   opacity: 0.90;
   transition: opacity .5s;
}

.col-main {
   position: relative;
   width: var(--col-main-width, 70%);
   margin-top: var(--text-margin-top);
   font-size: var(--text-font-size, 15px);
   overflow-wrap: break-word;
   word-wrap: break-word;
   hyphens: auto;
   -webkit-hyphens: auto;
   -webkit-hyphenate-limit-before: 2;
   -webkit-hyphenate-limit-after: 4;
   -ms-hyphens: auto;
   -ms-hyphenate-limit-chars: 7 2 4;
   -moz-hyphens: auto;
}

.col-right {
   font-family: ff-meta-web-pro, FiraGO, sans-serif;
   font-size: var(--col-right-font-size, 16px);
   position: relative;
   width: var(--col-right-width, 20%);
   margin-top: var(--text-margin-top);
   hyphens: manual;
}

.col-nav {
   font-family: ff-meta-web-pro, FiraGO, sans-serif;
   font-size: var(--col-right-font-size, 16px);
   position: relative;
   width: 100%;
   margin-top: var(--text-margin-top);
   hyphens: manual;
}



/*****************/
/**  VARIABLES  **/
/*****************/


/* Below 600px screen width: */
:root {
   --spot-color: #BB0000;
   --text-margin-left: 15px;
   --text-margin-right: 15px;
   --text-margin-top: 10px;
   --text-font-size: 16px;
   --col-right-font-size: 16px;
   --outer-box-width: 90%;
   --col-left-width: 300px;
   --col-main-width: 100%;
   --col-right-width: 100%;
   --padding-top: 150px;
}

/* Above 600px screen width: */
@media only screen and (min-width: 600px) {
   .scrolled-bg {
      opacity: 0;
   }
   .col-left-bg {
      width: 0;
      height: 0;
   }
   :root {
      --outer-box-width: 550px;
      --col-left-width: 175px;
      --col-main-width: 375px;
      --col-right-width: 375px;
      --text-font-size: 18px;
      --h1-font-size: 22px;
      --padding-top: 20px;
      --col-right-font-size: 14px;
   }
   .col-left {
      top: var(--padding-top);
      width: var(--col-left-width);
   }
   .col-nav {
      position: fixed;
      top: 150px;
      width: var(--col-left-width);
   }
   .col-main {
      margin-left: var(--col-left-width);
      margin-right: var(--text-margin-right);
   }
   .col-right {
      margin-left: var(--col-left-width);
      margin-right: var(--text-margin-right);
   }
}

/* Above 700px screen width: */
@media only screen and (min-width: 700px) {
   :root {
      --outer-box-width: 650px;
      --col-left-width: 175px;
      --col-main-width: 450px;
      --col-right-width: 450px;
      --h1-font-size: 25px;
      --padding-top: 50px;
   }
   .col-nav {
      top: 175px;
   }
}

/* Above 800px screen width: */
@media only screen and (min-width: 800px) {
   :root {
      --padding-left: 25px;
      --padding-top: 25px;
      --outer-box-width: 750px;
      --col-left-width: 160px;
      --col-main-width: 400px;
      --col-right-width: 210px;
      --col-right-pos: 560px;  /* --col-left-width + --col-main-width */
   }
   .col-right {
      position: fixed;
      top: var(--padding-top);
      margin-left: var(--col-right-pos);
   }
}

/* Above 900px screen width: */
@media only screen and (min-width: 900px) {
   :root {
      --padding-left: 25px;
      --padding-top: 25px;
      --outer-box-width: 850px;
      --col-left-width: 175px;
      --col-main-width: 450px;
      --col-right-pos: 630px;
      --col-right-width: 220px;
   }
}

/* Above 1000px screen width: */
@media only screen and (min-width: 1000px) {
   :root {
      --outer-box-width: 950px;
      --col-left-width: 200px;
      --col-main-width: 500px;
      --col-right-pos: 700px;
      --col-right-width: 260px;
      --text-margin-left: 30px;
      --text-margin-right: 30px;
      --text-margin-top: 20px;
      --col-right-font-size: 15px;
      --h1-font-size: 30px;
   }
}

/* Above 1100px screen width: */
@media only screen and (min-width: 1100px) {
   :root {
      --outer-box-width: 1050px;
      --col-left-width: 200px;
      --col-main-width: 575px;
      --col-right-pos: 760px;
   }
}

/* Above 1200px screen width: */
@media only screen and (min-width: 1200px) {
   :root {
      --outer-box-width: 1100px;
      --col-left-width: 225px;
      --col-main-width: 625px;
      --col-right-pos: 825px;
      --col-right-font-size: 16px;
   }
}




/**********************************************/
/**  GENERAL FONT, SIZE, AND COLOR SETTINGS  **/
/**********************************************/


html {
    margin: 0;
    padding: 0;
}

body {
   /* font-weight: normal; */
   font-family: adobe-text-pro, minion-3, ff-tisa-web-pro, freight-text-pro, ff-meta-serif-web-pro, adobe-caslon-pro, adobe-garamond-pro, lemonde-journal, serif;
   font-weight: 400;
   font-style: normal;
   /* font-feature-settings: "liga" 1, "onum" 1; */
   /* background-color: #F2F2F0; */
   /*-moz-font-feature-settings: "liga", "onum", "ss01";
   -ms-font-feature-settings: "liga", "onum", "ss01";
   -webkit-font-feature-settings: "liga", "onum" 1, "ss01";
   font-variant-numeric: oldstyle-nums;*/
   font-variant: oldstyle-nums;
   color: #111111;
   letter-spacing: 0.01em;
   hanging-punctuation: first last force-end;
}

h1 {
   font-family: ff-meta-web-pro, FiraGO, sans-serif;
   font-weight: 700;
   font-style: normal;
   font-size: var(--h1-font-size, 22px);
   color: #CC0000;
   margin-top: 35px;
   margin-bottom: 30px;
   hyphens: manual;
}

h2 {
   font-family: adobe-text-pro, FiraGO, sans-serif;
   font-weight: 700;
   font-size: 22px;
   color: #111111;
   margin-top: 35px;
   /* padding-top: 6px;
   border-top: 1px solid #CC0000; */
   hyphens: manual;
}

a {
   text-decoration: none;
   color: #BB0000;
}
a:hover {
   color: #DD0000;
}

p, h1, h2, ol, ul {
   line-height: 1.3;
   margin-left: var(--text-margin-left);
   margin-right: var(--text-margin-right);
   font-variant: common-ligatures, oldstyle-nums;
   font-feature-settings: "liga" 1, "pnum" 1, "onum" 1;
}

/* p, ol, ul {
   text-align: justify;
   text-justify: inter-word;
} */

ol, ul {
   padding-left: 1.25em;
}

/* Change color of bullet in <ul> and counter in <ol> */
/* Inspired by https://www.lockedownseo.com/change-the-bullet-color-of-a-list-item-with-css/ */
ul li {
  list-style: none;
}
ul li::before {
   content: "\2022";
   color: #CC0000;
   display: inline-block;
   width: 1.25em;
   margin-left: -1.25em;
   text-align: left;
}

/* Inspired by https://css-tricks.com/custom-list-number-styling/ */
ol {list-style: none; counter-reset: li}
ol li {list-style: none;}
ol li::before {
   content: counter(li) ".";
   color: #CC0000;
   font-weight: 700;
   display: inline-block;
   width: 1.25em;
   margin-left: -1.25em;
   text-align: left;
}
ol li {counter-increment: li}

.whiteOnBlack {
   display: inline;
   background-color: black;
   color: white;
   padding-left: 30px;
   padding-right: 30px;
   padding-top: 8px;
   padding-bottom: 12px;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
}

.whiteOnRed {
   display: inline;
   background-color: #CC0000;
   color: white;
   margin-left: 0;
   margin-top: 0;
   font-weight: 600;
   padding-left: 12px;
   padding-right: 12px;
   padding-top: inherit;
   padding-bottom: 4px;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
   font-feature-settings: "liga" 1, "tnum" 1, "lnum" 1;
   /* font-family: ff-meta-web-pro, FiraGO, sans-serif; */
}

.header-box {
   display: inline-block;
   font-family: ff-meta-web-pro, FiraGO, sans-serif;
   font-size: 13px;
   text-transform: uppercase;
   padding-top: 3px;
   padding-left: 7px;
   padding-right: 5px;
   padding-bottom: 3px;
   margin-top: 15px;
   margin-bottom: 5px;
}

.topic-box {
   padding-top: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid #BB0000;
   margin-top: 0;
   margin-bottom: 0;
   font-family: ff-meta-web-pro, FiraGO, sans-serif;
   /* font-feature-settings: "liga", "tnum", "ss01";
   -moz-font-feature-settings: "liga", "tnum", "ss01";
   -ms-font-feature-settings: "liga", "tnum", "ss01";
   -webkit-font-feature-settings: "liga", "tnum", "ss01"; */
   background-color: rgba(255, 255, 255, 0.85);
   color: #111111;
}

.section-box {
   padding-bottom: 0px;
   padding-left: 0;
   padding-top: 0;
   margin-left: var(--text-margin-left);
   margin-right: var(--text-margin-right);
   margin-top: 0;
   margin-bottom: 20px;
   font-family: ff-meta-web-pro, FiraGO, sans-serif;
   font-weight: 700;
   vertical-align: top;
   /* font-feature-settings: "liga", "tnum", "ss01";
   -moz-font-feature-settings: "liga", "tnum", "ss01";
   -ms-font-feature-settings: "liga", "tnum", "ss01";
   -webkit-font-feature-settings: "liga", "tnum", "ss01"; */
   font-size: 24px;
   background-color: #F8F8F8;
   color: #111111;
   float: none;
   display: block;
   border-left: 0px solid white;
   border-top: 1px solid #BB0000;
   border-bottom: 1px solid #BB0000;
   border-collapse: collapse;
   border-spacing: 0px;
}

.section-box-text {
   font-family: adobe-text-pro, serif;
   font-weight: 400;
   margin-left: 0;
   /* font-feature-settings: "liga", "tnum", "ss01";
   -moz-font-feature-settings: "liga", "tnum", "ss01";
   -ms-font-feature-settings: "liga", "tnum", "ss01";
   -webkit-font-feature-settings: "liga", "tnum", "ss01"; */
   font-size: var(--text-font-size);
   background-color: #F8F8F8;
   color: #111111;
}

.motto {
   font-family: farnham-display, serif;
   font-size: 19px;
   font-weight: 300;
   display: block;
   font-style: italic;
   margin-top: -5px;
   padding-top: 6px;
   padding-bottom: 7px;
   border-top: 1px solid #CC0000;
   border-bottom: 1px solid #CC0000;
}

.rule-below {
   padding-bottom: 6px;
   border-bottom: 1px solid #CC0000;
}

.figure {
   display: table;
   vertical-align: bottom;
   padding-left: var(--text-margin-left);
   padding-right: var(--text-margin-right);
}

.picture {
   display: block;
   vertical-align: top;
   border: 0px;
   float: none;
}
.picture_border {
   padding-left: 6px;
   border: 1px solid #AAAAAA;
}

.caption {
   display: block;
   vertical-align: top;
   float: none;
   position: relative;
   padding-top: 10px;
   padding-bottom: 10px;
   /* border-top: 1px solid #AAAAAA; */
   /* border-bottom: 1px solid #AAAAAA; */
   padding-right: var(--text-margin-right);
   font-family: ff-meta-web-pro, FiraGO, sans-serif;
   /* font-feature-settings: "liga", "tnum", "ss01";
   -moz-font-feature-settings: "liga", "tnum", "ss01";
   -ms-font-feature-settings: "liga", "tnum", "ss01";
   -webkit-font-feature-settings: "liga", "tnum", "ss01"; */
   background-color: rgba(255, 255, 255, 0.85);
   color: #888888;
   font-size: 14px;
}

@media only screen and (min-width: 1000px) {
   .picture {
      /* display: table-cell; */
      display: table-cell;
      padding-right: 0;
      padding-right: var(--text-margin-right);
   }
   .caption {
      /* display: table-cell; */
      display: table-cell;
      padding-right: 0;
      padding-top: 0;
      padding-bottom: 0;
      background-color: transparent;
   }
}

.highlight {
   font-family: ff-meta-web-pro, FiraGO, sans-serif;
   font-size: 18px;
   font-weight: 700;
}


/*****************************************/
/**  MATHEMATICS-RELATED FONT SETTINGS  **/
/*****************************************/


@font-face {
    font-family: Asana-Math;
    src: url('../fonts/Asana-Math.eot');
    src: local('Asana Math'),
         url(fonts/Asana-Math/Asana-Math.woff) format("woff"),
         url(fonts/Asana-Math/Asana-Math.otf) format("opentype"),
         url(fonts/Asana-Math/Asana-Math.ttf) format("truetype"),
         url(fonts/Asana-Math/Asana-Math.ttf#Asana-Math) format("svg");
}

math, fmath, .fm-math, fmath mo, fmath mi, .fm-mo, .ma-sans-serif {
   font-family: adobe-text-pro, Asana-Math, serif;
   font-feature-settings: "liga" 0, "tnum" 1, "lnum" 1;
}




/**********************/
/**  LEGACY CLASSES  **/
/**********************/


.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
  position: relative;
  float: left;
  margin-right: 8px;
  display: table;
}

.clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
  clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.initial2 {
  position:relative;
  float: left;
  border: 0px;
  font: 290% "Adobe Garamond Pro", Georgia, Constantia, "Times New Roman", Times, serif;
  color: #CC0000;
  line-height: 48px;
  margin-left: -2px;
  margin-bottom: -10px;
}

.initial5 {
  position:relative;
  float: left;
  border: 0px;
  font: 800% "Adobe Garamond Pro", Georgia, Constantia, "Times New Roman", Times, serif;
  color: #DDDDCC;
  line-height: 115px;
  margin-left: -5px;
  margin-bottom: -25px;
}

.input {
  font-family: "Consolas", Courier, "Courier New", monospace;
  font-size: 10.5pt;
  margin-left: 0.1em; margin-right: 0.15em;
  font-feature-settings: "liga" 0;
  -moz-font-feature-settings: "liga" 0;
  -ms-font-feature-settings: "liga" 0;
  -webkit-font-feature-settings: "liga" 0;
}
.inputpar {
  font-family: "Consolas", Courier, "Courier New", monospace;
  font-size: 10.5pt;
  margin-left: 2em;
  font-feature-settings: "liga" 0;
  -moz-font-feature-settings: "liga" 0;
  -ms-font-feature-settings: "liga" 0;
  -webkit-font-feature-settings: "liga" 0;
}

.col-main #hyperlinks {
  position: absolute;
  left: var(--col-main-width); width: 200px;
  margin-top: -18px;
  float: left;
  font-family: ff-meta-web-pro, FiraGO, sans-serif;
  font-size: 9pt;
  color: #777777;
  margin-left: 8px;
}