/***********************************************/
/* 3col_leftNav.css                             */
/* Use with template 3col_leftNav.html          */
/***********************************************/


/***********************************************/
/* Possible colors                             */
/***********************************************/ 
/*

From the original EL-Web:
	mastHead: #0033ff;
	navBar: #ccf6f6;
	navbar (brighter alternative): #ccffff;
	contentTableBrdr:  #acdcec;
	contentTableHd (text color): #333333;

From the JROI project:
	commandBar:  #3399cc;
	headingBar: #eef3fb;
	headingBarBorder: #b6c7E5;
	contentTH: #ccccff;
	tableRowEven (yellow): #ffffcc;
	tableRowOdd (white): #ffffff;

New colors from this experiment:
	content h3 background: #eefbfb;
	content h3 border: #b6cfd9;
	content h3 text color: #336699;
	h4 color: #000099;
	table header candidate: #7C98AE;
	table header candidate: #D8E1E7;
	colder grayer blues: (header, subhead) #A6B9DC, #EBEFF5; 
	** those last two may not be blue enough **
	good warm blue colors colors: #33ccff, #33ccee, #3399ee, #3399dd, #b9d6df;
	good yellow colors: #ffffee, #ffffdd, #ffffde, #ffffea;
	
*/
/***********************************************/
	



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

body {
	font-family: Arial, sans-serif;
	line-height: 117%;
	margin: 0px;
	padding: 0px;
}

a:link {
	color: #006699;
}

a:visited {
	color: #660099;
}

a:hover {
	color: #cc0000;
}

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 140%;
	color: #333366;
	margin: 0px;
	padding: 10px 0 5px 0;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 135%;
	color: #006699;
	margin: 0px;
	padding: 0px;
}

/* h3 is used in the introblurb and content sections. For content section formatting see .contentHBar and .contentH3InTable definitions */ 

h3 {
	font-family: Arial, Helvetica, sans-serif;
	color: #000099;
	margin: 0px;
	padding: 0px;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #000099;
	margin: 0px;
	padding: 0px;
}

h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #333333;
	margin: 0px;
	padding: 0px;
}

h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #666666;
	margin: 0px;
	padding: 0px;
}

ul {
	list-style-type: square;
}

ul ul {
	list-style-type: disc;
}

ul ul ul {
	list-style-type: none;
}

label {
	font-family: Arial,sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #334d55;
}

/***********************************************/
/* Global styles                               */
/***********************************************/ 

.small {
        font-size: 80%;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: lighter;
}

/******** Especially for forms *****************/

.newsletterSignup {
	margin: .5em 0 .5em 0;
	width: 25.9em;
	border: 1px #eee solid;
	padding: .2em .4em .4em .4em;
	background-color:#ffc;
}
.smallFormHead {  /* Based on the normal h5 definition, with adjustments for font size, and spacing */
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 95%;
	font-weight: bold;
	color: #333;
	margin: 0;
	padding: 0;
}
.formRow {
	display: block;
	clear: both;
	margin: 0 0 1em 0;
}
.formFieldLabel { /* LABEL tags must be thrown into a DIV and styled via the DIV */
	float: left;
	text-align: right; /* LABEL tags can't seem to get the text-align via styles, whether stylesheet or even inline styles */
	vertical-align: top; /* LABEL tags can't seem to get the vertical-align via styles, whether stylesheet or even inline. */
	white-space: nowrap;
	font-weight: bold;
	width: 133px; /* Width is chosen for widgets to line up with the DVD titles, Price, and Availability paragraphs in the catalog-item DIVs on the Videos page. */
}
.widget { 
	float: left;
	margin-left: 5px; /* Width is chosen to line up with the DVD titles, Price, and Availability paragraphs in the catalog-item DIVs on the Videos page. */
}
.inlineWidgetArray input {
	margin-left: 1em;
}
.fieldNoteTop {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
}
.fieldNoteRight {
	float: left;
	background-color:#eeeeee;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	vertical-align: top;
	padding: .2em .5em .7em .5em;
}
.fieldNoteBottom {
	display: block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
}
.fieldNoteLeft {
	float: left;
	margin-left: 5px;
	display: block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-weight: normal;
	white-space: normal;
}
.fieldNoteRight p {
	margin-top:0;
	margin-bottom: .5em;
}
.accesskey {text-decoration: underline;}



