/* main.css */

/* These are the colors and fonts used throughout the webpage.
 * I've listed them here so that a user may easily
 * do a search-and-replace for these to change the site theme.
 *   'Roboto',sans-serif; Font for the title text
 *   'Roboto-Slab',serif; Font for the body text 
 *   #fafafa; Background color of the site
 *   #505050; Foreground (text) color of the site
 *   #52739e; Navy, "Template" in the logo, current page in navigation, special titles in the Program
 *   #b2132e; Reddish, "Conference" in the logo, hover color for links
 *   #813c54; Heading color, titles in the Program
 *   #b8860b; Dark Goldenrod, color for links
 */

@import url('https://fonts.googleapis.com/css?family=Montserrat');

*{
    border:0;
    font:inherit;
    font-size:1em;
    margin:0;
    padding:0;
    vertical-align:baseline;
}

body{
    background-color: #fafafa;
    background-size: cover;
    background-attachment: fixed;
    color: #505050; 
    text-align:left;
    font-family:'Montserrat', sans-serif;
    font-size:1em;
    line-height:1.5em;
    margin: 0px auto;
    width: 100%;
}

.row{display: flex; width: 90%; margin-left: 5%; margin-right: 10%; column-gap: 2rem;flex-wrap: wrap;}

.main_column{float: left; text-align: justify; width: calc(75% - 1.5rem)}

.side_column{float: left; text-align: left; width: calc(20% - 0.5rem)}


.section {
    padding: 3rem 1.5rem;
}

