/* CSS layout for The Audio Description Projection (ADP) New Site */
/* by webmaster Fred Brack, fbrack@acb.org, created April 2010 */
/* UPDATES:
	* Jul '22: Add ul.justify
	* Mods for Dreamweaver and New Site, June 2021:
		* BODY background color is #FEFEFE (almost white; anything but header/footer/article)
		* HEADER/FOOTER changed to #F5F6F5 (same as ACB header/footer)
		* All PURPLE is now #2D0D80
		* artalt and all REDs are MAROON
	* Dec '21: added text-align left to footerleft
	* Jun '21: added top margin to hrheader; classes hoverbold for accessibility buttons, specialbg for tables, nodisplay
	* Jul '21: added classes bybutton, button.hover, and typealpha for sortadby.html
	* Aug '21: added margin-top and border-color for bybutton
	* Aug/Sep '21; REVISIONS when adding whitespace:
		* all identifiers changed to classes, and some names modified slightly
		* article background color is mintcream
        * numerous CSS mods related to margin and padding to add whitespace
		* changed arttitle from centered to left justified per J Flatt
		* added expandbutton class
     * Oct '21:  added curvedcorners class
*/
/* CAUTION:  if COLOR or BACKGROUND-COLOR is added or changed anywhere below, match the change in REVERSE.CSS */
/* CAUTION:  if FONT-SIZE is changed anywhere, consider the change in LARGEFONT.CSS */
/* NOTE:  Classes ending in "m" mean the class will be overridden in the MOBILE CSS */
/* NOTICE:   This CSS overrides table cells (<td>) default to provide a thin black border */
/* REMINDER: use 0, not 0px */

/* CSS Selectors Examples (see www.w3schools.com/cssref/css_selectors.asp):
	#name			  id="name" [removed from this CSS]
	.name			  class="name"
	element			  p, li, etc.
	element1 element2	all element2 within element 1; div p
    element:name      pseudoclass to modify a STATE of the element
	::after			  insert something after, as in p::after
	::before 		  similar
	::first-letter 	  select first letter of each element, as in p::first-letter
	::first-line   	  similar
*/

