body { /* set everything to zero for a good cross-browser starting point */
	margin: 0; 
	padding: 0; 
	border: 0;
	

	/*background-image: url("../images/tileCYAN_740x72.jpg");
	background-repeat: repeat;*/
	background-color: #336699;  /*sets the body background color 
	color: #3f3f3f;  /* set the default text color */
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family: Verdana, Arial, Helvetica, sans-serif; /* set the default fonts */
	font-size: 100.01%; /* Sets default font size. This odd value compensates for several browser bugs. First, setting a default font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% value for this property */
	 min-width: 720px;  /*Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing off the left edge with Gecko browsers */
}

h1
{
	font-size: 140%;
	color: #26235E;
	font-style: italic;
	margin: 1px;
}

h2
{
	font-size: 130%;
	color: #26235E;
	font-style: italic;
	margin: 1px;
}

h3
{
	font-size: 115%;
	color: #26235E;
	font-style: italic;
	margin: 1px;
}


h4
{
	font-size: 90%;
    color: #26235E;
	font-style: italic;
	margin: 1px;
	padding-top: 3px;
}

h4 a {  
color: #3366cc;  
text-decoration: underline; 
}

h4 a:hover,
h4 a:focus {
text-decoration: none;  /*removes the underline*/
background-color: #e3e3e3;
}



h5 /* white text on blu bg */
{
	font-size: 90%;
	background-color: #26235E;
	color: white;
	font-style: italic;margin: 1px;
	padding: 1px 5px 2px 5px;
}





#wrapper {

   width: 602px;/*sets the width for IE5.x's broken box model -add 2 pixels to desired width*/
	w\idth: 600px; /* sets the width of the wrapper for compliant browsers*/
	/*margin-top: 25px;
	margin-bottom: 25px;*/
	margin: 13px auto; /*centers the wrapper. First value - 5px is applied to the top and bottom margins, auto sets the excess space on the view port evenly to the left and right*/
	position: relative; /* important to position it relatively */
   /*   background-color: #000;*/

/*background-image: url("../images/tile_720x16.jpg");	 this continues the color of the leftcol down to the bottom of the wrapper. Without this the leftcol ends too soon.
	background-repeat: repeat-y;*/
	
	/*background-image:  url("../images/wrapper_720x200.gif"); sets the path to the wrapper's bg image*/
	/* background-position: bottom; uses two % values to place the image 2% from the left and 93% from the wrappers top left hand corner */
	/* background-repeat: no-repeat; prevents the image from tiling in our page, we do not want this image to repeat 

border-top: 5px solid #c8f4f3;*/
/* border: 1px outset #3e3e3e;
	border: 5px solid #c8f4f3;/*  sets a border to all 4 sides 
	 border: outset 2px #FFCB38; */
	
	text-align: left; /* Realigns the text to the left after the IE hack in the body rule */


padding: 5px;
}

#banner {
	position: relative; /* **PLEASE READ** ~ This property and value is not needed for your page to be rendered corectly in the browser - However, without it Dreamweaver allows the position of the leftcol div to ride up over the banner in design view. If that does not bother you you can safely delete this property and value pair. Alternatively you could implement a design time style sheet to position the div correctly for working in design view */
	background-image:  url("../images/TopBnr_720x150.jpg");  /* sets the background image for the banner div*/
	background-repeat: no-repeat; /* prevents the bg image from repeating */
	height: 150px;/* set a height for the banner to allow all the bg image to be seen, no text resizing in this element to worry about */
}



#date {
display: block; /* set to display block to ensure it has it's own line in the design */
padding: 4px 18px 4px 0;
font-size: 65%;
color: #333;
text-align: right;
}


#content {
      background-image: url("../images/tile_12x400.jpg");
	background-repeat: repeat-x;
	width: 599px; /* sets the width of our content*/

}

#content p, ol {
	font-size: 85%;
	margin: 10px 6px 10px 6px;
	padding: 0; /* zero off the padding */
}



#content ol {
	font-size: 85%; 
	margin: 6px 6px 8px 28px; 
	padding: 0;
}





