/* Global Styles 
#0066cc  royal blue footer bar
#99ccff  light blue background
#003399  dark blue date bar
*/
/* Global Styles */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
}

body {
	width: 95%;
	min-width: 800px;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    background: #C0DFFD;
    text-align: center;
    margin-left: 1%;
    padding: 0px;
}

.clearit { 
     clear: both; 
     height: 0; 
     margin: 0;
     font-size: 1px;
     line-height: 0px;
}

.center {
	text-align: center;
}

.center img {
	text-align: center;
}

a {
	color: #FF6600;
	font-weight:bold;
	text-decoration: none;
	}
	
a:hover {
	color: #3366CC;
	}

.hide {
	display: none;
}
#holder{
	width: 99%;
	text-align: left;
	background-color: #E6F3FF;
}
#wrap{
	margin: 0;
	padding: 0;
	border: 0;
	width: 99%;
}
#header {
	background-image: url("../images/boo1.jpg"); /* 116x122    */
	background-position: left;
	background-repeat: no-repeat;
	background-color: #3366CC;
	padding-top: 20px;
	height: 170px;
}
#logo, #tagline{
	margin-left: 320px;
	width: auto;
	text-align: center;
	font-family: "trebuchet MS", "Times New Roman";
}
#dateline {
	text-align: right;
	background-color: #039; /* #069; */
	color: #fff;
	font-family: "trebuchet MS", "Times New Roman";
	font-variant: small-caps;
	font-size: 90%;
	font-weight: bold;
	height: 20px;
	border: thin solid #C0DFFD;
}
#leftnav {
	float: left;
	width: 19%;
	padding-top: 10px;
}
#nav {
    width: 135px;
    float: left;
	background-color: #E6F3FF; /*#003366;*/
    padding: 3px;
/*	border: 1px solid #606;  */
	border: 1px solid #E6F3FF;
}
#nav ul, li{
	list-style: none;
}

#boonav {
    float: left;
	background-color: #E6F3FF; /*#003366;*/
    padding: 3px;
/*	border: 1px solid #606;  */
	border: 1px solid #E6F3FF;
}
#boonav ul, li{
	list-style: none;
}

/* subnavigation styles - the following control the placement of the buttons under the banner */
/* functionality has been added for hover over drop down menus (requires small javascript) */
#boonav ul {
/*	font-family: arial, sans-serif;*/
	font-family: Verdana,sans-serif;
	margin: 0;
	white-space: nowrap;
	padding: 0;
}

#boonav li {
/*	display: inline;  used to make inline menu */
	list-style-type: none;
	font-family: Verdana,sans-serif;
	font-weight: bold;
	text-align: left;
	padding-top: 2px;
	padding-bottom: 2px;
	height: 16px;
}

#boonav li ul {
	display: none;
	position: absolute;
	top: 131px;
	z-index: 100;

/*	margin-left: -5px;*/
	margin-top: 0px;

	color: #369;
	background-color: #FFF;
	border: solid #369;
	border-width: 1px 1px 0px 1px;

}

#boonav li ul a {
	display: block;
	width: 90%;

	color: #369;
	background-color: #FFF;
	border-bottom: 1px solid #369;
	text-indent:3px;
}

#boonav li ul a:hover {
	display: block;
	width: 90%;

	color: #3366CC;
	background-color: #9cc;

	text-indent:3px;
}

#boonav li ul li {

}

#boonav li > ul {
	top: auto;
	left: auto;
}

#boonav li:hover ul, #boonav li.over ul {
	display: block;
}
/* sets the subnav buttons and link states, used for subnav buttons*/
/* définir les attributs et les états  pour les boutons dans les sous-liens de navigation*/

.boobutton2, .boobutton2 a, .boobutton2 a:link, .boobutton2 a:visited, .boobutton2 a:active, .boobutton2 a:hover { 
	color: #FF6600;
	font-weight:bold;
	text-decoration: none;
/*	color: #3366CC;*/
/*	background-color: #369;*/
	border-style: 1px groove #990000;
	text-decoration: none;
	text-align: left;
	z-index: 1;
 } 

.boobutton, .boobutton a, .boobutton a:link, .boobutton a:visited, .boobutton a:active, .boobutton a:hover, .boobutton select { 
	color: #FF6600;
/*	background-color: #369;*/
	border-style: 1px groove #990000;
	text-decoration: none;
	text-align: left;
	z-index: 1;
 } 
 .boobutton select {
 	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	z-index: 1;
 }  
 
