/* Menu box
===================*/
/* first level ul, main nav */
.sm-clean { background: #333033; font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 13px; }
/* second level ul, dropdown */
.sm-clean ul { background: #333033; box-shadow: 0 5px 9px rgba(0,0,0,0.2); }


/* Menu items
===================*/
li.about { width: 18.85%; }
li.participants { width: 20.95%; }
li.collaboration { width: 26.75%; }
li.news { width: 19.09%; }
li.contact { width: 14.33%; }

/* current page highlight */
body.about .about > a, body.participants .participants > a, body.collaboration .collaboration > a, body.news .news > a, body.contact .contact  > a{ border-top-color: #fff; }

.sm-clean a { padding: 0 1em .8em; color: #fff; text-decoration: none; white-space: normal!important; }
.sm-clean > li > a { text-transform: uppercase; text-align: center; border-left: 1px solid #776564; border-top: 3px solid #333033; padding-top: .8em; }
	.sm-clean li.about > a { border-left: 1px solid #333033; }
.sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted { color: #d8ac54; }
.sm-clean > li > a.has-submenu { padding-right: 1.2em; padding-left: 0; }

.sm-clean > li > ul { width: 100%!important; max-width: none!important; } /* overwriting the inline width styling added by the script for the dropdown */
.sm-clean ul a { padding: 10px 20px; }
.sm-clean ul a.has-submenu { padding-right: 40px; }
.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { color: #d8ac54; background: #454445; }


/* Sub menu indicators
===================*/
.sm-clean a span.sub-arrow { position: absolute; right: 12px; top: 50%; margin-top: -3px; width: 0; height: 0; overflow: hidden; border-style: solid dashed dashed dashed; border-color: #fff transparent transparent transparent; border-width: 4px; /* tweak size of the arrow */ }
.sm-clean ul a span.sub-arrow { right: 15px; top: 50%; margin-top: -5px; border-width: 5px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #fff; }


/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
===================*/
/* width and position will be automatically set by the script */
.sm-clean span.scroll-up, .sm-clean span.scroll-down { position: absolute; display: none; visibility: hidden; overflow: hidden; background: #fff; height: 20px; }
.sm-clean span.scroll-up:hover, .sm-clean span.scroll-down:hover { background: #eee; }
.sm-clean span.scroll-up-arrow, .sm-clean span.scroll-down-arrow { position: absolute; top: 0; left: 50%; margin-left: -6px; width: 0; height: 0; overflow: hidden; border-style: dashed dashed solid dashed; border-color: transparent transparent #555 transparent; border-width: 6px; /* tweak size of the arrow */ }
.sm-clean span.scroll-up:hover span.scroll-up-arrow { border-color: transparent transparent #D23600 transparent; }
.sm-clean span.scroll-down-arrow { top: 8px; border-style: solid dashed dashed dashed; border-color: #555 transparent transparent transparent; }
.sm-clean span.scroll-down:hover span.scroll-down-arrow { border-color: #D23600 transparent transparent transparent; }

/* Toggle Controls
==================*/
.toggles { display: none; }

@media screen and (max-width: 890px) {
	.sm-clean a { padding: 0 1.2em .8em; }
	.sm-clean > li > a.has-submenu { padding-right: 2em; padding-left: .8em; }
}

@media screen and (max-width: 768px) {	
	ul.sm-clean ul { display: none; position: static!important; top: auto!important; left: auto!important; margin-left: 0!important; margin-top: 0!important; width: auto!important; min-width: 0!important; max-width: none!important; }
	ul.sm-clean > li { float: none; }
	ul.sm-clean > li > a, ul.sm-clean ul.sm-nowrap > li > a { white-space: normal; }	
	
	/* Menu box
	===================*/
	.sm-clean { padding: 0; }
	.sm-clean ul { border: 0; padding: 0; background:rgba(130,130,130,0.1); /* darken the background of the sub menus */ border-radius: 0; box-shadow: none; }
	
	/* Menu items
	===================*/
	li.about, li.participants, li.collaboration, li.news, li.contact { width: 100%; }
	.sm-clean > li > a { text-align: left; border: none; }
	.sm-clean a { padding: 13px 5px 13px 50px !important; }
	
	/* add some text indentation for the 2+ level sub menu items */
	.sm-clean ul a { border-left: 23px solid transparent; }
	.sm-clean ul ul a { border-left: 46px solid transparent; }
	.sm-clean ul ul ul a { border-left: 69px solid transparent; }
	.sm-clean ul ul ul ul a { border-left: 92px solid transparent; }
	.sm-clean ul ul ul ul ul a { border-left: 115px solid transparent; }
	
	/* Sub menu indicators
	===================*/
	.sm-clean a span.sub-arrow, .sm-clean ul a span.sub-arrow { top: 50%; margin-top: -11px; right: auto; left: 18px; margin-left: 0; width: 22px; height: 22px; font:bold 22px/22px monospace !important; text-align: center; border: 0; text-shadow: none; background: #ddd; color: #333033; border-radius: 50px; }
	/*.sm-clean a.highlighted span.sub-arrow { display:none !important; } /* Hide sub indicator when item is expanded - we enable the item link when it's expanded */
	
	/* Items separators
	===================*/
	.sm-clean li { border-top: 1px solid #2c292c; }
	.sm-clean > li:first-child { border-top: 0; }
}