/* ************************************************************************************* */
/* Lay out styles                                                                        */
/* ************************************************************************************* */

#wrapper
{
	margin:auto;
	min-width: 36em;  /* 36 originally */
	max-width: 78em;  /* 72 originally */
    width:expression(document.body.clientWidth < 800? "840px" :
	document.body.clientWidth > 1200? "1200px" : "auto"); 
}


/* Header Elements */
/* *************** */
#header
{
   /* Contains navGlobalBar for screen */
   /* Contains pdamenu for portable devices */
}

#pdamenu, #masthead {
	display: none;
	}

/* Global Navigation & present masthead */
#navGlobalBar {
   /* see menu_abs.css */
   /* menu.js */
}

/* Content Elements */
/* **************** */

/* LeftSideBar - middle - RightSideBar */
#gutter
{
	float: left;
	width: 3%;
	height: 1px;
	display:inline;	
}

#navSideBar  /* left most column */
{
	float: left;
	width: 20%;
	border-right: 1px solid #ccd2d2;	
	border-left: 1px solid #ccd2d2;	
	display:inline;	
}

#middle  /* main content column */
{
	float: left;
	width: 48%;
	margin-left: 3%;
	border-right: 1px solid #ccd2d2;	
	border-left: 1px solid #ccd2d2;		
	display:inline;
}

#rightSideBar /* right most column */
{
	float: left;
	width: 20%;
	margin-left: 3%;
	border-right: 1px solid #ccd2d2;	
	border-left: 1px solid #ccd2d2;	
	display:inline;	
}

/* ************************************ */
/* Feature - RightSideBar                  */
/* ************************************ */

#leftFeature /* left large content pane */
{
	float: left;
	width: 71%;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
	
/* *********************************** */
/* NavSideBar - Main                   */
/* *********************************** */
		
#rightFeature /* right large content pane */
{
	float: left;
	margin-left: 3%;
	width: 71%;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

#rightFeature2 /* right large content pane */
{
	float: left;
	margin-left: 3%;
	width: 71%;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	overflow: auto;
}

/* *********************************** */
/* Drop Nav                            */
/* *********************************** */
div.dropnav {
	background-color: #F5F5F5;
	text-align: center;
	padding: 5px 4px 5px 4px;
	margin: 0px 0px 5px 0px;
}

div.dropnav:focus,
div.dropnav:hover {
	background-color: #69c; /*#EAECF4 */
}

div.dropnav form {
	padding: 0;
	margin: 0;
}

div.dropnav form select {
	width: 175px;
/*	font-size: 0.846em; */
/*	color: #666666; */
}
/* *********************************** */
/* Main                                */
/* *********************************** */
		
#feature /* right large content pane */
{
	float: left;
	width: 94%;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}



/* ********************************************* */
/* Columns inside a column                       */
/* ********************************************* */

		.spacer
		{
			float: left;
			width: 3%;
		}
		
		#col1
		{
			border-top: 1px solid #ddd;
			margin-top: 10px;
			float: left;
			width: 46%;
		}
		
		#col2
		{
			border-top: 1px solid #ddd;
			margin-top: 10px;
			float: left;
			margin-left: 3%;
			width: 45%;
		}
/* ******************************************* */

/* Layout ensure elements don't extend outside of containers */

#middle img {max-width:95%;
   width: expression(this.width > 400 ? 400: true);
} 

#rightFeature img {max-width:95%;
   width: expression(this.width > 600 ? 600: true);
} 

#leftFeature img {max-width:95%;
   width: expression(this.width > 600 ? 600: true);
}

#rightSideBar img {max-width:95%;
   width: expression(this.width > 225 ? 225: true);
} 

#navSideBar img, {max-width:95%;
   width: expression(this.width > 225 ? 225: true);
} 

form input, form textarea {	
   width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
   	margin:5px 0 0 5px; /* set margin on left of form elements rather than right of  label aligns textarea better in IE */
}

/* Footer Elements */
/* *************** */

#footer
{
	clear: both;
	text-align: center;
	font-size: x-small;	
}

/* End of Layout Styles */

#news /* may replace all with sideBar */
{
	float: left;
	width: 20%;
	margin-left: 3%;
	background-color: #bbb;
	font-size: 80%;
	border-left: 1px solid #ccd2d2;
}

.Byte
{
	padding: 2px;
	margin: 2px;
	border: 1px solid #ddd;
	background-color: #eee;	
}

.highlight
{
	padding: 2px;
	margin: 4px; 
	border: 2px solid #69c;
}