/*#content p.footnote {
font-size: 70%;
font-style: italic;

padding-top: 20px;
text-align:left;
}
*/

#content p.footnote a {
font-size: 10px;
font-weight: normal;
color: #3e3e9e;
background-color: #e3e3e9;
padding: 1px 4px 1px 4px;
text-decoration: none;
border-left: 2px inset white;
margin-right: 4px;
}

#content p.footnote a:hover,
#content p.footnote a:focus {
color: white;
text-decoration: none; 
background-color: #99c;
border-left: 2px outset white;
}

#content p.footnote2 {
font-size: 70%;
font-style: italic;
/*padding-right:200px;
padding-top: 20px;*/
}

#content ul {
/*list-style-type: circle;*/
font-size: 80%;
color: #3f3f3f;
}

#content a {  /* Styles the links within the content */
color: #26235E;  /*sets the text to dark blue*/
text-decoration: underline;  /*keeps the underline*/
}

#content a:hover,
#content a:focus {
text-decoration: none;  /*removes the underline*/
}

.titleimages { /* used to set the "cold" title images */
	display: block; /* set to display block to ensure it has it's own line in the design */
	margin-top: 8px; /* set a margin to the top */
	margin-bottom: 8px;
	border: 0;  /* jl- added to keep FFox from showing a border around images with a href */
}

.sqimageleft {
display:inline;
border:0;
margin-right:9px;
margin-top:5px;
float:left;
}


/*---BEGIN LAYING OUT THE LEFTCOL--*/

 /* Begin laying out the leftcol div */
 
 
#leftcol {
	float: left; /* Floats the div to the left to make a column */
	width: 200px; /* sets a width for the div - Imperative for IE mac. - jl-same as the width of the image*/
border: 1px solid #d8d7dc;
      height: 232px;
	margin-bottom: 10px;
	margin-left: 22px; /*if desired, creates a margin on the left to move the div away from the wrapper's edge */
	margin-top: 11px; /* if desired, moves the div down from the banner */
	 /*background-image:  url("../images/tileCYAN_740x10.jpg");  sets the path to the bg image.   jl-the CMX example uses this boxtop bg img but I'm not sure I'll use it in this design.  I put one in as an experiment.*/
	/*background-repeat: no-repeat;  prevents the bg image from repeating, no need to position it as top left is the default and that is where we want the image to show */
	padding-top: 5px; /* sets a padding to the top of the div to allow the bg image to show above the leftcol divs contents */
	background-color:  #a09eab; 
	padding-bottom: 13px; 
	/*border-bottom:  500px solid #a3afd5;
	height: 500px;  
	jl- one of these 3 should make the leftcol BG strip go all the way down- But this makes the page longer so use it sparingly.*/
     /* **********added the following line for flyout menu*****************
     display:inline; */ 
}



#leftcol #navigation {
	line-height: 100%; /* helps out IE 5.01 PC */
	width: 170px; /* sets a width for the div to the width of the image */
	/* background-image:  url("../images/boxbtm_170x350.gif"); sets the path to the bg image.  jl-the CMX example uses this boxtop bg img but I'm not sure I¬ll use it in this design.  I put one in as an experiment.*/
	background-repeat: no-repeat; /* prevents the bg image from repeating */
	background-position: bottom left; /*uses keywords to place the image at the bottom left of the div */
	padding-bottom: 350px; /* closes the space btwn this bg image and the btm of the nav btns - gives our background image room to display from behind the nav btns*/
}



#leftcol #navigation ul {
	border-top: 0px solid #d2d6e7; /* sets a border to the top of the ul. jl- I didn't want it so I made it 0.*/
  	border-bottom: 0px solid #d2d6e7; /* sets a border to the bottom of the ul. jl-I zero'd it.*/
	margin: 0; /* zeroes off the margins */
	padding: 0; /* zeroes off the padding */
	font-size: 90%; /* scales the font to 90% of the body font declaration*/

/* *********moved the list_style_type to leftcol navigation ul li************* */ 
}


