#navigation {
    float: right;
    padding-top: 0px;
}

ul#mainnav {
    float: left;
    position: relative;
    display: block;
}

    ul#mainnav li {
        display: inline-block;
        float: left;
        position: relative;
        z-index: 1000;
    }

        ul#mainnav li ul li {
            border-left: 1px solid #ebebeb;
        }

        ul#mainnav li a {
            position: relative;
            font-size: 100%;
            font-weight: 400;
            color: #666666;
            margin-left: 6px;
            margin-bottom: 0;
            margin-right: 0px;
            padding: 0;
            height: 60px;
            line-height: 30px;
            display: inline-block;
            *display: block; /* IE7 Hack */
            -webkit-transition: color 0.2s linear;
            -moz-transition: color 0.2s linear;
            -o-transition: color 0.2s linear;
            transition: color 0.2s linear;
            z-index: 100;
        }

            ul#mainnav li a.sf-with-ul:hover, ul#mainnav li a.sf-with-ul:active {
                border-bottom: 1px solid #ebebeb;
                margin-bottom: -1px;
            }

        ul#mainnav li ul li a.sf-with-ul:hover, ul#mainnav li ul li a.sf-with-ul:active {
            margin-bottom: 0;
            border-bottom: 1px solid #ebebeb;
        }

        ul#mainnav li a:hover, ul#mainnav li a:active, ul#mainnav li a.current {
            color: #444;
            margin-bottom: -1px;
        }

        ul#mainnav li ul li a.current {
            margin-bottom: 0px;
            border-bottom: 1px solid #ebebeb;
            text-transform: uppercase;
        }

        ul#mainnav li ul li {
            background: #fff;
            margin: 0;
            float: left;
            width: 100%;
        }

            ul#mainnav li ul li a, ul#mainnav li ul li ul li a, ul#mainnav li ul li a:visited, ul#mainnav li ul li a:active { /* visited pseudo selector so IE6 applies text colour*/
                height: 34px;
                width: 170px;
                margin: 0 15px;
                display: block;
                padding: 0px;
                background: #fff;
                text-decoration: none;
                border-bottom: 1px solid #ebebeb;
                z-index: 1100;
                position: relative;
            }

.nav-last-item {
    border-bottom: 2px solid #333333;
}

.nav-first-item {
    z-index: 1000;
    position: relative;
}

#nav ul#mainnav > li > ul > li.nav-last-item > a, #nav ul#mainnav > li > ul > li > ul > li.nav-last-item > a {
    border-bottom: 0 none;
}

ul#mainnav li ul li a:hover, ul#mainnav li ul li ul li a:hover {
    background: #fff;
    color: #333;
    margin-bottom: 0px;
    border-bottom: 1px solid #ebebeb;
}




ul#mainnav li ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.0;
    position: absolute;
    width: 200px; /* left offset of submenus need to match (see below) */
    top: 60px;
    left: 0px;
    padding-top: 0px;
    z-index: 3000;
}

ul#mainnav li {
    overflow: hidden;
}

    ul#mainnav li ul li:hover {
        visibility: inherit; /* fixes IE7 'sticky bug' */
    }

    ul#mainnav li ul li {
        width: 100%;
        float: left;
        position: relative;
        z-index: 980;
    }

        ul#mainnav li ul li a {
            display: block;
            position: relative;
            font-size: 100%;
        }

        ul#mainnav li ul li:hover ul,
        ul#mainnav li ul li.sfHover ul {
            left: 200px;
            top: 0px; /* match top ul list item height */
            z-index: 99;
        }

        ul#mainnav li ul li:hover li ul,
        ul#mainnav li ul li.sfHover li ul {
            top: -999em;
        }

        ul#mainnav li ul li li:hover ul,
        ul#mainnav li ul li li.sfHover ul {
            left: 200px; /* match ul width */
            top: 0;
        }

        ul#mainnav li ul li li:hover li ul,
        ul#mainnav li ul li li.sfHover li ul {
            top: -999em;
        }

        ul#mainnav li ul li ul {
            position: absolute;
            width: 200px;
            left: 200px;
            top: -1px;
            padding-top: 0px;
        }

            ul#mainnav li ul li ul li:hover ul,
            ul#mainnav li ul li ul li.sfHover ul {
                left: 200px; /* match ul width */
                top: 0;
            }

    ul#mainnav li.sfHover a {
    }

.sf-shadow ul {
}

    .sf-shadow ul.sf-shadow-off {
        background: transparent;
    }

.sf-sub-indicator {
    position: absolute;
    display: block;
    right: 0;
    top: 1.05em; /* IE6 only */
    width: 10px;
    height: 10px;
    text-indent: -999em;
    overflow: hidden;
    background: url(../images/nav-arrows.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}

#mainnav > li > a > .sf-sub-indicator { /* give all except IE6 the correct values */
    top: 12px;
    right: -2px;
    background-position: 0 -97px; /* use translucent arrow for modern browsers*/
}

#mainnav > li > ul > li a.sf-sub-indicator { /* give all except IE6 the correct values */
    top: 12px;
    background-position: 0 -97px; /* use translucent arrow for modern browsers*/
}

/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -97px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
#mainnav li ul li a span.sf-sub-indicator {
    background-position: 0 0;
}

.sf-menu ul a > .sf-sub-indicator {
    background-position: 0 0;
}
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}

#mainnav > li > a.sf-with-ul {
    padding-right: 6px;
    min-width: 1px;
}



/*** shadows for all but IE6 ***/
/*ul#mainnav li ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 6px 7px 0;

}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}*/
