/*
 *	General Styles.  This stylesheet contains styles that are common throughout the website.
 *	Additional, page or section specific styles can be found in their respective directories.
 */

div.more_to_come,
div.wip_banner {
	border: 1px solid DarkRed;
	background-color: #ffbfbf;
	color: DarkRed;
	margin: 10px auto;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	padding: 6px;
}
div.more_to_come {
	width: 80%;
	margin: 10px auto;
}
div.wip_banner {
	width: 95%;
}

/*
 *	Reset everything to consistent, known values!
 */
* {
	padding:			0px;
	margin:				0px;
	border-style:		none;
	border-width:		0px;
	background-color:	transparent;
	vertical-align:		baseline;
	box-sizing:			border-box;
}
input {
	border-width:	2px;
	border-style:	inset;
	padding:		1px 2px;
}
sup {
	vertical-align: super;
	font-size: smaller;
}
sub {
	vertical-align: sub;
	font-size: smaller;
}


/*
 *	Default styles for basic types.
 */
html {
	background-color:	#222222;
}

body {
	width:				960px;
	margin:				0px auto;
	font-family:		"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:			10pt;
	color:				#000000;
	background-color:	#fff8f8;
	background-image:	url(site_header_gradient.png);
	background-repeat:	repeat-x;
}

/**
 *	Sections and subsections.
 *	Sections, headings, and div.subsections are almost always used together.
 */
/*	Default styling for subsections. */
div.subsection {
	margin-bottom: 1em;
	padding: 5px 1px 5px 20px;
	overflow: auto;
}

/*	Default sections.  */
article.h1,
section.h1 {
}
/* When a section is followed by another element, put a blank line between them.  This is the default, but more specific cases follow, below.  */
section.h2 + *,
section.h3 + *,
section.h4 + *,
section.h5 + *,
section.h6 + *,
section.h7 + *,
section.h8 + *,
section.h9 + *, {
	margin-top: 1em;
}

section.h2,
section.h3,
section.h4,
section.table_of_contents {
	padding: 4px 1px 1px 1px;
	margin-top: 1em;
	margin-bottom: 0px;
}

/*  A subsection heading which immediately follows it's parent's subsection heading should not have the full spacing between them.  */
div.subsection > section.h2:first-child,
div.subsection > section.h3:first-child,
div.subsection > section.h4:first-child,
div.subsection > section.h5:first-child,
div.subsection > section.h6:first-child,
div.subsection > section.h7:first-child,
div.subsection > section.h8:first-child,
div.subsection > section.h9:first-child {
	margin-top: 1em;
}


/* The subsection linked to an h1 is the main page content area. */
h1 ~ div.subsection {
	padding-right: 10px;
	padding-bottom: 10px;
}
h2 + div.subsection,
h3 + div.subsection,
h4 + div.subsection,
h5 + div.subsection,
h6 + div.subsection,
h7 + div.subsection,
h8 + div.subsection,
h9 + div.subsection {
}


/**
 *	Headings
 */
div.site_sctnhdg,
h1,
h2,
h3,
h4,
h5,
h6,
h7,
h8,
h9 {
	font-weight: bold;
	border-radius: 0px 0px 0px 3px;
	background-color: #f2c8f0;
	text-shadow: none;
	padding: 1px 5px;
	border-style: none;
	border-top: 2px solid #ff00f0;
}
div.site_sctnhdg {
	font-size: 18pt;
	text-shadow: 0px 0px 4px #ffffff;
	margin-bottom: 1em;
}
/* The h1 is reserved for the page title, and shouldn't appear anywhere else in the page. */
article.h1 > h1,
section.h1 > h1 {
	font-size: 16pt;
	min-height: 25px;
}
section.h2 > h2 {
	font-size: 14pt;
	text-shadow: 0px 0px 3px #ffffff;
	margin-bottom: 0.75em;;
}
section.h3 > h3 {
	font-size: 12pt;
	text-shadow: 0px 0px 3px #ffffff;
	margin-bottom: 0.5em;
}
section.h4 > h4 {
	font-size: 11pt;
	text-shadow: 0px 0px 3px #ffffff;
	margin-bottom: 0.5em;
}
section.h5 > h5,
section.h6 > h6,
section.h7 > h7,
section.h8 > h8,
section.h9 > h9 {
	font-size: 10pt;
	margin-bottom: 0.5em;
}

