/* colors: 
 * body bg: #ffffff
 */

* { box-sizing: border-box;}

html {
    width: 100%;
    height: 100%;
}

body {
    background: #ffffff; 
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0;
    position: relative;
    text-align: center;
}



body > div {
    border: 5px solid #E3CB93;
/*    border-radius: 40px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19), inset 0 0 20px rgba(0,0,0,.19);*/
    width: 880px;
    margin: 30px auto;
    padding: 20px 40px 40px 40px;
    text-align: justify;
    font-family: 'Avant Garde'; /*, sans-serif;*/
    color: #5C4A31;
    font-size: 13pt;
    line-height: 1.7;
    font-weight: 400;
    position: relative;
}

#contact ul {
    list-style-type: disc;
    padding-left: 40px;
}


h1 {
    color: #5C4A31;
    font-size: 20pt;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}

p {
    margin-top: 15px;
}

a {
    color: inherit; 
    text-decoration: underline;
}

a.invisible {
  text-decoration: none;
}

body > div#header {
   background-color: none;
   border: none;
   background-image: url("2020_SGSGP_conf_header-width-880.png");
   min-height: 574px;
}

#header h1 {
    font-size: 22pt;
    margin-bottom: -10px;
    margin-top: 0px;
    text-align: left;
}


body > div#navigation {
    background-color: #E3CB93; 
    border: none;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    color: #ffffff;
    padding: 40px;
    padding-bottom: 30px;
    position: relative;
    display: table;
    table-layout: fixed;
}

#navigation ul {
    display: table-row;
    margin: 0px;
}

#navigation li {
    display: table-cell;
    text-align: center;
    font-size: 10pt;
    line-height: 1.3;
}

#navigation i {
    display: block;
    font-size: 40pt;
    padding-bottom: 10px;
}

#navigation a {
    text-decoration: none;
    display: block;
}

#hotel p{
  padding-left: 30px; 
  padding-top: 30px;
  padding-bottom: 30px;
}

#hotel ul {
    list-style-type: disc; 
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}

#hotel h1 {
  padding-bottom: 10px;
}

div#localinfo i.material-icons {
    vertical-align: text-bottom;
    font-size: 14pt;
}

div#localinfo i.material-icons.volunteers {
    vertical-align: text-top;
    font-size: 14pt;
}

div#localinfo .desktop {
    padding-left: .5em;
}

p.center {
    text-align: center;
    line-height: 2.0;
}

.bullet {
    display: inline-block;
    padding: 0px 15px;
    font-size: 14pt;
}

table {
    width: 80%;
    margin-left: 10%;
    border-collapse: separate;
    border-spacing: 10px;
}

th {
    text-align: center;
    font-size: 16pt;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

td.last-row {
    border-bottom: 1px solid;
}

td.date {
    vertical-align: middle;
    text-align: center;
    line-height: 2;
    padding-left: 15px;
    padding-right: 15px;
}

a.up {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #E3CB93;
    display: block;
}

div#localinfo a.up i.material-icons, 
a.up i {
    font-size: 40pt;
}

b {
    text-transform: uppercase;
    letter-spacing: 1px;
}

sup {
    font-size: .83em;
    vertical-align: super;
    font-weight: 400;
}

#nsflogo {
    position: relative;
    float: right;
}

#mapgraphic {
	display: block;
 	margin-left: auto;
	margin-right: auto;
	width: 50%;
}


/*This applies to non-desktop devices only*/

@media (max-width: 900px) {


  body > div {
      width: calc(100vw - 20px);
      border-width: 14px;
      border-radius: 24px;
      margin: 15px auto;
      padding: 10px 25px 25px 25px;
      font-size: 11.5pt;
  }

  body > div#navigation {
      display: block;
      padding: 20px 0px;
      padding-bottom: 0px;
  }

  #navigation ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap; 
      justify-content: space-evenly;
  }

  #navigation li {
     display: inline-block;
     width: 25%;
     margin-bottom: 20px;
  }

  #navigation a {
      display: inline-block;
  }

  h1 {
      font-size: 16pt;
  }
  
  a.up {
      top: 0px;
      right: 0px;
  }

  div#localinfo a.up i.material-icons, 
  a.up i {
      font-size: 30pt;
  }

  b {
     letter-spacing: normal;
  }

  #nsflogo {
      position: relative;
      bottom: 0px;
      float: none;
      display: block;
      margin: 0 auto;
  }
}

@media (max-width: 700px) {

  #navigation li {
     display: inline-block;
     width: 95px;
     margin-bottom: 20px;
  }

  table {
      width: 100%;
      margin-left: 0px;
      border-spacing: 5px;
      font-size: 10pt;
      text-align: left;
  }

  th {
      font-size: 13pt;
  }

  td.date {
      padding-left: 0px;
      padding-right: 5px;
      text-align: left;
      border-right: 1px solid;
  }

  .desktop {
      display: none;
  }

  .bullet {
      display: block;
      clear: both;
      padding: 0px;
      width: 0px;
      height: 0px;
      visibility: hidden;
  }
  
}

body.abstracts > div#tanda {

  background-color: #E3CB93; 
  border: none;
  color: #ffffff;
  padding: 40px;
  padding-bottom: 30px;
  position: relative;

}

body.abstracts > div#tanda a {

  font-size: 48px;
  font-weight: 700;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #ffffff;
  
}

body.abstracts > div#tanda h2 {

  font-size: 30px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  
}

body.abstracts > div.talk h2 {

  font-size: 20px;
  font-weight: 700;
  text-align: center;
  
}