@charset "iso-8859-1";

/*
 * monsoon.css - sytle sheet for TheMonsoonGroup.com
 *
 * daven dot webmason at gmail dot com
 *
 */

html
{
 height: 100%;
}

body
{
 height: 100%;
 background-color: #ffffff;
 margin-top: 5px;      /* strange border - top and left only */
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 5px;
/* margin: 0;  hurt my eye */
 text-align: center;
}
div#container
{
/*
 width: 70em;
 margin: 5px auto;
 text-align: left;
 */
}
body, th, td, div
{
 
 font-family: Book Antiqua;
 
 font-size: 10.5pt;
 color: Black;
}

a:link
{
 color: #036;
 text-decoration: none;
}
a:visited
{
 color: #036;    /* visited off */
 text-decoration: none;
}
a:hover
{
 color: #600;
 text-decoration: underline;
}
a:focus
{
 text-decoration: none;
 color: #036;
}
a:active
{
 text-decoration: none;
 color: #036;
}
a.aNakal
{
 display: none;
}

h3
{
 color: #036;
}

p
{
 margin: .4em 0 .5em 0;
 line-height: 1.3em;
 text-align: justify;
}
h1.hRight, h2.hRight, h3.hRight,
p.pRight
{
 text-align: right !important;
}
p.pCite
{
 padding-left: 1em;
 padding-right: 1em;
}
p.pSoldOut
{
 color: #c00;
 font-weight: bold;
}
span.spanSoldOut
{
 color: #c00;
 font-size: smaller;
 font-weight: normal;
}

/*
 * list rules
 */
ul,
ol
{
 text-align: justify;
}

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

dl
{
 margin-top: .2em;
 margin-bottom: .5em;
}
dt
{
 font-weight: bold;
 margin-bottom: .1em;
}
dd
{
 line-height: 1.3em;
 margin-left: 2em;
 margin-bottom: .1em;
}

/* emulate center */
/* centered is a non-cascading version */
.center,
.centered
{
/* width: 100%;     100% can cause grief! */
 text-align: center !important;
}
/* nb: heavy impact */
*.center *
{
 margin-left: auto;
 margin-right: auto;
}
/* lite-impact version */
.centre
{
 text-align: center;
}

.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;  }


/*
 * Structural rules
 *
 */

/*
 * table fills the client wnd except for strange body margins
 *
 */
table#tblFullPage
{
 width: 100%;
 height: 100%;
}

/*
 * td-element of table#tblFullPage - holds the sidebar
 *
 */
td#tdLeftSidebar
{
 text-align: center;
 vertical-align: top;
 width: 280px !important;
 background-color: #FFFFFF;
 border-right: 1px solid #036;
}
td.tdLeftSidebarMain
{
 background-color: #FFFFFF !important;   /* hot pink */
}

/*
 * left tblLeftSidebar inset in td#tdLeftSidebar
 * contains the coloured region and any bugs floating below it
 *(contains div#divColouredSidebar)
 */
table#tblLeftSidebar
{
 margin-top: 8px;
 margin-right: auto;
 margin-bottom: 8px;
 margin-left: auto;
 border: 0;
 padding: 0;
 text-align: center;
}

table#tblLeftSidebar td
{
 vertical-align: top;
 color: #FFFFFF;
}

/*
 * inset area in sidebar;
 * coloured yellow on all pages save main
 * - main page adds divColouredSidebarMain which tweaks stuff... (green)
 */
div#divColouredSidebar
{
 width: 240px !important;
 margin: 0;
 border: 1px solid #111;
 padding: 8px 0 8px 0;
 background-color: #FFFFFF;     /* yellow */
 text-align: center;
}

div#divColouredSidebar h2
{
 color: #036;
 font-size: 14pt;
 margin: .75em 0 .5em 0;
}
div#divColouredSidebar h3
{
 color: #036;
 font-size: 13pt;
 margin: .75em 0 .5em 0;
}
div#divColouredSidebar h4
{
 color: #036;
 font-size: 12pt;
 margin: .5em 0 .25em 0;
}
div#divColouredSidebar p
{
/*
 * rule adds 'robustness' - only p-element is ATM is the aBlock on main page
 * if that ever happens, make them inset per the nav system...
 */
 padding-left: 10px;
 padding-right: 10px;
 color: #036;
 font-style: italic;
}

div.divColouredSidebarMain
{
 background-color: #036 !important;
}
/*
 * a one-off hover-thang for main sidebar
 */
a.aBlock
{
 display: block;
 padding: 4px 0;
 height: 100%;
 font-weight: bold;
 border-top: 1px solid #333;
 border-bottom: 1px solid #333;
}
a.aBlock span
{
 font-style: normal !important; /* undo for italic from p-element on 'hearts' */
}
a.aBlock:hover
{
 background-color: #13EC13;
 border-left: 1px solid #333;
 border-right: 1px solid #333;
 color: #036 !important;
 text-decoration: none !important;
}

/*
 * on-hover navigation system - left sidebar
 *
 */

