body{	/* background-color example background-color:#184B94;  */
	/* ../ is needed for path up a level in img path*/
	/* background-image:url(../image.jpg); */
	/* specifies both background color and image */
	background-color: #d2deea;
	font-family: Arial, Helvetica, sans-serif;
	}

/* ---------------------------------------------------wrapper -------------------------------------- */

#wrapper{
	/* Wrapper contains the layout that sets size */
	width:54em;
	background-color: #709bbb;
	/* set right and left margin to auto for centering the wrapper; 20px drops wrapper so background shows thru */
	margin: 20px auto 0 auto;
	border:solid thin #021859;
	/* required for absolutely positioned layout only */
	position:relative;
	}

#wrapper2{
	/* Wrapper contains the layout that sets size */
	width:54em;
	background-color: #ffffff;
	/* set right and left margin to auto for centering the wrapper; 20px drops wrapper so background shows thru */
	margin: 20px auto 0 auto;
	padding: 20px;
	border:solid thin #021859;
	/* required for absolutely positioned layout only */
	position:relative;
	}


/* ---------------------------------------------------branding -------------------------------------- */

#branding{
	/* make branding a positioned element, but don't move it */
	position:relative;
	padding:10px 10px 25px 10px;
	}

#branding img{
	/* fixes the mysterious image gap between branding and following division */
	display:block;
	}

#branding h1, #branding h2, #branding h5{
	/* abslutely position text in the branding division */
	position:absolute;
	}

/* --------------------------------------------------- menu navbar -------------------------------------- */


#menuWrap {position:absolute; top:8.2em; /* same as branding div height */  /* bgcolor is same as wrapper */
			left:.1em; float:left; height:15px; padding-right:1px; margin-left:1px;}  /* -----------changes main navbar ----------------------------------- */
#menu {margin:0; padding:0 0 0 1px; list-style:none; white-space:nowrap; text-align:left; float:left;}

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px; border:1px solid #000; border-color:#ddd #333 #000 #ddd;}

#menu ul.ul-one {background:#b0d0e0;}  color of sub menu background 
#menu ul.ul-two {background:#a8c8d8;}
#menu ul-two {background:#a8c8d8;}
#menu ul.ul-three {background:#a8c8d8;}
#menu ul.ul-four {background:#98b8c8;}
#menu ul.ul-five {background:#90b0c0;}
#menu ul.ul-six {background:#88a8b8;}
#menu ul.ul-seven {background:#80a0b0;}

#menu li.li-top {float:left; display:block;}
#menu li.first {background:none;}

#menu a {display:block; font:normal 10px verdana,arial,sans-serif; color:#000; line-height:15px; text-decoration:none; padding:1px 10px 0 9px;} /* changes font on all levels of navbar */

#menu :hover a:hover {background:#021859; color:#fff;}  color when mouse hovers over main menu i. e. home ------------ 

#menu li a.sub {background-color: ;}

#menu li.li-top a.top {float:left;}

#menu li a.top:hover {position:relative; background:#000; color:#fff;}
#menu li.li-top:hover {position:relative; background:#000; color:#fff;}

#menu li.li-top:hover > a, #menu li.li-top:hover ul :hover > a {background:#877e81; color:#fff;}  /* changes color of all hovers on all layers why? */

#menu li.li-top:hover ul {margin-top:16px;}

#menu :hover ul {left:0;}
#menu :hover ul a {white-space:nowrap;}
#menu :hover ul b {position:absolute;}
#menu :hover ul.right {left:auto; right:-1px;}

#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul
{left:95%; margin-top:-26px;}

#menu :hover ul :hover ul.left, 
#menu :hover ul :hover ul :hover ul.left,
#menu :hover ul :hover ul :hover ul :hover ul.left,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul.left,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul.left,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul.left
{left:auto; right:95%; margin-top:-26px;}

