#header {
  background: #ddefff;
  background: linear-gradient(#d3dcff, #ffffff);
}

#fundraiser {
  background: #70bdff;
  background: linear-gradient(#70bdff, #fcc8ff);
  position  : relative;
  height    : 150px;
  overflow  : hidden;
}

#fundraiser .highlight {
   background: none;
   font-style: italic;
}
#fundraiser a[href]:hover { background: none; }
#fundraiser, #fundraiser a[href] { font-family: monospace; }
#fundraiser a {
  text-decoration: none;
  color          : #36204d;
}

.progress-bar {
  /* Pinstripes */
  background: #7c45ad;
  background: repeating-linear-gradient(
    0deg,
    #5b3380,
    #5b3380 3px,
    #7340a1 6px,
    #7340a1 13px
  );

  position        : absolute;
  min-width       : 40px;
  top             : 0;
  left            : 0;

  height: 18px;
  line-height: 18px;
}

.percentage {
  width: 100%;
  color: white;
}

.fence {
  position: absolute;
  left: 0;
  bottom: 15px;
}

.train {
  /* Move train with progress bar. */
  position: absolute;
  right: 0;
  bottom: 20px;
}

/* Sign posts */
.signs {
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
}

#sign1 {
  right: 70%;
}

#sign2 {
  right: 42%;
}

#sign3 {
  right: 40px;
}

.signsxs {
  position: absolute;
  top: 97px;
  right: 0;
}

#signxs1 {
  right: 80%;
}

#signxs2 {
  right: 45%;
}

#signxs3 {
  right: 10%;
}

/* Clouds in the sky */
.clouds {
  position: absolute;
}

#cloud1 {
  display: none;
  top: 60px;
  left: 10%;
}

#cloud2 {
  top: 60px;
  left: 30%;
}

#cloud3 {
  display: none;
  top: 78px;
  left: 50%;
}

#cloud4 {
  top: 67px;
  left: 70%;
}

.message {
  max-height    : 132px;
  padding-right : 7px;
  padding-left  : 7px;
  padding-top   : 0;
  margin-top    : 0;
}

.message p {
  font-size   : 10px;
  padding-top : 0;
  margin-top  : 0;
}

.progresswidget {
  position     : absolute;
  bottom       : 0;
  padding-right: 0;
  padding-left : 0;
  height       : 18px;
  width        : 100%;
  border-top   : dashed #7c45ad;
}

.progress {
  font-weight  : bold;
  height       : 18px;
  border-radius: 0;
  background   : #ffe240;
}

.goal {
  color      : #000000;
  position   : absolute;
  padding    : 1px 6px;
  right      : 0;
  bottom: 18px;
}

/* We don't need to display a banner at this size! */
@media (max-width:320px) {
  #fundraiser {
    display: none;
  }
}

@media (min-width: 560px) {
  .signs {
    display: block;
  }

  .signsxs {
    display: none;
  }

  #cloud3, #cloud1 {
    display: block;
  }

  #cloud2 {
    top: 50px;
  }
}

@media (min-width: 684px) {
.message p {
    font-size  : 12px;
  }
}

@media (min-width: 896px) {
  .message p {
    font-size  : 14px;
  }
}

@media (min-width: 1098px) {
  .message p {
    font-size  : 16px;
  }
}