/***********************************************/
/* Layout Divs                                 */
/***********************************************/

/* As far as I can tell on May 10, 2006, masthead seems to have no effect at all. .masthead and .sitename were originally #masthead and #sitename, and instead of classes, the files called them via id="", but they didn't seem to be working, I noticed on May 10.  So I changed them to the .'s and called them via class="". Sitename works, but masthead doesn't. Don't know why. Could be something to do with nesting not working. */
.masthead {
	padding: 10px 0px 0px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
}

#navBar {
	float: left;
	width: 20%;
	margin: 0px;
	padding: 0px;
	top: 5px;
	left: 10px;
	background-color: #cceeee;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}

#utilityLinks {
	float:right;
	clear: right;
	width: 19%;
	border-left: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 5px 0px 10px 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
}

#headlines {
	float:right;
	clear: right;
	width: 19%;
	border-left: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding-right: 10px;
}

#content {
	float: left;
	width: 57%;
	margin-left: 10px;
}

#contentTop {
	float: left;
	width: 57%;
	margin-left: 10px;
}

/** contentRest width computed by adding contentTop and headlines/utilityLinks widths **/
#contentRest {
	float: left;
	width: 77%;
	margin-left: 10px;
}

/***********************************************/
/* Components                                  */
/***********************************************/

.siteName {
	margin: 1em 0 .3em 0;
	padding: 0 0 0 10px;
}


/************* #globalNav styles **************/

#globalNav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
	font-weight: bold;
	color: #ffffff;
	padding: 4px 0px 7px 10px;
	background-color: #3399CC;
	/*background-color: #3333ee;*/
	border-bottom: 6px solid #cceeee;
}

#globalNav img {
	display: block;
}

#globalNav a:link {color: #ffffff; font-weight: bold;}
#globalNav a:visited {color: #ffffff; font-weight: bold;}
#globalNav a:hover {color: #cc0000; font-weight: bold;}

.globalNavHere {
	color: #333399;
	font-weight: bold;
	padding: 5px 5px 7px 5px;
	background: #cceeee;
}



#globalNav a.globalNavHereLink:link {color: #333399;}
#globalNav a.globalNavHereLink:visited {color: #333399;}
#globalNav a.globalNavHereLink:hover {color: #cc0000;}
/* 
.globalNavHere a:link {color: #333399;}
.globalNavHere a:visited {color: #333399;}
.globalNavHere a:hover {color: #cc0000;}
*/

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding-left: 10px;}


#navBar a:link {color: #666666;}
#navBar a:hover {color: #cc0000;}

#navBar .assoc-text {
        display: block;
		padding-left: 15px;
		font-size: 75%;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: lighter;
}

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

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


/*********** #sectionLinks styles ***********/

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

#sectionLinks h4 {
	color: #333399;
	padding: 15px 0px 2px 10px;
}

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

#sectionLinks a:hover {
	background-color: #FFF;
}

#sectionLinks h4 a:link {
	color: #333399;
	margin: inherit;
	padding: 0px;
	border: none;
}

#sectionLinks h4 a:visited {
	color: #333399;
	margin: inherit;
	padding: 0px;
	border: none;
}

#sectionLinks h4 a:hover {
	color: #cc0000;
	background-color: #FFF;
}


/*********** .sectionLinks styles ***********/

#sectionLinks h4.here {
	color: #006699;
	background-color: #FFF;
	/* list-style: url(../graphics/ar-here.gif) outside disc;
	border-right: 0px none transparent; */
}

#sectionLinks li.here {
    font-weight: bold;
	color: #000000;
	background-color: #FFF;
	padding: 2px 0px 2px 10px;
	border-top: 1px solid #cccccc;
	/* list-style: url(../graphics/ar-here.gif) outside disc;
	border-right: 0px none transparent; */
}


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

