/* overrides */
html, body {
}
.pg-main, #graphic {
  margin:0 !important;
  width:100% !important;
  max-width:100% !important;
}
footer {
  z-index:3;
  position:relative;
}
#content {
}
#content, #content .wrapper, .content-full, #graphic {
  max-width:100% !important;
  margin:0;
  padding:0;
}
.site-mast-mini {
  position:fixed;
  width:100%;
  z-index:6;
  background:rgba(255,255,255,0.75) !important;
}
#content .wrapper {
}
.article {
  margin-top:0 !important;
}
header[role="banner"]>h1 {
  position:absolute;
}
#wnyc-logo {
  height:21px;
}
#graphic {
    margin: 0 auto;
    position:relative;
}
#graphic .byline a, #source p a {
  color: #053037;
}
footer, #footer {
  display:none;
}
.site-footer {
  margin-top:0 !important;
}
/* \overrides */

#graphic #guffblock p.byline {
  margin:10px 0;
}
#graphic #guffblock p.guff-page {
  font-size: 1.4em;
  padding:25px;
  color:rgba(135, 135, 135, 0.70);
  transition: background-color 0.2s ease;
}
#graphic #guffblock p.guff-page.active {
  color:#444;
  background:rgba(255,255,255,0.9);
  box-shadow: 0 0 3px #999;
}
#graphic h1 {
  font-size: 2.2em;
  line-height: 1.2em;
  font-family:"Tiempos Headline",Georgia,serif;
}
.canvas-img {
  display:none;
}
#map {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#map canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#map-canvas, #label-layer-camden {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
#label-layer-camden {
  z-index:3;
}
#label-layer-camden p {
  margin:0;
}
#label-layer-camden .label, #locator-map .label {
  position:absolute;
  font-family: Graphik,helvetica,arial,sans-serif;
  font-weight: 500;
  font-size: 14px;
  position: absolute;
  max-width: 160px;
  text-align: left;
  line-height: 1.2em;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.7), -1px -1px 0px rgba(255,255,255,0.7), -1px 1px 0px rgba(255,255,255,0.7), 1px -1px 0px rgba(255,255,255,0.7);
}
#label-layer-camden .label.label-city-smaller {
  font-size:11px;
}
#label-layer-camden .label.label-state {
  font-size:18px;
  letter-spacing:0.2em;
  color: #888;
}
#label-layer-camden .label.label-ld {
  font-size: 11px;
  font-style: italic;
  color: #575757;
  max-width: 90px;
  text-align: center;
}
#label-layer-camden .label.label-river {
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-style:italic;
}
  #label-layer-camden .label.label-dark.label-delaware-river {
    width: 280px;
    max-width: 320px;
    transform: rotate(-82deg);
    transform-origin: 0 0;
    font-weight:500;
  }
  #label-layer-camden .label.label-bfbridge {
    max-width: 660px;
    width:660px;
    transform: rotate(13deg);
    transform-origin: 0 0;
  }

#label-layer-camden .label.label-anno {
  font-size:13px;
  max-width:120px;
  text-align:left;
/*  text-shadow:none;
*/  opacity:0;
  text-shadow: 1px 1px 0px rgba(255, 251, 148,0.6), -1px -1px 0px rgba(255, 251, 148,0.6), -1px 1px 0px rgba(255, 251, 148,0.6), 1px -1px 0px rgba(255, 251, 148,0.6);
  font-weight:600;
  transition: opacity 0.6s ease;
}
#label-layer-camden .label.label-dark {
  color:#fff;
  text-shadow: 0 0 10px #000,0 0 10px #000;
  font-weight:600;
}

#label-layer-camden .label.label-anno.label-anno-color {
background: rgba(255,255,255,0.9);
padding: 5px;
text-shadow: none;
box-shadow: 0 0 13px #999;
}
.card-anno {
  color:#fff;
  padding: 0 4px;
  border-radius: 3px;
}
/*
#label-layer-camden .label.label-anno.label-anno-color1 {
  color:#1f77b4;
}
#label-layer-camden .label.label-anno.label-anno-color2 {
  color:#ff7f0e;
}
#label-layer-camden .label.label-anno.label-anno-color3 {
  color:#2ca02c;
}
#label-layer-camden .label.label-anno.label-anno-color4 {
  color:#d62728;
}
#label-layer-camden .label.label-anno.label-anno-color5 {
  color:#9467bd;
}
#label-layer-camden .label.label-anno.label-anno-color6 {
  color:#8c564b;
}
#label-layer-camden .label.label-anno.label-anno-color7 {
  color:#e377c2;
}
*/

