/*
** sha.css
**
** Copyright (C) 2019  Mike Voisin.  All rights reserved.
*/

.box
{
   border:thin solid #b40019;
   padding:1ex;
   margin:1em 1em;
}

.photo
{
   border-top: thin solid Silver;
   border-left: thin solid Silver;
   border-bottom:thin solid black;
   border-right:thin solid black;
}

.page
{
   margin: 1em 1em;
   border-top: thin solid Silver;
   border-left: thin solid Silver;
   border-bottom: thin solid gray;
   border-right: thin solid gray;
   background: #FFEDED;
   padding: 1em;
}

.letter
{
   border-top: thin solid gray;
   border-left: thin solid gray;
   border-bottom: thin solid black;
   border-right: thin solid black;
   margin: 1ex 5%;
   padding: 2ex 5ex;
   background-color: #FFEDED;
}

#left p
{
   font-weight:bold;
   text-align:center;
   color:#B40019;
}
#left a
{
   font-size:8pt;
   text-decoration:none;
   color:#B40019;
}

.logoleft
{
   margin-top:80px;
   height:221px;
   background: url(images/veritas.gif) no-repeat center;
}

.logohead
{
   text-align:center;
   margin-top:10px;
   margin-left:20px;
   width:480px;
   height:53px;
   background: url(images/sha.gif) no-repeat center;
   max-width: 100%;
}

.logotop
{
   margin-left: 1em;
   margin-bottom: 1em;
}

.minor
{
   font-size: 10pt;
}
.hilite
{
   color:#b40019;
   font-weight:bold;
}