/*----- ELEMENT and QUALIFIED ELEMENT SELECTORS -----*/
a:hover {
	color: #FEFEFE !important;
	background-color: blue;
}
a:link {
	color: blue;
	text-decoration: none;
}
a.nav { text-decoration: none }
a:visited { color: blue } /* i.e., defeat changing a visited link's color */
body { /* this is the default setup for the entire page */
	background-color: #FEFEFE; /* almost white */
	color: black; /* all text */
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium; /* try not to specify this anyplace else ... */
	font-style: normal;
	font-weight: normal;
	/*      Top Rt   Bot Lt */
	margin: 2px 10px 2px 10px; /* remember, this is for the entire page (e.g., masthead), not its components */
	padding: 0;
	position: relative;
}
button:hover { /* this will affect ALL buttons ... */
	background-color: black; 
	color: aqua;
}
figure { margin: 20px 2px }
h1 { text-align: center; } /* center all H1s */
hr.gradient { /* used on TV Schedule page, but could be used elsewhere; goes from light edge to dark center */
	border: 0; 
	height: 3px; 
	background: linear-gradient(90deg, #F5F6F7, #2D0D80, #F5F6F7); /* fade in/out off white, purple center */
}
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Image Hover                   H V B S   C   - S cannot be 0, and inset doesn't work for images */
img.imghover:hover { box-shadow: 0 0 0 1px navy; } 
table.center { /* note the use of text-align which will affect all contents unless overridden at TD level ... */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
table.dvdyear {	/* center standard whitebg */
	background-color: #FEFEFE;
	border: 2px solid navy;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
table.nav {
	border: 0;
	border-collapse: collapse;
	width: 100%;
}
table.noborder { /* This may be useless; however, you MUST apply NOBORDER to CELLS ALSO!!! */
	border-width: 0 0 0 0;
	border-style: none;
	border-collapse: collapse;
}
table.podcast {
	border-style: solid;
	border-width: 3px;
	background-color: aqua;
}
table.specialbg { /* This is for a different background color for 'special' (smaller) tables */
	background-color: paleturquoise;
}
table.standard {
	border: 2px solid navy;
	border-collapse: collapse;
}
table.width50m { width: 50% }
table.width80m { width: 80% }
table.width90m { width: 90% }
table.width95m { width: 95% }
td { border: thin solid black }
td.dvdyear {
	line-height: 1.5;
	padding: 8px;
	text-align: left;
}
td.dvdyearhdr {
	background-color: black;
	color: #FEFEFE;
	font-weight:bold;
	text-align: center;
}
td.nav { 
	background-color: #F5F6F5; /* match headerbg */
	border: 0;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-style: normal;
	font-weight: normal;
	text-align: center;
}
td.noborder {
	border-style: none;
	border-width: 0 0 0 0;
}
td.year { /* used in DVDs listing */
	background-color:black; 
	color:#FEFEFE;
	font-size:larger;
	font-weight:bold;
	height: 30px;
	text-align: center; 
}
ul.justify { padding-left: 1.2em; }
/* To left-justify lists for mobile only, use justifym */
/* ul.justifym { } */

/*----- CLASS SELECTORS (begin with periods, call with CLASS=) -----*/

/**********  MASTHEAD  **********/
.masthead {
	/*       Top Rt   Bot Lt */ 
	padding: 0   0    0   0; /* ADDED */	
}
.header { /* For the CENTER of the masthead; MARGINS and MIN-HEIGHT = Logo width and min-height */
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	margin-left: 105px;
	margin-right: 105px;
	min-height: 105px; /* forces the background color to flow underneath both sides and with no white strip */
	text-align: center;
}
.headerbg { background-color: #F5F6F5; } /* should match .footer and td.nav bg */
.hrtop { /* rule at the top of every page WITHIN the top of the Masthead DIV */
	background-color: #2D0D80; 
	border: 0;
	height: 3px; 
	margin-bottom: 2px; /* RESTORED 9/2 and removed from logoleft/right */
}
.hrendnav { /* rule just below navigation but WITHIN the end of the Masthead DIV */
	background-color: #2D0D80; 
	border: 0;
	height: 3px; 
	margin-top: 10px; /* this is the distance between the hr and the last line of navigation */
}
.logoleft {
	border: 2px solid black;
	float: left;
	text-align: left;
}
.logoright {
	border: 2px solid black; /* ADDED */
	float: right;
	text-align: right;
}
.sitetitle { /* title in masthead on desktop devices */
	color: #2D0D80;
	font-size: x-large;
	font-weight: bold;
}

/**********  NAVIGATION  **********/
.navigation {
	clear: both;
}
/* See also a.nav, table.nav, td.nav

/**********  BODY DEFINITION  **********/
.pagebody { /* this used to be an ID, now a class; but the ID "pagebody" exists in docs for Skip Navigation */
	clear: both;
	/*      Top Rt   Bot Lt */
	margin: 0   40px 0   40px; /* ADDED as site default - affects all pages */
}
/* These are used on main page; top and bottom definitions are the same (but could be different ...) */
.topsection, .top_section {
	clear: both;
	min-width: 0;
	position: relative;
}
/* In bottomsection, we add padding to match article because it looks like article w/o a border */
.bottomsection, .bottom_section {
	clear: both;
	position: relative;
}
/* LEFT and RIGHT columns are the same except for CLEAR (left only) FLOAT,and MARGIN. 
   Note that WIDTHS cannot equal 100 and will control the size of the center gutter,
   PLUS the point at which narrowing the browser window moves right below left. 
   45% seems to be the best compromise as of August 2021. DO NOT ADD PADDING!  */
.leftcol {
	clear: both;
	float: left;
	margin-right: -40px; /* ADDED */
	position: relative;
	text-align: left;
	width: 49%;
}
.rightcol {
	float: right;
	margin-left: -40px; /* ADDED */
	position: relative;
	text-align: left;
	width: 49%;
	/* do NOT add CLEAR here!!! */
}

/**********  FOOTER  **********/
.footer {
	background-color: #F5F6F5; /* should match .headerbg */
	border-bottom: 4px solid #2D0D80;
	border-top: 4px solid #2D0D80;
	clear: both;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: medium;
	font-style: normal;
	min-height: 33px; /* must clear image which is 31h */
	min-width: 0;
	padding: 10px 10px 10px 10px; /* ADDED */
}
.footercenter {
	font-size: small;
	font-style: normal;
	text-align: center; /* added 12/28/21 for template revision */
}
.footerleft {
	float: left;
	text-align left; /* added 12/28/21 for template revision */
}
.footerright {
	float: right;
	text-align: right; /* added 12/28/21 for template revision */
}

/**********  SHOW TITLE LISTINGS and related  **********/

.borderwidth { /* used primarily in listings for border of logo */
	border-color: #2D0D80; 
	border-style: solid;
	border-width: 3px;
}
.genresummary { /* for summarizing genres at the bottom of title listings */
	margin-left: 40px;
	font-family: "Lucida Console", "Lucida Sans", Verdana, san-serif;
	font-weight: normal;
}
.gothicbold { /* used for special text after titles */
	color: maroon;
	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
	font-weight: bold;
}
.index { /* how the word 'Index' is shown */
	font-size: medium;
	font-weight: normal;
}
.imagemargin { /* for any images next to text */
	margin-left: 3px;
	margin-right: 3px;
}
.letter { /* how each alpha index letter is shown */
	color: navy;
	border-width: 0 0 0 0;
	font-size: xx-large;
	font-weight: bold;
	margin:  0 0 0 0;
	padding: 0 0 0 0;
}
/* Next two used in the top of LISTINGS of described videos */
.listingdesc {
	border-width: 0 0 0 0;
	padding: 5px;
	vertical-align: top;
}
.listinglogo {
	border-width: 0 0 0 0;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}
.listings {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: bold;
}
.pgmnotes { /* title notes in AD listings */
	color: maroon;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	/* font-size: larger;  SUPPRESSED 3/1/22 */
	font-weight: bold;
	margin-left: 45px;
	list-style-image: url('https://adp.acb.org/images/FingerRight.png');
	list-style-type: none;
}
/* .pgmtitle is for EVERY CURRENT title entry! Uniquely identifies a title! Code looks for this name ... */
/* titles can have other classes with the same characteristics, but they won't be picked up as current   */
/* In May 2022, freevee replaced imdb(tv) */
.pgmtitle, .cstitle, .fadtitle, .freeveetitle, .imdbtitle, .newtitle, .pftitle {
	font-family: "Lucida Console", "Lucida Sans", Verdana, san-serif;
	font-weight: normal;
	margin-left: 10px;
}
/* END list of show title listing related */

/**********  GENERAL CLASS DEFINITIONS  **********/

/* Imported standard Bracksco classes */
.border0      { border-width: 0 0 0 0 } /* picture and table borders */
.border1      { border: 1px black solid }
.border2      { border: 2px black solid }
.border3      { border: 3px black solid }
.border4      { border: 4px black solid }
.border5      { border: 5px black solid }
.border10     { border: 10px black solid }
.borderdashed { border-style: dashed }
.borderdotted { border-style: dotted }
.borderdouble { border-style: double }
.bordergroove { border-style: groove }
.borderhidden { border-style: hidden }
.borderinset  { border-style: inset }
.bordernone   { border-style: none }
.borderoutset { border-style: outset }
.borderridge  { border-style: ridge }
.bordersolid  { border-style: solid }
.collapse     { border-collapse: collapse }
.hspace5      { margin: 0 5px } /* primarily for space around an image */
.margin0      { margin: 0 } /* 1 value = 4 sides; 2 values = Top/Bot, L/R; 3 values = Top, L/R, Bot; 4 values = T/R/B/L */
.margin1      { margin: 1px }
.margin2      { margin: 2px }
.margin3      { margin: 3px }
.margin4      { margin: 4px }
.margin5      { margin: 5px }
.margin10     { margin: 10px }
.padding0     { padding: 0 }
.padding1     { padding: 1px }
.padding2     { padding: 2px }
.padding3     { padding: 3px }
.padding4     { padding: 4px }
.padding5     { padding: 5px }
.padding6     { padding: 6px }
.padding7     { padding: 7px }
.padding10    { padding: 10px }
.separate     { border-collapse: separate } /* required for spacingn */
.spacing0     { border-spacing: 0 }   /* Table cell spacing; requires border-collapse:SEPARATE, */
.spacing1     { border-spacing: 1px } /* meaning you cannot specify COLLAPSE for your table.    */
.spacing2     { border-spacing: 2px } /* These set spacing on all four sides,  To set different */
.spacing3     { border-spacing: 3px } /* horizontal/vertical space, use 2 values; e.g., 3px 5px */
.spacing4     { border-spacing: 4px }
.spacing5     { border-spacing: 5px }
.spacing10    { border-spacing: 10px }
.valigntop    { vertical-align: top }
.valignmid    { vertical-align: middle }
.valignbot    { vertical-align: bottom }
.valignbas    { vertical-align: baseline }
.width10      { width: 10% } /* table widths; not for images */
.width20      { width: 20% }
.width25      { width: 25% }
.width30      { width: 30% }
.width33      { width: 33% }
.width40      { width: 40% }
.width50      { width: 50% }
.width60      { width: 60% }
.width67      { width: 67% }
.width75      { width: 75% }
.width80      { width: 80% }
.width90      { width: 90% }
.width100     { width: 100% }
.widthauto    { width: auto }
.width50pc    { width: 50% }
.width80pc    { width: 80% }
.width100pc   { width: 100% }
/*----- COLORS -----*/
.aqua         { color: aqua } /* font colors */
.black        { color: black }
.blue         { color: blue }
.cyan         { color: aqua } /* alternate name for aqua */
.fuchsia      { color: fuchsia }
.gray         { color: gray }
.grey         { color: gray }
.green        { color: green }
.lime         { color: lime }
.maroon       { color: maroon }
.navy         { color: navy }
.olive        { color: olive }
.purple       { color: purple }
.red          { color: red }
.silver       { color: silver }
.teal         { color: teal }
.white        { color: white } 
.yellow       { color: yellow }
.aquabg       { background-color: aqua } /* background colors */
.blackbg      { background-color: black }
.bluebg       { background-color: blue }
.cyanbg       { background-color: aqua } /* alternate name for aqua */
.fuchsiabg    { background-color: fuchsia }
.graybg       { background-color: gray }
.greybg       { background-color: gray }
.greenbg      { background-color: green }
.limebg       { background-color: lime }
.maroonbg     { background-color: maroon }
.navybg       { background-color: navy }
.olivebg      { background-color: olive }
.purplebg     { background-color: purple }
.redbg        { background-color: red }
.silverbg     { background-color: silver }
.tealbg       { background-color: teal }
.whitebg      { background-color: white } 
.yellowbg     { background-color: yellow }

/*** ALL OTHERS in alphabetical Order ... */
.acbpurple { color: #2D0D80; }
.announcement { /* used at top of main page */
	margin: 20px 100px 20px 100px;
}
.artalt { color: maroon } /* emphasis color for use in articles */
/* NOTE NOTE NOTE!  The reason we define a CLASS of 'article' is so we can have 
   an "article" w/o an imbedded header, which fails validation:  <div class="article"> */
.article, article {
	/* The body of text in an article; title is done via ARTTITLE. */
	/* Match most changes here (except background-color) to SITEPROMO below */
	background-color: #FAFAFA; /* NEW for Sep '21 */
	border: medium solid black;
	clear: both;
	font-style: normal;
	font-weight: normal;
	/*      Top  Rt  Bot  Lt */
 	margin: 12px 0   12px 0; /* CHANGED - should near match PAGETITLE*/
	overflow: auto;
	padding: 5px 10px 5px 10px; /* CHANGED */
	position: relative;
	border-radius: 8px; /* added 11/12/23 */
}
.arttitle {
	color: #2D0D80; /* added 8-14-18 */
	font-family: Verdana, Geneva, Tahoma, sans-serif; 
	font-style: normal;
	font-weight: bold;
	margin-top: 0;
	text-align: left; /* changed from center 9-20-21 per Jennifer Flatt */
}
.bgcolor { background-color: white; } /* Background color for articles; required for 2-column mode on main page */
.black-on-white {
	background-color: #FEFEFE;
	color: black;
}
.black-on-white-centered {
	color: black;
	background-color: #FEFEFE;
	text-align: center;
}
.bold { font-weight: bold }
.bybutton { /* the button to select "By xxxxx" - see also button.hover */
	background-color: aqua; /* better match button.hover... */
	border-color: black;
	border-radius: 8px;
	font-size: large;
	font-weight: bold;
	margin-top: 5px; /* needed to offset from line above */
	padding: 5px;
	width: auto; /* because text size can vary */
}
.center     { text-align: center }
.clear      { clear: both }
.colorgray  { color: gray } /* used as lighter-than-black color for outdated text; e.g., old postings in history */
.colorlight { color: teal } /* used as lighter color for main text; e.g., DVDs other than current year */
.curvedcorners { border-radius: 8px; }
/* The .display class doesn't exist; however, you can code it to remind yourself you can put NO in front of */
/* it periodically to activate the NODISPLAY class, which will suppress the display of the tag's contents   */
/* .display { } */
.dvdcover {
	border-width: 0;
	float: left;
	margin-left: 9px;
	margin-right: 7px;
}
.expandbutton { color: blue; font-style: italic; }
/* These FLOATs are used primarily for images in articles, with the 5px versions preferred */
.floatleft  { 
	float: left;
}
.floatleft5px  { 
	float: left;
	padding-right: 5px;
}
.floatright { 
	float: right;
}
.floatright5px { 
	float: right;
	padding-left: 5px;
}
.hanging40 {
	padding-left: 40px; 
	text-indent: -40px;
}
.hoverbold:hover { font-weight: bold; } /* for hovering over accessibility buttons */
.hrmedium { /* primarily used at bottom of index page */
	background-color: #2D0D80; 
	border: 0;
	clear: both;
	height : 4px; 
}
/* NOTE that the following INDENTs have a fixed right indentation */
/* Create new ones as necessary with the word "both" before the size if you want equal indents */
.indent5px  {
	margin-left: 5px;
	margin-right: 5px;
}
.indent10px {
	margin-left: 10px;
	margin-right: 5px;
}
.indent20px {
	margin-left: 20px;
	margin-right: 5px;
}
.indent40px {
	margin-left: 40px;
	margin-right: 5px;
}
.indent80px {
	margin-left: 80px;
	margin-right: 5px;
}
.indentboth100m {
	margin-left: 100px;
	margin-right: 100px;
}
.italic	{ font-style: italic }
.larger { font-size: larger }
/* The following was for td but is being converted to th, so just drop the tag */
.largereverse {
	color: #FEFEFE;
	background-color: black;
	font-size: larger;
	font-weight: bold;
	text-align: center;
}
.left { text-align: left }
.linkcolor  { color: blue } /* NOTE!  Must match a:link */
/*                    Top Rt   Bot Lft */
.marginlr5  { margin: 0    5px 0    5px }
.marginlr10 { margin: 0   10px 0   10px }
.marginlr20 { margin: 0   20px 0   20px }
/*** 
   The meaning of the following two classes will be effectively reversed (but no run-in) in mobile.css. 
   'mobileno' was changed in Aug/Sep 2020, because "run-in" was found to be rejected as "experimental" 
   and 'inline' also does not work -- so we just leave it empty  ...
   .mobileno {  }
***/
.mobileyes      { display: none }   /* do NOT display if NOT on a mobile device */
.mobileyesblock { display: none } /* alternative format */
.network-type { /* used for emphasis of type of network on TV Schedule page */
	letter-spacing: 4px;
	font-weight: bold;
	font-size: larger;
	color: #2D0D80;
}
.network-type-header {
	background-color: #FEFEFE;
	text-align: center;
}
.nobullets { list-style: none }
.nodisplay { display: none } /* suppress display of a tag's contents; see DISPLAY above for best usage */
.nomargin { padding-left: 1.2em } /* this eliminates the margin (padding) for lists */
.offscreen { /* Force some text or html function out of the visible window */
	display: block;
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.pad2px  { padding: 2px }
.pad5px  { padding: 5px }
.pad10px { padding: 10px }
/* NOTE!!! The proper use of the following class is:  <h2 class="pagetitle"> */
/* It reverses the colors for a full-width (page or column) title */
.pagetitle {
	background-color: #2D0D80;
	clear: both;
	color: #FEFEFE;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: x-large;
	font-weight: bold;
	/*       Top  Rt  Bot  Lt */
	margin:  10px 0   0    0; /* ADDED */
	padding: 10px 0   10px 0; /* ADDED */
	text-align: center;
}
/* Picture classes with 5px space on the LEFT (l) or RIGHT (r), no border */
.picture5l {
	border-width: 0;
	margin-left: 5px;
}
.picture5r {
	border-width: 0;
	margin-right: 5px;
}
.quotes { /* used when quoting a user comment on a web page */
	color: navy;
	font-family: "Lucida Calligraphy", "Segoe Script", "Freestyle Script", sans-serif; 
}
.right { text-align: right }
.searchbox { /* searchbox is used in FindAVideo */
	color: navy; 
	background-color: #F5F6F7; 
	border: 2px navy solid; /* disregard validation warning about interacting with WIDTH */
	width: auto; /* auto lets it adapt well for mobile */
}
.signature {
	color: navy;
	font-family: "Lucida Handwriting", "Segoe Script", "Freestyle Script", sans-serif; 
}
.sitepromo { 
	/* Same as ARTICLE except for Background Color, so be sure to mirror other changes */
	background-color: mintcream;
	border: medium solid black;
	clear: both;
	font-style: normal;
	font-weight: normal;
	margin: 12px 0 12px 0; /* CHANGED - should match ARTICLE*/
	overflow: auto;
	padding: 5px 10px 5px 10px;
	position: relative;
}
.smaller { font-size: smaller }
.streaminglogo {
	border-width: 0 0 0 0;
	float: right;
	margin-left: 5px;
	margin-right: 5px;
}
.strikeout { text-decoration: line-through }
.typealpha { /* used by sortadby.html and SortADListing.js */
	color: navy;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: larger;
	font-weight: bold;
	list-style-type: none;
	margin-left: 0;
	text-indent: -20px; /* NOTE that this is NEGATIVE */
}
.underline  { text-decoration: underline; }
.valignbas  { vertical-align: baseline }
.valignbot  { vertical-align: bottom }
.valignmid  { vertical-align: middle }
.valigntop  { vertical-align: top }
.vendorlogo { border-radius: 8px; }
.welcome { /* Primarily for initial Welcome title on main screen */
	color: #2D0D80; 
	font-style: italic;
	margin: 10px 0 0 0; /* ADDED */
}
.white-on-black {
	color: #FEFEFE;
	background-color: black;
}
.white-on-black-centered {
	color: #FEFEFE;
	background-color: black;
	text-align: center;
}
.yearhdr { /* Used in DVD listings as a section header */
	text-align: center; 
	color: #FEFEFE; 
	background-color: black; 
	font-weight: bold;
}

/* END CSS */