/*
Elegant Menu
By: marcoarib
2013/01/30
e-mail: marco.arib@gmail.com
*/

@import url(http://fonts.googleapis.com/css?family=Muli);
@import "font-awesome.css";

.elegant-menu {
	display:inline-block;
	padding: 0;
	margin: 0;
	-webkit-box-shadow: 0 1px 4px #454545;
	-moz-box-shadow: 0 1px 4px #454545;
	box-shadow: 0 1px 4px #454545;
	
	background: #eeeeee;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
	background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
	background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
	background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
	background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
}
.elegant-menu ul {
	position:absolute; 
	display:none;
}
.elegant-menu  li {
	position:relative; 
	float:left;
}
.elegant-menu >  li {
	border-right: solid 1px #dedede;
}
.elegant-menu a {
	text-decoration:none;
}
.elegant-menu li:hover ul,
.elegant-menu li.sfHover ul {
	z-index:99;
}
ul.elegant-menu li:hover li ul,
ul.elegant-menu li.sfHover li ul {
	display:none;
}
ul.elegant-menu li li:hover ul,
ul.elegant-menu li li.sfHover ul { 
	top:0;
}
ul.elegant-menu>li { 
	text-align:center; 
	display:inline-block; 
}
ul.elegant-menu>li:hover{ 
	background: #f0f0f0;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZjBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMWQxZDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #f0f0f0 0%, #d1d1d1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#d1d1d1));
	background: -webkit-linear-gradient(top, #f0f0f0 0%,#d1d1d1 100%);
	background: -o-linear-gradient(top, #f0f0f0 0%,#d1d1d1 100%);
	background: -ms-linear-gradient(top, #f0f0f0 0%,#d1d1d1 100%);
	background: linear-gradient(to bottom, #f0f0f0 0%,#d1d1d1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#d1d1d1',GradientType=0 );
}
ul.elegant-menu>li:first-child {
	margin-left:0;
}
ul.elegant-menu>li>a {
	font-family: 'Muli', Arial; 
	font-size:15px; 
/*	font-weight:bold; */
	line-height:15px; 
	color:#666; 
	text-transform:uppercase; 
	display:block; 
	position:relative; 
	padding:20px 15px 20px 15px;
}
ul.elegant-menu>li>a em {
	display:block; 
	height:4px; 
	top:0; 
	width:0; 
	position:absolute; 
	left: 0;
	background:#888888;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
ul.elegant-menu>li.current>a em,
ul.elegant-menu>li:hover>a em,
ul.elegant-menu>li.sfHover>a em {
	display:block; 
	height:4px;
	top:0; 
	width:100% !important;  
	position:absolute; 
	right:0 !important; 
	background:#888888;
}
ul.elegant-menu>li.current,
ul.elegant-menu>li.sfHover,
ul.elegant-menu>li:hover {
	
}
ul.elegant-menu>li.current>a,
ul.elegant-menu>li.sfHover>a,
ul.elegant-menu>li>a:hover {
	
}
.elegant-menu>li>ul { 
	width:220px; 
	background:#2a2a2a; 
	left:-1px; 
	top:56px; 
	padding: 0;
	
	background: #d6d6d6;
	background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
	background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
	background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
	background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
	background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
	
	-webkit-box-shadow: 0 1px 3px #454545;
	-moz-box-shadow: 0 1px 3px #454545;
	box-shadow: 0 1px 3px #454545;
}
.elegant-menu>li>ul>li {
	display:block; 
	width:220px; 
	text-align:left;
}
.elegant-menu>li>ul>li>a { 
	font-family: 'Muli', Arial; 
	color:#333; 
	font-size:13px; 
	line-height:17px; 
	display:block; 
	padding: 10px 10px 13px 18px; 
}
.elegant-menu>li>ul>li:hover,
ul.elegant-menu>li>ul>li.sfHover{
	background:#888888;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.elegant-menu>li>ul>li>a:hover,
ul.elegant-menu>li>ul>li.sfHover a {
	color: #fff;
}
.elegant-menu>li li>ul { 
	width:220px; 
	left:220px !important; 
	top:0 !important; 
	padding:0;
	
	background: #d6d6d6;
	background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
	background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
	background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
	background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
	background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
	
	-webkit-box-shadow: 0 1px 3px #454545;
	-moz-box-shadow: 0 1px 3px #454545;
	box-shadow: 0 1px 3px #454545;
}
.elegant-menu>li li>ul>li {
	display:block;  
	width:220px; 
	text-align:left;
}
.elegant-menu>li li>ul>li>a { 
	font-family: Segoe UI, sans-serif; 
	color:#333 !important; 
	font-size:13px; 
	line-height:17px; 
	display:block; 
	padding: 10px 10px 13px 18px; 
}
.elegant-menu>li li>ul>li:hover,
ul.elegant-menu>li li>ul>li.sfHover{
	background: #888888;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.elegant-menu>li li>ul>li>a:hover, 
ul.elegant-menu>li li>ul>li.sfHover a {
	color: #fff !important;
}

/****** full width menu ******/
.full-width{
	width: 100%;
}

/****** icon ******/
.elegant-menu i{
	line-height: 12px !important;
	margin-right: 4px;
	font-size: 20px;
	float: left;
}

/****** form search ******/
.search{
	float: right;
	margin-top: 14px;
	margin-left: 20px;
}
.search input[type="text"]{
	float: left;
	height: 26px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 50px;
	border: none;
	outline: 0;
	background: #eeeeee;
	box-shadow: inset 1px 1px 3px #777777;
}
.search button{
	float: right;
	height: 25px;
	width: 30px;
	margin-right: 5px;
	border: none;
	cursor: pointer;
	font-family: 'FontAwesome';
	color:#333;
	background: transparent;
}
.search button:before{
	content: "\f002";
}

/****** arrows ******/
.sf-arrows .sf-with-ul {
	padding-right: 30px;
}
.sf-arrows .sf-with-ul:after {
	content: '+';
	position: absolute;
	margin-left: 5px;
	height: 0;
	width: 0;
}


/****** styles ******/

/* black */
.black > li > a em,
.black>li.current>a em,
.black>li:hover>a em,
.black>li.sfHover>a em,
.black>li>ul>li:hover,
.black>li>ul>li.sfHover,
.black>li li>ul>li:hover,
.black>li li>ul>li.sfHover{
	background:#000000 !important;
}
.black>li.current>a{
	color:#000000 !important;
}
.black>li:hover>a{
	color:#000000 !important;
}
.black button:hover{
	color:#000000 !important;
}

/* blue */
.blue > li > a em,
.blue>li.current>a em,
.blue>li:hover>a em,
.blue>li.sfHover>a em,
.blue>li>ul>li:hover,
.blue>li>ul>li.sfHover,
.blue>li li>ul>li:hover,
.blue>li li>ul>li.sfHover{
	background:#1a96af !important;
}
.blue>li.current>a{
	color:#1a96af !important;
}
.blue>li:hover>a{
	color:#1a96af !important;
}
.blue button:hover{
	color:#1a96af !important;
}

/* green */
.green > li > a em,
.green>li.current>a em,
.green>li:hover>a em,
.green>li.sfHover>a em,
.green>li>ul>li:hover,
.green>li>ul>li.sfHover,
.green>li li>ul>li:hover,
.green>li li>ul>li.sfHover{
	background:#679932 !important;
}
.green>li.current>a{
	color:#679932 !important;
}
.green>li:hover>a{
	color:#679932 !important;
}
.green button:hover{
	color:#679932 !important;
}

/* orange */
.orange > li > a em,
.orange>li.current>a em,
.orange>li:hover>a em,
.orange>li.sfHover>a em,
.orange>li>ul>li:hover,
.orange>li>ul>li.sfHover,
.orange>li li>ul>li:hover,
.orange>li li>ul>li.sfHover{
	background:#FA6900 !important;
}
.orange>li.current>a{
	color:#FA6900 !important;
}
.orange>li:hover>a{
	color:#FA6900 !important;
}
.orange button:hover{
	color:#FA6900 !important;
}

/* red */
.red > li > a em,
.red>li.current>a em,
.red>li:hover>a em,
.red>li.sfHover>a em,
.red>li>ul>li:hover,
.red>li>ul>li.sfHover,
.red>li li>ul>li:hover,
.red>li li>ul>li.sfHover{
	background:#FA2A00 !important;
}
.red>li.current>a{
	color:#FA2A00 !important;
}
.red>li:hover>a{
	color:#FA2A00 !important;
}
.red button:hover{
	color:#FA2A00 !important;
}

/* purple */
.purple > li > a em,
.purple>li.current>a em,
.purple>li:hover>a em,
.purple>li.sfHover>a em,
.purple>li>ul>li:hover,
.purple>li>ul>li.sfHover,
.purple>li li>ul>li:hover,
.purple>li li>ul>li.sfHover{
	background:#742365 !important;
}
.purple>li.current>a{
	color:#742365 !important;
}
.purple>li:hover>a{
	color:#742365 !important;
}
.purple button:hover{
	color:#742365 !important;
}

/* brown */
.brown > li > a em,
.brown>li.current>a em,
.brown>li:hover>a em,
.brown>li.sfHover>a em,
.brown>li>ul>li:hover,
.brown>li>ul>li.sfHover,
.brown>li li>ul>li:hover,
.brown>li li>ul>li.sfHover{
	background:#61290E !important;
}
.brown>li.current>a{
	color:#61290E !important;
}
.brown>li:hover>a{
	color:#61290E !important;
}
.brown button:hover{
	color:#61290E !important;
}

/* gold */
.gold > li > a em,
.gold>li.current>a em,
.gold>li:hover>a em,
.gold>li.sfHover>a em,
.gold>li>ul>li:hover,
.gold>li>ul>li.sfHover,
.gold>li li>ul>li:hover,
.gold>li li>ul>li.sfHover{
	background:#F7A21B !important;
}
.gold>li.current>a{
	color:#F7A21B !important;
}
.gold>li:hover>a{
	color:#F7A21B !important;
}
.gold button:hover{
	color:#F7A21B !important;
}

/* pink */
.pink > li > a em,
.pink>li.current>a em,
.pink>li:hover>a em,
.pink>li.sfHover>a em,
.pink>li>ul>li:hover,
.pink>li>ul>li.sfHover,
.pink>li li>ul>li:hover,
.pink>li li>ul>li.sfHover{
	background:#FE4365 !important;
}
.pink>li.current>a{
	color:#FE4365 !important;
}
.pink>li:hover>a{
	color:#FE4365 !important;
}
.pink button:hover{
	color:#FE4365 !important;
}