hr {
  background-color: #FF9966;
}
a:link {
  color: darkblue;
  text-decoration: none;
  xxx-font-size: 80%;
  text-shadow: 1px 1px lightblue;
}
a:visited {
  color: darkblue;
  text-decoration: none;
  xxx-font-size: 80%;
  text-shadow: 1px 1px white;
}

.markup {
  color: red;
  font-style: italic;
  font-weight: bold;
}

body {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  color: cadetblue;
  background: white;
  text-decoration: none;
  line-height: 100%;
  margin-left: 1em; margin-right: 1em;
}

/* hide scrollbar but allow scrolling of content */
body {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
body::-webkit-scrollbar { /* WebKit */
  width: 0px;
   height: 0px;
}

h1 {
  font-size: 150%;
  font-style: italic;
  line-height: 100%;
  color: #C90;
  font-weight: lighter;
}
h3 {
  font-size: 130%;
  font-style: italic;
  line-height: 100%;
  color: #C90;
  font-weight: lighter;
}
.current {
  font-size: 90%;
  line-height: 140%;
  color: #900;
  padding-left: 30px;
  padding-top: 15px;
}
.current-date {
  font-size: 70%;
  color: #000;
}
#normal {
font-size: 80%;
line-height: 160%;
}
#normal a:link, #normal a:visited {
  color: #F36;
  text-decoration: none;
}
#normal a:hover {
  color: #000;
  background-color: #CCC;
}
#footer {
  font-size: 60%;
  color: #039;
  text-decoration: none;
  line-height: 160%;
}
#footer a:link, #footer a:visited {
  text-decoration: none;
  color: #039
}
#footer a:hover {
  color: #999;
  text-decoration: none;
  background-color: #E2F3FF;
}
.imageTitle {
  font-size: 10px;
  line-height: 12px;
  color: #333;
}
.title {
  font-weight: bold;
  font-style: italic;
  font-size: 120%;
}

/* the page banner is at the top of most pages, has the artist's name/logo
   and main buttons of the site's sections. */
#pageBanner {
  width: 100%;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  position: relative;
  left: 0px;
  background-color: lightsteelblue;
  color: white;
  border-radius: 1em;
}
#pageBanner span {
  font-size: 150%;
  margin: 1em;
  text-shadow: 1px 1px darkblue;
}

.tag.artist {
  font-style: italic;
  text-shadow: 1px 1px white !important;
  margin-top: 1em;
}
.mainButtons {
  left: 30px;	/* offset enough to not underhand Artist */
  position: relative;
}
.mainButtons a {
  padding: 1em;
}

.announcements div {
  color: cadetblue;
  border: .5em solid white;
}

/* *******
.announcements .video:before {
  content: "▶"; /* bullet */
/* *******
  padding-right: 8px;
}
.announcements .video:after {
  content: "(Video)"
}

.announcements .zoom:before {
  content: "▶"; /* bullet */
/* *******
  padding-right: 8px;
}
.announcements .zoom:after {
  content: "(Zoom)"
}
***** */

/* the vertical tag bar contains the tag line and a copyright at the bottom */
.home-container {
  xxx-margin-left: 5%;
  xxx-margin-right: 5%;
}

.tag {
  text-shadow: 2px 2px darkblue;
}

.copyright {
  width: 100%;
  text-align:center;
  font-size: 66%;
  color: darkblue;
}

/* each work catagory gets a button that shows its first page */
.catBanner {
  xxx-background-color: beige;
}
.catBanner .subButtons {
  margin: 1em;
  text-align: center;
}
.catBanner .subButtons button {
  display: inline-block;
  vertical-align: middle;
  padding: .5em;
  background-color: #ffe8a8;
  border: 0px solid white;
  font-size: 1rem;
  border-radius: .8em;
  height: 3em;
}

/* expand the hit area of the anchor to the whole button */
.catBanner .subButtons a {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 2em;
  margin: -2.1rem -2rem -2rem -2rem;     /* center 2-line text in button; adjust up a smudge */
}

.catBanner .subInputs {
    text-align: center;
    margin-bottom: 1em;
}

/* hilite a small item */
li.hilite {
  list-style: none;
}
li.hilite::before {
  content: "▶"; /* bullet */
  padding-right: 8px;
  color: cadetblue;
}

/* EXHIBITS */
.padthis  { padding: 1em; }
a:hover { color: red }

