@charset "utf-8";

html, body, #p1, #p2 {
	height: auto;
	min-height: 100vh;
}

body {
	/*MOVED TO HTML FILE - background-image: url(../images/KioskBG_Index_v1.jpg);*/
	background-size: auto 140%; /*Fill Width but adjust height*/
	background-attachment: fixed; /*Make background NOT SCROLL when the content scrolls*/
	background-position: center; /*Center BG image and crop left and right if needed*/
}
table {
	width: 100%;
	border:none;
}


.wrapper {
    width: 100%;
}
.header{
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}

#header, img{
    width:100%;
}


.btncontainer{
	height: auto; 
	width: 95%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}
.indexbtncontainer {
	position: relative;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
.sponsor {
	position: relative;
	width: 30%;
	margin-left: auto;
	margin-right: auto;	
	text-align: center;
}
.ePosterListingTitleIndex {
	position: relative;
	width: 60%;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;	
}

.btn02 {
    opacity: 0.95;
}

.btn02:hover {
   opacity: 1;
   cursor: pointer;
}

.btn02:active {
   transform: scale(.98,.98);
}





.btn01 img {
	/*Force the button images to fill the div edge to edge left to right and line up next to each other*/
	width: 100%;
	height: auto;
	display: block;
}

.btn01:hover {
   opacity: 1;
   cursor: pointer;
}

.btn01:active {
   transform: translateY(5px);
}


.btn01 {
    opacity: 0.95;
	/*Set button size for 3 rows of buttons*/
	width: 33.3%;
	float: left;
	/*The next two lines center the text over the button*/
	position: relative;
	text-align: center;
}

.btntext {
  /* Centered text */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*Style the text*/
  color: #f0f0f0;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.58);
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  line-height: 50%;
}

.btntextsmall {
  /* Centered text */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*Style the text*/
  color: #f0f0f0;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.58);
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  font-weight: bold;
  line-height: 95%;
  font-size: 1.4vw;	
}

.btntextmed {
  /* Centered text */
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*Style the text*/
  color: #f0f0f0;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.58);
  font-family: "Myriad Pro, Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  font-weight: bold;
  line-height: 95%;
  font-size: 2vw;
}

.btntextlarge {
  /* Centered text */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*Style the text*/
  color: #f0f0f0;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.58);
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  font-weight: bold;
  line-height: 95%;
  font-size: 3vw;
}


.tabledivsearchbar {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.searchtextinput   {
	vertical-align: middle;
	background-image: url('../images/searchicon30x30.png');
	background-position: 10px;
	background-repeat: no-repeat;
	width: 80%;
	height: 48px;
	margin-left: 10%;
    margin-right: 10%;
	font-size: 28px;
	padding-left: 45px;
	border: 1px solid #ddd;
}

.tabledivouter {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 25px; /* Rounded Corners */
	background: rgba(255, 255, 255, 0.90); /* White background with 30% opacity */
}
.tabledivinner {
	width: 95%;
	margin-top: 10px;
	margin-bottom: 100px;
	margin-right: auto;
	margin-left: auto;
	font-size: 130%;
	overflow-y: auto;
	overflow-x: hidden;
}
#program {
	padding: 20px;
}
.eposterid {
	font-size: 150%;
	font-weight: bold;
}
.missing {
	display: none;
}

.categoryheading {
	font-size: 30pt;
	color: #A00D12;
	text-align: center;
	font-weight: bold;
}

.homebutton {
  	max-width:48px;
  	max-height:48px;
  	width: auto;
  	height: auto;
	padding-right: 0px;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.homebutton:hover {
	filter: brightness(85%);
}
.homebutton:active {
	transform: scale(.9,.9);
}

/*The next three make the navbar fonts bigger for the kiosk mode*/
#navlinks01 {
	font-size: 24px;
}
.dropdown-menu {
	font-size: 24px;
}
#filterlist {
	vertical-align: middle;
	background-image: url('../images/searchicon30x30.png');
	background-position: 10px;
	background-repeat: no-repeat;
	width: 800px;
	height: 48px;
	margin-left: 10%;
    margin-right: 10%;
	font-size: 28px;
	padding-left: 45px;
	border: 1px solid #ddd;
	}


/*TABLET*/
@media (max-width:768px){
	.btn01 {
		width: 50%;
	}
	.btntextmed {
	  font-size: 2vw;
	}
	html, body, #p1, #p2 {
		height:auto;
		min-height: 180vh;
	}	
	.tabledivinner {
		font-size: 100%;
	}
	#navlinks01 {
		font-size: 14px;
	}
	.categoryheading {
	font-size: 20pt;
	}
	.dropdown-menu {
		font-size: 14px;
	}
	#filterlist {
		margin-top: 8px;
		margin-right: 8px;
		margin-left: 8px;
		margin-bottom: 8px;
		font-size: 14px;
		width: 500px;
	}

}
	
/* MOBILE sizing customization */
@media (max-width:400px){

	.btn01 {
		width: 50%;
		margin-left: 0%;
		margin-right: 0%;	
	}
	
	.btntextmed {
	  font-size: 2vw;
	}

	html, body, #p1, #p2 {
		height:auto;
		min-height: 180vh;
	}	
	
	/* Force table to not be like tables anymore - Make it stack each cell vetically*/
	table, thead, tbody, th, td, tr {
		display: block;
	}
	
	.tabledivinner {
		font-size: 100%;
	}
	#filterlist {
		width: 300px;
	}
	.categoryheading {
	font-size: 20pt;
	}
	.dropdown-menu {
	font-size: 100%;
	}
	#navlinks01 {
		font-size: 14px;
	}
	.dropdown-menu {
		font-size: 14px;
	}
	#filterlist {
		margin-top: 8px;
		margin-right: 8px;
		margin-left: 8px;
		margin-bottom: 8px;
		font-size: 14px;
		width: 200px;
	}
	
	@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
	body {
	background-image: url(../images/KioskBG_Index_v1.jpg);
	background-size: auto auto; /*Fill Width but adjust height*/
	/*background-attachment: fixed; Make background NOT SCROLL when the content scrolls*/
	background-position: center; /*Center BG image and crop left and right if needed*/
}
	}
}