/* from https://css-tricks.com/exploring-what-the-details-and-summary-elements-can-do/ */
    @import url("https://fonts.googleapis.com/css?family=Spline Sans");

    @keyframes animateDown {
  0% {
    opacity: 0;
    transform: translatey(-15px);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

    @keyframes animateDownLowAlpha {
  0% {
    opacity: 0;
    transform: translatey(-15px);
  }
  100% {
    opacity: 0.5;
    transform: translatey(0);
  }
}

    @keyframes focusAlpha {
    0% {
      opacity:0.5;
      }
    100% {
      opacity:1;
      }
    }

    @keyframes lightUp {
      0%
      { 
    background-color: #222222; }
      100%
      { 
    background-color: inherit; }}
    
    @keyframes lightDown {
    0%
    { background-color: inherit;  }
    100%
    { background-color: #222222; }
    }
    
    @keyframes slideLeft {
      0% {
      transform: translatex(-2em);  
      }
      
      100% {
      transform: translatex(0px);
      }
      
      }

/* COLORS :
  #ECCC89  yellow
  #B4EA8A  green
  #464341  bg
  #353230  shelf 
  #222222  footer

*/

body {
  overflow-x: hidden;
}

#prev, #next { position:fixed; top:35px;
    padding:1.2em; background-color:black; z-index:99999; opacity:0; text-align:center;
writing-mode: vertical-lr;
text-orientation: mixed;
}
#prev:hover, #next:hover { opacity:0.5; animation:sidePane 0.2s;  }
@keyframes sidePane {
  0%   {opacity:0; }
  
  100% {opacity:0.5; }
  }

#prev { left:0; }

#next { right:0; }

/* */

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.overlayFrame {
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  
 background-color:#111111;
 background-repeat:no-repeat;
 
 border-style:solid;
 border-width:1px;
 border-color:#FFFFFF;
 border-radius: 10px;
 
 width: auto;
 min-height: 50px;
 
 font-size:13pt;
 vertical-align:center;
 padding:0.75em;
}


details[open] div {
  animation: animateDown 0.2s linear forwards;}

#topb {animation: animateDownLowAlpha 0.2s linear forwards;}
#topb { display:none; opacity:0.5;
position:fixed; bottom:5em; right:2em; width:8em; z-index:9999;
} #topb:hover { animation: focusAlpha 0.4s; opacity:1; }

body {
  padding: 0; margin: 0;
  margin-top: 30px;
  background-color: #464341;
  color: white;
  font-family:"Spline Sans"; }
  
#na { background-color: black;
    text-align: center; }

h1, h2, h3 { margin: 0px 50px 0px 50px; font-family:"Spline Sans";}

h1 { font-size:300%;}

.subheading { text-align:left; font-size:110%; padding-left:5em; margin-top:1em;}
  
a { color:#ECCC89 ; text-decoration: none; font-weight: bold;}  a:hover { color:#B4EA8A }

hr { color:white; margin-left: 25px; margin-right: 25px; margin-top:25px;}

.header { padding-bottom:1.5em; padding-top:0.5em; position: sticky; top: 0; background-color: rgba(70,67,65,0.5); z-index:9999;}

.header a, h3 a, #tools li a, inputclam { padding:0.2em; background-color:#111111; border-radius:0.7em;
            padding-left:0.5em; padding-right:0.5em; }

#tools li {
  margin: 1em 0 0.5em 0;
}

.banner {
    border-bottom: 1px solid #464341;
    height: 170px;  width:100%;
    max-height: 20%;
    text-align:center;
    display:flex; justify-content:center; align-items:center;
    background-size:100%; background-position-y:50%; 
    background-color:#222222;
    background-blend-mode: overlay; /* animation: lightDown 0.6s linear forwards;  */
} /* .banner:hover { animation: lightUp 0.8s linear forwards; background-color:rgb(30,30,30);}
*/
.banner span {
  z-index:99;
  }

  
#shelf {
  
  background-color: #353230;
  display:flex;
  padding-left:5%; padding-right:5%;
  align-items:center;
/*  min-height: 18em; */
  }
  
#grid {
  
  background-color: #353230;
  width:auto;
  display:block;
  padding-left:5%; padding-right:5%;
  }
  
.for { flex-wrap:wrap; }
  
.rev { flex-direction:row-reverse; flex-wrap:wrap-reverse; }

.cnt { flex-wrap:wrap;
       justify-content: space-evenly;
  }
  
#shelf div, #shelf section {
  text-align:center;
  padding:10px;
  background-color:#222222;
  display:block; /* flex-wrap:wrap; */
  border-radius: 10px;
  border-style:solid; border-width:1px; border-color:#353230;

  
  } #shelf div:hover {border-color:#ECCC89;}
    #button:hover    {border-color:#B4EA8A;}


#shelf div {
  width:9em; 
  margin:15px;
}

