@import url(_fonts/Libre Baskerville/stylesheet.css);

/* NEW Menu Slide Out default CSS
Author: Jason Nolfi
Version: 5

Updates [3/15/12]:
* Fixes quirk that was not placing background on subsequent sublevels
* Fixes issue where margin of dropdown was 1px off of top level parent item
* Adds .rmSelectedParent class to style top level parent item selected state when on a sub page (NOTE: cannot set menu to 1 level for this to work - code refers to the HTML rather than the nodes in sitebuilder. If using a one level navigation, add display:none !important; to the rmGroup classes.

Updates [10/25/11]:
* Fixed issues with background images in the rmText and rmExpandRight classes (see Greystone for an example). Any nav divider images should appear in this code:
#Navigation .RadMenu_Template .rmRootGroup .rmLink,
#Navigation .RadMenu_Template .rmRootGroup .rmText
The background divider can be taken off in the subsequent .rmGroup listing
* Fixed issue with the margin of the dropdown menus

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 on top level and sublevel items and scrolling arrows in navigation

Updates [8/21/12]: 
* General cleanup
* Fixes issues generated by width:100% for a and span classes. Also adds notation to explain change in css 

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

SubMenu Structure
[DIV]   [ DIV ]        [ UL ]   [ LI ]  [ A  ] [ SPAN ]
#Navigation .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 43
II. Vertical Navigation Styles - Line 225
III. Arrows for Navigation Items To Declare submenus - Line 401

*/

/*----
RESET STYLES
----*/
#Navigation .RadMenu_Template,
#Navigation .RadMenu_Template .rmItem,
#Navigation .RadMenu_Template .rmLink,
#Navigation .RadMenu_Template .rmText,
#Navigation .RadMenu_Template .rmHorizontal .rmText,
#Navigation .RadMenu_Template .rmRootGroup,
#Navigation .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

UPDATE: 10/25/11: JN - Divider image for nav goes into this class
UPDATE: 8/21/12: JN - Use width 100% if using plugin to define widths -> Set to auto if disabling widths
---*/	
#Navigation .RadMenu_Template .rmRootGroup .rmLink,
#Navigation .RadMenu_Template .rmRootGroup .rmText
 {width:auto;}


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

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


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

#Navigation .RadMenu_Template .rmRootGroup .rmItem .rmLink .rmText,
#Navigation .RadMenu_Template .rmRootGroup .rmItem .rmLink:hover .rmText,
#Navigation .RadMenu_Template .rmRootGroup .rmItem .expanded .rmText {
 /*text-transform: uppercase;*/

}

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

/*----
DIV > UL > A
*root level link
-----*/
#Navigation .RadMenu_Template .rmRootGroup .rmLink {
   color: #ffffff;
    text-decoration: none;
	font-size: 14px;
	font-family: "Palatino Linotype", Palatino, Georgia, serif;
	cursor: pointer;
	text-align:center;
	line-height: 20px;
	/*padding: 0 13px 0 10px; This was for the normal padding*/ 
	padding: 0 10px; 
}


/*#privnav #Navigation .RadMenu_Template .rmGroup a.rmLink {
	padding: 0px;
}

#pubnav #Navigation .RadMenu_Template .rmGroup a.rmLink {
	padding: 0px;
}*/


#Navigation .RadMenu_Template .rmRootGroup .rmLast .rmLink,
#Navigation .RadMenu_Template .rmRootGroup .rmLast .rmLink:hover, 
#Navigation .RadMenu_Template .rmRootGroup .rmLast .rmFocused, 
#Navigation .RadMenu_Template .rmRootGroup .rmLast .rmSelected, 
#Navigation .RadMenu_Template .rmRootGroup .rmLast .rmExpanded, 
#Navigation .RadMenu_Template .rmRootGroup .rmLast .rmExpanded:hover, 
#Navigation .RadMenu_Template .rmRootGroup .rmLast .rmDisabled, 
#Navigation .RadMenu_Template .rmRootGroup .rmLast .rmDisabled:hover {
	padding-right: 0px;
	background: none;
}


/*----
DIV > LI > A
* This block controls hover effects and selected states of A elements
-----*/
#Navigation .RadMenu_Template .rmRootGroup .rmExpanded,
#Navigation .RadMenu_Template .rmRootGroup .rmExpanded:hover,
#Navigation .RadMenu_Template .rmRootGroup .rmLink:hover {
	color: #AA8A4C;
}

#Navigation .RadMenu_Template .rmRootGroup .rmFocused, 
#Navigation .RadMenu_Template .rmRootGroup .rmSelected, 
 
 
#Navigation .RadMenu_Template .rmRootGroup .rmDisabled, 
#Navigation .RadMenu_Template .rmRootGroup .rmDisabled:hover {
	color: #AA8A4C;
	
}
/*--
UPDATE 3/15/12
*Use the below styles to add a selected state to parent item in hnav when you are on one of its subpages
---*/
#Navigation .RadMenu_Template .rmRootGroup .rmSelectedParent,
#Navigation .RadMenu_Template .rmRootGroup .rmSelectedParent:hover
 {
   color: #AA8A4C;
   
}


/*----
*UPDATE* 10/25/11
DIV
* This controls the submenu DIV container and cascades down to all levels
*UPDATE* 3/15/12
* Overrides template stylesheet negative margin to create better alignment (First submenu) - FIXES ERROR IN CODE
------*/
#Navigation .RadMenu_Template .rmSlide,
#Navigation .RadMenu_Template .rmVertical .rmSlide,
#Navigation .RadMenu_Template_Context .rmGroup .rmSlide {
	margin:0;
}

