/*******************************************************************************************************************************************
 *******************************************************************************************************************************************

########  #### ########  ########   #######  ##    ## 
##     ##  ##  ##     ## ##     ## ##     ## ###   ## 
##     ##  ##  ##     ## ##     ## ##     ## ####  ## 
########   ##  ########  ########  ##     ## ## ## ## 
##   ##    ##  ##     ## ##     ## ##     ## ##  #### 
##    ##   ##  ##     ## ##     ## ##     ## ##   ### 
##     ## #### ########  ########   #######  ##    ## 

*******************************************************************************************************************************************
**************************** see http://www.dev.equideow.com/doc/bow for more details *****************************************************
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

.ribbon{
	border-radius: 0 0 2px 2px;
	box-shadow: 0 2px 5px rgba(0,0,0,.1);
	cursor: default;
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	height: 24px;
	line-height: 24px;
	padding: 0 10px;
	position: relative;
	text-transform: uppercase;
	top: -8px;
}
.ribbon::after,
.ribbon::before{
	border-style: solid;
	content:"";
	display: block;
	position: absolute;
	top: 0;
}
.ribbon::after{
	border-width: 8px 0 0 8px;
	right: -8px;
}
.ribbon::before{
	border-width: 0 0 8px 8px;
	left: -8px;
}
.ribbon .svg{
	position: relative;
	top: 2px;
}
.body--ltr .ribbon .svg{
	margin-right: 3px;
}
.body--rtl .ribbon .svg{
	margin-left: 3px;
}

/* PRIMARY ********************************************************************************************************************************
 ******************************************************************************************************************************************/

.ribbon--primary{
	background: #AD5B50;
}
.ribbon--primary::after{
	border-color: transparent transparent transparent #8A4840;
}
.ribbon--primary::before{
	border-color: transparent transparent #8A4840 transparent;
}

/* SECONDARY ********************************************************************************************************************************
 ******************************************************************************************************************************************/

.ribbon--secondary{
	background: #37659A;
}
.ribbon--secondary::after{
	border-color: transparent transparent transparent #2C507B;
}
.ribbon--secondary::before{
	border-color: transparent transparent #2C507B transparent;
}

/* WARNING ********************************************************************************************************************************
 ******************************************************************************************************************************************/

.ribbon--warning{
	background: #EEC213;
}
.ribbon--warning::after{
	border-color: transparent transparent transparent #BE9B0F;
}
.ribbon--warning::before{
	border-color: transparent transparent #BE9B0F transparent;
}