body {
  color: #333333;
  -webkit-font-smoothing: antialiased;
}
.o-header {
  position: relative;
}

.o-typography-subhead {
  margin-top: 0;
  font-weight: 600;
  margin-bottom: 0.3em;
  font-size: 20px;
}

.top-story {
  float: right;
}

.section-head {
  padding-bottom: 10px;
  overflow: hidden;
}

.section-head h2 {
  font-weight: 400;
  font-family: Georgia, serif;
  font-size: 20px;
  color: #505050;
  margin-bottom: 0.7em;
}

.strong-votes {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  overflow: hidden;
  border-bottom: 1px solid #cec6b9;
  padding-bottom: 20px;
}

.subhead {
  margin-top: 0;
  font-family: Georgia, serif;
  font-size: 18px;
}

.top-story .flyline__link {
  color: #2e6e9e;
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 16px;
}
.flyline {
  letter-spacing: 0;
}

.top-story .flyline__link:after {
  content: " ";
  background: url('https://www.ft.com/__origami/service/image/v2/images/raw/fticon:arrow-right?height=36&tint=2e6e9e,2e6e9e&source=ig') no-repeat center center;
  background-size: 20px 20px;
  float: right;
  width: 20px;
  height: 24px;
  margin: 0;
}

.footnote{
  line-height: 16px;
  font-size: 14px;
  font-weight: 400;
  margin-top: .3em;
  margin-bottom: .8em;
  display: inline-block;
  color: #777777;
}

.updated{
  font-size: 12px;
  text-transform: uppercase;
  color: #8b572a;
  display: inline-block;
}

/* national results */
.total-bar {
    box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
}


.total-bar-label {
  font-weight: 400;
  font-family: MetricWeb, sans-serif;
  font-size: 2rem;
  vertical-align: top;
  display: inline-block;
  padding: 0 4px;
  line-height: 35px;
}


.national-figure{
  font-weight:600;
}

.national-item {
  display: block;
}

.win {
  order: 1;
}

.lose {
  order: 2;
}

.total-bar {
  height: 35px;
    box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  margin-bottom:4px;
}


/* summary text*/
.leave-highlight,
.remain-highlight{
  font-weight: 600;
}

.leave-highlight{
  color:#0d8a66;
}

.remain-highlight{
  color:#2a4a8c;
}

.inline-value{
  font-feature-settings: "tnum";
  font-weight: 600;
}

.place-detail{
  font-weight: 400;
  font-family: MetricWeb, sans-serif;
}

.body-section .standfirst div{
  padding-left: 0;
}

.body-section .standfirst div:last-child {
  padding-left: 20px;
  border-left: 1px solid #cec6b9;
}

.body-section {
  padding-bottom: 12px;
  margin-top: -4px;
}
.body .standfirst-list{
  list-style-type: none;
  padding-left: 0px;
}

.body .standfirst-list li{
  padding-bottom: 10px;
    margin-left: 0px;
    padding-left: 0px;
}

/* regional results */

.count-incomplete{
  fill-opacity: 0.5;
}

.regional-axis{
  stroke:#000;
  stroke-opacity:0.5;
}

.regional-divider {
  stroke:#000;
  stroke-opacity:0.2;
}

.regional-axis-label {
  font-size: 1.2rem;
  font-weight: 600;
}

.bar-header{
  fill: #505050;
  font-size: 1rem;
}

.vote-figure{
  font-weight: 600;
  font-feature-settings: "tnum";
  font-size: 1.1rem;
}

.region-label{
  font-size: 1.2rem;
}

.regional-results {
  border-bottom: 1px solid #cec6b9;
  margin-bottom: 20px;
}

.regional-results figcaption {
  margin-bottom: 20px;
}

/*map*/
.land{
  fill:#000;
  fill-opacity: 0.1;
  stroke: #000;
  stroke-opacity:0.1;
  stroke-width:1.5px;
  stroke-linejoin: round;
}

.area{
  stroke-width:0.2;
  stroke: #fff1e0;
  stroke-opacity:0.2;
  cursor: pointer;
}

.map-frame{
  stroke:#cec6b9;
  stroke-width:1px;
  fill:none;
}

.highlight-background{
  pointer-events: none;
  stroke-width:6px;
  stroke:#FFF;
  fill:none;
}

.highlight-foreground{
  pointer-events: none;
  stroke-width:2px;
  stroke:#000;
  fill:none;
}

.map-label{

}

/* local result */

.local-area-lookup {
  background-color: #f6e9d8;
  padding: 12px;
  border-bottom: 1px solid #cec6b9;
}

.location-input {
  font-size: 18px;
}
.location-input input {
    line-height: 30px;
    font-size: 16px;
    border: 1px solid #b0b0b0;
    border-radius: 5px;
    padding-left: 28px;
    margin-right: 4px;
    margin-bottom: 20px;
    margin-top: 10px;
    background: #fff url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon:search?width=13&source=ge15) no-repeat 10px;
    background-size: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .location-input button {
    margin: 0 auto;
    margin-bottom: 10px;
    display: block;
  }
}

