/*=============================================================================
  File:         bluephrase.com/css/sections.css
  Language:     CSS
  Copyright:    Read Write Tools © 2019
  License:      CC-BY-NC-ND 4.0
  Initial date: Sep 13, 2019
  Contents:     #story, #objectives, #review, #examples
=============================================================================*/

#story h2 {
	padding-top: 0.5rem;
	padding-bottom: 1rem;
	border-top: 3px solid var(--form-gray);
}
#story {
	max-width: var(--columns-width);
	box-sizing: border-box;
    padding-bottom: 7rem;
    padding-left: 1rem;
    padding-right: 1rem;
	background-color: var(--black);
	min-height: 100%;
}
a {
	color: var(--js-blue);
}
a:visited {
	color: var(--js-blue);
}
a:visited:hover,
a:hover {
	color: var(--yellow);
}
#story p {
	max-width: var(--column-max-width);
}
#story small {
	display: block;
	max-width: var(--column-max-width);
}

/* ----- image spotlight ----- */
img.spotlight {
	float: right;
	margin-top: -4rem;
	margin-right: 1rem;
	width: var(--spotlight-size);
	height: var(--spotlight-size);
	padding: 3px;
	background-color: var(--nav-black);
	border: 2px dotted var(--pure-white);
	border-radius: 50%;
	box-shadow: 5px 5px 8px var(--pure-black);
}

/* ----- objectives ----- */
section#objectives p,
section#review p,
section#review ol,
section#review ul {
	padding: 0 5%;
}
section#objectives p.title,
section#review p.title {
	text-align: center;
	margin: 0;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
}
section#objectives,
section#review {
	background-color: var(--medium-black);
	border-top: 1px solid var(--pure-black);
	border-bottom: 1px solid var(--pure-black);
	padding: 1rem 0;
	box-shadow: 5px 5px 8px var(--pure-black);
}
section#objectives,
section#review {
	max-width: var(--column-max-width);
	margin: 0 auto 4rem auto;
}

/* --- properties --- */
.attr,
.sourceref,
.values {
	font-family: 'Source Code Pro', monospace;
	font-size: 0.9em;
}
.attr,
.sourceref {
	color: var(--pure-white);
	padding: 0 1em;
}
.attr::before {
	content: '*';
}
.sourceref::before,
.sourceref::after {
	content: '`';
}
.values {
	color: var(--pure-white);
	padding: 0 0.5em;
}
#properties dl {
	max-width: var(--column-max-width);
}
#properties dd + dd {
	margin-top: 1rem;
}
#properties code {
	color: var(--pure-white);
	padding: 0 0.25em;
}

section#properties table td:first-of-type {
	color: var(--yellow);
	white-space: nowrap;
}

/* ----- open/closed details ----- */
details.shadow summary {
	color: var(--yellow);
	cursor: pointer;
}
details[open].shadow {
    background-color: var(--medium-black);
    border-top: 1px solid var(--pure-black);
    border-bottom: 1px solid var(--pure-black);
    padding: 1rem;
    box-shadow: 5px 5px 8px var(--pure-black);
}

/* ----- examples ----- */
#examples hr {
	max-width: 35%;
	margin: 3rem auto 3rem auto;
	border: none;
	border-top: 3px solid var(--form-gray);
}

.text-sample {
	line-height: 1.4em;
	max-width: var(--column-max-width);
	border: 1px solid var(--pure-black);
	background-color: var(--light-black);
	margin: 0 auto;
	padding: 1em 2em 1em 2em;
	box-shadow: 5px 5px 8px var(--pure-black);
}
.text-sample * {
	font-family: 'Source Code Pro', monospace;
	font-size: 0.8rem;
}

figure + figure {
	margin-top: 1rem;
}

/* ----- see also ----- */
#see-also dl {
	max-width: var(--column-max-width);
}