/** ARTICLE-ONLY STYLES 

Some main article styles still in style.css
This file includes: 
In-post stuff (Temp Charts)
Post template stuff (bill tracker, etc)
Bottom-article stuff (comments, end of article appeal, etc)

**/ 



/* documentcloud */
div.DC-embed .DC-embed-document .DV-container div{
  height:420px;
}
.article-body .DC-embed iframe {
  padding: 0px;
  margin: 0px;
}

/* TEMP CHARTS
===================================================*/
.temp-charts,
.pie-contain {
  margin: 22px 0px;
  /*	padding: 20px 0px 14px 0px;
	border-top: 2px #afafaf solid;
	border-bottom: 1px #afafaf solid; */
  background: #f7f7f7;
  border: 1px solid #eaeaea;
  padding: 18px 22px;
  max-width: 677px;
}

@media screen and (min-width: 1024px) {
  .article-body.col.ten .temp-charts,
  .article-body.col.ten .pie-contain {
    padding: 26px 32px;
  }

  .article-body.col.ten .temp-charts .responsive-bar-container,
  .article-body.col.ten .temp-charts .responsive-stacked-container,
  .article-body.col.ten .temp-charts .responsive-line-container,
  .article-body.col.ten .pie-contain .responsive-pie-container {
    display: block;
    width: 82%;
    margin: 12px auto 0px auto;
  }

  .article-body.col.ten .temp-charts .responsive-bar-container {
    padding-bottom: 66%;
  }

  .article-body.col.ten .temp-charts .responsive-stacked-container {
    padding-bottom: 79%;
  }

  .article-body.col.ten .temp-charts .responsive-line-container {
    padding-bottom: 55%;
  }
}

.temp-charts #meta h2,
.pie-contain .pie-meta h2 {
  text-align: center;
  padding: 0px 22px;
  line-height: 1.2em;
  margin-bottom: 8px;
}

.temp-charts #meta p,
.pie-contain .pie-meta p {
  font-family: "proxima-nova-condensed", sans-serif;
  color: #666;
  font-size: 0.9em;
  margin: 0 0 5px 0;
}

.temp-charts #meta p.chart-subhead,
.pie-contain .pie-meta p.chart-subhead {
  font-size: 1.1em;
  line-height: 1.37em;
}

.chart-source {
  font-family: "proxima-nova-condensed", sans-serif;
  text-align: right;
  font-style: italic;
  margin-bottom: 0px !important;
  font-size: 1rem !important;
}

.chart-footnote {
  font-family: "proxima-nova-condensed", sans-serif;
  color: #4f4f4f;
  margin-top: 22px;
  margin-bottom: 8px;
  padding-left: 6px;
}

.chart-credit {
  font-family: "proxima-nova-condensed", sans-serif;
  color: #838383;
  text-align: right;
  font-size: 70%;
}

#slick-body .temp-charts {
  float: none !important;
}

/*.temp-charts-sidebyside {margin:2em 0;display: inline-block;overflow-y: visible;}
.temp-charts-sidebyside .pretty-table {float: left;width: 60%;}
.temp-charts-sidebyside .temp-charts {margin-top: -29px;}
.temp-charts-sidebyside .pie-contain {margin-top: 29px;margin-right: -55%;}

@media(min-width:1024px){
	.temp-charts {margin:0 -70% 0 1%;} .pie-contain {margin: 0 -35% 0 1%;}
	.temp-charts.marg_15 {margin:0 -16% 0 1% !important;}
}

@media(min-width: 1500px){
	.temp-charts:not(.marg_15) {margin:0 -57% 0 1%;} 
}*/




/* Custom post template code */


/* Updates template */

#updates-list {

}
#updates-list hr {
  margin: 2em 0 0;
}
#updates-list .update {
  padding-top: 2em;
}
#updates-list h4.datetime {
  color: #767676;
  font-size: .96em;
  background-image: url(/wp-content/themes/nakatomi/assets/icons/redsquare.png);
  background-repeat: no-repeat;
  background-position: 0px 6px;
  background-size: 10px;
  padding-left: 22px;
  padding-top: 2px;
}
#updates-list h3.headline {
  margin-top: 8px;
  margin-bottom: -8px;
  position: relative;
}
#updates-list h3.headline .link-icon {
  position: absolute;
  display: inline-block;
  top: 5px;
  left: -28px;
  width: 16px;
  height: 16px;
  text-shadow: none;
  box-shadow: none;
  opacity: 0;
}
#updates-list h3.headline .copy-msg {
  position: absolute;
  display: inline-block;
  top: 30px;
  left: -100px;
  font-size: 12px;
  width: 90px;
  font-weight: 500; 
  opacity: 0;
}
#updates-list h3.headline:hover .link-icon,
#updates-list h3.headline .link-icon:hover {
  opacity: 1;
}
#updates-list h3.headline .link-icon img {
  width: 100%;
  margin: 0px;
}