/* A heading that follows a paragraph. */
p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
p + h7,
p + h8,
p + h9 {
	margin-top: 1em;
}
/*	h5 and higher don't have a bottom margin, so when an h6 or higher immediately follows a heading one level lower or a p, there should be a space between them. */
h5 + h6,
h5 + div.subsection > h6,
p + h6,
h6 + h7,
h6 + div.subsection > h7,
p + h7,
h7 + h8,
h7 + div.subsection > h8,
p + h8,
h8 + h9,
h8 + div.subsection > h9,
p + h9 {
	margin-top: 10px;
}

/*
 *	End Sections and headings.
 **/

/*  When a paragraph follows certain element types, put a blank line before it.  */
p + p,
section + p {
	margin-top: 1em;  /* Put a blank line between two contiguous paragraphs. */
}

.float_right + p,
.float_left + p {
	margin-top:0px;
}

/**
 *	Default list styles.
 **/
ul {
	list-style:	disc outside;
	margin-left: 20px;
	margin-bottom: 6px;
}
ol {
	list-style:	decimal outside;
	margin-left: 20px;
	margin-bottom: 6px;
}
li {
	padding-bottom: 4px;
}


hr {
	border-style: inset;
	border-width: 1px;
	width: 100%
}


blockquote {
	margin: 0px 10px 10px 20px;
	padding: 10px;
	border-left-style: solid;
	border-width: 2px;
	border-color:  #000088;
	background-color: rgba(192,192,192,0.5);
	box-shadow: 8px 8px 3px #aaaaaa;
}
blockquote > div.quote {  }
blockquote > div.source {
	font-style: italic;
	border-top-style: dotted;
	border-top-color: gray;
	border-top-width: 1px;
	text-align: right;
	background-color: rgba(255,255,255,0.5);
}

em {
	font-style: italic;
	text-decoration: underline;
}
em.critical {
	text-decoration: underline red solid 1px;
}
pre {
	font-family: courier new, courier;
}

code {
	font-family: "Consolas", "Liberation Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	font-size: 9pt;
	background-color: White;
}

/**
 *	Special anchor/link types.
 */
a,
a:visited {
	text-decoration: none;
	color: #00075f;
	font-weight: bold;
}
a:hover {
	text-decoration: underline;
}
a.pdf::after {
	content: url("/media/logos/adobe/pdf-12.png");
	padding-left: 2px;
	vertical-align: bottom;
}
a.audio::after {
	content: url("/media/logos/audio-12.png");
	padding-left: 2px;
	vertical-align: bottom;
}
a.video::after {
	content: url("/media/logos/video-12.png");
	padding-left: 2px;
	vertical-align: bottom;
}
a.image::after {
	content: url("/media/logos/image-12.png");
	padding-left: 2px;
	vertical-align: bottom;
}

/*  Used to render a small, superscript number to refer to a footnote.  */
a.footnote {
	vertical-align: super;
	font-size: 8pt;
}
/*	Used to display a footnote in a document. */
aside.footnote {
	background-color: rgba(128,128,128,0.1);
	margin-left: 20px;
	margin-right: 20px;
	font-size: 9pt;
	padding: 4px;
}
aside.footnote > span.number {
	vertical-align: super;
	font-size: 8pt;
	padding-right: 4px;
}

cite.srcref {
	background-color: rgba(0,0,0,0.1);
}
cite.srcref::before,
cite.srcref::after {
	font-style: normal;
	background-color: transparent;
}
cite.srcref::before { content: "("; }
cite.srcref::after { content: ")"; }

form {
	margin-bottom: 10px;
}

/* @TODO: Is this being used?  The default audio element should be 100% of it's container. */
audio {
	width: 400px;
}




/*
 *	Site-wide page layout styles.
 */
div#site_header {
	display: block;
	clear: both;
	position: relative;
	margin-bottom: 20px;
}
div#site_footer {
	clear: both;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #18324b;
	padding: 10px;
	font-size: 8pt;
	overflow: auto;
}

/*	The page body is a grid containing two columns: the sidebar and the page content.
 *	By default, the sidebar is expanded, but some pages (e.g. certain external documents) will require it to 
 *	be collapsed, so they can fit on the page.  */
