﻿/* -------------------------------------------------------------- 
	
	navigation.css	
	* Styles for navigation elements
	
-------------------------------------------------------------- */

/* Constant Navigation */
#constants ul { }

#constants ul li {
	float: left;
	font-size: 1.2em;
	color: #cccccc;
	text-transform: uppercase;
}

#constants ul a {
	color: #cccccc;
	text-decoration: none;
	margin-right:6px;
}
	
#constants ul a span {
	margin-right:6px;
}
	
#constants ul a:hover {
	color: #fff;
}
#constants .account-login{
    margin-left: 10px;
}
#constants .account-login a{
    background: #46992f;
    padding: 2px 10px;
    color: #ffffff;
    text-transform: capitalize;
    margin-right: 0;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
	
/* Navigation with Separate Level One and Sublevel Navigation */
#levelOneNavigation { }

#levelOneNavigation ul { }

#levelOneNavigation ul.menuH > li {
	float: left;
}

#levelOneNavigation ul.menuH > li > a {
	display: block;
	height: 63px;
	background: url(../img/navigation/navigation1.png);
}

/* Backgrounds */
#levelOneNavigation #HomeComfort > a {
	width: 161px;
	background-position: 0 0;
}

#levelOneNavigation #CleanBurn > a {
	width: 161px;
	background-position: -161px 0;
}

#levelOneNavigation #Lubricants > a {
	width: 161px;
	background-position: -322px 0;
}

#levelOneNavigation #MotorFuels > a {
	width: 161px;
	background-position: -483px 0;
}

#levelOneNavigation #BusinessOpportunities > a {
	width: 161px;
	background-position: -644px 0;
}

#levelOneNavigation #RenewableEnergy > a {
	width: 160px;
	background-position: -805px 0;
}

/* Rollover Backgrounds */
#levelOneNavigation #HomeComfort > a:hover {
	background-position: 0 -63px;
}

#levelOneNavigation #CleanBurn > a:hover {
	background-position: -161px -63px;
}

#levelOneNavigation #Lubricants > a:hover {
	background-position: -322px -63px;
}

#levelOneNavigation #MotorFuels > a:hover {
	background-position: -483px -63px;
}

#levelOneNavigation #BusinessOpportunities > a:hover {
	background-position: -644px -63px;
}

#levelOneNavigation #RenewableEnergy > a:hover {
	background-position: -805px -63px;
}


/* Active Backgrounds */
#levelOneNavigation #HomeComfort a#levelOneSelected {
	background-position: 0 -63px;
}

#levelOneNavigation #CleanBurn a#levelOneSelected {
	background-position: -161px -63px;
}

#levelOneNavigation #Lubricants a#levelOneSelected {
	background-position: -322px -63px;
}

#levelOneNavigation #MotorFuels a#levelOneSelected {
	background-position: -483px -63px;
}

#levelOneNavigation #BusinessOpportunities a#levelOneSelected {
	background-position: -644px -63px;
}

#levelOneNavigation #RenewableEnergy a#levelOneSelected {
	background-position: -805px -63px;
}

#levelOneNavigation ul span {
	display: none;
}

#sublevelNavigation {}

	#sublevelNavigation ul {
     padding:270px 10px 40px 10px;/*padding: 28px 19px 40px 17px;*/
		*padding-top: 48px;
	}
	#sublevelNavigation ul ul {
		padding: 0;
	}
	
#sublevelNavigation ul li {
    padding-bottom: 4px;
    margin-left:0;
    font-weight: normal;
    line-height:22px;
}


#sublevelNavigation ul a {
    font-size: 13px;
	line-height: 22px;
	color: #004785;
    font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
    background: #f6f6f6;
    padding: 6px 5px;
    display: block;
}
	
#sublevelNavigation ul a:hover, #sublevelNavigation ul a.menuactive {
	color: #004785;
}
/* ihm changed */
#sublevelNavigation ul li ul li{
	
    margin-left: 0;
    border-top:1px solid #d7d7d7;
	width:170px;
    overflow:visible;
    padding-left: 0;
    padding-top:7px;
    font-weight:normal;
   
}
#sublevelNavigation ul li ul li:first-child{
    border: none;
    
}
    
#sublevelNavigation ul li ul li a {
    color:#898989;
    font-size: 12px;
	line-height: 12px;
    background: none;
    padding-left: 15px;
    font-weight: normal;
}

/* Selected States */
#levelOneSelected { }
	
#sublevelSelected {
	color: #fff;
}

#fba{padding:0px 0 0 35px;position:static;margin-bottom:0; }
#fba-hp{margin-top:10px;float:right;padding-right:100px; }

/*######sub level###########*/
.menuH li{
    position: relative !important;
}
.menuH a.arrow
{
    background: url(../img/arrow.png) no-repeat right center !important;
}
.menuH ul a.arrow
{
    background: url(../img/arrow.png) no-repeat 97% center !important;
}        
ul.menuH ul
{
    width:200px;
    position: absolute;
    left: -9999px;
    border:none;
    border-top: 0; 
    background: #494949;    
    text-align: left;
    list-style: none; margin: 0;  
    /*Following 1px(padding-right) will determine how much it is overlapped by the sub-sub-menu */
    padding: 0 1px 10px 0;   
    margin: 0 0 0 1px;
}
.menuH li li.last-child{
    background: none;
}
.menuH li li {
    background: url("../img/divider.png") repeat-x scroll center bottom rgba(0, 0, 0, 0);
    float: none !important;
    height: 40px;
    white-space: nowrap;
}
.menuH li li:hover, .menuH li li.onhover
{
    background:#747474;
}
.menuH ul a
{
    padding: 10px 20px;
    line-height: 26px;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-align: left;
    display: block;
    text-decoration: none;
    font-family: sans-serif;
}

.menuH ul a:hover
{
    color: #004785;
}

.menuH li:hover ul, .menuH li.onhover ul
{
    left: -1px;/*Use this property to change offset of the dropdown*/
    top: auto;
}

.menuH li:hover .dropToLeft, .menuH li.onhover .dropToLeft
{
    left: auto;
    right: -1px;
    top: auto;
}
.menuH ul ul
{
    /*border-top: 1px solid #DDD;*/
}

.menuH li:hover ul ul, .menuH li:hover ul ul ul, .menuH li:hover ul ul ul ul,
.menuH li.onhover ul ul, .menuH li.onhover ul ul ul, .menuH li.onhover ul ul ul ul
{
    left: -9999px;
    top:0;
}

.menuH li li:hover ul, .menuH li li li:hover ul, .menuH li li li li:hover ul,
.menuH li li.onhover ul, .menuH li li li.onhover ul, .menuH li li li li.onhover ul
{
    left: 200px;
}
        
/*####### special effects ##########*/
        
.decor1
{
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Safari and Chrome */
    border-radius: 3px; /* Opera 10.5+, future browsers, and now also our behavior htc file */
    /*
    -moz-box-shadow: 0px 1px 4px #000;
    -webkit-box-shadow: 0px 1px 4px #000;
    box-shadow: 0px 1px 4px #000;
    */        
}
.menuH ul 
{
    -moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
/*
    -moz-box-shadow: 0px 6px 6px #000;
    -webkit-box-shadow: 0px 6px 6px #000;
    box-shadow: 0px 6px 6px #000;
   */  
    z-index: 999999;
    
}
.menuH ul222{
    display: none !important;
}

li.last-child:hover, li.last-child .menuH li li.onhover
{
    background:#747474;
}