.grey a:link
{
	color: #ddd;
}

/* Submenus in side bars */
#submenu dl {
margin: 2px; 
padding: 0 0 10px 0; 
background: #69c;
}
#submenu dt {
margin:0;
padding: 10px;
font-size: 1.4em;
font-weight:bold;
color: #fff;
border-bottom:1px solid #fff; 
background: #69c;
}
#submenu dd {
margin:0; 
padding:0; 
color: #fff; 
font-size: 1em; 
border-bottom:1px solid #fff; 
background: #47a;
}

#expanded dt {
padding: 0; 
font-size: 1em;
border:none;
}

#expanded dd {
margin:0; 
padding-left: 25px; 
border:none;
background: #47a;
vertical-align:text-top; /* added */
}

#gallery a, #gallery a:visited {
color:#fff; 
text-decoration:none; 
display:block; 
padding:5px 5px 5px 20px; 
/* background: #47a; Disabled so dt link is not shadowed unless hovered over */
}

#gallery a:focus,
#gallery a:hover {
background: #258; 
color:#9cf;
}

/* addition for teens page */
.teenpic img {
  margin:5px 5px 5px; 
  border:1px solid #000; 
  float:left;
  }
  
.middle {
vertical-align:middle;
}

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

/* ********************************* */
/* Info in right side bar            */

.info dl {
margin: 2px; 
padding: 0 0 10px 0; 
background: #69c; 
}
.info dt {
margin:0;
padding: 10px;
font-size: 1.4em;
font-weight:bold;
color: #fff;
border-bottom:1px solid #fff; 
background: #69c;
}
.info dd {
margin:0;
/* padding:0;  */
padding: 0 0 0 5px;
/* color: #fff; */
color: #000; 
font-size: 1em; 
border-bottom:1px solid #fff; 
background: #eee;
}
.infobytes a, .infobytes a:visited {
color:#909;
display:block; 
/* padding:5px 5px 5px 20px; */
padding:5px 5px 5px 15px;
}


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



#news h4 {
	margin-bottom: 0; 
}
#news p {
	margin-top: 0;
}

#infoBar {
	float: right;
    padding-left: 5;
    border-left: 1px solid #ccd2d2;
    padding: 0px 0px 0px 10px;
	width: 300px;
	background-color: #EEEEEE;
}

#bookmark {
    padding: 5px;
    border: 1px solid #ccd2d2;
	width: 300px;
	background-color: #EEEEFF;
}

#bookmark td {
	padding: 5px;
}

.border {
    border: 1px solid #ccd2d2;
}

.quicklinks {
	padding-left: 10px;
	font-size: 0.8em;	
	color:#fff;
}

.quicklinks a:link {
	color:#fff;  
}
.quicklinks a:visited  {
	color:#fff;  
}

.quicklinks a:focus,
.quicklinks a:hover {
	color:#FF9;
}

.sitemap {
    border: 1px solid #ccd2d2;
	padding: 5px 15px 5px 15px;
    background-color: #EEEEFF;
}

.siteindent {
	padding-left: 10px;
	font-size: 0.9em;	
}

.indent {
	padding-left: 10px;
}

.whats_new {
    border: 1px solid #ccd2d2;
    padding: 5px;
	background-color: #FFFFEE;
	margin: 20px;
}

.facts {
    border: 1px solid #ccd2d2;
    padding: 0px 0px 0px 10px;
	background-color: #FFFFEE;
	font-size: 1em; 	
}

.story{
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 80%;
	width: 90%;
}

.story p{
	padding: 0px 0px 10px 0px;
}

td.storyLeft{
	padding-right: 12px;
}

.story a.capsule{
	font: bold 1em Arial,sans-serif;
	color: #005FA9;
	display:block;
	padding-bottom: 5px;
}

.story a.capsule:focus,
.story a.capsule:hover {
	text-decoration: underline;
}

.capsule {
	font: bold 1em Arial,sans-serif;
	color: #005FA9;
	display:block;
	padding-bottom: 5px;
}

/* ********* Kids Menu ***********************************/
/* *******************************************************/
	
.kidsmenu2 ul {
  	margin: 0 0 5px 0;
 	padding: 0 0 2px 0;
 	list-style-type: none;
 	width:250px;
	border-left:3px solid #090; 
 	border-right:3px solid #090;
}
 