.relatedLinks {
	margin: 10px 0px 0px 0px;
	padding: 10px 0px 10px 10px;
	font-size: 90%;
	/*border-top: 1px solid #cccccc;*/
}
.relatedLinks a:link,
.relatedLinks a:visited {
	display: block; 
}
.relatedLinks li {
	text-indent: -15px;
	padding-left: 15px;
}


/************** #headlines styles **************/

#headlines {
	margin: 0px;
	padding: 10px 0px 20px 10px;
	font-size: 80%;
}

#headlines h4 {
    padding: 0;
	margin-bottom: 1em;
}

#headlines img {display: block;}

.sideBarStrong {
	font-weight: bold;
	color: #000099;
}

#headlines p {
    padding-left: 10px;
	margin-bottom: 5px;
	text-indent: -10px;	
}

#headlines .headlineDateStamp {
    display: block;
	padding-left: 10px;
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #666666;
}

/************** #advert styles **************/

#advert {
	padding: 20px 0px 10px;
}

#advert img {
	display: block;
}


/************** #utilityLinks styles **************/

#utilityLinks p {
	padding: 0px 0px 0px 10px;
	margin: 5px 0 5px 0;
	text-indent: -10px;
}


/*************** #pageName styles **************/

#pageName {
	padding-bottom: 5px;
}

/************* #breadCrumb styles *************/

#breadCrumb {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	padding: 5px 0px 5px 0px;
	padding-left: 1em;
	text-indent: -1em;
}
#breadCrumb a {
}


/************** In the blurb section ***************/

.msgRedAlert {
	width: 80%;
	margin: 1em;
	border: 2px solid #DD0000;
	padding: 1em;
	background-color: #FFccdd;
	clear: both;
}
.msgRedAlert h3, .msgRedAlert h4 {
	color: #000000;
	border-bottom: 1px solid #DD0000;
	margin-top: 0px;
	margin-bottom: .5em;
	padding: 0 0 2px 0;
}
.msgYellowAlert {
	width: 80%;
	margin: 1em;
	border: 2px solid #fc3;
	padding: 1em;
	background-color: #ffd;
	clear: both;
}
.msgYellowAlert h3, .msgYellowAlert h4 {
	color: #000000;
	border-bottom: 1px solid #CCCC33;
	margin-top: 0px;
	margin-bottom: .5em;
	padding: 0 0 2px 0;
}
.msgStatusReport {
	width: 80%;
	margin: 1em;
	border: 2px solid #0066CC;
	padding: 1em;
	background-color: #E1EBFB;
	clear: both;
}
.msgStatusReport h3, .msgStatusReport h4 {
	color: #000000;
	border-bottom: 1px solid #0066CC;
	margin-top: 0px;
	margin-bottom: .5em;
	padding: 0 0 2px 0;
}


/************** used in the content sections ****************/

.datestamp {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 65%;
	color: #666666;
	margin: 2px 0 5px 5px;
	padding: 0;
}

.assoc-text-gen {
	margin-left: 20px;
	text-indent: -20px;
    display: block;
	padding-left: 15px;
	font-size: 80%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: lighter;
}

/************** .feature styles ***************/

.feature {
	color: inherit;
	padding: 0px 0px 10px 10px;
	font-size: 95%;
	clear: both;
	margin-bottom: 20px;
}

.feature h3 {
	padding: 1em 0 .5em 0;
}

.feature h4 {
	padding: 1em .5em .5em 0;
	text-align: left;
}

.feature img {
	float: left;
	padding: 10px 10px 0px 0px;
}

/************** .catalog-item styles ***************/