#updates-list .updates-list-content p {
  margin: 1.2em 0;
}
#updates-list .updates-list-content p:first-child {
  margin-top: 1.2em;
}
#updates-list .updates-list-content p:last-child {
  margin-bottom: .8em;
}
#updates-list hr:last-of-type {
  opacity: 0;
}


/* Legislation tracker */

#bill-tracker {
	font-family: 'proxima-nova-condensed', sans-serif;	
}
article.interactive-article #bill-tracker,
article.web-feature #bill-tracker {
  margin: 0 auto;
  max-width:700px;
}

#bill-categories-submenu {
  max-width: 700px;
  margin-bottom: 22px; 
  padding: 30px 32px;
  position: relative; 
  box-shadow: 2px 2px 3px 0px rgba(0,0,0,.2); 
  background-color: #ebf2e0;    
  font-family: 'proxima-nova-condensed', sans-serif;  
}
#bill-categories-submenu a {
  font-size: 110%;
  color: black;
  text-decoration: underline;
}
#bill-categories-submenu .soft-bullet:last-of-type {
  display: none;
}

#bill-tracker-legend {
  display: flex;
  align-items: stretch;
}
#bill-tracker-legend .int-column {
  width: 50%;
}
#bill-tracker-legend .int-column:first-of-type {
  text-align: right;
  padding-right: 14px;
}
#bill-tracker-legend .int-column .active-square,
#bill-tracker-legend .int-column .inactive-square {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 5px;
}
#bill-tracker-legend .int-column .active-square {
  background-color: #ebf2e0; /* olive */
}
#bill-tracker-legend .int-column .inactive-square {
  background-color: #eaeaea; /* gray */
}

@media screen and (max-width: 680px) {
  #bill-tracker-legend {
    flex-direction: column;
  }
  #bill-tracker-legend .int-column {
    width: 56%;
    text-align: right;
  }
  #bill-tracker-legend .int-column:first-of-type {
    text-align: right;
    padding-right: 0px;
  }
}


#bill-tracker h3.bill-category {
	border-bottom: 1px solid #767676;
	margin: 38px 0px 22px;
}

#bill-tracker .bill {
	max-width: 700px;
	margin-bottom: 22px; 
	padding: 30px 32px;
	position: relative;	
	box-shadow: 2px 2px 3px 0px rgba(0,0,0,.2);	
}
#bill-tracker .bill.active {
	background-color: #ebf2e0;	
}
#bill-tracker .bill.inactive {
	background-color: #eaeaea;	
}
#bill-tracker .bill h2 {
	font-size: 200%;
	margin-bottom: 6px;
  margin-top: 0px;
}
#bill-tracker .bill hr {
	margin: 12px 0px 18px;
	border-top: 1px solid #767676;	
}
#bill-tracker .bill p,
#bill-tracker .bill span {
	font-family: 'proxima-nova-condensed', sans-serif;
	font-size: 18px;
	line-height: 1.25em;	
}
#bill-tracker .bill a {
  color: black;
  text-decoration: underline;
}
#bill-tracker .bill p {
	margin: 1.25em 0;
}
#bill-tracker .bill .bill-status {
	text-transform: capitalize;
}
#bill-tracker .bill-link {
	width: 24px;
    display: block;
    position: absolute;
    top: 0px;
    right: 20px;	
}
#bill-tracker .bill-link img {
  margin-top:22px;
}





/* End of Article appeal */

#end-of-article-box {
  width: 100%;
  margin: 0 auto;  
  background-color: #eaeaea;
  background-color: #f8f4f4;
  padding: 22px 30px;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  color: #585757;
  border-bottom: 5px solid #c2bebe;
  border-top: dashed 1px gold;  
  min-height: 400px;
  clear: both;
}
article.web-feature #end-of-article-box {
  max-width: 732px;
}
article.web-feature #end-of-article-box,
article.interactive-article #end-of-article-box {
  margin: 0 auto -22px auto;  
}