div.divNavBox
{
 width: 100%;
 margin-top: 4px;
 margin-bottom: 8px;
 border: 0;
 padding: 0;
}

div.divNavBox table.tbl1stTier,
div.divNavBox table.tbl2ndTier
{
 width: 100%;
}
div.divNavBox table.tbl1stTier th
{
 color: #036;
 font-size: 11pt;
 font-weight: bold;
 text-align: center;
 padding: 8px 0;
}
div.divNavBox table.tbl1stTier td,
div.divNavBox table.tbl2ndTier td
{
 font-size: 10pt;
 font-weight: bold;
 text-align: left;
}
div.divNavBox table.tbl2ndTier td
{
 font-size: 8pt;
}
div.divNavBox table td
{
 vertical-align: baseline;   /* for old Mozilla and Firefox on Linux */
}

/* nb: !important rqrd to override structural-local rule! (colours, at the moment)*/
div.divNavBox table.tbl1stTier a:link,
div.divNavBox table.tbl1stTier a:visited,
div.divNavBox table.tbl1stTier a:active,
div.divNavBox table.tbl1stTier a:focus
{
 color: #036 !important;
}
div.divNavBox table.tbl1stTierMain a:link,
div.divNavBox table.tbl1stTierMain a:visited,
div.divNavBox table.tbl1stTierMain a:active,
div.divNavBox table.tbl1stTierMain a:focus
{
 color: #006 !important;
}
div.divNavBox table.tbl1stTier a
{
 display: block;
 padding: 3px 10px 3px 10px;
 text-decoration: none;
 border-top: 1px solid #ff6;       /* yellow per container */
 border-bottom: 1px solid #ff6;    /* yellow per container */
 height: 100%;
}
div.divNavBox table.tbl1stTier a:hover
{
 background-color: #ff0;
 border-top-color: #f60;
 border-bottom-color: #f60;
 color: #b6251e !important;
 text-decoration: none !important;
}
div.divNavBox table.tbl1stTier a.aActive,
div.divNavBox table.tbl1stTier a.aActive:hover
{
 color: #b6251e !important;
 text-decoration: none;
 background-color: #ff0;
 border-top-color: #f60;
 border-bottom-color: #f60;
 cursor: default;
}
div.divNavBox table.tbl1stTierMain a
{
 border-top: 1px solid #32cd32;    /* green per container */
 border-bottom: 1px solid #32cd32; /* green per container */
}
div.divNavBox table.tbl1stTierMain a:hover
{
 background-color: #13EC13;
 border-top-color: #080;
 border-bottom-color: #080;
}
div.divNavBox table.tbl1stTierMain a.aActive,
div.divNavBox table.tbl1stTierMain a.aActive:hover
{
 color: #b6251e !important;
 background-color: #13EC13;
 border-top-color: #080;
 border-bottom-color: #080;
}
/*
 * 2nd tier submenu links
 * it is most important that these rules override anything they don't want to inherit from the 1st tier rules above
 * after dust settles dups can be removed...
 */
div.divNavBox table.tbl2ndTier a:link,
div.divNavBox table.tbl2ndTier a:visited,
div.divNavBox table.tbl2ndTier a:active,
div.divNavBox table.tbl2ndTier a:focus
{
 color: #21536a !important;
}
div.divNavBox table.tbl2ndTier a
{
 display: block;
 padding: 1px 10px 1px 30px;        /* extra padding-left here, 2px less top and bottom */
 text-decoration: none;
 border-top: 1px solid #ff6;       /* yellow per container */
 border-bottom: 1px solid #ff6;    /* yellow per container */
 height: 100%;
}
/* 2nd tier hover is just a padded box, no colours - mebbe change back... */
div.divNavBox table.tbl2ndTier a:hover
{
 background-color: #ff6;           /* yellow per container */
 border-top-color: #ff6;           /* yellow per container */
 border-bottom-color: #ff6;        /* yellow per container */
 background-color: #ff0;
 border-top-color: #f60;
 border-bottom-color: #f60;
 color: #b6251e !important;
 text-decoration: none !important;
}
/* 'active' concept n/a in 2nd tier - yet */


/* the bugs floating under the coloured region */
div.divSidebarTrailer,
div.divSidebarTrailerMain
{
 margin-top: 40px;     /* shove off from coloured region */
 text-align: center;
 color: #ffc;
 font-size: 10pt;
 font-weight: bold;
}
div.divSidebarTrailerMain
{
 color: #900;
}

div.divMainHeader
{
 width: 100%;
}
div.divSlideshowFrame
{
 clear: both;
 width: 380px;   /* somewhat wider than slides; vertical padding done in html */
 margin-left: auto;
 margin-right: auto;
 background-color: #eee;
 text-align: center;
 border: 1px solid #ff69b4;
}
div.divSlideshowFrame p
{
 font-size: .8em;
 font-weight: bold;
 color: #09f;
 text-align: center;
}

/*
 * these are the td-elements on the right side of each page
 */
