* {
    box-sizing: border-box;
 }
 
body {
  background: rgb(227,225,218);
  margin: 0;
  padding: 0;
  font-family: "Lucida Bright", Cambria, Times, serif;
  font-size: 105%;
}

.center {
  margin: 0 auto;              /* centres content */
  max-width: 960px;         /* must have width for centre to work */
  background: rgb(255,255,255);       /* white */
  padding: 10px 25px 10px 25px;
  color: black;
}

.box {                               /* flexbox container */
   display: flex;
   flex-wrap: wrap;
 }

.banner {                               /* flexbox container with centering*/
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
 }

.box2 {                               /* flexbox container with fixed columns*/
   display: flex;
   flex-wrap: nowrap;
}
p  {
  font-size: 90%;
  margin: 0;
}
p a {
   color: rgb(174,132,26);    /* goldenrod + 25% */
   text-decoration: none;
   font-weight: bold;
   background: transparent;
   display: inline-block;
}

p a:hover  {
   background: rgb(174,132,26);
   color: rgb(255,255,255);
}

.centrep {
  text-align: center;
}
.rightp {
  text-align: right;
}

.leftgap {
  padding: 20px 0px 0px 20px;
}

h1,h2,h3,h4,h5 {
  margin: 0;
  border: 0px none;
  padding: 0;
}

h1   {
  font-size: 250%;
  font-weight: bold;
  color: rgb(174,132,26);
  text-align: center;
  margin: 2px 0 2px 0;
  border-top:2px solid rgb(174,132,26);
  border-bottom:2px solid rgb(174,132,26);
}
h2   {
  font-size: 175%;
  text-align: center;
  color: rgb(174,132,26);    /* goldenrod + 25% */
  margin: 2px 0 2px 0;
  border-top:2px solid rgb(174,132,26);
  border-bottom:2px solid rgb(174,132,26);
}

h3  {                         /*  subheadings  */
    color: rgb(174,132,26);
    font-size: 100%;
    text-align:center;
    margin:0.83em 0 0.83em 0;
    border-top:2px solid rgb(174,132,26);
    border-bottom:2px solid rgb(174,132,26);
}

h3 a {
   color: rgb(174,132,26);
   text-decoration: none;
   background: rgb(255, 255, 255);
   padding: 5px 0px 5px 0px;
   display: inline-block;
   margin: 0px 0px 2px 0px;
}

h3 a:hover  {
   background: rgb(174,132,26)	;
   color: rgb(255,255,255);
}
h4   {
  font-size: 125%;
  color: rgb(0,0,0);
  padding: 5px 0px 5px 0px;
  letter-spacing: 0;
}
h5 a {
   color: rgb(255,255,255);
   text-decoration: none;
   padding: 0;
   display: inline-block;
   margin: 0;
}

li a {
   color: white;
   letter-spacing: 2px;
   text-decoration: none;
   background: rgb(174,132,26);
   padding: 5px 5px;
   display: inline-block;
   width: 100%;
   text-align: center;
}

li a:hover {
   color: rgb(174,132,26);
   background: rgb(255,255,255);
}

.main {
   max-width: 960px;
   margin: 0 auto;
   padding: 0;
}
.navigation ul {
   display: flex;
   border: none;
   list-style: none;
   margin: 0;
   padding: 0;
}
.page-nav ul {
   display: flex;
   border: none;
   list-style: none;
   margin: 0;
   padding: 0;
   flex-wrap:wrap;
}

.navigation li {
   flex: 3;   
  border-left: 1px solid rgb(255,255,255);
}
.page-nav li {
  margin: 0;
  border-right: 1px solid rgb(174,132,26);
}
.page-nav li:last-child {
  border-right: none;
}

.page-nav li a {
   color: rgb(174,132,26);
   background-color: white;
   text-decoration: none;
   padding: 5px 5px;
   text-align: center;
   line-height: 0.5em;
   letter-spacing: 0;
}
.page-nav li a:hover {
   background-color: rgb(174,132,26);
   color: white;
   text-decoration: none;
}
.navigation .user {
   flex: 1;
}

.page-nav .user {
   flex: 1;
}
.row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
}

