html {
	overflow-x: hidden;
}

body
{
	margin: 0;
	padding: 0;
	background-color: #FFF;
	font-family: trebuchet ms, verdana, tahoma, arial;
	font-size: 75%;
	line-height: 180%;
	overflow-x: hidden;
}

* {
	box-sizing: border-box;
}

body > #menu
{
	position: fixed;
}

a:active, a:visited, a:link
{
	color: #5E8E3E;
	text-decoration: underline;
}

a:hover
{
	color: #ff6600;
	text-decoration: none;
}

#menu
{
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 100%;
	overflow: hidden;
	background-color: #555;
	border-right:1px solid #000;
	font-size: 90%;
}

#menutop
{
	width: 200px;
	border-bottom:1px solid #808080;
	background-color: #444;
}

#main
{
	width: auto;
	margin-left: 200px;
}


#main h2
{
	border-bottom: 1px solid #808080;
	font-family: arial;
	font-weight: 100;
	letter-spacing: 8px;
	font-size: 200%;
	text-align: right;
}

#main h3
{
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
#main h4
{
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: normal;
}
#main h6
{
  display: block;
  font-size: 2.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  line-height: 120%; 		/*fix for header title not having adaquate space when 2 rows*/	
}

#main p {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 5em;
  margin-right: 5em;
  font-weight: normal;
}


#main p-full { 				/* where is this used? This is likely unneeded*/		
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0em;
  margin-right: 0em;
  font-weight: normal;
}
/* this is a test for table of contents */

#toc {
            position: fixed;
            right: 0;
            top:  9.8vw;
            width: 200px;
            border: 2px solid #000;
            background: rgba(255,255,255,0.7);
            padding: 10px;
            font-size: 1.8em;
        }
#toc a {
    				text-decoration: none;
    				color: black;
}
#toc a.active {
    				color: red;
}
/* this is a test for table of contents */


.hcb-icon .nope{
  width: 32px;
  height: 32px;
}

.blimp_img {
  float: right;
  width: 50vw;
  max-width: 1000px;
  min-width: 100px;
  height: auto;
  margin: 0 0 1em 1em;    /*top, right, bottom, left*/
  display: block;
}

.stlviewer{width:100%;height:600px}td,th{padding:2px 10px;text-align:left}

/* Table responsiveness - specific to main content tables */
.main_table_outline table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

/* Override inline table attributes for responsive behavior */
.main_table_outline table[width="100%"] {
  width: 100%;
  max-width: 100%;
}