.postcode-message{
  display: none;
}

.postcode-error.postcode-message{
  display: block;
}

.location-data {
  margin-top: 10px;
  margin-bottom: -40px;
}

.bar-background{
  fill:#000;
  fill-opacity: 0.2
}


.local-result-chart .context-bar:first-child .bar-title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 10px;
}

.bar-title{
  font-size: 26px;
}

.bar-remain{
  fill:#4366af;
}

.bar-leave{
  fill:#2fad89;
}

.bar-remain-value{
  font-size: 24px;
}

.bar-leave-value{
  font-size: 24px;
}

.local-bar-axis{
  stroke-width:2px;
  stroke:#f6e9d8;
}

.neighbour-label {
  border-bottom: 1px solid #cec6b9;
  padding-bottom: 3px;
}

.neighbour{
  cursor: pointer;
  color: #2e6e9e;
  margin: 5px 0;
}

.neighbour:hover{
  color: #000000;
}



.leave-flag, .remain-flag{
  font-size: 12px;
  padding: 2px 5px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.leave-flag{
  background-color: #2fad89;
}

.neighbour-info {
  color: #333;
}

.remain-flag{
  background-color: #4366af;
}

/* full table */
.full-area-results{
  width:100%;
}

.number-cell{
  text-align: right;
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
  -ms-font-feature-settings: 'tnum';
}

.full-table-label-leave{
  text-anchor: end;

}

.full-table-label-leave, .full-table-label-remain {
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
  -ms-font-feature-settings: 'tnum';
}

.table-bar{
  width:100%;
}

.full-area-results th{
  font-weight: bold;
}

/* stories */

.article__crosshead-alt {
  font-weight: 400;
  margin-bottom: 6px;
}

.stories__container{
  background-color: #f6e9d8;
  padding: 0 10px;
  border-top: 1px solid #cec6b9;
  margin-bottom: 1em;
}

.stories__story{
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  padding-left: 0;
}

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

.stories__story--container{
  padding: 10px 0;
  max-width: 310px;
}

.stories__story--blurb{
  color: #505050;
  font-size: .9em;
  line-height: 1.3em;
}

a {
  text-decoration: none;
}

.stories__story--headline {
  padding-bottom: 10px;
  text-decoration: none;
  color: #2e6e9e;
}

@media (max-width: 490px) {
  .top-story {
    margin-top: 0.4em;
  }
  .local-area-lookup {
    margin-left: -10px;
  }
  .stories__container {
    margin-left: 0;
  }
  .headline {
    font-size: 30px;
    margin-bottom: 0.2em;
  }
  .subhead {
    font-size: 14px;
  }
  .strong-votes {
    font-size: 16px;
    line-height: 22px;
  }
  .article__crosshead-alt {
    font-size: 18px;
  }
  .section-head h2 {
    font-size: 16px;
  }
  .flyline {
    font-size: 14px;
    margin-bottom: 0;
  }
  .total-bar-label {
    font-size: 1.5rem;
  }
  #local-map {
    margin-bottom: -30px;
  }
  .location-input button {
    width: 100%;
    margin-top: 8px;
  }
  .footnote {
    margin-bottom: 0;
  }
  .top-story .flyline__link {
    font-size: 16px;
  }
  .top-story .flyline__link:after {
    background-size: 16px 16px;
    width: 16px;
    height: 20px;
  }
  .location-input input {
    margin-bottom: 10px;
  }
  .hideable{
    display:none;
  }
}

@media (min-width: 490px) {
  .headline {
    font-size: 36px;
    margin-bottom: 0.2em;
  }
  .local-area-lookup {
    margin-top: 13px;
  }
  .stories__story--container {
    padding-left: 10px;
    padding-right: 10px;
  }
  .section-head h2 {
    font-size: 16px;
  }
  .subhead {
    font-size: 16px;
  }
}

@media (min-width: 740px) {
  .headline {
    font-size: 42px;
    margin-bottom: 0.2em;
  }
  .section-head h2 {
    font-size: 18px;
  }
  .o-typography-subhead {
    font-size: 24px;
  }

  .local-area-lookup {
    margin-top: 17px;
  }
}


@media (min-width: 972px) {
  .headline {
   font-size: 48px;
   margin-bottom: 0.2em;
  }
  .o-typography-subhead {
    font-size: 28px;
  }
  .local-area-lookup {
    margin-top: 22px;
  }
  .subhead {
    font-size: 18px;
  }
}

@media (min-width: 350px) and (max-width: 489px) {
  .stories__story {
    padding-left: 0;
  }
  .stories__story--container {
    max-width: 100%;
  }
  .core .stories__story--container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .enhanced .stories__story--image {
    float: left;
    width: 100px;
  }
  .enhanced .stories__story--blurb {
    box-sizing: border-box;
    float: right;
    padding-left: 10px;
    width: calc(100% - 100px);
  }
}