/* 
    rmRootGroup => k-header
    rmGroup => k-group
    rmItem => k-item
    rmLink => k-item
    rmText => k-link 
    rmExpandRight => k-i-arrow-e
    rmExpandDown => k-i-arrow-s
    */

#RPMenuBar {
    background: url(Menu/bg.jpg) repeat-x top left;
    float: right !important;
    border-style: none !important;
}

    #RPMenuBar .k-link {
        color: #D1D1D1;
        font: normal 13px Helvetica, sans-serif;
    }

    #RPMenuBar .k-group > .k-item > .k-link {
        color: #D1D1D1;
        font: normal 11px Helvetica, sans-serif !important;
    }

    #RPMenuBar .k-state-hover {
        color: #D1D1D1;
        font: normal 11px Helvetica, sans-serif !important;
    }
    
    #RPMenuBar .k-icon.k-i-arrow-60-right {
        color: #D1D1D1 !important;
    }

    #RPMenuBar .k-header,
    #RPMenuBar .k-link {
        font-weight: bold;
    }

    #RPMenuBar .k-header, /* probably need to take a look at header. if i added #RPMenuBar to it, it doesn't apply the style */
    #RPMenuBar .k-widget,
    #RPMenuBar .k-link,
    #RPMenuBar .k-popup,
    #RPMenuBar .k-menu .k-item {
        border: none !important;
        border-style: none !important;
        border-width: 0px !important;
    }

    #RPMenuBar .k-item {
        border: none !important;
        border-style: none !important;
        border-width: 0px !important;
        text-decoration: none;
        height: 51px;
        cursor: pointer !important;
        font-weight: bold;
        background: url(Menu/divider.jpg) top left no-repeat !important;
        /* The divider background is interfering with the hover background style */
    }

    #RPMenuBar .k-header {
        height: 51px;
        border: none !important;
        border-style: none !important;
    }

    #RPMenuBar .k-group {
        padding-left: 10px !important;
    }

    #RPMenuBar .k-item > .k-link {
        padding: 16px 12px 19px 12px !important;
    }

    #RPMenuBar .k-group .k-link {
        padding: 5px 54px 5px 38px !important;
    }

    #RPMenuBar .k-group,
    #RPMenuBar .k-group .k-menu-vertical {
        background: #3f3f3f url(Menu/dropdown.jpg) top left repeat-y;
        padding: 0 0 5px 0 !important;
    }

    #RPMenuBar .k-state-disabled,
    #RPMenuBar .k-state-disabled:hover {
        color: #7d7d7d;
        background-color: transparent;
    }

    #RPMenuBar .k-menu .k-item,
    #RPMenuBar .k-menu-horizontal.k-widget > .k-item {
        float: left !important;
    }



    /* </Root items> */
    #RPMenuBar > .k-item > .k-link > .k-icon {
        display: none;
        background-image: none !important;
        width: 0 !important;
    }

    #RPMenuBar > .k-state-hover.k-item > .k-link,
    #RPMenuBar > .k-state-border-down.k-item > .k-link {
        background: url(Menu/hover.jpg) repeat-x 1px 0px !important;
    }

    #RPMenuBar > .k-item > .k-link {
        margin-left: 1px;
    }
    /* <Submenu items> */

    #RPMenuBar .k-header .k-menu-horizontal {
        background-image: none;
    }

    #RPMenuBar .k-state-active {
        background-color: transparent;
    }

    #RPMenuBar .k-group .k-item .k-link {
        background: none !important;
    }

    #RPMenuBar .k-group > .k-item.k-state-hover,
    #RPMenuBar .k-group > .k-item:hover,
    #RPMenuBar .k-group > .k-item.k-state-border-right,
    #RPMenuBar .k-group > .k-item.k-state-border-left {
        background: #6E6E6E !important;
    }
    /* Neither rmScrollWrap nor rmVertical were found in the menu, so I commented this style out. 
    If needed, find the Kendo equivalent of rmScrollWrap */
    /*.RadMenu_Onyx .rmScrollWrap .rmVertical
{
	border: 0;
}*/

    /*#RPMenuBar .k-group .k-item,
#RPMenuBar .k-group .k-item:hover,
#RPMenuBar .k-group .k-item .k-state-focused 
{
    padding-top: 0;
	padding-bottom: 0;
	border: 0;
}

#RPMenuBar .k-last .k-item,
#RPMenuBar .k-last .k-item:hover,
#RPMenuBar .k-last .k-item .k-state-focused 
{
    padding-bottom: 1px;
}*/

    /*  recentNav was set as a css class in the ascx, commented out for now
.RadMenu_Onyx .rmGroup .recentNav,
.RadMenu_Onyx .rmGroup .recentNav:hover {
	background:url(Menu/bracket.gif) no-repeat scroll 38px -3px transparent;
	display:block;
	padding-left:27px!important;
} */

    #RPMenuBar .k-header .k-item {
        height: 51px;
        padding-left: 1px;
    }

    #RPMenuBar .k-group .k-item {
        background: none;
    }

    /*  Could not find an rmLevel2 equivalent
#RPMenuBar .rmLevel2 {
    border-left: 1px solid #58595B;
}
*/

    #RPMenuBar .k-state-focused,
    #RPMenuBar .k-list > .k-state-focused,
    #RPMenuBar .k-listview > .k-state-focused,
    #RPMenuBar .k-grid-header th.k-state-focused,
    #RPMenuBar .k-state-focused,
    #RPMenuBar .k-state-focused.k-button {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    #RPMenuBar .k-group .k-item {
        height: 21px;
        padding: 5px 0 5px 0px !important;
    }

    #RPMenuBar .k-group .k-item a {
        padding-left: 10px;
    }

    /* <expand arrows> */
    #RPMenuBar .k-group .k-i-arrow-e,
    #RPMenuBar .k-group .k-item .k-state-disabled .k-i-arrow-e,
    #RPMenuBar .k-group .k-item .k-state-disabled:hover .k-i-arrow-e {
        background: url(Menu/expand-right.gif) no-repeat scroll right 2px transparent;
    }


    #RPMenuBar .k-group .k-i-arrow-s,
    #RPMenuBar .k-group .k-item .k-state-disabled .k-i-arrow-s,
    #RPMenuBar .k-group .k-item .k-state-disabled:hover .k-i-arrow-s {
        background: none !important;
    }

