@charset "iso-8859-1";

/*
 * kangguru.css - style sheet for kangguru.org
 *
 * todo:
 *
 * review 'bold' issue
 * skins need more colour adjustments
 * need table/div border tools
 *
 */

/*
 * anchor settings for content region;
 * underline on hover/focus only
 *
 */

table#tblContent a:link,
table#tblContent a:visited
{
 text-decoration: none;
}
table#tblContent a:hover,
table#tblContent a:focus,
table#tblContent a:active
{
 text-decoration: underline;
}
table#tblContent a:link
{
 color: #00c;
}
table#tblContent a:visited
{
 color: Purple;
}
table#tblContent a:hover
{
 color: #00f;
}
table#tblContent a:focus,
table#tblContent a:active
{
 color: Red;
}
/* needs a bit more work...
 * a LOT more
 * this was for links that have all link-text in a cite-element;
 * i.e. to get the ul because cite tweaks colour to non-link look
 * in on-hover look blocks this looks funny... see kgccbali.htm et al
 *(fixed locally for now)
 */
table#tblContent a cite
{
 text-decoration: underline;
}

/*
 * anchor settings for breadcrumbs;
 * underline on hover/focus only
 *
 * duplicates of content region settings above; mebbe make common
 */

div#divBreadcrumbs a:link,
div#divBreadcrumbs a:visited
{
 text-decoration: none;
}
div#divBreadcrumbs a:hover,
div#divBreadcrumbs a:focus,
div#divBreadcrumbs a:active
{
 text-decoration: underline;
}
div#divBreadcrumbs a:link
{
 color: #00c;
}
div#divBreadcrumbs a:visited
{
 color: Purple;
}
div#divBreadcrumbs a:hover
{
 color: #00f;
}
div#divBreadcrumbs a:focus,
div#divBreadcrumbs a:active
{
 color: Red;
}


body
{
 margin: 0;
 padding: 0;
}
body#bodyMain
{
 color: #111;          /* a rather dark gray */
 background-color: #dedede;
}
p, td, ol, ul, div
{
 font-size: 10.5pt;    /* aka 14px */
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-weight: bold;    /* very wide impact! (too wide; will need toning-down) */
}
div#divBreadcrumbs p
{
 font-weight: normal;  /* not bold here, but p-element is nice */
}
/*
 * code-base is extensively polluted with b-elements && strong-elements
 * and many numbered styles include bold...
 *
 * rules along the lines of the following could suppress'em;
 * subsequent style-sheet rules could still work...

p b, td b, ol b, ul b, div b,
p strong, td strong, ol strong, ul strong, div strong
{
 font-weight: normal !important;
}
 */

/*
 * table just inside body-element
 * ensures consistent width of all content
 *
 */
table#tblMainWnd
{
 width: 100%;
}
table#tblMainWnd td#tdMainWnd
{ /* stub */
}

/*
 * standard styles for 'KangGURU' logotype
 *(spanLogotypeLg for generic other-logotype to match)
 * need h1-element flavour...
 */
span.spanKang,
span.spanGURU,
span.spanLogotypeLg
{
 font-size: 24pt;      /* this is rather too much for spanLogotypeLg sometimes... */
}
span.spanLogotype
{
 font-size: 18pt;      /* so we have another; spanLogotype */
}
span.spanKang
{
 color: #800;
 font-style: italic;
 font-family: "Times New Roman", Times, serif; /* what's the standard serif font on Mac? */
}
span.spanGURU
{
/* padding-left: .25em; better done with an inline nbsp */
 color: #888;
 font-style: normal;
 font-family: Arial, Helvetica, sans-serif;
}
span.spanLogotypeLg,
span.spanLogotype
{
 font-style: italic;
}

/*
 * variant of above for embedded 'KangGURU' logotype
 * typically in a p-element but not required
 *
 * awkward names; todo...
 *
 */
span.pSpanKang,
span.pSpanGURU
{ /* stub */
}
span.pSpanKang
{
 color: #800;
 font-style: italic;
 font-family: "Times New Roman", Times, serif; /* what's the standard serif font on Mac? */
 font-size: 125%; /* tweak because Times is small */
}
span.pSpanGURU
{
/* padding-left: .25em; better done with an inline nbsp */
 color: #888;
 font-style: normal;
 font-family: Arial, Helvetica, sans-serif;   /* prefer narrow */
}

h1
{
 font-size: 16pt;
 line-height: 1.4em;
 margin: .75em 0 .5em 0;
 font-weight: bold;
 color: #a33;
}

h2,
p.pHeavy,
p.pLead,
ol.lHeavy,
ul.lHeavy,
div.divHeavy p,
div.divLead p
{
 font-size: 13pt;
 line-height: 1.3em;
}
p.pHeavy,
p.pLead,
div.divHeavy p,
div.divLead p
{
 font-weight: bold !important;
}
h2
{
 margin: 1em 0 .4em 0;
 font-weight: bold;
 color: #900;
}

h3
{
 font-size: 12pt;
 line-height: 1.2em;
 font-weight: bold;
 color: #711;    /* a rather dark gray */
 margin: .4em 0 .5em 0;
}

h1.em, h2.em, h3.em, h4.em, h5.em, h6.em,
p.em
{
 font-style: italic;
}
h1.hHeavy, h2.hHeavy, h3.hHeavy, h4.hHeavy, h5.hHeavy, h6.hHeavy
{
 font-size: 200%;
}
/* h1Punched? */
h1.hPunched
{
 color: #d33;
}
h2.hPunched
{
 color: #d00;
}
h3.hPunched
{
 color: #d11;
}
ul.lPunched,
ol.lPunched
{
 color: #900;
}
a.aNakal
{
 display: none;
}
p
{
 margin: .5em 0 .6em 0;
/* only set 'line-height' via kangguru2.css because it's messing-up multi-line pseudo-headers formatted with span-elements
 line-height: 1.3em;
 */
/* only invoke 'justify' via kangguru2.css in pages that have been checked for centering issues
 text-align: justify;
 */
/*
 * IE clipping italic fix also only invoked from kangguru2.css
 */
}
table.tblPmarg
{ /* for tables that want to spoon w/paragraphs - tblBasic */
/*
 margin-top: .4em !important;
 margin-bottom: .5em !important;
 they're adding, mebbe less... (still not quite right)
 margin-top: .2em !important; */
 margin-bottom: .25em !important;
 margin-top: 0 !important;
}
p.pKGREnote
{
 color: #933;          /* was #900 */
 font-style: italic;
 font-weight: normal;
 font-size: 12pt;
}
p.pGap
{
 margin-top: .8em;     /* twice normal margins */
 margin-bottom: 1em;
}
p.pDouble
{
 line-height: 1.5em;
}
p.pIndent1st
{
 text-indent: 1em; /* 1st line */
}

/* for the the 1st paragraph - kin to pPunched
 * this may vary by 'section' of the site; radio, travel - something like that
 * implies a set of 'section' style sheets...
 */