/*----
DIV > UL > LI > UL
* This controls the submenu UL 
------*/
#Navigation .RadMenu_Template .rmGroup,
/*---
*UPDATE: 3/15/12*
ADDED BELOW CLASSES TO OVERRIDE TEMPLATE CSS AND ALLOW BACKGROUNDS TO SHOW UP PROPERLY ON SUBSEQUENT SUBLEVELS
----*/
#Navigation .RadMenu_Template .rmMultiColumn, 
#Navigation .RadMenu_Template .rmGroup .rmVertical {
	background: #FFF;
	padding:10px 0px!important;  /*Overrides padding from telerik stylesheet*/
	
	}
	
/*---------
DIV UL > LI > UL > SPAN
* Controls text in submenu regardless
----------*/
/*JN 10/11/2011 - Fix so elements on submenus don't inherit width:100%
*UPDATE* 10/25/11 - add background:none so elements on submenus don't inherit background divider image 
*/
#Navigation .RadMenu_Template .rmGroup .rmLink,
#Navigation .RadMenu_Template .rmGroup .rmText {width:225px; /*background:none;*/}

/*UPDATE* 8/21/12 - Using padding here to space -> more fluid than margins and allows for better arrow positioning*/	
#Navigation .RadMenu_Template .rmGroup .rmItem .rmLink .rmText,
#Navigation .RadMenu_Template .rmGroup .rmItem .rmLink:hover .rmText {
padding:0 34px 0 10px; /*USE MARGIN TO SPACE SUBNAV ELEMENTS IN SUBMENU BOX - IE Fix*/
border:none;
}
	

/*-----
DIV > UL > LI > UL > A
*This block controls the style of the link in the sub UL
------*/
#Navigation .RadMenu_Template .rmGroup .rmLink {
	color: #17275A;
    text-decoration: none;
	font-size: 14px;
    font-weight: normal;
	font-family: "Palatino Linotype", Palatino, Georgia, serif;
	cursor: pointer;
	text-align:left;
	padding: 0px;
	background: none;
	text-transform: none;
	line-height: 24px;
}

/*-----
DIV > UL > LI > UL > A:Hover
* This block controls hover effects and selected states of A elements in the sub ULs  
----*/
#Navigation .RadMenu_Template .rmItem .rmGroup a.rmLink:hover,
#Navigation .RadMenu_Template .rmItem .rmGroup a.rmFocused, 
#Navigation .RadMenu_Template .rmItem .rmGroup a.rmSelected, 
#Navigation .RadMenu_Template .rmItem .rmGroup a.rmExpanded, 
#Navigation .RadMenu_Template .rmItem .rmGroup a.rmExpanded:hover, 
#Navigation .RadMenu_Template .rmItem .rmGroup a.rmDisabled, 
#Navigation .RadMenu_Template .rmItem .rmGroup a.rmDisabled:hover {
   text-decoration: none;
   color: #B79D6D;
}




/*----
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**
#Navigation .RadMenu_Template .rmGroup .rmExpandRight, 
#Navigation .RadMenu_Template .rmGroup .rmExpandLeft {
    background: url("menu/subNavArrow.gif") no-repeat scroll 90% center transparent;
}

**Hover State**
#Navigation .RadMenu_Template .rmGroup a.rmLink:hover .rmExpandRight, 
#Navigation .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. 

*UPDATE: 3/15/12: Removing above classes from arrow declarations, as they are not really in use.

-----*/

#Navigation .RadMenu_Template .rmGroup .rmText.rmExpandRight, 
#Navigation .RadMenu_Template .rmGroup .rmText.rmExpandLeft,
#Navigation .RadMenu_Template .rmText.rmTopArrow, 
#Navigation .RadMenu_Template .rmText.rmBottomArrow, 
#Navigation .RadMenu_Template .rmText.rmLeftArrow, 
#Navigation .RadMenu_Template .rmText.rmRightArrow
 {
background:url(../../../../images/dropdownarrow.png) right 50% no-repeat;
padding-right:30px/ /*This creates space for the arrows*/
}

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

#Navigation .RadMenu_Template .rmGroup a.rmLink:hover .rmExpandRight, 
#Navigation .RadMenu_Template .rmGroup a.rmLink:hover .rmExpandLeft, 
#Navigation .RadMenu_Template .rmGroup .rmExpanded .rmExpandRight, 
#Navigation .RadMenu_Template .rmGroup .rmExpanded .rmExpandLeft, 
#Navigation .RadMenu_Template .rmGroup a.rmLink:hover .rmTopArrow, 
#Navigation .RadMenu_Template .rmGroup a.rmLink:hover .rmBottomArrow, 
#Navigation .RadMenu_Template .rmGroup a.rmLink:hover .rmLeftArrow, 
#Navigation .RadMenu_Template .rmGroup a.rmLink:hover .rmRightArrow 
{
    background:url(../../../../images/dropdownarrow.png) right 50% no-repeat;
}

#Navigation .RadMenu_Template .rmVertical .rmSlide,
#Navigation .RadMenu_Template .rmSlide,
#Navigation .RadMenu_Template_Context .rmGroup .rmSlide {
margin:0;
}
#Navigation .RadMenu_Template .rmGroup,
#Navigation .RadMenu_Template .rmMultiColumn, .navWrap .RadMenu_Template .rmGroup .rmVertical {
background: #FFF;
padding:10px 0px!important; /*Overrides padding from telerik stylesheet*/
border:0;
margin-top: 14px;
}

#Navigation .RadMenu_Template .rmGroup .rmLevel2,
#Navigation .RadMenu_Template .rmMultiColumn .rmLevel2 {
	margin-top: 0px!important;
}

.rmSized ul.rmRootGroup {
	float: right!important;
}