div#page_body {
	display: grid;
	grid-template-columns: 290px auto;
	grid-template-rows: auto auto;
	padding: 10px 10px;
	margin-bottom: 10px;
	overflow: auto;
}
div#page_body.sidebar_expanded { grid-template-columns: 300px auto; }
div#page_body.sidebar_collapsed { grid-template-columns: 54px auto; }

div#page_body > h1,
div#page_body > div.site_sctnhdg {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}

div#site_sidebar {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	padding-right: 10px;
	border-right: 1px solid #888888;
}
main.page_content {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	padding-left: 10px;
}
/**
 *	Styling specific to the site home page.
 */
body.home_page {  }
body.home_page  div#page_body {
	/*	There is no section heading on the home page. */
	grid-template-rows: 0px auto;
}



/*
 *	General, site-wide styles.
 */


/**
 *	Text "pull quote" boxes, used to highlight text captions in long documents.
 */
aside.pull_quote,
aside.pull_quote_small {
	display: inline-block;
	border: 1px solid #000088;
	border-radius: 5px;
	box-shadow: 6px 6px 3px rgba(0,0,0,0.5);
	background-color: #eeeeee;
	padding: 5px 7px;
	margin-bottom: 10px;
	font-style: italic;
	font-weight: bold;
	font-family: Times, Serif;
	font-size: 150%;
	/* Use this as the default width.  It can be overridden inline. */
	width: 200px;
}
aside.pull_quote_small {
	font-size: 125%;
}
/*	If a pull_quote is between two paragraphs then insert the blank line between the paragraphs. */
p + aside.pull_quote + p,
p + aside.pull_quote_small + p,
p + aside.pull_quote,
p + aside.pull_quote_small {
	margin-top: 1em;
}

div.right,
aside.right {
	float: right;
	margin-right: 0px;
	margin-left: 20px;
}
div.left,
aside.left {
	float: left;
	margin-left: 0px;
	margin-right: 20px;
}

/*
 *	Home page styles.
 *	@TODO: This must be moved to a separate styles.css file in the home page directory because it is specific to that page.
 */
img#homepage_photo {
	margin-right: 20px;
	float: right;
	clear: left;
	margin-left: 10px;
}


/*
 *	General styles.
 */
img.float_right {
	margin: 0px 0px 5px 20px;
	float: right;
}

img.float_left {
	margin: 0px 20px 5px 0px;
	float: left;
}

img#site_header_name {
	float: left;
}
img#site_header_headshot {
	float: right;
}



/*
 *	Social media links bar.
 */
div#socialmedia_blk {
	height: 100px;
}
div#socialmedia_links {
	position: relative;
	top: 6px;
	right: 10px;
	display: block;
	padding: 2px;
}

div.socialmedia_link_group {
	display: block;
	vertical-align: middle;
	text-align: right;
}

div.socialmedia_link {
	position: relative;
	display: inline-block;
	height: 25px;
	vertical-align: middle;
	text-align: right;
	margin-left: 1px;
	margin-right: 1px;
}



/**
 *	Styling to be used within "articles".  This includes articles within the blogs section.
 */

article {  }

/*	This container should be explicitly set to the width of the image, so that the caption
	text does not force it to be wider. */
div.captioned_image {
	font-size: 9pt;
	font-style: italic;
	margin: 0px 0px 10px 0px;
	background-color: rgba(0,0,0,0.1);
}
div.captioned_image.left { margin-right: 20px; }
div.captioned_image.right { margin-left: 20px; }
div.captioned_image  img { display: block; width: 100%; }
p + div.captioned_image.left + p,
p + div.captioned_image.right + p,
p + div.captioned_image.left,
p + div.captioned_image.right {
	margin-top: 1em;
}
/* When a paragraph is followed by or preceded by a floating element, put a space between them */
p + .float_left,
p + .float_right,
.float_left + p,
.float_right + p {
	margin-top: 1em;
}


/* General container for associating a text caption with a given embedded media. */
div.captioned_media {
	font-size: 9pt;
	font-style: italic;
	margin: 0px;
	padding: 5px 5px 10px 5px;
	background-color: #eeeeee;
}
p + div.captioned_media {
	margin-top: 0.75em;
}
div.captioned_media audio,
div.captioned_media video {
	display: block;
}
div.captioned_media audio {
	width: 100%;
}
/*	Used to show that the given element, e.g. the social media link, is disabled. */
img.disabled {
	opacity: 0.35;
}