#locator-map .label-locator-state {
  font-size:11px;
  color:#444;
  font-style:italic;
}
#locator-map .label-locator-city {
  font-size:10px;
  color:#444;
}

#locator-map .label-locator-corps {
  font-size:11px;
  color:#444;
  text-align:center;
  max-width:80px;
}

#map[data-story-status="inactive"] #label-layer-camden .label.label-ld {
  opacity:0;
}
#map #label-layer-camden .label.label-ld.ld-overbuilt-0 {
  opacity:0;
}
path.arrow, #arrowhead {
  fill: none;
  stroke: black;
}
#map path.arrow {
  opacity:0;
  transition: opacity 0.6s ease;
}
#map path.arrow.arrow-all {
  opacity:1;
}
#map[data-story-status="active-0"] path.arrow.arrow-0 {
  opacity:1;
}
#map[data-story-status="active-1"] path.arrow.arrow-1 {
  opacity:1;
}
#map[data-story-status="active-2"] path.arrow.arrow-2 {
  opacity:1;
}
#map[data-story-status="active-3"] path.arrow.arrow-3 {
  opacity:1;
}
#map[data-story-status="active-4"] path.arrow.arrow-4 {
  opacity:1;
}
#map[data-story-status="active-5"] path.arrow.arrow-5 {
  opacity:1;
}
#map[data-story-status="active-6"] path.arrow.arrow-6 {
  opacity:1;
}
#map[data-story-status="active-7"] path.arrow.arrow-7 {
  opacity:1;
}
#map[data-story-status="active-8"] path.arrow.arrow-8 {
  opacity:1;
}

#label-layer-camden .label {
  opacity:0;
  transition: opacity 0.6s ease;
}
#map[data-story-status="active-0"] #label-layer-camden .label.label-page-0,
#map[data-step="0"] #label-layer-camden .label.label-page-0
 {
  opacity:1;
}
#map[data-story-status="active-1"] #label-layer-camden .label.label-page-1 {
  opacity:1;
}
#map[data-story-status="active-2"] #label-layer-camden .label.label-page-2 {
  opacity:1;
}
#map[data-story-status="active-3"] #label-layer-camden .label.label-page-3 {
  opacity:1;
}
#map[data-story-status="active-4"] #label-layer-camden .label.label-page-4 {
  opacity:1;
}
#map[data-story-status="active-5"] #label-layer-camden .label.label-page-5 {
  opacity:1;
}
#map[data-story-status="active-6"] #label-layer-camden .label.label-page-6 {
  opacity:1;
}
#map[data-story-status="active-7"] #label-layer-camden .label.label-page-7 {
  opacity:1;
}
#map[data-story-status="active-8"] #label-layer-camden .label.label-page-8 {
  opacity:1;
}

#svg-layer-camden, #svg-layer-camden svg {
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  width:100%;
  height:100%;
  transform-origin:0 0;
}

#guffblock {
  position: relative;
  top: 80px;
  z-index: 5;
}

.inline-legend {
  display: inline-block;
  font-family: Graphik,helvetica,arial,sans-serif;
  font-size:12px;
  line-height:10px;
}
.inline-legend-sourceline {
  display:block;
  line-height:17px;
  margin-top:10px;
}
.color-swatch {
  display:inline-block;
  width:12px;
  height:12px;
}

#locator-map {
  background:url('../../images/rockisland/locator_300.png');
  background-size:100%;
  position:fixed;
  bottom:0;
  left:0;
  width:150px;
  height:160px;
  margin: 0 2px 1px;
}

