/* From: http://www.inserthtml.com/2012/03/creating-css-image-ribbons/ */

.corner-noribbon {
 position: relative;
 display: inline-block;
 padding: 1px;
 overflow: hidden;
 width: 95%;
}

.corner-ribbon,
.corner-ribbon-reversed {
 position: relative;
 display: inline-block;
 padding: 1px;
 overflow: hidden;
 width: 95%;
}

.corner-ribbon p span {
 opacity: 0.9;
 position: absolute;
 display: inline-block;
 z-index: 5;
 color: #ddd;
 width: 200px;
 width: 170px;
 top: 34px;
 right: -60px;
 right: -50px;
 box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
 text-align: center;
 text-transform: uppercase;
 background: #d93131;
 background: rgb(124,45,35);
 padding: 6px 10px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
/*
 font-family: Arial, sans-serif;
*/
 font-weight: bold;
 font-size: 14px;
} 

.corner-ribbon p:before {
 content: "";
 width: 0;
 height: 0;
 position: absolute;
 top: -20px;
 right: 100px;
 z-index: -1;
 border: 17px solid;
 border-color: transparent transparent #662121 transparent;
}
 
.corner-ribbon p:after {
 content: "";
 width: 0;
 height: 0;
 position: absolute;
 top: 110px;
 right: -10px;
 z-index: -1;
 border: 17px solid;
 border-color: #662121 transparent transparent transparent;
}

.corner-ribbon-reversed p span {
 opacity: 0.9;
 position: absolute;
 display: inline-block;
 z-index: 5;
 color: #ddd;
 color: rgb(124,45,35);
 width: 200px;
 width: 130px;
 top: 34px;
 top: 25px;
 right: -60px;
 right: -35px;
 box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
 text-align: center;
 text-transform: uppercase;
 background: #d93131;
 background: rgb(124,45,35);
 background: #aaa;
 padding: 6px 10px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 font-weight: bold;
 font-size: 12px;
} 

.corner-ribbon-reversed p:before {
 content: "";
 width: 0;
 height: 0;
 position: absolute;
 top: -20px;
 right: 100px;
 right: 81px;
 z-index: -1;
 border: 17px solid;
 border-color: transparent transparent #662121 transparent;
}
 
.corner-ribbon-reversed p:after {
 content: "";
 width: 0;
 height: 0;
 position: absolute;
 top: 110px;
 top: 90px;
 right: -10px;
 z-index: -1;
 border: 17px solid;
 border-color: #662121 transparent transparent transparent;
}

.oneevent {
 background: #ddd;
 margin-top: -10px;
 margin-right: 4px;
 min-height: 50px;
 padding-bottom: 8px;
}

.corner-noribbon .oneevent {
 margin-top: 10px;
 margin-right: 4px;
}