.main_table_outline table[cellpadding="30"] td {
  padding: 30px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media only screen and (max-width: 768px) {
  #main p {
    margin-left: 1em;
    margin-right: 1em;
    /*font-size: 1.2em;*/
  }

  .main_table_outline table[cellpadding="30"] td {
    padding: 10px;
  }
  
  .main_table_outline td, 
  .main_table_outline th {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Ensure images within table cells are responsive */
  .main_table_outline td img,
  .main_table_outline p img {
    max-width: 100%;
    height: auto;
    width: 100%;
  }
}

video {
	max-width: 100%; 			/*This is new for auto scaling videos*/
	min-width: 200px;
	height: auto;
	/*width: 100%;*/
}

.vid iframe {
   border: 0;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   position: absolute;
}


.frontpage img {
	max-width: 100%;
	width: 500px; 			/*forces all images to 700px width if they are not*/
	height: auto;
}
.panopage img {
	max-width: 100%;
	width: 900px; 			/*forces all images to 900px width if they are not*/
	height: auto;
}



/* ------------------------------ CSS GRID rows on main index page ------------------------------------*/
.index {
	display: grid;
	grid-template-columns: 1fr; 	/*one large table row*/
	grid-gap: 1rem;								/*space between table rows*/
	grid-template-rows: auto;			/*cascading table rows*/

}
.box {
	background-color: #383838;
  display: grid;
	border: 1px solid black;
  margin: 0;
  grid-template-columns: auto 1fr; 	/*makes two columns. The first column is auto, which forces grid cell to fit to size of photo. next column is the remaining space*/
  grid-template-rows: auto;
	grid-template-areas: 							/*sets the layout organization. Fotos on the left, text on the right*/
    'foto text'
    'foto text'
    'foto ....';
}
.foto {
  grid-area: foto;				/*assigns the class foto to the grid area name of foto.*/
  max-width: 100%;				/*makes image scale smaller on small viewport*/
  aspect-ratio: 4 / 3;		/*the div class foto will always be whatever aspect ratio set here*/
  object-fit: cover;			/*excess part of image clipped to retain aspect ratio of div*/
  width: 600px;						/*forces all images to 600px width if they are not*/

}
.text {
  grid-area: text;				/*assigns the class text to the grid area name of text.*/
  padding: 0px 16px;				/*top&bott, right&left*/
  font: normal 1.12em "Lucida Sans Unicode", verdana, sans-serif;
  color: #ddd;
  text-align: left;
}
/* ------------------------------ CSS GRID rows on main index page ------------------------------------*/

/*----------------------------------------HEADER-------------------------------------*/
header {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr;
}
header img {
	grid-column: 1 / -1; 	/*may be overkill. browser knows this implicitly*/	 
	grid-row: 1 / 2;
  	width: 100%;
  	height: 100%;
	object-fit: cover;		/*may be overridden by width and height being 100%*/
	overflow: hidden;
}
header a {
	text-decoration: none;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    width: 100%;
  	height: 100%;
}
header h1 {
	grid-column: 1 / -1;
	grid-row: 1 / 2;
	align-self: center;
	justify-self: left;
	z-index: 1;
    text-shadow: 0 0 0.5em black, 0 0 0.3em black, 0 0 0.3em black, 0 0 0.2em black, 0 0 0.2em black; 	/* offset-x | offset-y | blur-radius | color */
    font-size: 3rem; 			/*change unit*/
    font-weight: 300;			/*adjusts how bold*/
    padding: 0rem 1rem;			/*padding on top & sides*/ 
    color: rgb(255, 255, 255);  /*font color*/
}
header h6 {
	grid-column: 1 / -1;
	grid-row: 1 / 2;
	align-self: center;
	justify-self: left;
	z-index: 1;
    text-shadow: 0 0 0.5em black, 0 0 0.3em black, 0 0 0.3em black, 0 0 0.2em black, 0 0 0.2em black; 	/* offset-x | offset-y | blur-radius | color */
    font-size: 3rem; 			/*change unit*/
    font-weight: 300;			/*adjusts how bold*/
    padding: 0rem 1rem;			/*padding on top & sides*/ 
    color: rgb(255, 255, 255);  /*font color*/
}
th, td 
{
    padding-left: 20px;
    padding-right: 20px;
}




/* This is new, im copying anthonys filmstrip thing*/
.filmstrip{
	background-color: #383838;
  display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  /*previously 300px. needed to be smaller for mobile*/
	grid-gap: 1em;
	border: 7px dashed #b57d1e;
  padding: 14px;
}

.filmstrip:hover {
	border: 7px dashed #000000;
	opacity: .55;
}

.filmstrip img {
	aspect-ratio: 1 / 1;
	position: relative;				/*position: relative; */
	width: 100%;							/*width: 100%; */
	height: 100%;							/*height: 100%; */
	border: 1px solid black;	/*border: 1px solid black; */	
	display: grid; 						/*display: grid; */
	object-fit: cover;				/*object-fit: cover; */
	max-width:auto;
	min-width:auto;
}
/* This is new, im copying anthonys filmstrip thing*/
/*
.main_table_outline
		{
			margin-right:200px;
			margin-left:160px;

		}
*/

@media screen and (min-width: 1600px) {
	.imgcenter{
		width: 40%;							/*image is scaled to fit the container it is in. 100% = fills the entire table row. Adjust this as see fit*/
	}
}
@media screen and (min-width: 1600px) {
	.imgcenterfront{
		width: 30%;							/*image is scaled to fit the container it is in. 100% = fills the entire table row. Adjust this as see fit*/
	}
}



/*this is to make the top menu appear on phones */
@media only screen and (max-width: 5000px) {
   #menu
  			{
  				display: inline;
  			} 
   #main {
        margin-left: 200px;
        padding: 0;
    }

	#tab {
        display: none;
    }
  #toc {
				display: inline;
		}
		.main_table_outline
		{
			margin-right:200px;
			margin-left:20px;
			max-width: calc(100vw - 240px);
		}
}

