/* NEW Menu Slide Out default CSS
Author: Jason Nolfi
Version: 2
Updates [10/12/11]: 
* Accommodates Template CSS with updated Reset Styles
* Fixes issues generated by width:100% for a and span classes. Also adds notation to explain change in css 
* Adds a vertical submenu navigation with comments
* Adds notation for implementing arrows and scrolling arrows in navigation

Basic Nav Structure:
[DIV]   [ DIV ]          [ UL ]     [ LI ]  [ A  ] [ SPAN ]
#nav .RadMenu_skinName .rmRootGroup .rmItem .rmLink .rmText

SubMenu Structure
[DIV]   [ DIV ]        [ UL ]   [ LI ]  [ A  ] [ SPAN ]
#nav .RadMenu_skinName .rmGroup .rmItem .rmLink .rmText

====================================================================================================================================
Classes of note:
.rmFirst = LI class that targets the first item in the Menu 
.rmLast = LI class that targets the last item in the Menu
.rmLevel[n] = UL class that targets a submenu at a specific level // ex: .rmLevel1 targets the first dropdown
.rmSlide = Div that wraps subMenu
=====================================================================================================================================

INDEX:
I. Horizontal Navigation Styles - Line 34
II. Vertical Navigation Styles - Line 202
III. Arrows for Navigation Items To Declare submenus - Line 332

*/

/*----
RESET STYLES
----*/
#nav .RadMenu_Template,
#nav .RadMenu_Template .rmItem,
#nav .RadMenu_Template .rmLink,
#nav .RadMenu_Template .rmText,
#nav .RadMenu_Template .rmHorizontal .rmText,
#nav .RadMenu_Template .rmRootGroup,
#nav .RadMenu_Template .rmGroup {
	margin: 0;
	padding: 0;
	/*RESETS TEMPLATE.css STYLES*/
	background-color:transparent;
	background-repeat:no-repeat;
	background-image:none;
	background:none;
	border:0;
	
	}

/*----10/11/11: 
JN - WIDTH 100% Allows for two BG Images in top level of nav (background for hover state and a divider image). Added .rmRootGroup class to allow for centering on top level items to separate styles from root level and sub level menus
---*/	
#nav .RadMenu_Template .rmRootGroup .rmLink,
#nav .RadMenu_Template .rmRootGroup .rmText
 {width:100%;}


/*---
DIV > UL 
* Styles that will wrap the nav
---*/
#nav .RadMenu_Template .rmRootGroup {
     text-align: center;
}

/*----
DIV > UL > LI
-----*/
#nav .RadMenu_Template .rmRootGroup .rmItem {}


/*---
DIV > UL > LI > A > SPAN
*This will be style of the text regardless in the rootgroup
---*/

#nav .RadMenu_Template .rmRootGroup .rmItem .rmLink .rmText,
#nav .RadMenu_Template .rmRootGroup .rmItem .rmLink:hover .rmText,
#nav .RadMenu_Template .rmRootGroup .rmItem .expanded .rmText {
 text-transform: none;

}

#nav .RadMenu_Template .rmRootGroup .rmLast .rmLink .rmText,
#nav .RadMenu_Template .rmRootGroup .rmLast .rmLink:hover .rmText,
#nav .RadMenu_Template .rmRootGroup .rmLast .expanded .rmText {
background:none;	
}

/*----
DIV > UL > A
*root level link
-----*/
#nav .RadMenu_Template .rmRootGroup .rmLink {
    color: #352812;
    text-decoration: none;
	font: normal 16px/43px Garamond, "Hoefler Text", "Times New Roman", Times, serif;
	cursor: pointer;
	text-align:center;
	background:url(Menu/img_hNavIdle.gif) no-repeat right;
	
}

#nav .RadMenu_Template .rmRootGroup .rmLast .rmLink {
	background:none;
	
}


