* 
{
  box-sizing: border-box;
}
a 
{
    color : inherit;
}
html, body 
{
  height: 100%;
}
body 
{
    font-family: myFont, Arial, Helvetica, sans-serif;
    margin: 0;
}

input:focus, textarea:focus, a:focus 
{
    outline: none;
}

.header 
{
    color            : white;
    margin-top       : 10px;
    padding-bottom   : 2em;
    text-align       : center;
    background       : #666666;
    background-image : url(image/head-background.jpg); 
    /*
    background: rgba(113, 104, 97, 1.0);
    background: rgba(245, 220, 163, 1.0);
    background: rgba(86, 131, 111, 1.0);
    background: #1abc9c;
    */
}
.header-bar 
{
    padding          : 0.5em;
    padding-right    : 1.1em;   
    text-align       : right;
    color            : #FFFFFF;
    background-color : #333;
    --font-family      : "Courier New";
    font-size        : 1.2em;
    font-weight      : 700;
    
}
.header-manifest
{    
    padding-top    : 0.5em; 
    padding-bottom : 0.5em; 
    padding-left   : 0.5em; 
    padding-right  : 0.5em; 
    font-size      : 2.7em; 
    font-weight    : 700;
}
.step-numb, .step-item 
{    
    vertical-align : top;
    font-size      : 1.5em;
    text-align     : left; 
    font-weight    : 700;
}
.step-numb
{    
    padding-right  : 0.0em; 
    padding-bottom : 0.25em;
    font-weight    : 700;
}
.step-item
{
    padding-left  : 0.5em; 
    width: 100%;
}

.board-upper
{
    color : rgba(100, 0, 40, 2.0);
    font-style:  italic;
}

.paragraf-upper
{
    _color       : rgba(100, 0, 40, 2.0);
    _font-weight : 700;
    _font-size   : 1.2em; 
    _font-style  :  italic;
}

h1
{
    font-size: 2.0em;
}

.padding-panel
{
    padding-top:  2.6em;
    font-size: 0.37em;
}
.padding-item
{
    margin    : 0;
    padding   : 0;
    _border    : solid; 
    display   : inline-block; 
    min-width : 16vw;
}

.header h1 
{
    padding-top   : 0.0em;
    padding-right : 0.1em;
    padding-left  : 0.1em;
    margin-bottom: 0.3em;
    _padding-bottom:  0em;
    font-size     : 1.6em;
    text-align: right;
}
.header h4 
{
    text-align     : center;
    margin-top     : 0.0em;
    margin-bottom  : 0.0em;
    padding-bottom : 0.0em;
    padding-top    : 0.0em;
    padding-right  : 0.1em;
    padding-left   : 0.1em;
    font-size      : 1.1em;
}



.row-rtl h2, .row-ltr h2 
{
    color : rgba(100, 0, 40, 2.0);   
}

.navbar 
{
  overflow         : hidden;
  background-color : #333;
}
.navbar a 
{
  float           : left;
  display         : block;
  color           : white;
  text-align      : center;
  padding         : 14px 20px;
  text-decoration : none;
}
.navbar a.right 
{
  float: right;
}
.navbar a:hover 
{
  background-color: #ddd;
  color: black;
}
.row-rtl, .row-ltr 
{
  font-size : 1.25em;
  display   : flex;
  flex-wrap : wrap;
}
.row-rtl 
{
  direction : rtl;  
}
.row-ltr 
{
  direction : ltr;  
}
.main, .side,  .flat-left, .flat-middle, .flat-right 
{
  direction        : ltr;  
  padding          : 1em;        
}
.main 
{
  flex             : 60%;
  background-color : white;
}
.side, .foot 
{   
  min-width        : 30vmax;  
  flex             : 30%;
  background-color : #F1F1F1;
}
.foot
{
    text-align  : left;
    background  : #ddd;    
}
.fakeimg 
{
  background-color : #aaa;
  width            : 100%;
  padding          : 20px;
}
.footer 
{
  padding-top    : 2em;
  padding-left   : 2em;
  padding-right  : 2em;
  padding-bottom : 1em;  
  text-align     : center;
  background     : #ddd;
}
.link
{
    cursor          : pointer; 
    text-decoration : underline; 
    font-weight     : 700;
}

.flat-left, .flat-middle, .flat-right
{
  min-width        : 55vh;  
  width            : 30%;  
  flex             : 30%;  
  _padding: 2em; 
}


input[type='checkbox'] 
{
    display: none;
}
input[type='radio'] 
{
    display: none;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 90vw) 
{
  .row 
  {
      _height: 30vw;
    /*   
    flex-direction: column-reverse;
    */
    flex-direction: column; 
  }
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) 
{
  .navbar a 
  {
    float : none;
    width : 100%;
  }
}