/*this is to make the top menu appear on phones */
@media only screen and (max-width: 1300px) {
  
  #menu
  			{
  				display: inline;
  			}  
  #main {
        margin-left: 200px;
        padding: 0;
    }

	#tab {
        display: none;
    }
  #toc {
				display: none;
		}
	.main_table_outline
		{
			margin-right:20px;
			margin-left:20px;
			max-width: calc(100vw - 240px);
		}
}
/*this is to make the top menu appear on phones */
@media only screen and (max-width: 900px) {
  
  #menu
  			{
  				display: none;
  			}  
  #main {
        margin: 0;
        padding: 0;
    }

	#tab {
        display: flow;
    }
  #toc {
				display: none;
		}
		.main_table_outline
		{
			margin-right:10px;
			margin-left:10px;
			max-width: 100%;
			overflow-x: hidden;
		}

		.main_table_outline img{
			max-width: 100%;
			width: 100%;
      height: auto;
		}

    .main_table_outline img.hcb-icon {      /*this is a fix for the css icon to resume it's 32px width, otherwise it would fill the width*/
      width: 32px;
    }

		.main_table_outline video {
			min-width: 200px;				/*this is set at 400px above. media query overrides for mobile*/
			width: 100%;
		}
		.main_table_outline table {
			width: 100%;
			table-layout: fixed;
		}
		.main_table_outline table[cellpadding="30"] td {
			padding: 10px;
			word-wrap: break-word;
			overflow-wrap: break-word;
		}
}


.imgnoborder
{
  	background-color:#f1f1f1;
}
.imgborder
{
  	background-color:#f1f1f1;
  	border:	10px solid #000000;
}
.imgbordersmall
{
  	background-color:#f1f1f1;
  	border:10px solid #000000;
  	width:	250px;
}
.imgcentersidebyside{
	margin: 2px 2px;
  display: inline-block;
  width: 100%;
	max-width: 600px; 					/*image will scale down if needed, but never scales larger than original size*/
 	/*width: 100%;*/				
	justify-self: center;
}
.imgcenter{
	margin: 2px 2px;
  display: inline-block;
  width: 100%;
	max-width: 1200px; 					/*image will scale down if needed, but never scales larger than original size*/
 	/*width: 100%;*/				
	justify-self: center;
}
.imgcenterfront{
	margin: 2px 2px;
  display: inline-block;
	max-width: 60%; 					/*image will scale down if needed, but never scales larger than original size*/
 	/*width: 100%;*/				
	justify-self: center;
}
.imgsbs{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	justify-self: center;
}
.imgsbs a{
	aspect-ratio: 4 / 3;
}

/*  This is the top button thing i am testing out */

 /* Style the tab */
.tab {
  overflow: hidden;
  background-color: #e0e0e0;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: center;
  border: 2px solid #000000;
  outline: none;
  cursor: pointer;
  padding: 4px 10px;
  transition: 0.3s;
  background-color: #ffcc99;
  font-size: 1.4em;
	font-weight: bold;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-right: 0;

}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #e0e0e0;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 10px solid #000000;
  border-top: none;
}

/* Larger viewport fixes - ensure content doesn't overflow when sidebar is visible */
@media only screen and (min-width: 901px) {
  .main_table_outline {
    max-width: calc(100vw - 240px);
    overflow-x: hidden;
  }
  
  .main_table_outline table {
    max-width: 100%;
  }
  
  /* Prevent inline styles from overriding responsive behavior */
  .main_table_outline h1[style*="margin-left"] {
    margin-left: 20px;
  }
  
  .main_table_outline ol[style*="margin-left"] {
    margin-left: 40px;
  }
}

/* Additional Mobile Responsive Fixes - consolidated into existing 900px breakpoint */
@media only screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  
  .main_table_outline {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Headers responsive sizing */
  .main_table_outline h1 {
    /*font-size: 1.5em;*/
    padding: 0.5em;
    margin-left: 0;
  }
  
  .main_table_outline h6 {
    /*font-size: 1.8em;*/
    padding: 0.5em;
    margin-left: 0;
  }
  
  /* Lists responsive spacing */
  .main_table_outline ol {
    margin-left: 20px;
    padding-left: 0;
  }
}