/*----
DIV > LI > A
* This block controls hover effects and selected states of A elements
-----*/
#nav .RadMenu_Template .rmRootGroup .rmLink:hover, 
#nav .RadMenu_Template .rmRootGroup .rmFocused, 
#nav .RadMenu_Template .rmRootGroup .rmSelected, 
#nav .RadMenu_Template .rmRootGroup .rmExpanded, 
#nav .RadMenu_Template .rmRootGroup .rmExpanded:hover, 
#nav .RadMenu_Template .rmRootGroup .rmDisabled, 
#nav .RadMenu_Template .rmRootGroup .rmDisabled:hover {
     background-color: #deb670;
}

/*----
DIV > UL > LI > UL
* This controls the submenu UL 
------*/
#nav .RadMenu_Template .rmGroup {
	border:none;
	background: #f1cc8e url(Menu/bg_subNav.gif) top repeat-x;	
	text-align:left;
	padding:0px 1px !important;  /*Overrides padding from telerik stylesheet*/
	/*ROUNDED BORDER*/
	
	}
	
	/*Fudges padding for group element so first items appear aligned --> Not so much on subsequent dropdowns*/
	#nav .RadMenu_Template .rmGroup .rmFirst {padding-top:5px;}
	#nav .RadMenu_Template .rmGroup .rmLast {padding-bottom:5px;}
	
	
/*---------
DIV UL > LI > UL > SPAN
* Controls text in submenu regardless
----------*/
/*JN 10/11/2011 - Fix so elements on submenus don't inherit width:100%*/
#nav .RadMenu_Template .rmGroup .rmLink,
#nav .RadMenu_Template .rmGroup .rmText {width:auto;}
	
#nav .RadMenu_Template .rmGroup .rmItem .rmLink .rmText,
#nav .RadMenu_Template .rmGroup .rmItem .rmLink:hover .rmText,
#nav .RadMenu_Template .rmGroup .rmItem .expanded .rmText {
text-transform:none;
margin:0 15px; /*USE MARGIN TO SPACE SUBNAV ELEMENTS IN SUBMENU BOX - IE Fix*/
background:none; /*JN - Overrides background on top level*/
}
	

/*-----
DIV > UL > LI > UL > A
*This block controls the style of the link in the sub UL
------*/
#nav .RadMenu_Template .rmGroup .rmLink {
    background: none;
	color:#f6f0e4;
    text-decoration: none;
	color:#403118;
	font:12px/27px Arial, Helvetica, sans-serif;
	cursor: pointer;
	text-align:left;
}

/*-----
DIV > UL > LI > UL > A:Hover
* This block controls hover effects and selected states of A elements in the sub ULs  
----*/
#nav .RadMenu_Template .rmItem .rmGroup a.rmLink:hover,
#nav .RadMenu_Template .rmItem .rmGroup a.rmFocused, 
#nav .RadMenu_Template .rmItem .rmGroup a.rmSelected, 
#nav .RadMenu_Template .rmItem .rmGroup a.rmExpanded, 
#nav .RadMenu_Template .rmItem .rmGroup a.rmExpanded:hover, 
#nav .RadMenu_Template .rmItem .rmGroup a.rmDisabled, 
#nav .RadMenu_Template .rmItem .rmGroup a.rmDisabled:hover {
    background-image:url(Menu/bg_subNavSel.gif);
	background-position:top;
	background-repeat:repeat-x;
	color:#0a1e34;
}


/*==========================================================
Vertical Nav
===========================================================*/

/*RESET STYLES */

.vNav .RadMenu_Template,
.vNav .RadMenu_Template .rmItem,
.vNav .RadMenu_Template .rmLink,
.vNav .RadMenu_Template .rmText,
.vNav .RadMenu_Template .rmHorizontal .rmText,
.vNav .RadMenu_Template .rmRootGroup,
.vNav .RadMenu_Template .rmGroup,
.vNav .RadMenu_Template .rmVertical,
.vNav .RadMenu_Template .rmVertical .rmGroup .rmText,
.vNav .RadMenu_Template .rmVertical .rmGroup .rmFirst .rmText,
.vNav .RadMenu_Template .rmVertical .rmGroup .rmLast .rmText,
.vNav .RadMenu_Template .rmVertical .rmGroup .rmFirst .rmLink:hover .rmText,
.vNav .RadMenu_Template .rmVertical .rmGroup .rmLast .rmLink:hover .rmText
 {
	margin: 0;
	padding: 0;
	/*RESETS TEMPLATE STYLES*/
	background-color:transparent;
	background-repeat:no-repeat;
	background-image:none;
	background:none;
	border:0;
	}