#sources {
  font-family: Graphik,helvetica,arial,sans-serif;
  font-size:11px;
  position:fixed;
  bottom:0;
  left:0;
  z-index:999;
}
#graphic #sources p {
  margin:0px 0px 1px 3px;
  padding:0;
  font-size: 10px;
}
/* position the guffblock for different widths - starting narrow */
/* min width 0 */
#guffblock {
  max-width: 100%;
  padding-top:400px;
}
#guffblock-intro {
  padding:0 5%;
}
#guffblock-intro p {
  margin:0 0 10px 0 !important;
}
#graphic #guffblock p.guff-page {
  margin: 0 0 10px;
  font-size:1.2em;
} 
#graphic #guffblock #guffblock-intro.card-overlap {
  background: rgba(255,255,255,1);
  box-shadow: 0 0 3px #999;
  padding:10px 20px 20px;
}

#camden-below-map {
  z-index:2;
  position:relative;
  width:100%;
  overflow:auto;
}
.camden-below-block {
  padding: 30px 10vw;
  background:#fff;
  font-family: Graphik,helvetica,arial,sans-serif;
}
.guff-table {
  width: 140%;
  margin-left: -20%;
}
.guff-table table {
  background:#fff;
}
.guff-table th, .guff-table td {
  border:none;
  border-top: 1px solid #d8d6d3;
  vertical-align:top !important;
}
.letter-circle, #label-layer-camden .label.label-table-anno {
  background:#000;
  color:#fff;
  font-weight: 600;
  padding: 5px;
  border-radius: 24px;
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 16px;
  text-align: center;
  text-shadow:none;
  margin-bottom:5px;
}
.label.label-table-anno {
  background:rgba(0,0,0,0.7);
}
.card-img-label {
  display:block;
  font-size:14px;
  font-family: Graphik,helvetica,arial,sans-serif;
}

@media screen and (min-width:365px) {
  #guffblock {
    padding-top:550px;
  }
}

@media screen and (min-width:600px) {
  #guffblock {
    padding-top:600px;
  }
}

@media screen and (min-width:900px) {
  #guffblock {
    max-width:380px;
    left:45%;
    padding-top:40px;
  }
  #graphic #guffblock p {
    margin:0;
  }
}

@media screen and (min-width:900px) {
  #guffblock {
    max-width:450px;
    left:47%;
  }
}

@media screen and (min-width:1000px) {
  #guffblock {
    max-width:450px;
    left:50%;
  }
}

@media screen and (min-width:1300px) {
  #locator-map {
    left:13%;
  }
}
@media screen and (min-width:2000px) {
  #map {
    left:25%;
  }
  #locator-map {
    left:20%;
  }
}


/*  ---- */
@media screen and (max-width:400px) {
  #map {
    top:40px
  }
}
@media screen and (max-width:500px) {
  .label-anno-sny {
    margin-top:-35px;
  }
}
@media screen and (max-width:1100px) {
  .guff-table {
    width:120%;
    margin:-10%;
  }
}

@media screen and (max-width:1100px) {
  .guff-table {
    width:100%;
    margin:0;
  }
  .table-mobile-spacer {
    height:200px;
  }
}

