/* CSS style declarations specific to federal demo */

body {
  background-color: #FFFFFF;
  }

/*** top-level elements ***/
div.topbox {
  background-color: white;
  }

/** parts of top-level elements **/

div.topboxhead {
  display: none;
  }

/** live results  **/
div#CTVECliveres {
  background-color: #ffffff;
  border: 0;
  }
div#CTVECliveres .pts {
  background-color: white;
  }
.phone div#CTVECliveres .pts {
  display: inline-block;
  text-align: justify-all;
  }
div.liveres .pts .pty {
  border: 1px solid #d1d1d1;
  text-align: center;
  }
.phone div#CTVECliveres .pts tbody {
  display: block;
  text-align: center;
  }
.phone div#CTVECliveres .pts tr {
  display: block;
  }
.phone div.liveres .pts .pty {
  display: inline-block;
  width: auto;
  border: none;
  }
div.liveres .pts .pty .nm {
  font-weight: bold;
  }
div.liveres .pts .pty .nm,
div.liveres .pts .pty .el {
  font-size: 120%;
  padding: 0.5em;
  }
.phone div.liveres .pts .pty .nm,
.phone div.liveres .pts .pty .el {
  font-size: 85%;
  padding: 0.1em;
  padding-top: 0.5em;
  height: 20px;
  }
div.liveres div.elhead {
  font-weight: bold;
  padding-top: 20px;
  padding-bottom: 10px;
  }
div.liveres div.elhead span.sub {
  display: block;
  font-size: 80%;
  font-weight: normal;
  }

/** map **/

div.tablet div#CTVECmap .in,
div.phone div#CTVECmap .in {
  display: block; /* no good reason not to show these in small windows on non-touch devices */
  }

/** results **/
div#CTVECresults {
  border: 1px solid #e0e0e0;
  background: white;
  }
div.tablet div#CTVECresults,
div.phone div#CTVECresults {
  width: 100%;
  height: 422px;
  position: absolute;
  top: 161px; /* this is w.r.t. some ancestor element, and will need adjustment when layout changes */
  left: 0;
  }
div.tablet div#CTVECresults.in_none,
div.phone div#CTVECresults.in_none {
  display: none;
  }
.tablet div#CTVECresults .screenDimmer,
.phone div#CTVECresults .screenDimmer {
  display: none;
  z-index: -30;
  }
.tablet div#CTVECresults .ti, 
.tablet div#CTVECresults .bo,
.phone div#CTVECresults .ti, 
.phone div#CTVECresults .bo {
  position: relative; /* must be positioned element or falls behind positioned screenDimmer */
  }
.tablet div#CTVECresults.in_map .screenDimmer,
.tablet div#CTVECresults.in_edlist .screenDimmer,
.phone div#CTVECresults.in_map .screenDimmer,
.phone div#CTVECresults.in_edlist .screenDimmer {
  background-color: black;
  opacity: 0.75;
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 15;
  }
div#CTVECresults_ti .ti1 {
  background-color: #0366c3;
  color: white;
  height: 50px;
  padding-left: 20px;
  }
div#CTVECresults_ti div.str {
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
  }
.phone div#CTVECresults_ti div.str {
  line-height: 100%; /* WRT font size */
  padding: 0.5em 0;
  }
div#CTVECresults_ti .ti2 {
  position: relative;
  background-color: #3b3b3b;
  height: 30px;
  }
div#CTVECresults_ti .ti2 div {
  color: white;
  }
div#CTVECresults_ti .ti2 .vot,
div#CTVECresults_ti .ti2 .pct,
div#CTVECresults_ti .ti2 .rep {
  display: none;
  }
div#CTVECresults_ti .ti2 > div {
  top: 8px;
  font-size: 80%;
  }
div#CTVECresults_ti .ti2 .pol {
  display: block;
  left: 20px;
  }
div#CTVECresults_ti .ti2 .tvt {
  display: block;
  right: 3%;
  }
div#CTVECresults .close { /* no close box */
  display: none;
  }
div#CTVECresults_bo div.votes {
  top: 0;
  height: 355px;
  width: 100%;
  padding-left: 0;
  }
.tablet div#CTVECresults_bo div.votes,
.phone div#CTVECresults_bo div.votes {
  background-color: white;
  }
div#CTVECresults_bo div.votes hr {
  display: none;
  }
div#CTVECresults .candidate {
  height: 70px;
  border-bottom: 1px solid #e1e1e1;
  border-left: 4px solid black; 
  padding-left: 20px;
  }
.phone div#CTVECresults .candidate {
  padding-left: 10px;
  }
div#CTVECresults .candidate .logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 105px;
  height: 70px;
  font-size: 24px;
  line-height: 75px;
  text-align: center;
  color: #808080;
  }
