/* CSS layout for The Audio Description Projection (ADP) at www.acb.org/adp */
/* by webmaster Fred Brack, fbrack@acb.org, created April 2010 */
/* updated 5-1-19 for pgmtitle font */
/* updated 6-9-19 for img center    */
/* Basic colors codes (not all used):  
	#CCFFFF - Pale White Cyan (cyan/aqua is 00FFFF) 
	#CCFFCC - Pale White Green
	#EEEEEE - Pale silver (new 2017, used for nav and footer)
	#F8FFD6 - pale yellow (CURRENT ARTICLE BACKGROUND CHOICE)
	#FFFFCC - pale yellow, more yellow than above
	#FFF8DC - cornsilk, flatter than pale yellow 
	#FFCC99 - pale orange
	#F5F5F5 - Whitesmoke (4th lightest color behind white)
NEW COLORS FOR ACB JUNE 2018 FOLLOW ...
	PURPLE = #2D0D80 <== Replacement for ADP Navy - DONE
	BLUE = #9BEFF9 (HOVER = #02E3FD)
	GREEN = #C8F965 (HOVER = #A4F800)
	OFF-WHITE = #F5F6F7 <== Replacement for ADP Pale Yellow? - NOT DONE YET
	NEAR BLACK BODY TEXT AND H3 & H4 HEADERS = #333333
	BLACK FOR H1 HEADERS = #000000
	GREY1 (PROPOSED BORDER COLOR ON ACB RADIO PAGE) = #C4C6C8
	GREY2 (PROPOSED BACKGROUND COLOR ON ACB RADIO PAGE) = #DEDEE3
	BLUE HOVER LINK COLOR FOR TEXT = #0000EE
*/
/* 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 */
/* NOTICE:   This CSS overrides table cells (<td>) to provide a thin black border */

/* CSS Selectors Examples (see www.w3schools.com/cssref/css_selectors.asp):
	#name			id="name"
	.name			class="name"
	element			p, li, etc.
	element1 element2	all element2 within element 1; div p
	::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
*/

body { /* this is the default setup for the entire page */
	/*      Top Rt  Bot Lt */
	margin: 1px 4px 1px 4px;
	padding: 0;
	position: relative;
	color: black;
	background-color: white;
	font-size: medium; /* try not to specify this anyplace else ... */
}

/*----- ID SELECTORS (begin with pound signs, do not start with a number, called via ID= ) -----*/
/* DO NOT create an ID named TOP, as it is used in in ADPBASE.DWT */
/**********  MASTHEAD  **********/
#masthead { }
/* Ideally the WIDTH of the LEFT and RIGHT LOGO sections should be the same, so the site title gets centered */
/* The MIN-HEIGHT of each section is set to force proper background color extension to the bottom */
/* The MARGIN pushes the image away from the top border */
#logoleft {
	float: left;
	min-height: 107px;
	text-align: left;
	margin-top: 2px; 
}
#logoright {
	float: right;
	min-height: 107px;
	text-align: right;
	margin-top: 2px;
}
#header { /* MARGINS and MIN-HEIGHT = Logo width and min-height */
	margin-left: 105px;
	margin-right: 105px;
	min-height: 107px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	text-align: center;
}
/**********  NAVIGATION  **********/
#navigation {
	clear: both;
}
/* other navigation details are handled with class selectors below */
/**********  BODY  **********/
#pagebody {
	clear: both;
	min-width: 0;
	font-family: Arial, Helvetica, sans-serif;
}
/* These are used on main page; top and bottom definitions are the same */
/* (but could be different ...) */
#top_section {
	min-width: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	clear: both;
	position: relative;
}
#bottom_section {
	min-width: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	clear: both;
	position: relative;
}
/**********  FOOTER  **********/
#footer {
	min-width: 0;
	margin-left: 2px;
	margin-right: 2px;
	clear: both;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: medium;
	font-style: normal;
	border-top: 2px solid #2D0D80;
	border-bottom: 2px solid #2D0D80;
	color: black;
	background-color: #EEEEEE;
	text-align: center;
	min-height: 33px; /* must clear image which is 31h */
}
#footerleft {
	font-family: Arial, Helvetica, sans-serif; /* a bit smaller than Verdana */
	float: left;
}
#footercenter {
	font-size: small;
	font-style: normal;
}
#footerright {
	float: right;
}

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

