/* DropDown + Sub Menu - Design */

#menu {
width:700px;
height:40px;
margin:0 auto;
position:relative;
font-family:sans-serif;/*prevents menu from "bouncing" when roboto is set as main font*/
}
#menu ul {
margin:0 auto;
padding:0;
width:700px;
position:absolute;
cursor:default;
}
#menu ul li {
display:inline-block;
line-height:40px;
background-color:rgb(17,17,17);
width:130px; /*125*/
height:39px;
position:relative;
border-radius:2px;
border:1px solid #000;
transition:0.2s;
font-family:CS_Font;
font-size:18px;
}
#menu ul li a {
display:block;
text-decoration:none;
}
#menu ul li span {
cursor:default;
}
#menu ul ul {
position:absolute; top:40px; left:0;
width:130px; /*125*/
/* overflow:hidden; => hides the whole overflow 'lel' */
}
#menu ul ul li {
display:block;
height:0;
opacity:0;
border:none;
/* overflow:hidden; */
border-radius:2px;
box-shadow:0 0 2px #000, 0 1px 3px #000;
transition:0.2s;
}
.menu_main_elem {
font-size:18px; /* FontSize Fix => 18px */
}
/* -= Part of FrosT's CSS Trick =-
Added a class that applies overflow:hidden;
to all dd (dropdowns) which DON'T have a submenu!
-> If they have, just add the main part of Frost's Trick */
.menu_dd_non_sub ul li {
overflow:hidden;
}
#menu ul li:hover {
background-color:rgb(30,30,30);
}
#menu ul li:hover ul li {
height:39px;
opacity:1;
}
/* -= FrosT's CSS Trick =- */
/* Fixes the problem with the hitbox of the text
which is not hidden because we deleted overflow 
=> span -tag => display:none;
=> special :hover => display:block; for text only!
=> (For non-sub menus, check above)
Problem solved: 09.02.2015 @ 20:30 Uhr! :) */
.menu_sub_elem span {
display:none;
}
#menu ul li:hover .menu_sub_elem span {
display:block;
/* color:red; */
}
/* -= FrosT's CSS Trick End =- */
#menu ul ul li:hover {
padding-left:7px;
background-color:rgb(30,30,30);
}

.menu_sub_elem {

}
.menu_sub_elem ul {
width:135px !important;
position:absolute !important;
left:0px !important;
top:0 !important;
z-index:-1; /* think its not important :O */
/* background-color:red !important; */
height:100% !important; /*Fixes a menu bug (at bottom)*/
}
.menu_sub_elem ul li {
position:relative; left:137px; /*was 133 then 138 => caused a bug in FF & IE, 137 fixed the problem (was less than a fckin pixel man)*/
width:0 !important;
transition:0.3s !important;
overflow:hidden;
opacity:0 !important;
}
.menu_sub_elem:hover ul li {
width:125px !important;
opacity:1 !important;
}


#menu_home {
background-image:url(../img/interface/mainMenu/nav_btn_sprite.png);
background-position:-130px 0;
}
#menu_projects {
margin-left:12px;
background-image:url(../img/interface/mainMenu/nav_btn_sprite.png);
background-position:-130px -39px;
}
#menu_community {
margin-left:12px;
background-image:url(../img/interface/mainMenu/nav_btn_sprite.png);
background-position:0 0;
}
#menu_misc {
margin-left:12px;
background-image:url(../img/interface/mainMenu/nav_btn_sprite.png);
background-position:0 -39px;
}


#menu_slider {
width:136px;
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:60px; top:-1px;
transition:0.3s;
}

/*known little bug here. [15.09.2015]
Spacer appears as hitbox.
But is only used in DevTools, so who cares ._. 
-> Set Height to 0 would work?!*/
.menu_spacer, .menu_spacer:hover {
height:5px !important;
width:130px !important;
padding:0px !important;
background-color:rgb(17,17,17) !important;
}