/*------------------------------------

Sitecore Theme 
Sage 2010 

------------------------------------*/

/*----------------------------------------------------------
 Start navContainer
----------------------------------------------------------*/


#navContainer {
height: 37px;
margin-top: 20px;
float: left; 
}


/*----------------------------------------------------------
 End navContainer
----------------------------------------------------------*/

/*----------------------------------------------------------
 Start tabs
----------------------------------------------------------*/


ul.navigation li a {
padding: 0 0 0 15px;
color: #727272;
height: 40px;
font-size: 12px;
font-weight: bold;
background: url(/common/images/bg_leftTab.jpg) top left no-repeat;
text-decoration: none;
display: block;
float: left;
}

ul.navigation li a span {
padding: 14px 15px 11px 0;
background: url(/common/images/bg_rightTab.jpg) top right no-repeat;
float: left;
cursor: pointer;
}

ul.navigation li a:hover, 
ul.navigation li.selected a:hover  {
color: #007f64;
background: url(/common/images/bg_leftTabRoll.jpg) top left no-repeat;
}

ul.navigation li a:hover span, 
ul.navigation li.selected a:hover span {
background: url(/common/images/bg_rightTabRoll.jpg) top right no-repeat;
}

ul.navigation li.selected a {
color: #727272;
background: url(/~/media/themes/sage2010/images/bg_lefttabselected) top left no-repeat;
}

ul.navigation li.selected a span {
background: url(/~/media/themes/sage2010/images/bg_righttabselected) top right no-repeat;
}

ul.navigation li {
margin: 0 2px 0 0;
float: left;
}

ul.navigation table, tr, td {
border-collapse:collapse; 
margin:0; 
padding:0;
}

/*----------------------------------------------------------
 End tabs
----------------------------------------------------------*/

/*----------------------------------------------------------
 Start flyouts
----------------------------------------------------------*/


ul.navigation li li {
float:none; 
margin:0;
}

/* a hack for IE5.x and IE6 */
ul.navigation li a li {
float:left;
}

ul.navigation li li a, 
ul.navigation li.selected li a {
height: auto;
width: 180px;
padding: 5px; 
color: #727272; 
font-weight: normal;
background: #fff; 
float:none; 
}

ul.navigation li:hover {
position:relative; 
z-index:100; 
color:#007f64;
background-color: #efefef;
}

ul.navigation a:hover {
position:relative; 
z-index:100; 
color:#007f64;
border:0;
}

/*Applies color to all link children of li*/
ul.navigation li:hover > a {
color:#007f64;
}

ul.navigation :hover  ul {
left:0; 
top:40px; 
z-index:300; 
width: 190px; 
border: 1px solid #DFDFDF; 
background: #fff;
}

ul.navigation a:hover ul {
left:-1px;
}

ul.navigation :hover  ul li a:hover, 
ul.navigation :hover  ul li a {
background: none;
}

ul.navigation ul {
position:absolute; left:-9999px; top:-9999px;
}

/* it could have been this simple if all browsers understood */
/* show next level */
ul.navigation li:hover li:hover > ul {
left:0; margin-left:100%; top:-1px;
width: 190px;
}

/* keep further levels hidden */
ul.navigation li:hover > ul ul {
position:absolute; left:-9999px; top:-9999px; width:190px;
}

/* show path followed */
ul.navigation li:hover li:hover > a {
color: #007f64;
}

ul.navigation li a:hover ul li a:hover {
color: #007f64; background-color: #efefef;
}

/*Styling for flyout menus*/
/* but IE5.x and IE6 need this lot to style the flyouts*/
/* show next level */
ul.navigation a:hover a:hover ul,
ul.navigation a:hover a:hover a:hover ul,
ul.navigation a:hover a:hover a:hover a:hover ul,
ul.navigation a:hover a:hover a:hover a:hover a:hover ul {
left:100%; top:-1px;
}

/* keep further levels hidden */
ul.navigation a:hover ul ul,
ul.navigation a:hover a:hover ul ul,
ul.navigation a:hover a:hover a:hover ul ul,
ul.navigation a:hover a:hover a:hover a:hover ul ul {
position:absolute; left:-9999px; top:-9999px;
}

ul.navigation :hover ul li a.fly {
background: #fff url(/common/images/gfx_navArrow.gif) no-repeat right center;
}

ul.navigation :hover ul li a.fly:hover {
background: #efefef url(/common/images/gfx_navArrow.gif) no-repeat right center;
}

ul.navigation :hover ul li:hover > a.fly {
background: url(/common/images/gfx_navArrow.gif) no-repeat right center;
}



/*----------------------------------------------------------
 End flyouts
----------------------------------------------------------*/