/* SEVER FONTS*/

@font-face {
    font-family: "MuseoSlab 500";
    src: url("/~/media/data-visualizations/interactives/assets/fonts/Museo_Slab_500Webeot.eot");
    src: url("/~/media/data-visualizations/interactives/assets/fonts/Museo_Slab_500Webeot.eot?#iefix") format("embedded-opentype"),
         url("/~/media/data-visualizations/interactives/assets/fonts/Museo_Slab_500Webwoff.woff") format("woff"),
         url("/~/media/data-visualizations/interactives/assets/fonts/Museo_Slab_500.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
/*'Whitney SSm A', 'Whitney SSm B'  Font Family */

@font-face {
    font-family: 'Whitney SSm A', 'Whitney SSm B';
}
@font-face {
    font-family: 'Whitney SSm A', 'Whitney SSm B';
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Whitney SSm A', 'Whitney SSm B';
    font-weight: 300;
    font-style: normal;
}
/*******************************************************
Font stacks.
********************************************************/
/*******************************************************
Make sure em and strong are showing correct fonts.
********************************************************/
em,
i {
    font-style: italic
}
strong,
b {
    font-weight: 700
}
i+i,
i+em,
i+strong,
i+b,
em+i,
em+em,
em+strong,
em+b,
strong+i,
strong+em,
strong+strong,
strong+b,
b+i,
b+em,
b+strong,
b+b {
    font-style: italic;
    font-weight: 700
}
#systemsmenu .elflippo {
    background-color: #f00
}
#systemsmenu .transition,
#systemsmenu p,
#systemsmenu ul li i:before,
#systemsmenu ul li i:after {
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}
#systemsmenu .no-select,
#systemsmenu h2 {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
#systemsmenu ul li:nth-of-type(1) {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}
#systemsmenu ul li:nth-of-type(2) {
    -webkit-animation-delay: .75s;
    animation-delay: .75s
}
#systemsmenu ul li:nth-of-type(3) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}
#systemsmenu ul li:last-of-type {
    padding-bottom: 0
}
#systemsmenu ul li i:before,
#systemsmenu ul li i:after {
    position: absolute;
    width: 3px;
    height: 9px;
    background-color: #fff
}
@-webkit-keyframes flipdown {
    0% {
        opacity: 0;
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }
    5% {
        opacity: 1
    }
    80% {
        -webkit-transform: rotateX(8deg);
        transform: rotateX(8deg)
    }
    83% {
        -webkit-transform: rotateX(6deg);
        transform: rotateX(6deg)
    }
    92% {
        -webkit-transform: rotateX(-3deg);
        transform: rotateX(-3deg)
    }
    100% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
}
@keyframes flipdown {
    0% {
        opacity: 0;
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }
    5% {
        opacity: 1
    }
    80% {
        -webkit-transform: rotateX(8deg);
        transform: rotateX(8deg)
    }
    83% {
        -webkit-transform: rotateX(6deg);
        transform: rotateX(6deg)
    }
    92% {
        -webkit-transform: rotateX(-3deg);
        transform: rotateX(-3deg)
    }
    100% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
}
@media only screen and (min-width: 720px) {
    .phone-only {
        display: none !important
    }
}
@media only screen and (max-width: 719px) {
    .hide-on-phone {
        display: none !important
    }
}
@media screen {
    .print-only {
        display: none !important
    }
}
@media print {
    .hide-on-print {
        display: none !important
    }
}
.tttop {
    font-size: 11px;
    text-align: center;
    font-family: 'Whitney SSm A', 'Whitney SSm B', Calibri, "Helvetica Neue", HelveticaNeue, Arial, Helvetica, Roboto, sans-serif !important
}
.interactive-outer {
    width: 100%;
    font-family: 'Whitney SSm A', 'Whitney SSm B', Calibri, "Helvetica Neue", HelveticaNeue, Arial, Helvetica, Roboto, sans-serif;
    font-size: 10px;
    font-weight: 300;
	margin-bottom: 10px;
}
.interactive-outer .noSelect {
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none
}
.interactive-outer .interactive-inner {
    background-color: #545f6d;
    color: #fff;
    width: 100%;
    margin: 0 auto;
    position: relative;
    font-size: 1em;
    padding: 25px
}
.interactive-outer .interactive-inner #smLegislation,
.interactive-outer .interactive-inner #Legislation>.Category {
    color: #f0f2f2
}
.interactive-outer .interactive-inner #smLegislation .dark,
.interactive-outer .interactive-inner #Legislation>.Category .dark {
    color: #f0f2f2
}
.interactive-outer .interactive-inner #smDevelopment,
.interactive-outer .interactive-inner #Development>.Category {
    color: #f0f2f2
}
.interactive-outer .interactive-inner #smDevelopment .dark,
.interactive-outer .interactive-inner #Development>.Category .dark {
    color: #f0f2f2
}
.interactive-outer .interactive-inner #smFeatures,
.interactive-outer .interactive-inner #Features>.Category {
    color: #f0f2f2
}
.interactive-outer .interactive-inner #smFeatures .dark,
.interactive-outer .interactive-inner #Features>.Category .dark {
    color: #f0f2f2
}
.interactive-outer .interactive-inner #smAccess,
.interactive-outer .interactive-inner #Access>.Category {
    color: #f0f2f2
}
.interactive-outer .interactive-inner #smAccess .dark,
.interactive-outer .interactive-inner #Access>.Category .dark {
    color: #f0f2f2
}
.interactive-outer .interactive-inner #smProcessing,
.interactive-outer .interactive-inner #Processing>.Category {
    color: #f0f2f2
}
.interactive-outer .interactive-inner #smProcessing .dark,
.interactive-outer .interactive-inner #Processing>.Category .dark {
    color: #f0f2f2
}
.interactive-outer .interactive-inner #smLegislation,
.interactive-outer .interactive-inner #Legislation>.Category {
    background-color:  #9A4253
}
.interactive-outer .interactive-inner #smLegislation .dark,
.interactive-outer .interactive-inner #Legislation>.Category .dark {
    background-color:  #9A4253
}
.interactive-outer .interactive-inner #smLegislation .dark .light,
.interactive-outer .interactive-inner #Legislation>.Category .dark .light {
    background-color: #92556b
}
.interactive-outer .interactive-inner #smDevelopment,
.interactive-outer .interactive-inner #Development>.Category {
    background-color: #52829e
}
.interactive-outer .interactive-inner #smDevelopment .dark,
.interactive-outer .interactive-inner #Development>.Category .dark {
    background-color: #52829e
}
.interactive-outer .interactive-inner #smDevelopment .dark .light,
.interactive-outer .interactive-inner #Development>.Category .dark .light {
    background-color: #6f9bb4
}
.interactive-outer .interactive-inner #smFeatures,
.interactive-outer .interactive-inner #Features>.Category {
    background-color: #4eb692
}
.interactive-outer .interactive-inner #smFeatures .dark,
.interactive-outer .interactive-inner #Features>.Category .dark {
    background-color: #4Eb692
}
.interactive-outer .interactive-inner #smFeatures .dark .light,
.interactive-outer .interactive-inner #Features>.Category .dark .light {
    background-color: #72c5a8
}
.interactive-outer .interactive-inner #smAccess,
.interactive-outer .interactive-inner #Access>.Category {
    background-color: #C27232
}
.interactive-outer .interactive-inner #smAccess .dark,
.interactive-outer .interactive-inner #Access>.Category .dark {
    background-color: #C27232
}
.interactive-outer .interactive-inner #smAccess .dark .light,
.interactive-outer .interactive-inner #Access>.Category .dark .light {
    background-color: #d09283
}
.interactive-outer .interactive-inner #smProcessing,
.interactive-outer .interactive-inner #Processing>.Category {
    background-color: #727276
}
.interactive-outer .interactive-inner #smProcessing .dark,
.interactive-outer .interactive-inner #Processing>.Category .dark {
    background-color: #727276
}
.interactive-outer .interactive-inner #smProcessing .dark .light,
.interactive-outer .interactive-inner #Processing>.Category .dark .light {
    background-color: #8c8c8f
}
.interactive-outer .interactive-inner *,
.interactive-outer .interactive-inner *::before,
.interactive-outer .interactive-inner *::after {
    box-sizing: border-box
}
.interactive-outer .interactive-inner .sp_tooltip {
    display: inline;
    position: relative
}
.interactive-outer .interactive-inner #overviewtext {
    font-family: "MuseoSlab 500", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    margin: 0 0 2em 0
}
@media only screen and (min-width: 720px) {
    .interactive-outer .interactive-inner #overviewtext {
        font-size: 1.4em
    }
}
.interactive-outer .interactive-inner #intro {
    width: 100%;
    color: #f0f2f2;
    border-bottom: 3px solid #6b7179;
    margin-bottom: 1em
}
.interactive-outer .interactive-inner #intro h3 {
    font-family: "MuseoSlab 500", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    color: #f0f2f2;
    letter-spacing: .2px;
}
.interactive-outer .interactive-inner #intro p {
    font-family: 'Whitney SSm A', 'Whitney SSm B', Calibri, "Helvetica Neue", HelveticaNeue, Arial, Helvetica, Roboto, sans-serif;
    font-size: 11px;
    padding: 0 0 1em 0;
    letter-spacing: .6px
}
.interactive-outer .interactive-inner div#map-phone-notice {
    width: 100%;
  /* border: 2px solid #333; */
  text-align: center;
  padding: 4px;
  /* background: #848A93; */
  color: #fff;
  /* margin: 1em 0; */
}
.interactive-outer .interactive-inner .sp_tooltip:hover:after {
    background: #848a93;
    border-radius: 5px;
    bottom: 36px;
    color: #fff;
    content: attr(data-title);
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 260px;
    font-size: 10px;
    letter-spacing: .5px
}
.interactive-outer .interactive-inner .menu1>.sp_tooltip:hover:after {
    left: -110px
}
.interactive-outer .interactive-inner .menu2>.sp_tooltip:hover:after {
    left: -110px
}
.interactive-outer .interactive-inner .menu3>.sp_tooltip:hover:after {
    right: -26px
}
.interactive-outer .interactive-inner .sp_tooltip:hover:before {
    border: solid;
    border-color: #848a93 transparent;
    border-width: 10px 10px 0 10px;
    content: "";
    top: -12px;
    position: absolute;
    z-index: 99;
    display: block;
    right: 45%
}
.interactive-outer .interactive-inner table#table img {
    max-width: none;
    width: initial;
    margin: auto
}
.interactive-outer .interactive-inner table#table tr:nth-child(2n+2) {
    background-color: transparent
}
.interactive-outer .interactive-inner table#table col.col1,
.interactive-outer .interactive-inner table#table col.col2,
.interactive-outer .interactive-inner table#table col.col3 {
    width: 20%;
    border-left: 1px solid #3e4650
}
.interactive-outer .interactive-inner table#table tr {
    border-bottom: 1px solid #6b7179
}
.interactive-outer .interactive-inner table#table tr.Legislation {
    background-color:  #9A4253;
    color: #f0f2f2
}
.interactive-outer .interactive-inner table#table tr.Development {
    background-color: #52829e;
    color: #f0f2f2
}
.interactive-outer .interactive-inner table#table tr.Features {
    background-color: #4eb692;
    color: #f0f2f2
}
.interactive-outer .interactive-inner table#table tr.Access {
    background-color: #C27232;
    color: #f0f2f2
}
.interactive-outer .interactive-inner table#table tr.Processing {
    background-color: #727276;
    color: #f0f2f2
}
.interactive-outer .interactive-inner table#table td span.tablecontent {
    width: 100%;
    display: block;
    text-align: center
}
.interactive-outer .interactive-inner table#table .Category {
    background-color: #414b57;
    border-bottom: 1px solid #576474;
    cursor: pointer;
    padding: 10px 0 10px 34px;
    background: #414b57 url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img/toggleclosed.png') no-repeat 10px 13px;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}
