* { margin: 0; padding: 0; }
html *, html *:before, html *:after { box-sizing: inherit; }
body { width: 100%; max-width: 660px; height: 350px; box-sizing: border-box; margin: 0 auto; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(0,0,0,0); color: #666; overflow: hidden; }
h2 { font-family: 'Open Sans', sans-serif; font-size: 1.25em; font-weight: 400; line-height: 1.2; color: #ffffff; }
h3 { font-family: 'Open Sans', sans-serif; font-weight: 600; color: #F4C175; }
h4 { font-family: 'Open Sans', sans-serif; color: #2ab7b7; }
p, span, a { font-family: 'Open Sans', sans-serif; }
.hidden { display: none !important; }
.box { height: 100%; padding: 3px 10px; background: #006391; overflow: hidden; }
.container { position: relative; width: 100%; max-width: 500px; margin: 0 auto; }

.container.title-container { height: 50px; margin-top: 11px; margin-bottom: 7px; }
.container.title-container .summary { margin-top: 3px; }
.container.title-container .summary p { font-size: 1em; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; line-height: 1.1; color: #F9D5B6; }
.container.title-container .summary p span { font-family: 'Open Sans', sans-serif; font-weight: 600; }
.container.title-container .summary p span.large { font-size: 1.2em; color: #FF9A42; }

.container.toggle-container .toggles { position: relative; margin-top: 5px; }
.container.toggle-container .toggles:after { content: ""; display: table; clear: both; }
.container.toggle-container .toggles .button { display: inline-block; float: left; height: 34px; margin-right: 2px; border-bottom: 2px solid #42A7D6; font-size: .9em; background: #ffffff; text-align: center; color: #21536B; cursor: pointer; transition: color .5s ease, background .5s ease; }
.container.toggle-container .toggles .button.button-active, .container.toggle-container .toggles .button.button-active:hover { color: #966822; background: #FFC491; cursor: default; }
.container.toggle-container .toggles .button:hover { background: #FFD4AF; }
.container.toggle-container .toggles .button .text { margin: 0 8px; font-size: .9em; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; line-height: 32px; }

.container.chart-container { height: 210px; background: #fff; }
.container.chart-container .chart-box { position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); overflow: hidden; }
.container.chart-container .chart-box .chart { width: 100%; height: 100%; }
.container.chart-container .chart-box .chart .area { position: relative; width: 100%; margin-bottom: 5px; z-index: 2; }
.container.chart-container .chart-box .chart .area .candidate-label { height: 20px; margin-bottom: 2px; }
.container.chart-container .chart-box .chart .area .candidate-label span { font-size: .95em; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; line-height: 20px; }
.container.chart-container .chart-box .chart .area .candidate-label span.candidate-label-confirmed { font-size: .8em; font-style: italic; color: #7893A0; }
.container.chart-container .chart-box .chart .area .candidate-vote-span { position: absolute; top: 0; right: 0; }
.container.chart-container .chart-box .chart .area .candidate-vote-span .candidate-vote { font-size: .95em; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; line-height: 20px; }
.container.chart-container .chart-box .chart .area .bar { width: 100%; height: 25px; z-index: 2; }
.container.chart-container .chart-box .chart .area .bar .bar-inner { width: 0; height: 100%; transition: width 1s ease; }
.container.chart-container .chart-box .chart .area.area-lost { opacity: .6; }
.container.chart-container .chart-box .chart .area.area-cl .candidate-label { color: #6D92E0; }
.container.chart-container .chart-box .chart .area.area-cl .candidate-vote { color: #6D92E0; }
.container.chart-container .chart-box .chart .area.area-cl .bar .bar-vote { background: #4F81EF; }
.container.chart-container .chart-box .chart .area.area-jt .candidate-label { color: #4EBF83; }
.container.chart-container .chart-box .chart .area.area-jt .candidate-vote { color: #4EBF83; }
.container.chart-container .chart-box .chart .area.area-jt .bar .bar-vote { background: #37CC7C; }
.container.chart-container .chart-box .chart .area.area-woo .candidate-label { color: #DBC872; }
.container.chart-container .chart-box .chart .area.area-woo .candidate-vote { color: #DBC872; }
.container.chart-container .chart-box .chart .area.area-woo .bar .bar-vote { background: #F2D865; }
.container.chart-container .chart-box .chart .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.container.chart-container .chart-box .chart .overlay .overlay-lines .overlay-line { position: absolute; top: 0; left: calc(50.25% - 2px); width: 0; height: calc(100% - 20px); border: 1px dashed #CED8DD; z-index: 0; }
.container.chart-container .chart-box .chart .overlay .overlay-lines .overlay-line span { position: absolute; bottom: -20px; left: -20px; width: 40px; font-size: .75em; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-align: center; color: #7893A0; }
.container.chart-container .chart-box .vote-status { position: absolute; bottom: 0; left: 0; }
.container.chart-container .chart-box .vote-status p { font-size: .8em; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; line-height: 1.1; color: #7893A0; }
.container.chart-container .chart-box .vote-status p.vote-status-official { font-style: italic; }

.container.bottom-container { margin-top: 3px; }
.container.bottom-container p { font-size: .8em; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; color: #F9D5B6; }
.container.bottom-container p span { font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; }

.article { max-width: 890px; height: 440px; }
.article .box { padding: 0 20px; background: #fff; }
.article .container { max-width: 100%; }

.article .container.title-container { margin-top: 0; }
.article .container.title-container h2 { width: 100%; height: auto; margin-bottom: 15px; font-size: 1.85em; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-align: center; color: #444; }
.article .container.title-container .summary p { font-family: 'Open Sans', sans-serif; font-weight: 400; color: #004566; }
.article .container.title-container .summary p span { font-weight: 400; }
.article .container.title-container .summary p span.large { font-weight: 600; color: #0390d2; }

.article .container.toggle-container { margin-bottom: 2px; }
.article .container.toggle-container .toggles .button { border-bottom-width: 0; color: #FFA67A; background: #f1f1f1; }
.article .container.toggle-container .toggles .button:hover, .article .container.toggle-container .toggles .button.button-active { color: #FEFCFF; background: rgba(255, 123, 56, .76); }

.article .container.chart-container { border-bottom: 3px solid #2e5ca9; background: #f5f7fc; }
.article .container.chart-container .info-box .title { color: #004566; }
.article .container.chart-container .info-box .nominated p { color: #566f7b; }

.article .container.bottom-container p { color: #566f7b; }

@media screen and (max-width: 480px) {
  h2 { font-size: 1.15em; }
}

@media screen and (max-width: 435px) {
  h2 { font-size: 1em; }
}

@media screen and (max-width: 385px) {
  h2 { font-size: 1em; line-height: 1; }
}

@media screen and (max-width: 340px) {
  .article .box { padding: 0 10px; }
  .article .container.title-container h2 { font-size: 1.6em; }
}

@media screen and (max-width: 320px) {

}