/* hi dpi labels */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 2dppx), 
(min-resolution: 192dpi) { 
  #label-layer-camden .label {
    max-width:320px;
  }
  #label-layer-camden .label.label-state {
    font-size: 32px;
    max-width: 300px;
    font-weight:600;
  }
 #label-layer-camden .label.label-city {
    font-size:28px;
  }
 #label-layer-camden .label.label-shale {
    font-size:22px;
  }
  #label-layer-camden .label.label-city-smaller {
    font-size:24px;
  }
  #label-layer-camden .label.label-tinylabel { 
    font-size:22px;
  }
  #label-layer-camden .label.label-description { 
    font-size:24px;
    width:400px;
    max-width:400px;
  }
  #label-layer-camden .label.label-pipeline {
    font-size:20px;
    width:200px;
  }
  #label-layer-camden .label.label-river { 
    font-size:22px;
  }
  #label-layer-camden .label.label-anno {
    font-size:24px;
    max-width:320px;
  }
  #label-layer-camden .label.label-longer {
    max-width:232px;
  }
  #label-layer-camden .label.label-reverse {
    text-shadow: 2px 2px 0px rgba(0,0,0,0.7), -2px -2px 0px rgba(0,0,0,0.7), -2px 2px 0px rgba(0,0,0,0.7), 2px -2px 0px rgba(0,0,0,0.7);
  }
  #label-layer-camden .label.label-table-anno {
    padding: 5px;
    border-radius: 24px;
    width: 36px;
    height: 36px;
    line-height: 27px;  
  }
  #label-layer-camden .label.label-delaware-river {
    width: 280px;
    max-width: 320px;
    transform: rotate(-82deg);
    transform-origin: 0 0;
  }
  #label-layer-camden .label.label-bfbridge {
    max-width: 660px;
    width:660px;
    transform: rotate(13deg);
    transform-origin: 0 0;
  }
  .svg-layer path.arrow {
    stroke-width:0.4;
  }
  .svg-layer path.arrow.arrow-swoopystraight {
    stroke-width:0.5;
  }
  .top-map[data-step="4"]  .svg-layer path.arrow.arrow-4 {
    stroke-width:2.4;
  }
  .top-map[data-step="5"]  .svg-layer path.arrow.arrow-5 {
    stroke-width:2;
  }
  #top-map-crowder[data-step="3"]  .svg-layer path.arrow.arrow-3,
  #top-map-crowder[data-step="3"]  .svg-layer .arrowhead {
    stroke-width:2;
  }
  #top-map-crowder[data-step="4"]  .svg-layer path.arrow.arrow-4,
  #top-map-crowder[data-step="4"]  .svg-layer .arrowhead {
    stroke-width:2;
  }

}
@media 
(-webkit-min-device-pixel-ratio: 3), 
(min-resolution: 3dppx), 
(min-resolution: 288dpi)  {
  #label-layer-camden .label {
    max-width:480px;
  }
  #label-layer-camden .label.label-state {
    font-size: 62px;
    max-width: 900px;
  }
 #label-layer-camden .label.label-city {
    font-size:42px;
  }
 #label-layer-camden .label.label-shale {
    font-size:32px;
  }
  #label-layer-camden .label.label-city-smaller {
    font-size:36px;
  }
  #label-layer-camden .label.label-tinylabel { 
    font-size:33px;
  }
  #label-layer-camden .label.label-description { 
    font-size:36px;
    width:600px;
    max-width:600px;
  }
  #label-layer-camden .label.label-pipeline {
    font-size:30px;
    width:300px;
  }
  #label-layer-camden .label.label-river { 
    font-size:33px;
  }
  #label-layer-camden .label.label-dark.label-delaware-river {
    width: 800px;
    max-width: 800px;
  }
  #label-layer-camden .label.label-bfbridge {
    max-width: 1200px;
    width:1200px;
  }

  #label-layer-camden .label.label-anno {
    font-size:38px;
    width:410px;
    padding:10px;
  }
  #label-layer-camden .label.label-longer {
    max-width:420px;
  }
  #label-layer-camden .label.label-reverse {
    text-shadow: 3px 3px 0px rgba(0,0,0,0.7), -3px -3px 0px rgba(0,0,0,0.7), -3px 3px 0px rgba(0,0,0,0.7), 3px -3px 0px rgba(0,0,0,0.7);
  }
  #label-layer-camden .label.label-table-anno {
    padding: 10px;
    border-radius: 24px;
    width: 55px;
    height: 55px;
    line-height: 37px;
    font-size:44px;
  }

  .svg-layer path.arrow {
    stroke-width:0.5;
  }
  .svg-layer path.arrow.arrow-swoopystraight {
    stroke-width:0.5;
  }
  .top-map[data-step="4"]  .svg-layer path.arrow.arrow-4 {
    stroke-width:3;
  }
  .top-map[data-step="5"]  .svg-layer path.arrow.arrow-5 {
    stroke-width:3;
  }
  #top-map-crowder[data-step="3"]  .svg-layer path.arrow.arrow-3,
  #top-map-crowder[data-step="3"]  .svg-layer .arrowhead {
    stroke-width:3;
  }
  #top-map-crowder[data-step="4"]  .svg-layer path.arrow.arrow-4,
  #top-map-crowder[data-step="4"]  .svg-layer .arrowhead {
    stroke-width:3;
  }
}