/*
IKO_Website.css
Sitewide styling

The site employs a two column liquid layout.
The column widths are specified as a percentage of browser window width.
Column heights are specified in pixels.

CSS property values are recalcuated when the window size changes.
IE text size is set via View, Text Size.
IE default font is set via Tools, Internet Options, Fonts.
*/

/*
Override browser default margin and padding
*/

* {
  margin: 0;
  padding: 0;
}

/*
Page Layout

The colors are variants of gray, cyan and red.
Layout widths are specified as a percentage of the current browser viewport width.
Layout heights are fixed and specified in pixels.
The header and footer are both 100% wide.
A wrapper contains the left and right columns.
More on the wrapper and its contents below.
*/

/*
Setting the body font-size to 100% and then specifying font sizes in ems
causes more predictable cross browser text sizing.
The body background color is seen through the wrapper margins.
*/

body {
	font-size: 100%;
	background-color: #EBCDAC;	/* IKO Rose */
}

/*
The wrapper div contains the header, navigation and content columns, and the footer.
Its purpose is to allow the page to be sized proportionally to the
browser window. The width of the wrapper is set to 98% of the browser window.
Further, the width of the wrapper is constrained to between 900 and 1300 pixels to
prevent the page becoming unreadably narrow or wide.

Because IE doesn't support min-width and max-width, the width property is
overridden in DelSys_Website_IE.css:

	width: expression(document.documentElement.clientWidth < 918 ? "900px" :
										(document.documentElement.clientWidth > 1326 ? "1300px" : "98%"));
										
The content height of the wrapper must equal exactly the sum of total heights of
the header, navigation / content and footer.

Total height is the sum of:
	margin top & bottom
	border top & bottom
	padding top & bottom
	content height
	
divWrapper background color must be the same as divContent
*/

#divWrapper {
  position: relative;
  margin: 10px auto 10px auto;
	border: 5px solid #026E39;	/* IKO Green */
	width: 98%;
  min-width: 900px;
	max-width: 1300px;
	height: 800px;
	background-color: #ffffe8;	/* IKO tan */
}

/*
Header styles
*/

#divHeader {
  width: 100%;
  height: 125px;
  border-bottom: 2px solid #026E39;	/* IKO Green */
  background-color: #EBEBC5;	/* IKO olive */
	background-image: url("images/Bridge-IKO-Fade-Olive-900x125.png");
	background-repeat: no-repeat;
	background-position: top right;
}

.clsImageHeaderLogo {
  position: absolute;
  top: 14px;
	left: 50px;
	border-style: none;
}

.clsImageHeaderSlogan {
  position: absolute;
  right: 12px;
  top: 7px;
	border-style: none;
/*  border: 3px solid #026E39;	 IKO Green */
}

/*
divNav contains a suckerfish style dropdown menu. The drops descend over divContent, which is
positioned. To allow the drops to stack above divContent, divNav must also be positioned and
have a higher z-index than divContent.
*/

#divNav {
	position: relative;
	z-index: 1;
  width: 96%;
  height: 15px;
  padding: 5px 2% 10px 2%;
  border-bottom: 2px solid #026E39;	/* IKO Green */
  background-color: #EBEBC5;	/* navigation olive */
}

/*
divContent is positioned to allow absolute positioning of elements within it.
*/
#divContent {
	position: relative;
  width: 96%;
  height: 591px;
	padding: 10px 2% 10px 2%;
	background-color: #ffffe8;	/* background tan */
  font-family: Verdana, Arial, sans-serif;
	font-size: 100%;
  font-weight: normal;
	line-height: 1.25;
  color: black;
  overflow: hidden;
}

#divFooter {
  clear: both;
  background-color: #bbbbbb;
  border-top: 2px solid #026E39;	/* IKO Green */
	padding-top: 3px;
  width: 100%;
  height: 25px;
	font-family: Arial, sans-serif;
}

#divFooter #divFooterLeft {
	float: left;
	padding-left: 1%;
	width: 48%;
	height: 25px;
}

#divFooter #divFooterRight {
	float: right;
	padding-right: 1%;
	width: 48%;
	height: 25px;
	text-align: right;
}

