body.margin    { max-width: 900px; margin: auto }       /* pages look nicer with bigger margins */
 table.xhs      { border-spacing: 15px 0px; }            /* horizontal and vertical spacing */
 table.float    { float: right; }
 table.wordmark { float: right; border-spacing: 0px 6px;}
 table.cal  td  { border-spacing:2px; border:1px solid black; padding:8px; }  /* all td in class inherit */
 td.center      { text-align: center; }

 tr.blue      { background-color: #006699; color: white} /* table header */
 tr.even      { background-color: white; }
 tr.odd       { background-color: #eff7ff; }             /* light blue for alternating rows with white */

 td.author    { vertical-align: baseline; font-size: larger; }
 td.book      { vertical-align: baseline; }
 .left        { text-align: left; }
 .right       { text-align: right; }
 .float       { margin:0.5em 0em 0.5em 0.8em; float:right; }
 .new         { color: #00008B; font-weight: bold; font-style: italic }
 .meta        { color: #8B002B; font-style: italic }
 .usertt      { color: blue; font-family: monospace; font-weight: bold; font-style: italic}
 .emphtt      { color: red; font-family: monospace; font-weight: bold; font-style: italic}
 .italtt      {             font-family: monospace; font-style: italic}
 .hilite      { background-color: yellow}

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    color: initial;
}

 .prebox      { 
                font-family: monospace;
                white-space: pre;
                background-color: #e4f0ef;
                border-top:  1px #d0d0d0 solid;
                border-left: 1px #d0d0d0 solid;
                padding: .5em 0;
                overflow: auto;
              }

/*
       black    #000000
       navy     #000080
       darkblue #00008B
       lime     #00FF00
       gray     #808080
       white    #FFFFFF
*/

.collapsible {
  background-color: #EEE; /* lighter gray */
  border: none;
  text-align: left;
  outline: none;
}
/*  padding: 18px;
  color: white;
  cursor: pointer;
  width: 100%;
  font-size: 15px;
*/

/*
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
*/

.collapsed::after {
  content: '\002B';    /*  Unicode + Sign */
  content: "\2795";    /*  Unicode Heavy Plus Sign */
  /*color: white; */
  font-weight: bold;
  float: right;
  margin-left: 15px;
}

.expanded::after {
  content: "\2212";  /*  Unicode Minus Sign */
  content: "\2796";  /*  Unicode Heavy Minus Sign */
  font-weight: bold;
  float: right;
  margin-left: 15px;
}

.collapsible:hover {
  background-color: #AAA;  /* darker gray */
}

/*
   Tooltips
*/
 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/*
  All pdf links get a picture after the link.
*/
a[href $='.pdf'] { 
   padding-right: 18px;
   background: transparent url(/~ryan/graphics/href_icons/icon_pdf.gif) no-repeat center right;
}

a[href *='.pdf#page'] { 
   padding-right: 18px;
   background: transparent url(/~ryan/graphics/href_icons/icon_pdf.gif) no-repeat center right;
}

a[href ^='https://fit.hosted.panopto.com'] { 
   padding-right: 18px;
   background: transparent url(/~ryan/graphics/href_icons/panopto.png) no-repeat center right;
}

/* W-16.png */
a[href ^='https://en.wikipedia.org'] { 
   padding-right: 18px;
   background: transparent url(/~ryan/graphics/href_icons/W-16.png) no-repeat center right;
}

/* stack16.png */
a[href ^='https://stackoverflow.com'] { 
   padding-right: 18px;
   background: transparent url(/~ryan/graphics/href_icons/stack16.png) no-repeat center right;
}

a[href $='.txt'] { 
   padding-right: 18px;
   background: transparent url(/~ryan/graphics/href_icons/icon_txt.gif) no-repeat center right;
}

a[href $='.mp4'] { 
   padding-right: 18px;
   background: transparent url(/~ryan/graphics/href_icons/icon_mp4.png) no-repeat center right;
}

a[href $='.java'] { 
   padding-right: 18px;
   background: transparent url(/~ryan/graphics/href_icons/icon_txt.gif) no-repeat center right;
}

a[href *='www.youtube.com/'] { 
   padding-right: 45px;
   background: transparent url(/~ryan/images/logos/YouTube3.png) no-repeat center right;
   background-size: contain;
}