p.pLead
{
 color: #933 !important;     /* 'important' to override p.center colouring behavior; problematic? */
}
/* was: #000080 - now brighter, but not as blue as links... */
p.pPunched
{
 color: #55c !important;     /* 'important' to override p.center colouring behavior; problematic? */
}
p.pMaroon,
span.spanMaroon,
.maroon
{
 color: #900;    /* by popular demand */
}
.underthang
{
 color: #a00;
 text-decoration: none;
 padding-bottom: 3px;
 border-bottom: 2px solid #c00;
}
p.pSmaller
{
/* out for now, but should come back...
 font-size: smaller;
 */
 font-size: 9.75pt;
}
p.pLarger
{
 font-size: larger;
}
span.spanPunched
{
 color: #800;    /* inconsistant w/pPunched per prior art; review later... */
}
span.spanLarger
{
 font-size: larger;
}
hr
{
 margin-top: .5em;
 margin-bottom: .5em;
 padding-top: 0;
 padding-bottom: 0;
 height: 1px !important;
 color: #666;
}

/*
 * list rules
 */
ul,
ol
{
 text-align: left;     /* overridden in kangguru2.css w/justify - this just transitional */
}

ul
{
 line-height: 1.3em;
 list-style-type: disc;
 list-style-image: none;
 margin: .5em 0 0 1.5em;     /* t r b l */
 padding: 0;
}
ol
{
 line-height: 1.3em;
 list-style-type: decimal;
 margin: .5em 0 0 2.2em;     /* t r b l */
 padding: 0;
}
ul.em,
ol.em
{
 font-style: italic;
}
li
{
 margin-bottom: .3em;
}

dl
{
 margin-top: .5em;
 margin-bottom: .5em;
}
dt
{
 font-weight: bold;
 margin-bottom: .1em;
}
dd
{
 line-height: 1.3em;
 margin-left: 1.5em;
 margin-bottom: .1em;
}
dl.dlGap dt
{
 margin-top: .75em;     /* extra margins on dt element */
 margin-bottom: .2em;
}

.Groove
{
 padding: 0;
 border-width: 1px 2px 2px 1px;    /* t r b l */
 border-top-style: solid;
 border-left-style: solid;
 border-bottom-style: groove;
 border-right-style: groove;
 border-color: #999;
}

/* emulate center */
/* centered is a non-cascading version */
.center,
.centered
{
/* width: 100%;     100% can cause grief! - so out; what havoc hath this wroth? */
 text-align: center;
}
/* nb: heavy impact */
*.center *
{
 margin-left: auto;
 margin-right: auto;
}
/* will need overrides in skins! */
.center p,
p.center
{
	/* text-align: center !important; above margins should do it... */
 color: #000;     /* auto-color centered paragraphs - being bold! */
/* nb: p.pPunched's coloring is 'important' to beat this out... */
}
.centre          /* lite-impact version */
{
 text-align: center;
}
   table.centre  /* a temporary 'punt' for the now-removed width: 100% on many tables */
   {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
   }
   div.centre    /* goes with above; name is silly */
   {
    margin-left:  3px !important;    /* match p-element trick */
    margin-right: 3px !important;    /* has to be on another element than the table */
   } /* only a test in kgretravel2007sumbawa.htm */

p.pJustify
{
 text-align: justify !important;
}
p.pLeft,
ol.center,
ul.center,
li.center
{ /* for lists, thwart dumb look */
 text-align: left !important;
}
p.pRight
{
 text-align: right !important;
}

.small-caps { font-variant: small-caps; }
.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.smaller    { font-size: smaller !important; }
.larger     { font-size: larger !important; }

/* before you know it, someone will lose an eye... */
.blinking
{
 text-decoration: blink; /* only works in Firefox; be careful out there */
}

.ClearBoth  { clear: both;  }
.ClearLeft  { clear: left;  }
.ClearRight { clear: right; }
.ClearNone  { clear: none;  }

.serif,
h2.hNeighbours
{
 font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
}
h2.hNeighbours
{
 font-style: italic;
 font-size: 200%;
 text-align: center;
}
/*
 * new page header scheme
 */

table#tblTopHeader
{
 background-image: url(images/bckmaroon.gif);
 background-color: #933;
 width: 100%;
 margin: 0;
 border: 0;
 padding: 0;
}
table#tblTopHeader td#tdTopHeaderLeft
{
 width: 25%;
}
table#tblTopHeader td#tdTopHeaderRight
{
 width: 75%;
}

/* no border on animated 'roos and home-button img that link to home page */
table#tblTopHeader td#tdTopHeaderLeft img
{
 border: 0;
 vertical-align: middle;
}
/*
 * table embedded in top heading is implicitly a block of navigation links
 *(unnamed - may robust-up; inside tdTopHeaderRight...)
 */
table#tblTopHeader table
{
 width: 100%;
/*
 margin: 1px;    swats pesky hscrollbar in Firefox when focus rect touches right-edge of viewport
 this forced hscrollbar on all pages in Safari! new fix in table#tbl2ndTierHeader
 */
 margin: 0;
 border: 0;
 padding: 0;
}

table#tblTopHeader td
{
 padding: 1px;/* swats pesky hscrollbar in Firefox when focus rect touches right-edge of viewport
 this forced hscrollbar on all pages in Safari! new fix in table#tbl2ndTierHeader
 */
}
table#tblTopHeader td td
{
 padding: 0px !important;    /* above hack should *not* cascade */
}
table#tblTopHeader table td,
a.aAIP
{
 font-size: 9pt;
 font-weight: bold;
 color: #e7e6e6;
 font-family: Arial, Helvetica, sans-serif;    /* want narrower */
 text-align: center;
}
   .hmbut
   {
    font-size: 14pt;
    font-weight: bold;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;    /* want narrower */
    text-align: center;
    text-decoration: none;
   }
/* colgroup scheme for widths; overrides auto-layout algorithm
 * todo: robust version of selector!
 */
col.tdNavCol1 {  width: 13.33%; }
col.tdNavCol2 {  width: 18.67%; }
col.tdNavCol3 {  width: 21.33%; }
col.tdNavCol4 {  width: 25.34%; }
col.tdNavCol5 {  width: 21.33%; }

table#tblTopHeader table a,
a.aAIP
{
 display: block;       /* display, height, padding expand anchor to fill table cell */
 height: 100%;         /* makes link an easier target */
 padding: 5px;         /*(use cellpadding="0" cellspacing="0")*/
 text-decoration: none;
}
table#tblTopHeader table a:link,
table#tblTopHeader table a:active,
a.aAIP:link,
a.aAIP:active
{
 color: #ccc;
 text-decoration: none;
}
table#tblTopHeader table a:visited,
a.aAIP:visited
{
 color: #0ff;
 font-style: italic; /* I found this rather disconcerting */
 text-decoration: none;
}
table#tblTopHeader table a:hover,
table#tblTopHeader table a:focus,
a.aAIP:hover,
a.aAIP:focus
{
 color: #ff0;
 text-decoration: none;
}

/*
 * very basic structural rules for other regions of pages; expand later
 */

