/* PART 1a:  major zoning - content block and defaults for structural tags 
   After Copy (1) made zonecontent overflow:hidden


*/
html {
  overflow: scroll; /* Avoid horizontal jumps between short and long pages */
} 

body, div, td, th {
  margin:0;
  padding:0;
  border:0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000000;
  background-color:#ddd;
}

#canvas { /* Position entire content in page  */
  width:780px;
  margin: 0 auto 20px auto;
}

p, ul, ol { /* trbl */
  margin:0 0 0.75em 0;
}

/* PART 1b:  major zoning - top, mid, and trail */

#zonetop {
  width:780px;
  clear:both;
  overflow:hidden; /* ...extends the div around enclosed floats: needed for IE6 (but not 7?) */ 
}
#zonemid  {
  width:768px;
  padding: 0 6px 0 6px;
  clear:both;
  overflow:hidden; /* ...extends the div around enclosed floats: needed for IE6 (but not 7?) */ 
}

#zonecontent  {
  overflow:hidden; /* ...extends the div around enclosed floats: needed for IE6 (but not 7?) */ 
}

#zonetrail  { /* This is INside #zonemid */
  width: 780px;
  color: #FFFFFF;
  background-color:#6699FF;
  clear:both;
  margin-top:8px;
}


/* PART 1c:  background colors for left menus */

div.ltm, div.ltrm, div.ltmr { /* IE6 broke when this was written using #zonemid.ltm etc */
  /* The image should probably be in the skin stylesheets */
  background-repeat:repeat-y;
  background-position:top left;
  background-image:url(/tests/gen6css/bg-ls.png)
}

/* PART 1d:  layout  of vertical zones: left, title, main, and right plus "content" wrapper */

#zonemain {
  /* No specific styles */
}

#zoneleft { 
  width: 200px;
  margin-right: 8px;
  float: left;
}

#zoneright {
  float:right;
  width: 177px;
  /* margin-left: 6px; -- breaks the layout of ltmr, and isn't needed */
}

#zoneleft, #zonemain, #zoneright {
  /*  margin-bottom:1.5em; IE requires a kludge for left and, in LTMR layout, main */
}

#zoneright > :first-child {
  margin-top:0;
}

#zonetop > :first-child {
  margin-top:0;
}

#zonemain > :first-child {
  margin-top:0;
}

/* PART 1e: Positioning specifics for major layout options */
#zonemid.ltm #zonecontent { /* zonecontent = monoblock holding title and main content  */
  float:right;
  width:572px;
}

#zonemid.ltmr #zonecontent { /* zonecontent = monoblock holding title, main content, and right menu */
  float:right;
  width:572px;
}

#zonemid.ltmr #zonecontent #zonemain {
  float:left;
  width:389px;
}

#zonemid.ltmr #zonemain, #zonemid.ltmr #zoneright {
  /* Compensate for margins not collapsing in LTMR layour 
  margin-bottom: 0.75em;*/
}

#zonemid.ltrm #zonecontent { /* zonecontent = monoblock holding title and main content */
  float:left;
  width:389px;
}

#zonemid.trm #zonecontent { /* zonecontent = monoblock holding title and main content */
  float:left;
  width:597px;
}

#zonemid.tmr #zonecontent {
  float:left;
  width: 597px;
}


/* PART 2a:  content specs specific to zonetop */


/* PART 2b:  content specs specific to zoneleft */


/* PART 2c:  content specs specific to zonetitle */
#zonetitle p.breadcrumbs{
  color:#6699FF; 
  font-size:0.85em;
}

#zonetitle h2{
  margin-top:0;
}

/* PART 2d:  content specs specific to zonemain */


/* PART 2e:  content specs specific to zoneright */


/* PART 2f:  content specs specific to zonetrail */

#zonetrail p {
  padding: 6px;
  margin: 0;
}

/* KISS, but:
   - Bullets should left-align with enclosing text
   - Spacing between, before, and after lists should make logical sense
*/

UL, OL {
  padding:0;
}

UL {
  margin-left:18px;
}

OL {
  margin-left:24px;
}

LI UL, LI OL {
  margin-bottom: 0;
}

LI {
  list-style-position:outside;
}

UL LI       {list-style-image:url(/s6/bullets/ul.png); list-style-type:square;}
UL UL LI    {list-style-image:url(/s6/bullets/ulul-00257e.gif); list-style-type:disc;  }
UL UL UL LI {list-style-image:url(/s6/bullets/ululul.png); list-style-type:circle;}

