html { height:100%; overflow: scroll; }
body { background-color: white; width: 900px; margin: 45px auto 45px auto; min-height: 200vh; /* ensures there's enough scroll space */ }

a     { color: black; text-decoration:none; }

/*set the slideshows to load only when they're needed */
img {loading="lazy";}

#tnick { line-height: 1.4em; height: auto; width: 250px; margin: 5px auto 0px auto; }
#tpro { line-height: 1.4em; height: auto; width: 300px; margin: -4px auto 5px auto; font-size: 15px; text-align: center; font-family: Arial; color: #000000; }

#tabo { line-height: 1.4em; height: auto; width: 710px; margin:0px auto 0px auto; font-size: 15px; text-align: center; font-family: Arial; color: #000000; }
#tabo1 { line-height: 1.4em; height: auto; width: 710px; margin: 20px auto 0px auto; font-size: 15px; text-align: center; font-family: Arial; color: #000000; }
#tabo2 { line-height: 1.4em; height: auto; width: 710px; margin: 1px auto 15px auto; font-size: 15px; text-align: center; font-family: Arial; color: #000000; }
#tabo3 { line-height: 1.4em; height: auto; width: 710px; margin: 1px auto 0px auto; font-size: 15px; text-align: center; font-family: Arial; color: #000000; }
#tabo4 { line-height: 1.4em; height: auto; width: 710px; margin: 1px auto 0px auto; font-size: 15px; text-align: center; font-family: Arial; color: #000000; }

#temail { line-height: 1.4em; height: auto; width: 710px; margin: 25px auto 30px auto; font-size: 15px; text-align: center; font-family: Arial; color: #000000; }

#tlin1 { height: auto; margin: 0px 0px 0px 0px; font-size: 14px; text-align: center; font-family: Arial; color: #A9A9A9; display: inline-block;  width: auto !important;}
#tlin2 { height: auto; margin: 0px 0px 0px 0px; font-size: 14px; text-align: center; font-family: Arial; color: #A9A9A9; display: inline-block;  width: auto !important; }
#tlin3 { height: auto; margin: 0px 0px 0px 0px; font-size: 14px; text-align: center; font-family: Arial; color: #A9A9A9; display: inline-block;  width: auto !important;}
#tlin4 { height: auto; margin: 0px 0px 0px 0px; font-size: 14px; text-align: center; font-family: Arial; color: #A9A9A9; display: inline-block;  width: auto !important;}
   #tsp { height: auto; margin: 0px 0px 0px 0px; font-size: 14px; text-align: center; font-family: Arial; color: #969696; display: inline-block;  width: auto !important;}
   #tlin5 { height: auto; margin: 0px 0px 0px 0px; font-size: 14px; text-align: center; font-family: Arial; color: #969696; display: inline-block;  width: auto !important;}
#dash { height: auto; margin: 0px 5px 0px 5px; font-size: 14px; text-align: center; font-family: Arial; color: #969696; display: inline-block;  width: auto !important;}