/* 2nd Tier Header w/ search and logo in it; breadcrumbs, too */

table#tbl2ndTierHeader
{
 width: 100%;
 margin: 0;
 border: 0;
/* padding: 8px 4px 8px 8px; nixed, not in table, in td-element */
/* padding-right rqrd to swat pesky hscrollbar in Firefox when focus rect touches right-edge of viewport */
}
table#tbl2ndTierHeader td#td2ndTierHeaderLeft
{
 padding: 8px 0 8px 8px;     /* t r b l */
 text-align: left;
 vertical-align: middle;
}
table#tbl2ndTierHeader td#td2ndTierHeaderRight
{
 padding: 8px 4px 8px 0;     /* t r b l */
 /* padding-right rqrd to swat pesky hscrollbar in Firefox when focus rect touches right-edge of viewport */
 text-align: right;
/*
 vertical-align: skipped; fills height
*/
}
/* no border on animated logo that links to home page */
table#tbl2ndTierHeader a img
{
 border: 0;
}

   /* old top nav-links scheme; should be phased-out */
   /* selectors made td-element specific; was ".nav whatever" */

   td.nav
   {
    font-size: 12px;
    font-weight: bold;
    color: #e7e6e6;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
   }
   td.nav a
   {
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
   }
   td.nav a:link
   {
    color: #ccc;
   }
   td.nav a:visited
   {
    color: #0ff;
    font-style: italic;
   }
   td.nav a:hover
   {
    color: #ff0;
   }
   .navgreen     /* doesn't appear to be used (in the files I downloaded) - daven */
   {
    font-size: 12px;
    font-weight: bold;
    color: #6c6;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
   }

/*
 * new 'breadcrumb' scheme - adds padding
 *(breadcrumbs a likely casualty of a new approach to site navagation)
 */
div#divBreadcrumbs
{
/* minor issue w/coloured "Kang GURU" use in breadcrumbs - todo */
/* height: 32px;    empirical */
 vertical-align: bottom;
/* font-size: 8pt; or bold...*/
 font-weight: normal !important;
 padding: 1em 0 0 1em;
}

   /* this seems to just be used for the 'breadcrumbs' (now in) in table#tbl2ndTierHeader
    * deprecated - selector made span-element specific; was ".br"
    */
   span.br
   {
    font-size: 8pt;
    font-weight: normal !important;
   }

/*
 * new scheme for footer links and banners
 */

table#tblFooterLinks
{
 width: 100%;
 margin: 0;
 border: 0;
 padding: 0;
}
table#tblFooterLinks td
{
 padding: 1em;
 color: #933;
 font-size: 12px;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;    /* want narrower */
 line-height: 1.5em;
 text-align: center;
}
table#tblFooterLinks a
{
 text-decoration: none;
}
table#tblFooterLinks a:link
{
 color: #933;
}
table#tblFooterLinks a:visited,
table#tblFooterLinks a:active
{
 color: #080b7b;
}
table#tblFooterLinks a:hover,
table#tblFooterLinks a:focus
{
 color: #b55;
}

table#tblFooterBanners
{
 width: 100%;
 margin: 0;
 border: 0;
 border-top: 1px solid Black;
/*
 border-bottom: 1px solid Black;
 */
 padding: 0;
 background-color: White;
}
table#tblFooterBanners img
{
 border: 0;      /* no borders on footer images */
}
table#tblFooterBanners td#tdFooterBannerLeft
{
 text-align: left;
}
table#tblFooterBanners td#tdFooterBannerCenter
{
 text-align: center;
}
table#tblFooterBanners td#tdFooterBannerRight
{
 text-align: right;
}

   /* old scheme for footer links */

   p.footer
   {
    color: #933;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
   }
   p.footer a
   {
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3em;
    text-align: center;
    text-decoration: none;
   }
   p.footer a:link
   {
    color: #933;
   }
   p.footer a:visited
   {
    color: #080b7b;
   }
   p.footer a:hover
   {
    color: #933;
   }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * primary page content region
 *
 */

table#tblContent
{
 width: 100%;
 margin: 0;
 border: 0;
 padding: 0;
}
table#tblContent td#tdContent
{
/* not w/padding
 width: 100%;
 */
 margin: 0;
 border: 0;
 padding: 0 24px 0 24px;     /* t r b l (was 2em, chgd to px) */
}

/* automagic borders on images in content region;
 * override locally where inappropriate
 *
 * DISABLED - this moved to kangguru2.css

table#tblContent img
{
 border-width: 1px 2px 2px 1px;
 border-top-style: solid;
 border-left-style: solid;
 border-bottom-style: groove;
 border-right-style: groove;
 border-color: #666;
}
 */
/* override class */
table#tblContent img.i0,
table.i0,
div.i0
{
 border: 0 !important;
}
/* override classes; table && div have non-hungarian names... */
table#tblContent img.i1,
table.i1,
div.i1
{
 border: 1px solid #666 !important;
}

/*
 * special rules for quotations
 * (cite-element, not q-element, because q poorly supported)
 *
 * SHOULD ADD li-cite TO SKINS...
 *
 * RAD MOVE; ADDED *ALL* cite USAGE...
 */

table#tblContent p.pPunched cite,
table#tblContent div.divCite p.pPunched cite
{
 color: #46f;    /* extra-punch */
}
table#tblContent p.pLead cite,
table#tblContent p.pKGREnote cite
{
 color: #b00;
}
table#tblContent table.indent
{
 margin-left: 1em !important;      /* should move south! */
 margin-right: 1em;    /* may not really want right... */
}
table#tblContent table.noindent
{
 margin-left: 0;
 margin-right: 0;
}

table#tblContent cite,
table#tblContent p cite,
table#tblContent p.pCite,
table#tblContent li cite,
table#tblContent div.divCite,
table#tblContent div.divCite table
{
/* this automatically pulls cites out-of-line
 display: block;
 padding-left: 1em;
 padding-right: 1em;
 padding-bottom: .5em;
 */
 color: #933;
 font-style: italic;
}
table#tblContent p.pIndent,
table#tblContent p.pCite,
table#tblContent div.divCite
{
 padding-left: 1em;
 padding-right: 1em;
}
table#tblContent p.pCite,
table#tblContent div.divCite
{
/* think I don't like this, at least not for p-elements...
 padding-bottom: .5em;
 */
}
/* for larger pieces...
table#tblContent p.pCite.noindent,
table#tblContent div.divCite.noindent - invalid but 'works'
table#tblContent div[class~=divCite][class~=noindent],
table#tblContent div[class~=divCite][class~=noindent] - IE6 dumb */
table#tblContent p.noindent,
table#tblContent div.noindent
{
 padding-left: 0 !important;
 padding-right: 0 !important;
/*
 * nb: kangguru2.css overrides this w/3px!!!
 */
}
/* nested 'cite cite' spitting warnings, so added 'cite em' - retrofited idioms... and any others?
 * and pulled'em out:
 table#tblContent p cite cite,
 table#tblContent li cite cite,
 */
