/* working width: 960 px = 1024 minus scrollbars and edges */
/* working height: no set height: based on 768 */

/*

  Uses margin: 0 auto; for centering the three columns, which are 
  contained in the DIV mainWrap. mainWrap has zero padding.

  +-- body -------------------------------------------------+
  |  + --- topNav ---------------------- w=960, h=167 ---+  |
  |  +---------------------------------------------------+  |
  |                                                         |
  | +-----mainWrap-margin: 0 auto;------------------------+ |
  | | +--left--+ +--- center ---------+ +--- right -----+ | |
  | | |        | |                    | |               | | |
  | | |        | |                    | |               | | |
  | | +--------+ +--------------------+ +---------------+ | |
  | +-----------------------------------------------------+ |
  |                                                         |
  |  ===== footer ============================ w=100% ====  |
  +---------------------------------------------------------+

*/

body {
	background-color: #000;
	color: #fff;
	font-family: verdana, "lucida console", arial, sans-serif; 
	padding: 0; margin: 0;
	text-align: center;
	height:100%; max-height:100%; 
	/*\*/	overflow: hidden; /* because Mac IE5 don't understand */
	overflow: hidden;
}

/* Following colours are available to all sections. Also useful as a reference. */

.white{color: #fff;}

strong {
	font-size: 12px;
	/* color: #fff; */
	font-weight: 900;
	text-decoration: none;
}
b {
	/* font-size: 0.9em; */
	/* color: #fff; */
	font-weight: 900;
	text-decoration: none;
}
.devComment {color: #fff; background-color: #555; padding: 4px;}

p {font-size: 0.9em;	margin-top: 1px; }

a {text-decoration: none; color: #aaa; } /* colour DEFINED IN COLOUR CSS --- */
a:hover {text-decoration: underline;}

h1 {
	font-size: 1.0em; 
	color: #fff; /* H1 should be white throughout. H2 is coloured --- */
	font-weight: 900;
	padding-top: 0px; padding-bottom:2px;

}

h2, h3 {
	font-size: 1.0em; 
	color: #fff; /* White. Use span class="colour" to colour a heading --- */
	font-weight: 900;
	padding: 0; margin: 0;
}
h3 {color: #fff;}

ul li {color: #777; font-size: 0.9em;	} /* Gray. COLOUR  DEFINED IN COLOUR CSS --- */

html {
	height:100%; 
	max-height:100%; 
	padding:0; 
	margin:0; 
	border:0; 
}


/* ===========================================================================
   CSS STYLES for the navigation bit at the top.                           TOP
   Implemented in Flash.
   ======================================================================== */

#topNav {
	margin: 0 auto;
	top: 0px; width: 960px;
	height: 177px;
	padding: 0px; 
	clear: both;
	z-index: -9;
}


/* =========================================================================
	CSS STYLES for the three-column section in the middle.               3-COL
	
	There are 2 ways of aligning the columns centrally:
	The first method to align the columns to the middle of the browser window
	using left: 50% then use margin-left with a negative offset to move the div
	to the left. This breaks down when the browser is made narrower than our 960
	pixels: the left div will disappear off the left of the screen.
	
	The second method is to use margin: 0 auto, which is supposed to pad the 
	left and right sides of an element equally (thus centering it). This method
	breaks down when used in conjunction with a top and bottom fixed element
	such as our navigation header and footer, because it is not possible in 
	pure CSS to calculate the height of the columns. This is worked around with
	a bit of JavaScript that is called upon load and resize.
	======================================================================= */


 #mainWrap {
	position: relative; overflow: hidden; 

	/* Center columns using margin 0 auto. Requires mainWrap's container to 
	   use align: center, and a bit of JavaScript is needed to get the column
	   DIVs to be the right height. 800px is given here as a starting default.	 
	 */
	margin: 0 auto; 
	width: 960px; /* should be 960 */
	height:600px; /* default height for non-JavaScript (and edit mode) */
		
	top: 10px;   /* with ref to body, plus 10px gap */
	bottom: 10px;/* height of the bottom nav plus 10px gap */
		
	/* early browsers such as IE55 and IE6 that don't render the column layout
	 * properly get a scrollbar on mainWrap. This is cancelled out below for 
	 * newer browsers by means of the child selector ">" 
	 overflow-y: auto;*/

	/* TESTING */
	overflow: hidden;
 }
 
 body>#mainWrap {
 	/* older browsers such as IE55 and IE6 won't get here because they 
 	 * don't parse child selectors ">". Scrollbars are implemented on the
	 * columns instead.	 */
 	overflow: hidden;
 }
 

.column {
	/* General stuff for all columns */
	position: absolute;
	/* FOR margin: 0 auto ALIGNMENT METHOD, DIVs are not 100% of canvas height */
	top: 0px;  /* absolute, with ref to mainWrap. */
	bottom: 0; /* absolute, with ref to mainWrap. */
	padding-left: 19px; padding-right: 20px;
	text-align: justify;
	border-left: 1px solid #333333; /* Gray default. COLOUR DEFINED IN COLOUR CSS --- */
	border-right: 1px solid #333333; /* Gray default. COLOUR DEFINED IN COLOUR CSS --- */
	background-color: #000;
	
	overflow-x: hidden;  
	overflow-y: auto;
	/* 	height: 100%;  required for correct rendering in IE6 - but doesn't
                     work in certain 3colSpan columns. Implemented in separate css */

}

.contentWrap {
	/* This wrapper div keeps images and text aligned within a column : FF2 and IE7 have
	 * different behaviour with scrollbars - IE7 always pads for the scrollbar even if the
	 * canvas is high enough not to need it; FF2 only pads for the scrollbar if the canvas
	 * height is low enough for the scrollbar to be displayed. 
	 
	 **** DO NOT USE IN CONJUNCTION WITH spanColumn ! ****
	 */
	padding: 0; margin: 0;
	overflow: hidden;
	position:relative;
}


/* see various separate 2-column and 3-column CSS for specific widths, 
   positioning and overflow behaviour*/
   
img.thb {
	float: left;
	width: 60px; height: 60px;
	margin-left: -68px;
	border: 0; /* no border if this image is a link please */
}

img {width: 100%;}


/* class to wrap the icon and text sections in a div to control image and text flow.
   The margin of 68px is where the image goes (note img.thb is offset by -68px above)
 */
.iconWrap {
	margin-left: 68px; 
	min-height: 80px;
}

hr {height: 1px; border: 0; border-top: 1px solid #888; }


/* ===========================================================================
	CSS styles for the site-nav box on the left: 
   =========================================================================== */

	/* used to toggle hiding and showing of DIVs. Driven by Javascript function
	 * function toggle(). We have no divs to hide yet, just ULs...
	div.h { display: none; }
	div.s { display: block; margin: 10px; }*/
	
	nav {margin-bottom: 0; margin-top: 1em;}
	ul {margin: 0; padding-left: 0.8em; padding-top: 0; padding-bottom: 1em;}
	li {list-style-type: none; }
	
	ul.h { display: none; }
	ul.s { display: block;  }	
	
	.webding {font-family: webdings, fantasy;  color: #ff0; font-size: 1.2em;}


	/* LINK ICONS - Open folder. */
	.open {background-image: url(openGray.png);   background-repeat: no-repeat; background-position: 0 3px;}
	/* .open li a:before {content: "⇒"} DOESN'T WORK  */

	/* LINK ICONS - Closed folder. */
	.closed {background-image: url(closedGray.png); background-repeat: no-repeat; background-position: 0 3px;}
	/* .closed li a:before {content: "⇒"} DOESN'T WORK  */
	
	

/* ===========================================================================
   CSS STYLES for forms presentation                                     FORMS
   =========================================================================== */

	/*  Following CSS are for forms presentation */
	/* SEE ALSO COLOUR CSS FOR:  */
	/* .LW_form {border-left: 1px solid #339933; 	border-right: 1px solid #339933; 	} */
	.LW_form { 	margin: 0 auto; 	padding: 1em; padding-top: 0.5em;  background-color: #333; }

	fieldset {  border: 1px solid #333;  background-color: #000; } /* SEE ALSO COLOUR CSS  */
	legend {   border: 1px solid #333;  background-color: #000;  padding: 0.2em; } /* SEE ALSO COLOUR CSS  */
	select {background:#333 ; color:#fff; }
	label {  clear: left;  float: left;  text-align: right;  width: 140px;  padding-right: 20px; }

	.LW_textBox {  display: block;  width: 300px;  float: left;  margin-bottom: 10px;  border: 1px solid #fff;  color: #eee;  } 
	.LW_oneLineBox {  background: #333; }
	.LW_multiLineBox { background:#333   ; } 
	.LW_inLineBox { width: 100px;  float: none;  display: inline;  background:#333   ;  margin-bottom:0; }
	.LW_checkBoxes { border: 1px solid #333; float: left; padding: 0; margin: 0;margin-bottom: 1em; }
	.LW_checkBox  { }
	.LW_buttons {     padding:0; padding-bottom: 1em; border:0; }
	.LW_button {      float: left; width: 150px; padding-right: 5px; }
	.LW_formBR {  clear: left; }  
	.LW_pw { font-size: 1.0em; font-family: monospace; font-weight: bold; }


/* ===========================================================================
   CSS STYLES for the navigation bit at the bottom                      BOTTOM
   =========================================================================== */

  /* For older browsers that do not implement CSS properly, and specifically
   * lack support for "position:fixed", we use position:absolute. Browsers
   * affected include Netscape4, IE 4.x to 5.0/Win. Browsers that support CSS 
   * properly, incl Opera 5+, Netscape6+/Mozilla/FireFox, Konqueror, Safari, 
   * OmniWeb 4.5+, iCab, ICEbrowser and IE7+ get position:fixed.
   */  

#footer { position: absolute; bottom: 0;}            /* mainly for IE6 */
body > div#footer {  position: fixed; }  /* everybody else */



#footer {
	background-color: #000; /* was grey #444; */
	margin: 0px; padding: 0px;
	width:100%;
	bottom: 0px; height: 1em;
	left: 0px;
	clear: both;
}


#footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	width: 100%;
	text-align: center;
}

#footer li {
	display: inline;
	background-color: #999999;   /* Gray default. COLOUR DEFINED IN COLOUR CSS --- */
	padding-left: 1.2em; padding-right: 1.2em;
	bottom: 0; height: 1em;
	font-size: 13px; 
	color: #fff;
	
	/* The following was to fix the gaps between LI elements. BUT it is better to fix it by removing the primary
	 * cause, which was whitespace between the LI elements (in this case new-lines and tabs).  Running the
	 * LI lines together removes the problem in the first place and means we don't need this ugly hack. */
	/* margin-left: -0.3em; margin-right: -0.3em;  */
}

/* fix the IE5.5 and IE6 bug in PNG transparency
   div, li, .ftL, .ftR { behavior: url(iepngfix.htc) }
 */
 
/* Following lines do the black triangles in the corners.*/
.ftL {border-left: 12px solid #000; /* gray default bg colour. See colour CSS */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/triR.png',sizingMethod='scale');
 } 
 
.ftR{border-right: 12px solid #000; /* gray default bg colour. See colour CSS */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/triL.png',sizingMethod='scale');
} 

/* For 100% CSS Compliance, the following 2 statements should be merged with those directly above.
 * But the child selector (>) is poorly supported in IE5.5 and IE6 which also poorly support 
 * transparency. Thus the backgrounds won't be displayed in IE5.5 and IE6.*/
ul > .ftL {background: url(triR.png) 100% 0 no-repeat  ; } /* gray default bg colour. See colour CSS */
ul > .ftR{background: url(triL.png) 0 0 no-repeat  ; } /* gray default bg colour. See colour CSS */


li#copyrightNotice { background-color: #000; }

#footer li a {
	padding: 0px;
	color: #fff;	
	text-decoration: none;
}

#footer li a:hover {
	color: #000; 
	text-decoration: underline;
	}

.smallText {
	font-size: smaller;
}