/*Link Style*/
.vNav .RadMenu_Template .rmVertical .rmLink {
    color: #392c1f;
    text-decoration: none;
	font-size: 13px;
    font-weight: normal;
    line-height: 26px;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
	 background:none; /*OVERRIDES PREVIOUS RMLINK STYLE*/
	 border:0; /*overrides border in Template.css*/
	 padding: 0; /*overrides padding*/
	 text-transform:none;
	 background-image:url(Menu/img_vNavIdle.gif);
	 background-repeat:no-repeat;
	 background-position:left;
	 padding-left:10px;

	
}

.vNav .RadMenu_Template .rmVertical .rmLink:hover, 
.vNav .RadMenu_Template .rmVertical .rmFocused, 
.vNav .RadMenu_Template .rmVertical .rmSelected, 
.vNav .RadMenu_Template .rmVertical .rmExpanded, 
.vNav .RadMenu_Template .rmVertical .rmExpanded:hover, 
.vNav .RadMenu_Template .rmVertical .rmDisabled, 
.vNav .RadMenu_Template .rmVertical .rmDisabled:hover {
     color:#8b5019;
	 padding: 0; /*overrides padding*/
	 border:0; /*overrides border in Template.css*/
	 background-color:#f5efe5;
	 background-image:url(Menu/img_vNavSel.gif);
	 background-repeat:no-repeat;
	 background-position:left;
	 padding-left:10px;

}

/*
OVERRIDE .RMFIRST AND .RMLAST
- In template.css the next line of classes cause strange hover effects on first and last items of vertical nav -
*/ 

.vNav .RadMenu_Template .rmVertical .rmFirst,
.vNav .RadMenu_Template .rmVertical .rmLast
{
	background: none;
}

.vNav .RadMenu_Template .rmVertical .rmFirst a.rmLink:hover,
.vNav .RadMenu_Template .rmVertical .rmFirst a.rmFocused,
.vNav .RadMenu_Template .rmVertical .rmFirst a.rmSelected,
.vNav .RadMenu_Template .rmVertical .rmFirst a.rmExpanded,
.vNav .RadMenu_Template .rmVertical .rmFirst a.rmExpanded:hover
{
	padding-top: 0px; /*OVERRIDES PADDING IN TEMPLATE.CSS*/
	padding-bottom: 0;
	border-top-width: 0;
}

.vNav .RadMenu_Template .rmVertical .rmLast a.rmLink:hover,
.vNav .RadMenu_Template .rmVertical .rmLast a.rmFocused,
.vNav .RadMenu_Template .rmVertical .rmLast a.rmSelected,
.vNav .RadMenu_Template .rmVertical .rmLast a.rmExpanded,
.vNav .RadMenu_Template .rmVertical .rmLast a.rmExpanded:hover
{
	padding-bottom: 0px; /*OVERRIDES PADDING IN TEMPLATE.CSS*/
	padding-top: 0;
	border-bottom-width: 0;
}

/*Submenu Style*/
.vNav .RadMenu_Template .rmVertical .rmGroup {
	background:#313536;
	border:0; /*resets border*/
}

.vNav .RadMenu_Template .rmVertical .rmGroup .rmLink {
background-image:none;/*overides background-image in Template.css*/	
color:#fff;	
}


.vNav .RadMenu_Template .rmVertical .rmGroup .rmLink:hover, 
.vNav .RadMenu_Template .rmVertical .rmGroup .rmFocused, 
.vNav .RadMenu_Template .rmVertical .rmGroup .rmSelected, 
.vNav .RadMenu_Template .rmVertical .rmGroup .rmExpanded, 
.vNav .RadMenu_Template .rmVertical .rmGroup .rmExpanded:hover, 
.vNav .RadMenu_Template .rmVertical .rmGroup .rmDisabled, 
.vNav .RadMenu_Template .rmVertical .rmGroup .rmDisabled:hover
 {
background-image:none;/*overides background-image in Template.css*/	
background:#fff;
color:#313536;
}

