* {
  box-sizing: border-box;
}

body {
  font-family:  "Trebuchet MS" , Helvetica, sans-serif;
  background-color: #001a09;
  color: #f2f2f2;
}

h1 {
  font-size: 110%;
}
h2 {
  font-size: 100%;
}
h4 {
    font-size: .5em; 
	
}

/* don't change the color of a visited link*/
a:link {
  text-decoration: none;
  color: #f2f2f2;
}
a:visited{
	 text-decoration: none;
	 color: #f2f2f2;
}
a:active{color: #f2f2f2;} 

.pop-out {
    transition: transform .10s;		
}	

.pop-out:hover {
        -ms-transform: scale(5, 5);
        -webkit-transform: scale(5, 5);
        transform: scale(5, 5);	
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header' 
    'menu menu menu '
    'left  middle  right' 
    'footerleft footermid footerright';   
   grid-template-columns: 1fr 1fr 1fr;
   grid-column-gap: 10px; /* - if you want gap between the columns */
} 

.grid-container2 {
  display: grid;
  grid-template-areas: 
    'header header header' 
    'menu menu menu'
    'myForecast myForecast myForecast' 
    'footerleft footermid footerright';   
   grid-template-columns: 1fr 1fr 1fr;
   grid-column-gap: 10px; /* - if you want gap between the columns */
}


/* Style the header */
.header {
  grid-area: header;
  background-color: #00802d;
  color: #000000;
  padding: 5px 10px 20px 50px;
  justify-items: center;
  font-size: 35px;
  font-family:  "Papyrus" , Helvetica, sans-serif;
}

.menu {
    grid-area: menu; 
	background-color: #006600;
}

.myForecast {
	grid-area:myForecast;
	background-color: #eeffe6; 
	color: black ; 	
}
.myHourly {
    grid-area:myForecast;
    background-color: #0052cc; 
    color: #e6f0ff ; 
    justify-items: center;
    padding: 1px 30px 5px 30px;	
}
.myAlerts {
    grid-column-start: 2;
    grid-column-end: 3;
}
.forecast_hours {
    grid-column-start: 1;
    grid-column-end: 4;
}


.left,
.middle,
.right {
   /* height: 400px; Should be removed. Only for demonstration */  
   /* align-self: center;    column axis */	
   justify-self: center; /* row axis */   
}


.mainleft{
	  grid-area: left;  
      justify-items: center;	  
	  background-color: #bfbfbf ; 
      color: black ;
	  tr:nth-child(even) {
        background-color: #2db92d;}
      td: {padding: 25px  50px 25px  50px;}	
}


.mainmiddle{
   grid-area: middle;	
   background-color: #bfbfbf ; 
   color: black ;
   justify-items: center;
   td { vertical-align:top } 
   text-align: center;
}

.mainright{
   grid-area: right;
   background-color: #bfbfbf ; 
   color: black ;
   /* justify-items: center;*/ 
   /*  style="width:90%"  added to <table> in forecast_iconic.inc  */
   padding: 25px ; 
   font-size:16px;	
   table : width= 90%; 
   tr:nth-child(even) {
     background-color: #2db92d;}	
	 
}

.righttoo{
	justify-self: center; /* row axis */
}
/* Style the footer */
.footerleft {grid-area: footerleft;}
.footermid {grid-area: footermid;}
.footerright {grid-area: footerright;}
.footerleft,
.footermid,
.footerright {  
    background-color: #004d1b;
	color: #ffffe6;
    padding: 10px;
    justify-items: center;
	font-family: "OCR A", "Courier New", monospace; 
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header ' 
      'menu menu menu '
      'middle middle middle ' 
      'footerleft footerleft'
	  'footermid footermid'
      'footerright footerright';
  }
}

/*   NAV bar   */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  border-right:1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #04AA6D;
}


.abouttable {
    padding: 5px  35px  5px  35px;
    tr:nth-child(even) {
       background-color: #006624;
    }	
.locationimage {
  display: block;
  margin-left: 50px;
  margin-right: auto;
}
	
/*   NWS forecast_strip  */
.nws_strip {
}

/*  this is for celestial.inc */
.celestial_body 
    color: #ff6666; 
    margin-bottom: 30px;
    float: right;
	width: 50%; 		
}

#myCelestial{
    color:	#ffffcc;
	background-color: #267326;	
}

#contents {
    clear: both;
    margin: 20px;
}

#widget_group {
    float: left;
    margin-right: 10px;
	margin-left: 50px;
}

.widget {
    margin-bottom: 30px;
    clear: both;
}
.widget_title {
    font-weight: bold;
    padding: 2px 10px 2px 10px;
    /* underlined titles */
    /* border-bottom: 2px solid var(--section-border-color); */
	border-bottom: 5px solid yellow;
    /* outlined titles */
/*
    background-color: var(--title-background-color);
    border: 1px solid var(--section-border-color);
*/
}