/* Content image classes */

.clsImageFloatRight {
	clear: right;
	float: right;
	margin: 0 10px 0 20px;
}

.clsImageFloatLeft {
	float: left;
	margin: 0 20px 0 0;
}

/*
Text styles
*/

h1 {
	margin: 0 0 10px 0;
  font-family: sans-serif;
  font-size: 1.75em;
  font-weight: bold;
  color: #026E39;	/* IKO Green */
}

h2 {
	margin: 10px 0 10px 0;
  font-family: sans-serif;
  font-size: 1.25em;
  font-weight: bold;
  color: #026E39;	/* IKO Green */
}

p {
	margin: 0 0 10px 0;
  font-family: Verdana, Arial, sans-serif;
	font-size: 100%;
  font-weight: normal;
	line-height: 1.25;
  color: black;
}

em {
  font-weight: bold;
  font-style: normal;	/* em defaults to italic */
	line-height: 1.5;
  color: #026E39;	/* IKO Green */
}

ul {
  padding: 0 0 10px 2.5%;
}

/*
Navigation link styling
The menu is a three level suckerfish style menu.
*/

#divNav ul {
	list-style-type: none;	/* no burger dots */
}

#ulSuckerfish {
	position: absolute;	/* critical, allows dropdowns to be stacked on top of content */
	padding: 0 0 0 30px;
	}

#ulSuckerfish li {
	float: left;				/* causes top level menu to be horizontal */
	width: 160px;				/* sets the width of the menu "columns" */
}

#ulSuckerfish a {
  text-decoration: none;
 	display: block;			/* make the anchor the same width as its containing li  */
	width: 160px;				/* must be a block element to set its width  */
	height: 25px;				/* bottom of anchor adjacent to top of 1st level drop menu */
  font-family: arial, sans-serif;
  font-size: 1.0em;
  font-weight: bold;
}

#ulSuckerfish ul {			/* 1st level drop menu */
 	display: none;			/* dropdown menus are hidden until hovered */
	position: absolute; 
	top: 25px;
  border: 2px solid #026E39;	 	/* IKO Green */
	padding: 5px 10px 5px 10px;
  background-color: #EBEBC5;		/* navigation olive */
}

#ulSuckerfish ul li {
	float: none;				/* override inherited left float */
	height: 20px;				/* override inherited 50px height */
}

#ulSuckerfish #ulPrograms li {
	width: 120px;
}

#ulSuckerfish #ulRecipients li {
	width: 270px;
}

#ulSuckerfish ul a {
	display: block;
}

#ulSuckerfish #ulPrograms a {
	width: 120px;
}

#ulSuckerfish #ulRecipients a {
	width: 270px;
}

#ulSuckerfish ul ul {		/* 2nd level drop menu */
	position: relative;	/* beside and right of 1st level drop item */
	top: -20px;					/* override inherited 50px top */
	left: 15em;
}

#ulSuckerfish li:hover ul,
#ulSuckerfish li.sfhover ul {
	display: block;			/* make 1st level drop menu visible when top level menu item is hovered */
}

#ulSuckerfish ul li{
  background-color: #EBEBC5;	/* navigation olive */
}

#ulSuckerfish li:hover ul ul,
#ulSuckerfish li.sfHover ul ul {
	display: none;			/* hide 2nd level drop menu when top level menu item is hovered */
}

#ulSuckerfish ul li:hover ul {
	display: block;		/* make 2nd level drop menu visible when 1st level drop item is hovered */
}

#ulSuckerfish ul ul li{
   background-color: #ccffcc;		/* pale green */
}
/*
#ulSuckerfish li.current a:link,
#ulSuckerfish li.current a:visited {
	color: black;
}
*/
#ulSuckerfish a:link,
#ulSuckerfish a:visited {
  color: #609463; /* IKO Gray Green */
}

#ulSuckerfish a:hover,
#ulSuckerfish a:active {	/* A link is active while the mouse button is pressed. */
  color: #01522A;	/* IKO Dark Green */
}

#ulSuckerfish li.current a:link,
#ulSuckerfish li.current a:visited {
  color: black;
}