/* ----------------------------------------------- 
	Newalta Menu Stylesheet
	Author: Justin Luk
	Created on: Jun 13 2008
-------------------------------------------------- */

/* =TOP MENU
------------------------------------------------- */
/* 
	class 'selected' means it is part of the breadcrumb/parents of the current page 
		class 'current' means it is the current page
*/

#top-menu {
	background: #efefef url(/img/template/menu-bg.gif) no-repeat top left;
	height: 36px;
	margin: 0 2px;
}

#top-menu ul { 
	list-style: none;
	margin: 0 0 0 3px;
	padding: 0;
}

#top-menu ul ul { margin: 0; }

#top-menu ul ul {	background: #fff url(/img/nav/gradient.gif) repeat-x bottom; }
#top-menu ul li { 
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	background: none;
}

#top-menu ul li ul li {
	float: none;
	zoom: 1;
}

#top-menu ul li ul li a {
	border: solid #fff;
	border-width: 0 4px;
}

#top-menu ul li a .subind {
	background: transparent url(/img/nav/arrow.gif) no-repeat 100% 0;
	width: 14px;
	height: 7px;
	text-indent: -5000px;
	margin-top: 4px;
	overflow: hidden;
}

#top-menu ul li a:hover .subind { background-position: 100% -7px; }

#top-menu ul li ul li.first a { border-top: 4px solid #fff; }
#top-menu ul li ul li.first ul li a { border-top: 0;}
#top-menu ul li ul li.first ul li.first a {  border-top: 4px solid #fff;}
#top-menu ul li ul li.last { border-bottom: 4px solid #fff; }

#top-menu ul li a { 
	color: #6f6f6f;
	text-decoration: none;
	text-align: center;
	line-height: 2.5em;
	font-size: 12px;
	font-weight: 700;
	text-indent: -50000px;
	display: block;
	height: 29px;
	padding: 0;
	margin: 2px 0 0;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center 0;
}

#top-menu ul ul li a { 
	float: none;
	text-align: left;
	margin: 0;
	padding: 5px 10px 4px 13px;
	font-weight: 400;
	font-size: 11px;
	height: auto;
	line-height: 1.2em;
}

#top-menu ul ul li.last a {	padding-bottom: 10px; }

#top-menu #mi-1 a,
#top-menu #mi-innovation a,
#top-menu #mi-5 a,
#top-menu #mi-19 a,
#top-menu #mi-1435 a,
#top-menu #mi-23 a,
#top-menu #mi-1468 a,

/* French */
#top-menu #mi-2472 a,
#top-menu #mi-4816 a,
#top-menu #mi-4827 a,
#top-menu #mi-4837 a,
#top-menu #mi-4864 a,
#top-menu #mi-4867 a {
	height: 29px;
	text-indent: -50000px;
	position: relative;
	margin-left: -2px;
}

/* RESET secondary menu*/
#top-menu #mi-1 ul li a,
#top-menu #mi-innovation ul li a,
#top-menu #mi-5 ul li a,
#top-menu #mi-19 ul li a,
#top-menu #mi-1435 ul li a,
#top-menu #mi-23 ul li a,
#top-menu #mi-1468 ul li a,

/* French */
#top-menu #mi-2472 ul li a,
#top-menu #mi-4816 ul li a,
#top-menu #mi-4827 ul li a,
#top-menu #mi-4837 ul li a,
#top-menu #mi-4864 ul li a,
#top-menu #mi-4867 ul li a { 
	height: auto; 
	background: none; 
	text-indent: 0; 
	width: auto;
	margin: 0;
}



/* Width is full width of images 	*/
#top-menu #mi-1 a { margin-left: 0; width: 56px; background-image: url(/img/template/top-menu/home.gif);}
#top-menu #mi-innovation a { width: 81px; background-image: url(/img/template/top-menu/innovation.gif);}
#top-menu #mi-5 a { width: 91px; background-image: url(/img/template/top-menu/our-company.gif);}
#top-menu #mi-19 a { width: 125px; background-image: url(/img/template/top-menu/products-services.gif);}
#top-menu #mi-1435 a { width: 115px; background-image: url(/img/template/top-menu/investor-relations.gif);}
#top-menu #mi-23 a { width: 66px; background-image: url(/img/template/top-menu/careers.gif);}
#top-menu #mi-1468 a { width: 80px; background-image: url(/img/template/top-menu/our-values.gif);}

/* French */
#top-menu #mi-2472 a { margin-left: 0; width: 90px; background-image: url(/img/template/top-menu/page-d-accueil.gif) }
#top-menu #mi-4816 a {width: 119px; background-image: url(/img/template/top-menu/profil-de-l-enterprise.gif) }
#top-menu #mi-4827 a {width: 115px; background-image: url(/img/template/top-menu/produits-et-services.gif) }
#top-menu #mi-4837 a {width: 170px; background-image: url(/img/template/top-menu/relations-avec-les-investisseurs.gif) }
#top-menu #mi-4864 a {width: 65px; background-image: url(/img/template/top-menu/carrieres.gif) }
#top-menu #mi-4867 a {width: 56px; background-image: url(/img/template/top-menu/valeurs.gif) }

	
/* Hover and Selected States for frist level */
#top-menu #mi-1 a:hover,
#top-menu #mi-innovation a:hover,
#top-menu #mi-5 a:hover,
#top-menu #mi-19 a:hover,
#top-menu #mi-1435 a:hover,
#top-menu #mi-23 a:hover,
#top-menu #mi-1468 a:hover,

/* French */
#top-menu #mi-2472 a:hover,
#top-menu #mi-4816 a:hover,
#top-menu #mi-4827 a:hover,
#top-menu #mi-4837 a:hover,
#top-menu #mi-4864 a:hover,
#top-menu #mi-4867 a:hover,