a.lin { color: #969696; text-decoration: none; font-weight: none; }
a.lin:hover { color: black; text-decoration: none; font-weight: none; }


#tbox1reel { text-align:center; margin: 40px 0px 0px 0px; background-color:#c7f0ef; padding-top: 10px; border-radius: 10px 10px 0px 0px;}
#tbox2info { text-align:center; margin: 0px 0px 0px 0px; padding-bottom:1px; background-color:#c7f0ef; }
#tbox3links { text-align:center; margin: 0px 0px 40px 0px; background-color:#e6f8f8; border-radius: 0px 0px 10px 10px; padding-top: 6px; padding-bottom: 9px;}
#stickbox { text-align:center; margin: 40px 0px 0px 0px; background-color:#c7f0ef; position: sticky; top: 90px; padding-top: 6px; padding-bottom: 6px; }
#cbox { text-align:center; margin: 0px 0px 40px 0px; background-color:#c7f0ef; padding-top: 3px; padding-bottom: 1px;  border-radius: 0px 0px 10px 10px;}
#sbox { text-align:center; margin: 40px 0px 40px 0px; background-color:#c7f0ef; padding-top: 6px; padding-bottom: 1px;  border-radius: 10px 10px 10px 10px;}

#vid { margin: 0px auto 5px auto; text-align: center;}
#pic { margin: 0px auto 5px auto; text-align: center; height:495px; width:880px; }

#cli { line-height: 1.4em; height: auto; width: 400px; margin: 0px auto -2px auto; font-size: 14px; font-weight: bold; text-align: center; font-family: Arial; color: #000000; }
   #clisingle { line-height: 1.4em; height: auto; width: 400px; margin: -2px auto -2px auto; font-size: 14px; font-weight: bold; text-align: center; font-family: Arial; color: #000000; }
   #rolsingle { line-height: 1.4em; height: auto; width: 600px; margin: 0px auto 7px auto; font-size: 14px; text-align: center; font-family: Arial; color: black; }
#pro { line-height: 1.4em; height: auto; width: 400px; margin: 0px auto -2px auto; font-size: 14px; text-align: center; font-family: Arial; color: #000000; }
#rol { line-height: 1.4em; height: auto; width: 600px; margin: 0px auto 0px auto; font-size: 14px; text-align: center; font-family: Arial; color: black; }
#rolambi { line-height: 1.4em; height: auto; width: 700px; margin: 0px auto -2px auto; font-size: 14px; text-align: center; font-family: Arial; color: black; }
   #truelink { line-height: 1.4em; height: auto; width: 120px; margin: 0px 0px 0px auto; font-size: 14px; text-align: center; font-family: Arial; color: #000000; display: inline-block;}
   #alienslink { line-height: 1.4em; height: auto; width: 150px; margin: 0px 0px 0px auto; font-size: 14px; text-align: center; font-family: Arial; color: #000000; display: inline-block;}
   #skrilllink { line-height: 1.4em; height: auto; width: 120px; margin: 0px auto 0px auto; font-size: 14px; text-align: center; font-family: Arial; color: #000000; display: inline-block;}
#rolpress { line-height: 1.4em; height: auto; width: 700px; margin: 0px auto -2px auto; font-size: 14px; text-align: center; font-family: Arial; color: black; }
   #presslink { line-height: 1.4em; height: auto; width: 170px; margin: 0px auto 0px auto; font-size: 14px; text-align: center; font-family: Arial; color: #000000; }
#rolhidden1 { line-height: 1.4em; height: auto; width: 650px; margin: 0px auto -2px auto; font-size: 14px; text-align: center; font-family: Arial; color: black; }
#rolhidden2 { line-height: 1.4em; height: auto; width: 650px; margin: 0px auto -2px auto; font-size: 14px; text-align: center; font-family: Arial; color: black; }
   #hiddenlink { line-height: 1.4em; height: auto; width: 250px; margin: 0px auto 0px auto; font-size: 14px; text-align: center; font-family: Arial; color: #000000; }

#bulb { margin: 0px auto 10px auto; display: block; text-align: center; height:70px; width:70px; }


.sectiontitle1 {margin: 0px 0px 0px 0px; z-index: 10; display:block; width:100%;}
.sectiontitle2 {margin: 0px 0px 0px 0px; z-index: 9; display:block;}
.sectiontitle3 {margin: 0px 0px 0px 0px; z-index: 9; display:block;}
.sectiontitle3 {margin: 0px 0px 0px 0px; z-index: 9; display:block;}

.topb {margin: 0px 0px 0px 0px;  opacity: .5; }
.topb:hover {margin: 0px 0px 0px 0px;  opacity: 1; }

img.topb {margin: 0px 0px 0px 0px; width:45px; height: 45px; }
#topb2 {margin: 4px 0px -2px 0px;}
#topb3 {margin: 4px 0px -2px 0px;}

/* Buttons to scroll to the top */
#myBtn{ 
   position: absolute;
   top:0px;
   right:10px;
  display: none; /* hidden until you start scrolling */
  z-index: 10;
  border: 0px;
  outline: none;
  background-color: transparent;
  color: #666666;
  cursor: pointer;
  padding: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-radius: 0px;}


/* Sticky Headers */

#Sticky {
	position: sticky;
  top: 0px;
  width: 900px;
  background-color: #c7f0ef;
  z-index: 10; /* higher than regular content */
  margin: 0;
  padding: 0; 
}

#Sticky1 {
	position: sticky;
  top: 49px; /* all stick at the same scroll offset */
  background-color: #c7f0ef;
  border-bottom: 1px solid #000;
  z-index: 9; /* higher than regular content */
  margin: 0;
  padding: 0; 
}

#Sticky2 {
	position: sticky;
  top: 49px; /* all stick at the same scroll offset */
  background-color: #c7f0ef;
  border-bottom: 1px solid #000;
  z-index: 9; /* higher than regular content */
  margin: 0;
  padding: 0; 
}

#Sticky3 {
	position: sticky;
  top: 49px; /* all stick at the same scroll offset */
  background-color: #c7f0ef;
  border-bottom: 1px solid #000;
  z-index: 9; /* higher than regular content */
  margin: 0;
  padding: 0; 
}

/* Classes to hide and show the top button as needed*/
.hide {
    opacity:0;
    left:-100%;
	background-color: transparent;
}
.show {
    opacity:1;
    left:0;
	background-color: transparent;
}

/*Set up the section headers as a grid.*/

.grid-container {
	display: grid;
  grid-template-columns: auto auto;
  padding:0px;
  max-width: 900px;
}

/* Container for the xyz projects graphic, gives display precedence to grid-item2's content */
.grid-item {
	background-color: #c7f0ef;
	padding: 0px !important;
	z-index: 9;
	overflow: hidden;
}

/*Container for the top button */
.grid-item2 {
	padding: 0px !important;
	min-width: 50px;
	width: 50px;
	overflow: visible;
	z-index: 99;
	background-color: #c7f0ef;
}

.grid-item3 {
	padding: 0px !important;
	min-width: 50px;
	width: 50px;
	overflow: hidden;
	background-color: #c7f0ef;
}



.section {
  position: relative;
  margin: 0;
  padding: 0;
}


 summary {
    cursor: pointer;
	font-family:Arial;
	font-size:15px;
	width: 50px;
    text-decoration: underline;
    color: black;
	list-style: none;
	line-height: 1.4em; 
	margin: 12px auto 12px auto;
 
  }

  summary:hover {
   color: #908F8F; 
  }

  details {
    margin: -5px auto 20px auto;
	font-family: Arial;
	font-size: 15px;
	width: 525px; 
	color: #7f7f7f;
	height: auto; 
	line-height: 1.4em; 
	text-align: center; 
  }
  
  summary:-webkit-details-marker {
    display: none; /* hides the triangle in Chrome, Safari, Edge */
  }

  summary:marker {
    display: none; /* hides it in Firefox and newer browsers */
  }