/*
<summary>
Generic ContextMenu Style Rules
==========================

The Context Toolbar abstracts 99.9% of its presentation into a CSS stylesheet. 
By manipulating the associated menu definition XML file, it is possible to associate any Css class
name with any menu or menuitem.  

The following CSS classes are defined as examples only. Comments preceeding each class
outline it's function, and any attributes that should always be present.
</summary>
*/


/*
<summary>
Positions and renders a background arrow caret used to indicate the presence of a child 
menu on any parent menu item. This particular class renders a vertical arrow graphic, indicating
that the child menu will appear beside the parent menu item. NB: Should be used in conjunction
with the XML menu attributes 'orientation' and 'imageChildMenuCaretCssClass'. E.g. if orientation is
1 (Vertical), 'imageChildMenuCaretCssClass' would be 'arrowCaretHorizontal'. 
</summary>
*/
.arrowCaretHorizontal
{
	background-image: url(images/tb/arrow.png);
	background-position: right center;
	background-repeat: no-repeat;
}

/*
<summary>
Positions and renders a background arrow caret used to indicate the presence of a child
menu on any parent menu item. This particular class renders a vertical arrow graphic, indicating
that the child menu will appear below the parent menu item. Should be used in conjunction
with the XML menu attributes 'orientation' and 'imageChildMenuCaretCssClass'. E.g. if orientation is
0 (HorizontalAlignLeft), 'imageChildMenuCaretCssClass' would be 'arrowCaretVertical'. 
</summary>
*/
.arrowCaretVertical
{
	background-image: url(images/tb/arrow_vertical.png);
	background-position: right center;
	background-repeat: no-repeat;
}


/*
<summary>
Overarching CSS class that configures all menus within the menuDiv to use the default arrow pointer.
</summary>
*/
.menuDiv
{
	cursor: default;
	/*width:804px;*/
	height:20px;
}

/*
<summary>
Configures a style that is applied to the root menu <ul /> element when it is enabled
or disabled. 
</summary>
*/
.rootMenu,
.rootMenuDisabled
{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    width:100%;
    float:left;
}

/*
<summary>
Configures a style that is applied to root menu item (<li />) elements when they are 
enabled or disabled.
</summary>
*/
.rootMenuItem, 
.rootMenuItemDisabled
{
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:10px;
    width:auto;
    height:20px;
    padding: 0 2px 0 2px;
    color:#6A6B6B;
}

.rootMenuItem:hover
{
	font-weight:normal;
	text-decoration: none;
	cursor: pointer;
}


/*
<summary>
Defines an override for any <a /> elements contained within any child menu (<ul />) element or
any of it's children (menu item - <li /> elements). This style prevents hyperlinks from 
'purpling out' once clicked. 
<summary/>
*/
.childMenu a
{
	color:#6A6B6B;
	text-decoration:none;
	cursor:pointer;
}

/*
<summary>
Defines an override for the :hover pseduo class of any <a /> elements contained within any child menu (<ul />) element or
any of it's children (menu item - <li /> elements). This style highlights the link when hovered over.
</summary>
*/
.childMenu a:hover 
{
	color:white !important;
	text-decoration:none;
	cursor:pointer;
}

/*
<summary>
Configures a style that is applied to child menu (<ul />) elements when they are 
enabled or disabled.		
</summary>
*/
.childMenu,
.childMenuDisabled
{
	border: solid 1px rgb(128,128,128);
    margin: 0;
    padding:0;
    float:left;
    list-style-type:none;
    list-style-position:outside;
    cursor: pointer;
}

/*
<summary>
Configures a style that is applied to child menu item (<li />) elements when they are 
enabled.		
</summary>
*/
.childMenuItem
{
	font-family: Verdana, Trebuchet, Helvetica, Arial, "MS Sans Serif", Futura;
	font-size:10px;
    width:100px;
    background-color:white;
    border: none;
    height:20px;
    padding: 5px 0 0 4px;
    text-align:left;
    vertical-align:middle;
}

/*
<summary>
Configures a style that is applied to child menu item (<li />) elements when they are 
hovered over.		
</summary>
*/
.childMenuItem:hover
{
/*   background-color: rgb(186,190,226);
    color:#f00; */
	color:white;
	background-color:#FE9900;
}   
.childMenuItem:hover a
{
	color:White !important;
}

.childMenuItemBorderTop
{
	border-top: solid 1px #D5D6D2 !important;
}

/*
<summary>
Configures a style that is applied to child menu item (<li />) elements when they are 
disabled.		
</summary>
*/
.childMenuItemDisabled
{   
    font-family: Verdana, Trebuchet, Helvetica, Arial, "MS Sans Serif", Futura;
	font-size:10px;
    width:100px;
    color: white;
    background-color:rgb(240,240,234);
    border: none;
    height:20px;
    padding: 5px 0 0 4px;
    text-align:left;
    vertical-align:middle;       
}

/*
<summary>
Configures a style that is applied to and <img /> tags within a  child menu item (<li />) elements. 
Applies to both enabled and disabled modes. 
</summary>
*/
.childMenuItemDisabled img,
.childMenuItem img
{
	margin-right:8px;
}

/*
<summary>
Configures a style that is applied to any child menu item (<li />) elements within a  child menu (<ul />) element.
This style removes the top border from every 2nd-to-n child menu item in a child menu, preventing double borders
occuring.  
</summary>
*/
.childMenu li + li,
.childMenuDisabled li + li
{
	border-top:none;
}