/* color palette from www.color-hex.com/color-pallette/10236 */

@font-face {
  font-family: "Beach Resort";
/*  src: url("../fonts/Beach_Resort.ttf"); */
/*  src: url("../fonts/The Beach.otf"); */
  src: url("../fonts/PATRONATO 21.ttf");
}

/* body { background-image: url('images/sand_welcome_wallpaper.jpg') }

.divclass { font-style:italic }
.divclass.p { font-size: 40px}
p { font-weight:bold }
h1 { font-family: "Beach Resort"; font-size: 80px }
*/

.light_shade {
  background-color: #f9dbbd; /* from lightly tanned skin tones color pallette */
}

.medium_shade {
  background-color: #eec8a9; /* from lightly tanned skin tones color pallette */
}

.dark_shade {
  background-color: #d8b896; /* from lightly tanned skin tones color pallette */
}

/*
.shaded {
  background-color: #f9dbbd; /* from lightly tanned skin tones color pallette */
}
*/

nav { margin-left: 40px; }
.NavNote { font-size: small; font-style: italic; }

.rndpnl { border-radius:15px 0px 15px 15px; }

.box {
  border: 1px solid #b2a565;
  padding: 1px
}

li { margin-left: 20px; list-style: circle outside none; }

div h1 {
<!--  font-size: xx-large; -->
  font-size: .6em;
}

div h2 {
<!--  font-size: x-large; -->
  font-size: .5em;
}

div h3 {
<!--  font-size: large; -->
  font-size: .4em;
}

div h4 {
<!--  font-size: medium; -->
  font-size: .3em;
}

/* Calendar settings */
.cal {
  font-family: Calibri;
  font-weight: bold;
}

.cal h1 {
  font-size: xx-large;
  text-align: center;
  text-shadow: 1px 1px 2px #eec8a9;
  color: #a37444;
}

.cal h2 {
  font-size: x-large;
  text-shadow: 1px 1px 2px #eec8a9;
  color: #a37444;
}

.cal h3 {
  font-size: large;
  text-shadow: 1px 1px 2px #eec8a9;
  color: #a37444;
}

.cal h4 {
  font-size: medium;
  text-shadow: 1px 1px 2px #eec8a9;
  color: #a37444;
}

/* ANIMATIONS */
/* make bgFadeIn */
@keyframes bgFadeWinter {
  50%, 100% {
    background-color: white;
  }
  10%, 60% {
    background-color: #66a3ff;
  }
}

@keyframes bgFadeSummer {
  50%, 100% {
    background-color: white;
  }
  10%, 60% {
    background-color: yellow;
  }
}

.bgFadeWinter {
  -webkit-animation: bgFadeWinter 20s ease-in-out 0s infinite;
  animation: bgFadeWinter 20s ease-in-out 0s infinite;
}

.bgFadeWinter:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.bgFadeSummer {
  -webkit-animation: bgFadeSummer 10s ease-in-out 0s infinite;
  animation: bgFadeSummer 10s ease-in-out 0s infinite;
}

/* tooltips (pop-up on hover) */
.bldg_status_tooltip {
  position: relative;
/*  display: inline-block; */
  text-align: center;
}

.bldg_status_tooltip .tooltiptext {
  visibility: hidden;
  width: 210px;
  background-color: #eec8a9;
  color: black;
  text-align: left;
  border-radius: 6px;
  padding: 2px;

  /* Position the tooltip */
  position: absolute;
  top: -5px;
  right: 105%;
  z-index: 1;
}

.bldg_status_tooltip:hover .tooltiptext {
  visibility: visible;
}

a.bare {
  color: black;
  text-decoration: none;
}

.link_button {
  border: none;
  background: none;
}

.Icon {
  position: relative;
  width: 150px;
  height: 100px;
}

.Icon button {
  border: none;
  background: none;
}

.Icon figcaption {
  display: none;
  position:relative;
  top: -75px;
  font-weight: bold;
/*  left: 0;
  right: 0;*/
}

.Icon:hover figcaption {
  display:block;
  background-color:white; 
  text-align: center;
}

table {
  width: 100%;
}

th {
  font-weight: strong;
  font-size: 120%;
}

td, th {
  text-align: left;
}

/*
tr:nth-child(even) {
  background-color: #dddddd;
}
*/