/**
 *	Table of Contents syles.
 **/
section.table_of_contents  {  }
section.table_of_contents  ol.toc {
	list-style-type: none;
	margin: 0px 0px 1em 0px;
	padding: 0px;
}
section.table_of_contents  ol.toc > li {
	padding-bottom: 0px;
}
section.table_of_contents  ol.toc > li + li {
	margin-top: 0.25em;
}

/* Nested table of contents lists should be indented, and should not have space at the bottom. */
section.table_of_contents  ol.toc > li  ol.toc {
	margin: 0px;
	padding-left: 25px;
}



/*
 *	Party List styles - This is a list of parties/people, in which each item has it's own image/picture/photo.
 */
ul.party_list {
	padding: 0px;
	margin: 0px;
}

ul.party_list > li {
	overflow: auto;
	margin-bottom: 10px;
}
ul.party_list > li  section.h3 {
	margin-bottom: 1em;
}
ul.party_list > li  h3 ~ div.subsection {
	padding-left: 0px;
	padding-top: 0px;
	display: grid;
	grid-template-columns: 160px auto;
	grid-template-rows: auto;
}
ul.party_list > li  h3 ~ div.subsection > div.headshot {  }
ul.party_list > li  h3 ~ div.subsection > div.details {
	padding: 4px 4px 4px 6px;
}

ul.party_list > li  img.party_list {
	float: left;
	clear: both;
	margin-right: 6px;
	margin-top: 2px;
	width: 160px;
}

ul.party_list > li  div.social_media_links {
	display: inline-block;
	vertical-align: top;
}
ul.party_list > li  div.party_summary {
	display: inline-block;
	margin-bottom: 10px;
}
ul.party_list > h3 {
	font-size: 14pt;
	margin-top: 0px;
	margin-bottom: 5px;
	text-shadow: none;
}
ul.party_list > li  h4 {
	background-color: transparent;
	text-shadow: none;
	border-style: none;
}
ul.party_list > li  h4 + div.subsection {
	border-style: none;
}
ul.party_list > li  div.more_info {
	text-align: center;
}


/*
 *  A generic two column/div layout, where the left column/div contains a label, number, bullet, 
 *  et cetera, and the right column/div contains the content associated with that marker.
 *	This is essentially similar to the HTML list, except that it's more flexible and each item/block 
 *	is an independent unit.
 *
 *  For example, in transcripts, the left column/div contains the name of the speaker and the right
 *  column/div contains the speaker's statements; for numbered paragraphs, the left contains the 
 *  paragraph number and the right contains the paragraph conent.
 *
 *  This is more flexible than using the HTML 'p' element because the 'p' element doesn't allow 
 *  things like nested lists, blockquotes, et cetera.
 *
 *  This can be used for any scheme where you want a number or bullet or anything at all in a 
 *  column (or space) on the left and the corresponding text (or content) on the right.
 *
 *	The name 'label_blk' stands for 'labeled block'.
 */
div.label_blk {
	display: grid;
	grid-template-columns: 3em auto;
	width: 100%;
	margin-bottom: 1em;
}
div.label_blk > div.label {
	vertical-align: top;
	padding-right: 1em;
}
div.label_blk > div.content {  }
div.label_blk > div.content > p {
	margin: 0px;
	padding: 0px;
}
div.label_blk > div.content > p + p { /* Put a space between two paragraphs */
	margin-top: 1em;
}


/**
 *	Utility bar for external documents.
 */
div.extdoc_toolbar {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto;
	position: sticky;
	top: 0px;
	background-color: rgba(0,0,0,0.1);
	padding: 2px 6px;
}

div.extdoc_toolbar  div.annotations {  }
div.extdoc_toolbar  div.toggle_cmnts {  }
div.extdoc_toolbar  div.toggle_hlts {  }

/*	For the PDF source document link in the top right of pages that were generated from a PDF file. 
 *	This div should be on the line immediately following the h2 header / div.subsection (before the div.document).
 */
div.extdoc_toolbar  div.srcpdf {
	text-align: right;
	font-size: 12pt;
}





/*
 *	For caption boxes, the width should be specified in the html "style" attribute.
 */
div.caption_box {
	float: right;
	padding-left: 5px;
	padding-right: 5px;
}