td#tdRightSideContent
{
 background-color: #ffc;
 vertical-align: top;
 height: 100%;
}

td#tdRightSideContent h1
{
 font-size: 20pt;
 line-height: 1.4em;
 margin: .75em 0 .5em 0;
 font-weight: bold;
 color: #0000CC;
}
td#tdRightSideContent h2
{
 font-size: 13pt;
 line-height: 1.3em;
 margin: 1em 0 .4em 0;
 font-weight: bold;
 color: #069;
}
td#tdRightSideContent h3,
td#tdRightSideContent h4,
td#tdRightSideContent h5,
td#tdRightSideContent h6
{
 font-size: 12pt;
 line-height: 1.2em;
 margin: .4em 0 .5em 0;
 font-weight: bold;
 color: #036;
}

/*
 * automagic borders on images on shopping pages (+util)
 */
td#tdRightSideContent img,
img.i1
{
 border: 1px solid #ffffff;
}
/*
 * class to suppress automagic borders where not desired
 */
img.i0
{
 border: 0 !important;
}
/*
 * class to get a red-#f60 border on images - prior art (was named "B")
 */
img.imgPopup
{
 border: 1px solid #c60 !important;      /* trump the automagic rule */
}

div.divItem      /* was named just 'item' */
{
 padding-top: .75em;
 color: #033;

/* built this in; removed other implementations */
 padding-bottom: .25em;
 border-bottom: 1px solid #036;
}
div.divLastItem
{
 border-bottom: 0;     /* make the last underline go away */
}
div.divFirstItem
{
 margin-top: 1em;
 padding-top: .6em;
 border-top: 1px solid #036;
}

div.divItem h2
{
 font-size: 15pt;
 margin: 0 0 .5em 0;
 color: #033;
}
/* typically the price - mebbe its own class... */
div.divItem b
{
 color: #039;
}
/* a 'purchase' button */
div.divItem form
{
 margin-bottom: .75em;
}
div.divItem p.pItemViewCart
{
 clear: right;
 text-align: right;
 display: block;
 margin-top: .75em;
}

div.divItem p.pItemViewCart a
{
/* color: pink; allows control of 'look' of all those cart links...*/
 font-weight: bold;    /* auto-bold, for example... */
 font-size: larger;
}


tr#trFooterLinks
{
 background: #FF0;
}
tr#trFooterLinks td
{
 border-bottom: 1px solid #f60;
 border-top: 1px solid #111;
}
tr#trFooterContact
{
 background: #FFFFFF;
}
tr#trFooterLinks td,
tr#trFooterContact td
{
 vertical-align: top;
 text-align: center;
 font-weight: bold;
}
tr#trFooterContact td
{
 line-height: 1.4em;
 padding-top: .4em;
 padding-bottom: .3em;
}
tr#trFooterContact a:hover,
a.aHotPink:hover
{
 color: #ff69b4 !important; /* "hot pink" - like the email address */
}
.divMarginTop
{
 margin-top: 5px;
}

/*
 * on-hover navigation system - bottom bar
 *
 */
table.tblNavBar
{
 margin-left: auto;
 margin-right: auto;
 margin-top: 0;
 margin-bottom: 0;
 border: 0;
 padding: 0;
 background-color: #ff0;
}
table.tblNavBar td
{
 border: 0 !important; /* don *not* inherit from tr#trFooterLinks td */
 text-align: center;
 vertical-align: baseline;   /* for old Mozilla and Firefox on Linux */
}

/* nb: colours not (yet) tagged !important - tblNavBar outside structural-local rule area...*/
table.tblNavBar a
{
 display: block;
 border-left: solid 1px #ff0;
 border-right: solid 1px #ff0;
 color: #21536a; /* nb: override for active item below */
 font-size: 10pt;
 font-weight: bold;
 text-decoration: none;
 padding: 5px 12px 5px 12px;
 height: 100%;
}
table.tblNavBar a:hover
{
 color: #b6251e;
 background-color: #ff6;
 border-left-color: #f60;
 border-right-color: #f60;
 text-decoration: none;
}
table.tblNavBar a.aActive
{
 color: #b6251e;
 background-color: #ff6;
 border-left-color: #f60;
 border-right-color: #f60;
 cursor: default;
}
table.tblNavBar a.aActive:hover
{
 color: #b6251e; /* override above a:hover rule; no change of color on hover for active item */
}



/* this is used - once; index.html */
div.c2
{
 text-align: center;
 padding: 8px 12px;
}

/* this wraps the content region of pages... except index.html, which uses .c2 above... */
div.divListings
{
 text-align: left;
 padding: 8px 12px;
}


/*
 * 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: 0;
 margin-right: 24px;
}

div.divFloatRight,
img.imgFloatRight
{
 clear: right;
 float: right;
 margin-left: 24px;
 margin-right: 0;
}

div.divFloatLeft,
div.divFloatRight,
img.imgFloatLeft,
img.imgFloatRight
{
 margin-top: 3px;
 margin-bottom: 6px;
 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 */

/*
 * table styles
 */

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;
}