/* *************end drop down navigation **************************** */
.mylinks {
	vertical-align: middle;
	font-weight: bold;
}  

/******* menu flyout navigation ******/

.menu {
z-index:1000;
font-size:90%;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width: 150px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position: relative;
background-color: #E6F3FF; /*#d1dddd; #d4d8bd;*/
height: 26px;
width: auto;
}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color: #F60;
text-indent:5px;
border:1px solid #669;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background:/*#d4d8bd*/#E6F3FF; width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color: #066/*#D49B00 #399*/; background:#B8C6C6;}

.menu :hover > a {
color: #066;
font-weight: 800; 
background: #B8C6C6;/*#949e7c;*/
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: 150px; 
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

/******* end menu flyout navigation ******/

#content {
	width: auto;
    padding: 0px;
	margin-left: 170px;
	background-color: #C0DFFD;
	z-index: 10;
}
/**************   CSS Table-like Layout Test **************/
/*
    For the table to display properly across browsers please ensure the following:
        (leftcol width) + (midcol width) + (rightcol width) + (cellpad width) <= 99 %
    And ideally:
        (cellpad width) should be equal to:   100 - (leftcol width + midcol width + rightcol width)
*/

/* Container for the table-like CSS layout (width of table can be adjusted here) */
div.quadrow { 
	width: 98%;
	color: #030;
	font-size: 12px;
	text-align: center;
	border-bottom: 1px solid #9cc; 
}
/* formatting for the first style of row in the table */
div.row {
/*	border-bottom: 1px dotted black;*/
	width: 100%;
    padding: 0px 3px;
    margin: 0px;
	border-top: 1px solid #9cc; 
}

div.row img {
	border: 0px;
/*	border-bottom: 1px dotted black;*/
	text-align: center;
    padding: 0px 3px;
    margin: 0px;
}
/* left column cell */
div.leftside {
  width: 20%;
  float: left;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  line-height: 14px;
  text-align: center;
/*  border: 1px inset #306;*/
}
/* middle column cell */
div.middle {
  width: 55%;
  float: left;
  text-align: center;
  padding-left: 10px; 
}

div.middle img {
  float: left;
  text-align: left;
  border: 0px;
}

/* right column cell */
div.rightside {
  width: 20%;
  float: right;
  padding: 0px;
  margin: 0px;
}

/* formatting for the 2nd style of row in the table */
div.row2 {
	border-bottom: 1px dotted black;
	width: 100%;
    padding: 0px 3px 0px 3px;
    margin: 0px 0px 0px 0px;
	background: #FFC; /* #F4F4F4;*/
}

/* formatting for the header row in the table */
div.rowhdr {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	width: 100%;
    padding: 0px 3px 0px 3px;
    margin: 0px 0px 0px 0px;
	background: #CCC;
}
/* formatting for the header row in the table */
div.rowtpr {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	width: 100%;
	max-height: 1px;
    padding: 0px 3px 0px 3px;
    margin: 0px 0px 0px 0px;
	background: #CCC;
}

/* This spacer causes the container div (timeline) to expand around the floated divs, which is not the default behaviour.
   This should be placed at the beginning and end of each row, inside the row tag.
*/
div.spacer {
  clear: both;
  line-height: 2px; 
  height: 2px;
}

/* This div should be placed between the leftcol and midcol div's */
div.cellpad {
  width: 2px;
  padding: 0px;
  margin: 0px;
}

/* Misc formatting */

.colhdr { font-style: italic; font-weight: bold; }

/*********************end css table-like layout *****************************/
.footnote{
	display: none;
}
#footer{
	font-size: 75%;
	color: #ffc;
	border-top: 1px solid #06C;
	padding: 5px;
	text-align: center;
	background-color: #06C;
}
.callout {
    font: bold 130% Georgia, "Times New Roman", Times, serif;
    color: #333;
    margin: 0;
    padding: 20px 10px;
}

p {
    font-size: 90%;
}
#content p {
	line-height: 120%;
}
a img {
	border: none;
}
/*********** #sectionLinks styles ***********/

#boonavlinks{
	position: relative;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #cccccc;
	font-size: 90%;
}

#boonavlinks h3{
	padding: 5px;
	font-size: 90%;
}
#boonavlinks h4{
	padding: 2px;
	font-size: 80%;
	background-color:#FF9;
}