table#tblContent p.center cite,
table#tblContent p cite em,
table#tblContent li cite em,
table#tblContent p.pCite cite,
table#tblContent div.divCite cite,
table#tblContent table.tblDialogue td cite
{
 color: #b00;
}
/* unbundled from above to omit a few cases from selector
table#tblContent p.center cite, any others ought go? */
table#tblContent p cite em,
table#tblContent li cite em,
table#tblContent p.pCite cite,
table#tblContent div.divCite cite,
table#tblContent table.tblDialogue td cite
{
 border-bottom: 1px dotted #00d;
}
/* override to get hover color back; need to look for impact on skins... */
table#tblContent p.center a:link cite
{
 color: #00c;
}
table#tblContent p.center a:visited cite
{
 color: Purple;
}
table#tblContent p.center a:hover cite
{
 color: #00f;
}
table#tblContent p.center a:focus cite,
table#tblContent p.center a:active cite
{
 color: Red;
}
/* New, Aug '08 */
table#tblContent p.center strong,
table#tblContent p cite strong,
table#tblContent li cite strong,
table#tblContent p.pCite strong,
table#tblContent div.divCite strong,
table#tblContent table.tblDialogue td strong
{
 font-size: larger;
}

/*
 * typically fills the content area but could be a post-it note sort of thing...
 */
table.tblYellowJournalism,
table.tblMuckrakingJournalism
{
 margin-top: 1em;
 margin-bottom: .5em;
/* padding: 1em; moved padding to td-element */
 background-color: #ffc;
/* border-width: 1px 2px 2px 1px;     t r b l */
/* matches skins better wo/groove...
 border-top-style: solid;
 border-left-style: solid;
 only looks good on very light backgrounds
 border-bottom-style: groove;
 border-right-style: groove;
 */
 border-width: 1px;
 border-style: solid;
 border-color: #999;
}
/*
 * variant of above - just tweak the colour
 */
table.tblMuckrakingJournalism
{
 background-color: #d4d0c8;
}
/*
 * padding in td-element works better for IE
 */
table.tblYellowJournalism     td,
table.tblMuckrakingJournalism td
{
 padding: 1em 1em 2em 1em;
 vertical-align: top;
}
/*
 * don't cascade into deeper tables' td-elements
 * nb: this has high 'specificity' re cascade and is requiring the addition of !important to other padding rules
 *(add more levels if needed)
 */
table.tblYellowJournalism     td td,
table.tblYellowJournalism     td td td,
table.tblMuckrakingJournalism td td,
table.tblMuckrakingJournalism td td td
{
 padding: 0;
}
/*
 * this is an extension to tbl2up - used on AusAID pages...
 * an example of rendering problems in IE7:
 * - right edge flush to edge of tblYellowJournalism
 *(may stick a bit beyond right and be being clipped...)
 *
 */
table.tblHeaderBlock
{
/* padding: 1em; moved padding to td-element */
 background-color: #ccf;
 border-width: 1px 2px 2px 1px;    /* t r b l */
 border-top-style: solid;
 border-left-style: solid;
/* only looks good on very light backgrounds */
 border-bottom-style: groove;
 border-right-style: groove;
 border-color: #999;
}
/*
 * padding in td-element works better for IE
 * south of the Journalism rules because we're nested in them; nb: !important
 */
table.tblHeaderBlock td
{
 padding: 1em 1em !important;
}
/*
 * don't cascade into deeper tables' td-elements
 * nb: this has high 'specificity' re cascade and is requiring the addition of !important to other padding rules
 *(add more levels if needed)
 */
table.tblHeaderBlock td td,
table.tblHeaderBlock td td td
{
 padding: 0;
}

/*
 * block wrapped around headings on interview.htm page
 * anything like it used elsewhere? (name should be tweaked)
 */