/* Use the image with the correct matting for display on backgrounds colored 00257e */
div.bg00257e UL LI       {list-style-image:url(/s6/bullets/ul-ffffff.png); list-style-type:square;}
div.bg00257e UL UL LI    {list-style-image:url(/s6/bullets/ulul-ffffff.png); list-style-type:disc;  }
div.bg00257e UL UL UL LI {list-style-image:url(/s6/bullets/ululul-ffffff.png); list-style-type:circle;}

/* Use the image with the correct matting for display on backgrounds colored 92b6fc */
div.bg92b6fc UL LI       {list-style-image:url(/s6/bullets/ul-ffffff.png); list-style-type:square;}
div.bg92b6fc UL UL LI    {list-style-image:url(/s6/bullets/ulul-ffffff.png); list-style-type:disc;  }
div.bg92b6fc UL UL UL LI {list-style-image:url(/s6/bullets/ululul-ffffff.png); list-style-type:circle;}



.prelist { /* Apply to a p (or other element) to remove the gap before a list */
  margin-bottom:0; padding-bottom:0;
}

/* cb is an abbreviation for column-block */
/* Version 31 kills the debugging colors */
div.cbwrap2, div.cbwrap3, div.cbwrap4, div.cbwrap5
{ 
  width:100%; 
	clear:both;
  overflow:hidden; /* Enclose all content */
  margin-bottom: 12px;
}
div.cbwrap2, div.cbwrap3, div.cbwrap4, div.cbwrap5
{ 
  border: #00257E; 
  border-style: solid; 
  border-width:0;  
  /* border-top-width:3px; */
}
div#zonehome div.cbwrap5
{ 
  border-width:0;  
  border-top-width:0; 
}

div.cbbg2 /* Test using one image as background and adjusting its position by negative positioning */
{ 
  background-repeat:repeat-y;
  background-position: -720px 0;
  background-image:url(/tests/gen6css/testbg001.gif)
}


div >div.cbwrap:first-child { /* Omit the top border on the first block */
  border-top-width:0; 
} 

div.cbleft   { float:left;  } /* Left-hand columns */
div.cbright  { float:right; } /* Right-hand column (must have exactly 1) */
div.cbradio  { float:right; } /* Right-hand column (must have exactly 1) */
div.cbcheck  { float:right; } /* Right-hand column (must have exactly 1) */

div.cbright >:first-child, div.cbleft >:first-child {
  margin-top: 0;
}
div.cbwrap2 >:first-child, div.cbwrap3 >:first-child, div.cbwrap4 >:first-child, div.cbwrap5 >:first-child  {
  margin-top: 0;
}

/* column widths depend on context and columns per wrapper */
div.tm div.cbwrap2 div.cb1 { width: 386px;}
div.tm div.cbwrap3 div.cb1 { width: 254px;}
div.tm div.cbwrap4 div.cb1 { width: 189px;}
div.tm div.cbwrap5 div.cb1 { width: 148px;}
div.tm div.cbwrap3 div.cb2 { width: 517px;}
div.tm div.cbwrap4 div.cb2 { width: 386px;}
/* div.tm div.cbwrap5 div.cb2 { width: 294px;} */
div.tm div.cbwrap4 div.cb3 { width: 583px;}
div.tm div.cbwrap5 div.cb3 { width: 464px;}
div.tm div.cbwrap5 div.cb4 { width: 622px;}

div.ltm div.cbwrap2 div.cb1 { width: 282px;}
div.ltm div.cbwrap3 div.cb1 { width: 186px;}
div.ltm div.cbwrap4 div.cb1 { width: 137px;}
div.ltm div.cbwrap5 div.cb1 { width: 108px;}
div.ltm div.cbwrap3 div.cb2 { width: 379px;}
div.ltm div.cbwrap4 div.cb2 { width: 282px;}
div.ltm div.cbwrap5 div.cb2 { width: 224px;}
div.ltm div.cbwrap4 div.cb3 { width: 427px;}
div.ltm div.cbwrap5 div.cb3 { width: 340px;}
div.ltm div.cbwrap5 div.cb4 { width: 456px;}

