/**
* Project: Responsible Business Web Site
* Date: 17/11/08
* Author: Eric Brillet/Nhazean M (c/o Ekkko Systems)
* Version: 1.0
*/

/**************************************************************************************
 * The following is the code required inside a HTML file that makes use of these menus, basically:
 * 1) link to this css using <link>
 * 2) javascript call inside the html using <script>
 * 3) CSS hack with style tag for cross browser compatibility
 * 4) menu definition using div tag (see below after this section) using <div>
 
<link href="../../../../events_current/gi/2007/gse/pg_htm/res_code/deluxe_css_dropdowns/menus.css" type=text/css rel=stylesheet> 

<script type="text/javascript">
if (window.self != window.top) 
	window.top.location = window.self.location; 
</script>

 START: DROPDOWN MENU 
 Code for DropDown Menu and IE6 Compatibility 
 Other files are in res_code folder of event. 
[if gt IE 6]>
  <style type="text/css">

.button .dropdown li, .nav a {{zoom: 1;}

  </style>
<![endif]
 This CC feeds a modified Holly hack to IE7 and up. The old star-html hack is
ignored by IE7, and IE7 correctly obeys the "height: 1%" layout-triggering fix, so
use a targeted CC and change the fix to "zoom: 1;" to achieve the same layout fix. 

[if lte IE 6]>
  <style type="text/css">
	body {behavior: url(res_code/deluxe_css_dropdowns/csshover.htc);}
  </style>

  <noscript>
	<style type="text/css">

.nav .dropdown, .nav .dropdown div {width: 189px;}
.nav .button .dropdown ul {margin: 0px;}
.nav .dropdown, .nav .dropdown div {position: static;}
.nav .dropdown ul {border: 0;}
.mini-zone {display: none;}

	</style>
  </noscript>
<![endif]
 The above block calls the special .htc script that forces compliance in IE6
and lower, and also "dumbs down" the nav when IE is set not to allow scripting.
Only IE6 and lower can read this block. 
 START: DROPDOWN MENU 

***************************************************************************************/


/**************************************************************************************
* EXAMPLE HTML DIV DEFINITIONS INSIDE HTML FILE
* 
* Series of tags in hierarchy: 
* Tab One:   div (nav) ul li (button) div (one)
* Tab Four:  div (nav) ul li (button) div (four) div (dropdown) ul li div ul li

<div class="nav">
<ul>

 TAB ONE: HOME 
<li class="button">
<div class="parent one">
	<a href="http://www.globalinitiatives.com">Home</a></div>
</li>

 TAB FOUR: PARTNERS 
<li class="button">
<div class="parent four">
<a href="#">Partners</a>

<div class="dropdown">
    <ul>
		 DROPDOWN 1: INTERNATIONAL ORGANISATION 
		<li style="z-index: 10;">
		<a href="../../../../events_current/gi/2007/gse/pg_htm/partners_international.html">International Organisation</a>
		<div class="mini-zone"></div>
		<div>
			<ul>
				 FLYOUT 1: UNEP 
				<li><a href="../../../../events_current/gi/2007/gse/pg_htm/partners_international.html">UNEP</a></li>
			</ul>
		</div>
		</li>
		
		 DROPDOWN 2: GOVERNMENT 
		<li style="z-index: 9;">
		<a href="../../../../events_current/gi/2007/gse/pg_htm/partners_govt.html">Government</a>
		<div class="mini-zone"></div>
		<div>
			<ul>
				 FLYOUT 1: IE SINGAPORE 
				<li><a href="../../../../events_current/gi/2007/gse/pg_htm/partners_govt.html#IE">IE Singapore</a></li>
				 FLYOUT 2: MEWR 
				<li><a href="../../../../events_current/gi/2007/gse/pg_htm/partners_govt.html#MEWR">MEWR</a></li>
				 FLYOUT 3: STB 
				<li><a href="../../../../events_current/gi/2007/gse/pg_htm/partners_govt.html#STB">STB</a></li>
			</ul>
		</div>
		</li>
		</ul>
</div>
</div>
</li>
***************************************************************************************/

/*XXXXXXXXXX Generic page styling rules XXXXXXXXXX*/
/* e1 note: the list-style is important, but padding and margin maybe can be ignored. */
ul, li {
	list-style: none;
	padding: 0; 
	margin: 0; 
}

/*XXXXXXXXXXXX Primary top nav rules XXXXXXXXXXX*/
/* e1 note: this is applied to FIRST all encapsulating div tag. */
.nav {
	position: relative;
	
	/*** e1 TO CHANGE: background colour of tabs at top ***/
	/* e1 custom: */
	/*background: #def;*/
	background: #005480; /*	background: #5094ab;*/
	
	/* e1 custom: we do not need any borders around the tabs. */
	/*border: 1px solid #888;*/ /* borders the bottom of the top nav */
	/*border-width: 1px 0;*/
	border-width: 0px 0;
	
	width: 100%;
}