div#CTVECresults .candidate .logo img {
  width: 104px;
  height: 70px;
  }
.phone div#CTVECresults .candidate .logo {
  display: none;
  }
/*
div#CTVECresults .candidate .r1,
div#CTVECresults .candidate .r2 {
  padding-left: 105px;
  font-size: 18px;
  width: 100%; 
  }
.phone div#CTVECresults .candidate .r1,
.phone div#CTVECresults .candidate .r2 {
  left: 5px;
  font-size: 14px;
  width: 97%; 
  }
.phone div#CTVECresults .candidate .r1 { top: 15px; }
div#CTVECresults .candidate .r1 .party { display: none; }
div#CTVECresults .candidate .r1 .name { }
.phone div#CTVECresults .candidate .r1 .name { }
div#CTVECresults .candidate .r1 .voteslabel {
  display: inline-block;
  float: right;
  padding-right: 3%;
  color: #808080;
  }
.phone div#CTVECresults .candidate .r1 .voteslabel {
  padding-right: 3%;
  font-size: 80%;
  }
div#CTVECresults .candidate .r2 { top: 40px; }
.phone div#CTVECresults .candidate .r2 { top: 35px; }
div#CTVECresults .candidate .r2 .party { color: #808080; }
.phone div#CTVECresults .candidate .r2 .party { }
div#CTVECresults .candidate .r2 .pbar { display: none; }
div#CTVECresults .candidate .r2 .vot {
  position: static;
  display: inline-block;
  float: right;
  width: auto;
  font-weight: bold;
  padding-right: 0.5em;
  }
div#CTVECresults .candidate .r2 .pct:before { content: '('; }
div#CTVECresults .candidate .r2 .pct:after { content: ')'; }
div#CTVECresults .candidate .r2 .pct { position: static;
  display: inline-block;
  float: right;
  width: auto;
  font-weight: normal;
  padding-right: 3%;
  }
.phone div#CTVECresults .candidate .r2 .pct { padding-right: 5px; }
*/

div#CTVECresults .candidate .c2, 
div#CTVECresults .candidate .c3 {
  font-size: 18px;
  }
div.tablet div#CTVECresults .candidate .c2, 
div.tablet div#CTVECresults .candidate .c3 {
  font-size: 15px;
  }
div.phone div#CTVECresults .candidate .c2, 
div.phone div#CTVECresults .candidate .c3 {
  font-size: 14px;
  }
div#CTVECresults .candidate .c2 {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 15px;
  padding-left: 105px;
  }
div.phone div#CTVECresults .candidate .c2 {
  padding-left: 5px; 
  }
div#CTVECresults .candidate .c3 {
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 15px;
  padding-right: 15px;
  }
div#CTVECresults .candidate .c2 .name,
div#CTVECresults .candidate .c3 .voteslabel {
  height: 25px;
  }
div.phone div#CTVECresults .candidate .c2 .name,
div.phone div#CTVECresults .candidate .c3 .voteslabel {
  height: 20px;
  }
div#CTVECresults .candidate .c2 .party,
div#CTVECresults .candidate .c3 .voteslabel {
  color: #808080;
  }
div#CTVECresults .candidate .c3 .voteslabel {
  font-size: 12px;
  }
div#CTVECresults .candidate .c3 .voteslabel,
div#CTVECresults .candidate .c3 .result {
  text-align: right;
  width: 100%;
  }
div#CTVECresults .candidate .c3 .vot,
div#CTVECresults .candidate .c3 .pct {
  position: static;
  }
div#CTVECresults .candidate .c3 .vot {
  font-weight: bold;
  padding-right: 0.25em;
  }
div#CTVECresults .candidate .c3 .pct {
  font-weight: normal;
  }
div#CTVECresults .candidate .c3 .pct:before { content: '('; }
div#CTVECresults .candidate .c3 .pct:after { content: ')'; }

/** riding list **/
div#CTVECedlist {
  }
div.phone div#CTVECedlist {
  position: static;
  height: auto;
  width: 100%;
  }

div#CTVECedlist .edlh {
  position: absolute;
  top: 0; /* without which Firefox assumes 'somewhere near the top' */
  z-index: 1;
  width: 300px; /* not 100%, because we're not in the same z-plane as our container */
  }
div#CTVECedlist .edlh.phone {
  position: relative
  z-index: auto;
  }

/* div#CTVECedlist .edlm { padding-top: 50px; } */ /* if desktop breadcrumbs */
div#CTVECedlist .edlm { padding-top: 80px; /* if no desktop breadcrumbs */
  max-height: 400px;
  }
