:root {
	/*--tabselectedbg: #fff;
	--tabselectedfg: black;
	--tabhoveredbg: #ddd;
	--tabhoveredfg: black;
	--headerfg: white;
	--headerbg: #984843;	
	--tabunselectedbg: #EAC67A;
	--tabunselectedfg: black;	*//*#233237 #18121E*/
	--tabselectedbg: #fff;
	--tabselectedfg: black;
	--tabhoveredbg: #ddd;
	--tabhoveredfg: black;
	--headerfg: #cfa97f;
	--headerbg: #511616;	
	--tabunselectedbg: #264653;
	--tabunselectedfg: #cfa97f;	/*#233237 #18121E*/
	--shadows: black;
}
/*
2c5575  blue writing
511616 red background
cfa97f tan shadows*/
@font-face {
  font-family: gord;
  src: url(/bin/GordsScrawl.ttf);
}

/* Style the navigation menu */
* { 
	font-family: San-serif;
	font-size: 1em;
}


h1.gss {
	font-size: 160%;
	font-weight: bold;
}

h2.gss {
	font-size: 140%;
	font-weight: bold;
}

h3.gss {
	font-size: 120%;
	font-weight: bold;
}

div.gallery {
	background-image: url("/img/tin.jpg")
}

div.gallery p {
	vertical-align: top;
	display: inline;
}
div.gallery div {
	-webkit-transition: -webkit-transform .15s linear;
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);	
	margin-bottom: 25px;
	width: 300px;
	text-align:		 center;
	font-size: 100%;
	font-weight: bold;
	padding: 0px 10px 10px 10px;
	margin: 20px 20px 30px 20px;
	font-family: comic sans ms, sans-serif;
	background: white;
	background-image: none;
	display: inline-block;
/*	float: left; */
}

div.gallery div:nth-child(even) {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  /*float: right;*/
}
div.gallery div:nth-child(3n) {
  -webkit-transform: none;
  -moz-transform: none;
  position: relative;
  top: -5px;
}

div.gallery div:nth-child(5n) {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  position: relative;
  right: 5px;
}
 
/* Keep default rotate for every eighth, but offset it */
div.gallery div:nth-child(8n) {
  position: relative;
  top: 8px;
  right: 5px;
}

div.gallery div:nth-child(11n) {
  position: relative;
  top: 3px;
  left: -5px;
}

div.gallery div img {
	width: 100%;
}

div.gallery div:before {
	content: url(img/pin.png);
}


div.gallery div:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  position: relative;
  z-index: 5;
  margin-left: 20px;

}

div.tv video {
	padding: 0px 10px 10px 10px;
	margin: 20px 20px 30px 20px;
	border: 100px;
	border-color: black;
	background: black;
	display: inline-block;
}

li.topnav {
  overflow: hidden;
  background-color: var(--headerbg); /*#984843;*/
  position: relative;
  font-family: sans-serif; font-size: 120%;
}

/* Hide the links inside the navigation menu (except for logo/home) 
.topnav #myLinks {
  display: none;
}*/

/* Style navigation menu links */
.topnav a {
  color: var(--tabunselectedfg);
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  font-size: 17px;
  /*background-color: #EAC67A; color: black;*/
  background-color: var(--tabunselectedbg);
  display: inline; 
}

.topnav a.selected {
   padding: 5px 5px 5px 5px;
  text-decoration: none;
  font-size: 17px;
  display: inline; 
  font-weight: bold;
  color: var(--tabselectedfg);
  background-color: var(--tabselectedbg);
  /*background-color: #fff;
  color: black;*/
}
img #op {
  width: 10%;
  height: auto;
}


/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  background-color: var(--tabhoveredbg);
  color: var(--tabhoveredfg);
}

.topnav a.selected:hover {
  background-color: var(--tabhoveredbg);
  color: var(--tabhoveredfg);
}


/* Style the active link (or home/logo) */
a.home {
  background-color: var(--headerbg); 
  color: var(--headerfg); 
  /*font-family: cursive;*/ 
  /*font: 400 130px/0.8 'Great Vibes', Helvetica, sans-serif;*/
  font-family: 'Great Vibes', Helvetica, sans-serif;
  font-size: 200%;
  text-shadow: 3px 2px var(--shadows);
  display: block;
  /* float: left;*/
  padding: -2em 0 0 0;
  text-decoration: none;
  /*font-size: 30px;*/
  
}
a.home span { 
	font-family: times; 
	font-size: 50%; 
	margin-left: 3em;
	position: relative;
	top: -1.2em;
	color: var(--headerfg);
}

p {
    font-family: helvetica, sans-serif;
	font-size: 1em;
    /*float: left;*/
    margin-top: 1em;
}

/* p:first-letter {
    font-size: 200%;
    float: left;
	padding: 0px 0px 0px 0px;
    margin-top: 0 0 0 0;
	color: #233237;
	position: relative;
	top: -100em; */
	/*|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;*/
/* }*/

div.body {
  color: var(--tabselectedfg);
  background-color: var(--tabselectedbg);
}
a.hamburg { display: none; }

td.past {
	background-color: gray;
}

@media screen and (max-width: 1024px) {

	* { 
		font-family: San-serif;
		font-size: 32pt;
	}
	/*.topnav #myLinks {
		display: none;
	}*/
	a.home {
		font: 400 130px/0.8 'Great Vibes', Helvetica, sans-serif;
		display: block;
		/* float: left;*/
		font-size: 120px;
	}
	
	a.hamburg { display: inline; float: right; }
	
	.topnav a.unselected #myLinks {
		color: var(--tabunselectedfg);
		/*padding: 5px 0px 5px 0px;
		text-decoration: none;
		font-size: 200%;*/
		background-color: var(--tabunselectedbg);
		text-align: left;
		float: none;
		display: none; 
	}
	a.home span { 
		font-family: times; 
		font-size: 50%; 
		margin-left: 3em;
		position: relative;
		top: -.5em;
		color: var(--headerfg);
	}
}