#menu :hover ul ul, 
#menu :hover ul :hover ul ul,
#menu :hover ul :hover ul :hover ul ul,
#menu :hover ul :hover ul :hover ul :hover ul ul,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul ul,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul ul
{left:-9999px;}

#menu :hover ul ul.left, 
#menu :hover ul :hover ul ul.left,
#menu :hover ul :hover ul :hover ul ul.left,
#menu :hover ul :hover ul :hover ul :hover ul ul.left,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul ul.left,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul ul.left
{left:-9999px; right:auto;}

#menu table {border-collapse:collapse; margin-top:-1px;}

/* -------------- hides text to allow for blank dropdown menus for ease in selecting ------------- */

.hides_text{
	color:#b0d0e0;
	}
	
.hides_text_white{
	color:#ffffff;
	}
/* -------------------------------------------- left column vertical navbar ----------------------- */

#verticalnavbar{  
	/* navbar for vertical navbar only */
	width:90%; /* centers whole vertical navbar box inside leftcolumn horizontally - does not center list items inside box */
	/* what to use if you want an image as background: background:#fff url(navblue2.jpg) repeat-x center */
	text-align:right;
	border:solid 1px #021859;
	background-color:#709bbb;
	}

#verticalnavbar ul{
	/* removes bullets from ul in the navbar */
	list-style-type:none;
	padding: 0px 0px 0px 0px;   /* padding and margin are for the entire menu not each individual item in menu */
	margin:0em 0em 0em;
	}

#verticalnavbar li{
	/* list items in the nav bar */
	/* for flyout menu */
	position:relative;
	background:#d2deea;
	margin:0em 0em 0em 0em;  /* margin between menu items not margin around whole vertical navbar */
	}

#verticalnavbar a, 
#verticalnavbar a:link, 
#verticalnavbar a:visited{
	/* applies to navbar links, visited and unvisited */
	text-decoration:none;  /* no underlines */
	font-family:Verdana, Geneva, Arial, Sans-Serif;
	font-size:80%;
	color:#ffffff;
	background:#877e81;
	display:block;
	height:1.9em;
	width:auto;  /* width of main vertical items */
	text-align:center;
	line-height:1.9em;
	outline-style:none;  /* takes off dotted border in Firefox -- but why doesn't it work in IE7*/
	}

#verticalnavbar a:hover, 
#verticalnavbar a:active, 
#verticalnavbar li.selected a:link, 
#verticalnavbar li.selected a:visited{
	/* navbar hover, active and links */
	background:#d9d9d9;
	color:#021859;
	}


/* ------------------------- flyout menu for vertical navbar ---------------------------------------------------------------------------------- */


#verticalnavbar li ul{
	/* applies only to flyout menu list items in navbar */
	position:absolute;
	top:0;
	left:100%;
	z-index:105;
	visibility:hidden;
	border:solid 1px #021859;
	border-right:solid 2px #021859;
	border-bottom:solid 2px #021859;
	}	

#verticalnavbar li:hover ul,
#verticalnavbar li a:hover ul{ /* IE6 hack */
	/* make flyout menu visible on navbar hover */
	visibility:visible;
	}

#verticalnavbar li:hover ul li a,
#verticalnavbar li a:hover ul li a{ /* IE6 hack */
	background:#d9d9d9; 
	color:#000000;  /* text color */
	text-align:left;
	display:block;
	width:16em;  /* width of flyout menu items */
	padding: 0 0 0 1em;
	height:1.9;
	}

#verticalnavbar li:hover ul li a:hover,
#verticalnavbar li a:hover ul li a:hover{ /* IE6 hack */
	/* hover on drop-down menu links */
	background:#c3b1af;
	color:#000000;
	}

#verticalnavbar table {
  	/* IE6 hack applies to its table flyout menu */
	margin:-1px; 
  	border-collapse:collapse; 
  	position:absolute;
  	top:0em;
  	left:99%;
  	z-index:105;
	}

