/**
 * @file
 * This CSS3 file provides basic styling & animation for the thermometer.
 */

@keyframes thermometer_raise_width {
    from {width: 0%;}
}

@keyframes thermometer_raise_height {
    from {height: 0%;}
}

div.donations_thermometer_wrapper a:hover {
  text-decoration: none;
}

div.gauge{
  position: relative;
  background-color: #cccccc;
  border-radius: 25px;
  padding: 10px;
  box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
  margin: 10px;
}

div.gauge > span.current-meter {
  display: block;
  box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

div.gauge.vertical > span.current-meter {
  border-radius: inherit;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

div.gauge.horizontal > span.current-meter {
  border-radius: inherit;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}


/* SIZING. */

/* Small. */
div.gauge.vertical.small{
  width: 20px;
  height: 200px;
}

div.gauge.horizontal.small{
  width: 200px;
  height: 20px;
}


/* Large. */
div.gauge.vertical.large{
  width: 80px;
  height: 400px;
}

div.gauge.horizontal.large{
  width: 400px;
  height: 80px;
}

div.gauge.vertical.small > span.current-meter, div.gauge.vertical.large > span.current-meter {
  width: inherit;
  position: absolute;
  bottom: 10px;
  animation-name: thermometer_raise_height;
  animation-duration: 4s;
  animation-delay: 2s;
}

div.gauge.horizontal.small > span.current-meter, div.gauge.horizontal.large > span.current-meter {
  height: inherit;
  animation-name: thermometer_raise_width;
  animation-duration: 4s;
  animation-delay: 2s;
}

/* PREDEFINED COLORS. */
/* Red. */
div.gauge.red > span.current-meter {
  background-color: #f0a3a3;
  background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}

/* Blue. */
div.gauge.blue > span.current-meter {
  background-color: #a3b4f0;
  background-image: linear-gradient(to bottom, #a3b4f0, #2370f4);
}

/* Yellow. */
div.gauge.yellow > span.current-meter {
  background-color: #eaf0a3;
  background-image: linear-gradient(to bottom, #eaf0a3, #ddf423);
}

/* Green. */
div.gauge.green > span.current-meter {
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
}

/* Purple. */
div.gauge.purple > span.current-meter {
  background-color: #c7a3f0;
  background-image: linear-gradient(to bottom, #c7a3f0, #8523f4);
}

/* Orange. */
div.gauge.orange > span.current-meter {
  background-color: #f1a165;
  background-image: linear-gradient(to bottom, #f1a165, #f36d0a);
}


/* thermometer. */
div.gauge.image {
  background-color: #333;
  border-radius: 0;
  box-shadow: none;
  padding: 0px;
  margin: 0px;
}

div.gauge.image > span.current-meter {
  background-color: #f0a3a3;
  border-radius: 0;
  box-shadow: none;
  padding: 0px;
  margin: 0px;
}

div.gauge.small.vertical.image {
  width: 37px;
  height: 211px;
  position:relative;
  background: #333 url(../images/gauge-vertical-small.gif) top left no-repeat;
}

div.gauge.small.vertical.image > span.current-meter {
  background-color: #f0a3a3;
  position:absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
  width: 100%;
  background: red url(../images/gauge-vertical-small.gif) bottom right no-repeat;
}

div.gauge.large.vertical.image {
  width: 77px;
  height: 442px;
  position:relative;
  background: #333 url(../images/gauge-vertical-large.gif) top left no-repeat;
}

div.gauge.large.vertical.image > span.current-meter {
  background-color: #f0a3a3;
  position:absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
  width: 100%;
  background: red url(../images/gauge-vertical-large.gif) bottom right no-repeat;
}

div.gauge.small.horizontal.image {
  width: 211px;
  height: 37px;
  position:relative;
  background: #333 url(../images/gauge-horizontal-small.png) top left no-repeat;
}

div.gauge.small.horizontal.image > span.current-meter {
  background-color: #f0a3a3;
  position:absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
  height: 100%;
  background: red url(../images/gauge-horizontal-small.png) bottom left no-repeat;
}

div.gauge.large.horizontal.image {
  width: 442px;
  height: 77px;
  position:relative;
  background: #333 url(../images/gauge-horizontal-large.png) top left no-repeat;
}

div.gauge.large.horizontal.image > span.current-meter {
  background-color: #f0a3a3;
  position:absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
  height: 100%;
  background: red url(../images/gauge-horizontal-large.png) bottom left no-repeat;
}

/* OTHER */
div.gauge > span.current-value{
  display:none;
  position: absolute;
  left: 10px;
  z-index: 10;
}