.section
{
   font-weight:bold;
   color:white;
   background:#b40019;
   border-top:1px solid lightgray;
   border-left:1px solid lightgray;
   border-bottom:1px solid black;
   border-right:1px solid black;
   padding:1ex 1ex;
   margin:0px 2ex 0px 0px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.description
{
   font-size:11pt;
   color:#b40019;
   margin-left:1em;
   margin-right:1em;
}

.node
{
   display: inline-block;
   text-align:center;
   margin:0px;
   padding:0px 2ex 2ex;
   position: relative;
   vertical-align: top;
   font-size:10pt;
   background-color: transparent;
   zoom: 1; /*IE Hack*/
   *display: inline; /*IE Hack*/
}

.collection
{
   margin:1em 2em 1em 1em;
   text-align:center;
}
.collection a
{
   font-weight: bold;
   font-size:12pt;
   color:#b40019;
   text-decoration:none;
}
.collection a:visited
{
   color:gray;
}
.collection a.novisit:visited
{
   color:#b40019;
}
.collection .node p
{
   padding:0px;
   font-weight: bold;
   font-size:12pt;
   color:#b40019;
}
.collection fieldset
{
   border:thin solid #b40019;
}

.collection.itm
{
   font-size:10pt;
   width:888px;
   margin:1em auto;
   height:400px;
   overflow-y:scroll;
   resize: both;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   border-top:1px solid lightgray;
   border-left:1px solid lightgray;
   border-bottom:1px solid black;
   border-right:1px solid black;
}
.collection.itm a
{
   text-decoration: none;
   color:#b40019;
   font-weight:bold;
}
.collection.itm a:visited
{
   color:gray;
}
.collection.itm table
{
   border-collapse: collapse;
   width:100%;
}
.collection.itm table tr
{
   border-top:thin solid #b40019;
   border-bottom:thin solid #b40019;
}
.collection.itm table td
{
   padding:0.5ex;
   vertical-align: top;
   text-align: left;
}
.collection.itm table td.thm
{
   width:125px;
}
.collection.itm .title
{
   color:#b40019;
   font-size:12pt;
   font-weight:bold;
}
.collection.itm .head
{
   font-size:10pt;
   color:#b40019;
   font-weight: bold;
}
.collection.itm .cap
{
   font-size:10pt;
}
.collection.itm .cap a
{
   color:blue;
   font-size:10pt;
   font-weight: normal;
   text-decoration: underline;
}
.collection.itm .date
{
   font-size:10pt;
   color:darkgray;
}
.collection.itm .cred
{
   position:absolute;
   bottom:3px;
   left:8px;
   font-size:8pt;
   color:darkgray;
}
.collection.itm .desc
{
   position:relative;
}
.collection.itm .tag
{
   position:absolute;
   bottom:3px;
   right:3px;
   text-align:center;
   color:darkgray;
   font-size:10pt;
}

.collection.music
{
   font-size:10pt;
   width:888px;
   margin:1em auto;
   /*height:400px;*/
   overflow-y:scroll;
   resize: both;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   border-top:1px solid lightgray;
   border-left:1px solid lightgray;
   border-bottom:1px solid black;
   border-right:1px solid black;
}
.collection.music table
{
   border-collapse: collapse;
   width:100%;
}
.collection.music table tr
{
   border-top:thin solid #b40019;
   border-bottom:thin solid #b40019;
}
.collection.music table td.playsel
{
   vertical-align:bottom;
   padding-left:3px;
   padding-bottom:3px;
}
.collection.music table td.playaud
{
   padding:2ex 2ex 8px 2ex;
   width:30%;
   vertical-align:bottom;
}
.collection.music table td.sel
{
   padding-top:3ex;
   vertical-align: top;
}
.collection.music table td.aud
{
   padding:2ex;
   width:30%;
   vertical-align: top;
}
.collection.music table td.desc
{
   padding:0.5ex;
   vertical-align: top;
   text-align: left;
   position:relative;
}
.collection.music table td.desc .tag
{
   position:absolute;
   bottom:3px;
   right:3px;
   text-align:center;
   color:darkgray;
   font-size:10pt;
}
.collection.music .title
{
   color:#b40019;
   font-weight:bold;
}
.collection.music .artist
{
   color:darkgray;
   font-size:10pt;
}
.collection.music .date
{
   font-size:10pt;
   color:darkgray;
}
.collection.music .stat_sel
{
   font-size: 10pt;
   margin-top:0px;
   margin-bottom:0px;
   color:darkgray;
}
.collection.music .stat_ply
{
   font-size: 10pt;
   margin-top:0px;
   margin-bottom:0px;
   color:#b40019;
   font-weight:bold;
}
.collection.music .hint
{
   margin-left:-15px;
   margin-bottom:0px;
   text-align:left;
}
.collection.music .hintarrow
{
   margin-left:3px;
   vertical-align:middle;
}
.collection.music .ctrl
{
   
}
.collection.music .playart
{
   vertical-align:middle;
}

.controls
{
   position:relative;
   width:64px;
   margin-top:30px;
   height:685px;
}
.controls.small
{
   height:535px;
}
.controls .tag
{
   color:darkgray;
   width:64px;
   text-align:center;
   position:absolute;
   bottom:0px;
}

.collection.img
{
   margin:auto;
   font-size:10pt;
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   border-top:1px solid lightgray;
   border-left:1px solid lightgray;
   border-bottom:1px solid black;
   border-right:1px solid black;
}
.collection.img .title
{
   font-weight:bold;
}
.collection.img .head
{
   color:#b40019;
   font-weight: bold;
   margin-top:0px;
   margin-bottom:0px;
}
.collection.img .cap
{
   margin-top:0px;
   margin-bottom:0px;
}
.collection.img .cap a
{
   color:blue;
   font-size:10pt;
   font-weight: normal;
   text-decoration: underline;
}
.collection.img .date
{
   margin-top:0px;
   margin-bottom:0px;
   color:darkgray;
}
.collection.img .cred
{
   margin-top:0px;
   margin-bottom:0px;
   position:absolute;
   bottom:3px;
   left:3px;
   color:darkgray;
   font-size:8pt;
}


.classmates
{
   margin:0px 1ex;
   text-align: center;
}
.classmates .node
{
   text-align:left;
}

.classinfo
{
   margin:0px 1ex;
   text-align:center;
}

.memorial
{
   margin:0px 5ex;
   text-align:center;
}

.teachers
{
   margin:0px 5ex;
   text-align:center;
}

.memories
{
   margin:0px 5ex;
   text-align:left;
}
.memories p
{
   font-size: 10pt;
   margin-top:-15px;
   margin-left:3em;
}
.memories ol
{
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.memories li
{
   counter-increment: step-counter;
   margin-bottom: 5px;
}
.memories li > p
{
}
.memories li::before
{
   content: counter(step-counter);
   margin-right: 20px;
   font-size: 80%;
   background-color:#b40019;
   color: white;
   font-weight: bold;
   padding: 3px 8px;
   border-radius: 11px;
}

.colors
{
   margin:1ex 5ex;
   text-align:center;
}
.colors p
{
   margin-bottom:0px;
   font-weight: bold;
   font-size:12pt;
   color:#b40019;
}
.colors .node
{
   padding:0px;
}
.colors .node p
{
   margin-bottom:0px;
   font-weight: bold;
   font-size:10pt;
   color:#b40019;
}
.color1
{
   background-color:#87CEEB;
   width:100px;
   height:100px;
}
.color2
{
   background-color:#FFFAF0;
   width:100px;
   height:100px;
}

.motto
{
   margin:1ex 5ex;
   text-align:center;
}
.motto p
{
   margin-bottom:0px;
   font-weight: bold;
   font-size:12pt;
   color:#b40019;
}
.motto .node
{
   padding:0px;
}
.motto .node p
{
   margin-bottom:0px;
   font-weight: bold;
   font-size:10pt;
}

.subject
{
   font-size:8pt;
   color:darkgray;
}

.thumb
{
   text-align:center;
   margin:0px;
   padding:0px;
   position: relative;
   vertical-align: top;
   font-size:10pt;
   background-color: transparent;
   zoom: 1; /*IE Hack*/
   *display: inline; /*IE Hack*/
}
.thumb p
{
   margin:0px;
   padding:5px 5px;
}
.thumb .click
{
   cursor:pointer;
}
.thumb.selected
{
   background-color:#fefb78;
   border:thin solid black;
   padding:2px 2px;
}
.thumb.visited
{
   background-color:lightgray;
   border:thin solid black;
   padding:2px 2px;
}

.gallery
{
   margin:auto;
}

.clickable
{
   cursor:pointer;
   color:#b40019;
   font-size:10pt;
   text-decoration:underline;
}

.grayHide
{
   display:none;
   cursor:pointer;
}

.grayShow
{
   display:inline;
   cursor:pointer;
}

 /*
 ** Custom Checkbox
 ** https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
 */
 
.playcheck
{
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide default checkbox */
.playcheck input
{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Custom checkbox */
.checkmark
{
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-top:thin solid silver;
  border-left:thin solid silver;
  border-right:thin solid black;
  border-bottom:thin solid black;
  margin-left:3px;
}

.playcheck:hover input ~ .checkmark
{
  background-color: #ccc;
}

.playcheck input:checked ~ .checkmark
{
  background-color: #b40019;
}

/* Checkmark (hidden when not checked) */
.checkmark:after
{
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.playcheck input:checked ~ .checkmark:after
{
  display: block;
}

/* Checkmark */
.playcheck .checkmark:after
{
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* https://codepen.io/dcastanos/pen/FeJiu */
audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #b40019;
-webkit-box-shadow:  2px 2px 4px 0px #b40019;
box-shadow: 2px 2px 4px 0px #b40019;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}