/* HTML/CSS, to support mobile devices  
 */

.header {
  position: fixed;
  top: 0;
  left:  11%;
  z-index: 100;
  width: 90%;

/* test stuff */
  border: 0px solid black;
} 

.header1 {
  position: fixed;
  top: 0;
  left:  11%;
  z-index: 100;
  width: 90%;

/* test stuff */
  border: 0px solid black;
} 

.main {
  position: relative;  
  top: 158px;
  width: 85%;
  left: 10%;  /* 1/2 of total - width */

   height: 80%;
/* test stuff */
  border: 0px solid black;
}

.nav {
  position: fixed;
  top: 158px;
  z-index: 10;
  display: inline;
  width: 80px;        /* tie with article */
  left: 15%; 
  float: left;
  padding-left: 0px;
/* test stuff */
  border: 0px solid cyan;  
}
.main1 {
  position: relative;  
  top: 128px;
  width: 80%;
  left: 5%;  /* 1/2 of total - width */

   height: 80%;
/* test stuff */
  border: 0px solid black;
}

.nav1 {
  position: fixed;
  top: 128px;
  z-index: 10;
  display: inline;
  width: 80px;        /* tie with article */
  left: 11%; 
  float: left;
  padding-left: 0px;
/* test stuff */
  border: 0px solid cyan;  
}

.article {
  position: relative; 
  left: 22%; 
  width: 72%;    /* tie with nav */
  background-color: #ffffff;
  height: 97%

/* test stuff */
  border: 2px solid red;
}

.article1 {
  position: fixed;
  top: 128px; 
  left: 22%; 
  width: 70%;    /* tie with nav */
  background-color: #ffffff;
  height: 57%

/* test stuff */
  border: 0px solid red;
}

.pDiv{
   display: none;
}

.footer {
  position: fixed;
  left: 20%;
  width: 70%;
  text-align: center; 
  background-color: #344b5e;
  bottom:0px; 
  font-size: 10px;

/* test stuff */
  border: 0px solid yellow;
}
.atable {
  display: table;
  width: 100%;

/*  display: flex;
  flex-direction:row;
*/
}

.ctype1 {
   display: table-cell;
   width: 35%
 
/*
  flex: 1 1 75%;
  border: 0px solid black;
  align-content: top; 

*/
}

.ctype2 {
   display: table-cell;
   width: 65%
 
}