/* CSS layout for The Audio Description Projection (ADP) at www.acb.org/adp */
/* by webmaster Fred Brack, fbrack@acb.org, created April 2010 */
/* Basic colors codes (not all used):  
	#CCFFFF - Pale White Cyan (cyan/aqua is 00FFFF) 
	#CCFFCC - Pale White Green
	#F8FFD6 - pale yellow (CURRENT 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)
*/
/* 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 */
body {
	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=) -----*/
/**********  MASTHEAD  **********/
#masthead {
	/* padding-top leaves space above header borders, and margin-top does nothing */
	border-top: medium solid navy;
	min-width: 800px;
	background-color: #F8FFD6;
}
/* The WIDTH of the LEFT and RIGHT LOGO sections should be the same, so the site title gets centered */
/* The HEIGHT of each section is set to force proper background color extension to the bottom */
#logoleft {
	float: left;
	width: 105px;
	height: 107px;
	text-align: left;
	margin-top: 2px; /* the margin pushes the image away from the top border */
}
#logoright {
	float: right;
	width: 105px;
	height: 107px;
	text-align: right;
	margin-top: 2px;
}
#header {
	margin-left: 105px;
	margin-right: 105px;
	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: 800px;
	font-family: Arial, Helvetica, sans-serif;
}
/* left and right main columns are the same except for position and width (can't equal 100%) */
#left_col {
	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;
}
#right_col {
	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;
}
/* these are the TOP left and right columns, new November 2013 (width can't equal 100%) */
#top_left_col {
	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;
}
#top_right_col {
	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;
}
/* top and bottom sections are the same */
#top_section {
	min-width: 800px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	clear: both;
	position: relative;
}
#bottom_section {
	min-width: 800px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	clear: both;
	position: relative;
}
/**********  FOOTER  **********/
#footer {
	min-width: 800px;
	clear: both;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: small;
	font-style: normal;
	border-top: 2px solid navy;
	border-bottom: 2px solid navy;
	color: black;
	background-color: #F8FFD6;
	text-align: center;
	line-height: 33px; /* must clear images */
}
#footerleft {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: normal;
	color: black;
	float: left;
}
#footerright {
	float: right;
}
/*----- CLASS SELECTORS (begin with periods, call with CLASS=) -----*/
.artalt {
	color: maroon; /* emphasis color for use in articles */
}
.article {
	/* The body of text in an article; title is done via ARTTITLE. */
	/* Match any changes here to SITEPROMO below */
	margin: 7px 5px 7px 5px;
	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;
}
.black-on-white {
	color: black;
	background-color: white;
}
.black-on-white-centered {
	color: black;
	background-color: white;
	text-align: center;
}
.border0 {
	border-width: 0 0 0 0;
}
.center {
	text-align: center;
}
.center table {
	margin-left: auto;
	margin-right: auto;
	text-align: right;
}
.colorgray {
	/* used as lighter-than-black color for outdated text; e.g., old postings in history */
	color: gray;
}
.colorlight {
	/* used as lighter color for main text; e.g., DVDs other than current year */
	color: teal;
}
.indent5px {
	margin-left: 5px;
	margin-right: 5px;
}
.indent10px {
	margin-left: 10px;
	margin-right: 10px;
}
.indent40px {
	margin-left: 40px;
}
.indent80px {
	margin-left: 80px;
}
.larger {
	font-size: larger;
}
.left {
	text-align: left;
}
.linkcolor {
	/* must match a:link below */
	color: blue;
}
.network {
	/* used to emphasize network name in the TV network listing - NO LONGER USED as of Jan 2016 */
	font-size: larger;
	font-weight:bold;
}
.offscreen {
	/* Force some text or html function out of the visible window */
	display: block;
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.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: navy;
	margin-top: 5px;
}
/* Picture classes with 5px space on the LEFT (l) or RIGHT (r), no border */
.picture5l {
	border-width: 0px;
	margin-left: 5px;
}
.picture5r {
	border-width: 0px;
	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 */
	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 {
	font-size: x-large;
	color: navy;
}
.smaller {
	font-size: smaller;
}
.strikeout {
	text-decoration: line-through;
}
.welcome {
	/* Primarily for initial Welcome title on main screen */
	color: navy; 
	font-style: italic
}
.white-on-black {
	color: white;
	background-color: black;
}
.white-on-black-centered {
	color: white;
	background-color: black;
	text-align: center;
}
.network-type {
    /* used for emphasis of type of network on TV page */
	letter-spacing: 4px;
	font-weight: bold;
	font-size: larger;
	color: navy;
}
.network-type-header {
	background-color: white;
	text-align: center;
}
.yearhdr {
	/* Used in DVD listings as a section header */
	text-align: center; color: white; background-color: black; font-weight: bold;
}
/*----- TAG-BASED SELECTORS -----*/
a:link {
	color: blue;
	text-align: center;
}
a:visited {
	color: blue;
}
a:hover {
	color: white;
	background-color: blue;
}
a.nav {
	text-decoration: none;
}
a.reverse:link { /* The "reverse" links are for when the foreground and background are switched */
	color: white;
}
a.reverse:visited {
	color: white;
}
a.reverse:hover {
	color: blue;
	background-color: white;
}
h1 {
	text-align: center;
}
hr.gradient { 
	border: 0; 
	height: 1px; 
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 
}
table.nav { /* border-collapse eliminates the cell separators AND makes the borders thinner */
	border: 1px solid navy;
	width: 100%;
	background-color: navy;
}
table.standard {
	border: 2px solid #000080;
	border-collapse: collapse;
}
table.center { /* note the use of text-align... */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
table.podcast {
	border-style: solid;
	border-width: 3px;
	background-color: #00FFFF;
}
td.nav {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: normal;
	font-style: normal;
	background-color: #F8FFD6;
	text-align: center;
}
td.largereverse {
	color: white;
	background-color: black;
	text-align: center;
	font-size: larger;
	font-weight: bold;
}
/* it is not at all clear that the following works as expected ... */
table.noborder {
	border: 0 navy none;
	border-collapse: collapse;
}
td {
	border: 1px solid navy;
}
td.noborder {
	border: 0px;
}
td.year {
	color:white;
	background-color:black; 
	font-size:larger;
	font-weight:bold;
	text-align: center; 
	height: 30px;
}

/*********** CSS UNDER TEST ***********/
#navbar {
	position: relative;
	width: 100%;
	padding: 0;
	text-align: center;
	margin: 0px auto;
	list-style: none;
}
/* These navigation definitions allow an unordered list to be rendered in table cell format */
#navbar li {
	display: inline; /*fixes the IE6 double margin bug/rendering problems*/;
	float: left; /*by declaring a float after display:inline, you reset the element to block status in all browsers except IE6*/;
	position: relative;
	margin: 0;
	padding: 0;
	width: 14.28%; /* the intent is each of the 7 items takes up 1/7 of the space, but space is left over */
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: normal;
	font-style: normal;
}
#navbar a {
	display: block;
	background: #f8ffd6;
	border: 2px solid navy; /* this sets the thickness of the element borders */
	word-wrap: break-word; /* allows text to break anywhere */
	padding: 2px;
	min-height: 2.6em; /* forces line height of 2 lines of text, so all boxes will be the same height */
}
#navbar a:hover, #navigation a:focus {
	background: navy;
	color: #fff;
	padding: 4px; /* extra pixels allows for removal of border on hover */
	border: none;
	outline: none;
	text-decoration: none;
}
#navbar a:active {
	position: relative;
	top: 2px; /* causes "button" to appear as if it is pressed, but moving it down slighly */
	outline: none;
	border: none;
}
/* The following should not be needed if overflow:auto is used in a DIV */
.clearfix:after {
	content: ".";
	display: block;
	height: 0px;
	font-size: 0px;
	clear: both;
	visibility: hidden;
	overflow: hidden;
}

/* END CSS */