div.trm div.cbwrap2 div.cb1 { width: 295px;}
div.trm div.cbwrap3 div.cb1 { width: 193px;}
div.trm div.cbwrap4 div.cb1 { width: 144px;}
div.trm div.cbwrap5 div.cb1 { width: 113px;}
div.trm div.cbwrap3 div.cb2 { width: 395px;}
div.trm div.cbwrap4 div.cb2 { width: 295px;}
div.trm div.cbwrap5 div.cb2 { width: 234px;}
div.trm div.cbwrap4 div.cb3 { width: 446px;}
div.trm div.cbwrap5 div.cb3 { width: 355px;}
div.trm div.cbwrap5 div.cb4 { width: 476px;}

div.tmr div.cbwrap2 div.cb1 { width: 295px;}
div.tmr div.cbwrap3 div.cb1 { width: 193px;}
div.tmr div.cbwrap4 div.cb1 { width: 144px;}
div.tmr div.cbwrap5 div.cb1 { width: 113px;}
div.tmr div.cbwrap3 div.cb2 { width: 395px;}
div.tmr div.cbwrap4 div.cb2 { width: 295px;}
div.tmr div.cbwrap5 div.cb2 { width: 234px;}
div.tmr div.cbwrap4 div.cb3 { width: 446px;}
div.tmr div.cbwrap5 div.cb3 { width: 355px;}
div.tmr div.cbwrap5 div.cb4 { width: 476px;}

div.ltmr div.cbwrap2 div.cb1 { width: 191px;}
div.ltmr div.cbwrap3 div.cb1 { width: 125px;}
div.ltmr div.cbwrap4 div.cb1 { width:  92px;}
div.ltmr div.cbwrap5 div.cb1 { width:  73px;}
div.ltmr div.cbwrap3 div.cb2 { width: 257px;}
div.ltmr div.cbwrap4 div.cb2 { width: 191px;}
div.ltmr div.cbwrap5 div.cb2 { width: 152px;}
div.ltmr div.cbwrap4 div.cb3 { width: 290px;}
div.ltmr div.cbwrap5 div.cb3 { width: 231px;}
div.ltmr div.cbwrap5 div.cb4 { width: 310px;}

div.ltrm div.cbwrap2 div.cb1 { width: 191px;}
div.ltrm div.cbwrap3 div.cb1 { width: 125px;}
div.ltrm div.cbwrap4 div.cb1 { width:  92px;}
div.ltrm div.cbwrap5 div.cb1 { width:  73px;}
div.ltrm div.cbwrap3 div.cb2 { width: 257px;}
div.ltrm div.cbwrap4 div.cb2 { width: 191px;}
div.ltrm div.cbwrap5 div.cb2 { width: 152px;}
div.ltrm div.cbwrap4 div.cb3 { width: 290px;}
div.ltrm div.cbwrap5 div.cb3 { width: 231px;}
div.ltrm div.cbwrap5 div.cb4 { width: 310px;}

/* gutter widths depend on context and columns per wrapper */
div.tm div.cbwrap2 div.cbleft { margin-right: 8px; }
div.tm div.cbwrap3 div.cbleft { margin-right: 9px; }
div.tm div.cbwrap4 div.cbleft { margin-right: 8px; }
div.tm div.cbwrap5 div.cbleft { margin-right: 8px; }

div.ltm div.cbwrap2 div.cbleft { margin-right: 8px; }
div.ltm div.cbwrap3 div.cbleft { margin-right: 7px; }
div.ltm div.cbwrap4 div.cbleft { margin-right: 8px; }
div.ltm div.cbwrap5 div.cbleft { margin-right: 8px; }

div.trm div.cbwrap2 div.cbleft { margin-right: 7px; }
div.trm div.cbwrap3 div.cbleft { margin-right: 9px; }
div.trm div.cbwrap4 div.cbleft { margin-right: 7px; }
div.trm div.cbwrap5 div.cbleft { margin-right: 8px; }

div.tmr div.cbwrap2 div.cbleft { margin-right: 7px; }
div.tmr div.cbwrap3 div.cbleft { margin-right: 9px; }
div.tmr div.cbwrap4 div.cbleft { margin-right: 7px; }
div.tmr div.cbwrap5 div.cbleft { margin-right: 8px; }

div.ltmr div.cbwrap2 div.cbleft { margin-right: 7px; }
div.ltmr div.cbwrap3 div.cbleft { margin-right: 7px; }
div.ltmr div.cbwrap4 div.cbleft { margin-right: 7px; }
div.ltmr div.cbwrap5 div.cbleft { margin-right: 6px; }

div.ltrm div.cbwrap2 div.cbleft { margin-right: 7px; }
div.ltrm div.cbwrap3 div.cbleft { margin-right: 7px; }
div.ltrm div.cbwrap4 div.cbleft { margin-right: 7px; }
div.ltrm div.cbwrap5 div.cbleft { margin-right: 6px; }