/* </expand arrows> */

/* </Submenu items> */

/* <Dropshadow> */

/* Don't know what the corresponding classes are */

/*.rmBottomShadowRight {
	bottom: -4px!important;
	height: 4px!important;
	right: -4px!important;
	width: 3px!important;
}	

.rmTopShadowRight {
	right: -4px!important;
}

.rmBottomShadowLeft {
	bottom: -4px!important;
}*/

/* </Dropshadow> */

/* </RadMenu / Onyx> */



#RPMenuIcon {
    background: url(Menu/bg.jpg) repeat-x top left;
    float: left !important;
    border-style: none !important;
    margin-right: 10px;
}

    #RPMenuIcon .k-link {
        color: #D1D1D1;
        font: normal 13px Helvetica, sans-serif;
    }

    #RPMenuIcon .k-group > .k-item > .k-link {
        color: #D1D1D1;
        font: normal 11px Helvetica, sans-serif !important;
    }

    #RPMenuIcon .k-state-hover {
        color: #D1D1D1;
        font: normal 11px Helvetica, sans-serif !important;
    }

    #RPMenuIcon .k-header,
    #RPMenuIcon .k-link {
        font-weight: bold;
    }

    #RPMenuIcon .k-header, /* probably need to take a look at header. if i added #RPMenuIcon to it, it doesn't apply the style */
    #RPMenuIcon .k-widget,
    #RPMenuIcon .k-link,
    #RPMenuIcon .k-popup,
    #RPMenuIcon .k-menu .k-item {
        border: none !important;
        border-style: none !important;
        border-width: 0px !important;
    }

    #RPMenuIcon .k-item {
        border: none !important;
        border-style: none !important;
        border-width: 0px !important;
        text-decoration: none;
        height: 51px;
        cursor: pointer !important;
        font-weight: bold;
        background: url(Menu/divider.jpg) top left no-repeat !important;
        /* The divider background is interfering with the hover background style */
    }

    #RPMenuIcon .k-header {
        height: 51px;
        border: none !important;
        border-style: none !important;
    }

    #RPMenuIcon .k-group {
        padding-left: 10px !important;
    }

    #RPMenuIcon .k-item > .k-link {
        padding: 16px 12px 18px 12px !important;
    }

    #RPMenuIcon .k-group .k-link {
        padding: 5px 54px 5px 38px !important;
    }

    #RPMenuIcon .k-group,
    #RPMenuIcon .k-group .k-menu-vertical {
        background: #3f3f3f url(Menu/dropdown.jpg) top left repeat-y;
        padding: 0 0 5px 0 !important;
    }

    #RPMenuIcon .k-state-disabled,
    #RPMenuIcon .k-state-disabled:hover {
        color: #7d7d7d;
        background-color: transparent;
    }

    #RPMenuIcon .k-menu .k-item,
    #RPMenuIcon .k-menu-horizontal.k-widget > .k-item {
        float: left !important;
    }

    #RPMenuIcon .k-item.rightMenuBorder{
        background: url(Menu/divider.jpg) top right no-repeat !important;
    }
    
    #RPMenuIcon .k-item div.k-content {
        background-color: inherit;
    }


    /* </Root items> */

    #RPMenuIcon > .k-state-hover.k-item > .k-link,
    #RPMenuIcon > .k-state-border-down.k-item > .k-link {
        background: url(Menu/hover.jpg) 1px 0px repeat-x !important;
    }

    #RPMenuIcon > .k-item > .k-link {
        margin-left: 1px;
    }
    /* <Submenu items> */

    #RPMenuIcon .k-header .k-menu-horizontal {
        background-image: none;
    }

    #RPMenuIcon .k-state-active {
        background-color: transparent;
    }

    #RPMenuIcon .k-group .k-item .k-link {
        background: none !important;
    }

    #RPMenuIcon .k-group > .k-item.k-state-hover,
    #RPMenuIcon .k-group > .k-item:hover,
    #RPMenuIcon .k-group > .k-item.k-state-border-right,
    #RPMenuIcon .k-group > .k-item.k-state-border-left {
        background: #6E6E6E !important;
    }

    #RPMenuIcon .k-header .k-item {
        height: 51px;
        padding-left: 1px;
    }

    #RPMenuIcon .k-group .k-item {
        background: none;
    }

    #RPMenuIcon .k-state-focused,
    #RPMenuIcon .k-list > .k-state-focused,
    #RPMenuIcon .k-listview > .k-state-focused,
    #RPMenuIcon .k-grid-header th.k-state-focused,
    #RPMenuIcon .k-state-focused,
    #RPMenuIcon .k-state-focused.k-button {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    #RPMenuIcon .k-group .k-item {
        height: 51px;
        padding: 5px 0 5px 0px !important;
    }

    #RPMenuIcon .k-group .k-item a {
        padding-left: 10px;
    }

    /* <expand arrows> */
    #RPMenuIcon .k-group .k-i-arrow-e,
    #RPMenuIcon .k-group .k-item .k-state-disabled .k-i-arrow-e,
    #RPMenuIcon .k-group .k-item .k-state-disabled:hover .k-i-arrow-e {
        background: url(Menu/expand-right.gif) no-repeat scroll right 2px transparent;
    }


    #RPMenuIcon .k-i-arrow-s,
    #RPMenuIcon .k-item .k-state-disabled .k-i-arrow-s,
    #RPMenuIcon .k-item .k-state-disabled:hover .k-i-arrow-s {
        display: none !important;
    }