/* end navbars -------------------------------------------------------------------------------------------------------------------------------------- */


/* --------------------------------------------------- leftcolumn --------------------------------------- */


#leftcolumn{
	/* remember, if you change leftcolumn's width, you also have to change content's left margin */
	width:12em;
	margin:10px auto 0px auto;
	float:left;
	/* centers images and text inside this div */
	text-align:center;
	/* for absolutely-positioned leftcolumn */
	position:absolute;
	top:8em;  /*same as branding div height */
	left:0;
	}
	
#leftcolumn img{
	/* applies to images in the leftcolumn div */
	width:80%;
	margin: 1em 0em 1em 0em;
	z-index:10;
	}

#leftcolumn p{
	/* applies to paragraphs in the leftcolumn division */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	font-size:0.8em;
	margin:.5em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	}
	
#leftcolumn_p8{
	/* applies to paragraphs in the leftcolumn division */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	font-size:0.4em;
	margin:.5em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	}
	
#leftcolumn h1{
	/* size h1 headings in the content division  - centers img inside this tag also */ 
	font-size:2em;
	text-align:center;
	padding:0px 0px;
	}
	
/* ---------------end leftcolumn ----------------------------------------------------------------------------------------------------------- */


/* ----------------------------------------paragraphs and images ------------------------------------------------------------------------ */
.p_boxed{
	/* applies to paragraphs with border centered */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	border:thin solid #021879;
	font-size:0.7em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:center;
	}
	
	.p_boxed_green{
	/* applies to paragraphs with border centered */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	border:thin solid #444444;
	font-size:0.7em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	color: #00cc00;
	text-align:center;
	}
	
	.p_boxed_justify{
	/* applies to paragraphs with border justify */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	border:thin solid #021879;
	font-size:0.7em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:justify;
	}

.p_large{
	/* applies to paragraphs without border centered */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	font-size:1em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:center;
	}
	
.p_medium{
	/* applies to paragraphs without border left aligned */
	padding:0.25em;
	width:90%;
	font-family:Tahoma, Verdana, Sans-Serif;
	font-size:.83em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:left;
	}
.p_small_centered{
	/* applies to paragraphs without border left aligned */
	padding:0.01em;
	width:90%;
	font-family:Tahoma, Verdana, Sans-Serif;
	font-size:7em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:center;
	}

.p_boxed_large{
	/* applies to paragraphs with border centered */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	border:thin solid #021879;
	font-size:1em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:center;
	}

.p_boxed_left{
	/* applies to paragraphs with border left aligned */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	border:thin solid #021879;
	font-size:0.7em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:left;
	}

.p_boxed_left_larger{
	/* applies to paragraphs with border left aligned */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	border:thin solid #021879;
	font-size:0.8em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:left;
	}
	
.p_boxed_left_1em{
	/* applies to paragraphs with border left aligned */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	border:thin solid #021879;
	font-size:1em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:left;
	}	
	
.p_boxed_right{
	/* applies to paragraphs with border right aligned */
	padding:0.25em;
	width:80%;
	font-family:Tahoma, Verdana, Sans-Serif;
	border:thin solid #021879;
	font-size:0.7em;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:right;
	}
	
.p_boxed_no_size{
	/* applies to paragraphs with border but you can change size */
	padding:0.25em;
	width:95%;
	font-family:Tahoma, Verdana, Sans-Serif;
	border:thin solid #021879;
	margin:1em auto; /* "auto" centers text horizontally in Firefox "1em" takes out extra space top & bottom in IE*/
	text-align:center;
	}

.image-left{
	float:left;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-top: 5px;
	margin-left: 5px;
	border: 1px solid #191970;
	padding: 5px;
	}

.image-left_borderless{
	float:left;
	margin-left: 5px;
	margin-bottom: 10px;
	margin-top: 5px;
	margin-right: 5px;
	padding: 5px;
	}
	
