/* CSS Document */

 body {
 	background-color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #fff;
 }
 
/* paragraphs and headers */
 p {
  font-size: 16px;
  padding-top: 10px;
  margin: 0;
  font-family: futura;
 }

 .subhead {
 font-size: 12px;  
 }

 .zogheader {
   display: block;
   margin: 0 auto;
 text-align: center;
 height: 100px;
 width: auto;  
 }

 .prices {
   color: lawngreen;
 }

 header, h1{
 text-transform: uppercase;
 text-align: center;
 font-family: futura, sans-serif;  
 background-color: black;
 margin: 0; 
 padding-bottom: 10px;
 padding-top: 10px;
}

.header-image{
height: 300px;
width: auto;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 300px));
  grid-gap: 100px;
  padding: 10px;
  width: auto;
  justify-content: center;
}

.grid-item {
  width: 400px;
  padding: 20px;
  font-size: 30px;
  text-align: center;
  max-width: 100%;
  word-wrap: break-word;
}

footer {
text-align: center;
background-color: black;
bottom: 0px;
}

.footer-image{
height: 150px;
width: auto;  
text-align: center;
}

.table-image{
height: 200px;
width: auto;  
}

 h2, h3, h4 {
 	color: white;
   font-family: futura, sans-serif;
   text-transform: uppercase;
 }

 h5, h6 {
 	color: white;
   font-family: futura, sans-serif;
   text-transform: uppercase;
   font-size: 24px;
   padding: 0;
 }

 .center-header{
 text-align: center;  
 }

 .addto {
 height: 50px;
 width: auto;  
 }
 
/* table stuff */
 table {
 	
 }
 
 tr {
 
 }
 
 td {
 	padding: 0px 0px 0px 0px;
	text-align: center;
	vertical-align: top;
 }

 th {
 text-align: center;  
 }
 
 /* links */
a {
   color: #01310d;
   text-decoration: none;
}

a:visited {
   color: #004f19;
   text-decoration: none;
}

a:hover {
   color: #FFCC00;
   font-style: italic;
   text-decoration: none;
}

a:active {
   color: #FFFFFF;
   text-decoration: underline;
}

a:focus {
   color: #FF6600;
   text-decoration: underline;
}
 
/* images */

 
 /* lists */
 ul {
 
 }
 
 li {
 
 }
 
 ol{
 
 }
 
 .simpletable {
 	padding: 10px 10px 10px 10px;
	background-color: #000;
	color: #fff;
	font: Verdana, Arial, Helvetica, sans-serif;
	font-style: bold;
	font-size: 24px;
	vertical-align: middle;
	text-align: center;
}

.table {
	padding: 0px 0px 0px 0px;
	background-color: #797a7a;
	border: none;
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	vertical-align: middle;
	text-align: center;
	color: #0d0f28;
}

.topleft {
	padding: 0px 0px 0px 0px;
	height: 25px;
	width: 25px;
	background-image: url(http://www.herzogbucks.com/gif/tableside.gif);
	background-repeat: no-repeat;
	background-position: right;
}

.topright {
	padding: 0px 0px 0px 0px;
	height: 25px;
	width: 25px;
	background-image: url(http://www.herzogbucks.com/gif/tableside.gif);
	background-repeat: no-repeat;
	background-position: left;
}

.bottomright {
	padding: 0px 0px 0px 0px;
	height: 25px;
	width: 25px;
	background-image: url(http://www.herzogbucks.com/gif/tableside.gif);
	background-repeat: no-repeat;
	background-position: left;
}

.bottomleft {
	padding: 0px 0px 0px 0px;
	height: 25px;
	width: 25px;
	background-image: url(http://www.herzogbucks.com/gif/tableside.gif);
	background-repeat: no-repeat;
	background-position: right;
}

.topcenter {
	padding: 0px 0px 0px 0px;
	vertical-align: bottom;
	height: 25px;
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: center;
	color: #990000;
	background-image: url(http://www.herzogbucks.com/gif/tabletop.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}

.bottomcenter {
	padding: 0px 0px 0px 0px;
	vertical-align: top;
	height: 25px;
	background-image: url(http://www.herzogbucks.com/gif/tabletop.gif);
	background-repeat: repeat-x;
	background-position: top;
}

.leftcenter {
	padding: 0px 0px 0px 0px;
	width: 25px;
	background-image: url(http://www.herzogbucks.com/gif/tableside.gif);
	background-repeat: repeat-y;
	background-position: top;
}

.rightcenter {
	padding: 0px 0px 0px 0px;
	width: 25px;
	background-image: url(http://www.herzogbucks.com/gif/tableside.gif);
	background-repeat: repeat-y;
	background-position: top;
}

.tablealignright {
	padding: 0px 0px 0px 0px;
	background-color: #797a7a;
	border: none;
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	vertical-align: right;
	text-align: center;
	color: #0d0f28;
}

.tablealignleft {
	padding: 0px 0px 0px 0px;
	background-color: #797a7a;
	border: none;
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	vertical-align: left;
	text-align: center;
	color: #0d0f28;
}




/* Popup code */
.popup {
  display: none;
  position: fixed;
  padding: 10px;
  width: 280px;
  left: 50%;
  margin-left: -150px;
  height: 180px;
  top: 50%;
  margin-top: -100px;
  background: #fff;
  z-index: 20;
}

#popup1, #popup2, #popup3  {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
}

#popup2:after {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  z-index: -2;
}

#popup2:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #FFF;
  z-index: -1;
}

.poptext {
color: #000;
}