#ddmenu
{
    display: block;
    /*    font-family:Arial;*/
    text-align: left;
    letter-spacing: normal;
}

#ddmenu li img
{
    margin-left: -10px;
    line-height:none !important;
    max-width: none !important;
    border-radius: 5px;
    border: 1px solid gray;
    margin-bottom: -10px;
}

#ddmenu li img:hover
{
    border: 1px solid #0070FF;
}

img#ddlogo, img#ddlogomin
{
    border: none !important;
    margin-bottom: 0 !important;
}

#ddmenu ul
{
    width: 100%;
    /*  margin:0 auto;*/
    padding:10;
    font-size: 0;
    background: #691819;
    /*    box-shadow:    0px 0px 4px #012;
      border:1px solid transparent;*/
    display: inline-block;
    list-style: none;
    position: relative;
    z-index: 999999990;
    visibility: hidden;
    /* border-radius:4px;*/
    margin-bottom: 10px;
}

#ddmenu li
{
    margin: 0;
    padding: 0;
    font-size: 13px;
    display: inline-block;
    position: relative;
    color: #EEF4FB;
}

#ddmenu a
{
    color: #EEF4FB;
    padding: 0 23px;
    line-height: 50px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    outline: 0;
    position: relative;
    white-space: nowrap;
}

/* 
#ddmenu div.drop div .column a{
       display:inline;
    
}

#ddmenu div.drop div .column a:after
{
    content:"\a";
    white-space: pre;
}*/
/* links without sub-menu */
#ddmenu li.over a
{
    background-color: #0B0D1D;
    color: #FFFFFF;
}

/* links with sub-menu */
#ddmenu a.arrow
{
    background-image: url(/img/icon/Menu/MenuArrow.gif);
    background-repeat: no-repeat;
    background-position: right center;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

#ddmenu li.over a.arrow
{
    background-color: white;
    color: #036;
    border-left: 1px solid #9AB;
    border-right: 1px solid #9AB;
}

#ddmenu li > div
{
    padding: 0;
    margin: 0;
    display: none;
}

/* sub-menu layout
--------------------------------------------*/
#ddmenu div.drop
{
    position: absolute;
    text-align: left;
    border: 1px solid #9AB;
    background: white;
    padding: 20px;
    color: #333333;
    line-height: 30px;
    font-size: 13px;
    font-family: Arial;
    font-weight: 500;
    border-radius: 0 0 6px 6px;
    box-shadow: 1px 6px 9px rgba(0, 0, 0, 0.2);
}

/* sub-menu offset
--------------------------------------------*/
#ddmenu div.drop
{
    left: 0px;
    /*Use this property to change offset of the sub-menu*/
}

#ddmenu div.dropToLeft
{
    left: auto;
    right: 0px;
}

#ddmenu div.dropToLeft2
{
    left: auto;
    right: -100px;
}

/* links in sub menu
----------------------------*/
#ddmenu div.drop a
{
    line-height: 20px;
    font-size: 1em;
    font-family: Arial;
    font-weight: normal;
    color: #504D4C;
    text-decoration: none;
    display: block;
    text-align: left;
    position: static;
    background: none;
    background-image: none;
    padding: 0 0;
    margin-top: 3px;
}

#ddmenu div.drop a:hover
{
    text-decoration: underline;
    color: #0099FF;
}

/* blocks within the sub-menu
----------------------------*/
#ddmenu div.drop div
{
    background: none;
}

#ddmenu div.column
{
    width: 160px;
    float: left;
    /*align each column in one row*/
    padding: 0 10px;
    /*padding of each column*/
}

#ddmenu div.column div
{
    padding: 0px 10px;
    /*sub-div within div.column. 10px for indent.*/
}

/*######## add additional styles for mobile-friendly responsive menu ########*/
#ddmenu div.menu-icon
{
    display: none;
    /* hide menu icon initially */
}

#ddmenu li.hide1
{
    float: left;
}

/*styles for responsive menu*/
@media only screen and (min-width: 480px) and (max-width: 768px)
{
    #ddmenu li
    {
        text-align: left;
        width: 50%;
        /*or 33%*/
        border-bottom: 1px dotted #6677AA;
    }
    
    #ddmenu li.hide1
    {
        display: none;
    }
    
    /*hide elements that is not needed in this layout */
    #ddmenu a
    {
        padding: 0 50px;
    }
}

/*styles for mobile*/
@media only screen and (max-width: 480px)
{
    #ddmenu li.hide1
    {
        display: none;
    }
    
    /*hide elements that is not needed in mobile */
    #ddmenu div.menu-icon
    {
        width: 40px;
        height: 40px;
        background: transparent url(/img/icon/Menu/MenuButtons.png) no-repeat center 2px;
        display: block;
        /*or inline-block*/
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        /*align the icon to the right*/
        margin-left: auto;
        margin-right: 4px;
    }
    
    #ddmenu div.menu-icon-active
    {
        background-color: #7BA4D9;
        background-position: center -38px;
        border-radius: 3px 3px 0 0;
    }
    
    /*override the original settings*/
    #ddmenu ul
    {
        width: 100%;
        display: none;
        background: #002A5B;
        border: none;
        border-top: 4px solid #7BA4D9;
        border-radius: 0;
    }
    
    #ddmenu li
    {
        float: none !important;
        display: block;
        width: 100%;
        font-size: 16px;
        /*   font-size:22px;
               font-family: Georgia, Arial;*/
        text-align: left;
        border-top: 1px solid #003679;
        border-bottom: 1px solid black;
    }
    
    #ddmenu a.arrow
    {
        background-image: url(/img/icon/Menu/MenuButtons.png);
        background-position: right -90px;
    }
    
    #ddmenu li.over a.arrow
    {
        background-color: #E1E5FF;
        background-position: right -160px;
    }
    
    #ddmenu a
    {
        display: block;
    }
    
    #ddmenu div.drop
    {
        position: relative;
        border-top-color: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    
    #ddmenu div.drop, #ddmenu div.dropToLeft, #ddmenu div.dropToLeft2
    {
        left: 0px;
        right: auto;
    }
    
    /*turn each column to list vertically instead of horizontally */
    #ddmenu div.column
    {
        width: auto;
        float: none;
        padding: 0;
    }
}

@media only screen and (min-device-width: 401px) and (max-device-width: 700px)
{
    #ddmenu ul
    {
        background: #4966A0;
        /*not using background image anymore*/
    }
    
    #ddmenu li
    {
        text-align: left;
        width: 50%;
        /*or 33%*/
        border-bottom: 1px dotted #6677AA;
    }
    
    #ddmenu li.hide1
    {
        display: none;
    }
    
    /*hide elements that is not needed in this layout*/
    #ddmenu a
    {
        padding: 0 50px;
    }
}

#ddlogomin
{
    display: none;
    margin-left: 10px;
    position: absolute;
    left: 10px;
    z-index: 999999999;
}

@media only screen and (max-width: 480px)
{
    #ddlogomin
    {
        display: block;
    }
}