.catalog-item {
	margin: 10px 0 20px 0;
	padding: 0px 0px 10px 10px;
	font-size: 95%;
	clear: both;
}
/* catalog-item-pic-column was to try to make a column just for the IMG to preven the item body from wrapping under the image. Didn't want to keep working on it anymore... May 10, 2006 */
/* .catalog-item-pic-column {
	float: left;
	margin-right: 0;
	height: 100%;
	background-color: #ff0000;
} */
.catalog-item img {
	float: left;
	margin: 0 .5em .1em 0;
}
.itemAbstract {
	background-color: #eef3fb;	
	padding: 0 5px 5px 0;
}
/* .itemAbstract p {
	padding: 0 0 0 133px;
	margin-bottom: .3em; 
	padding-left: 2em;
	text-indent: -2em;
} */
.paypalBuyNow {
	float: right;
	vertical-align: bottom;
	padding: 2.5em 0 0 1em;
}
.catalog-item hr {
	margin-bottom: 15px;
}
.catalog-item h3 {
	padding: 1em 0 .5em 0;
}
.catalog-item h4 {
	padding: 1em 0 .5em 0;
	text-align: left;
}
.catalog-item-body {
	padding-left: 138px; /* Chosen to line up with the H3 and order-info content */
}

/****** div for .catalog-item ordering info *******/
.order-info {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	margin: 0 0 .5em 0;
}
.order-info p {
	margin: 0 0 .3em 0; /* negates a margin-top assignment from somewhere on the Buy Videos page. Couldn't track down where. May 10, 2006 */
	/* padding-left: 1.5em;
	text-indent: -1.5em; */    /* the padding-left plus text-indent method of making a hanging indent is not working with the IMG tag here inside a catalog-item DIV. Don't know why. May 10, 2006. */
}

/************** .story styles *****************/

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

.story p {
	padding: 0px 0px 10px 0px;
	margin: 0;
}
.story h4 {
	border-bottom: 1px solid #000099;
	margin-top: 0px;
	margin-bottom: .5em;
	padding: 0 0 2px 0;
}

/****** div for .story h4 subtitles *******/
.subtitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #666666;
	line-height: normal;
	margin: 0 0 5px 5px;
}
.subtitle p {
	padding: 0 0 0 10px;
	margin: 0;
	text-indent: -10px;
}
p.subtitleP {
	padding: 0 0 0 10px;
	margin: 100px;
	text-indent: -10px;
}
.quote {
	margin: 0 0 1em 0;
}
.quote p {
	padding: 0;
	margin: 0;
}
.quote p.attribution {
	padding: 0 0 0 2em;
	margin: 0 0 0 0;
	text-indent: -1em;
}
.story ul.storyAbstract {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	list-style-type: disc;
	background-color: #eef3fb;
	border: 2px solid #b6c7E5;
	width: 85%;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px 5px 5px 30px;
}
/*** Ordered lists are problematic when used in the abstracts, 'cause the storyAbstractTitle (below) is one of the list items. So, for Ordered lists, the first item in the list below the title is number 2. Hmmmmm... **/
.story ol.storyAbstract {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	/*list-style-type: ;*/
	background-color: #eef3fb;
	border: 2px solid #b6c7E5;
	width: 85%;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px 5px 5px 30px;
}
.storyAbstractTitle {
	font-weight: bold;
	list-style-type: none;
	color: #000000;
	font-size: 110%;
	margin-left: -15px;
}
.fieldLabel {
	font-weight: bold;
}
.story p.storyFooter {
	margin: 5px 0px 10px 20px;
	text-indent: -20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
}
/************* Commented out storyFooter. Despite being nested within the p, it was being overridden by .story p, so I defined .story p.storyFooter
.storyFooter {
	margin: 5px 0px 10px 0px;
	padding-left: 100px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-weight: bold;
}
 ***************/
/****  Commented out .story p.storyFootnote to use a storyFooter div and plain p combination. 3/2/2005
.story p.storyFootnote {
	border-top: 1px groove #666666;
	margin: 2em 0px 10px 0;
	padding: .5em 0 0 2em;
	text-indent: -2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #666666;
}
****/
.storyFootnote {
	margin: 2em 0px 10px 0;
	border-top: 1px groove #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #666666;
}
.storyFootnote p {
	padding: .5em 0 0 2em;
	text-indent: -2em;	
}


