@font-face {
  font-family: Collegiate;
  src: url("Collegiate.ttf");
}

.ribbon-holder {
  position: absolute;
  top: 0;
  overflow: hidden;
  height: 10em;
}

.right.ribbon-holder {
  right: 0;
}

.left.ribbon-holder {
  left: 0;
}

.ribbon,
.ribbon:hover {
  text-decoration: none;
}

.ribbon {
  font-family: Collegiate, sans-serif;
  letter-spacing: -.1px;
  opacity: 0.95;

  padding: 0.25em 0;
  position: relative;
  top: 2.5em;

  /* Defaults friendly for white pages. */
  -moz-box-shadow: 0 0 13px #888;
  -webkit-box-shadow: 0 0 13px #888;
  box-shadow: 0 0 13px #888;
  color: #FFF;
  display: block;
  line-height: 1.35em;
}

.ribbon .text {
  padding: 0.1em 3em;
}

.right .ribbon {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  right: -2.6em;
}

.left .ribbon {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: -2.6em;
}

.white.ribbon {
  color: #111;
  background-color: #F5F5F5;
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f3f3f3 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f3f3f3 0%,#ffffff 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #f3f3f3 0%,#ffffff 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #f3f3f3 0%,#ffffff 100%); /* W3C */
  -moz-box-shadow: 0 0 13px #999;
  -webkit-box-shadow: 0 0 13px #999;
  box-shadow: 0 0 13px #999;
  text-shadow: 0 0 .05em;
}

.white.ribbon .text {
  border: 1px solid #cecece;
}

.red.ribbon {
  background-color: #9a0000;
  background: #9a0000; /* Old browsers */
  background: -moz-linear-gradient(top, #9a0000 0%, #a90000 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9a0000), color-stop(100%,#a90000)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #9a0000 0%,#a90000 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #9a0000 0%,#a90000 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #9a0000 0%,#a90000 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a0000', endColorstr='#a90000',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #9a0000 0%,#a90000 100%); /* W3C */
}

.red.ribbon .text {
  border: 1px solid #bf6060;
}

.green.ribbon {
  background-color: #006e00;
  background: #006e00; /* Old browsers */
  background: -moz-linear-gradient(top, #006e00 0%, #007200 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006e00), color-stop(100%,#007200)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #006e00 0%,#007200 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #006e00 0%,#007200 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #006e00 0%,#007200 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006e00', endColorstr='#007200',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #006e00 0%,#007200 100%); /* W3C */
}

.green.ribbon .text {
  border: 1px solid #6bac6b;
}

.darkblue.ribbon {
  background-color: #121621;
  color: #ecedee;
}

.darkblue.ribbon .text {
  border: 1px solid #53565e;
}

.orange.ribbon {
  background-color: #E57504;
  background: #dc7202; /* Old browsers */
  background: -moz-linear-gradient(top, #dc7202 0%, #ee7906 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dc7202), color-stop(100%,#ee7906)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #dc7202 0%,#ee7906 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #dc7202 0%,#ee7906 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #dc7202 0%,#ee7906 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc7202', endColorstr='#ee7906',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #dc7202 0%,#ee7906 100%); /* W3C */
}

.orange.ribbon .text {
  border: 1px solid #ebaa65;
}

.gray.ribbon {
  background-color: #6d6d6d;
  background: #6a6a6a; /* Old browsers */
  background: -moz-linear-gradient(top, #6a6a6a 0%, #6d6d6d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6a6a6a), color-stop(100%,#6d6d6d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #6a6a6a 0%,#6d6d6d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #6a6a6a 0%,#6d6d6d 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #6a6a6a 0%,#6d6d6d 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a6a6a', endColorstr='#6d6d6d',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #6a6a6a 0%,#6d6d6d 100%); /* W3C */
}

.gray.ribbon .text {
  border: 1px solid #a4a4a4;
}