body {background-color: #C1D8CD;}
body {background-image: url("images/12x12-BG-C1D8CDwNoise.jpg")}

/* General container style */
progress {
    border: 1px solid grey;
    background-color: #C1D8CD; /* The empty track color */
    appearance: none;       /* Removes default browser styling */
    height: 15px;
}

/* TRANSFORMED - Teal color */
progress.tra-bar::-webkit-progress-value { background-color: #31847C; }
progress.tra-bar::-moz-progress-bar { background-color: #31847C; }

/* RECONCILE - Muted Red/Brown color */
progress.rec-bar::-webkit-progress-value { background-color: #A25B5B; }
progress.rec-bar::-moz-progress-bar { background-color: #A25B5B; }

/* REVEALED - Cream/Tan color */
progress.rev-bar::-webkit-progress-value { background-color: #EFEFDC; }
progress.rev-bar::-webkit-progress-value { color: #C1D8CD; }
progress.rev-bar::-moz-progress-bar { background-color: #EFEFDC; }
progress.rev-bar::-moz-progress-bar { color: #C1D8CD; }


@font-face {
    font-family:PTSans;
    src: url("fonts/PTSans-Regular.ttf")
}
@font-face {
    font-family:Grooved;
    src: url("fonts/Grooved.ttf")
}
@font-face {
    font-family:GillSans;
    src: url("fonts/gill-sans-mt.ttf")
}
@font-face {
    font-family:LegendGiantPenguin;
    src: url("fonts/LegendGiantPenguin.ttf")
}
@font-face {
    font-family:LostAges;
    src: url("fonts/LostAges.ttf")
}
@font-face {
    font-family:monainn;
    src: url("fonts/monainn.otf")
}
@font-face {
    font-family:RamusLight;
    src: url("fonts/RamusLight.ttf")
}


td, th {color: #c36241; font-size: 18px; font-family: PTSans; text-align: left; padding: 5px; white-space: nowrap;}
th {color: #55652f; white-space: nowrap;}

th {font-weight:bold; white-space: nowrap;}

table {
  border: 1px solid; border-color:#55652f
}

table {margin-left:5%; margin-right:5%}

.shdw {box-shadow: 5px 10px 5px rgb(100,100,100);}

p {color: #c36241; font-size: 18px; font-family: PTSans; text-align: left;margin-left: 5%; margin-right: 2%}
.tr1 {font-size: 23px; font-family: Grooved}
.tr2 {font-size: 16px; font-family: GillSans}
.tr3 {font-size: 18px; font-family: Grooved}
.rev1 {font-size: 18px; font-family: LegendGiantPenguin; font-weight:bold}
.rev2 {font-size: 16px; font-family: LostAges}
.rev3 {font-size: 13px; font-family: LegendGiantPenguin; font-weight:bold}
.rec1 {font-size: 22px; font-family: monainn; letter-spacing:0.1em; font-weight:bold}
.rec2 {font-size: 16px; font-family: RamusLight; letter-spacing:0.03em}
.rec3 {font-size: 18px; font-family: monainn; letter-spacing:0.1em}
.spaced {letter-spacing:0.1em}
.footer {font-size:14px; line-height:80%}
.dark {color: #222222}
.spacer {font-size:25}
.centerAlign {text-align: center}
.signup {color:#55652f; text-align:center}


h1 {color: #c36241; font-size: 34px; font-family: PTSans; line-height: 85%; text-align: left;margin-left: 2%; margin-right: 2%}

a.signup:link {color: #55652f; text-decoration:underline}

a.signup:visited {color: #55652f; text-decoration:none}

a.signup:active {color: #55652f; font-weight:bold}

a.signup:hover {color: #55652f; font-weight:bold}

a:link {color: #c49452; text-decoration:none}

a:visited {color: #c49452; text-decoration:none}

a:active {color: #c36241; font-weight:bold}

a:hover {color: #c36241; font-weight:bold}

.popup {
  position: relative;
  display: inline-block;
    color:#c49452;
  
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup:hover {font-weight:bold}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 320px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}