/* MISC */
.menu {
  position: relative;
  float: right;
  right: 1em;
  top: 10px;
  text-shadow: 6px 6px 1em darkblue;
}
.menu.close {
  color: #c90;
}

/* when overlay is hidden */
.overlay { 
  max-height: 0px;
  z-index: 5;
  position: absolute;
  background: white;
  overflow: hidden;
  transition: all .3s ease;
}

/* when overlay is visible */
.overlay.expand { 
  max-height: 40em;
  z-index: 5;
  position: absolute;
}

/* space out the divs for easier clicking */
.overlay div {
  padding: 1em;
  display: block;
  text-align: center;
}

.right {
  float: right;
  position: relative;
}
.left {
  float: left;
  position: relative;
}

dt em {
  color: chocolate;
}

.whitePaper {
  padding: 1em;
  margin:1em;
  margin-bottom: .5em;
  border: 1px dotted blue;
  vertical-align: top;
  background: white;
}

.whitePaper img, .whitePaper figure {
  position: relative;
  right: 0px;
  left: 0px;
}
figcaption {
  text-align: center;
}


.hidden {
  display: none;
}

.flex-item {
}
  
.center {
  text-align: center;
}

.home-container {
  width: 100% !important;
}

/* Responsive layout - 4-column */
.grid-container  {
  margin: 0 auto;
}
.home-container .grid {
}

.home-container .grid {
  display: grid;
  grid-gap: 1em;
  justify-content: center;
  justify-items: center;
}
.home-container .grid-item {
  border: 1px solid black;
  padding: 2px;
  text-align: center;
}

/*  @media max-width:
 320px  mobile small
 375px  mobile medium
 425px  mobile large
 768px  tablet
 1024px laptop
 1440px laptop large
 2560px 4K 
*/

/* 1-column; no images on info pages: bio, exh, sta, pro */
@media screen and (max-width: 425px)  {
  .tag.artist { font-size: 220% !important; }
  .tag, .menu { font-size: .9rem; margin: .5em; }
  .tag { text-align: center; display: inline-block; }
  .tag-break { display: none; }
  .menu { top: 10px; }


  .grid-container  { max-width: 210px; }
  .grid { grid-template-columns: repeat(1, 1fr);}
  .overlay.expand { width: 100%;
    right: 0px; left: 0px; top: 0px; padding: 0px;
    border: .1em solid lightblue;
    background-image: none;
  }
  .grid-item--width2 { width: 310px !important;
    position: relative !important;
    left: -65px !important;
  }

  div.whitePaper:nth-child(1) { display: none; }
  div.whitePaper { display: inline-block; }

  .catBanner .subButtons { display: none }
  .catBanner .subInputs { display: block }
}

/* 2-column */
@media screen and (min-width: 426px) and (max-width: 1024px)  {
  .tag.artist { font-size: 220% !important; }
  .tag, .menu { font-size: 120%; margin: .5em; }
  .tag { text-align: center; display: inline-block; }
  .tag-break { display: none; }
  .menu { top: 10px; }

  .grid-container  { max-width: 630px; }
  .grid { grid-template-columns: repeat(2, 1fr);}
  .overlay.expand { width: 100%;
    right: 0px; left: 0px; top: 0px; padding: 0px;
    border: .1em solid lightblue;
    background-image: none;
  }
  .grid-item--width2 { width: 380px !important; }

  .whitePaper { max-width: 50%; }
  .whitePaper img { max-width: 200px; }
  div.whitePaper { display: inline-block; }

  .catBanner .subButtons { display: block }
  .catBanner .subInputs { display: none }
}

/* 4-column */
@media screen and (min-width: 1025px) {
  .tag.artist { font-size: 220% !important; }
  .tag, .menu { font-size: 140%; margin: .5em; }
  .tag { text-align: center; display: inline-block; }
  .tag-break { display: none; }
  .menu { top: 10px; }

  .grid-container  { max-width: 840px; }
  .grid { grid-template-columns: repeat(4, 1fr); }
  .overlay.expand { width: 30em;
    right: 0px; top: 0px; padding: 3em;
    border: 3em solid lightblue;
    background-image: url(images/647-overlay6.png);
    background-repeat: no-repeat;
    background-size: 610px;
    background-position: bottom;
  }

  .grid-item--width2 { width: 380px !important; }
  .whitePaper { max-width: 50%; }
  .whitePaper img { max-width: 200px; }
  div.whitePaper { display: inline-block; }

  .catBanner .subButtons { display: block }
  .catBanner .subInputs { display: none }
}