a:link { color: #0057C0; }
a:visited { color: #2077E0; }
a:active { color: #4099FF; }

p {
    text-align: justify;
}

body {
    font-variant-ligatures: common-ligatures contextual; /* liga, clig, calt */
    font-variant-numeric: lining-nums proportional-nums; /* lnum, pnum */
    font-kerning: normal; /* kern */
    -moz-font-feature-settings: "liga", "clig", "calt", "kern", "pnum", "lnum", "locl";
    -webkit-font-feature-settings: "liga", "clig", "calt", "kern", "pnum", "lnum", "locl";
    font-feature-settings: "liga", "clig", "calt", "kern", "pnum", "lnum", "locl";
    
    font-family: "Fira Sans", sans-serif;
    line-height: 135%;
    color: #111;
    background: white;
    font-weight: 400; /* TODO: try 300/400 combo */
    font-style: normal;
    text-decoration: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12pt;
    display: grid;
    grid-template:
	"header"
	    "main-content"
	    "navigation"
	    "footer"
	    / 1fr
    ;
}
/* 700 weight for bold is too fat with our font */
/* FIXME: hopefully this looks reasonably well without our font as well… explore further @media queries */
b, strong, h1, h2, h3 {
    font-weight: 500;
}

a:link img,
a:hover img,
a:active img,
a:visited img {
    border-style: none;
}

tt, pre, code, textarea, address {
    font-family: "Source Code Pro", monospace;
    
    font-variant-numeric: lining-nums tabular-nums slashed-zero; /* lnum, tnum, zero */
    -moz-font-feature-settings: "lnum", "tnum", "zero";
    -webkit-font-feature-settings: "lnum", "tnum", "zero";
    font-feature-settings: "lnum", "tnum", "zero";
}

pre.asciiart {
    /* no slashed zero in ascii art */
    
    font-variant-numeric: lining-nums tabular-nums; /* lnum, tnum */
    -moz-font-feature-settings: "lnum", "tnum";
    -webkit-font-feature-settings: "lnum", "tnum";
    font-feature-settings: "lnum", "tnum";
}

pre, code, textarea {
    line-height: 110%;
    white-space: pre;
}

.floatright {
    float: right;
}

article {
    grid-area: main-content;
    margin-top: 8px; /* offset drop shadow of header */
    padding: 1em;
    background: #fff;
}

header {
    grid-area: header;
    background-color: #c3d9ff;
    padding: 6px 9px;
    position: relative;
    box-shadow: 0 0.2em 0.4em #555;
    text-align: center;
}

header h1 {
    font-size: 17.3pt;
    line-height: 130%;
    font-family: "Source Serif Pro", serif;
    margin: 4px 0;
    font-weight: 600;
}

header div.imagebar {
    padding-top: 2px;
}

header div.imagebar img {
    margin-right: 12px;
}


header nav {
    padding: 0.2em 0;
    border-radius: 0.5em;
    line-height: 140%;
}

header nav a {
    display: inline;
    margin: 0.1em 0.2em;
    font-weight: 500;
}

footer {
    grid-area: footer;
    background-color: #dbf2ff;
    text-align: center;
    padding: 4px;
    clear: left;
    font-size: 80%;
}

footer a {
    color: #555;
    text-decoration: none;
}

footer span {
    white-space: nowrap;
}

nav {
    background-color: #d3e9ff;
    padding: 16px;
    line-height: 100%;
}

nav#sidebar {
    grid-area: navigation;
}

nav h2 {
    font-size: 100%;
    padding-bottom: 2px;
    border-bottom: 1px solid #555;
}

nav ul {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

nav ul.noindent {
    margin-left: 0;
}

nav a {
    display: block;
    margin: 2px 0px;
    padding: 2px 4px;
    text-decoration: none;
    border-left: 2px solid #d3e9ff;
    border-right: 2px solid #d3e9ff;
}

nav a.selected {
    background-color: #c3d9ff;
    border-left: 2px solid #555;
    border-right: 2px solid #555;
    border-radius: 6px;
    color: #111;
}

nav a:hover {
    background-color: #c3d9ff;
    border-left: 2px dotted #555;
    border-right: 2px dotted #555;
    border-radius: 0;
}

nav ul ul li a {
    padding-left: 1em;
}

nav ul ul ul li a {
    padding-left: 2em;
}

nav ul ul ul ul li a {
    padding-left: 3em;
}

nav ul ul ul ul ul li a {
    padding-left: 4em;
}

nav ul ul ul ul ul ul li a {
    padding-left: 5em;
}

.postingheader {
    border-top: 2px solid gray;
    padding-left: 15px;
}

.newsbox {
    border: 2px solid #555;
    background: #dbf2ff;
    margin: 0 3em 2em;
    padding: 0 1em;
    border-radius: 6px;
}

.newsserverstats {
    font-size: 85%;
}

.flattr {
    color: black;
}

hr {
    border: 1px solid #555;
}

.clearboth {
    clear: both;
}

.twitterfloatleft {
    float:left;
    margin: 0 6px 6px 0;
}

table.dwn {
    /* we need tabular numerics, otherwise the date columns get messed up
       (workaround: date column is also centered) */
    font-variant-numeric: lining-nums tabular-nums; /* lnum, tnum */
    -moz-font-feature-settings: "lnum", "tnum";
    -webkit-font-feature-settings: "lnum", "tnum";
    font-feature-settings: "lnum", "tnum";
    
    padding: 2px;
    margin: 2em;
}

th.dwn {
    font-size: 75%;
    font-weight: 500;
    text-align: left;
    vertical-align: top;
}

td.dwnauthor, td.dwnversion, td.dwnlink {
    padding-left: 4px;
    padding-right: 4px;
    text-align: left;
    vertical-align: top;
}

td.dwndate {
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    vertical-align: top;
}

td.dwnsize {
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
    vertical-align: top;
}

td.dwncomment {
    padding-left: 4px;
    padding-right: 4px;
    text-align: justify;
    vertical-align: top;
}

li.tuxred, a.tuxred {
    color: red;
}

li.tuxgreen, a.tuxgreen {
    color: green;
}

li.tuxblue, a.tuxblue {
    color: blue;
}

.noborder {
    border-style: none;
}

.centered {
    text-align: center;
}

.autoscale {
    max-width: 100%;
}

img.caticon {
    vertical-align: top;
    float: right;
    margin-left: 5px; 
    margin-top: -5px;
    margin-bottom: 5px; 
}

address {
    font-style: normal;
}

/* two columns on bigger screens - break point is at about "tablet in landscape mode" */
@media screen and (min-width: 55em) {
    body {
	grid-template:
	    "header        header"
		"navigation    main-content"
		"footer        footer"
		/ 1fr          7fr
	;
    }
    article {
	max-width: 60em;
	padding-left: 3em;
    }
    nav#sidebar {
	font-size: 11pt;
    }
    header div.imagebar,
    header nav {
	float: right;
    }
    header h1 {
	float: left;
    }
    header nav {
	padding: 0.5em;
	margin-top: 0.2em;
	line-height: 100%;
    }
    header nav a {
	margin: 0.1em 0.7em;
    }
}

/* remove spacing on mobile phones in portrait mode */
@media screen and (max-width: 30em) {
    article {
	padding: 0.5em;
    }
    .newsbox {
	margin: 0 0 1em;
	padding: 0 0.5em;
    }
    /* try to fit header into one line */
    header nav {
	font-size: 91%;
    }
    header nav a {
	margin: 0.1em 0;
    }
}

/* SANS regular: main font - should always be available in both weights
   italic can be synthesized (yuck, but saves download time)
 */
@font-face {
    font-family: 'Fira Sans';
    src: url('/fonts/eot/FiraSans-Regular.eot');
    src: url('/fonts/eot/FiraSans-Regular.eot') format('embedded-opentype'),
    url('/fonts/woff2/FiraSans-Regular.woff2') format('woff2'),
    url('/fonts/woff/FiraSans-Regular.woff') format('woff'),
    url('/fonts/ttf/FiraSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Fira Sans';
    src: url('/fonts/eot/FiraSans-Medium.eot');
    src: url('/fonts/eot/FiraSans-Medium.eot') format('embedded-opentype'),
    url('/fonts/woff2/FiraSans-Medium.woff2') format('woff2'),
    url('/fonts/woff/FiraSans-Medium.woff') format('woff'),
    url('/fonts/ttf/FiraSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* all other fonts only on bigger screens (starting with about tablet size)
   rationale: bandwidth should be higher than on mobile, so downloading fonts is no problem
   further divisions into different media sizes should be irrelevant

   @font-face inside @media de facto WORKS, but is FORBIDDEN by CSS 2.1
   TODO: find a good answer to this problem
   perhaps just go mobile-first like shown here:
   https://www.audero.it/blog/2013/07/02/how-to-solve-the-problem-of-font-face-inside-media-queries/
   this would make us change all font descriptions, but we only have 3 of then so far ;)
   but distinguishing normal/italic will not work then :-(
*/
@media (min-width: 40em) {

    /* SANS with real(!) italics */
    @font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/eot/FiraSans-Italic.eot');
	src: url('/fonts/eot/FiraSans-Italic.eot') format('embedded-opentype'),
        url('/fonts/woff2/FiraSans-Italic.woff2') format('woff2'),
        url('/fonts/woff/FiraSans-Italic.woff') format('woff'),
        url('/fonts/ttf/FiraSans-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
    }

    @font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/eot/FiraSans-MediumItalic.eot');
	src: url('/fonts/eot/FiraSans-MediumItalic.eot') format('embedded-opentype'),
        url('/fonts/woff2/FiraSans-MediumItalic.woff2') format('woff2'),
        url('/fonts/woff/FiraSans-MediumItalic.woff') format('woff'),
        url('/fonts/ttf/FiraSans-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
    }
    
    /* MONOSPACE: we SHOULD get away without bold here - unluckily we need to provide italics (wyseinst page) */
    @font-face {
	font-family: 'Source Code Pro';
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	src: url('/fonts/eot/SourceCodePro-Regular.eot') format('embedded-opentype'),
        url('/fonts/woff2/ttf/SourceCodePro-Regular.ttf.woff2') format('woff2'),
        url('/fonts/woff/otf/SourceCodePro-Regular.otf.woff') format('woff'),
        url('/fonts/otf/SourceCodePro-Regular.otf') format('opentype'),
        url('/fonts/ttf/SourceCodePro-Regular.ttf') format('truetype');
    }
    @font-face {
	font-family: 'Source Code Pro';
	font-weight: 400;
	font-style: italic;
	font-stretch: normal;
	src: url('/fonts/eot/SourceCodePro-It.eot') format('embedded-opentype'),
        url('/fonts/woff2/ttf/SourceCodePro-It.ttf.woff2') format('woff2'),
        url('/fonts/woff/otf/SourceCodePro-It.otf.woff') format('woff'),
        url('/fonts/otf/SourceCodePro-It.otf') format('opentype'),
        url('/fonts/ttf/SourceCodePro-It.ttf') format('truetype');
    }

    /* SERIF: we SHOULD get away with just the plain serif font for the logo - no bold, no italic */
    @font-face{
	font-family: 'Source Serif Pro';
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
	src: url('/fonts/eot/SourceSerifPro-Semibold.eot') format('embedded-opentype'),
        url('/fonts/woff/otf/SourceSerifPro-Semibold.otf.woff') format('woff'),
        url('/fonts/otf/SourceSerifPro-Semibold.otf') format('opentype'),
        url('/fonts/ttf/SourceSerifPro-Semibold.ttf') format('truetype');
    }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    a:link { color: #3077E0; }
    a:visited { color: #2067D0; }
    a:active { color: #5099FF; }

    img {
	filter: brightness(75%);
	border-radius: 2px;
    }

    body {
	color: #c8c8c8;
	background: #222;
    }

    article {
	background: #222;
    }

    header {
	background-color: #1b2228;
	box-shadow: 0 0.2em 0.4em #111;
    }

    footer {
	background-color: #1b2228;
    }

    nav {
	background-color: #23292f;
    }

    nav a {
	border-left: 2px solid #23292f;
	border-right: 2px solid #23292f;
    }

    nav a.selected {
	background-color: #43494f;
	border-left: 2px solid #8aa;
	border-right: 2px solid #8aa;
	color: #ccc;
    }

    nav a:hover {
	background-color: #33393f;
	border-left: 2px dotted #8aa;
	border-right: 2px dotted #8aa;
    }

    li {
	color: #999;
    }

    .postingheader {
	border-top: 2px solid #555;
    }

    .newsbox {
	background: #1b222f;
    }

    li.tuxred, a.tuxred {
	color: #d03030;
    }
 
    li.tuxgreen, a.tuxgreen {
	color: #30a030;
    }
    
    li.tuxblue, a.tuxblue {
	color: #6060d0;
    }
}