article.web-feature #end-of-article-box h2 {
  margin-top:12px;
}
article .article-body.col.ten #end-of-article-box {
  margin: 0 !important;
}

/*
#left-end-of-article-box {
  height: 100%;
  -webkit-flex: 9.5 0 0;
  flex: 9.5 0 0;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}

#right-end-of-article-box {
  -webkit-flex: 3.2 0 0;
  flex: 3.2 0 0;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding-left: 22px;
}
*/

#end-of-article-box h2 {
  font-weight: 600;
  margin-bottom: 0;
}

#end-of-article-box h3 {
  font-weight: 400;
  line-height: 0;
}

#end-of-article-box p {
  font-family: "minion-pro", serif;  
  line-height: 1.3;
  font-size: 19px;
}

#end-of-article-box p:first-of-type {
  margin-top: 20px;
  margin-bottom: 0;
}

#end-of-article-box p:last-child {
  margin-top: 15px;
  margin-bottom: 0;
}

.coindonate {
  width: 100%;
}

.donateButton {
  display: block;
  margin-top: 32px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
  background: #9962ad;
  background-image: -webkit-linear-gradient(top, #9962ad, #b407ec);
  background-image: -moz-linear-gradient(top, #9962ad, #b407ec);
  background-image: -ms-linear-gradient(top, #9962ad, #b407ec);
  background-image: -o-linear-gradient(top, #9962ad, #b407ec);
  background-image: linear-gradient(to bottom, #9962ad, #b407ec);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: "proxima-nova-condensed", sans-serif;
  color: #ffffff;
  font-size: 22px;
  padding: 7px 11px 5px 11px;
  text-decoration: none;
  border-width: 0;
}

/* "mobile" breakpoint */
@media (max-width: 480px) {
  #end-of-article-box {
    flex-direction: column;
    -webkit-flex-direction: column;
  }

  #left-end-of-article-box {
    -webkit-flex: 0;
    flex: 0;
    width: 100%;
  }

  #right-end-of-article-box {
    -webkit-flex: 0;
    flex: 0;
    width: 100%;
  }

  .coindonate {
    display: none;
  }

  .donateButton {
    margin-top: 3%;
  }

  #end-of-article-box h3 {
    line-height: 1;
  }
}



/* COMMENTS
================================================*/
#comment-activate {
  margin: 40px auto;
  text-transform: uppercase;
  color: #fff;
  background: #000;
  padding: 10px 5px;
  width: 210px;
  text-align: center;
  cursor: pointer;
  font-size: 1.3em;
}

#comment-activate:hover {
  background: #39709f;
}

#comment-panel {
  float: left;
  display: block;
  width: 100%;
  margin-top: 22px;
  font-family: "proxima-nova-condensed", sans-serif;
}

#comment-panel p {
  font-size: 16px;
  font-family: "proxima-nova-condensed", sans-serif;
}

#comment-panel #respond {
  width: 100%;
  float: left;
  padding: 12px 22px;
  border: 1px solid #e6e6e6;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.13);
  margin-bottom: 22px;
}

.comments_display ul,
.comments_display ol {
  font-size: 1.2em;
}

.comments_display .children {
  font-size: 1em;
}

.comments_display li {
  font-size: 100%;
}

.nocomments {
  font-size: 1.2em;
  padding: 20px;
  margin-top: 22px !important;
  background-color: #eaeaea;
}

.nocomments h3 {
  color: #767676;
  font-size: 1.4em;
}

.nocomments p {
  text-align: left;
  margin-top: 12px;
}

.comments_intro {
  float: left;
  background-color: #eaeaea;
  width: 100%;
  padding: 12px 18px;
  margin-bottom: 22px;
}

.comments_intro h3 {
  color: #767676;
  display: inline-block;
  width: 100%;
  float: left;
  position: relative;
  top: 4px;
  font-weight: 600;
}

.comments_intro .button {
  background: #444;
  font-family: "proxima-nova-condensed", sans-serif;
  text-transform: uppercase;
  font-size: 0.9em;
  text-align: center;
  padding: 0.4em 1em;
  border: 0;
  color: #fff;
  width: 75%;
  cursor: pointer;
  margin: 15px auto;
}

.comments_intro .fa-comments {
  margin-right: 8px;
}