a{color: #348a42; text-decoration:none;}
a.current{color: #2e5086;}
a.current:hover{color: #2e5086;}
a:hover{color: #4fb15f;}
a:active{color: #4fb15f;}
h1,h2,h3,h4{clear:left; color: #348a42; margin:1em 0em 1em 0em; font-family:'Montserrat'}
h1{font-size:2.67em}
h2{font-size:2.00em}
h3{font-size:1.67em; color: #2e5086}
h4{font-size:1.33em;}
p{list-style:none; margin:0px auto 10px auto; padding:0px; width:95%; text-align:justify; float: left;}
li a, p a {text-decoration:underline; }
ul{list-style:none; margin:14px auto 14px auto; padding:0px; width:90%; text-align:left;}
ul li{list-style: disc; margin:0px auto 0px auto; padding:0px; text-align:left;}
i,em{font-style:italic;}
b,strong{font-weight:bold;}
sup{
    vertical-align: super;
    font-size: 0.8em;
    line-height: 0;
}
sub{
    vertical-align: sub;
    font-size: 0.8em;
    line-height: 0;
}
table{
    width: 100%;
    margin: 12px auto 24px auto;
    float: center;
    /* UNCOMMENT THIS FOR DEBUGGING THE ALIGNMENT */
    /*border: 1px solid black;*/
}
th,td{
    text-align: left;
    /* UNCOMMENT THIS FOR DEBUGGING THE ALIGNMENT */
    /*border: 1px solid black;*/
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #2b5532;
  overflow: hidden;
/*  color: #fafafa;*/
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #fafafa;
  color: #2e5086;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Website Banner */
.banner_responsive {
/*    max-width: 100%; 
    max-height: 100%;*/
    width: 100%; 
    height: 300px;
    object-fit: cover;     
/*position: relative; /* allows repositioning */
left: 100%; /* move the whole width of the image to the right */
/*  margin-left: -50%;*/
}
.banner { position: relative; font-family:'Montserrat'; overflow: hidden}
.top-left {font-size:2.5em; line-height: 80%; color: #505050; background: rgba(250, 250, 250, 0.6); overflow-y: auto; text-align: center; width: 100%; position: absolute; padding: 20px 0 20px 0px; top: 0px; text-shadow: 0px 0px 6px #fafafa;}
/*.top-left {font-size:2.5em; line-height: 80%; color: #fafafa; text-align: center; width: 100%; height: 67px; position: absolute; padding: 10px 0 0 0; top: 0px;}*/
.bottom-right1 {font-size:1em; color: #6e6e6e; line-height: 1em; width: auto; height: 20px; padding: 0px 27px 0px 0px; text-align: right; position: relative; bottom: 0px; right: 0px;}
.bottom-right2 {font-size:2em; color: #fafafa; line-height: 1em; width: auto; height: 20px; padding: 0px 27px 27px 0px; text-align: right; position: absolute; bottom: 15px; right: 0px; text-shadow: 0px 0px 6px #000000;}

/* Conference Title Logo */
.title1{color: #2e5086; font-weight: 300} 
.title2{color: #348a42; font-weight: 300; }
.year{color: #348a42; font-size:0.9em; font-weight: 300; }
.subtitle1{font-weight: 300}

.button1 {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}


.button1 {
  background-color: #2b5532;
  color: #f2f2f2;
/*  border: 2px solid #04AA6D;*/
}

.button1:hover {
  background-color: #ddd;
  color: black;
}

.people_pic{
  width: 200px; 
  vertical-align: middle;
  margin: 0px 6px 0px 6px;
}

/* Navigation Links (Home, Registration, etc) */
table.navigation{width:800px;}
td.navigation{font-size:1.67em; white-space:nowrap; width:20%; text-align:center; vertical-align:middle; padding:0px 0px 0px 0px;}

/* Sponsor Images */
table.sponsors{width:800px;}
td.sponsor{white-space:nowrap; width:33%; text-align:center; vertical-align:middle; padding:0px 0px 0px 0px;}
td.sponsor img{width: 100%}

/* The Table on the Program Page */
td.room{padding: 4px 12px 4px 4px; width: 90%; vertical-align:bottom; font-size:1.67em; color: #52739e; height:32px;}
td.date{white-space:nowrap; width:130px; text-align:right; vertical-align:top; padding:4px 16px 0px 0px;}
td.title{padding: 4px 12px 4px 4px; width: 90%; vertical-align:top; font-size:1.3em; color: #348a42; height:32px; font-family:'Montserrat',serif;}
td.title-special{padding: 4px 12px 4px 4px; width: 90%; vertical-align:top; font-size:1.4em; color: #2e5086; height:32px; font-family:'Montserrat',serif;}
td.speaker{padding: 4px 12px 4px 4px; font-style: italic; font-size:1em; max-height:999999px}
td.abstract{padding: 4px 12px 12px 4px; font-size:1em; max-height:999999px; text-align: justify;}
td.abstract img{display: block; margin: 4px auto 8px auto}
table.plenary{padding-top: 8px; background: #ffffff;}

/* Registration and Directions iframes and Images */
iframe.registration{display:block; margin:1em auto 2em auto; width:700px; height:1400px; border:none;}
iframe.directions{display:block; margin:1em auto 2em auto; width:800px; height:400px; border:none;}
img.center{display:block; width:67%; margin:1em auto 2em auto;}

/* Flyer Images */
table.flyers{width:800px;}
td.flyer{white-space:nowrap; width:50%; text-align:center; vertical-align:middle; padding:0px 0px 0px 0px;}
td.sponsor img{width: 100%}

footer{font-size:0.875em; margin-top:12em; text-align:center;}

/* My hacky way of making the site mobile-friendly */
/*@media only screen and (max-width: 1100px) {
    h2{font-size:3.00em;}
    p{font-size:1.5em; line-height:1.5em;}
    th,td,tr{font-size:1.5em; line-height:1.5em;}
    td.date{font-size:1em; padding-top:0.5em;}
    td.navigation{font-size:1.5em; padding:0px 20px 0px 20px;}
    table.footer{font-size:0.33em;}
}*/

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


@media only screen and (max-width: 600px) {
  .main_column {
    width: 100%;
  }
  .side_column {
    width: 100%;
  }
  .title1, .title2, .year, .subtitle1{
    font-size:75%;
  }
}

@media screen and (max-width: 600px) {
  td{display:block;}
}