.image-centered_borderless{
	float:center;
	margin-left: 5px;
	margin-bottom: 10px;
	margin-top: 5px;
	margin-right: 5px;
	padding: 5px;
	}
	
img.centered {
    /* example:  <img class="centered" src="..." alt="..."> */
	display: block;
    margin-left: auto;
    margin-right: auto;
	 } 

	
.image-right{
	float:right;
	margin-left: 5px;
	margin-bottom: 10px;
	margin-top: 5px;
	margin-right: 5px;
	border: 1px solid #191970;
	padding: 5px;
	}
	
.image-right_borderless{
	float:right;
	margin-left: 5px;
	margin-bottom: 10px;
	margin-top: 5px;
	margin-right: 5px;
	padding: 5px;
	}

.p16{
	/* size 14  bold; paragraph text - centers img inside this tag also */ 
	font-size:16px;
	text-align:center;
	padding:0px 0px;
	}
	
.p14{
	/* size 14  bold; paragraph text - centers img inside this tag also */ 
	font-size:14px;
	text-align:center;
	padding:0px 0px;
	font-weight:bold;
	}
	
.p12{
	/* size 12 paragraph text - centers img inside this tag also */ 
	font-size:12px;
	text-align:center;
	padding:0px 0px;
	}

.p10{
	/* size 10 paragraph text - centers img inside this tag also */ 
	font-size:10px;
	text-align:center;
	padding:0px 0px;
	}

.p8{
	/* size 8 paragraph text - centers img inside this tag also */ 
	font-size:8px;
	text-align:center;
	padding:0px 0px;
	}

.p14-left {
	color: #000000;
	font-size: 14px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-bottom: 0;
	}
	

.leftalign{ 
  	/* Applies only where class="leftalign" */ 
	font-family:Verdana, Geneva, Arial, Sans-Serif; 
	font-size:80%;
	color:#000000;
	text-align:left;
	} 
	
.centeralign{
	/* applies only where class="centeralign: */
	font-family:Verdana, Geneva, Arial, Sans-Serif; 
	font-size:80%;
	color:#000000;
	text-align:center;
	}
	
/* -------------------------------------------------- content if whole page and no leftcolumn -------- */
#content2{
	/* remember, content is same width as branding */
	margin:auto;
	background-color:#ffffff;
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	padding:2em 10px 10px 20px;
	}

/* --------------------------------------------------- content --------------------------------------- */
	
#content{
	/* remember, if you change leftcolumn's width, you also have to change content's left margin */
	margin-left:12em;
	background-color:#ffffff;
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	padding:2em 10px 10px 10px;
	font-size: 16px;
	}

#content h1, #content h2, #content h3, #content h4, #content h5{
	/* styles h1, h2, and h3 style rules in the content division */
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	text-align:center;
	font-weight:normal;
	font-variant:normal; /* can also use font-variant:small-caps */
	letter-spacing:0.08em; /* spacing between letters not lines */
	}

#content h1{
	/* size h1 headings in the content division */
	font-size:2em;
	}

#content h2{
	/* size h2 headings in the content division */
	font-size:1.5em;
	}

#content h3{
	/* size h3 headings in the content division */
	font-size:1.25em;
	}

#content h4{
	/* size h4 headings in the content division */
	font-size:1em;
	font-weight:bold;
	}

#content ul{
	/* applies to unordered lists in the content division */
	padding:10px 0 10px 40px;
	}

#content ol{
	/* applies to ordered lists in the content division */
	padding:10px 0 10px 40px;
	}

#content p{
	/* puts extra space between lines; 1.5--one-and-a-half spacing; 2em=doublespacing or twice the current font size */
	line-height:1.25em;
	}
/* ------------------------------------------------------------------------- end content ------------------------------------------------*/	

/* ------------------------------------------------------------------------- ul li ------------------------------------------------*/	

.ul{
	/* applies to unordered lists in any division */
	padding:10px 0 10px 40px;
	}

