.ribbon {
    font: "Arial, Helvetica, sans-serif";
    position: relative;
    left: 0;
    width: 30px;
    padding: 3px 0px 3px 5px;
    background: #CCC;
    background: -webkit-linear-gradient(left, #AAA, #CCC); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #AAA, #CCC); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #AAA, #CCC); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #AAA, #CCC); /* Standard syntax */
}
.ribbon-content{
    position: relative;
    left: 0px;
    margin-bottom: 2px;

}
.ribbon.base {
    color: #fff;
    font-family: sans-serif;
    font-size: 7px;
    line-height: 8px;
    height: 7px;
}
.ribbon:before, .ribbon:after {
    content: '';
    position: absolute;
    right: -9px;
    border-right: 10px solid transparent;
}
.ribbon:before {
    top: 0;
}
.ribbon:after {
    bottom: 0;
}
.ribbon.base:before {
    border-top: 10px solid #CCC;
}
.ribbon.base:after {
    border-bottom: 10px solid #CCC;
}
.ribbon span {

}

.ribbon.blue {
    background: #004785; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #0B4780, #004785); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #0B4780, #004785); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #0B4780, #004785); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #0B4780, #004785); /* Standard syntax */
}
.ribbon.blue:before {
    border-top: 10px solid #004785;
}
.ribbon.blue:after {
    border-bottom: 10px solid #004785;
}

.ribbon.orange {
    background: #FBAF5D; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #CF904D, #FBAF5D); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #CF904D, #FBAF5D); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #CF904D, #FBAF5D); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #CF904D, #FBAF5D); /* Standard syntax */
}
.ribbon.orange:before {
    border-top: 10px solid #FBAF5D;
}
.ribbon.orange:after {
    border-bottom: 10px solid #FBAF5D;
}

.ribbon.black {
    background: #000000;
    width: 30px;
}
.ribbon.black:before {
    border-top: 10px solid #000000;
}
.ribbon.black:after {
    border-bottom: 10px solid #000000;
}