body {
  background:#f5fccc;
  font-family:'Quicksand', calibri, Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  text-shadow:0px 0px 1px #bbb;
  color:#71784a;
  letter-spacing:1px;
  line-height:15px;
  margin:0;
  padding:0;
}

a { 
  text-decoration:none; 
  color:#666; 
  font-weight:bold; 
}

a:hover { 
  color:#F07671; 
}

b { 
  color:#71784a; 
  font-weight:bold; 
}

i { 
  font-style:italic; 
  color:#aaa; 
}

u { 
  color:#daac5c; 
  text-decoration:none; 
}

#layout { width:60%; margin:80px auto; }

/* HEADER */
#header {
  width:80%;
  margin:0 auto;
  height:110px;
  text-align:center;
  justify-content: center;
}
#header img { vertical-align:middle; }
#sitename a { font:30px 'Quicksand', courier new; color:#71784a; vertical-align:middle; }

/* NAVIGATION */
#navigation {
  width:80%;
  margin:0 auto 10px auto;
  text-align:center;
border-radius:5px;
  padding-top:1px;
}
#navigation a {
  width:25%;
  display:inline-block;
  background:#99734d;
  font:bold 14px 'Quicksand';
  text-transform:uppercase;
  padding:4px;
  color:#e6c9b8;
border-radius:5px;
  margin-right:2px;
}
#navigation a:hover {
  background:#e6c9b8;
  color:#99734d;
}

/* COLUMNS */
#left, #content, #right {
  float:left;
  padding:6px;
  box-sizing:border-box;
}
#left { width:20%; color:#5a5a5a; }
#content { width:60%; color:#656565; }
#right { width:20%; color:#5a5a5a; }

/* BOXES */
.box, .box-without-title {
  background:#fff;
  border:1px solid #71784a;
  box-shadow:5px 6px #aeb872;
  border-radius:0px 0px 5px 5px;
  padding:8px;
  margin-bottom:14px;
}

.box-without-title { 
  border-top:1px solid #71784a; 
}


.title {
  font:bold 12px Quicksand;
  text-transform:uppercase;
  color:#fff;
  background:#71784a;
  padding:4px 8px 2px;
  margin-bottom:0px;
  border-radius:5px 5px 0 0;
    box-shadow:5px 6px #aeb872;
}

.warningBanner {
  font:bold 12px Quicksand;
  text-align: center;
  text-transform:uppercase;
  color:#fff;
  background:#af3f25;
  padding:4px 8px 2px;
  margin-bottom:14px;
  border-radius:5px 5px 5px 5px;
    box-shadow:5px 6px #aeb872;
}


.image-box {
  background:#fff;
  border:1px solid #71784a;
  box-shadow:5px 6px #aeb872;
  border-radius:5px 5px 5px 5px;
  padding:5px;
  margin-bottom:14px;
}

.sticker-box {
  text-align: center;
  background:#caccb2;
  border:1px solid #71784a;
  border-radius:5px 5px 5px 5px;
  padding:5px;
}

.button {
  background:#caccb2;
  border:1px solid #71784a;
  border-radius:5px 5px 5px 5px;
  padding:5px;
  margin:5px;
  font:bold 12px Quicksand;
  text-align: center;
  color: #71784a;
  
  
}

/* MENU */
#menu a {
  display:block;
  width:100%;
  background:#e6c9b8;
  color:#99734d;
  padding:2px;
  margin-bottom:4px;
  font:bold 12px Quicksand;
  text-align:center;
  border-radius:5px;
}
#menu a:hover { background:#99734d; color:#e6c9b8; }

/* FOOTER */
#footer {
  width:720px;
  margin:0 auto;
  text-align:center;
  clear:both;
  padding:10px 0;
  
function openCity(evt, cityName) {
  /* Declare all variables*/
  var i, tabcontent, tablinks;

  /* Get all elements with class="tabcontent" and hide them */
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  /* Get all elements with class="tablinks" and remove the class "active" */
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  /* Show the current tab, and add an "active" class to the button that opened the tab */
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}