@media screen and (min-width: 768px) {
  .comments_intro .button {
    float: left;
    margin: 0;
    width: 25%;
  }

  .comments_intro .button:last-of-type {
    float: right;
  }
}

.author.comment_expand b {
  color: #467518;
}

.author.comment_expand .fa-external-link {
  padding-left: 10px;
}

.comments_intro li {
  font-size: 0.9em;
}

.comments_list {
  font-size: 0.7em;
}

.comment-reply-link:after {
  content: "";
}

@media (min-width: 768px) {
  .comments_list {
    font-size: 1em;
  }
}

.sidebar .quote {
  width: 100%;
}

h2#comments {
  margin-bottom: 1em;
}

.comment {
  position: relative;
  z-index: 4;
  margin: 0;
  padding: 0.4em 0 0.4em 1.4em;
}

.comment > article {
  padding: 0.4em 0;
  min-height: 1.4em;
  border-top: 3px solid #eaeaec;
}

.comment.bad:not(.active) > article {
  min-height: 1.1em;
}

.comment .author_photo {
  float: left;
  margin: 0 1em 0 0;
}

.comment .children {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment > .children.active,
.comment > .children.active .children {
  display: block;
  margin-bottom: 1em;
}

.comment > article > .comment_content {
  clear: both;
  display: none;
  height: auto;
  text-overflow: initial;
  white-space: normal;
  font-size: 0.9rem;
}

.comment > article > .comment_excerpt {
  clear: both;
}

#content .content .comment > article > .comment_excerpt {
  clear: both;
  margin: 0 0 0.4em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
}

.comment.active > article > .comment_content {
  display: block;
}

.comment.active > article > .comment_content > p:first-child {
  margin-top: 0;
}

.comment.active > article > .comment_excerpt {
  display: none;
}

.comment h2 {
  font-weight: normal;
  color: #333;
}

#content .content .comment p {
  font-size: 0.9rem;
  margin: 1em 0;
  color: #545050;
}

.comment.depth-1.thread-even {
  background: #fff;
}

.comment .depth_indicator {
  display: none;
  float: left;
  margin: 1em 0 0 -1em;
}

.comment .comment {
  z-index: 5;
}

.comment .comment .comment {
  z-index: 6;
}

.comment .comment .comment .comment {
  z-index: 7;
}

.comment .comment .comment .comment .comment {
  z-index: 8;
}

.comment .comment .comment .comment .comment .comment {
  z-index: 9;
}

.comment .comment .comment .comment .comment .comment .comment {
  z-index: 10;
}

.comment .comment .comment .comment .comment .comment .comment .comment {
  z-index: 11;
}

.comment footer {
  clear: both;
}

.comment-reply-link .fa {
  margin: 0 0.1em 0 0;
}

.comment > article > ul.controls > li.arrows {
  padding: 0;
  margin: 0;
  border: 0;
  position: absolute;
  left: 0;
  top: 0.3em;
}

.comment > article > ul.controls > li.arrows > a {
  padding: 0 0.4em;
  display: block;
}

/* comment update Oct. */
.comment.depth-1 {
}

.comment.depth-1.active {
}

.comment-reply-link:hover {
  text-decoration: none;
}

.comment h2 {
  font-size: 1em;
  float: left;
  margin: 0 0 0.2em;
  line-height: 1.5;
  position: relative;
}

.comment h2 > .fa {
  position: absolute;
  left: -0.8em;
  top: 0.3em;
}

.comment h2 > .fa.fa-caret-down {
  left: -0.9em;
}

.comment.bad:not(.active) > article > .comment_excerpt {
  display: none;
}

.comment.bad:not(.active) > article {
  padding-bottom: 1.4em;
}

.comment .children .comment {
  margin-left: 0;
  padding-left: 1.5em;
}

.comment > .children.active .children {
  margin-bottom: 0;
}

.comment.toggles:not(.active) > article > .comment_excerpt > a.read_more {
  font-size: 0.9em;
  padding: 0 0.2em;
  display: inline-block;
  color: #aaa;
  font-weight: normal;
}

.comment.toggles:not(.active) > article > .comment_excerpt > a.read_more:hover {
  text-decoration: underline;
  color: #333;
}

/* Replies */
.comment-reply-link {
  box-shadow: none !important;
}

a.comment_expand_replies {
  font-weight: 500;
  display: none;
}

.comment_expand_replies > .fa {
  margin: 0 0.4em 0 0;
  font-size: 0.8em;
}

