/* DropDown + Sub Menu - Design */

/* ==================== | Main Menu Style | ==================== */
/* == Menu container == */
#menu {
width: 100%; /* width of navi parent element -> 750px */
height: 100%; /* width of navi parent element -> 45px */
position: relative; /* not required */
font-family: sans-serif;/* prevents menu from "bouncing" when roboto is set as main font */
}

/* == Menu main elements container == */
#menu ul {
width: 100%;
height: 100%;
margin: 0; /* kill ul's space */
padding: 0; /* kill ul's space */
cursor:default;
}

/* == Main + DropDown + Sub elements == */
#menu ul li {
line-height:45px; /* center text */
font-family:CS_Font;
font-size:19px;
width:140px;
height:43px;/* + (2x 1px border (top and bottom)) => 45px */
display: inline-block; /* horizontal */
position:relative; /* for main menu elems */
margin: 0 10px; /* space between main menu elems */
background-color:rgb(17,17,17);
border:1px solid #070707;
border-radius:2px;
transition:all 0.2s;
}


/* ==================== | Menu Text Style | ==================== */
/* Main menu elem links */
#menu ul li a {
display:block;
text-decoration:none;
}
/* Not linked -> normal cursor */
#menu ul li span {
cursor:default;
color: #fff;
}


/* FontSize Fix (applied to main menu elems (span)) */
.menu_main_elem {
font-size:22px; /* FontSize Fix => 19px (bkp 18px) */
}


/* ==================== | DropDown Style | ==================== */
/* == Drop Down Container == */
#menu ul ul {
position:absolute; top:100%; left:0; /* orientated to parent with 100% height = space (under main menu elem) */
width:140px;
height: 0;
}

/* == DropDown elements (collapsed state) == */
#menu ul ul li {
display:block;
height:0;
opacity:0;
margin: 0;
border:none;
border-radius:2px;
box-shadow: 0 0 2px #000, 3px 5px 10px #000;
transition:all 0.2s;
}

/* -= Part of FrosT's CSS Hack =-
Added a class that applies overflow:hidden;
to all dropdowns which DON'T have a submenu!
-> If they have, just add the main part of the hack */
.menu_dd_non_sub ul li {
overflow:hidden;
}


/* Menu item hover effect (for all menu parts) */
#menu ul li:hover {
    background-color:rgb(30,30,30) !important;
    /*background-color: red !important;*//*DEV*/
}
/* Dropdown hover effect (does not affect submenu) */
/* Note:
Check the css hack below.
I'm using another hover effect for projects dropdown.
*/
#menu ul li:hover ul li {
height:43px;/* + (2x 1px border (top and bottom)) => 45px */
opacity:1;
}


/* -= FrosT's CSS Hack =- */
/* Fixes the problem with the hitbox of the text
which is not hidden because we removed overflow
=> span -tag => display:none;
=> special :hover => display:block; for text only!
=> (For non-sub menus, check above)
-- 09.02.2015 @ 20:30 -- */
.menu_sub_elem span {
display:none;
}
#menu ul li:hover .menu_sub_elem span {
display:block;
}
/* -= FrosT's CSS Trick End =- */

/* Dropdown items hover effect */
#menu ul ul li:hover {
padding-left:7px;
}


/* ==================== | SubMenu Style | ==================== */
/* === Sub menu === */
.menu_sub_elem {

}
/* Sub menu elements container */
/* Note:
Enable bg color (dev) to see that this container
overlaps the li-elements.
I added z-index to move it behind them.
*/
.menu_sub_elem ul {
width:140px;
position:absolute !important;
left:0 !important;
top:1px !important;
height:100% !important; /* Fixes a bug (at menu bottom) */
/*background-color:yellow;*/ /*DEV*/
z-index: -1;/*moves ul behind the submenu-trigger-elements*/
}

/* Sub menu elements */
.menu_sub_elem ul li {
position:relative; left:147px; /* +7px to create a nice space (it's also 7px padding text hover effect) */
width:0 !important;/* we push this to 140px (sub menu is horizontal, not vertical like dropdown) */
opacity:0 !important;
overflow:hidden;
transition:all 0.2s !important;
}

/* Sub menu elements hover effect */
.menu_sub_elem:hover ul li {
width:125px !important;
opacity:1 !important;
}


/* ==================== | Menu Slider Style | ==================== */
/* Menu Slider (indicator) controlled by script.js */
#menu_slider {
width:140px;
height:1px;
background:linear-gradient(to right, rgba(255,50,50,0.1) 0%, rgba(200,0,0,0.8) 50%, rgba(255,50,50,0.1) 100%);
position:absolute; left:0; top:-1px;
display: none;
transition:left 0.3s;
}


/* ==================== | Menu Spacer | ==================== */
/* known little bug here. [15.09.2015]
Spacer appears as hitbox.
But is only used in DevTools
-> Set Height to 0 could work */
.menu_spacer, .menu_spacer:hover {
height:5px !important;
width:140px !important;
padding:0px !important;
background-color:rgb(17,17,17) !important;
}

/* TODO: Fix spacer */