/*** ESSENTIAL STYLES ***/

.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none;}

/*** DEMO SKIN ***/

.sf-menu ul {position: absolute;	display: none; top: 100%; left: 0px; z-index: 99; box-shadow: 0 0 10px 1px rgba(71, 85, 95, 0.08);
	min-width: 180px; /* allow long menu items to determine submenu width */	
	*width: 200px; /* no auto sub width for IE7, see white-space comment below */}
.sf-menu li {text-align:left; position: relative; background: transparent; white-space: nowrap; /* no need for Supersubs plugin */ 
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */	transition: all .1s; margin:0px 8px;}
.sf-menu li a {display: block; position: relative; color: #333; padding: 12px; line-height:2.5; font-size:.9rem; font-weight:500; 
	text-decoration: none; letter-spacing:1px; zoom: 1; /* IE7 */ }
.sf-menu ul ul {top: 0; left: 100%; z-index:99; }

/* 1. li - alt çizgi efekti */
.sf-menu li a:before {content: ""; position: absolute; background-color: #333; bottom: 0px;	
	left: 0px;	width: 0%; height: 3px; transition: all 0.1s ease;}
.sf-menu li:hover a:before {width: 100%;}
.sf-menu li li a:before {display:none;}				
			
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; }
.sf-menu > li { float: left; }

/* 
:hover -> imleç üstündeyeken
.sfHover -> imleç o li'nin alt lilerinde iken
*/

/* 1. li */
.sf-menu li:hover { /*background: #fff;*/ transition: none; } 
.sf-menu li.sfHover { /*background: #fff;*/ transition: none; } 
/* 2. li */
.sf-menu li li a {font-size: .8rem; line-height:2; padding: 8px; color: #333; }
.sf-menu li li { background: #eee; border:none; margin-right:0; margin-left:0;}
.sf-menu li li:hover, .sf-menu li li.sfHover { background: #ddd;}
/* 3. li */
.sf-menu li li li { background: #ddd;}
.sf-menu li li li:hover, .sf-menu li li li.sfHover { background: #eee;}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul { position: relative; padding-right: 24px; *padding-right: 10px; /* no CSS arrows for IE7 (lack pseudo-elements) */ }
/* bottom arrow - 1. li */
.sf-arrows .sf-with-ul:after { 	
	content: '\e912'; font-family: 'icomoon'; font-size: 1.2rem; position: absolute; top: 50%; right: 0; 
	transform: translateY(-50%); color: #333;}
.sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after {
	color: #333;}
/* right arrow - 2. li */
.sf-arrows ul .sf-with-ul:after {content: '\e911'; color: #333;}
.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 {
	color: #333;}