/* 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 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: uppercase;

}

#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: #f6f0e4;
    text-decoration: none;
	font-size: 14px;
    font-weight: bold;
    line-height: 42px;
	font-family: Garamond, "Hoefler Text", Times New Roman, Times, serif;
	cursor: pointer;
	text-align:center;
	 background:url(../../../../images/navDiv.jpg) no-repeat right top;
	 letter-spacing:1px;
	/*padding: 0 21px; IF YOU DISABLE WIDTHS>USE PADDING*/
	
}


/*----
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: #313536 url(../../../../images/navDiv.jpg) no-repeat right top;
}

#nav .RadMenu_Template .rmRootGroup .rmLast .rmLink, 
#nav .RadMenu_Template .rmRootGroup .rmLast .rmLink:hover, 
#nav .RadMenu_Template .rmRootGroup .rmLast .rmFocused, 
#nav .RadMenu_Template .rmRootGroup .rmLast .rmSelected, 
#nav .RadMenu_Template .rmRootGroup .rmLast .rmExpanded, 
#nav .RadMenu_Template .rmRootGroup .rmLast .rmExpanded:hover, 
#nav .RadMenu_Template .rmRootGroup .rmLast .rmDisabled, 
#nav .RadMenu_Template .rmRootGroup .rmLast .rmDisabled:hover {
background:none;	
}

/*----
DIV > UL > LI > UL
* This controls the submenu UL 
------*/
#nav .RadMenu_Template .rmGroup {
	background:#313536;
	padding:0px 1px !important;  /*Overrides padding from telerik stylesheet*/
	/*ROUNDED BORDER*/
	-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; 
/*DROPSHADOW*/
-webkit-box-shadow: 0px 3px 3px #2a2a2a;
-moz-box-shadow: 0px 3px 3px #2a2a2a;
box-shadow: 0px 3px 3px #2a2a2a;
	}
	
	/*Fudges padding for group element so first items appear aligned --> Not so much on subsequent dropdowns*/
	#nav .RadMenu_Template .rmGroup .rmFirst {padding-top:15px;}
	#nav .RadMenu_Template .rmGroup .rmLast {padding-bottom:15px;}
	
	
/*---------
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: #color: #f6f0e4;
    text-decoration: none;
	font-size: 14px;
    font-weight: normal;
    line-height: 25px;
	font-family: Garamond, "Hoefler Text", Times New Roman, Times, 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: none repeat scroll 0% 0% #000;
	 color:#fff;
}


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

/*RESET STYLES */

.vNavWrap .RadMenu_Template,
.vNavWrap .RadMenu_Template .rmItem,
.vNavWrap .RadMenu_Template .rmLink,
.vNavWrap .RadMenu_Template .rmText,
.vNavWrap .RadMenu_Template .rmHorizontal .rmText,
.vNavWrap .RadMenu_Template .rmRootGroup,
.vNavWrap .RadMenu_Template .rmGroup,
.vNavWrap .RadMenu_Template .rmVertical,
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmText,
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmFirst .rmText,
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmLast .rmText,
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmFirst .rmLink:hover .rmText,
.vNavWrap .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*/
.vnavWrap .RadMenu_Template .rmVertical .rmLink {
    color: #615341;
    text-decoration: none;
	font-size: 14px;
    font-weight: normal;
    line-height: 25px;
	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:uppercase;

	
}

.vNavWrap .RadMenu_Template .rmVertical .rmLink:hover, 
.vNavWrap .RadMenu_Template .rmVertical .rmFocused, 
.vNavWrap .RadMenu_Template .rmVertical .rmSelected, 
.vNavWrap .RadMenu_Template .rmVertical .rmExpanded, 
.vNavWrap .RadMenu_Template .rmVertical .rmExpanded:hover, 
.vNavWrap .RadMenu_Template .rmVertical .rmDisabled, 
.vNavWrap .RadMenu_Template .rmVertical .rmDisabled:hover {
     background:none; 
	 color:#810000;
	 padding: 0; /*overrides padding*/
	 border:0; /*overrides border in Template.css*/

}

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

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

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

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

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

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


.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmLink:hover, 
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmFocused, 
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmSelected, 
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmExpanded, 
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmExpanded:hover, 
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmDisabled, 
.vNavWrap .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*/
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmLink .rmText,
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmFirst .rmLink .rmText,
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmLast .rmLink .rmText,
.vNavWrap .RadMenu_Template .rmVertical .rmGroup .rmFirst .rmLink:hover .rmText,
.vNavWrap .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/navArrow1.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
-----*/


#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 
{
    
}