/*Submenu spacing - Includes First classes to override Template.css*/
.vNav .RadMenu_Template .rmVertical .rmGroup .rmLink .rmText,
.vNav .RadMenu_Template .rmVertical .rmGroup .rmFirst .rmLink .rmText,
.vNav .RadMenu_Template .rmVertical .rmGroup .rmLast .rmLink .rmText,
.vNav .RadMenu_Template .rmVertical .rmGroup .rmFirst .rmLink:hover .rmText,
.vNav .RadMenu_Template .rmVertical .rmGroup .rmLast .rmLink:hover .rmText

{padding:0px 5px;}


/*----
Telerik custom selectors for arrows

=================
UPDATE - 10/12/11
=================
Implementing an arrow in your navigation requires you to declare the appropriate class in the CSS. The HTML of the navigation will not include the proper class unless it is declared:

==================== Menus that expand up and down ==============================
- .rmExpandDown: adding this class sets up an arrow with a menu behavior of expanding up
- .rmExpandUp: adding this class sets up an arrow with a menu behavior of expanding up

* Use these two classes when you want to add an arrow to indicate that a top-level item has a dropdown menu (see www.jericho.ca for an example)
* How code should look for level one items where an arrow signifies a dropdown menu:

**NORMAL**
.RadMenu_Template .rmExpandDown {
    background: url("menu/navArrow.gif") no-repeat scroll 90% center transparent;
}

**HOVER STATE**
.RadMenu_Template a.rmLink:hover .rmExpandDown {
    background: url("menu/navArrow.gif") no-repeat scroll 90% center transparent;
}

==================== Menus that Expand to the left or right ==============================
- .rmExpand Right:  adding this class sets up an arrow with a menu behavior of expanding to the right
- .rmExpandLeft:  adding this class sets up an arrow with a menu behavior of expanding left

* Use these classes for submenus and vertical navigations
* If you are declaring an arrow for top level items, add .rmGroup to .rmExpandRight to control styles of submenu styles

Example:
**NORMAL**
#nav .RadMenu_Template .rmGroup .rmExpandRight, 
#nav .RadMenu_Template .rmGroup .rmExpandLeft {
    background: url("menu/subNavArrow.gif") no-repeat scroll 90% center transparent;
}

**Hover State**
#nav .RadMenu_Template .rmGroup a.rmLink:hover .rmExpandRight, 
#nav .RadMenu_Template .rmGroup a.rmLink:hover .rmExpandLeft {
    background: url("menu/subNavArrow.gif") no-repeat scroll 90% center transparent;
}


=======================================================================================
Scrolling Arrows
=======================================================================================

Classes:
.rmTopArrow, .rmBottomArrow, .rmRightArrow, .rmLeftArrow

These classes allow the scrolling arrows (i.e. like the ones you see on the right side of the browser window) to be defined via the CSS. There are no real examples of this in action, but an example of when this could be used would be when you are creating a submenu with a fixed height. 

-----*/

#nav .RadMenu_Template .rmGroup .rmExpandRight, 
#nav .RadMenu_Template .rmGroup .rmExpandLeft,
#nav .RadMenu_Template .rmTopArrow, 
#nav .RadMenu_Template .rmBottomArrow, 
#nav .RadMenu_Template .rmLeftArrow, 
#nav .RadMenu_Template .rmRightArrow {

}

/*----
Telerik custom selectors for arrows in subMenu
-----*/

#nav .RadMenu_Template .rmGroup a.rmLink:hover .rmExpandRight, 
#nav .RadMenu_Template .rmGroup a.rmLink:hover .rmExpandLeft, 
#nav .RadMenu_Template .rmGroup .rmExpanded .rmExpandRight, 
#nav .RadMenu_Template .rmGroup .rmExpanded .rmExpandLeft, 
#nav .RadMenu_Template .rmGroup a.rmLink:hover .rmTopArrow, 
#nav .RadMenu_Template .rmGroup a.rmLink:hover .rmBottomArrow, 
#nav .RadMenu_Template .rmGroup a.rmLink:hover .rmLeftArrow, 
#nav .RadMenu_Template .rmGroup a.rmLink:hover .rmRightArrow 
{
    
}