@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%;
}


.headerbg {
	background-image: url("../images/BannerBG.png");	
	position: absolute;
      width: 100%;

      top: 0px;
      right: 0px;
      left: 0px;
      opacity: .3;
	  z-index: -1;
}

.header{
	width: 100%;
	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;	
}

.btnspacer {
	padding-top: 40px;
}

.btn02 {
    opacity: 0.85;
	height: auto;
	position: relative;
	display: flex; /* Use flexbox for vertical centering */
    align-items: center; /* Center items vertically */
    justify-content: center; /* center items horizontally*/
	/*border-style: dotted;*/
}
.btn02 img {
  display: block; /* ensure image is a block level element */
  width: 93%; /* or whatever width you want */
}
.btn02:hover {
   opacity: 1;
   cursor: pointer;
}

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


.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;
}

.btntextxl {
	
	/* Centered text */
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for element's size */
    text-align: center;
    /* Style the text */
    color: #f0f0f0;
    text-shadow: 0px 6px 10px rgba(0, 0, 0, 0.9);
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-weight: normal;
    line-height: 95%;
    font-size: 5vw;
}


.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 */
	/*border-style: dotted;*/
}
.tabledivinner {
	width: 95%;
	margin-top: 10px;
	margin-bottom: 100px;
	margin-right: auto;
	margin-left: auto;
	font-size: 130%;
	overflow-y: auto;
	overflow-x: hidden;
	/*border-style: dotted;*/
}
/*
#program {
	padding: 20px;
}
*/

.col1 /*PosterID*/ {
	width: 10%;
	/* border-style: dotted;*/
}
		
.col2 /*Title/Author/Inst*/ {
/* padding-left: 5%;*/
 width: 90%;
 /* border-style: dotted;*/
}
.eposterid {
	font-size: 150%;
	font-weight: bold;
}
.missing {
	display: none;
}

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

.category {
			font-family: Sans-Serif;
			font-size: medium;
			color: darkslategray;
			text-align: right;
}
.submissiontype {
		    /*position: absolute;*/
		    /*right: -1000px;*/ 
			font-family: Sans-Serif;
			font-size: small;
			color: darkslategray;
			text-align: right;
}
.keywords {
			font-family: Sans-Serif;
			font-size: small;
			color: darkslategray;
			text-align: right;
}
	
.track {
			font-family: Sans-Serif;
			font-size: small;
			color: darkslategray;
			text-align: right;
}
.type {
			position: absolute;
		    right: -1000px;
			font-family: Sans-Serif;
			font-size: small;
			color: darkslategray;
			text-align: right;
}

.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;
	}

.visually-hidden {
  position: absolute;
  left:     -10000px;
  top:      auto;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

/*TABLET*/
@media (max-width:768px){
	.btn01 {
		width: 50%;
	}
	.btntextmed {
	  font-size: 3vw;
	}
	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: 3vw;
	}
	.col1 /*PosterID*/ {
		width: 16%;
		/* border-style: dotted;*/
	}

	.col2 /*Title/Author/Inst*/ {
	/* padding-left: 5%;*/
	 width: 84%;
	 /* border-style: dotted;*/
	}
	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_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*/
}
	}
}