/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}


/*** DEMO SKIN ***/

.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 12em; /* allow long menu items to determine submenu width */
	*width: 12em; /* no auto sub width for IE7, see white-space comment below */
	margin-top:3px;
	border-radius: 
}

.sf-menu a {
color: #303030;
 font-family: 'latolight';
    font-size: 18px; 
	text-transform: uppercase;
    font-weight: normal;
    height: 88px;
    line-height:78px;
    padding:0 18px;
    text-align: center;
    text-decoration: none;
   }

.sf-menu li {

background:url(../images/separateur.png) no-repeat left center;

	}
.sf-menu li:first-child{


	}
.sf-menu li:last-child{
}
.sf-menu > li > a:hover , .sf-menu > li.selected > a, .sf-menu > li.active > a, .sf-menu > li.focus > a ,
  .sf-menu > li.sfHover > a{
color:#e80f11;
border-top:5px solid #e80f11;
height: 85px;
line-height:67px;
background:url(../images/a-hover.png) no-repeat bottom center;


  }


.sf-menu ul {
  margin-left: 0px;
    margin-top: 10px;
	 min-height: 35px;
    padding: 8px;
	background:#ffffff;
	border-radius:0;
    width: 248px; }

.sf-menu ul li {border:none!important;  background:none!important; padding: 2px!important;}

.sf-menu ul li a{
    background:none!important;
    border-bottom: 1px dotted #000 !important;
    color: #000 !important;
    font-size: 18px; text-transform: uppercase;
 font-family: 'latolight';
font-weight:normal;
    height: auto !important;
    line-height: 18px;
    padding: 4px;
    text-align: left;

}

.sf-menu ul li a:hover , .sf-menu ul li.selected a, .sf-menu ul li.active a, .sf-menu ul li.focus a ,  
.sf-menu ul li.sfHover a{
	
 border-bottom:1px dotted #ea1f21 !important;
	color:#ea1f21!important; border-radius:0 !important;
}
/*** arrows (for all except IE7) **/

/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	  -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #ea1f21 transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 11px;
    content: "";
    height: 0;
  
    position: absolute;
 right: 38%;
    top: 73%;
    width: 0;

	
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after,
.sf-arrows > .selected > .sf-with-ul:after,
.sf-arrows > .active > .sf-with-ul:after {
	border-top-color: #ea1f21; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	
	border-color: transparent;
	border-left-color: #fff; /* edit this to suit design (no rgba in IE8) */

}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: #fff;
}
/* Effect 13: three circles */