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

#fundraiser {
  background: #0cf;
  background: linear-gradient(to right, #0cf, #ff2f82),
              #0cf;

  position  : relative;
  height    : 150px;
  overflow  : hidden;
}

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

.progress-bar {
  background: #9385c6;
  background: repeating-linear-gradient(
    -55deg,
    #e24190,
    #b25ea8 15px,
    #9471b6 10px,
    #9385c6 25px
  );

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

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

.percentage {
  color: white;
  position: absolute;
  right: 1em;
}

.fence {
  position: absolute;
  left: 0;
  bottom: 15px;
  width: 100%;
  height: 135px;
}

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

.message p {
  position: relative;
  padding-top : 0;
  margin-top  : 0;
}

.progresswidget {
  position     : absolute;
  bottom       : 0;
  padding-right: 0;
  padding-left : 0;
  height       : 18px;
  width        : 100%;
}

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

.goal {
  color      : #000000;
  position   : absolute;
  padding    : 0 .1em;
  padding-top: .1em;
  right      : 0;
}

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

@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;
  }
}