/* ========== global style layout ========================================== */
@charset "utf-8";

/* ========== normalization ================================================ */
* { margin: 0; padding: 0; }


/* ========== styling the body ============================================= */
body {
  display: block;
  background-color:#ffffff;   
  color:#545454;
  font-family:sans-serif,Verdana;
  max-width: 1500px; margin-left: auto; margin-right: auto; /* center */
  /* NOTE: the centering works only if body is displayed as block */
}

/* ========== general link colors ========================================== */
a:link          {color:#0077be; }  
a:visited       {color:#666666; } /* visited links are grey */
a:focus         {color:#b52126; background-color: #f0f0f0; } /* tabulator */
a:hover         {color:#b52126; background-color: #f0f0f0; } /* mouse     */
a:active        {color:#b52126; }
a[href^="http"] {color:#0077be; } /* external links are constant blue     */

/* ========== define a "read more"-style link ============================== */
a.more { 
  display: float;
  float: right;
  text-align: right; 
}
a.more:before {
  content: "» ";
  font-weight: bold;
  margin-left: -0.1em;
  padding: 0;
}  

/* ========== default header parameters ==================================== */
h1         {font-size:144%; font-weight:bold; color:#b52126; text-align:center;}
h2         {font-size:120%; font-weight:bold; color:#d4af37; padding: 0.5em 0;}
h3         {font-size:120%; font-weight:bold; color:#b52126; }
h4, h5, h6 {font-size:100%; font-weight:bold; color:#545454; padding: 0.2em 0;}
h3 {
  display: inline-block;
  padding: 0.6em 0 0.3em 0;
}

/* ========== style defaults for common html tags ========================== */
p               {text-align:  left; margin-bottom:0.5em; line-height: 120%;}
em              {font-weight: bold; }
code            {font-weight: bold; font-size:larger; color: #0077be; } 
var             {font-style:  oblique; }
blockquote      {background-color: #f1f1f1;  
  padding:0.4em 0.5em 0.4em 0.5em;
  margin: 0.5em 2em 0.2em 3em;
}
blockquote p { margin: 0; }

table td, table th {padding: 3px; }
table           {border: 1px solid #545454; margin: 0.5em;}
ul, ol          {margin: 0.1em 0 0.1em 0;}
ol li {
    margin-left: 2em;
    padding: 1px;
}
ol li:before {
    margin-left:1em;
}
ul li {
  display: block;
  list-style-type: none;
  padding: 0 0 0.2em 1em;
}
ul li:before {
  content: "» ";
  font-weight: bold;
  margin-left: -0.9em;
  padding: 0;
}  
nav { font-size: 100%; }

/* ========== general styles for nav link lists ============================ */
nav, nav ul, nav li {        /* normalize ul styles within nav */
  list-style-type: none;
  border: none;
}

/* ========== styling the top fixed nav menue ============================== */
nav.fixed {
  position: fixed; top: 0.2em; right: 0;
  padding: 0.1em 0.1em 0.1em 0.1em;
  background-color: rgba(204,204,204,0.2);
  border: 1px solid #cccccc;
  border-radius: 0.3em 0 0 0.3em;
}
nav.fixed ul {
  display: inline;
  padding:0 ; margin: 0;
  background-color: inherit;
}
nav.fixed ul li {
  display: inline-block;
  background-color: inherit;
  padding: 0;
}
nav.fixed a {
  display: block;
  border:none;
  color: hsl(46,75%,33%);
  text-decoration: none; font-weight: bold;
  padding: 0.1em 0.1em 0.1em 0.1em;
}
nav.fixed a:focus  { color: #b52126; }
nav.fixed a:hover  { color: #b52126; }
nav.fixed a:active { color: #b52126; }
nav.fixed li a:before {                  /* add a separation bar ... */
  content: " | ";
  color: hsl(46,75%,33%);
  padding: 0.0em 0.0em 0.0em 0em;
}
nav.fixed li:first-child a:before {     /* ...but not for the first item */
  content: none;
  padding: 0.0em 0.0em 0.0em 0em;
}
 
/* ========== styling the header =========================================== */
header {
  display: block;
  position: relative;    /* this ensures the "header img#headlogo" position */
  background-color:#f7f7f7;          /* default background for header */
  background-image:linear-gradient(180deg, 
        #ffffff 0%, #f1f1f1 50%, #f7f7f7 100%);  
  width: 100%; 
  max-width: 1498px; 
  min-height: 4.5em;
}
header img#headlogo {
  position: absolute; top: 0.3em; left: 0.2em;
  padding: 3px 0 0 0.5em;
  max-width: 31%;
  height: 1.5em;
}
header h1 {
  clear: both;
  padding: 0.2em 0.5em 0.2em 0.5em;
  max-width: 70%;
  margin-left: 20%;       /* header and image should not overlap */
  margin-right: 20%;      /* keep some space to the right as well */ 
  text-align: center;
}
a.header {
  text-decoration: none;
}
/* ========== styling the L1 navigation bar =============================== */
div.L1nav {
  display: block;
  margin: 0.2em 0em 0.2em 2%;
  padding: 0;
  color: #545454;
  background-color: none;
}
nav.L1nav {
  display: inline-block;
  padding: 0; margin: 0;
  background-color: inherit;
  background-image: linear-gradient(180deg, #fff, #dddddd);
}
nav.L1nav ul {
  /* to avoid the spurious spacing between li items in 
   * display: inline-block mode: */ 
  display: -webkit-flex;  
  display: flex;
  background-color: inherit;
  padding: 0; margin: 0; 
}
nav.L1nav ul li {
  display: inline-block;
  margin: 0;
  padding: 0em 0em 0em 0em;
  border:1px solid #dddddd;
  border-left:none;
  background-color:inherit;
}
nav.L1nav ul li:first-child {
  border-left:1px solid #dddddd;
}
nav.L1nav a {
  display: block;
  color: #666666;
  text-decoration: none; font-weight: bold;
  padding: 0.3em 1.2em 0.3em 1.2em; 
  margin: 0;
}
nav.L1nav a:focus  { color: #b52126; }
nav.L1nav a:hover  { color: #b52126; }
nav.L1nav a:active { color: #b52126; }
/* ========== styling the article ========================================== */
main {
  display: block;
  margin: 1.5em 0 0 2%;
  padding: 0;
  background-color: #fcfcfc;            /* almost invisible light grey */ 
  box-shadow: 1px 1px 1px 0 rgba(240,240,240,0.75);
}

main article {
  display: inline-block;
  vertical-align: top;
  width: 62%;
  margin: 0;

}

main article h2 {
  color: #666666;
  margin: 0 0 1em 0;
  padding: 0.5em 0 0.5em 0;
  border-top: 2px solid #666666;
  border-bottom: 2px solid #666666;

}
main section {
  padding-bottom: 0.5em;
}
/* ========== styling the aside ============================================ */
main aside {
  display: inline-block;
  margin: 0 1% 0 1%; 
  vertical-align: top;
  width: 32%;
}
main aside section {
  display: inline-block;
  margin: 0 0 1em 0; 
  background-color: #f7f7f7;
  border: 1px solid #cccccc;
  padding: 0.5em;
}

/* ========== styling the footer =========================================== */
footer {
  display: block;
  margin: 1em 0 0 0;
  padding: 0em;
  background-color: #f1f1f1;
  box-sizing: border-box;
  width: 100%;
  font-size: 83%;
}
footer p.copyright {
  display: inline-block;
  margin: 0.5em 0 0.5em 0.5em;
  text-align: left;
  vertical-align: middle;
}
nav.footer {
  display: inline-block;
  float: right;
  padding: 0.2em;
}
nav.footer ul {
  display: inline-block;
  background-color: inherit;
}
nav.footer li {
  display: inline-block;
  padding: 0;
}
nav.footer a {
  display: block;
  color: #999999;
  text-decoration: none; font-weight: bold;
  padding: 0.2em 0.5em 0.2em 0em;
}
nav.footer a:focus  { color: #b52126; }
nav.footer a:hover  { color: #b52126; }
nav.footer a:active { color: #b52126; }
nav.footer li a:before {                  /* add a separation bar ... */
  content: "| ";
  color: #999999;
  padding: 0.2em 0.7em 0.2em 0.2em;
}
nav.footer li:first-child a:before {     /* ...but not for the first item */
  content: none;
  padding: 0.2em 0.5em 0.2em 0em;
}

/* ========== specifics ==================================================== */
p.landing {
  min-height: 5em;
}
p.defineInfinada {
  padding: 1em 0.5em 0.5em 0.5em;
  font-size: 128%;
}
p.defineInfinada b {
  font-weight: bold;
  color: #b52126;
}

a.mail:after {
  content: "schke@infinada.com"
}
/* if a link points to the current page, then disable the focus/hover effect */
nav ul li:before     {content: none; }
nav a.current        {color: #b52126; }
nav a.current:focus  {color: #b52126; background-color: inherit; }
nav a.current:hover  {color: #b52126; background-color: inherit; }
nav a.current:active {color: #b52126; background-color: inherit; }

/* ========== setting the main font size using media queries =============== */ 
/* If this would work reliably, then we would ask three questions: 
@media screen and (min-resolution: 150dpi) and (min-device-width: 640px) {
   * This includes Retina notebooks, 4k monitors at 27", most tablets
   * and most mobile phones with higher DPI. But it would exclude 
   * older mobile phones with comparatively small screen sizes.
  body { font-size: 141%; }
}
@media screen and (min-resolution: 300dpi) and (min-device-width: 1080px) {
   * This includes few notebooks at weirdly high DPI and is mostly 
   * aimed at newer tablets and extremely high-DPI mobile phones.   
  body { font-size: 200%; }
}
@media screen and (max-resolution: 85dpi) and (min-device-width: 1080px) {
   * This is nowadays very likely a HD TV set (at least 26") or 
   * 4k TV set (at least 52"). While it could 
   * also be an extremely old PC monitor, we need to live with the fact
   * that we cannot distinguish these based on dpi and device-width alone.
  body { font-size: 200%; }
}  
 * The following can be used to quickly see which resolution a device/browser
 * combination uses: 
@media screen and (max-resolution: 300dpi) {
  p { background-color: red; }
} 
@media screen and (max-resolution: 250dpi) {
  p { background-color: green; }
} 
@media screen and (max-resolution: 200dpi) {
  p { background-color: blue; }
} 
@media screen and (max-resolution: 175dpi) {
  p { background-color: cyan; }
} 
@media screen and (max-resolution: 150dpi) {
  p { background-color: fuchsia; }
} 
@media screen and (max-resolution: 125dpi) {
  p { background-color: yellow; }
} 
@media screen and (max-resolution: 100dpi) {
  p { background-color: silver; }
} 
@media screen and (max-resolution:  75dpi) {
  p { background-color: brown; }
}
  results:
  441dpi Samsung Gal S4    is mapped to (250,300)
  359dpi Samsung Gal Tab 2              (175,200)
  224dpi Asus Transformer               (125,150)
  221dpi Macbook Pro                    (125,150)
  109dpi Dell 27" 2560x1440             ( 75,100)

  INSTEAD, we use a simple rule based on DPI and orientation only: 
*/
@media screen and (min-resolution: 160dpi) and (orientation: portrait){
    body                  { font-size: 144%; }
}
@media screen and (min-resolution: 240dpi) and (orientation: portrait){
    body                  { font-size: 196%; }
}
/* Safari does not support "resolution": */
@media screen and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
    body                  { font-size: 212%; }
    p.defineInfinada      { font-size: 100%; }
}

/* If the screen is too small, then put the aside down below the article:    */
@media screen and (max-width: 50em) {
  main article {min-width: 99%; width: 99%; }
  main aside   {width: 95%}
}