.ol{
	/* applies to ordered lists in the any division */
	padding:10px 0 10px 40px;
	}

.li_alpha{
	/* applies to ordered lists in the any division */
	
	margin:10px 0 10px 24px;
	list-style-type:lower-alpha;
	}


.li{
	/* applies to ordered lists in the any division */
	
	margin:10px 0 10px 24px;
	}

.ul_margin_wide { /* moves list over 8m from margin so it indents*/
	margin:1em auto 1em 8em;
	}
	
.ul_margin_normal { /* aligns list under paragraph etc above it instead of going too far to the left and sticking out */
	margin:1em auto 1em .7em;
	}

/* --------------------------------------------------- footer --------------------------------------------------------------------------------- */
#footer{ 
  	clear:both; 
  	text-align:center;
	border-top:solid thin #021859; 
  	font-size:10px;
	} 

/* -------------------------------------------------- captioned pics ------------------------------------------------------------------------------------ */

div.captionpic_left{
	/* captioned images that are floated left*/	
	width:80%; /* change this width to make tiny pics, etc */
	padding:0.25em;
	margin:0.25em 0.25em 0 0;
	border:solid 1px #000000;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:0.8em;
	color:#000000;
	text-align:center;
	float:left;
	}

div.captionpic_left_not_centered20{
	/* captioned images that are floated left*/	
	width:15%; /* change this width to make tiny pics, etc */
	padding:0.25em;
	margin:0.25em 0.25em 0 0;
	border:solid 1px #000000;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:0.9em;
	color:#000000;
	text-align:left;
	float:left;
	}

div.captionpic_left50{
	/* captioned images that are floated left*/	
	width:50%; /* change this width to make tiny pics, etc */
	padding:0.25em;
	margin:0.25em 0.25em 0 0;
	border:solid 1px #000000;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:0.8em;
	color:#000000;
	text-align:center;
	float:left;
	}

div.captionpic_right{
	/* captioned images that are floated right*/	
	width:50%; /* change this width to make tiny pics, etc */
	padding:0.25em;
	margin:0.25em 0 0.25em 0;
	border:solid 1px #000000;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:0.8em;
	color:#000000;
	text-align:center;
	float:right;
	}

.captionpic{
	/* captioned images that are floated center*/	
	width:80%; /* change this width to make tiny pics, etc */
	padding:0.25em;
	margin:0.25em auto 0 auto;
	border:solid 1px #000000;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:0.8em;
	color:#000000;
	text-align:center;
	float:center;
	}

div.captionpic{
	/* captioned images that are floated center*/	
	width:80%; /* change this width to make tiny pics, etc */
	padding:0.25em;
	margin:0.25em auto 0 auto;
	border:solid 1px #000000;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:0.8em;
	color:#000000;
	text-align:center;
	float:center;
	}

div.captionpic_normal_borderless_left{
	/* captioned images that are floated center*/	
	 /* no width, picture will be normal size */
	padding:0.25em;
	margin:0.25em auto 0 auto;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:0.8em;
	color:#000000;
	text-align:center;
	float:left;
	}
	
.captionpic img{
	/* centers the image inside a captionpic div */
	width:80%;
	border:none;
	float:center;
	}	
	
div.captionpic img{
	/* centers the image inside a captionpic div */
	width:80%;
	border:none;
	float:center;
	}

div.captionpic_left img{
	/* applies to the image inside a captionpic_left div */
	width:80%;
	border:none;
	}

div.captionpic_right img{
	/* applies to the image inside a captionpic_right div */
	width:80%;
	border:none;
	}


	



	

	.title_blue {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 36px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	color: #709bbb;
}
.title_blue18 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 18px;
	font-weight: bold;
	color: #709bbb;
}

.decoration_none {
	border:none;
	text-decoration: none;
}

.decoration_none_green {
	border:none;
	text-decoration: none;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#093;
	text-align:center;
}