.column {
   display: flex;
   flex-direction: column;
   flex: 0 0  33.333333%;   
   padding: 5px;
}

.column2 {
   display: flex;
   flex-direction: column;
   flex: 0 0  66.666666%;   
   padding: 5px;
}

.columnshaded {
   background-color: rgb(235,206,180);
   display: flex;
   flex-direction: column;
   flex: 0 0  33.333333%;   
   padding: 5px;
   border-left: 5px solid rgb(255,255,255);
   border-right: 35px solid rgb(255,255,255);
}
.colborder   {
   background-color: rgb(235,206,180);
   align-self: center;
   border: 1px solid rgb(174,132,26);
   padding: 5px;
}

img {
  display: block;
  align-self: center;
  margin: auto;
}

table        {
  border-collapse: collapse;
  font-size: 80%;
  width: 100%;
}
.short table  {
  width: 76%;
}
th           {
  background-color: rgb(174,132,26);
  color: rgb(255,255,255);
  font-weight: bold;
  text-align: left;
  border: 1px solid rgb(255,255,255);
  padding: 2px 0px 2px 2px;
}
.whiteout  {
  background-color: rgb(255,255,255);
  color: rgb(255,255,255);
}
/* tr:nth-child(even) {background: rgb(220,220,220)} */
/* tr:nth-child(odd) {background: rgb(255,255,255)} */

.whitetable tr:nth-child(odd) {background: rgb(255,255,255)}
.whitetable tr:nth-child(even) {background: rgb(255,255,255)}

td           {
  vertical-align: top;
  text-align:left;
  background-color: rgb(249,237,211);
  border: 1px solid rgb(255,255,255);
  padding: 2px;
}
.rh td           {
  vertical-align: top;
  text-align: right;
}

.rh th           {
  vertical-align: top;
  text-align: right;
}
td a {
   color: rgb(255,0,0);
   text-decoration: none;
}

td a:hover  {
   background: rgb(174,132,26);
   color: rgb(255,255,255);
}
tr.bordered td{
    border-bottom: 1px solid rgb(174,132,26);
}


.c4          {width: 4%; }
.c5          {width: 5%; }
.c6          {width: 6%; }
.c7          {width: 7%; }
.c8          {width: 8%; }
.c9          {width: 9%; }
.c10        {width: 10%;}
.c11        {width: 11%;}
.c13        {width: 13%;}
.c15        {width: 15%;}
.c16        {width: 16%;}
.c18        {width: 18%;}
.c20        {width: 20%;}
.c22        {width: 22%;}
.c24        {width: 24%;}
.c25        {width: 25%;}
.c30        {width: 30%;}
.c36        {width: 36%;}
.c40        {width: 40%;}
.c45        {width: 45%;}
.c50        {width: 50%;}
.c60        {width: 60%;}
.c80        {width: 80%;}
.c70        {width: 70%;}
.c90        {width: 90%;}

.c2b    {                           /* for blank columns */
  width: 2%;
  background-color: rgb(255,255,255);
  border: none;
}
.c6b    {
  width: 6%;
  background-color: rgb(255,255,255);
  border: none;
}
.c20b    {
  width: 20%;
  background-color: rgb(255,255,255);
  border: none;
}
.c24b    {
  width: 24%;
  background-color: rgb(255,255,255);
  border: none;
}
.c30b    {
  width: 30%;
  background-color: rgb(255,255,255);
  border: none;
}
.c40b    {
  width: 40%;
  background-color: rgb(255,255,255);
  border: none;
}
.c50b    {
  width: 50%;
  background-color: rgb(255,255,255);
  border: none;
}
.c60b    {
  width: 60%;
  background-color: rgb(255,255,255);
  border: none;
}
.c70b    {
  width: 70%;
  background-color: rgb(255,255,255);
  border: none;
}

 /*** media ***/
@media all and (max-width: 1000px) {
   .navigation ul {
      flex-wrap: wrap;
   }
   
   .navigation li {
      flex: 1 1 50%;
   }

   .navigation .user {
      flex: 1 1 33.33%;
   }
}

@media all and (max-width: 480px) {
   .navigation li {
      flex-basis: 100%;
   }

   .navigation .user {
      flex-basis: 50%;
   }
}