@charset "utf-8";
/* CSS Document */

body{
  font-family: "Times New Roman";
  background-image: url("99_Background.jpg");
  color: #ececec;
}


.wrapper {
  max-width: 1160px;
  margin: 0 auto;
}

.wrapper > * {
  border: none;
  border-radius: 0px;
  padding: 0px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 0px;
}


a:link {
  color: black;
  text-decoration: none;
  font-weight: bold;
}
a:visited {
  color: black;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: white;
  text-decoration: underline;
  font-weight: bold;
}
a:active {
  color: white;
  text-decoration: underline;
  font-weight: bold;
}


.moderator {
  color: black;
  font-size: 1.15em;
}

.note {
  color: black;
  font-size: .9em;
  padding-left:25px;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* desktop slash default layout */


h1 {
  text-decoration: underline;
  color: white;
  font-family: "Palatino";
  font-weight: normal;
  font-size: 1.4em;
}

.responsive {
  width: 340px;
  height: auto;
}

.imgboxr {
  width:340px;
  height: auto;
  padding: 5px;
  float: right;
}

.imgboxl {
  width:340px;
  height: auto;
  padding: 5px;
  float: left;
  font-size: .85em;
}

.responsivec {
  width: 100%;
  height: auto;
  padding: 0px;
}

.imgboxc {
  width:100%;
  height: auto;
  padding: 3px;
  text-align: center;
  font-style: italic;
  font-size: .85em;
}


.aestheticbar {
   grid-column: col-start 1 / span 1;
   grid-row: 1 / 5 ; 
   width: 100px;
   writing-mode: vertical-rl;
   border: 0px;
   padding: 0px;
   font-size:5.5em;
   font-family: "Palatino";
   color: white;
}

.header {
  grid-column: col-start 2 / span 11;
  grid-row: 1 ;
  font-size:2.3em;
  border-style: none none solid none;
  font-family: "Palatino";
  color: black;
}

.headsubtitle {
  font-size: .85em;
  color: white;
}
  
.content {
  grid-column: col-start 2 / span 11 ;
  grid-row:  3 ;
  font-size: 1.1em;
}

.nav {
  grid-column: col-start 2 / span 11;
  grid-row: 2;
  font-size:1.4em;
  padding: 15px;
}
  
.footer {
  grid-column: col-start 2 / -1;
  grid-row: 4;
  font-size:1em;
  border-style: solid none none none;
}



/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

@media screen and (max-width: 991px) {
/* start of large tablet styles */

 .aestheticbar {
   display: none;
}
  
.responsive {
  width: 250px;
  height: auto;
  padding: 0px;
}

.imgboxr {
  width:250px;
  height: auto;
  padding: 3px;
  float: right;
}

.imgboxl {
  width:250px;
  height: auto;
  padding: 3px;
  float: left;
}
  
.header {
  grid-column: col-start 1 / span 12;
  grid-row: 1 ;
  font-size:2.2em;
}
  
.content {
  grid-column: col-start 1 / span 12 ;
  grid-row:  3 ;
  font-size: 1.1em;
}

.nav {
  grid-column: col-start 1 / span 12;
  grid-row: 2;
  font-size:1.2em;
  padding: 7px;
}
  
.footer {
  grid-column: col-start 1 / -1;
  grid-row: 4;
  font-size:1em;
  border-style: solid none none none;
}
  
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


@media screen and (max-width: 500px) {
/* start of phone styles */

.aestheticbar {
   display: none;
}
  
.responsive {
  width: 100%;
  height: auto;
  padding: 2px;
} 
  
.imgboxr {
  width:100%;
  height: auto;
  padding: 2px;
}
  
.imgboxl {
  width:100%;
  height: auto;
  padding: 2px;
}

.header {
  grid-column: col-start 1 / span 12;
  grid-row: 1 ;
  font-size: 6vw;
}
  
h1 {
  text-decoration: underline;
  color: pink;
  font-family: "Palatino";
  font-weight: normal;
  font-size: 5.1vw;
}
  
.nav {
  grid-column: col-start 1 / span 12;
  grid-row: 2;
  font-size: 4vw;
}
  
.content {
  grid-column: col-start 1 / span 12 ;
  grid-row: 3;
  font-size: 3.75vw;
}

.footer {
  grid-column: col-start 1 / -1;
  grid-row: 4;
  font-size: 4vw;
  border-style: solid none none none;
}
  
}