#top-menu #mi-1.selected a,
#top-menu #mi-innovation.selected a,
#top-menu #mi-5.selected a,
#top-menu #mi-19.selected a,
#top-menu #mi-1435.selected a,
#top-menu #mi-23.selected a,
#top-menu #mi-1468.selected a,

/* French */
#top-menu #mi-2472.selected a,
#top-menu #mi-4816.selected a,
#top-menu #mi-4827.selected a,
#top-menu #mi-4837.selected a,
#top-menu #mi-4864.selected a,
#top-menu #mi-4867.selected a,


#top-menu ul li a.highlighted {
	background-position: 0 -29px; 
	text-decoration: none;
}



#top-menu a:hover,
#top-menu .selected li a:hover { color: #006bb7; }


#top-menu .selected a {	color: #006bb7;	}
#top-menu .selected li a {	color: #6f6f6f;	}
#top-menu ul li ul li.first a { margin-top: 2px; } /*Only sub needs this on the live site*/
#top-menu ul li.last a { }


/* Test for Text only links*/
#top-menu ul li a { 
	background: none; 	
	width: auto; 
}
#top-menu ul li.hide a {
	display: none;
}

#admin #top-menu ul li.hide a {
	display: block;
	opacity: .5; filter: alpha(opacity=50);
}  


#top-menu ul li ul li a {
	text-indent: 0;
}

/* HORIZONTAL FREESTYLE MENU LAYOUT */


/* All <ul> tags in the menu including the first level */
.menulist, 
.menulist  ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
	display: none;
	position: absolute;
	top: 32px; 
	margin-top: 13px; /* I'm using ems and px to allow people to zoom their font */
	left: -3px;
	width: 170px; /*Fits longest top menu item on french side*/
	background: #fff;
	border: solid #cfcfcf;
	border-width: 0 1px 1px 1px;
}

/* Innovation Custom menu */

#top-menu ul #mi-innovation-sub { 
	padding-top: 10px; 
	border:4px solid #fff;
	zoom: 1;
	margin-bottom: 0;
}
#top-menu ul #mi-innovation-sub a { border: 0; display: none;}

#top-menu ul #mi-innovation-sub ul,
#top-menu ul #mi-innovation-sub ul li {
	border: 0;
}

#top-menu #mi-innovation ul  {
	width: 700px;
}



#top-menu #mi-innovation ul li a {
	display: block;
	width: 177px; /* FOR IE 6's dispaearing act */
	height: 94px;/* FOR IE 6's dispaearing act  */
}	
#top-menu #mi-innovation ul li ul {
	position: absolute; 
	top: 15px;
	left: 210px;
	height: 200px;
	background: none;
	border: 0;
	display: block;/*
	overflow: auto;*/
}

#top-menu #mi-innovation ul li ul li {
	display: block;
	float: left;
	padding-left: 8px;
	margin: 0;
	position:static;
	background: none;
}

#top-menu #mi-innovation ul li ul li a{
	text-indent: -5000px;
	display: block;
	float: left;
	width: 108px;
	height: 55px;
	overflow: hidden;
	padding: 0;
	margin: 0;
	border: 1px solid #fff;
	background: none;
}

/*#top-menu #mi-innovation ul li#innovation-oily-sand a{background: url(/img/innovation/innovation.jpg) no-repeat 0 0; }*/
#top-menu #mi-innovation ul li#innovation-single-oil-well a{background: url(/img/innovation/innovation.jpg) no-repeat -120px 0; }
#top-menu #mi-innovation ul li#innovation-mountain-of-lead a{ background: url(/img/innovation/innovation.jpg) no-repeat -240px 0; }
#top-menu #mi-innovation ul li#innovation-waste-lube-oil a{ background: url(/img/innovation/innovation.jpg) no-repeat -360px 0; }

/*#top-menu #mi-innovation ul li#innovation-oily-sand a:hover{background: url(/img/innovation/innovation.jpg) no-repeat 0 -55px; }*/
#top-menu #mi-innovation ul li#innovation-single-oil-well a:hover{background: url(/img/innovation/innovation.jpg) no-repeat -120px -55px; }
#top-menu #mi-innovation ul li#innovation-mountain-of-lead a:hover{ background: url(/img/innovation/innovation.jpg) no-repeat -240px -55px; }
#top-menu #mi-innovation ul li#innovation-waste-lube-oil a:hover{ background: url(/img/innovation/innovation.jpg) no-repeat -360px -55px; }


#top-menu #mi-innovation ul li ul li span {
	position: absolute;
	top: 67px;
	left: 10px;
	display: block;
	z-index: 10; 
	color: #006bb7;
	font-size: 14px;
}


#top-menu #mi-innovation ul li a .subind{ display: none;}

/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
	top: -1px; 
	margin-top: 0;
	left: 170px; /*Fits longest top menu item on french side*/
	border-top: 1px solid #cfcfcf;
}

/*
 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are
 positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/
.menulist li {
	float: left;
	display: block;
	position: relative;
	margin-right: -1px;
}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
	float: none;
	margin: 0;
	margin-bottom: -1px;
}
.menulist ul>li:last-child {
	margin-bottom: 1px; /* Mozilla fix */
}

/* Links inside the menu */
.menulist a {
	display: block;
	padding: 0;
	color: #000;
	text-decoration: none;
}

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/

/* Only style submenu indicators within submenus. */
.menulist a .subind { display: none; }
.menulist ul a .subind {
	display: block;
	float: right;
}

/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a { float: left; }
.menulist ul a { float: none; }
/* \*/
.menulist a { float: none; }
/* */