table.tblBlockHead
{
 margin-top: 1em;
 margin-bottom: .5em;
 border: 1px solid Black;
 padding: 0px;               /* move this to td-element? */
 background-color: #800;
}
table.tblBlockHead td
{
 padding: 4px 8px;           /* moved this to td-element */
}
table.tblBlockHead h2,
table.tblBlockHead p
{
 color: #ff0;
}
table.tblBlockHead h2
{
 font-size: 18pt;
 margin: 0;
}
table.tblBlockHead p
{
 margin-bottom: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * layout table styles
 *
 */

/*
 * new util to request basic padding
 */
table.tblPadMe td
{
 padding: 4px;
}
/*
 * most basic layout class
 */
table.tblLayout
{ /* see below; anything for here? */
}

table.tblLayout td
{
 text-align: center;   /* auto-center; too aggressive? p-elements will justify */

/*
 * ya, too aggressive!
 * lists center which looks dumb (fixed, but this may still need to go... )
 */
}

/*
 * two-up layout tables; text on one side, images on the other..
 *(names refer to intended structure)
 * would work for three or more up if text cells together and image on a side; nb: crowding!
 */

table.tblLayout,
table.tblTextImg,
table.tblImgText,
table.tbl2up,
table.tbl3up
{
/*
 *
 width: 100%; - this had to go!
 *
 * causing expansion/clipping of contents of table into what should be parent's padding
 * a problem in IE7... other instances of this sort of 100%...
 * the l/r margins @ zero are not enough to expand table to full-width
 * absent content 'pushing' from the inside; !important!
 *
 * this removal is impacting the look of a few tables
 * - mostly 'gallery' type tables of images; will need to remedy some other way...
 *
 * need to restore 100% but need a fix first; many width="100%" in html!
 */

 margin-top: .4em;
 margin-bottom: .5em;
/* changing to 'auto' - tbd - as remedy for above removal...
 * - only a partial fix - still need to wrap table w/<div class="centre">...</div>
 margin-left: 0;
 margin-right: 0;
 */
 margin-left: auto;
 margin-right: auto;
 padding: 0;
}

/* img on right... */
table.tblTextImg img
{
 margin-left: 2em;     /* ...so margin on left */
/* mal-behaving when image on wrong side; typically centered under text */
 margin-right: 3px;    /* match p-element trick in case no iMarg */
}
/* img on left... */
table.tblImgText img
{
 margin-right: 2em;    /* ...so margin on right */
/* mal-behaving when image on wrong side; typically centered under text */
 margin-left: 3px;     /* match p-element trick in case no iMarg */
}
table.tblTextImg td,
table.tblImgText td
{
/* vertical-align: top;      no, middle clearer */
}
table.tblLayout img,
table.tblTextImg img,
table.tblImgText img
{
/*
 * this is mostly to keep skin-borders at bay and to space multiple images
 * - but it is also shoving captions south...
 */
 margin-top: .5em; /* was 1em; removed for skins-sake */
 margin-bottom: .5em;
 /* nb: can't be 'padding' - border expands */
}
table.tblLayout a img,
table.tblTextImg a img,
table.tblImgText a img
{
/*
 * override above when in an anchor
 margin-top: 0;
 */
 margin-bottom: 0;
}
table.tblTextImg img.iMarg,
table.tblImgText img.iMarg
{
 margin-left: 2em;     /* expands cell and centers image */
 margin-right: 2em;    /*(these reduced from 4em mostly because of IE6 not understanding override rules)*/
 /* nb: can't be 'padding' - border expands */
}
table.tblTextImg img.iMarg0,
table.tblImgText img.iMarg0
{
 margin-left: 0;        /* hack for now to 'fix' image centering; see above a few... */
 margin-right: 0;
}

table.tblLayout  td.tdLeft,
table.tblTextImg td.tdLeft,
table.tblImgText td.tdLeft
{
 padding-right: 1em;    /* padding on right */
 vertical-align: top;
}
table.tblLayout  td.tdRight,
table.tblTextImg td.tdRight,
table.tblImgText td.tdRight
{
 padding-left: 1em;     /* padding on left */
 vertical-align: top;
}
/* New, Aug '08 */
table.tblLayout  td.tdMiddle,
table.tblTextImg td.tdMiddle,
table.tblImgText td.tdMiddle
{
 vertical-align: middle;
}

/* no padding for TextImg/ImgText; just the image margins done above */
table.tblLayout  td.tdLeftHalf,
table.tblTextImg td.tdLeftHalf,
table.tblImgText td.tdLeftHalf
{
 width: 50%;
}
table.tblLayout  td.tdRightHalf,
table.tblTextImg td.tdRightHalf,
table.tblImgText td.tdRightHalf
{
 width: 50%;
}
table.tblLayout  td.tdLeftThird,
table.tblTextImg td.tdLeftThird,
table.tblImgText td.tdLeftThird
{
 width: 33.33%;
}
table.tblLayout  td.tdRightTwoThirds,
table.tblTextImg td.tdRightTwoThirds,
table.tblImgText td.tdRightTwoThirds
{
 width: 66.67%;
}
table.tblLayout  td.tdLeftTwoThirds,
table.tblTextImg td.tdLeftTwoThirds,
table.tblImgText td.tdLeftTwoThirds
{
 width: 66.67%;
}
table.tblLayout  td.tdRightThird,
table.tblTextImg td.tdRightThird,
table.tblImgText td.tdRightThird
{
 width: 33.33%;
}
table.tblLayout  td.tdMiddleThird,
table.tblTextImg td.tdMiddleThird,
table.tblImgText td.tdMiddleThird
{
 width: 33.33%;
}
/* New, Aug '08 */
table.tblLayout  td.tdCenter
{
 padding-left: 1em;
 padding-right: 1em;
}

/*
 * general purpose two-column && 3-column layout: tbl2up & tbl3up
 *
 * note shared implementation w/tblLayout, above...
 *
 */
/* may combine more w/others above... */

table.tbl2up th,
table.tbl3up th
{
 font-size: 150%;
 line-height: 200%;
}
table.tbl2up td
{
/* width: 50%;      this is cascading into deeper tables */
}
table.tbl3up td
{
/* width: 33.33%;   this is cascading into deeper tables - this should go, too!*/
}
table.tbl2up th,
table.tbl2up td,
table.tbl3up th,
table.tbl3up td
{
 vertical-align: top;
}
/* New, Aug '08 */
table.tbl2up th.thMiddle,
table.tbl2up td.tdMiddle,
table.tbl3up th.thMiddle,
table.tbl3up td.tdMiddle
{
 vertical-align: middle;
}

table.tblLayout th.thLeftHalf,
table.tblLayout td.tdLeftHalf,
table.tbl2up    th.thLeftHalf,
table.tbl2up    td.tdLeftHalf
{
 width: 50%;
 padding-right: 1em;
}
table.tbl2up    th.thLeft,
table.tbl2up    td.tdLeft,
table.tbl3up    th.thLeft,
table.tbl3up    td.tdLeft
{
 padding-right: 1em;
}
table.tblLayout th.thRightHalf,
table.tblLayout td.tdRightHalf,
table.tbl2up    th.thRightHalf,
table.tbl2up    td.tdRightHalf
{
 width: 50%;
 padding-left: 1em;
}
table.tbl2up    th.thRight,
table.tbl2up    td.tdRight,
table.tbl3up    th.thRight,
table.tbl3up    td.tdRight
{
 padding-left: 1em;
}
table.tbl3up    th.thCenter,
table.tbl3up    td.tdCenter
{
 padding-left: 1em;
 padding-right: 1em;
}
table.tblLayout th.thLeftThird,
table.tblLayout td.tdLeftThird,
table.tbl2up    th.thLeftThird,
table.tbl2up    td.tdLeftThird,
table.tbl3up    th.thLeftThird,
table.tbl3up    td.tdLeftThird
{
 width: 33.33%;
 padding-right: 1em;
}
table.tblLayout th.thRightTwoThirds,
table.tblLayout td.tdRightTwoThirds,
table.tbl2up    th.thRightTwoThirds,
table.tbl2up    td.tdRightTwoThirds,
table.tbl3up    th.thRightTwoThirds,
table.tbl3up    td.tdRightTwoThirds
{ /* for 3-up assumes a colspan="2" */
 width: 66.67%;
 padding-left: 1em;
}
table.tblLayout th.thLeftTwoThirds,
table.tblLayout td.tdLeftTwoThirds,
table.tbl2up    th.thLeftTwoThirds,
table.tbl2up    td.tdLeftTwoThirds,
table.tbl3up    th.thLeftTwoThirds,
table.tbl3up    td.tdLeftTwoThirds
{ /* for 3-up assumes a colspan="2" */
 width: 66.67%;
 padding-right: 1em;
}
table.tblLayout th.thRightThird,
table.tblLayout td.tdRightThird,
table.tbl2up    th.thRightThird,
table.tbl2up    td.tdRightThird,
table.tbl3up    th.thRightThird,
table.tbl3up    td.tdRightThird
{
 width: 33.33%;
 padding-left: 1em;
}
table.tbl3up    th.thCenterThird,
table.tbl3up    td.tdCenterThird
{
 width: 33.34%;  /* nb: rounded-up */
 padding-left: 1em;
 padding-right: 1em;
}

table.tbl2up td img,
table.tbl3up td img
{
 margin-top: 1em;
 margin-bottom: 1em;
}
table.tbl2up td a img,
table.tbl3up td a img
{
/*
 * override above when in an anchor
 margin-top: 0;
 */
 margin-bottom: 0;
}

/* add the 'half' and 'third' versions to these selectors? */
table.tbl2up td.tdLeft img,
table.tbl3up td.tdLeft img
{
 margin-left: 3px;     /* match p-element trick... */
}
table.tbl2up td.tdRight img,
table.tbl3up td.tdRight img
{
 margin-right: 3px;    /* match p-element trick... */
}

/* caption (selector issue...)
table.tbl2up */ p.pMarg
{
 margin-left: 3em;
 margin-right: 3em;
}
img.imgNoMarg
{
 margin: 0 !important;
}

/*
 * 'skins' for layout tables
 *
 * skins inherit anchor settings from content region - with some exceptions
 *
 * intent is to use these with the 'layout' group of table classes;
 * (tblLayout, tblTextImg, tblImgText, tbl2up, tbl3up)
 * but should work well enough on plain tables; be careful
 *
 * !important rqrd to override structural rules
 *
 * todo: override pPunched and spanPunched in skins that conflict w/unskinned
 * may have to have cite-specific rules for KangGURU
 */

/*
 * 'tblSkinned' - just does the margin/padding and borders; colour goes in the html
 * problematic for colours that work poorly w/default anchor settings and heading colours
 */

/*
 * Skin 1 - used
 */

table.tblSkin1
{
 color: #ff0;                /* Yellow */
 background-color: #f03;     /* Redish */
}
/* anchor-colour settings for skin - needs work */
table.tblSkin1 a:link
{
 color: White !important;
}
table.tblSkin1 a:visited
{
 color: Silver !important;
}
table.tblSkin1 a:hover
{
 color: Aqua !important;
}
table.tblSkin1 a:focus,
table.tblSkin1 a:active
{
 color: Black !important;
}
/* heading-colours match other text for now, but do not have to... */
table.tblSkin1 h1
{
 color: #ff0 !important;
}
table.tblSkin1 h2
{
 color: #ff0 !important;
}
table.tblSkin1 h3
{
 color: #ff0 !important;
}
/* override normal 'cite' handling */
table.tblSkin1 p cite,
table.tblSkin1 p.pCite
{
 /* quotation-colour matches other text for now, but does not have to... */
 color: #ff0 !important;
}
table.tblSkin1 div.divCite
{
 color: #ff0 !important;
}
table.tblSkin1 p.pPunched
{
 color: #ff0 !important;
}
table.tblSkin1 span.spanPunched
{
 color: #ff0 !important;
}
table.tblSkin1 span.pSpanKang
{
 color: Maroon !important;
}
table.tblSkin1 span.pSpanGURU
{
 color: White !important;
}

/*
 * Skin 2, inverse of Skin 1 - unused...
 */

table.tblSkin2
{
 color: #f03;                /* Redish */
 background-color: #ff0;     /* Yellow */
}
/* anchor-colour settings for skin - same as std for now */
table.tblSkin2 a:link
{
 color: #00c !important;
}
table.tblSkin2 a:visited
{
 color: Purple !important;
}
table.tblSkin2 a:hover
{
 color: #00f !important;
}
table.tblSkin2 a:focus,
table.tblSkin2 a:active
{
 color: Red !important;
}
/* heading-colours match other text for now, but do not have to... */
table.tblSkin2 h1
{
 color: #f03 !important;
}
table.tblSkin2 h2
{
 color: #f03 !important;
}
table.tblSkin2 h3
{
 color: #f03 !important;
}
/* override normal 'cite' handling */
table.tblSkin2 p cite,
table.tblSkin2 p.pCite
{
 /* quotation-colour matches other text for now, but does not have to... */
 color: #f03 !important;
}
table.tblSkin2 div.divCite
{
 color: #f03 !important;
}
table.tblSkin2 p.pPunched
{
 color: #f03 !important;
}
table.tblSkin2 span.spanPunched
{
 color: #f03 !important;
}
 /* copies of std colours... */
 table.tblSkin2 span.pSpanKang
 {
  color: #800000 !important;
 }
 table.tblSkin2 span.pSpanGURU
 {
  color: #808080 !important;
 }

/*
 * Skin 3 - used
 */

table.tblSkin3
{
 color: #55c;                /* medium pastel blue */
 background-color: #ccf;     /* light pastel blue (was #cff light blue-green) */
}
/* override for skin! */
table.tblSkin3 .center p,
table.tblSkin3 p.center
{
 color: #55c;     /* auto-color centered paragraphs - being bold! */
}
/* anchor-colour settings for skin - same as std for now */
table.tblSkin3 a:link
{
 color: #00c !important;
}
table.tblSkin3 a:visited
{
 color: Purple !important;
}
table.tblSkin3 a:hover
{
 color: #00f !important;
}
table.tblSkin3 a:focus,
table.tblSkin3 a:active
{
 color: Red !important;
}
/* heading-colours match other text for now, but do not have to... */
table.tblSkin3 h1
{
 color: #900 !important;
}
table.tblSkin3 h2
{
 color: #006 !important;     /* exception */
}
table.tblSkin3 h3
{
 color: #900 !important;
}
/* override normal 'cite' handling */
table.tblSkin3 p cite,
table.tblSkin3 p.pCite
{
/* quotation-colour goosed slightly... */
 color: #006060 !important;
}
table.tblSkin3 div.divCite
{
 color: #933 !important;
}
/* punched-colour matches normal 'extra-punched' colour */
table.tblSkin3 p.pPunched
{
 color: #46f !important;     /* extra-punch */
}
table.tblSkin3 span.spanPunched
{
 color: #46f !important;     /* extra-punch */
}
 /* copies of std colours... */
 table.tblSkin3 span.pSpanKang
 {
  color: #800000 !important;
 }
 table.tblSkin3 span.pSpanGURU
 {
  color: #808080 !important;
 }

/*
 * Skin 4 - repurposed; now half-way between 3 and 5;
 * pastel-blue background and brick-red text
 */

table.tblSkin4
{
 color: #900;                /* Brick Red */
 background-color: #ccf;     /* light pastel blue (was #cff light blue-green) */
}
/* override for skin! */
table.tblSkin4 .center p,
table.tblSkin4 p.center
{
 color: #55c;     /* auto-color centered paragraphs - being bold! */
}
/* anchor-colour settings for skin - same as std for now */
table.tblSkin4 a:link
{
 color: #00c !important;
}
table.tblSkin4 a:visited
{
 color: Purple !important;
}
table.tblSkin4 a:hover
{
 color: #00f !important;
}
table.tblSkin4 a:focus,
table.tblSkin4 a:active
{
 color: Red !important;
}
/* heading-colours match other text for now, but do not have to... */
table.tblSkin4 h1
{
 color: #900 !important;
}
table.tblSkin4 h2
{
	color: #BEAF74 !important;     /* exception */
}
table.tblSkin4 h3
{
 color: #900 !important;
}
/* override normal 'cite' handling */
table.tblSkin4 p cite,
table.tblSkin4 p.pCite
{
/* quotation-colour goosed slightly... */
 color: #006060 !important;
}
table.tblSkin4 div.divCite
{
 color: #933 !important;
}
/* punched-colour matches normal 'extra-punched' colour */
table.tblSkin4 p.pPunched
{
 color: #46f !important;     /* extra-punch */
}
table.tblSkin4 span.spanPunched
{
 color: #46f !important;     /* extra-punch */
}
   /* this really shouldn't be in a skin
    * unless we integrate tblYellowJournalism and tblBlockHead...
   table.tblSkin4 span.spanKang
   {
    color: Fuchsia !important;
   }
    */
 /* copies of std colours... */
 table.tblSkin4 span.pSpanKang
 {
   color: #800000 !important;
 }
 table.tblSkin4 span.pSpanGURU
 {
   color: #808080 !important;
 }

/*
 * Skin 5 - used, and needs fleshing-out!
 */

table.tblSkin5
{
 color: #900;                /* Brick Red */
 background-color: #996;     /* Pale Olive */
}
/* anchor-colour settings for skin - same as std for now */
table.tblSkin5 a:link
{
 color: #00c !important;
}
table.tblSkin5 a:visited
{
 color: Purple !important;
}
table.tblSkin5 a:hover
{
 color: #00f !important;
}
table.tblSkin5 a:focus,
table.tblSkin5 a:active
{
 color: Red !important;
}
table.tblSkin5 h1
{
 color: Maroon !important;
}
table.tblSkin5 h2
{
 color: Maroon !important;
}
table.tblSkin5 h3
{
 color: Maroon !important;
}
/* override normal 'cite' handling */
table.tblSkin5 p  cite,
table.tblSkin5 p.pCite
{
 color: Maroon !important;
}
table.tblSkin5 div.divCite
{
 color: Maroon !important;
}
table.tblSkin5 p.pPunched
{
 color: Maroon !important;
}
table.tblSkin5 span.spanPunched
{
 color: Maroon !important;
}
table.tblSkin5 span.pSpanKang
{
 color: White !important;
}
table.tblSkin5 span.pSpanGURU
{
 color: Maroon !important;
}

/*
 * padding to inset from coloured background
 * has the disadvantage of adding extra padding between text and images which looks odd
 * verbose overrides following have context-specific selectors to fix this
 *
 * still an issue w/extra space near images in IE6; dumb re '~='
 */
table.tblSkinned td,
table.tblSkin1   td,
table.tblSkin2   td,
table.tblSkin3   td,
table.tblSkin4   td,
table.tblSkin5   td
{
 padding: .25em 1em !important;
}
/*
 * don't cascade into deeper tables' td-elements
 * nb: this has high 'specificity' re cascade... may require the addition of !important to other padding rules...
 *(add more levels if needed)

 NOT a demonstrated problem - comment-out for now to avoid possible issues?

 */
table.tblSkinned td td,
table.tblSkinned td td td,
table.tblSkin1   td td,
table.tblSkin1   td td td,
table.tblSkin2   td td,
table.tblSkin2   td td td,
table.tblSkin3   td td,
table.tblSkin3   td td td,
table.tblSkin4   td td,
table.tblSkin4   td td td,
table.tblSkin5   td td,
table.tblSkin5   td td td
{
 padding: 0;
}

/*
 * need more for tbl2up, tbl3up, tblLayout? they get skinned, too...
 */
/* verbose overrides of padding for text/img layout classes */
table[class~=tblTextImg][class~=tblSkinned] td,
table[class~=tblTextImg][class~=tblSkin1]   td,
table[class~=tblTextImg][class~=tblSkin2]   td,
table[class~=tblTextImg][class~=tblSkin3]   td,
table[class~=tblTextImg][class~=tblSkin4]   td,
table[class~=tblTextImg][class~=tblSkin5]   td
{
 padding-top: .25em;
 padding-right: 0 !important;
 padding-bottom: .25em;
 padding-left: 1em;
}
table[class~=tblTextImg][class~=tblSkinned] img,
table[class~=tblTextImg][class~=tblSkin1]   img,
table[class~=tblTextImg][class~=tblSkin2]   img,
table[class~=tblTextImg][class~=tblSkin3]   img,
table[class~=tblTextImg][class~=tblSkin4]   img,
table[class~=tblTextImg][class~=tblSkin5]   img
{
 margin-top: 0;
 margin-right: 1em;
 margin-bottom: 0;
 margin-left: 0;
}
/* 'mirror images' of above two... */
table[class~=tblImgText][class~=tblSkinned] td,
table[class~=tblImgText][class~=tblSkin1]   td,
table[class~=tblImgText][class~=tblSkin2]   td,
table[class~=tblImgText][class~=tblSkin3]   td,
table[class~=tblImgText][class~=tblSkin4]   td,
table[class~=tblImgText][class~=tblSkin5]   td
{
 padding-top: .25em;
 padding-right: 1em;
 padding-bottom: .25em;
 padding-left: 0 !important;
}
table[class~=tblImgText][class~=tblSkinned] img,
table[class~=tblImgText][class~=tblSkin1]   img,
table[class~=tblImgText][class~=tblSkin2]   img,
table[class~=tblImgText][class~=tblSkin3]   img,
table[class~=tblImgText][class~=tblSkin4]   img,
table[class~=tblImgText][class~=tblSkin5]   img
{
 margin-top: 0;
 margin-right: 0;
 margin-bottom: 0;
 margin-left: 1em;
}
/* also override .iMarg - getting rather messy */
table[class~=tblTextImg][class~=tblSkinned] img.iMarg,
table[class~=tblTextImg][class~=tblSkin1]   img.iMarg,
table[class~=tblTextImg][class~=tblSkin2]   img.iMarg,
table[class~=tblTextImg][class~=tblSkin3]   img.iMarg,
table[class~=tblTextImg][class~=tblSkin4]   img.iMarg,
table[class~=tblTextImg][class~=tblSkin5]   img.iMarg
{
 margin-right: 3em;
 margin-left: 2em;     /* we get one more from padding */
}
table[class~=tblImgText][class~=tblSkinned] img.iMarg,
table[class~=tblImgText][class~=tblSkin1]   img.iMarg,
table[class~=tblImgText][class~=tblSkin2]   img.iMarg,
table[class~=tblImgText][class~=tblSkin3]   img.iMarg,
table[class~=tblImgText][class~=tblSkin4]   img.iMarg,
table[class~=tblImgText][class~=tblSkin5]   img.iMarg
{
 margin-right: 2em;    /* we get one more from padding */
 margin-left: 3em;
}
/* no grooved borders on any skinned layout table images */
table.tblSkinned img,
table.tblSkin1   img,
table.tblSkin2   img,
table.tblSkin3   img,
table.tblSkin4   img,
table.tblSkin5   img
{
 border: 0px solid #666 !important;
 /* implicit assumption is that image is on too-dark a background (groove) */
 /* may make exceptions for specific skins... */
}

/* border on tables when skinned
 */
table.tblSkinned,
table.tblSkin1,
table.tblSkin2,
table.tblSkin3,
table.tblSkin4,
table.tblSkin5
{
 border: 1px solid #666 !important;
}

/*
 * used to glue skinned tables together - may have browser issues...
 */
table.tblAbutBelow
{
 border-bottom: 0 !important;
 margin-bottom: 0 !important;
}
table.tblAbutAbove
{
 border-top: 0 !important;
 margin-top: 0 !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * for data tables in body-text region
 *
 * todo: need a way to control width of non-first columns
 * while encouraging 1st to *not* wrap...
 *
 */

table.tblBasic,
table.tblPretty,
table.tblPrettyLinks
{
/* font: 12px/1.3 Verdana, Geneva, Arial, Helvetica, sans-serif; */
 margin: .75em 0;
 line-height: 1.3em;
}
table.tblPretty,
table.tblPrettyLinks
{
 background-color: #666;     /* when used w/cellspacing="1" this becomes the border and grid lines */
}
table.tblBasic th,
table.tblPretty th,
table.tblPrettyLinks th
{
/* font-size: 125%; */
 font-size: 12pt;
 font-weight: bold;
}
table.tblPretty th,
table.tblPrettyLinks th
{
 background-color: #cdd;
}
table.tblPretty td,
table.tblPrettyLinks td
{
 background-color: #eee;
}
table.tblBasic th,
table.tblBasic td,
table.tblPretty th,
table.tblPretty td,
table.tblPrettyLinks th,
table.tblPrettyLinks td
{
 padding: .3em 1.5em .3em 0; /* flush-left; extra on right */
 line-height: 150%;
 text-align: left;
 vertical-align: top;
}
/* override for tblBasic */
table.tblBasic th,
table.tblBasic td
{
/* line-height: 100%;     just the padding for 'tblPretty' */
 line-height: 130%;
}
/* override for tblPretty and tblPrettyLinks header-cells (only)*/
table.tblPretty th,
table.tblPretty td,
table.tblPrettyLinks th
{
 padding: .3em 1.5em .3em .5em; /* some on left; extra on right */
}
/* override for tblPrettyLinks */
table.tblPrettyLinks td
{
 padding: 0;     /* NO padding in data cells - done in anchors */
}
table.tblPrettyLinks a
{
 display: block;
 height: 100%;
 padding: .3em 1.5em .3em .5em; /* some on left; extra on right */
/*
 background-color: #fd3;
 line-height: 150%;
 */
 text-decoration: none;
}
/*
 * needs the to-be-centralized hack for colours
 * also needs top-bottom border tricks - w/one-off for top-most and bottom-most? ick
 * (mebbe border-collapse will clean the ick up)
 */

table.tblPrettyLinks a:hover
{
 background-color: #cff;
 text-decoration: none !important;
}

/*
 * tblDialogue - a script-like extension to tblBasic
 *
 * 1st column is character speaking - td-elements; gets coloured, *not* larger...
 * 2nd column is dialogue - gets italic
 *
 */

table.tblDialogue
{
 margin-top: 0;
 margin-bottom: 0;
}
table.tblDialogue th
{
/* font-size: 100%!important;       undo 125% in main class - NG for IE6, hard-code */
 font-size: 10.5pt;    /* undo 125% in main class - needs to remain in sync w/main setting...*/
 color: #55c; /* adding !important will dodge crude hacks that directly tweak a std tbl class... */
/*
 * may want to lock-down width so different tables - with different characters - match
 */
}
table.tblDialogue td
{
 color: #933;
 font-style: italic;
 text-align: justify;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * boxes.css
 *
 */

/*
 * floaters
 *
 * use div form only between paragraphs; embed a paragraph for a caption
 * use imgFloatLeft/Right form for images embedded in paragraphs (or between'em)
 *
 */

div.divFloatLeft,
img.imgFloatLeft
{
 clear: left;
 float: left;
 margin-left: 3px;     /* match p-element trick */
 margin-right: 24px !important;
}

div.divFloatRight,
img.imgFloatRight
{
 clear: right;
 float: right;
 margin-left: 24px !important;
 margin-right: 3px;    /* match p-element trick */
}

div.divFloatLeft,
div.divFloatRight,
img.imgFloatLeft,
img.imgFloatRight
{
 margin-top: 3px !important;
 margin-bottom: 6px !important;
 padding: 0px;
}

/* automagic borders */
div.divFloatLeft img,
div.divFloatRight img,
img.imgFloatLeft,
img.imgFloatRight
{
 border-width: 1px 2px 2px 1px;    /* t r b l */
 border-top-style: solid;
 border-left-style: solid;
/* only looks good on very light backgrounds */
 border-bottom-style: groove;
 border-right-style: groove;
 border-color: #666;
}

/* caption-behavior for p-element */
div.divFloatLeft p,
div.divFloatRight p,
p.pImgCaption
{
 margin: auto;
 color: #00496b;
 font-size: 9pt;
 margin: .2em 0 .2em 0 !important;
 line-height: 1.3em;
 text-align: left !important;
}

/*
 * element-specific clear utils; done to ensure override of clears in #IDs
 *
 */
div.ClearBoth,
img.ClearBoth,
div.ClearAll,
img.ClearAll
{
 clear: both;
}
div.ClearLeft,
img.ClearLeft
{
 clear: left;
}
div.ClearRight,
img.ClearRight
{
 clear: right;
}
div.ClearNone,
img.ClearNone
{
 clear: none;
}

/*
 * floating box; use between paragraphs; nb: can squabble with other floaters
 *
 */

div.divSidebar
{
 font-size: 9pt;
 line-height: 1.3em;
 background-color: #ccf !important;
 margin-top: 3px;
 border-width: 1px 2px 2px 1px;
 border-top-style: solid;
 border-left-style: solid;
 border-bottom-style: groove;
 border-right-style: groove;
 border-color: #ccc;
 padding: 6px;
}
div.divSidebar dl      /* overrides */
{
 margin: 0;
}
div.divSidebar dt
{
}
div.divSidebar dd
{
 margin-left: 0.5em;
}
/* need p-element rules for sidebar; others... see bodyworks */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * rules for the contact form; search button and box, too
 *
 * TBD just what effect these'll have on contact.php...
 * may have to tweak something or ditch for now
 */

form
{
 margin: 0;
 border: 0;
 padding: 0;
 font-size: 12pt;
}
input,
select,
textarea
{
 padding-left: .25em;
 font-size: 12pt;
}
input,
textarea
{
 padding-right: .25em;
}
input,
textarea
{
}
input.SendButton
{
 color: #800;
 font-style: italic;
/*
 padding: .25em 1em;
 */
 font-weight: normal;
 padding: 0;     /* no bold or padding; IE looks funny */
}
input.SearchButton
{
 font-size: 10pt;
 font-weight: normal;
 padding: 0;     /* no bold or padding; IE looks funny */
}
input.SearchBox
{
 font-size: 10pt;
}
form p,
form td
{
 margin: .5em 0 .6em 0;
 font-size: 12pt;
 line-height: 1.2em;
 text-align: justify;
}
table.tblForm
{
 font-size: 12pt;
}
table.tblForm td
{
 padding: .3em 1em .3em 0; /* flush-left; extra on right */
 line-height: 150%;
 text-align: left;
 vertical-align: middle;
}
/* use in lieu of blockquote */
div.divForm
{
 font-size: 12pt;
 padding-left: 2em;
}
   /* just an IE test
   table
   {
    border: 1px dashed lime !important;
   }
   td, th
   {
    border: 1px dashed purple !important;
   }
   h1, h2, h3
   {
    border: 1px dashed green !important;
   }
   p, ol, ul
   {
    border: 1px dashed teal !important;
   }
 */