/* e1 note: We overide the width by setting inside the embedded div, instead of here. */
.button {
	/*width: 80px;*/
	float: left;
}

.button:hover {
	/*background: #5fb2ce;*/
	background-color: #005E91; /*background: #555555;*/
	text-decoration: none !important;
}

.parent {position: relative;}
/* this parent div does not provide "sticky hovering", but instead fixes a
strange bug in Op7. When an element serves as a hovered popup "parent" element,
that element must not also be floated or all heck breaks loose in Opera 7.
To prevent this, we have floated the top level list items, while nesting
hoverable parent divs inside that are then hovered to generate the dropdowns.
Thus the ugly (but interesting) Op7 bug is defeated. */

.floatfix {margin-right: -3px;}
/* this fixes the IE 3px bug that is common in this type of float arrangement */


/*XXXXXXXXXXXX Primary dropdown/flyout rules XXXXXXXXXXX*/
/* rules for dropdown div */
.dropdown { 
	/*width: 150px;  width: 350px; */
	position: absolute;
	left: -3000px;
	top: auto; /* puts dropdowns directly under top nav */
	text-align: left; /* needed because IE misapplies text centering to boxes */
	background: url(bgfix.gif);
}

.dropdown div {
	/*width: 120px;  width: 320px; */
	position: absolute;
	left: -3000px;
	top: 0;
	background: url(bgfix.gif);
	text-align: left; /* needed because IE misapplies text centering to boxes */
}

/* The margins on the UL's replace the div paddings to create "sticky hovering"
zones,  and the margins should "fill" the divs, making the IE BG fix unnecessary.
Unfortunately the BG fix is still needed, altho this method does eliminate
possible box model problems */

.dropdown ul {
  width: 86px; /*width: 189px;*/ /* tweaked so that dropdowns appear to "line up" with top links */
  margin: 0 30px 30px 30px; /* creates "sticky hovering" zones for dropdowns */
  /*border: 1px solid #888;*/
/*  border: 1px solid #DDD;*/
/*  border-width: 1px 1px 0;*/
} /* borders sides and top of the dropdowns and flyouts; links provide the bottom border */

/* creates "sticky hovering" zones for flyouts */
.dropdown div ul {
	margin: 30px 30px 30px 0;
} 

/* modifies width for rightmost "visible" dropdown (tweak) */
.rightmost_menu .dropdown ul {
	width: 190px;
} 

/* rule reversal for "visible" right drop flyouts */
.rightmost_menu .dropdown div ul {
	margin: 30px 0 30px 30px; position: relative;
} 

.nav li {
	/* e1 custom: we prefer to align to left rather than centre. */
	/*text-align: center;*/
	text-align: left;
}