/* Forms stylesheet based on abortive build8a site 
*/

p.emfo, span.emfo { /* Error messages for forms */
  color:#AA0000
}

div.cbinput  { /* Special case of cbright  */
  float:right; text-align:left;
} 

div.cbinput >:first-child {
  margin-top: 0;
}


div.mainform div.cbleft
{ 
  text-align:right;
}

div.mainform div.cbwrap5
{ 
  width:100%; 
	clear:both;
  overflow:hidden; /* Enclose all content */
  margin-bottom: 0;
}
div.mainform div.cbwrap5
{ 
  border: #DDDDDD; 
  border-style: solid; 
  border-width:0px;  
}
div.mainform div.cbheader{ 
  border: #DDDDDD; 
  border-style: solid; 
  border-width:1px 0 0 0;  
}



div.cbcheckboxcompact
{ 
  float: right; 
  width: 30px;
  text-align: right; 
}



ul.formblock li.dots { /* This background provides a visual link "..." between short labels and the form object that they describe */
  background-repeat:repeat-x;
	background-position:0px 6px;
	background-image:url(/s8/css/formlibg2.gif); 
}

/* Hides the "..." beneath form content text elements */
div.flichk 
{ 
	padding-left: 25px;
	background-color:transparent; /* NOTE IE7 doesn't match this correctly with the color of the png background "
	position: relative; top:2px; /* Improves the alignment with the right-floated form objects  */
}

/* form elements 
   Note that there seems to be NO way to work around IE's Windows-proprietary way of rendering select boxes */

[type=text], 
input.textinput, /*  IE kludge for previous line */
textarea, 
select
{ 
  border-style: solid;
	padding-left: 3px;
  border-color : #000088;
  border-width: 1px;
	width: 98%;
  margin-bottom: 3px; 
}
#fo100, #fo110, #fo120, #fo130, #fo140, 
#fo200, #fo210, #fo220, #fo230, #fo240, 
#fo310, #fo311, #fo312, #fo320, #fo330, #fo340, 
#fo9990 {
 width: 98%;
 border-style: solid;
 border-color : #000088;
 border-width: 1px;
 font-size: 12px;
} 
form#mainform textarea  {
	width: 100%;
}

select
{ 
	width: 225px;
}

input.datebox {
  width:45px; font-size:11px;  /* background-color:#AAFF55; for debugging */
}
input.smallbox {
  width:180px; font-size:11px;  /* background-color:#AAFF55; for debugging */
}
 
form#mainform input.textinput80  /* Special case: short text boxes */
{ 
  border-style: solid;
	padding-left: 3px;
	padding-right: 3px;
  border-color : #AAAAAA;
  border-width: 1px;
  font-size: 12px;  
	font-family: Arial, Helvetica, sans-serif; 
	width: 60px;
	text-align: right;
  margin-bottom: 3px; 
}

/* 
  Note: Internet Explorer does not support the "inherit" value for color 
  Workaround: use conditional comments to define specific values in a separate stylesheet
*/
a:link,
a:visited,
a:active {
 text-decoration:none;
 color:#0000FF;
}

a:hover, a.discreet:hover {
 color:#CC4400;
 text-decoration:underline;
}

/* Discreet links don't show */
a.discreet{ /* fix for IE */
 color: inherit; 
}

/* Special case 2. Links in colored text need to adjust */
h3 a:link,
h3 a:visited
{
  color:#6699FF;
}
h3 a:hover,
h3 a:active
{
  color:#FF0000;
}

/* automatically outline images that are inside a link */
/* This only looks good when the link is an isolated image
a img.hotlink:hover {
  outline-color:#CC4400;
  outline-width:1px;
  outline-style:solid;
}

/* ***** B. Special-purpose links ***** */

/* Generic "more>>" links */
.morestuff a:link,
.morestuff a:visited,
.morestuff a:hover,
.morestuff a:active {
  color: #FF4400; 
  font-weight:bold; 
}

/* RSS icon */
a.rsslink {
  float:right; 
	vertical-align:top; 
	margin-top: 2px;
	font-weight:bold; 
	font-size:11px;
	color: #6699FF;
}

/* Cool (blue) banner */
p.blueprbanner
{
	clear:both;
	background-color: #6699FF; color: #FFFFFF;
	font-size: 14px;  font-family: Arial, Helvetica, sans-serif; 
	padding-right: 4px; padding-left: 4px; padding-top: 2px; padding-bottom: 2px; 
	margin-right : 0px; margin-left:  0px; margin-top:  1em; margin-bottom:  1em; 
}