#leftcol #navigation ul li { /*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01 */
	padding: 0; /* zeroes off the padding */
	margin: 0; /* zeroes off the margins */
	margin: /**/ 0 0 -3px 0; /* This takes 3px off the bottom margin in IE 5.01 - IE 5.5 cannot read this hack so stays with the 0 value from the last margin property */
	ma\rgin: 0; /* IE 5.01 and IE5.5 cannot read this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */
	background-image:  url("../images/navBtnBG_170x55.gif"); /* sets the image for the rollover. jl-this image can be larger than the btn area*/
	background-repeat: repeat-y; /* repeats the image vertically, no need to position it as top left is the default and that is where we want the image begin tiling from */
/* ************moved the following from leftcol navigation ul************* */ 
      list-style-type: none; /* removes the bullets from our list nav*/
 /* ************added the following for flyout menu***************** */ 
       position: relative;
       vertical-align: bottom; /* for IE5/win */
     
}


#leftcol #navigation a, 
#leftcol #navigation a:visited { /* use dual selectors if the properties and values are the same for each */
	border-bottom: 1px solid #d2d6e7; /* sets the bottom border. jl-I zero'd it*/
	border-left: 0px solid #a3afd5; /* sets the left border. jl-set it to 0 */
	border-right: 0px solid #fff; /* sets the right border. jl-set it to 0*/
	color: #fff; /* changes the default text colour to white */
	display: block; /* required to make the links act like a button, having the full area "clickable" */
	padding: 4px 0 6px 0; /* sets padding values to give the link text some "air" */
	text-align: center; /* jl-this is the only way I can get the text away from the left edge*/
	text-decoration: none; /* removes the default underline */
	background-color: #4b5ca2; /* sets a background colour on the links which hides the roll over snowman image in the li selector */
	width: 170px; /* sets the width for IE5.x - content width plus border widths plus padding value = 6 extra pixels */
	w\idth: 170px; /* resets the width for IE6 and compliant browsers */
}

/* using the \ escape character as in w\idth - see final property declaration in the selector above */
/* IE 5.01 and IE5.5 cannot read this selector. The escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */

#leftcol #navigation a:hover, 
#leftcol #navigation a:focus { /* use dual selectors if the properties and values are the same for each */
	background-color: transparent; /* prevents the #a3afd5 background colour from the "a" selector showing and ensures the btn BG image is seen on hover and focus */
	border-bottom: 1px solid #fff; /* changes the bottom border to white to give the hover state an indented look */
	color: #000; /* changes the hover and focus text to black */
}


/******LEFTCOL FOR NON-NAVIGATION ELEMENTS********/

/*-----First OVERWRITE the MAIN STYLE for LEFT COL by putting this in the head of the file.  Otherwise non-nav elements will not work......
#leftcol #navigation {
	background-image:  url("images/boxbtm_170x50.gif"); 
	background-repeat: no-repeat; 
	background-position: bottom left;
	padding-bottom: 50px; 
}--------*/



#leftcol p {
font-size: 85%;
color:#333;
padding: 3px 3px 3px 10px;
}

#leftcol p a,
#leftcol p a:visited {
color: #2326e5;
}

#leftcol p a:hover, 
#leftcol p a:focus  {
text-decoration: none;
color: #e5e5ff;
}

#leftcol p.tall {
padding:100px 3px 3px 10px;

}


 /* ************added the following for flyout menu***************** */ 
 
 ul ul {background-color: #2326e5;}
 
 
 ul div { 
	position: absolute;  
	left: -3000px;
	width: 170px;
	padding: 2em 0 2em 0; 
	background-image: url(bgfix.gif);
}	/* flyout elements need a background image or color to avoid bugs in IE/win */

ul li:hover div {
	left: 150px;
	top: -1.7em;
}

ul a:hover {text-decoration: underline;}

#leftcol #navigation ul div.mini-zone {
	padding: 0;
	width: 1em;
	height: 1em; 
	bottom: -1em;	
}

 li:hover div.mini-zone {
	top: auto;
	left: auto;
	right: .8em;
}
 
 /* \*/ /*/
ul div {
	position: static;
	width: 8em;
	padding: 0;
}

.mini-zone {display: none;}



/* The block above hides the rule inside so that only IE/mac can see it.
This rule causes the nav to be fully expanded vertically in that browser,
allowing those users to access the nav without needing to hover it. */

 
/* ******end of leftcol style************** */