.interactive-outer .interactive-inner table#table .Category.Legislation {
    background-color: #414b57;
}
.interactive-outer .interactive-inner table#table .Category.Development {
    background-color: #414b57;
}
.interactive-outer .interactive-inner table#table .Category.Features {
    background-color: #414b57;
}
.interactive-outer .interactive-inner table#table .Category.Access {
    background-color: #414b57;
}
.interactive-outer .interactive-inner table#table .Category.Processing {
    background-color: #414b57;
}
.interactive-outer .interactive-inner table#table .SubCategory {
    width: 37%
}
.interactive-outer .interactive-inner table#table tbody.rolledup tr.sub {
    display: none
}
.interactive-outer .interactive-inner table#table tbody.rolledup tr td.Category {
    background: #414b57 url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img/toggleopen.png') no-repeat 10px 13px
}
.interactive-outer .interactive-inner table#table tbody.rolledup tr td.Category.Legislation {
    background-color: #414b57;
}
.interactive-outer .interactive-inner table#table tbody.rolledup tr td.Category.Development {
    background-color: #414b57;
}
.interactive-outer .interactive-inner table#table tbody.rolledup tr td.Category.Features {
    background-color: #414b57;
}
.interactive-outer .interactive-inner table#table tbody.rolledup tr td.Category.Access {
    background-color: #414b57;
}
.interactive-outer .interactive-inner table#table tbody.rolledup tr td.Category.Processing {
    background-color: #414b57;
}
.interactive-outer .interactive-inner td {
    position: relative
}
.interactive-outer .interactive-inner span.tablecontent.x {
    font-size: 11px;
    line-height: 9px;
    letter-spacing: 1.4px
}
@media (max-width: 500px) {
    .interactive-outer .interactive-inner span.tablecontent.x {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        position: absolute;
        left: 1px
    }
}
.interactive-outer .interactive-inner #controls {
    float: right;
    width: 100%;
    margin: 12px 0 24px;
    border-top: 3px solid #6a717d
}
@media (max-width: 500px) {
    .interactive-outer .interactive-inner #controls {
        margin: 12px 0 -10px
    }
}
.interactive-outer .interactive-inner #controls label {
    display: block;
    font-family: 'Whitney SSm A', 'Whitney SSm B', Calibri, "Helvetica Neue", HelveticaNeue, Arial, Helvetica, Roboto, sans-serif
}
.interactive-outer .interactive-inner #controls h3 {
    float: left;
    width: 40%;
    padding: 14px 0 0 0;
    margin: 0
}
.interactive-outer .interactive-inner #controls h2.phone-only {
    color: #f0f8ff;
    font-size: 12px;
    float: left;
    width: 60%;
    margin: 16px 0 1px
}
.interactive-outer .interactive-inner #controls .selectwrap,
.interactive-outer .interactive-inner #controls .dropdown_wrap {
    float: right;
    width: 20%;
    position: relative;
    height: 55px
}
.interactive-outer .interactive-inner #controls .selectwrap .menulabel,
.interactive-outer .interactive-inner #controls .dropdown_wrap .menulabel,
.interactive-outer .interactive-inner #controls .selectwrap .dropdown_label,
.interactive-outer .interactive-inner #controls .dropdown_wrap .dropdown_label {
    float: left;
    font-family: 'Whitney SSm A', 'Whitney SSm B', Calibri, "Helvetica Neue", HelveticaNeue, Arial, Helvetica, Roboto, sans-serif;
    font-weight: 500;
    padding: 1em 0;
    line-height: 11px;
    font-size: 11px;
    position: relative;
	color: #848a93;
}
.interactive-outer .interactive-inner #controls .selectwrap .menulabel span,
.interactive-outer .interactive-inner #controls .dropdown_wrap .menulabel span,
.interactive-outer .interactive-inner #controls .selectwrap .dropdown_label span,
.interactive-outer .interactive-inner #controls .dropdown_wrap .dropdown_label span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #f0f2f2
}
.interactive-outer .interactive-inner #controls .selectwrap .dropdown_current,
.interactive-outer .interactive-inner #controls .dropdown_wrap .dropdown_current {
    float: left;
    width: 99%;
    padding: 10px;
    height: 32px;
    margin: 0;
    cursor: pointer;
    color: #f0f2f2;
    font-family: "MuseoSlab 500", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: 500;
    background: #848a93 url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img/toggle_down.png') no-repeat 100%
}
.interactive-outer .interactive-inner #controls .scrollmenu {
    width: 225px;
    margin: 20px -20px 10px;
    padding: 20px
}
.interactive-outer .interactive-inner #controls .scrollmenu .viewport {
    background-color: #414b57;
    color: #f0f2f2;
    width: 160px;
    height: 200px;
    overflow: hidden;
    position: relative;
    z-index: 9
}
.interactive-outer .interactive-inner #controls .scrollmenu .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0
}
.interactive-outer .interactive-inner #controls .scrollmenu .scrollbar {
    background: #aeb5b7;
    position: absolute;
    background-position: 0 0;
    float: right;
    width: 32px;
    z-index: 9;
    right: 2px;
    top: 65px
}
.interactive-outer .interactive-inner #controls .scrollmenu .track {
    background: #414b57;
    height: 100%;
    width: 3px;
    position: relative;
    padding: 0 1px;
    padding: 0;
    margin: 0 auto
}
.interactive-outer .interactive-inner #controls .scrollmenu .thumb {
    background: #f0f2f2;
    height: 20px;
    width: 25px;
    width: 3px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0
}
.interactive-outer .interactive-inner #controls .scrollmenu .thumb .end {
    background: transparent;
    overflow: hidden;
    height: 5px;
    width: 32px
}
.interactive-outer .interactive-inner #controls .scrollmenu .disable {
    display: none
}
.interactive-outer .interactive-inner #controls .scrollmenu.hide {
    display: none;
    z-index: 0
}
.interactive-outer .interactive-inner #controls ul.dropmenu {
    list-style: none;
    position: relative;
    float: inherit;
    width: 170px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 3px solid #aeb5b7
}
.interactive-outer .interactive-inner #controls ul.dropmenu li.state {
    background: #848a93 url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img/toggle_down.png') no-repeat 100%
}
.interactive-outer .interactive-inner #controls ul.dropmenu li {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: "MuseoSlab 500", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: 500;
    padding: 1px 7px;
    margin: 0;
    width: 170px;
    cursor: inherit;
    background-color: #aeb5b7;
    color: #414b57
}
.interactive-outer .interactive-inner #controls ul.dropmenu li:hover {
    background-color: #414b57;
    color: #aeb5b7
}
@media (max-width: 500px) {
    .interactive-outer .interactive-inner #controls .selectwrap,
    .interactive-outer .interactive-inner #controls .dropdown_wrap {
        float: right;
        width: 20%;
        position: relative;
        height: 55px
    }
    .interactive-outer .interactive-inner #controls .selectwrap .menulabel,
    .interactive-outer .interactive-inner #controls .dropdown_wrap .menulabel,
    .interactive-outer .interactive-inner #controls .selectwrap .dropdown_label,
    .interactive-outer .interactive-inner #controls .dropdown_wrap .dropdown_label {
        float: left;
        font-family: 'Whitney SSm A', 'Whitney SSm B', Calibri, "Helvetica Neue", HelveticaNeue, Arial, Helvetica, Roboto, sans-serif;
        font-weight: 500;
        padding: 1em 0;
        line-height: 11px;
        font-size: 11px;
        position: relative
    }
    .interactive-outer .interactive-inner #controls .selectwrap .menulabel span,
    .interactive-outer .interactive-inner #controls .dropdown_wrap .menulabel span,
    .interactive-outer .interactive-inner #controls .selectwrap .dropdown_label span,
    .interactive-outer .interactive-inner #controls .dropdown_wrap .dropdown_label span {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #f0f2f2
    }
    .interactive-outer .interactive-inner #controls .selectwrap .dropdown_current,
    .interactive-outer .interactive-inner #controls .dropdown_wrap .dropdown_current {
        width: 95%;
        padding: 5px;
        height: 24px;
        background-size: 50%
    }
    .interactive-outer .interactive-inner #controls .scrollmenu {
        width: 45px;
        margin: 6px -20px 10px;
        padding: 20px
    }
    .interactive-outer .interactive-inner #controls .scrollmenu .viewport {
        background-color: #414b57;
        color: #f0f2f2;
        width: 45px;
        height: 200px;
        overflow: hidden;
        position: relative
    }
    .interactive-outer .interactive-inner #controls .scrollmenu .overview {
        list-style: none;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0;
        margin: 0
    }
    .interactive-outer .interactive-inner #controls .scrollmenu .scrollbar {
        background: #aeb5b7;
        position: absolute;
        background-position: 0 0;
        float: right;
        width: 32px;
        z-index: 9;
        right: 2px;
        top: 65px
    }
    .interactive-outer .interactive-inner #controls .scrollmenu .track {
        background: #414b57;
        height: 100%;
        width: 3px;
        position: relative;
        padding: 0 1px;
        padding: 0;
        margin: 0 auto
    }
    .interactive-outer .interactive-inner #controls .scrollmenu .thumb {
        background: #f0f2f2;
        height: 20px;
        width: 25px;
        width: 3px;
        cursor: pointer;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0
    }
    .interactive-outer .interactive-inner #controls .scrollmenu .thumb .end {
        background: transparent;
        overflow: hidden;
        height: 5px;
        width: 32px
    }
    .interactive-outer .interactive-inner #controls .scrollmenu .disable {
        display: none
    }
    .interactive-outer .interactive-inner #controls .scrollmenu.hide {
        display: none;
        z-index: 0
    }
    .interactive-outer .interactive-inner #controls ul.dropmenu {
        list-style: none;
        position: relative;
        float: inherit;
        width: 170px;
        margin: 0;
        padding: 0;
        cursor: pointer;
        border: 3px solid #aeb5b7
    }
    .interactive-outer .interactive-inner #controls ul.dropmenu li.state {
        background: #848a93 url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img/toggle_down.png') no-repeat 100%
    }
    .interactive-outer .interactive-inner #controls ul.dropmenu li {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-family: "MuseoSlab 500", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-weight: 500;
        padding: 1px 7px;
        margin: 0;
        width: 170px;
        cursor: inherit;
        background-color: #aeb5b7;
        color: #414b57
    }
    .interactive-outer .interactive-inner #controls ul.dropmenu li:hover {
        background-color: #414b57;
        color: #aeb5b7
    }
}
.interactive-outer #drawer {
    display: none
}
.interactive-outer h3 {
    font-family: "MuseoSlab 500", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #f0f8ff;
    font-size: 14px;
    padding: 13px 0 0;
    letter-spacing: .2px
}
.interactive-outer #overviewmap {
    float: left;
    height: 570px;
    width: 100%
}
.interactive-outer #overviewmap h3 {
    clear: both
}
.interactive-outer #overviewmap .sel {
    float: left
}
.interactive-outer #overviewmap #chartarea {
    float: right;
    width: 64%;
    overflow: hidden
}
.interactive-outer #overviewmap #usmap {
    height: 445px;
    letter-spacing: .6px
}
.interactive-outer #overviewmap #usmap svg {
    margin: 0 0 4em
}
.interactive-outer #overviewmap #usmap svg .usa {
    stroke: none
}
.interactive-outer #overviewmap #usmap svg #USA.Legislation {
    fill:  #9A4253
}
.interactive-outer #overviewmap #usmap svg #USA.Development {
    fill: #52829e
}
.interactive-outer #overviewmap #usmap svg #USA.Features {
    fill: #4eb692
}
.interactive-outer #overviewmap #usmap svg #USA.Access {
    fill: #C27232
}
.interactive-outer #overviewmap #usmap svg #USA.Processing {
    fill: #727276
}
.interactive-outer #overviewmap #usmap svg .txt,
.interactive-outer #overviewmap #usmap svg .txtout {
    font-family: 'Whitney SSm A', 'Whitney SSm B', Calibri, "Helvetica Neue", HelveticaNeue, Arial, Helvetica, Roboto, sans-serif;
    font-size: 15px
}
.interactive-outer #overviewmap #usmap svg .txt .p,
.interactive-outer #overviewmap #usmap svg .txtout .p {
    stroke: #faf3f2;
    stroke-width: 5px;
    stroke-miterlimit: 2
}
.interactive-outer #overviewmap #usmap svg .txt {
    stroke: none;
    fill: #fff;
}
.interactive-outer #overviewmap #usmap svg .txt.VRstate {
    fill: #414b57
}
.interactive-outer #overviewmap #usmap svg .txt.VRstate.y {
    fill: #f0f2f2
}
.interactive-outer #overviewmap #usmap svg .txt.VRstate.p {
    fill: #f0f2f2
}
.interactive-outer #overviewmap #usmap svg .txt.VRstate.x,
.interactive-outer #overviewmap #usmap svg .txt.VRstate.n {
    fill: #414b57
}
.interactive-outer #overviewmap #usmap svg .txtout {
    stroke: none;
    fill: none
}
.interactive-outer #overviewmap #usmap svg .txtout.x {
    fill: #f0f2f2;
    /*stroke: #f0f2f2;*/
    /*stroke-width: 12px;*/
    stroke-miterlimit: 2;
    stroke: #414b57;
    stroke-width: 1px;

}
.interactive-outer #overviewmap #usmap svg .map {
    stroke-miterlimit: 10;
    stroke: #848a93;
    fill: #545f6d;
    /*fill: #414b57*/
}
.interactive-outer #overviewmap #usmap svg .map.VRstate {
    fill: #f0f2f2
}
.interactive-outer #overviewmap #usmap svg .map.smLegislation.y {
    fill:  #9A4253
}
.interactive-outer #overviewmap #usmap svg .map.smLegislation.n {
    fill: #fff
}
.interactive-outer #overviewmap #usmap svg .map.smLegislation.x {
    fill: #be8fa0
}
.interactive-outer #overviewmap #usmap svg .map.smDevelopment.y {
    fill: #52829e
}
.interactive-outer #overviewmap #usmap svg .map.smDevelopment.n {
    fill: #fff
}
.interactive-outer #overviewmap #usmap svg .map.smDevelopment.x {
    fill: #b2c9d7
}
.interactive-outer #overviewmap #usmap svg .map.smFeatures.y {
    fill: #4eb692
}
.interactive-outer #overviewmap #usmap svg .map.smFeatures.n {
    fill: #fff
}
.interactive-outer #overviewmap #usmap svg .map.smFeatures.x {
    fill: #bae3d5
}
.interactive-outer #overviewmap #usmap svg .map.smAccess.y {
    fill: #C27232
}
.interactive-outer #overviewmap #usmap svg .map.smAccess.n {
    fill: #fff
}
.interactive-outer #overviewmap #usmap svg .map.smAccess.x {
    fill: #ecd3cd
}
.interactive-outer #overviewmap #usmap svg .map.smProcessing.y {
    fill: #727276
}
.interactive-outer #overviewmap #usmap svg .map.smProcessing.n {
    fill: #fff
}
.interactive-outer #overviewmap #usmap svg .map.smProcessing.x {
    fill: #bfbfc2
}
.interactive-outer #overviewmap #usmap svg .map.y {
    stroke: #d4d2d2
}
.interactive-outer #overviewmap #usmap svg .map.smLegislation.p {
    fill: #414b57
}
.interactive-outer #overviewmap #usmap svg .map.smDevelopment.p {
    fill: #414b57
}
.interactive-outer #overviewmap #usmap svg .map.smFeatures.p {
    fill: #414b57
}
.interactive-outer #overviewmap #usmap svg .map.smAccess.p {
    fill: #414b57
}
.interactive-outer #overviewmap #usmap svg .map.smProcessing.p {
    fill: #414b57
}
.interactive-outer #overviewmap #Legislationsub span.selected {
    background-color:  #9A4253
}
.interactive-outer #overviewmap #Developmentsub span.selected {
    background-color: #52829e
}
.interactive-outer #overviewmap #Featuressub span.selected {
    background-color: #4Eb692
}
.interactive-outer #overviewmap #Accesssub span.selected {
    background-color: #C27232
}
.interactive-outer #overviewmap #Processingsub span.selected {
    background-color: #727276
}
.interactive-outer #overviewmap #systemsmenu {
    float: left;
    width: 32%;
    clear: both
}
.interactive-outer #overviewmap #systemsmenu .no-select,
.interactive-outer #overviewmap #systemsmenu h2 {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
@keyframes flipdown {
    0% {
        opacity: 0;
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }
    5% {
        opacity: 1
    }
    80% {
        -webkit-transform: rotateX(8deg);
        transform: rotateX(8deg)
    }
    83% {
        -webkit-transform: rotateX(6deg);
        transform: rotateX(6deg)
    }
    92% {
        -webkit-transform: rotateX(-3deg);
        transform: rotateX(-3deg)
    }
    100% {
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
}
.interactive-outer #overviewmap #systemsmenu .transition {
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}
.interactive-outer #overviewmap #systemsmenu+p {
    display: block;
    font-family: 'Whitney SSm A', 'Whitney SSm B', Calibri, "Helvetica Neue", HelveticaNeue, Arial, Helvetica, Roboto, sans-serif;
    font-size: 12px;
    color: #f0f2f2;
    clear: both
}
.interactive-outer #overviewmap #systemsmenu div.clear {
    cursor: pointer;
    background: transparent url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img//x.png') no-repeat 0 2px;
    padding: 0 0 0 14px;
    background-size: 13px;
    float: right
}
.interactive-outer #overviewmap #systemsmenu h1,
.interactive-outer #overviewmap #systemsmenu h2 {
    color: #f0f2f2;
    font-size: 14px;
    font-family: "MuseoSlab 500", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    margin: 0;
    padding: 12px 10px 8px 10px;
    line-height: 15px;
    letter-spacing: .1px
}
.interactive-outer #overviewmap #systemsmenu p {
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    position: relative;
    overflow: hidden;
    max-height: 800px;
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    margin: 0;
    z-index: 2;
    background-color: #414b57;
    padding: 0
}
.interactive-outer #overviewmap #systemsmenu p span.smenu {
    display: block;
    float: left;
    width: 100%;
    cursor: pointer;
    padding: 6px 10px;
    line-height: 14px;
    border-top: 1px solid #5a6573;
    letter-spacing: .7px;
    font-weight: 100;
    font-size: 11px;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.interactive-outer #overviewmap #systemsmenu ul {
    list-style: none;
    -webkit-perspective: 900;
    perspective: 900;
    padding: 0;
    margin: 0;
    clear: both
}
.interactive-outer #overviewmap #systemsmenu ul li {
    position: relative;
    padding: 0;
    margin: 0;
    padding-bottom: 0;
    padding-top: 0
}
.interactive-outer #overviewmap #systemsmenu ul li i {
    position: absolute;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    margin-top: 0;
    padding: 17px 14px 14px 18px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.15);
    height: 35px;
    width: 35px
}
.interactive-outer #overviewmap #systemsmenu ul li i:before,
.interactive-outer #overviewmap #systemsmenu ul li i:after {
    content: "";
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    position: absolute;
    background-color: #fff
}
.interactive-outer #overviewmap #systemsmenu ul li i:before {
    width: 14px;
    height: 3px;
    -webkit-transform: translate(-6px, -2px);
    -ms-transform: translate(-6px, -2px);
    transform: translate(-6px, -2px)
}
.interactive-outer #overviewmap #systemsmenu ul li i:after {
    width: 3px;
    height: 14px;
    -webkit-transform: translate(0, -7px) rotate(90deg);
    -ms-transform: translate(0, -7px) rotate(90deg);
    transform: translate(0, -7px) rotate(90deg)
}
.interactive-outer #overviewmap #systemsmenu ul li input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0
}
.interactive-outer #overviewmap #systemsmenu ul li input[type=checkbox]:checked~p {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    -webkit-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    transform: translate(0, 50%)
}
.interactive-outer #overviewmap #systemsmenu ul li input[type=checkbox]:checked~i:after {
    -webkit-transform: translate(-1px, -7px) rotate(0deg);
    -ms-transform: translate(-1px, -7px) rotate(0deg);
    transform: translate(-1px, -7px) rotate(0deg)
}
.interactive-outer #overviewmap #maptitle {
    font-size: 1em;
    padding-bottom: 1em;
    border-bottom: 3px solid #6a717d;
}
.interactive-outer #overviewmap #maptitle span.mttl {
    content: ' ';
    height: 20px;
    width: 20px;
    border: 1px solid #f0f8ff;
    float: left;
    margin: 4px 4px 0 0;
    background-color: #f0f2f2
}
.interactive-outer #overviewmap #maptitle span.mttl.Legislation {
    background-color:  #9A4253
}
.interactive-outer #overviewmap #maptitle span.mttl.Development {
    background-color: #52829e
}
.interactive-outer #overviewmap #maptitle span.mttl.Features {
    background-color: #4eb692
}
.interactive-outer #overviewmap #maptitle span.mttl.Access {
    background-color: #C27232
}
.interactive-outer #overviewmap #maptitle span.mttl.Processing {
    background-color: #727276
}
.interactive-outer #overviewmap #maptitle span.mtxt {
    font-size: 1.5em;
    font-weight: bolder;
    display: inline-block;
    white-space: normal;
    padding: 5px 0 0 0;
    line-height: 1.2em;
    letter-spacing: .6px
}
.interactive-outer #overviewmap #mapnote,
.interactive-outer #overviewmap #maplegend {
    margin: .5em 0
}
.interactive-outer #overviewmap #maplegend {
    display: block;
    clear: both;
    padding: 0
}
.interactive-outer #overviewmap #maplegend #y .i {
    background-color: #f0f2f2
}
.interactive-outer #overviewmap #maplegend #n .i {
    background-color: #414b57
}
.interactive-outer #overviewmap #maplegend #n .i.Legislation {
    background-color: #fff
}
.interactive-outer #overviewmap #maplegend #n .i.Development {
    background-color: #fff
}
.interactive-outer #overviewmap #maplegend #n .i.Features {
    background-color: #fff
}
.interactive-outer #overviewmap #maplegend #n .i.Access {
    background-color: #fff
}
.interactive-outer #overviewmap #maplegend #n .i.Processing {
    background-color: #fff
}
.interactive-outer #overviewmap #maplegend #x .i.Legislation {
    background: #be8fa0
}
.interactive-outer #overviewmap #maplegend #x .i.Development {
    background: #b2c9d7
}
.interactive-outer #overviewmap #maplegend #x .i.Features {
    background: #bae3d5
}
.interactive-outer #overviewmap #maplegend #x .i.Access {
    background: #ecd3cd
}
.interactive-outer #overviewmap #maplegend #x .i.Processing {
    background: #c1c1c1
}
.interactive-outer #overviewmap #maplegend #y .i.Legislation {
    background-color:  #9A4253
}
.interactive-outer #overviewmap #maplegend #y .i.Development {
    background-color: #52829e
}
.interactive-outer #overviewmap #maplegend #y .i.Features {
    background-color: #4eb692
}
.interactive-outer #overviewmap #maplegend #y .i.Access {
    background-color: #C27232
}
.interactive-outer #overviewmap #maplegend #y .i.Processing {
    background-color: #747474
}
.interactive-outer #overviewmap #maplegend #p .i.Legislation {
    background: #414b57
}
.interactive-outer #overviewmap #maplegend #p .i.Development {
    background: #414b57
}
.interactive-outer #overviewmap #maplegend #p .i.Features {
    background: #414b57
}
.interactive-outer #overviewmap #maplegend #p .i.Access {
    background: #414b57
}
.interactive-outer #overviewmap #maplegend #p .i.Processing {
    background: #414b57
}
.interactive-outer #overviewmap #maplegend #p .i {
    background: #414b57
}
.interactive-outer #overviewmap #maplegend .legend {
    display: table-cell;
    padding: 2px 28px 0 0;
    margin-top: 1em;
    white-space: nowrap
}
.interactive-outer #overviewmap #maplegend .legend#x,
.interactive-outer #overviewmap #maplegend .legend#p {
    display: none
}
.interactive-outer #overviewmap #maplegend .legend#x.show,
.interactive-outer #overviewmap #maplegend .legend#p.show {
    display: table-cell
}
.interactive-outer #overviewmap #maplegend .legend .i {
    content: ' ';
    height: 15px;
    width: 15px;
    border: 1px solid #f0f8ff;
    float: left;
    margin: 3px 5px 9px 0
}
.interactive-outer #overviewmap #maplegend .legend .ltxt {
    display: inline-block;
    white-space: nowrap;
    max-width: 374px;
    padding: 5px 0 0 0;
    line-height: 1.2em;
    letter-spacing: .6px
}
.interactive-outer #overviewmap #maplegend .legend:last-child {
    padding: 0
}
.interactive-outer #overviewmap #mapnotewrap {
    display: table-row;
    padding: 5px 0 0 14px;
    margin-left: 3%
}
.interactive-outer #overviewmap #mapnoteTitle {
    display: table-cell;
    margin: 7px 0 9px 28px;
    font-weight: 600
}
.interactive-outer #overviewmap #mapnote {
    display: table-cell
}
.interactive-outer #overviewmap #mapnote .note {
    padding: 6px 15px 0 1em;
    margin: 0;
    line-height: 1.1em;
    position: relative
}
.interactive-outer #overviewmap #maplegend.alt div.legend span.i.smLegislation.x {
    background:  #9A4253 url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img//patt01.png')
}
.interactive-outer #overviewmap #maplegend.alt div.legend span.i.smDevelopment.x {
    background: #52829e url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img//patt01.png')
}
.interactive-outer #overviewmap #maplegend.alt div.legend span.i.smFeatures.x {
    background: #4eb692 url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img//patt01.png')
}
.interactive-outer #overviewmap #maplegend.alt div.legend span.i.smAccess.x {
    background: #C27232 url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img//patt01.png')
}
.interactive-outer #overviewmap #maplegend.alt div.legend span.i.smProcessing.x {
    background: #747474 url('/~/media/data-visualizations/interactives/2016/voterinteractive/assets/img//patt01.png')
}