p.redlinkbanner,
p.bluelinkbanner
{
  /* width: 100%; */
	clear:both;
	font-size: 14px;  font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-variant:small-caps; /* text-align: right; */
	padding-right: 4px; padding-left: 4px; padding-top: 2px; padding-bottom: 2px; 
	margin-right : 0px; margin-left:  0px; margin-top:  1em; margin-bottom:  1em; 
}
p.bluelinkbanner  { background-color: #6699FF; color: #FFFFFF; }
p.redlinkbanner   { background-color: #FF0000; color: #FFFFFF; }
p.bluelinkbanner a:link,
p.bluelinkbanner a:visited,
p.bluelinkbanner a:hover,
p.bluelinkbanner a:active,
p.redlinkbanner a:link,
p.redlinkbanner a:visited,
p.redlinkbanner a:hover,
p.redlinkbanner a:active
{
  color:#FFFFFF; 
}

p.redlinkbanner a:link,
p.redlinkbanner a:visited,
p.redlinkbanner a:hover,
p.redlinkbanner a:active
{
  color:#FFFFFF; 
}

/* Special case 1. Current page in left menu is bold and grey and doesn't react to mouseovers */
div#lsmenu  A.currentpage:link    ,
div#lsmenu  A.currentpage:visited ,
div#lsmenu  A.currentpage:hover   ,
div#lsmenu  A.currentpage:active   
{
  color:#8888AA; font-weight:bold; text-decoration:none;
}



/* Special adjustments for light look
   Reminder:
   All blocks on white background
   Headers and main menu have background gradients from #D3DAEB grey to pale blue #92B6FC
   We need to distinguish about 3 or 4 "types" of display panel

*/

/* ***** Adjust main menu ***** */

div#zonemenu1.light {
  overflow:hidden; 
  width:780px; 
  height:28px;
  margin:15px 0 12px 0; 
  /* padding-top:6px; */
  background-image:url(/tests/gen6css/light/m1box.gif);
  background-repeat:no-repeat;
}

div#zonemenu1.light a:link {
  display:block;
  float:left;
  height: 21px; /* TBD: find a better way to define these currently heuristic values */
  padding: 6px 12px 0 12px;
  margin: auto 0 auto 0;
  font-weight:bold;
  color:#00257E;
  text-decoration:none;
}

div#zonemenu1.light a:hover,
div#zonemenu1.light a:focus
 {
  color:#CC4400;
  text-decoration:underline;
}

div#zonemain h2{
  overflow:hidden; 
  height:28px;
  margin:15px 0 15px 0; 
  padding:6px 6px 0;
  font-size:1.1em;
  font-weight: bold;
  background-image:url(/tests/gen6css/light/h2box.gif);
  background-repeat:no-repeat;
}

div.plainbox, div.quotebox, div.focusbox, div.nobox {
  margin-top: 1em;
  padding:5px;
  color:#00257E;
  border-color:#92B6FC;
  border-width:1px;
  border-style:solid;
}
div.quotebox {
  background-image:url(/tests/gen6css/nhs/quoteboxbg.gif);
  background-repeat:repeat-x;
  background-position:top left;
}
p.quote, p.attrib {
  font-style:italic;
  margin-bottom:0;
}
p.attrib {
  text-align:right;
}
div.focusbox, div.nobox  {
  padding:0;
  text-align: center;
}

div.nobox  {
  border-width:0;
  border-style:none;
}

div.plainbox  {
  background-color:#D3DAEB;
}

div.plainbox h3,
div.focusbox h3  {
  margin: 0 0 2px 0; 
  color:#00257E;
  font-size: 1em;
  font-weight:bold;
}
div.focusbox h3  {
  padding:4px;
  background-color:#D3DAEB;
}

div.plainbox ul {
  margin-bottom:4px; 
}

p.newsitem, p.event {
  /* Separate new items and events by a pale blue line */
  border-color:#92B6FC;
  border-style:solid;
  border-width: 1px 0 0 0;
  padding:4px 0 0 0;
}
h2 + p.newsitem, h2 + p.event {
  /* No top border on first item in list */
  border-width: 0;
}


div#zonetrail {
  background-color:transparent;
  color:#92B6FC;
  border-color:#92B6FC;
  border-style:solid;
  border-width: 1px 0 0 0;
}