/************* #siteInfo styles ***************/

#siteInfo {
	clear: both;
	font-size: 75%;
	color: #cccccc;
	padding: 10px 10px 10px 10px;
	margin: 30px 0 10px 0;
	border-bottom: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
}

#siteInfo img {
	padding: 4px 4px 4px 10px;
	vertical-align: middle;
}
.headingBarLinks {
	background-color: #FFFFFF;
	border: 1px solid #66CCCC;
	text-align: right;
	font-size: 70%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
}
.contentHBar {
	clear: both;
	background-color: #eefbfb;
	white-space: nowrap;
	padding: 5px;
	border: 2px solid #b6cfd9;
	margin: 20px 0 0 0;
	width: 100%;
}
.contentHBarLinks {
	background-color: #FFFFFF;
	text-align: center;
	font-size: 70%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding: 2px 5px 2px 5px;
	margin: 3px 5px 3px 80%;
	white-space: nowrap;
	border: 1px solid #b6cfd9;
}
.contentH3InTable {
	font-size: 107%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #336699;
}
#introBlurb {
	font-size: 95%;
	padding: 0px 10px 0 20px;
}
#introBlurb p {
	margin: 5px 0px 10px 0px;
}
#introblurb ul {
	margin-top: 0;
	margin-bottom: 0px;
	margin-left: 20px;
}
/*** div for pullout quotes ***/
.pulloutQuote {
	font-weight: bold;
	border-bottom: 2px solid #000000;
	border-top: 2px solid #000000;
	padding: .25em 2em .25em 2em;
	margin: 1em 4em 1em 4em;
	text-align: center;
	clear: both;
}
.pulloutQuote p {
	padding: 0;
	margin: 0 0 .25em 0;
}
/*** div for Mission Statement ***/
.missionStatement {
	font-size: 120%;
	font-weight: bold;
	padding: 5px 0 5px 0;
	margin: 10px 0 10px 0;
}
.missionStatementP {
	padding: 0;
	margin: 0;
}
.schedule {
	font-size: 95%;
}
#contentRest TH {
	font-weight: bold;
	color: #FFFFFF;
	background-color: #336699;
	text-align: left;
}
.scheduleRow {
	border-bottom: 3px solid #eeeeee;
}
.tableSubHead {background-color: #b9d6ef; font-weight: bold;}
.tableRowEven {background-color: #ffffd0; vertical-align: top;}
.tableRowOdd {background-color: #ffffff; vertical-align: top;}
.supplementalText {
	display: block;
	padding-left: 15px;
	font-size: 80%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: lighter;
}

.test00 {background-color: #eefbfb;}
.test01 {background-color: #acdcec;}
.test02 {background-color: #3399cc;}
.test03 {background-color: #eef3fb;}
.test04 {background-color: #b6c7E5;}
.test05 {background-color: #eefbfb;}
.test06 {background-color: #b6cfd9;}
.test07 {background-color: #336699;}
.test08 {background-color: #66ddff;}
.test09 {background-color: #d8e1e7;}
.test10 {background-color: #666699;}
.test11 {background-color: #eefbfb;}
.test12 {background-color: #cceeee;}
.test13 {background-color: #3399CC;}
.test14 {background-color: #9999cc;}
.test15 {background-color: #33ccee;}
.test16 {background-color: #eeeeee;}
.test17 {background-color: #6699DD;}
.test18 {background-color: #CCDDFF;}
.test19 {background-color: #E5ECF9;}
.test20 {background-color: #FFFFFF;}
.test21 {background-color: #5D7CB7;}
.test22 {background-color: #D7DFEE;}
.test23 {background-color: #EEF3FB;}
.test24 {background-color: #F4F9FF;}
.test25 {background-color: #FFFFFF;}
.test26 {background-color: #B2B2B2;}
.test27 {background-color: #EEEEEE;}
caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	text-align: center;
}
.deemph {
	color: #CCCCCC;
}
.highlight {
	font-weight: bold;
	background-color: #FFFF00;
}