/* Style sheet for Onno's e-page */
/* Version 3.0 - another total redo March-July 2008 */
/* Version 3.1 august 2008 */
/* Version 3.2 - new logo image and slanted tabs - april 2013 */
/* Version 3.3 - support for W3C compliant link in header - march 2015*/
/* Version 3.6 - rebuild using 3col techrepublic example - sept 2022*/
/* Version 3.6.3 - well on the way
/* Version 3.6.4 - replace 'classes' by new html5 tags
/* version 3.6.5 - align with Pandoc classes...
/* version 4.0.1 - release for ePage version 4 sept 2026
/*========================================*/
/* start with general lay-out             */
/*========================================*/

body {
  width: 90%;
  max-width: 1000px;
  margin: 0 20px;
  padding: 0;
  background-color: #fbf0e4; /*#fff4f0; /*#faf4f0; /*#f6f0eb #bbcce8;*/
  /*border: 3px solid red;*/
}

div#header {
    text-align: center;
    background-color: #3c0000;
    background-image: url(./newlogo.jpg);
    background-repeat: no-repeat;
    color: #c06000;
    height: 74px;
    margin: 0px;
    padding: 1px;
}

div#navcol {
    padding: 10px;
    width: 130px;
    float: left;
    background-color: #fdf8f0;/*#fbf0e4; /*#fff4e8;*/
}
#navcol h2 {
  font: italic bold 9pt Verdana, Geneva, sans-serif;
  color: #300000;/*dark red*/
  margin: 0;
}
#navcol ul {
  list-style-type: none;
  padding: 4px 0 6px 0;
  margin: 0 10px 3px 10px;
}
#navcol ul li {
  color: red;
  margin: 0;
  padding: 0;
}
#navcol ul li a {
  font: bold 9pt Arial, Helvetica, sans-serif;
}
#navcol ul li a:link, #navcol ul li a:visited, #navcol ul li a:active {
  color: #300000;/*dark red*/
}
#navcol ul li a:hover {
  color: #f00000;/*bright red*/
}
main {
    padding: 10px;
    margin-left: 160px;
    margin-right: 0;
    background-color: #fdf8f0;/*/*#fbf0e4;/*#f8ede2;/* #f6f0eb; */#fff4e8;
    border: 1px solid silver;
}

div#sidebar {
    padding: 10px;
    width: 130px;
    float: right;
  border: 1px solid silver;
background-color: red;/* to stand out what is this for delete #ffe7a8;/*#f8b040; /*light orange*/}

div#footer {
    min-height: 25px;
    border: none;
    background-color: #fff4e8;
    padding: 10px;
    text-align: center;
    clear: both;
}

#bottombar {
  width: 100%;
  float: left;
}

#bottombar p {
  text-align: center;
  color: #a04000;
  font: bold 8pt Arial, Helvetica, sans-serif;
}

#header h1, #header a h1, .htitle, #header .htitle {
  color: #c06000;
  font: bold 18pt Verdana, Geneva, sans-serif;
  margin: 0 70px
}

#header a {
  display:block;
}
#header a:hover{
  text-decoration: none;
}
#header .hstitle {
  margin: 2px 0px 2px 200px;
  font: italic bold 9pt Verdana, Geneva, sans-serif;
  color: #a04000;
}
#header p /*remove after all pages=span*/{
  margin: 2px 3em;
  font: italic bold 9pt Verdana, Geneva, sans-serif;
  text-align: right;
  color: #a04000;
}

#menubar {
  width: 100%;
  color: #c06000;
  height: 30px;
  padding: 0;
}
#menubar ul {
  margin: 0 0 0 160px;
  padding: 0;
  border: none;
  text-indent: 0;
  list-style-type: none;
}
#menubar ul li {
  float: left;
  height: 25px;
  min-width: 100px;
  padding: 0;
  background-color: #e0a030; /*#fff7b8; #fff4e8;*/
  border: 1px solid black;
  text-align: center;
}
#menubar ul li a {
  display: block;
  padding: 3px 10px 5px 12px;
  line-height: 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  color: #3c0000;
}

#menubar ul li a:hover {
  color: #d11;
  text-decoration: underline
}
#menubar ul li.active {
  background-color: #fff4e8;
  border: none;
}
#menubar ul li.active a {
  color: #223;
}
/*==========*/
section {
  width: 100%;
  /*float: left; */
  /*background-color: #f6f0eb; no #fff4e8;*/
  color: #113366;
  /*background-color: green; /*for test
  border: 1px solid red;*/
  border: none;
}

/* list lay-out */
ul,li {
margin: 0;
padding: 0 0 1px 1em;
}


/* General use of fonts */
h1, h2, h3 {
  font-family: Tahoma, Helvetica, sans-serif;
  font-style: normal;
  font-weight: bold;
  color: #223;}
h1 {
  /*margin: 5px 0 20px 5px;*/
  text-align: left;
  font-size: 20pt;}
h2 {
  font-size: 14pt;}
h3 {
  font-size: 12pt;}

div, p, ul, li, tr, td, .valve-list {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10pt;
  color: #136;
}

/* default link behaviour */

a:link, a:active{
  color: #22b;
  text-decoration: none;
  font-weight: bold;
}
a:visited{
  color: #416;
  text-decoration: none;
  font-weight: bold;
}
a:hover{
  text-decoration: underline;
  color: #d11;
}
a img {
  border: none;
}
a:hover img {
  background-color: #fdd;
}
/*some more lay-out gadgets*/
.box {
  width: 100%;
  display: block;
  overflow: hidden
}
.intro, .abstract {
  display: block;
  min-width: 100px;
  top: 10px;
  padding: 2px;
  line-height: 1.3;
  /* border: 1px solid blue;*/
}
.intro, .abstract {
  font: 10pt Tahoma, Geneva, sans-serif;
  font-weight: bold;
  margin: 2px 3px;
}
figure, .figure p {
  display: inline-block;
  /* float: left; */
  top: 10px;
  margin: 2px;
  padding: 2px;
  border: solid 1px #ccc;
  line-height: 1.3;
  font: 7pt Verdana, Geneva, sans-serif;
  color: #223;
  }
  
span.left figure { float: left;}
span.right figure { float: right;}
div.left figure { float: left;}
div.right figure { float: right;}

figure img {
  display: block;
  /*border: solid 2px red;*/
  margin: 1px 0px 10px 0px;
  /*border: solid 3px red;*/
}
figcaption, .caption {
  display: block;
  line-height: 1.3;
  margin: 7px 2px;
  font: 7pt Verdana, Geneva, sans-serif;
  color: #223;
  /* color: red; */
}
ul.listbox, .listbox li, .listbox a {
  text-indent: 0;
  list-style-type: none;
  font: 7pt Verdana, Geneva, sans-serif;
  margin: 0;
  padding: 0;
  color: *#223;
}
.listbox a {font-weight:bold;}

/* miscellaneous layout controls*/
.table{display: block}
.row  {display: block; padding:2px} /*; text-align:top}*/
.cell {display: inline-block; vertical-align: text-top; padding:2px}
.half {width: 49%;}
.third {width: 33%;}
.w60 {width: 59px;}
.w270 {width: 270px}
.w400 {width: 410px;}
.w550 {width: 560px;}
.right {float: right; margin-left: 4px}
.left {float: left; margin-right: 8px}
