menu.css

/* Global styles */

/* inline-block whitespace fix http://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/ */



.gsrm-menu{
    letter-spacing: -4px;
    word-spacing: -4px;    
    width:100%;
    overflow:hidden;
    list-style:none;
    padding: 1em 0;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    padding: 0 1em;
}

.gsrm-menu li{
    list-style:none;
    letter-spacing: normal;
    word-spacing: normal;
    display: inline-block;
    *display: inline; /* For IE6/IE7 */
    zoom: 1; /* For IE6/IE7 */    
}
/* Top menu styles */

#gsrm-nav{
    position:relative;
}

#gsrm-top-menu{
    margin-top: 44px;
}

    #gsrm-nav h2{
  
    width: 30px; height: 30px;
    padding: 7px;
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(top,  #45484d 0%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    position: absolute;top:-45px;right:1em;
 
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;

 
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
   
}

#gsrm-nav h2 a{
     font: 0/0 a;
    text-shadow: none;
    color: transparent;    
    background: transparent url(images/icon_list_bullets.png) no-repeat 0 0;
    display:block;width:30px;height:30px;
}

#gsrm-top-menu li, 
#gsrm-top-menu li a,
#gsrm-top-menu a span{
    display: block;
}

#gsrm-top-menu li{
    margin-bottom: 1em;
}

#gsrm-top-menu li a {padding: 1em .5em;}

#gsrm-top-menu a span{
    font-size: .8em;
}

#gsrm-top-menu a:hover{
    text-decoration: none;
}

#gsrm-top-menu .current-menu-item a,
#gsrm-top-menu a:hover
{
    background-color: #333;
    color: #fff;
}

/* submenus are hidden first */

#gsrm-sub-menu{
    display:none;
}

/* Responsive web design */
@media only screen and (min-width: 481px) {

    #gsrm-top-menu li {
        display:inline-block;
        vertical-align: top;
        width: 49%;
    }
}

@media only screen and (min-width : 601px) {
    #gsrm-nav h2{
        display:none;
    }
    #gsrm-top-menu{
        padding-bottom:0;
    }
    
    #gsrm-top-menu li{
        width:auto;
        margin: 0 1em 0 0;
    }

    /* hide link desc */
    #main-nav span{
        display:none;
    }
    
    /* reveal main submenu */
    #gsrm-sub-menu{
        display:block;
        background-color: #333;
    }
    
    #gsrm-sub-menu > li {
        display:none;
    }
    #gsrm-sub-menu a{
        color: #fff;
    }
    
    #gsrm-sub-menu > li > a{
        margin: 10px 0;
        display: block;
        font-weight: bold;
        border-bottom: 1px solid #fff;
    }
    
    #gsrm-sub-menu > .current-menu-item{
        display:block;
        padding-bottom: 1em;
        position: relative;
    }
    
    /* columns */
    #gsrm-sub-menu .current-menu-item > .sub-menu > li{
        display: inline-block;
        width: 24%;
        vertical-align:top;
    }
    
    #gsrm-sub-menu .current-menu-item > .sub-menu > li > a{
        text-transform: uppercase;
        font-size: .8em;
        margin-bottom: 5px;
    }
    
    /* 3d level menus */
    #gsrm-sub-menu .current-menu-item > .sub-menu > li ul{
        padding-left: 10px;
    }
    
}

@media only screen and (min-width : 1025px) {
    
    #gsrm-top-menu {
        
    }
    /* reveal link desc */
    #main-nav span{
        display:block;
    }
}