.comment_expand_replies > .lbl:before {
  content: "View ";
}

.comment_expand_replies.showing > .lbl:before {
  content: "Collapse ";
}

.comment .reply_toggle {
  font-size: 0.8em;
  margin: 0 0 1em;
}

.comment ul.controls {
  position: absolute;
  top: 5px;
  right: 0;
  list-style: none;
  padding: 0;
  line-height: 2;
  margin: 0;
  color: #333;
}

.comment ul.controls:after {
  content: " ";
  clear: both;
}

.comment ul.controls > li {
  float: left;
  padding: 0;
  margin: 0;
}

.comment ul.controls > li:last-child {
  border-right: 0;
}

.comment:not(.active) > article > ul.controls > li.arrows > a.close,
.comment.active > article > ul.controls > li.arrows > a.open {
  display: none;
}

.comment ul.controls > li:last-child {
  border-right: 0;
}

.comment ul.controls > li > a:not(.white) {
  transition: color 0.1s;
  margin: 0 0 0 0.5em;
  font-size: 1em;
  color: #bbb;
  font-size: 0.9em;
}

.comment ul.controls > li > a:not(.white):hover {
  color: #404041;
}

.comment ul.controls > li > a.down:not(.white):hover,
ul.controls > li > a.down:not(.white).scored {
  color: rgb(224, 114, 110);
}

.comment ul.controls > li > a.up:not(.white):hover,
ul.controls > li > a:not(.white).up.scored {
  color: #89bc19;
}

.comment ul.controls > li > a.comment_trash.scored {
  background: rgb(224, 114, 110);
  color: #fff;
  padding: 0.2em 0.5em;
}

.comment ul.controls > li > a.comment_trash.scored:hover {
  background: #404041;
}

.comment ul.controls > li.thumbs {
  margin: 0 0.4em;
}

.comment ul.controls .thumbs > .total {
  font-family: Verdana, sans-serif;
  font-size: 0.8em;
  border-left: 1px solid #eaeaec;
  border-right: 1px solid #eaeaec;
  text-align: center;
  margin: 0 0 0 0.4em;
  padding: 0 0.4em;
  color: #666;
}

.comment ul.controls .thumbs > .count {
  position: absolute;
  top: -2em;
  font-size: 0.6em;
  width: 8em;
  font-family: Verdana, sans-serif;
  right: 0;
  text-align: right;
  color: #ccc;
}

.comment ul.controls .thumbs > .count:after {
  content: " total votes";
}

.comment ul.controls .thumbs > .percent {
  display: none;
}

.comment ul.controls .thumbs > .percent:after {
  content: "%";
}

.comment .author > b > a {
  color: #ddd;
  margin: 0 0.4em 0 0;
}

.comment h2 > .stamp {
  color: #aaa;
  font-size: 0.8em;
  padding-left: 20px;
}

.comment h2 > .stamp.desktop {
  display: inline;
}

.comment h2 > .stamp.mobile {
  display: none;
}

@media (max-width: 767px) {
  /* "mobile" breakpoint */
  .comments_list {
    font-size: 1em;
  }

  .comment {
    margin: 0 0 0 -1em;
    padding: 0.2em 0 0.4em 1em;
  }

  .comment:not(.trashed) > article {
    min-height: 2.4em;
  }

  .comment ul.controls {
    font-size: 0.9em;
  }

  .comment .children {
    margin: 0.2em 0 0 -1em;
    padding: 0 0 0 1.5em;
  }

  .comment .children .comment {
    margin: 0 0 0 -1em;
    padding: 0.2em 0 0.4em 1em;
  }

  .comment h2 > b {
    font-size: 1.3em;
    position: relative;
  }

  .comment h2 {
    line-height: 1.1;
  }

  .comment h2 {
    font-size: 0.8em;
    margin: 0 0 0.1em 0;
    line-height: 1.5;
  }

  .comment h2 > i {
    top: 0.1em;
    font-size: 1.2em;
  }

  .comment h2 > .stamp.mobile {
    display: block;
    margin: -0.3em 0 0.2em;
  }

  .comment h2 > .stamp.desktop {
    display: none;
  }

  .comment.trashed:not(.active) > article > h2 {
    color: #fff;
  }

  .comment.trashed:not(.active) > article > h2:before {
    color: #ccc;
    font-size: 1.1em;
    line-height: 1.5;
  }
}