body {
  padding: 2pt; 
}

ul.rside {
  font-family:Palatino; 
  margin-left:2px;
  font-size:18px; 
  font-weight:bold;
  line-height:1.5;
  color:green;
  list-style-position:outside;
}

.dialogContainer {
   display:flex;
   flex-direction:column;
   justify-content:flex-start;
}
.dialogRow {
   align-self:flex-start;
}

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: none;
  text-align: left;
}

.wrapper > * {
  padding: 2px;
  flex: 1 2 100%;
}

.header {
  background: navajowhite;
  font-family: "Palatino";
  font-size: 28pt;
  color: maroon;
}

.pgHdr {
   display:flex;
   flex-flow:column nowrap;
}
.hdr1 {
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  background: navajowhite;
  font-family: "Palatino";
  color: maroon;
}
.hdrBigFont {
   font-size:28pt;
}
.hdrSmallFont {
   font-size:18pt;
}
.hdrImg {
   margin-left:2%;
   width:40%;"
}

.footer {
  height: 25px;
  top:0px;
  background: wheat;
  color: steelblue;
  text-align:center;
  font-size:12px;
}

.btext {
  color:blue;
  font-family:"Palatino";
}

.main {
  flex: 4
  text-align: left;
  background: honeydew;
}

.aside-1 {
  flex: 1;
  background: #f0f9fd;
  color:darkOrange;
}

.aside-2 {
  flex: 1;
  background: #f0fafb;
  color:darkblue;
}

.showOnWide {
   display:block;
}


@media all and (min-width: 600px) {
  .main { flex: 100% }
  .aside { flex: 1 5 2; }
  .showOnWide {display:block;}
}

@media all and (min-width: 800px) {
  .main    { flex: 5 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

@media all and (max-width: 800px) {
  .navigation { font-size:8pt; }
  .hdrBigFont { font-size:14pt; }
  .hdrSmallFont { font-size:10pt; }
  .hdrImg {width:80%;}
  .showOnWide {display:none;}
  
}

@media all and (max-width: 600px) {
  .navigation {
    font-size: 10pt;
  }

  .footer {
     font-size:8px;
  }
  .aside-1 {
     display:none;
  }
  .showOnWide {
     display:none;
  }
  
}