.ribbonb,
.ribbonb *,
.ribbon,
.ribbon * {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.ribbon, .ribbonb {
	font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
	width: 200px;
	margin: 20px auto 10px;
	padding: 0 10px 4px;
	position: relative;
	color: #444;
	background: #fff;
	border: 1px solid #d2d2d2;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ribbon h3, .ribbonb .hh {
	font: bold 14px/1.3 "Lucida Grande", arial, sans-serif;
	display: block;
	height: 30px;
	width: 210px;
	margin: 0;
	padding: 5px 10px;
	position: relative;
	left: -16px;
	top: 8px;
	color: #fff;
	text-shadow: 0 1px 1px #111;
	border-top: 1px solid #363636;
	border-bottom: 1px solid #202020;
	background: #333;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#383838), to(#262626));
	background: -webkit-linear-gradient(top, #383838 0%, #262626 100%);
	background: -moz-linear-gradient(top, #262626 0%, #383838 100%);
	background: -ms-linear-gradient(top, #262626 0%, #383838 100%);
	background: -o-linear-gradient(top, #262626 0%, #383838 100%);
	background: linear-gradient(to top, #262626 0%, #383838 100%);
	
	-webkit-border-radius: 2px 2px 0 0;
	-moz-border-radius: 2px 2px 0 0;
	-ms-border-radius: 2px 2px 0 0;
	border-radius: 2px 2px 0 0;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbonb .hh::before,
.ribbonb .hh::after,
.ribbon h3::before,
.ribbon h3::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	bottom: -11px;
	z-index: -10;
	border: 5px solid;
	border-color: #242424 transparent transparent transparent;	
}
.ribbonb .hh::before {left: 0;}
.ribbonb .hh::after {right: 0;}
.ribbon h3::before {left: 0;}
.ribbon h3::after {right: 0;}

.ribbonb {
	width: 760px;
	min-height: 100px;
	margin: 0px -20px 0px;
	color: #616161;
	font: normal 12px/1.6em Helvetica, Arial, sans-serif;
}
.ribbonb .hh {
	width: 770px;
}
.ribbonb.half {
	width: 360px;
}
.ribbonb.half .hh {
	width: 370px;
}

/* Round */
.ribbon.round h3, .ribbonb.round .hh {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
}
.ribbonb.round .hh::before,
.ribbonb.round .hh::after,
.ribbon.round h3::before,
.ribbon.round h3::after {
	width: 10px;
	height: 10px;
	bottom: -4px;
	border: none;
	background: #242424;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

/* Blue */
.ribbon.blue h3, .ribbonb.blue .hh {
	color: #fff;
	text-shadow: 0 1px 1px #155b88;
	border-top: 1px solid hsl(203, 97%, 53%);
	border-bottom: 1px solid hsl(203, 71%, 48%);
	background: #33ACFC;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#33ACFC), to(#3198DD));
	background: -webkit-linear-gradient(top, #33ACFC 0%, #3198DD 100%);
	background: -moz-linear-gradient(top, #3198DD 0%, #33ACFC 100%);
	background: -ms-linear-gradient(top, #3198DD 0%, #33ACFC 100%);
	background: -o-linear-gradient(top, #3198DD 0%, #33ACFC 100%);
	background: linear-gradient(to top, #3198DD 0%, #33ACFC 100%);
	
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
}
.ribbonb.blue .hh::before,
.ribbonb.blue .hh::after,
.ribbon.blue h3::before,
.ribbon.blue h3::after {
	border-color: #389ddd transparent transparent transparent;
}

.ribbonb.round.blue .hh::before,
.ribbon.round.blue h3::before {
	background: #33aaf8;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#33aaf8), to(#0674bb));
	background: -webkit-linear-gradient(left, #33aaf8 0%, #0674bb 100%);
	background: -moz-linear-gradient(left, #0674bb 0%, #33aaf8 100%);
	background: -ms-linear-gradient(left, #0674bb 0%, #33aaf8 100%);
	background: -o-linear-gradient(left, #0674bb 0%, #33aaf8 100%);
	background: linear-gradient(to left, #0674bb 0%, #33aaf8 100%);
}

.ribbonb.round.blue .hh::after,
.ribbon.round.blue h3::after {
	background: #33aaf8;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#33aaf8), to(#0674bb));
	background: -webkit-linear-gradient(right, #33aaf8 0%, #0674bb 100%);
	background: -moz-linear-gradient(right, #0674bb 0%, #33aaf8 100%);
	background: -ms-linear-gradient(right, #0674bb 0%, #33aaf8 100%);
	background: -o-linear-gradient(right, #0674bb 0%, #33aaf8 100%);
	background: linear-gradient(to right, #0674bb 0%, #33aaf8 100%);
}

/* Mov */
.ribbon.mov h3, .ribbonb.mov .hh {
	color: #fff;
	text-shadow: 0 1px 1px #3b3b58;
	border-top: 1px solid #7C4FC0;
	border-bottom: 1px solid #756194;
	background: #5A5A7E;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#5C65BF), to(#5A5A7E));
	background: -webkit-linear-gradient(top, #5C65BF 0%, #5A5A7E 100%);
	background: -moz-linear-gradient(top, #5A5A7E 0%, #5C65BF 100%);
	background: -ms-linear-gradient(top, #5A5A7E 0%, #5C65BF 100%);
	background: -o-linear-gradient(top, #5A5A7E 0%, #5C65BF 100%);
	background: linear-gradient(to top, #5A5A7E 0%, #5C65BF 100%);
	
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
}
.ribbonb.mov .hh::before,
.ribbonb.mov .hh::after,
.ribbon.mov h3::before,
.ribbon.mov h3::after {
	border-color: #9d9ddd transparent transparent transparent;
}

.ribbonb.round.mov .hh::before,
.ribbon.round.mov h3::before {
	background: #aaaaf8;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#aaaaf8), to(#7474bb));
	background: -webkit-linear-gradient(left, #aaaaf8 0%, #7474bb 100%);
	background: -moz-linear-gradient(left, #7474bb 0%, #aaaaf8 100%);
	background: -ms-linear-gradient(left, #7474bb 0%, #aaaaf8 100%);
	background: -o-linear-gradient(left, #7474bb 0%, #aaaaf8 100%);
	background: linear-gradient(to left, #7474bb 0%, #aaaaf8 100%);
}

.ribbonb.round.mov .hh::after,
.ribbon.round.mov h3::after {
	background: #aaaaf8;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#aaaaf8), to(#7474bb));
	background: -webkit-linear-gradient(right, #aaaaf8 0%, #7474bb 100%);
	background: -moz-linear-gradient(right, #7474bb 0%, #aaaaf8 100%);
	background: -ms-linear-gradient(right, #7474bb 0%, #aaaaf8 100%);
	background: -o-linear-gradient(right, #7474bb 0%, #aaaaf8 100%);
	background: linear-gradient(to right, #7474bb 0%, #aaaaf8 100%);
}

/* Dark Orange */
.ribbon.orange h3, .ribbonb.orange .hh {
	color: #fff;
	text-shadow: 0 1px 1px #885b15;
	border-top: 1px solid hsl(46, 97%, 53%);
	border-bottom: 1px solid hsl(46, 71%, 48%);
	background: #FCAC33;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#FCAC33), to(#DD9831));
	background: -webkit-linear-gradient(top, #FCAC33 0%, #DD9831 100%);
	background: -moz-linear-gradient(top, #DD9831 0%, #FCAC33 100%);
	background: -ms-linear-gradient(top, #DD9831 0%, #FCAC33 100%);
	background: -o-linear-gradient(top, #DD9831 0%, #FCAC33 100%);
	background: linear-gradient(to top, #DD9831 0%, #FCAC33 100%);
	
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
}

.ribbonb.orange .hh::before,
.ribbonb.orange .hh::after,
.ribbon.orange h3::before,
.ribbon.orange h3::after {
	border-color: #dd9d38 transparent transparent transparent;
}

.ribbonb.round.orange .hh::before,
.ribbon.round.orange h3::before {
	background: #f8aa33;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f8aa33), to(#bb7406));
	background: -webkit-linear-gradient(left, #f8aa33 0%, #bb7406 100%);
	background: -moz-linear-gradient(left, #bb7406 0%, #f8aa33 100%);
	background: -ms-linear-gradient(left, #bb7406 0%, #f8aa33 100%);
	background: -o-linear-gradient(left, #bb7406 0%, #f8aa33 100%);
	background: linear-gradient(to left, #bb7406 0%, #f8aa33 100%);
}

.ribbonb.round.orange .hh::after,
.ribbon.round.orange h3::after {
	background: #f8aa33;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f8aa33), to(#bb7406));
	background: -webkit-linear-gradient(right, #f8aa33 0%, #bb7406 100%);
	background: -moz-linear-gradient(right, #bb7406 0%, #f8aa33 100%);
	background: -ms-linear-gradient(right, #bb7406 0%, #f8aa33 100%);
	background: -o-linear-gradient(right, #bb7406 0%, #f8aa33 100%);
	background: linear-gradient(to right, #bb7406 0%, #f8aa33 100%);
}

/* Red */
.ribbon.red h3, .ribbonb.red .hh {
	color: #fff;
	text-shadow: 0 1px 1px #881b15;
	border-top: 1px solid hsl(0, 97%, 53%);
	border-bottom: 1px solid hsl(0, 71%, 48%);
	background: #FC5C33;
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#FC337C), to(#DD3168));
	background: -webkit-linear-gradient(top, #FC337C 0%, #DD3168 100%);
	background: -moz-linear-gradient(top, #DD3168 0%, #FC337C 100%);
	background: -ms-linear-gradient(top, #DD3168 0%, #FC337C 100%);
	background: -o-linear-gradient(top, #DD3168 0%, #FC337C 100%);
	background: linear-gradient(to top, #DD3168 0%, #FC337C 100%);
	
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
}

.ribbonb.red .hh::before,
.ribbonb.red .hh::after,
.ribbon.red h3::before,
.ribbon.red h3::after {
	border-color: #dd4d38 transparent transparent transparent;
}

.ribbonb.round.red .hh::before,
.ribbon.round.red h3::before {
	background: #f85a33;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f85a33), to(#bb2406));
	background: -webkit-linear-gradient(left, #f85a33 0%, #bb2406 100%);
	background: -moz-linear-gradient(left, #bb2406 0%, #f85a33 100%);
	background: -ms-linear-gradient(left, #bb2406 0%, #f85a33 100%);
	background: -o-linear-gradient(left, #bb2406 0%, #f85a33 100%);
	background: linear-gradient(to left, #bb2406 0%, #f85a33 100%);
}

.ribbonb.round.red .hh::after,
.ribbon.round.red h3::after {
	background: #f85a33;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f85a33), to(#bb2406));
	background: -webkit-linear-gradient(right, #f85a33 0%, #bb2406 100%);
	background: -moz-linear-gradient(right, #bb2406 0%, #f85a33 100%);
	background: -ms-linear-gradient(right, #bb2406 0%, #f85a33 100%);
	background: -o-linear-gradient(right, #bb2406 0%, #f85a33 100%);
	background: linear-gradient(to right, #bb2406 0%, #f85a33 100%);
	
}

/* Green */
.ribbon.green h3, .ribbonb.green .hh {
	color: #fff;
	text-shadow: 0 1px 1px #154815;
	border-top: 1px solid hsl(100, 77%, 53%);
	border-bottom: 1px solid hsl(100, 51%, 48%);
	background: #5CEC33;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#5CEC33), to(#48CD31));
	background: -webkit-linear-gradient(top, #5CEC33 0%, #48CD31 100%);
	background: -moz-linear-gradient(top, #48CD31 0%, #5CEC33 100%);
	background: -ms-linear-gradient(top, #48CD31 0%, #5CEC33 100%);
	background: -o-linear-gradient(top, #48CD31 0%, #5CEC33 100%);
	background: linear-gradient(to top, #48CD31 0%, #5CEC33 100%);
	
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
}

.ribbonb.green .hh::before,
.ribbonb.green .hh::after,
.ribbon.green h3::before,
.ribbon.green h3::after {
	border-color: #9ddd38 transparent transparent transparent;
}

.ribbonb.round.green .hh::before,
.ribbon.round.green h3::before {
	background: #5ae833;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#5ae833), to(#24ab06));
	background: -webkit-linear-gradient(left, #5ae833 0%, #24ab06 100%);
	background: -moz-linear-gradient(left, #24ab06 0%, #5ae833 100%);
	background: -ms-linear-gradient(left, #24ab06 0%, #5ae833 100%);
	background: -o-linear-gradient(left, #24ab06 0%, #5ae833 100%);
	background: linear-gradient(to left, #24ab06 0%, #5ae833 100%);
}

.ribbonb.round.green .hh::after,
.ribbon.round.green h3::after {
	background: #5ae833;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#5ae833), to(#24ab06));
	background: -webkit-linear-gradient(right, #5ae833 0%, #24ab06 100%);
	background: -moz-linear-gradient(right, #24ab06 0%, #5ae833 100%);
	background: -ms-linear-gradient(right, #24ab06 0%, #5ae833 100%);
	background: -o-linear-gradient(right, #24ab06 0%, #5ae833 100%);
	background: linear-gradient(to right, #24ab06 0%, #5ae833 100%);
	
}

/* Magenta */
.ribbon.magenta h3, .ribbonb.magenta .hh {
	color: #fff;
	text-shadow: 0 1px 1px #88155b;
	border-top: 1px solid hsl(320, 97%, 53%);
	border-bottom: 1px solid hsl(320, 71%, 48%);
	background: #FC338C;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#FC338C), to(#DD3178));
	background: -webkit-linear-gradient(top, #FC338C 0%, #DD3178 100%);
	background: -moz-linear-gradient(top, #DD3178 0%, #FC338C 100%);
	background: -ms-linear-gradient(top, #DD3178 0%, #FC338C 100%);
	background: -o-linear-gradient(top, #DD3178 0%, #FC338C 100%);
	background: linear-gradient(to top, #DD3178 0%, #FC338C 100%);
	
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
}
.ribbonb.magenta .hh::before,
.ribbonb.magenta .hh::after,
.ribbon.magenta h3::before,
.ribbon.magenta h3::after {
	border-color: #dd389d transparent transparent transparent;
}

.ribbonb.round.magenta .hh::before,
.ribbon.round.magenta h3::before {
	background: #33aaf8;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f833aa), to(#bb0674));
	background: -webkit-linear-gradient(left, #f833aa 0%, #bb0674 100%);
	background: -moz-linear-gradient(left, #bb0674 0%, #f833aa 100%);
	background: -ms-linear-gradient(left, #bb0674 0%, #f833aa 100%);
	background: -o-linear-gradient(left, #bb0674 0%, #f833aa 100%);
	background: linear-gradient(to left, #bb0674 0%, #f833aa 100%);
}

.ribbonb.round.magenta .hh::after,
.ribbon.round.magenta h3::after {
	background: #33aaf8;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f833aa), to(#bb0674));
	background: -webkit-linear-gradient(right, #f833aa 0%, #bb0674 100%);
	background: -moz-linear-gradient(right, #bb0674 0%, #f833aa 100%);
	background: -ms-linear-gradient(right, #bb0674 0%, #f833aa 100%);
	background: -o-linear-gradient(right, #bb0674 0%, #f833aa 100%);
	background: linear-gradient(to right, #bb0674 0%, #f833aa 100%);
}





.ribbon.teal h3, .ribbonb.teal .hh {
	color: #fff;
	text-shadow: 0 1px 1px #3c432c;
	border-top: 1px solid #398aa0;
	border-bottom: 1px solid #4a7776;
	background: #5A94A0;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#5A94A0), to(#588081));
	background: -webkit-linear-gradient(top, #5A94A0 0%, #588081 100%);
	background: -moz-linear-gradient(top, #588081 0%, #5A94A0 100%);
	background: -ms-linear-gradient(top, #588081 0%, #5A94A0 100%);
	background: -o-linear-gradient(top, #588081 0%, #5A94A0 100%);
	background: linear-gradient(to top, #588081 0%, #5A94A0 100%);
	
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.3);
}
.ribbonb.teal .hh::before,
.ribbonb.teal .hh::after,
.ribbon.teal h3::before,
.ribbon.teal h3::after {
	border-color: #5f8581 transparent transparent transparent;
}

.ribbonb.round.teal .hh::before,
.ribbon.round.teal h3::before {
	background: #5a929c;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#5a929c), to(#2d5c5f));
	background: -webkit-linear-gradient(left, #5a929c 0%, #2d5c5f 100%);
	background: -moz-linear-gradient(left, #2d5c5f 0%, #5a929c 100%);
	background: -ms-linear-gradient(left, #2d5c5f 0%, #5a929c 100%);
	background: -o-linear-gradient(left, #2d5c5f 0%, #5a929c 100%);
	background: linear-gradient(to left, #2d5c5f 0%, #5a929c 100%);
}

.ribbonb.round.teal .hh::after,
.ribbon.round.teal h3::after {
	background: #5a929c;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#5a929c), to(#2d5c5f));
	background: -webkit-linear-gradient(right, #5a929c 0%, #2d5c5f 100%);
	background: -moz-linear-gradient(right, #2d5c5f 0%, #5a929c 100%);
	background: -ms-linear-gradient(right, #2d5c5f 0%, #5a929c 100%);
	background: -o-linear-gradient(right, #2d5c5f 0%, #5a929c 100%);
	background: linear-gradient(to right, #2d5c5f 0%, #5a929c 100%);
}