div#CTVECedlist .edlm.top { padding-top: 50px; } 
div#CTVECedlist .edlm.bc2 { padding-top: 130px; }
div#CTVECedlist .edlm.bc3 { padding-top: 180px; }
div#CTVECedlist .edlm.bc4 { padding-top: 230px; }
div#CTVECedlist .edlm.bc5 { padding-top: 280px; }
div#CTVECedlist .edlm.bc6 { padding-top: 330px; }

div#CTVECedlist .ed,
div#CTVECedlist .edt,
div#CTVECedlist .lxt,
div#CTVECedlist .edl .vt,
div#CTVECedlist .edl .lx,
div#CTVECedlist .edl .pot,
div#CTVECedlist .edl .lxs > div {
  padding-left: 20px;
  line-height: 110%;
  position: relative;
  }
div#CTVECedlist .ed,
div#CTVECedlist .edt,
div#CTVECedlist .lxt,
div#CTVECedlist .edl .lx,
div#CTVECedlist .edl .lxs > div {
  height: 32px;
  }
div#CTVECedlist .lxs .lx.active,
div#CTVECedlist .edl .ed.active {
  font-weight: bold;
  }
div#CTVECedlist .vt,
div#CTVECedlist .pot {
  background-color: #0366c3;
  padding-left: 20px;
  height: 50px;
  color: white;
  border-bottom: 1px solid white;
  }
div#CTVECedlist .vt.last,
div#CTVECedlist .vt.self {
  border-bottom: none;
  }

div#CTVECedlist .alphabet {
  background-color: #3b3b3b;
  color: #808080;
  padding-left: 20px;
  padding-right: 20px;
  height: 30px;
  overflow: hidden;
  line-height: 30px;
  font-size: 16px;
  text-align: justify;
  text-align-last: justify; /* not yet in Chrome 44 */
  white-space: nowrap;
  }
div#CTVECedlist .alphabet span.range {
  width: auto;
  padding-left: 0.25em;
  }
div.phone div#CTVECedlist .alphabet span.range {
  width: auto;
  }

div#CTVECedlist .alphabet .active {
  font-weight: bold;
  color: white;
  }

div#CTVECedlist .edt > div,
div#CTVECedlist .lxt > div {
  font-weight: bold;
  border-bottom: 1px solid #808080;
  margin-right: 20px;
  padding-bottom: 2px; /* separate underline from descenders - CTVELE-117 */
  }
div#CTVECedlist .lxt.self > div {
  border-bottom: none;
  color: #0366c3;
  }

/** postal code lookup **/
div#CTVECpostalcode {
  height: 48px;
  border: 1px solid #dfdfdf;
  }
div.phone div#CTVECpostalcode {
  margin-bottom: 0.5em;
  }

/** CTV right rail **/
div#CTVECrightrail {
  background-color: #e0e0e0;
  }
/** debug output **/
.phone pre.debug { 
  position: static;
  }
/*** communicate responsive breakpoints to JS side ***/
/* debugging feature to display responsive device */
div.responsiveTest div#CTVECdeviceIndicator { 
  z-index: 100;
  }
div.responsiveTest div#CTVECdeviceIndicator:after { 
  content: 'DESKTOP'; /* must come ahead of other choices */
  }

@media screen and (max-width: 760px) {
  div.responsiveTest div#CTVECdeviceIndicator:after { content: 'TABLET'; }
  div#CTVECdeviceIndicator { height: 20px; }
  div#CTVECedlist .edlh {width: 100%}
  .hidetablet { display: none; }
  .showtablet { display: block; }
  }
/* minor layout changes also at 520px breakpoint */
@media screen and (max-width: 414px) {
  div.responsiveTest div#CTVECdeviceIndicator:after { 
    content: 'PHONE';
    }
  div#CTVECdeviceIndicator { 
    height: 30px; 
    }
  .hidephone { display: none; }
  .showphone { display: block; }
  }

/* can override when meant to show over map or electoral district list */
div#CTVECresults.in_map { }
div#CTVECresults.in_edlist { }
div#CTVECresults.in_none { }
div.tablet div#CTVECresults.in_none,
div.phone div#CTVECresults.in_none { 
  z-index: 0;
  }
div.tablet div#CTVECresults.in_map,
div.tablet div#CTVECresults.in_edlist,
div.phone div#CTVECresults.in_map,
div.phone div#CTVECresults.in_edlist {
  z-index: 1002;
  min-width: 300px;
  width: 100%;
  }

/* do not display alphabet box if list too small to scroll */
div#CTVECedlist .edl.at-top.at-bottom .alphabet { 
  display: none;
  }
div#CTVECedlist .edl.at-top.at-bottom .edlm {
  padding-top: 50px;
  }