.kidsmenu2 li {
	color: #00F;
	font-size: 1.2em; 
 	padding: 4px 0 4px 14px;
	font-family: Comic Sans Ms, Arial, Helvetica, sans-serif;	
 	 font-weight:bold;
 	background-color:#FFF;
}

.kidsmenu2 li a{
	text-decoration: none;
}

.kidsmenu2 li a:focus,
.kidsmenu2 li a:hover {
	background-color: #FF0; 
	text-decoration:underline;
}
 


.kidsmenu ul {
  	margin: 0 0 5px 0;
 	padding: 0 0 2px 0;
 	list-style-type: none;
 	width:250px;
}
 
.kidsmenu li a {
	color: #00F; /* originally #333 */
 	display: block;
 	border-left:3px solid #090;  /* originally #666 */
 	border-right:3px solid #090; /* originally #666 */
	height: 24px; /* originally 16 */
	font-size: 1.2em; /* added */
 	padding: 4px 0 4px 14px;
	font-family: Comic Sans Ms, Arial, Helvetica, sans-serif; /* Added */	
 	text-decoration: none;
 	font-weight:bold;
 	background-color:#FFF; /* originally #fff */
}
 
.kidsmenu li a:focus,
.kidsmenu li a:hover {
	background-color: #FF0; /* originally #666 */
 	color:#00F;             /* originally #666 */
	text-decoration:underline; /* added */
}

/* ********* Teen Menu ***********************************/
/* *******************************************************/
#teen {
  margin:0; 
  padding:0; 
  height:37.5em;   //32.5
  overflow:hidden; 
  background:#f0f0f0;
  }
#teen li {
  list-style-type:none; 
  float:left; 
  display:block; 
  width:100%;
  }
#teen li a {
  display:block; 
  text-decoration:none; 
  color:#00b; 
  margin:0; 
  width:100%;
  }
#teen li a span {
  display:none; 
  color:#000;
  }
#teen li a.one span {
  display:block; 
  height:15em; 
  margin:0 10px;
  }
#teen li a:focus,
#teen li a:hover {
  background:#f1f1f1;
  }
#teen li a:focus span,
#teen li a:hover span {
  display:block; 
  height:15em; 
  margin:0 10px; 
  cursor:pointer;
  }
#teen .h2 {
  margin:0 5px; 
  padding:0; 
  color:#808; 
  font-variant:small-caps; 
  font-size:1.5em; 
  border:0;
  }
#teen .h3 {
  margin:0 5px; 
  padding:0; 
  font-size:1.1em; 
  color:#00b;
  }
#teen img {
  margin:5px 5px 5px 0; 
  border:1px solid #000; 
  float:left;
  }
.curved {
  width:14em;  / 21
  }
.curved .b1, .curved .b2, .curved .b3, .curved .b4  {
  font-size:1px; 
  display:block; 
  background:#88c;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ 
}
.curved .b1, .curved .b2, .curved .b3 {
  height:1px;
  }
.curved .b2, .curved .b3, .curved .b4 {
  background:#f0f0f0; 
  border-left:1px solid #88c; 
  border-right:1px solid #88c;
  }
.curved .b1 {
  margin:0 4px; 
  background:#88c;
  }
.curved .b2 {
  margin:0 2px; 
  border-width:0 2px;
  }
.curved .b3 {
  margin:0 1px;
  }
.curved .b4 {
  height:2px; 
  margin:0;
  }
.curved .c1 {
  margin:0 5px; 
  background:#88c;
  }
.curved .c2 {
  margin:0 3px; 
  border-width:0 2px;
  }
.curved .c3 {
  margin:0 2px;
  }
.curved .c4 {
  height:2px; 
  margin: 0 1px;
  }
.curved .boxcontent {
  display:block; 
  background:transparent; 
  border-left:1px solid #88c; 
  border-right:1px solid #88c; 
  font-size:0.9em; 
  text-align:justify;
  }


/*********** Menu Select List ****************************/
.options ul {
  list-style: none;
  display:block;
 }

.options li {
  font-size: 1.4em;
  list-style: none;
 }

/*********** Definition Lists ****************************/
/*dt, dd {
    border: 1px solid blue;
    padding: 5px;
    background: #e0e0e0;
    }

dt { border-bottom: none; }

dd { border-top: none; margin-left: 0; margin-bottom: 5px;}
*/
/************ Area - Programs ***********/

div.programs
{
/*margin: 0 0 1em 0; */
background: #FFFFDD;
/* padding: 1em 0.5m; */
border: 1px solid #131210;
width: 47em; /* used to be 50 - changed due to issues with I.E. with those using low resolution */
}