#shelf > a > .art {
 max-width:50vw;
 max-height:14vw;
 min-width:15em;
 min-height:10em;
 object-position:50% 0;
}

div#shelf > section {
  width: 80%;
  margin: auto;
  margin-top: 15px; margin-bottom:15px;
}
  
div#shelf>div img {max-width:8em; margin-bottom:10px; max-height:280px;}

div#shelf> img, div#shelf>a img { max-height:20em; max-width:22em;
object-fit: cover; object-position: center top;
border-radius:0.2em; margin:0.5em;
box-shadow: 4px 4px #222222;

}


/* */ 

summary {position:relative; bottom:0;}
summary:hover { color:#B4EA8A;}

#shelf td { text-align: right;
 border-bottom:1px dotted; font-size:80%;
}

#shelf th {text-align: left;  border-bottom:1px dotted; font-weight:normal;}

#shelf tr:hover {color:#ECCC89; }

/* */

#nav {
  overflow: hidden;
	position:absolute; top:0;
	margin: 0; padding: 0;		
	z-index: 99999;
	
	height: 35px; width:100%;
	display:flex; justify-content:space-around;
	
	background-color:#000000; }

#nav ul {
	float: left;	list-style: none;
	width: 100%; height: 35px;
	
	text-transform: uppercase;
	margin: 0;	padding: 0;	
	display:flex; justify-content:space-around; }

#nav ul li { margin: 0; padding: 0; }
#nav ul li a {
	float: left;
	margin: 0;	padding: 0 10px;

	font: bold 15px/35px "Spline Sans", Helvetica, Arial, Geneva, sans-serif;
	text-transform: uppercase;
	text-decoration: none;	
	text-align:center;
	letter-spacing: -0.3px;

	color: #464341; }

#nav ul li a:hover, #nav ul li a:active {
	color: #ECCC89;
	background: none;
	border: none; }
	
#nav ul #current a { color: white; }
#nav img { padding-top: 3px; padding-bottom: 3px;}

#newsList {
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-direction: column;
    
    width:80%; margin:auto;
}

#newsList ul {
 list-style: none;
 
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-direction: column;
    
  width:100%;
  padding:0; margin:0;
}

#newsList ul li {
 background-color:#353230;
  width:98%;
  margin:0.5em; padding:0.25em;

 border-style:solid;
 border-width:1px;
 border-color:#464341;
 border-radius: 10px;
 
 max-width:70vw;
    
}

.plainFrame {
 background-color:#111111;
 background-repeat:no-repeat;
 
 border-style:solid;
 border-width:1px;
 border-color:#FFFFFF;
 border-radius: 10px;
 
 margin:auto;
 margin-top:75px;
 margin-bottom:45px;
 
 width: auto;
 max-width:75%;
 min-height: 50px;
 
 font-size:13pt;
 
 text-align:center;
 display:flex;
 justify-content:space-around;
 align-items:center;
}

.plainerFrame {
 background-color:#111111;
 background-repeat:no-repeat;
 
 border-style:solid;
 border-width:1px;
 border-color:#FFFFFF;
 border-radius: 10px;
 
 width: auto;
 min-height: 50px;
 
 font-size:13pt;
 padding:0.75em;
}

@media screen and (max-width:1000px) {
  
.frame h1, .plainFrame h1, .plainerFrame h1 {
 font-size:8vw; 
}
  
.comms div, .comms table {
 margin-bottom:2em 
} 

}


.comms {
 overflow:hidden; 
}

.comms td {
  border: 1px solid white;
  align-items: center;
  position: relative;
  width:10em;
  height:10em;
  min-width:6em;
  min-height:6em;
}

.comms th {
 font-size:13pt 
}

.comms td img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  object-position: 0% 20%;
}

.comms td p {
 font-size: 22pt;
 font-weight: bold;
 position: absolute;
  top: 65%;
  left: 70%;
  transform: translate(-50%, -50%);
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.comms li {
 padding: 5px; 
}

.comms o {
 color:#ECCC89
}

section h3 {
margin-bottom:0.5em;
}

section {
  text-align: left;
  }

footer { padding:0.5em; padding-left:5em; padding-right:5em; padding-bottom:2em;
  background-color:#222222;
  text-align:center;  font-family:"Spline Sans";
  display:flex; justify-content:flex-end; gap: 3em;
  flex-wrap:wrap;
  }

.frame {
 background-image: url("../img/smallwide.jpg");
 background-size:150%; 
 background-position:50%; 
 background-color:#111111;
 background-repeat:no-repeat;
 background-blend-mode: overlay;

 border-style:solid;
 border-width:1px;
 border-color:#FFFFFF;
 border-radius: 10px;
 
 margin:auto;
 margin-top:75px;
 margin-bottom:45px;
 
 width: auto;
 max-width:750px;
 min-height: 50px;
 
 
 padding:1%;
 
 font-size:13pt;
 
 text-align:center;
 display:flex;
 justify-content:space-around;
 align-items:center;
}

/* */