dt {
	font-weight: bold;
}
dd {
	padding-left: 25px;
}

caption {
	font-weight: bold;
}


/**
 *	Used in place of a standard HTML <p> element, because the <p> element doesn't allow nested block 
 *	elements.  Sometimes we need to embed an <aside> element within a paragraph, for the embedded 
 *	commentary.
 */
div.prgph {  }
div.prgph + p,
p + div.prgph {
	margin-top: 1em;
}
div.prgph + div.prgph { margin-top: 1em; }

/*	Redacted text or blocks */
span.redacted,
div.redacted {
	background-color: LightGray;
	padding: 0px 2px;
}
span.redacted::before {
	content: "{redacted}";
	font-size: 7pt;
	color: DarkSlateGray;
	font-style: italic;
	vertical-align: top;
	padding-right: 2px;
}


/**
 *	Collapsible media div.  Used to show a thin horizontal bar, embedded amongst text content, which can be 
 *	expanded to (for example) an embedded video.
 *
 *	This is typically used to embed video clips inline within a transcript (e.g. in the police interview 
 *	transcripts), however it could be used anywhere that we want to embed media without cluttering up the 
 *	flow of the text too much.
 */
div.collapsible_media {
	padding: 2px 10px;
	margin: 6px 0px;
	background-color: whitesmoke;
	border: 1px gray solid;
	border-radius: 6px;
	box-shadow: 3px 3px 3px 0px;
}
div.collapsible_media video,
div.collapsible_media audio {
	width: 100%;
	border-top: 1px gray dotted;
	padding: 4px 0px;
}
/*	When collapsed */
div.collapsible_media.collapsed { 
}
div.collapsible_media.collapsed video,
div.collapsible_media.collapsed audio,
div.collapsible_media.collapsed > div.commentary,
div.collapsible_media.collapsed blockquote { 
	display: none;
}
/*	When expanded */
div.collapsible_media.expanded {  }
div.collapsible_media.expanded video,
div.collapsible_media.expanded audio { 
	display: initial;
}
div.collapsible_media  div.caption_bar {
	display: grid;
	grid-template-columns: 80px auto 30px;
	cursor: pointer;
}
div.collapsible_media  div.caption_bar:hover {
}
div.collapsible_media  div.caption_bar  div.label {
}
div.collapsible_media  div.caption_bar  div.caption {
	font-weight: bold;
	color: #001188;
}
div.collapsible_media  div.caption_bar  div.button {
	text-align: right;
	vertical-align: top;
}
div.collapsible_media.expanded > div.commentary  {
	display: block;
	padding-left: 20px;
	padding-bottom: 4px;
	margin-bottom: 2px;
	font-size: 9pt;
	border-bottom: 1px gray dotted;
}


/**
 *	Common styling for the synopsis box that appears at the top of many pages.  There may be additional
 *	more specific synopsis box styles, for example containing styles specific to case information.
 */
section#synopsis {
	border: 1px solid #1b3d54;
	border-radius: 5px;
	padding: 4px 8px;
	margin: 0px 0px 20px 0px;
}
section#synopsis > h2,
section#synopsis  h3,
section#synopsis  h4,
section#synopsis  h5,
section#synopsis  h6,
section#synopsis  h7,
section#synopsis  h8,
section#synopsis  h9 {
	background-color: transparent;
	border: none;
	border-radius: 0px;
	border-bottom: 1px solid Black;
	text-shadow: none;
	text-decoration: none;
	color: Black;
	padding: 2px 0px;
	margin: 2px 0px;
	box-shadow: none;
}
section#synopsis  section.h2 {
	padding: 2px 0px;
}
section#synopsis  section.h3,
section#synopsis  section.h4,
section#synopsis  section.h5,
section#synopsis  section.h6,
section#synopsis  section.h7,
section#synopsis  section.h8,
section#synopsis  section.h9 {
	background-color: transparent;
	box-shadow: none;
}
section#synopsis  div.subsection {
	border-style: none;
	margin-bottom: 0px;
}
section#synopsis > h2 + div.subsection {
	margin-bottom: 0px;
}
section#synopsis  h3 {
	margin-top: 1em;
	font-size: 11pt;
}


/*	Critical! - Keep this at the end so it overrides everything. */
@media print {
	* { background-color: white; }
	html { display: none; }
	body { display: none; }
}