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

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;
	padding: 20px;
}


#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 p {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: normal;
}


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

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

.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: end;
	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*/
}






/* This is new, im copying anthonys filmstrip thing*/
.filmstrip{
	background-color: #383838;
  display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	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*/



@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 menu disappear on phones */
@media only screen and (max-device-width: 790px) {
    
    #menu {
        display: none;
    }
    #main {
        margin: 0;
        padding: 0;
    }
    .imgcenter{
		width: 60%;							/*image is scaled to fit the container it is in. 100% = fills the entire table row. This works because the viewport is now smaller on a phone*/
	}
	.imgother{
		width: 60%;							/*image is scaled to fit the container it is in. 100% = fills the entire table row. This works because the viewport is now smaller on a phone. I made this class for the images that dont fall into imagecenter*/
	}
}
/*this is to make the top menu appear on phones */
@media only screen and (min-device-width: 791px) {
	#tab {
        display: none;
    }
}

.imgnoborder
{
  	background-color:#f1f1f1;
}
.imgborder
{
  	background-color:#f1f1f1;
  	border:	10px solid #000000;
}
.imgbordersmall
{
  	background-color:#f1f1f1;
  	border:10px solid #000000;
  	width:	250px;
}
.imgcenter{
	margin: 2px 2px;
  display: inline-block;
	max-width: 100%; 					/*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;
}