#menu_wrapper{
    display:none;
}
#desktopMenu{
    display:block;
}
.wrapper{
    max-width: 950px;
    margin:0 auto;
    padding:10px;
}    
ul, li{
    margin:0;
    padding:0;
    list-style: none;
}

/* the main menu */
#desktopMenu {
    display: block;
    position: relative;
    max-width: 950px;
    height:50px;
    z-index: 1000;
    margin: 20px auto;
}
#desktopMenu > ul{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
    display: box;
    -moz-box-orient: horizontal;
    margin-top:20px;
}
#desktopMenu ul{
    list-style :none;
    padding:0; /* gets rid of any inherited margins and padding */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    position:relative;
    max-width:950px;
}
#desktopMenu > ul > li { 
    position : relative;
    float : left;
    font-size: 15px; /* this is here and not above, so that the subs can be made smaller using a % if desired */
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

#desktopMenu > ul > li + li{
    margin-left:2px;
}
#desktopMenu > ul > li > a {
    background-color: #f06; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.6)), color-stop(0.49, rgba(255, 255, 255, 0.3)), color-stop(0.51, rgba(255, 255, 255, 0.0)), to(rgba(255, 255, 255, 0.2)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%);
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%);
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%);
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%);
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%);

    -webkit-border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
    -ms-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;
    display:block;
    padding:8px 14px;
    text-decoration:none;
    color:#fff; 
    text-align: center;
    /* make the background-color fade in on roll-over */
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    -ms-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
#desktopMenu > ul.row2 > li > a{
    background-color: #9ad41f; 
}
#desktopMenu > ul > li > a:hover{
    background-color:#770030; 
    color:#fff;
}
#desktopMenu > ul.row2 > li > a:hover{
    background-color:#4c7001; 
    color:#fff;
}

/* the show/hide effects */
/* the drop-down box */

#desktopMenu ul ul{
    width:340px; /* you need a width to accomodate tertiary menus */
    position:absolute;
    z-index:100;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in;
    -moz-transition: height 0.3s ease-in;
    -o-transition: height 0.3s ease-in;
    -ms-transition: height 0.3s ease-in;
    transition: height 0.3s ease-in;
}
/* don't display tertiary box yet */
#desktopMenu > ul > li:hover ul ul, #desktopMenu > ul > li > a:hover ul ul{
    height:0;

}
/* tertiary drop-down box */
#desktopMenu ul ul ul{
    left:170px;
    width:170px;
}
#desktopMenu > ul > li:hover ul, #desktopMenu > ul > li > a:hover ul,
#desktopMenu ul ul li:hover > ul, #desktopMenu ul ul li a:hover > ul{
    height:220px;

}
/* drop-down item styles */
#desktopMenu ul ul li{
    background-color:#eaeaea; /* grey */
    width:170px;

    /* make the background-color fade in on roll-over */
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    -ms-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
/* unfortunate ie7 gap fix */
.ie7 #desktopMenu ul ul li{
    margin-bottom:-3px;
}
#desktopMenu ul ul li:hover {
    background-color:#999;
}
#desktopMenu ul ul li a {
    display:block;
    text-decoration:none;
    margin:0 12px;
    padding:5px 0;
    color:#4c4c4c; /* grey */
}

/* The following six rules set the lines in between menu items.
   To make this play nice in IE, we will not be using nth-child
   but the "+" sibling slector.
*/
#desktopMenu ul ul ul li a{
    border:none !important;
}
#desktopMenu ul ul ul li + li a{
    border-top:1px dotted #999 !important;
}
#desktopMenu ul ul li + li a{
    border-top:1px dotted #999;
}
#desktopMenu ul ul li:hover + li a{
    border-top:1px solid #eaeaea;
}
#desktopMenu ul ul ul li:hover + li a{
    border: 0 !important;
}
#desktopMenu ul ul ul li:hover + li{
    border-top:1px solid #999 !important;
}
#desktopMenu ul ul li a:hover, #desktopMenu ul ul li:hover > a {
    color:#ffffff; /* white */

}

@media only screen and (max-width: 640px){
    .wrapper{
        width:100%;
        padding:0;
    }
    #menu_wrapper{
        display:block;
    }
    #desktopMenu{
        display:none;
    }

}

/* accordion tabs */
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.tabs { list-style: none; }
.tabs li { display: inline; }
.tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; }
.tabs li a:hover { background: #ccc; }


/* Generic styles & example one */

.tabbed-area { margin: 0 0 120px 0; }
.box-wrap { position: relative; min-height: 250px; }
.tabbed-area div div { background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }
.tabbed-area div div, .tabs li a { border: 1px solid #ccc; }
#box-one:target, #box-two:target, #box-three:target { z-index: 1; }




/* Stuff for example seven - including conditionals below */

#ie-test { position: relative; width: 100%; }
#boxLinks { list-style: none; overflow: hidden; }
#boxLinks li {  display: inline; }
#boxLinks li a { padding: 5px 10px; color: black; text-decoration: none; border: 1px solid #ccc; float: left; display: block; margin-left: -1px; position: relative; left: 1px; }
#boxLinks li a:hover { color: #fff; background: #000; }
#box { height: 250px; border: 1px solid #ccc; overflow: hidden; padding: 0px 30px 0px 30px; position: relative; top: -1px; }
.box { display: none; height: 250px; overflow: auto; display: block; position: relative; overflow-x: hidden; }
#box1:target, #box2:target, #box3:target { display: block; }


.lt-ie9 .box { display: block; }
.lt-ie9 #box { overflow: hidden;position: relative; }
.lt-ie9 b { position: absolute; top: 0px; right: 0px; width:1px; height: 251px; overflow: hidden; text-indent: -9999px; }