#footer {  /* Begin laying out and styling the footer div */
background-color: #26235E;  /*sets a background colour for the footer*/
width: 720px;  /*Sets the footers width*/
border-top: 1px solid #FFF;  /*sets the top border to define the beginning of the footer*/
color: #f3f3f3;
font-size: 65%;  /* sets the footer text size */
text-align: right;  /* aligns the text to the right*/
margin-top: 20px;  /* Adds a margin to the top of the footer*/
clear: left;  /*clears any floats to the left - our leftcol div in this instance*/
}


#footer p {
background-color: #26235E;  /*sets the background colour for the p element when it is in the footer div*/
padding: 4px 4px 4px 10px;  /* sets the padding values*/
margin: 0;  /*zeroes off the margins */
}

#footer ul{
background-color: #26235E;/*provides a background colour for the links list*/
margin: 0;/*zeroes off the margins*/
padding: 4px;/*add some air around the links*/
}

#footer li{
display: inline;/*set the list to display inline*/
padding-left: 10px;
}

#footer a {  /* Styles the links within the footer */
color: #f3f3f3;  /*sets the text to almost white*/
text-decoration: underline;  /*keeps the underline*/
}

#footer a:hover,
#footer a:focus {
text-decoration: none;  /*removes the underline*/
}

#navigator {  /* modeled after the footer */
background-color: #A3AED5;
width: 460px;
border: 1px solid #F1F3F9;
color: #fff;
font-size: 65%;
text-align: center;
padding: 4px;
}

#navigator a {  /* Styles the links within the navigator */
color: #f3f3f3;  /*sets the text to almost white*/
text-decoration: underline;  /*keeps the underline*/
}

#navigator a:hover,
#navigator a:focus {
text-decoration: none;  /*removes the underline*/
}

#navigator a.current {
font-weight: bold;
text-decoration: none; 
}

.print {  /*  this is for those Sub-Topic descriptions that I want to hide on the screen but print on paper - on the print.css this is set as block*/
display:none;
}

.noprint {
visibility:visible;
}

ul.none, li.none 
{
list-style-type: none;
}

/*------right column----------*/
#rightcol { 
     z-index:19;
    float:right;
    width: 141px;
    height: auto;
    border: outset 2px #FFCB38;
    /*background-image:url(../images/tile_yellowpad.gif);  */

background-image:url(../images/tile_yellpad_180x288.jpg);
    padding: 7px;
    margin-left: 6px;

}



#rightcol h3 { 
      color: #26235E;
      font-family:  "Arial Black","Lucida Handwriting", "Freestyle Script", serif;
      font-style:normal;
	font-size: 110%;
	line-height: 110%;
	text-align: center;
}

#rightcol.textfld {
width: 16px;
text-align:center;
}

.plainnote {
	font-weight: bold;
	font-size:85%;
	font-family: Courier, Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	line-height: 100%;
	font-weight: normal;
	color: #26235E;
	text-decoration: none;
}

.plainnote2 {
	font-weight: bold;
	font-size:85%;
	font-family: Courier, Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	line-height: 100%;
	font-weight: normal;
	color: #26235E;
	text-decoration: none;
	margin-bottom: 8px;
	clear:both;
}



#rightcol a {  /* Styles the links within the navigator */
color: #26235E;  /*sets the text to almost white*/
text-decoration: none;  /*shows no underline*/
}

#rightcol a:hover,
#rightcol a:focus {
text-decoration: underline;  /*adds the underline*/
}

.specialnote {
	font-style: italic;
	line-height: 15px;
	font-weight: normal;
	color: #26235E;
	text-decoration: none;
}



/*------end right column----------*/	



#video {
	padding:10px;
	width: 322px;
	w\idth: 320px; 
	height: 255px;
	margin: 5px 0 5px 235px;

	/*border: 1px inset #f5f5ff;*/
	}