/* HTML/CSS, around 2010 timeframe (when add in main.css); next step is flex and iframe */

.header {
  position: fixed;
  top: 0px;
  right: -10%; 
  z-index: 10;

  left:  0%;  /* 9%;  */
/*  background-image: url('../TGS header.jpg')*/ /* no-repeat #66727C */; 
  
/* test stuff */
  border: 0px solid black;
} 

.main {
  position: relative;  
  top:2px;
  width: 85%;
  left: 8%;  /* 1/2 of total - width */
  height: 80%;
  text-align: center;  

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

.middle {
  position: relative;
  top: 140px; 
  width: 97%

/* test stuff */
  border: 0px solid cyan;
}
.nav {
  text-align: left;
  display: inline;
  width: 190px;        /* tie with article */
  background-color: #d5e7f7;
  float: left; 
  top:0px;
  height: 97% 
  padding-left: 52px;

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

.article {
  float: right;
  display: inline;
  width: 75%;    /* tie with nav */
  background-color: #ffffff;
/*  height: 97%  */
}

.article2 {
  float: right;
  top: 100px;
  display: inline;
  width: 75%;    /* tie with nav */
  background-color: #ffffff;
/*  height: 97%  */
}

/* so that we can have parchment */
.article1 {
  float: right;
  display: inline;
/*  background-color: #ffffff;  */
  width: 78%;    /* tie with nav */
}


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

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

.nav a:hover {
	background-color:rgb(99,200,254);
	color:rgb(100,100,255);
}