button {
  appearance: none;
  background-color: #e4e0c7;
  border: 0;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "itc-officina-sans-pro", sans-serif;
  font-size: 1.25em;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  line-height: 1;
  padding: 0.8em 1.6em;
  text-decoration: none;
  transition: background-color 150ms ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}
button:hover, button:focus {
  background-color: shade(#e4e0c7, 20%);
  color: #fff;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
button:disabled:hover {
  background-color: #e4e0c7;
}

a:link {
  color: #e4e0c7;
}

a:visited {
  color: shade(#e4e0c7, 20%);
}

a:hover {
  color: #ff7f00;
  text-decoration: underline;
}

ul,
ol {
  margin: 0;
}

dl {
  margin-bottom: 0.8em;
}
dl dt {
  font-weight: 600;
  margin-top: 0.8em;
}
dl dd {
  margin: 0;
}

table {
  border-collapse: collapse;
  margin: 0.8em 0;
  table-layout: fixed;
  width: 100%;
}

th {
  border-bottom: 1px solid shade(#e4e0c7, 25%);
  font-weight: 600;
  padding: 0.8em 0;
  text-align: left;
}

td {
  border-bottom: 1px solid #e4e0c7;
  padding: 0.8em 0;
}

tr,
td,
th {
  vertical-align: middle;
}

html {
  background-color: #353526;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  /*color: #e4e0c7;*/
  color:  #e6e7d8;
  font-family: "itc-officina-sans-pro", sans-serif;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  /*for medium displays, less than or equal to 768em */
  /*for medium displays, less than or equal to 600px */
}
@media screen and (max-width: 768px) {
  body {
    font-size: 0.75em;
  }
}
@media screen and (max-width: 600px) {
  body {
    font-size: 0.5em;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  line-height: 1.2;
}

p {
  margin: 0 0 0.8em;
}

a {
  color: #e4e0c7;
  text-decoration: none;
  transition: color 150ms ease;
}
a:active, a:focus, a:hover {
  color: shade(#e4e0c7, 25%);
}

hr {
  border-bottom: 1px solid #e4e0c7;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin: 1.6em 0;
}

img {
  margin: 0;
  max-width: 100%;
}

blockquote {
  font-style: italic;
}

/* for temporary menu pages */
ul.list-menu {
  list-style-type: none;
  padding: .5em 3%;
  margin-top: 1.25em;
}

/* basic-page is for personal stories, essays, etc */
header.basic-page {
  background-color: #686959;
  padding: .5em 3%;
  max-width: 100%;
/*  margin-top: 24px;*/
  text-align: left;
}

header.basic-page h1 {
  font-size: 1.75em;
  margin: 0;
}

header.basic-page h4 {
  margin: 0;
}

/* obsolete style
h3.grid-title {
  color: #B25900;
  letter-spacing: .075em;
  text-shadow: 1px 1px #353526;
  text-transform: uppercase;
}*/

/* used in Personal Story pages, Theme pages */
.basic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 1.5em;
}

.first-col  {
  grid-column: 1/2;
  grid-row: 2;
  margin-left: 1.5em;
}

.second-col {
  grid-column: 2/5;
}

.second-row {
  grid-row: 3;
}
  
article.text-side {
  background: rgba(53, 53, 38, 0.8);
  grid-column: 5/7;
  grid-row-start:  1;
  grid-row-end: 4;
  padding: 1em;
  z-index: 92;
}

.text-side p.intro {
 font-size: 1.25em;
 line-height: 1.25em; 
}

.image-full {
  grid-column: 1/7;
  grid-row: 1;
}

.image-full img {
  width: 100%;
}

.image-full-caption {
  align-self: end;
  background: rgba(53, 53, 38, 0.8);
  grid-column: 1/3;
  grid-row: 1;
  margin: 0 0 1.5em 1.5em;
  z-index: 90;
}

p.caption {
  color: #BAB692;
  border: 1px solid #686959;
  font-size: .75em;
  margin: 0;
  padding: .75em;
}

.narrative {
  margin: 1em auto 3em auto;
  max-width: 60%;
}

.narrative p, ol li {
  font-size: 1.25em;
}

.narrative a {
  color: #B25900;
}

.narrative div p, div.full-image p {
  color: #e4e0c7;
  font-size: 0.75em;
  margin: .5em 0 2em 0;
}

.narrative div img {
  border: thin solid #615c3d;
  width: 90%;
}

/* these styles might be relevant only to the city story - should they get moved? */
.sidebar-parent {
  /* width: 100vw; */
  overflow: visible;
  position: absolute;
  left: -330px;
  width: 350px;
  height: 400px;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}

.sidebar-parent:hover {
  /* opacity: 1; */
  left: 0px;
}
.sidebar {
  background-color: #558000;
  border-radius: 0 0 3px 3px;
  position: absolute;
  top: 318px;
  left: 330px;
  width: 318px;
  text-align: center;
  transform-origin: 0 0;
  transform: rotate(-90deg);
}

.sidebar a {
  color: #e4e0c7;
  font-size: 1em;
}

.sidebar-parent article {
  background-color: #E6E7D8;
  color: #353526;
  font-size: .75em;
  padding: 1em 3em 1em 1em;
  margin: 0;
  min-height: 318px;
}

div.full-image {
  position: relative;
}

div.full-image p {
  background-color: #353526;
  border: 1px solid #e4e0c7;
  opacity: 0.75;
  float: left;
  margin-left: 1.6em;
  padding: 1.6em;
  position: absolute;
  bottom: 3em;
  width: 18%;
  z-index: 8;
}

h5.scroll-prompt {
  background: url(http://dev.picturingurbanrenewal.org/prod-assets/common/scroll-arrow.png) no-repeat;
  background-size: 60px;
  background-position: bottom;
  color: #e38d28;
  font-weight: bold;
  height: 70px;
  left: 46%;
  position: absolute;
  text-shadow: 1px 1px 1px black;
  top: 65%;
  z-index: 99;
}

.caption-panel {
  position: relative;
  z-index: 10;
  margin: 1em;
}

.caption-panel div {
  background-color: #353526;
  border: 1px solid #e4e0c7;
  opacity: 0.75;
  margin-bottom: 90vh;
  overflow: auto;
  padding: 1em;
  margin-top: -10em;
  width: 60%;
}

.caption-panel div.narrower {
  width: 30%;
}

a.caption-link {
  color: #B25900;
  text-decoration: underline;
}

#mapdiv img {
  border: none;
}

header.story-title nav#dropdown-parent {
  position: absolute;
  top: 35%;
  left: 1.5em;
  text-align: left;
}

.dropdown-menu {
  display: none;
  list-style-type: none;
}

.dropdown-menu li a {
  background-color: rgba(178, 89, 0, 0.9);
  border: 1px solid #B25900;
  font-size: 0.75em;
  padding: 3px 0.8em;
}

.dots ul {
  cursor: default;
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 1em;
  top: 40%;
}

.dots li {
  cursor: pointer;
  display: block;
  float: left;
  height: 0.5em;
  margin: 0 0.5em;
  position: relative;
  width: 0.5em;
}

.dots li a {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  text-indent: -999em;
  cursor: pointer;
  /* make the text accessible to screen readers */
  position: absolute;
}

.dot-title {
  color: #bbb071;
  display: none;
  font-size: 0.75em;
  position: absolute;
  right: 1em;
  top: 2px;
}

/* Fill up */
.dots-fillup li a {
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #bbb071;
  transition: background 0.3s;
}

.dots-fillup li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 0;
  left: 0;
  width: 100%;
  background-color: #bbb071;
  box-shadow: 0 0 1px #fff;
  transition: height 0.3s;
}

.dots-fillup li a:hover,
.dots-fillup li a:focus {
  background-color: #e4e0c7;
}

.dots-fillup li.current a::after {
  height: 100%;
}
/* end of city-story only styles */

/* Don adding this for slimpops -- required */
.lightbox {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(./assets/overlay.png) repeat;
  z-index: 99;
}

/* shared styles for all slimpops, specific styles in 
SlideShow.css etc. */
.slimpop-wrapper {
  background-color: #EDEEE4;  
  border: 1px solid #BDBEA7;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.75);
  color: #353626;
  overflow:  auto;
  padding: 2em;
  position: relative;
}