#boonavlinks a {
	display: block;
	border-top: 1px solid #cccccc;
	padding: 2px;
}

#boonavlinks a:hover{
	background-color: #dddddd;
}
/*********** #sectionLinks styles ***********/

#navlinks{
	position: relative;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #cccccc;
	font-size: 90%;
}

#navlinks h3{
	padding: 5px;
	font-size: 90%;
}
#navlinks h4{
	padding: 2px;
	font-size: 80%;
	background-color:#FF9;
}

#navlinks a {
	display: block;
	border-top: 1px solid #cccccc;
	padding: 2px;
}

#navlinks a:hover{
	background-color: #dddddd;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
	position: relative;
	margin: 0px;
	padding: 0px 0px 10px 10px;
	font-size: 90%;
}

.relatedLinks h3{
	padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
	display: block; 
}

/************************************************/


/* ID Styles */

	
#logo 	{
	font: 22px Verdana, Arial, Helvetica, sans-serif;
	color: #CF9;
	letter-spacing: .2em;
	line-height: 30px;
	z-index: 100;
	text-align:center;
	}

#tagline 	{	
	font: 14px Verdana, Arial, Helvetica, sans-serif;
	color: #F93;
	letter-spacing:.4em;
	line-height: 18px;
	text-align: center;
	z-index: 100;
	}

#monthformat {
	border-bottom: 2px solid #E6F3FF;
		}
		
#dateformat {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color: #036;
	letter-spacing:.2em;
	}
	
#dateformat a {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color: #036;
	font-weight:bold;
	letter-spacing:.1em;
	}
	
#dateformat a:hover {
	color: #F60;
	letter-spacing:.1em;
	}


	
/* Class Styles */
	
.bodyText {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color:#003366;
	line-height:20px;
	margin-top:0px;
	}
	
.pageName{
	font: 18px Verdana, Arial, Helvetica, sans-serif;
	color: #3366CC;
	line-height:24px;
	letter-spacing:.2em;
	}
	
.subHeader {
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	text-align: center;
	color: #3366CC;
	line-height: 16px;
	letter-spacing: .2em;
	}

#quote {
	float: right;
	font: 16px "trebuchet MS", "Times New Roman";
	color: #f93;
	line-height: 20px;
	text-align: center;
	}
	
.smallText {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	text-align: left;
	}
	
.navText {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	}
/******** text formating **********/
.red{
	color: #F00;
}
.blue{
	color: #00F;
	font-variant: small-caps;
}
.green{
	color: #060;
	font-style: italic;
	font-weight: bold;
}	
.left{
	text-align: left;
}
.right{
	text-align: right;
}
.center{
	text-align: center;
}

.border {
	border: 1px solid #039;
	text-align: center;
}	

.tiny {
	font-size: xx-small;
}
/*********** #navBar link styles ***********/

#nav ul a:link, #nav ul a:visited {display: block;}
#nav ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#nav li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #nav li {border-bottom: none;}
	
/************** #headlines styles **************/

.headlines {
	margin: 0px;
	padding: 10px 0px 20px 10px;
	font-size: 93%;
}

.headlines p {
	padding: 5px 0px 5px 0px;
}

/* Style spec's for tooltip  */
div#tipDiv {
  position: absolute;
  visibility: hidden;
  left:0;
  top:0;
  z-index:10000;
  background: url("../images/marble.gif") #eef2f9;
  border: 1px solid #336; 
  width: 260px;
  padding: 6px;
  color: #000;
  font-size: 11px;
  line-height:1.3;
}
div#tipDiv a:link { color:#33b }
div#tipDiv a:visited { color:#339 }

  
/************************************************************/

.photos{
	border: 1px solid #066;
	vertical-align: top;
}
.photos h4{
	text-align: center;}
.photos li{
	list-style-image: none; /* url(../images/center_l.gif);*/
	font-size: smaller;
	line-height: 2em;
	padding-left: 3px;
}	
.beautytips {
  padding-top: 5px;
  color: #ffc;
  background-color: #699;
  border: 1px solid #366;
}
.beautytips h4 {
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	text-align: center;
	color: #ffc;
	line-height: 16px;
	letter-spacing: .2em;
	padding: 3px;
	border-bottom: 1px solid #366;

}

.beautytips p {
  padding: 2px;
}