/* structure_home.css are the styles for the DIVs only on the homepage of a website and should not contain
any typographic or content-related styles for a site. The styles within are strictly
used to create the layout/structure of the website and, as such, this style sheet 
will (almost) never need to be altered by the client or back-end programmers. */

/* -----  THIS STRUCTURE STYLE SHEET IS USED ONLY FOR HOME PAGE ----- */
/* ----- comment styles well for better reference later! ----- */

/* this styles the home page to have a distinct body attribute different than the content pages */
/* it is made up of one large JOG file of 19K in size with a default colour where the image ends */
#bodyhome {
	background: url(/images/bkgnd_home.jpg) top left no-repeat #000066;
}

/* a div that holds the home page nav tab div and the banner image -- relatively positioned to allow
the nav div and homebanner div to be absolutely positioned and also with z-indexes so that the nav tabs
with transparent bottoms float on top of the larger banner image -- banner image spplied as JPG */ 
#navandbanner {
	position: relative; width: 753px; height: 343px;
	background-color: #2B4292;
}

/* nav tabs that will float above the banner image div */
#nav {
	position: absolute; top: 0; left: 0; width: 753px; height: 43px;
	z-index: 5; overflow: hidden;
}
#banner {
	position: absolute; top: 0; left: 0; width: 753px; height: 343px;
	z-index: 2; overflow: hidden;
}

/* main navigation tabs with CSS-based rollovers only for the home page */
/* these tabs require a transparent bottom to overlay the homepage banner image -- PSD supplied */
#navtab1 a {
		display: block; width: 250px; height: 43px; margin: 0; padding: 0; float: left;
		background: url(/en/images/navhome1.gif) 0 0 no-repeat; text-decoration: none;
}
#navtab1 a:hover {background-position: 0px -43px;}
#navtab1on, #navtab1on a, #navtab1on a:hover {
		display: block; width: 250px; height: 43px; margin: 0; padding: 0; float: left;
		background: url(/en/images/navhome1.gif) 0px -43px no-repeat; text-decoration: none;
}
#navtab2 a {
		display: block; width: 252px; height: 43px; margin: 0; padding: 0; float: left;
		background: url(/en/images/navhome2.gif) 0 0 no-repeat; text-decoration: none;
}
#navtab2 a:hover {background-position: 0px -43px;}
#navtab2on, #navtab2on a, #navtab2on a:hover {
		display: block; width: 252px; height: 43px; margin: 0; padding: 0; float: left;
		background: url(/en/images/navhome2.gif) 0px -43px no-repeat; text-decoration: none;
}
#navtab3 a {
		display: block; width: 251px; height: 43px; margin: 0; padding: 0; float: left;
		background: url(/en/images/navhome3.gif) 0 0 no-repeat; text-decoration: none;
}
#navtab3 a:hover {background-position: 0px -43px;}
#navtab3on, #navtab3on a, #navtab3on a:hover {
		display: block; width: 251px; height: 43px; margin: 0; padding: 0; float: left;
		background: url(/en/images/navhome3.gif) 0px -43px no-repeat; text-decoration: none;
}

/* three column holder on home page */
/* very important to float this left to allow content columns to push down */
#threecolumn {
	float: left; width: 716px; /* width = 753-padding */ padding: 0px 19px 0px 18px;
	background: url(/images/bkgnd_home_3col.gif) top left repeat-y;
}
#threecolumn p {
	font:12px/16px Arial,Helvetica,sans-serif;color:#FFF; padding: 8px 0px;
}
#threecolumn a {
	display: block; width: 212px; margin: 0; margin-top: 10px; padding: 7px 0px 8px 0px;
	background-color: #627CB8; text-decoration: none; font:12px/16px Arial,Helvetica,sans-serif;color:#FFF;
	text-transform: uppercase; text-align: center; font-weight: bold;
}
/* followed by the three columns themselves -- 212px wide ONLY */
#column1 {
	width: 212px; float: left;
}
#column2 {
	width: 212px; float: left; margin-left: 40px;
}
#column3 {
	width: 212px; float: right;
}
/* and associated styles for elements within the three columns */
.columnheading {
	font:12px Arial,Helvetica,sans-serif; font-weight: bold; color:#FFF; 
	text-align: center; text-transform: uppercase; border-bottom: 1px solid #627CB8;
	padding-bottom: 9px; margin-bottom: 9px; width: 212px;
}

/* small spacer above footer -- do not ever remove */
#spacer {
	width: 753px; height: 15px; background-color: #2B4292; overflow: hidden;
	border-bottom: 5px solid #FFF; clear: left;
}