#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a 
{
     margin: 0;
     padding: 0;
     border: 0;
     list-style: none;
     line-height: 1;
     display: block;
     position: relative;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

#cssmenu:after, #cssmenu > ul:after 
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#cssmenu 
{
    top:50px;
    width: auto;
    border-bottom: 3px solid #ffffff;
    font-family: Raleway, sans-serif;
    line-height: 1;
    float:right;
    padding-right:0;
    height:45px;
    position:fixed;
    right:60px;
}

#cssmenu ul 
{
  background: #ffffff;
}

#cssmenu > ul > li 
{
    float: left;
}
#cssmenu.align-center > ul 
{
    font-size: 0;
    text-align: center;
}

#cssmenu.align-center > ul > li 
{
    display: inline-block;
    float: none;
}

#cssmenu.align-right > ul > li 
{
  float: right;
}

#cssmenu.align-right > ul > li > a 
{
    margin-right: 0;
    margin-left: -4px;
}

#cssmenu > ul > li > a 
{
    z-index: 2;
    padding: 18px 25px 12px 25px;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    color: #444444;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    margin-right: -4px;
}

#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover 
{
  color: #ffffff;
}

#cssmenu > ul > li > a:after 
{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 40px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    content: "";
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transform: perspective(5px) rotateX(2deg);
    -webkit-transform-origin: bottom;
    -moz-transform: perspective(5px) rotateX(2deg);
    -moz-transform-origin: bottom;
    transform: perspective(5px) rotateX(2deg);
    transform-origin: bottom;
}

#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after 
{
    background: #1e7cef;
}
#username {
    width: auto; 
    background-color: #ffffff;
    float:initial;
    top:0; 
}

#logout{   
    font-family:Arial, Helvetica, sans-serif; 
    font-size:15px; 
    font-weight:bold;
    color:#0b5fae;
    float:right;
    top:0;
    display:none;
}

#username:hover #logout
{
    display:block;
}

#nav{
    list-style-type:none;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    top:0px;
    float:left; /* Clear floats */
    background-color:transparent;
    /* Bring the nav above everything else--uncomment if needed.*/
    position:relative;
    z-index:9999;
    
}
#nav li{
    margin-top:-5px;
    float:left;
    margin-right:0;
    position:relative;
    display:block;
    padding-left:10px;
}
#nav a{
    margin-top :-5px;
    display:block;
    padding:5px;
    color:#be1f09;
    
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    text-decoration:none;
}

#nav ul{
    /*background:#4e6d93;*/ /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
     /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style-type:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    /*display:none;*/
    padding-left:0;
    background: -webkit-linear-gradient(#ffffff,#0b5fae); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ffffff,#0b5fae); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ffffff,#0b5fae); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ffffff,#0b5fae); /* Standard syntax */
}
#nav ul li{
    padding-top:10px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    margin-left:0;
    
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    color:#be1f09;
    text-decoration:none;
    /*display:block;*/
    

}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    color:#fff;
}

#nav .arrow {
    font-size:11px;
    line-height:-10%;
    
}
#nav ul ul{
    top:0;
    list-style-type:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    /*display:none;*/
    padding-left:0;
    background: -webkit-linear-gradient(#0b5fae,#ffffff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0b5fae,#ffffff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0b5fae,#ffffff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0b5fae,#ffffff); /* Standard syntax */
}#nav ul ul li{
     padding-top:10px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
 }
 #nav li ul li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    margin-left:0;
    
}

 #nav li ul li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#nav li ul li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    color:#fff;
}