.programs h3
{
margin: 0;
background-color: #0000AA;
color: #FFFFFF;
padding: .5em .5em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

.programs p
{
background: #FFFFDD;
}
/************ Definition Lists - Border Around ***********/
 dl.border-around
{
margin: 2em 1em 0 2em;
padding: 0;
width: 40em;
}

.border-around dt
{
background-color: #0000AA;
color: #FFFFFF;
padding: .5em .5em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
border-left: 1px solid #131210;
border-right: 1px solid #131210;
border-top: 1px solid #131210;
}

.border-around dd
{
margin: 0 0 1em 0;
background: #FFFFDD;
padding: 1em .5em;
border-left: 1px solid #131210;
border-right: 1px solid #131210;
border-bottom: 1px solid #131210;
}

/*********** Definition Lists - Calendar *****************/
dl.event
{
margin: 2em 0;
padding: 0;
font-family: georgia, times, serif;
}

.event dt
{
	margin-left: 7px;
	margin-right: 7px;
position: relative;
left: 0;
top: 1.1em;
width: 10em;
font-weight: bold;
}

.event dd
{
border-left: 1px solid #000;
margin: 0 0 0 11em;
padding: 0 0 .5em .5em;
}

/*********** Definition Lists - Bookmarks *****************/
dl.bookmark
{
margin: 2em 0; 
padding: 0;
font-family: georgia, times, serif; 
}

.bookmark dt
{
clear: both;
/*width: 7em; */
width: 15%;
padding: .5em; 
float: left;
margin-left: 5em;
}

/*	width: 48%;
	margin-left: 3%;*/


.bookmark dd
{
width: 70%;
margin: 0 0 0 15em;
/*padding: .5em;   */
padding: .5em;   
}

/*********** Tidy Table *****************************************/
.tidy {
	font-size: 1em;
	margin: .5em;
}

.tidy td {
	padding-right: 2em;
}
	
/*********** Definition Lists - Small Bookmarks *****************/
dl.sm_bookmark
{
margin: 2em 0; 
padding: 0;
font-family: georgia, times, serif; 
}

.sm_bookmark dt
{
clear: both;
/*width: 7em; */
width: 15%;
padding: .5em; 
float: left;
margin-left: 5em;
}

/*	width: 48%;
	margin-left: 3%;*/


.sm_bookmark dd
{
width: 70%;
margin: 0 0 0 5em;
/*padding: .5em;   */
padding: .5em;   
}

/*********** Definition lists - table style **************/

div.table {
	margin-left: 7px;
	margin-right: 7px;
}

dl.table { 
	border-bottom: 1px solid #999; 
}

dt.table
{
width: 15em;
padding: .5em;
float: left;
margin: 0;
border-top: 1px solid #999;
font-weight: bold;
}

dd.table
{
margin-left: 16em;
padding: .5em;
}

dd.table.first { border-top: 1px solid #999; }

/*********** Lists over multiple columns *****************/

.multi ul {
  float: left;
  width: 40em;
  margin: 20px 0 1em;
  padding: 0;
  list-style: none;
  font-size: 1em;
  line-height: 1.3em;
  color: #036; 
}
 
.multi li {
  float: left;
  width: 12em;
  margin: 0 0 1.5em 0; /* originally 0 for all */
  padding: 0;
  list-style: none;
} 

  /* separate the list from subsequent markup */
.wrapper div
  {
    margin-bottom: 1em;
  }

.wrapper br {
	clear:both;
}	
/*********** .relatedLinks styles ***********/

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

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

/* ************************************************************************************* */
/* HTML tag styles                                                                       */
/* ************************************************************************************* */

body {	
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
    margin: 0 0 0 0;
	font-size: 80%;
}

h1, h2, h3, h4, h5, p
{
    margin-left: 7px;
    margin-right: 7px;
}

h1 {
	font-size: 2em;
}

h2 {
	color: #000066;
	}
	
h3 {
	color: #3333FF;
	}

h4 {
	color: #003366;
}

p {
	font-size: 1em;
}

.list br {
	clear: both;
}

.yourlibrary {font-family:"American Typewriter Medium Weight";}

.clearboth { clear: both; }

.larger { font-size:1.2em; }

hr {
	border: 0;
	height: 1px;
    width: 100%;
    background-color:#CCCCCC;
}

strong {
	font-weight: bold;
	color:#000066
}

a:link {
	color: #0000FF;
}

a:visited {
/* #0000FF */
  color: #3366FF;
}

a:focus,
a:hover {
	text-decoration: none;
}

a:active {
	color: #FF0000;
}

img.floatLeft { 
    float: left; 
    margin: 10px;
}
img.floatRight { 
    float: right; 
    margin: 10px;
}

.floatimgCaptionR {
	float: right;
	padding: 4px;
    border: 1px solid #ccd2d2;
	display:block;	
}

.floatimgCaptionL {
	float: left;
	padding: 4px;
    border: 1px solid #ccd2d2;
	display:block;	
}

/* New image with caption */
div.figure {
/*  float: right; */
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

/* Example 
<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Scale model of the
    Eiffel tower in Parc Mini-France
</div>
*/

.caption {
	font-weight:bold;
}

.center {
	text-align:center;
}

.borderY {
	background-color:#FFFFEE;
	padding: 4px;
    border: 1px solid #ccd2d2;
}

.borderB {
	background-color:#EEEEFF;
	padding: 4px;
    border: 1px solid #ccd2d2;
}

.borderHeader {
	background-color: #3300CC;
	color: #FFFFFF;
	padding: 4px;
}

.borderHeaderG {
	background-color:#FFCC33;
	color:#333333;
	padding: 8px;
	font-size:1.5em;
	text-align:center;
}

.borderHeaderB {
	background-color:#3300CC;
	color:#FFFFFF;
	padding: 8px;
	font-size:1.5em;
	text-align:center;
}

/* ************************************************************************************* */
/* Link Styles                                                                           */
/* ************************************************************************************* */

.linkinfo p {margin-left:15px; margin-right:20px;}  
.linkinfo img {margin:15px; float:left;}  
.linkinfo h1 {margin-left:15px;}
/* the style starts here */
a.tooltip {color:#c00;}
a.tooltip b {display:none;}
a.tooltip:focus,
a.tooltip:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:focus b,
a.tooltip:hover b {display:block; position:absolute; top:20px; left:-25px; padding:5px; font-weight:normal; color:#000; border:1px solid #888; background:#ffc; width:150px;}
a.tooltip:focus b em,
a.tooltip:hover b em {position:absolute; left:20px; top:-6px; width:11px; height:6px; background:#fff url(../images/tooltip.gif) 0 0; display:block; font-size:1px;}


/* ************************************************************************************* */
/* Table styless                                                                         */
/* ************************************************************************************* */

.data {
	padding: 10px 0px 0px 10px;
	background-color: #FFFFDD;
}

.booklist {
	padding: 10px;
    border: 1px solid #ccd2d2;
}
		
.info td {
	padding: 2px 5px;
}

.col_light {
  background-color: #FFFFEE;
/*  text-align: center; */
}
.col_med {
  background-color: #FFFFDD;
/*  text-align: center;*/
}
.colheader {
  font-weight: bold;
  background-color: #EEEEFF;
  color: #006699;
  text-align: left;
  vertical-align:top;	  
}

.border {
    border: 1px solid #ccd2d2;
}  

.border td {
    border: 1px solid #ccd2d2;
}  

.toprow {
  font-weight: bold;
  font-size:medium; 
  text-align: center;
  background-color: #FFDDDD;
  padding: 10px 5px 10px 5px;
}   

.rowheader {
  font-weight: bold;
  font-size:larger;
  text-align: center;
  background-color: #EEEEFF;
  border-right: 1px;
  padding: 2px 0px 2px 0px;
}

/* ************************************************************************************* */
/* Content styless                                                                       */
/* ************************************************************************************* */

.strike {
	text-decoration:line-through;
}

.standout {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #006699;
	font-weight:bold;
}

.fun {
	font-family: Comic Sans Ms, Arial, Helvetica, sans-serif;
    color: #990099;
}

.disclaimer {
	font-size: xx-small;
	color: #666699;
}

.style2 {
	font-size: x-small;
	text-align: center;	
}
.style3 {
	font-size: xx-small; 
}

.style4 {
	color: #CC0000;
	font-weight: bold;
}

.style5 {
	font-size: 80%;
}

.style9 {
	color: #01346D; 
}

.style10 {  
	color:#333333;
}

.style11 {
	color: #333333;
	font-weight: bold;
}
.style12 {
	font-size: small;
	font-weight: bold;
}

.style13 {
	color: #003366;
	text-align: center;
	font-weight: bold;
}	
.spotlight {
/*	background-color:#CCFFCC; */
	background-color:#DDFFDD;
}
}