.myribbon {
	 font-size: 13px !important;
	 /* This myribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the myribbon elements */
	 width: 150px;
	 position: relative;
	 background: #0059a0;
	 color: #fff;
	 text-align: center;
	 padding: 5px; /* Adjust to suit */
	 margin: 1em auto 1em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the myribbon 'graphics' take up 24px themselves so we double it. */
}
.myribbon:before, .myribbon:after {
	 content: "";
	 position: absolute;
	 display: block;
	 bottom: -13px;
	 border: 0.9em solid #0059a0;
	 z-index: 0;
}
.myribbon:before {
	 left: -47px;
	 border-right-width: 48px;
	 border-left-color: transparent;
}
.myribbon:after {
	 right: -47px;
	 border-left-width: 48px;
	 border-right-color: transparent;
}
.myribbon .myribbon-content:before, .myribbon .myribbon-content:after {
	 content: "";
	 position: absolute;
	 display: block;
	 border-style: solid;
	 border-color: #0059a0 transparent transparent transparent;
	 bottom: -1em;
}
.myribbon .myribbon-content:before {
	 left: 0;
	 border-width: 1em 0 0 1em;
}
.myribbon .myribbon-content:after {
	 right: 0;
	 border-width: 1em 1em 0 0;
}
.myribbon-content{
	font-weight:bold;
}
.hribbon {
	 font-size: 13px !important;
	 /* This myribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the myribbon elements */
	 width: 150px;
	    
	 position: relative;
	 background: #0059a0;
	 color: #fff;
	 text-align: center;
	 padding: 5px; /* Adjust to suit */
	 /* margin: 1em auto 1em; */ /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the myribbon 'graphics' take up 24px themselves so we double it. */
	 margin-left:1em;
}
.hribbon:before, .hribbon:after {
	 content: "";
	 position: absolute;
	 display: block;
	 bottom: 0px;
	 border: 1em solid #0059a0;
	 z-index: 0;
}
.hribbon:before {
	 left: -26px;
	 /* border-right-width: 48px; */
	 /* border-left-color: transparent; */
	border-top-color: transparent;
	border-right-color: #0059a0;
	border-bottom-color: transparent;
	border-left-color:transparent;
}
.hribbon:after {
	 right: -26px;
	 /* border-left-width: 48px; */
	 /* border-right-color: transparent; */
	 border-top-color: transparent;
	border-left-color: #0059a0;
	border-bottom-color: transparent;
	border-right-color: transparent;
}
 .hribbon .hribbon-content:before, .hribbon .hribbon-content:after {
	 content: "";
	 position: absolute;
	 display: block;
	 border-style: solid;
	 /* border-color: #0059a0 transparent transparent transparent; */
	 bottom: -1em;
} 
.hribbon .hribbon-content:before {
	 left: 0;
	 border-width: 1em 0 0 1em;
}
.hribbon .hribbon-content:after {
	 right: 0;
	 border-width: 1em 1em 0 0;
}
.hribbon-content{
	font-weight:bold;
}