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

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

*******************************************************************************************************************************************
**************************** 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;
}

/** MODIFIER : INFO ***********************************************************************************************************************
 ******************************************************************************************************************************************/

.ribbon--info {
	background: #37659A;
}

.ribbon--info::after {
	border-color: transparent transparent transparent #2C507B;
}

.ribbon--info::before {
	border-color: transparent transparent #2C507B transparent;
}

/** MODIFIER :  INFOSECONDARY *************************************************************************************************************
 ******************************************************************************************************************************************/

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

/** MODIFIER :  IMPORTANT *****************************************************************************************************************
 ******************************************************************************************************************************************/

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

/* SUCCESS ********************************************************************************************************************************
 ******************************************************************************************************************************************/

.ribbon--success{
	background: #849644;
}
.ribbon--success::after{
	border-color: transparent transparent transparent #5C682F;
}
.ribbon--success::before{
	border-color: transparent transparent #5C682F transparent;
}