.nav a {
  	display: block;
	
	/*** e1 TO CHANGE: Colour of tab font ***/
  	/* e1 custom: */
  	/*color: #800;*/
  	color: #FFFFFF !important;
  
	/*font-weight: bold;*/
	font-size: .9em;
	text-decoration: none !important;
	padding: 6px 0px 5px;

	/* e1 custom */
	/*border-right: 1px solid #888;*/  /* makes the dividers between the top nav links */
	border-right: 0px;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

/* kills right border on last top link */
.rightmost_menu a {
	border-right: 0;
} 

/* negates right border for dropdowns and flyouts */
.nav ul ul a {
  	/*color: #fff;*/
  	border-right: 0; 
  
	/*** e1 TO CHANGE: colour of dropdown/flyout fonts. ***/
  	/* e1 custom */
  	/*border-bottom: 1px solid #888;*/  /* borders the bottoms of the dropdown and flyout links */
/*  border-bottom: 1px solid #DDD;*/
  	color: #FFFFFF !important; /*color: #898989 !important;*/
  	font-weight: normal;

	/*** e1 TO CHANGE: left padding of first tab ***/
  	/* e1 custom: added because by left justifying "li" below, we need to add a padding, else text will hit the border. */
  	padding-left: 5px;
  	padding-right: 5px;
}

.dropdown li {
  	position: relative;
  	vertical-align: bottom; /* IE5/win bugfix */
  
  	/* e1 custom: added because we want drop down menu to be left aligned, but not topmost menu */
  	text-align: left;
	padding-left: 6px;
}

.parent:hover {
	background-image: url(bgfix.gif);
}
/* this hover calls a transparent GIF only to defeat the IE failed hover bug. Any
background change on hovering div.parent will make IE obey and display the dropdown.
While the call itself will fix the bug, make sure you actually call a real image
file so that your site error logs will not fill with failed image calls. */

.parent:hover div.dropdown {left: -30px;} /* hover rule for dropdowns */
/* extra pixel makes dropdowns "line up" with top links */

.dropdown li:hover div { /* hover rule for flyouts */
	left: 180px; /* this value controls the amount of flyout "overlap" */
	top: -26px; /* this value controls the amount of flyout vertical offset */
}

.rightmost_menu li:hover div { /* reversed flyout rules for rightmost drop flyouts */
	left: -210px;
	top: -26px;
}

.nav div.mini-zone { /* special hover zone that covers the "danger corner" */
    padding: 0;
    width: 15px;
	height: 15px;
	font-size: 1px;
	left: -3000px;
	bottom: -15px;
	top: auto;
	background: url(bgfix.gif);
}

.nav .dropdown li:hover div.mini-zone { /* hover rule for mini-zones */
	left: auto;
	right: 8px;
	top: auto;
}

.nav .rightmost_menu li:hover div.mini-zone { /* reversed hover rule for rightmost drop mini-zones */
	left: 8px;
}

/*** e1 TO CHANGE: dropdown hover bgnd colour ***/
/* hover color effect on dropdown links */
.dropdown li:hover {
	background-color: #006AA4;
	text-decoration: none !important;
} 

/*** e1 TO CHANGE: flyout hover bgnd colour ***/
/* hover color effect on flyout links */
.dropdown div li:hover {
	/* e1 custom: */
	/*background: #ff7;*/
	background-color: #006AA4;
	text-decoration: none !important;
} 

/*XXXXXXXXXXX Primary dropdown backgrounds XXXXXXXXXX*/
/*.one ul {background: #459;}
.two ul {background: #459;}
.three ul {background: #459;}
.rightmost_menu ul {background: #459;}*/

/* e1 note: Commented out the above so we only need to set the background colours once for the 
 * tabs.  Am trying to reduce the useage of class "one", "two", limit it to width only.
 */
/*** e1 TO CHANGE: dropdown bgnd colour ***/
.dropdown ul {
	/*background: #459;*/
	background: #005E91; /*background: #FFF;*/
}

/*** e1 TO CHANGE: flyout bgnd colour ***/
/* colors BG of flyouts */
.dropdown div ul {
	/*background: #eda;*/
	background: #005E91; /*background: #FFF;*/
} 

/*** e1 TO CHANGE: Font colour for flyouts ***/
/* colors text of  flyouts */
/* e1: Note: overidden by !important on a tag above. */
.dropdown div ul a {
/*	color: #400;*/
	color: #FFFFFF !important;	/*color: #898989 !important;*/
} 

/*** e1 TO CHANGE: width of each tab ***/
/*XXXXXXXXXX z-index rules for top nav XXXXXXXXXXX*/
.one {
	z-index: 10;
	width: 75px; /*	width: 45px; */
	padding-left: 10px;
}
.two {
	z-index: 20;
	width: 75px;  /* width: 65px; */
	padding-left: 10px;
}
.three {
	z-index: 30;
	width: 75px; /*	width: 50px; */
	padding-left: 10px;
}
/*
.four {
	z-index: 40;
	width: 60px;
	padding-left: 10px;
}
*/
.rightmost_menu {
	z-index: 40; /*	z-index: 50;*/
	width: 75px; /*	width: 70px; */
	padding-left: 10px;
}
.rightmost_menu:hover {
	z-index: 20; /*	z-index: 30;*/
	width: 75px; /*	width: 70px; */
}
/* this last is a special trick that reverses the stacking order of the rightmost
top link when it or its children are hovered. This, and the previous rules work
together so that when a user is on the top link of any flyout, they can move
vertically to the top link directly above and not have the sticky hoivering zone
on the flyout get in the way of hovering that top link. */


/*XXXXXXXXXXX Special fixes XXXXXXXXXXX*/
/* This is to hide the following from IE/Mac. \*/
* html .button .dropdown li {
height: 1%;
margin-left: -16px;
mar\gin-left: 0;
}
/* */

* html .nav a
 {height: 1%;}

/* The first 2 rules above fix "bullet region" problems in IE5.x/win,
and the 2nd is to make all links fully clickable. */

.brclear { /* Use a break with this class to clear float containers */
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0;
}

/*\*/ /*/
.nav .dropdown, .nav .dropdown div {width: 189px;}
.nav .button .dropdown ul {margin: 0px;}
.nav .dropdown, .nav .dropdown div {position: static;}
.nav .dropdown ul {border: 0;}
.mini-zone {display: none;}
/* this rule block "dumbs down" the nav for IEmac */