/* This first group is for alphabetical listings of show titles */
/* First two used in the top of LISTINGS of described videos */
.listingdesc {
	border-width: 0 0 0 0;
	vertical-align: top;
	padding: 5px;
}
.listinglogo {
	background-color: aqua;
	padding: 5px;
	border-width: 0 0 0 0;
	vertical-align: middle;
	text-align: center;
}
.listings {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: bold;
}
.pgmtitle { /* each title entry */
	font-family: "Lucida Console";
	font-weight: normal;
	margin-left: 10px;
}
.newtitle { /* based on pgmtitle above, but used in RECENT ADDITIONS ... */
	color: maroon;
	font-family: "Lucida Console";
	font-weight: normal;
	margin-left: 10px;
}
.letter { /* how each alpha index letter is shown */
	font-size: xx-large;
	font-weight: bold;
	color: navy;
	border-width: 0 0 0 0;
	margin:       0 0 0 0;
	padding:      0 0 0 0;
}
.index { /* how the word 'Index' is shown */
	font-size: medium;
	font-weight: normal;
}
.gothicbold { /* used for special text after titles */
	color: maroon;
	font-weight: bold;
	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.imagemargin { /* for any images next to text */
	margin-left: 3px;
	margin-right: 3px;
}
.borderwidth { /* border for logo */
	border-width: 3px;
	border-color: #2D0D80; 
	border-style: solid;
}
/* END list of alphabetical show title listings */

/* 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 }
.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 }
/*----- COLORS -----*/
.aqua       { color: aqua } /* font colors */
.black      { color: black }
.blue       { color: blue }
.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 }
.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 ... */
.artalt { color: maroon } /* emphasis color for use in articles */
.article, article {
	/* The body of text in an article; title is done via ARTTITLE. */
	/* Match any changes here to SITEPROMO below */
	/*      Top Rt  Bot Lt */
 	margin: 5px 2px 5px 2px;
	font-family: Arial, Helvetica, sans-serif; 
	font-weight: normal;
	font-style: normal;
	color: black;
	background-color: #F8FFD6;
	border: thin solid black;
	padding: 5px;
	position: relative;
	overflow: auto;
	clear: both;
}
.arttitle {
	font-family: Verdana, Geneva, Tahoma, sans-serif; 
	font-weight: bold;
	font-style: normal;
	text-align: center;
	color: #2D0D80; /* added 8-14-18 */
}
.black-on-white {
	color: black;
	background-color: white;
}
.black-on-white-centered {
	color: black;
	background-color: white;
	text-align: center;
}
.bold       { font-weight: bold }
.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 */
.dvdcover {
	margin-left: 9px;
	margin-right: 7px;
	border-width: 0px;
	float: left;
}
.floatleft  { float: left }
.floatright { float: right }
.hrmedium { /* primarily used at bottom of index page */
	color: #2D0D80; 
	background-color: #2D0D80; 
	height : 4px; 
	clear: both;
}
.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;
}
.italic	 	{ font-style: italic }
.larger     { font-size: larger }
.left       { text-align: left }
/* left and right columns are the same except for position and widths (can't equal 100%) and clear */
.leftcol {
	padding: 2px;
	float: left;
	width: 50%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	text-align: left;
	color: black;
	position: relative;
	clear: both;
}
.rightcol {
	padding: 2px;
	float: right;
	width: 49%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	text-align: left;
	color: black;
	position: relative;
	/* do NOT add CLEAR here!!! */
}
.linkcolor  { color: blue } /* NOTE!  Must match a:link below */
/*                    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 reversed in mobile.css */
.mobileno   { display: run-in } /* display unless on a mobile device; INLINE does NOT work here... */
.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: white;
	text-align: center;
}
.nobullets { list-style: none }
.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 }
.pagetitle {
	/* NOTE!!! The proper use of this class is:  <h2 class="pagetitle"> */
	/* Reverse the colors for a full-width (page or column) title */
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: large;
	font-weight: bold;
	text-align: center;
	clear: both;
	color: white;
	background-color: #2D0D80;
	margin-top: 2px; 
	margin-bottom: 0; 
}
/* 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 */
	font-family: "Lucida Calligraphy"; 
	color: navy;
}
.right { text-align: right }
.sitepromo { 
	/* Same as ARTICLE except for Background Color, so be sure to mirror other changes */
	/*      Top Rt  Bot Lt */
	margin: 7px 5px 7px 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: black;
	background-color: #FFCC99;
	border: thin solid black;
	padding: 5px;
	position: relative;
	overflow: auto;
	clear: both;
}
.sitetitle { /* title in masthead on desktop devices */
	font-size: x-large;
	font-weight: bold;
	color: #2D0D80;
}
.smaller { font-size: smaller }
.streaminglogo {
	border-width: 0 0 0 0;
	margin-left: 5px;
	margin-right: 5px;
	float: right;
}
.strikeout { text-decoration: line-through }
.valignbas { vertical-align: baseline }
.valignbot { vertical-align: bottom }
.valignmid { vertical-align: middle }
.valigntop { vertical-align: top }
.welcome { /* Primarily for initial Welcome title on main screen */
	color: #2D0D80; 
	font-style: italic
}
.white-on-black {
	color: white;
	background-color: black;
}
.white-on-black-centered {
	color: white;
	background-color: black;
	text-align: center;
}
.width50pc  { width: 50% }
.width80pc  { width: 80% }
.width100pc { width: 100% }
.width25    { width: 25% } /* table widths */
.width33    { width: 33% }
.width50    { width: 50% }
.width75    { width: 75% }
.width80    { width: 80% }
.width90    { width: 90% }
.width100   { width: 100% }
.widthauto  { width: auto }
.yearhdr { /* Used in DVD listings as a section header */
	text-align: center; 
	color: white; 
	background-color: black; 
	font-weight: bold;
}
/*----- ELEMENT and QUALIFIED ELEMENT SELECTORS -----*/
a:link {
	color: blue;
	text-align: center;
	text-decoration: none; /* added 2-2-18 */
}
a:visited { color: blue }
a:hover {
	color: white;
	background-color: blue;
}
a.nav { text-decoration: none }
/* The "reverse" links are for when the foreground and background are switched */
a.reverse:link    { color: white }
a.reverse:visited { color: white }
a.reverse:hover {
	color: blue;
	background-color: white;
}
figure { margin: 20px 2px }
td > a:hover {
	color: white;
	background-color: #2D0D80;
}
h1 { text-align: center }
/* In the following, this is the original:  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); */
hr.gradient { /* used on TV Schedule page, but could be used elsewhere */
	border: 0; 
	height: 3px; 
	background: linear-gradient(90deg, #F8FFD6, #2D0D80, #F8FFD6); 
}
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
table.center { /* note the use of text-align... */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
table.dvdyear {	/* center standard whitebg */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	border: 2px solid navy;
	background-color: white;
	border-collapse: collapse;
}
table.nav { /* border-collapse eliminates the cell separators AND makes the borders thinner */
	border: 1px solid #2D0D80;
	width: 100%;
	background-color: #2D0D80;
}
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.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 {
	text-align: center;
	font-weight:bold;
	color: white;
	background-color: black;
}
td.largereverse {
	color: white;
	background-color: black;
	text-align: center;
	font-size: larger;
	font-weight: bold;
}
td.nav { 
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: normal;
	font-style: normal;
	background-color: #EEEEEE;
	text-align: center;
}
td.noborder {
	border-width: 0 0 0 0;
	border-style: none;
}
td.year { /* used in DVDs listing */
	color:white;
	background-color:black; 
	font-size:larger;
	font-weight:bold;
	text-align: center; 
	height: 30px;
}

/* Left-justify lists for mobile, not used for desktop */
ul.justifym {
}

/* definition of CLEARFIX removed June 2018 because not used */

/* END CSS */