/*
------------------
GENERAL
------------------
*/

body {
    background: #fff;
    font-family: "Open Sans", Arial;
    font-weight: 400;
    font-style: normal;
}

h1, h3, h5 {
    font-weight: 200;
}

h2,h4,h6, strong {
    font-weight: 800;
}

footer {
    border-top: 1px #eee solid;
    padding:25px 0;
    margin-top:50px;
}

aside article div ul {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
}

table {
    text-align: center;
    margin: 10px -20px;
    border: 0;
}

nav {
    background: #fff;
}

article {
    padding: 50px 60px;
    border: 1px #efefef dotted;
    margin-top: .9375rem;
}

aside {
    padding-top: .9375rem;
}

hr {
    border:0;
    border-top-color: #eee;
}

/*
------------------
HELPER CLASSES
------------------
*/

.clear { 
    clear: both;
}

.right { 
    float:right;
}

.left { 
    float:left;
}

.text-small { 
    font-size: .7rem;
}

.has-tip,
.has-tip:focus, 
.has-tip:hover {
    font-weight: normal;
    border:0;
}

.ui-helper-hidden-accessible {
    display: none !important;
}

.align-left {
    float: left;
    margin: 0 0.5rem 0.5rem 0;
}


.align-right {
    float: right;
    margin: 0 0 0.5rem 0.5rem;
}

.label.secondary {
    margin-bottom: 0.25rem;
}

.nav-next {
    text-align: right;
}

/*
------------------
HEADER
------------------
*/


#header {
    background: #fff;
    padding: 20px 0;
    color: #444;
}


#header small {
    display: block;
    margin-left: 100px;
    margin-top: 0px;
    font-size: 74%;
}

#header h1 {
    color: #666;
    margin-bottom: 0;
    line-height: .8em;
}

#header .button-group {
    margin-top: 18px;
}

#header .button {
    background: #fff;
    border: 1px rgba(0, 0, 0, 0.2) solid;
    color: #666;
}

#header .button:hover {
    background: #fff;
    border: 1px rgba(0, 0, 0, 0.3) solid;
    color: #222;
}

#sidebar {
    border-left: 1px #efefef dashed;
}
/*
------------------
MAIN
------------------
*/

#cover {
    height: 400px;
    background-color: #efefef;
    background-image: url(../img/kindajean.png);
    background-repeat: no-repeat;
}

#map_box {
    padding: 0;
}

#map_container {
    background: #efefef url(../img/kindajean.png);
    padding: 20px 0;
}

#mainarticle {
    margin-top: -80px;
    background: #fff;
}

#coverarticle {
    margin-top: -200px;
    background: #fff;
}

#open {
    display:none;
    background: white;
    height: 180px;
    width: 100%;
    text-align: center;
    padding-top: 70px;
    font-size: 33px;
}

.politician-O  div#open {
    display: block;
}

.politician-O div {
    display: none;
}


#content .panel {
    background: #fff;
    border-color: #ddd;
}



#morebox.panel hr {
    border: 0;
    border-top: 1px #ccc solid;
    margin: 1em -20px;
}

#description p {
    font-size: .8rem;
}

.largeimg {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

#error {
    position: absolute;
    top: 200px;
    left: 200px;
    display: none;
}
/*
------------------
MAP COLORS
------------------
*/


.color_open    { background-color: #ccc; fill:#ccc;}
.color_gop,
.color_R       { background-color: #eea8a7; fill:#eea8a7; }
.color_dem, 
.color_D       { background-color: #a7d8ee; fill:#a7d8ee; }
.color_lvl1    { background-color: #fdecb9; fill:#fdecb9;}
.color_lvl2    { background-color: #fbe297; fill:#fbe297;}
.color_lvl3    { background-color: #fad974; fill:#fad974;}
.color_lvl4    { background-color: #f9cf51; fill:#f9cf51;}

.text_lvl1    { color: #fdecb9 !important; }
.text_lvl2    { color: #fbe297 !important; }
.text_lvl3    { color: #fad974 !important; }
.text_lvl4    { color: #f9cf51 !important; }
.text_dem     { color: #a7d8ee; }
.text_gop     { color: #eea8a7;}

.stroke         { stroke-width:4px;}

.stroke_D, .stroke_I    { stroke:#a7d8ee;}
.stroke_R    { stroke:#eea8a7; }

path.PV, rect.PV {stroke:#ccc;}

.color_disabled, .PV .bar, 
path.PV {
    background-color: #ddd !important; 
    fill:#ddd !important;
    -webkit-animation:none !important;
}
path.PV { 
    fill: none !important;}


.ES .bar, path.ES { opacity: 0.4}
.AS .bar, path.AS { opacity: 0.6}


/*
------------------
BLINKING 10s
------------------
*/

#page-4505 path.color_lvl4, 
#page-5 path.color_lvl4, 
#page-6 path.color_lvl4 
{
    -webkit-animation: pulse .5s infinite alternate;
}
@-webkit-keyframes pulse {
      0% {background-color: #f9cf51;fill: #f9cf51}
     50% {background-color: #fdecb9;fill: #fdecb9}
}


/*
------------------
KEYS AND CONTROLS
------------------
*/

#explained {
    margin-bottom: 5px;
}

#key-box {
    margin-bottom: 0px
}

#key-box li {
    float:none;
    display: block;
    padding: 2px 5px;
    font-size: .7rem;
    cursor: pointer;
}

#zoom_help {
    margin: 20px 0 0;
}
#zoom_help li .button.tiny {
    margin:  0 0 .25rem;
    border-left:  1px #ccc solid;
}
#zoom_help li:first-child .button.tiny {
    border: 0;
}
#map_info {
    display: none;
}

#map_controls{ 
    position: absolute;
    left:2px;
    top:2px;
    margin:0;
}

#map_controls li {
    list-style: none;
    color: #999;
    background: #efefef;
    border:1px #ccc solid;
    border-radius: 5px;
    vertical-align: middle;
    text-align: center;
    margin-bottom:2px;
    cursor: pointer;
    min-width:25px;
}

#map_controls li:hover, 
#zoom_help li:hover {
    background: #ccc;
    color:#666;
}



/*
------------------
AREA
------------------
*/

#area h4 {
    display: inline-block;
    margin: 0 5px 0 0;
}

#area .pvi {
    display: inline-block;
}

/*
------------------
POLITICIANS
------------------
*/

.politician{
    position: relative;
    margin-bottom:10px;
    min-height: 180px;
}

.politician.short {
    min-height: initial;
}

.politician .numbers{
    background: #efefef;
    border-top: 1px rgba(255,255,255,0.1) solid;
    border-bottom: 1px rgba(0,0,0,0.05) solid;
}


.politician.targeted {
    min-height: inherit;
}

.politician.targeted .info {
    border: 1px #ccc solid;
    border-width: 0 1px;
}


.politician.pol-Open #tooltip-RISK,
.politician.pol-Open div:not(#open){
    display:none !important;
}

.politician.pol-Open {
    height:auto;
}

.politician .risk {
    font-weight: normal;
}

.politician .party {
    position: absolute;
    top: 0px;
    right: 5px;
    font-weight: bold;
}

.politician.politician-D .party {
    color: #a7d8ee;
}

.politician.politician-R .party{
    color: #eea8a7;
}

.politician .photo {
    overflow: hidden;
    width: 40px;
    height: 50px;
    text-align: center;

}

.politician .mini {
    overflow: hidden;
    width: 60px;
    height: 50px;
    text-align: center;
    padding-top: 10px;
    border-right: 1px #ccc solid;
    font-weight: bold;
    font-size: 12px;
    line-height: 1.2;
}

.politician .photo img {
    margin: 0;
}

.politician .name {
    padding: 10px 0 0 8px;
    font-size: 12px;
    height: 50px;
    line-height: 1.2;
}

.politician .name .description {
    font-size: 10px;
}

.politician .info {
    font-size: 1em;
    line-height: 1.6;
    background: #fff;
    height: 50px;
}

.politician .info:after {
    content: "";
    display: table;
    clear: both;
}

.politician .info h4 {
    margin: 2px 0 5px 0;
    font-size: 1.2em;
}

.politician .PVI {
    position: absolute;
    top: 17px;
    right: 12px;
    color: #666;
}

.politician .title h3 {
    display: inline;
    margin-right: 5px;
    font-size: 1em;
}

.politician .number {
    z-index:2;
    right: 5px;
    top: 8px;
    margin:0;
    position: absolute;
    text-align: right;
}

.politician .number .score{
    font-weight: bold;
    display: inline-block;
    width: 30px;
}


.politician .scores {
    position: relative;
    text-align: right;
    font-size: 12px;
    overflow: hidden;
}

.politician .scores label {
    display: inline;
    position: absolute;
    z-index:2;
    left:40%;
    top:8px;
    margin:0;
}

.politician .numbers {
    text-align: left;
    border:1px #ddd solid;
    border-width:0 1px 1px 1px;
    position: relative;
    height:30px;
}

.politician .bar {
    height:100%;
    width:0%;
}

.politician .grade {
    position: absolute;
    left:-70px;
    top:0;
}

.politician .grade div.value {
    position: absolute;
    font-size: 5rem;
    font-weight: bold;
    color:#fff;
    text-shadow: 
    rgb(122,172,194) 1px -1px,
    rgb(122,172,194) 1px 1px,
    rgb(122,172,194) -1px -1px,
    rgb(122,172,194) -1px 1px,
    rgb(122,172,194) -2px 2px,
    rgb(122,172,194) -3px 3px,
    rgb(122,172,194) -4px 4px,
    rgb(122,172,194) -5px 5px,
    rgb(122,172,194) -6px 6px,
    rgb(122,172,194) -7px 7px,
    rgb(122,172,194) -8px 8px,
    rgb(122,172,194) -9px 9px,
    rgb(122,172,194) -10px 10px,
    rgb(122,172,194) -11px 11px,
    rgb(122,172,194) -12px 12px,
    rgb(122,172,194) -13px 13px,
    rgb(122,172,194) -14px 14px,
    rgb(122,172,194) -15px 15px,
    rgb(122,172,194) -16px 16px,
    rgb(122,172,194) -17px 17px,
    rgb(122,172,194) -18px 18px,
    rgb(122,172,194) -19px 19px,
    rgb(122,172,194) -20px 20px,
    rgb(122,172,194) -21px 21px,
    rgb(122,172,194) -22px 22px,
    rgb(122,172,194) -23px 23px,
    rgb(122,172,194) -24px 24px,
    rgb(122,172,194) -25px 25px,
    rgb(122,172,194) -26px 26px,
    rgb(122,172,194) -27px 27px,
    rgb(122,172,194) -28px 28px,
    rgb(122,172,194) -29px 29px,
    rgb(122,172,194) -30px 30px,
    rgb(122,172,194) -31px 31px,
    rgb(122,172,194) -32px 32px,
    rgb(122,172,194) -33px 33px,
    rgb(122,172,194) -34px 34px,
    rgb(122,172,194) -35px 35px,
    rgb(122,172,194) -36px 36px,
    rgb(122,172,194) -37px 37px,
    rgb(122,172,194) -38px 38px,
    rgb(122,172,194) -39px 39px,
    rgb(122,172,194) -40px 40px,
    rgb(122,172,194) -41px 41px,
    rgb(122,172,194) -42px 42px,
    rgb(122,172,194) -43px 43px,
    rgb(122,172,194) -44px 44px,
    rgb(122,172,194) -45px 45px,
    rgb(122,172,194) -46px 46px,
    rgb(122,172,194) -47px 47px,
    rgb(122,172,194) -48px 48px,
    rgb(122,172,194) -49px 49px;
    left: 10px;
}

.politician .grade .value.grade-10  {
   letter-spacing: -9px;
   font-size: 3.6rem;
   margin-top: 12px;
}

.politician .grade .value.grade-0 { 
    font-size: 4rem;
    margin-top: 12px;
}

.politician .grade .text {
   color: #fff;
    position: absolute;
    top: 93px;
    left: -103px;
    width: 200px;
    text-align: left;
    font-weight: normal;
    font-size: .8em;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background: rgb(122,172,194);
    padding: 2px 5px;
    text-transform: uppercase;

}

.politician .primaried {
    padding: 5px;
    font-weight: 200;
    text-align: center;
    line-height: 1.4;
}

.politician .primaried.color_gop { 
    display: none;
}


#back {
    position: absolute;
    bottom: 0px;
}

#back ul li {
    list-style: none;
}


.blog-main {
    padding-right: 0;
}



.button-group.remove-bottom .button {
    margin-bottom: 0;
}

.entry-content {
    margin-top: 2rem
}

.entry-tags .button{
    margin-bottom: 0.25rem;
}



/*
------------------
TOP BAR OVERWRITE
------------------
*/

.contain-to-grid {
    border-bottom: 1px #efefef solid;
}

.top-bar, .contain-to-grid {
    background: #fff;
}

.top-bar-section li a:not(.button), 
.top-bar-section .has-form, 
.top-bar .toggle-topbar.menu-icon a, 
.top-bar.expanded .top-bar-section ul li:hover > a,
.top-bar-section li:not(.has-form) a:not(.button){
    background: #fff;
    color: #333;
}

.top-bar-section li.active:not(.has-form) a:not(.button),
.top-bar-section li.active:not(.has-form) a:not(.button):hover,
.top-bar-section li:not(.has-form) a:not(.button):hover,
.top-bar-section ul li:hover > a, 
.top-bar.expanded .title-area, 
.top-bar.expanded .top-bar-section li a:not(.button), 
.top-bar.expanded .top-bar-section .has-form, 
.top-bar.expanded .toggle-topbar.menu-icon a,
.top-bar-section li a:not(.button):hover,
.top-bar-section ul li.active>a:hover,
.top-bar-section ul li.active>a{
    background: #efefef;
    color: #333;
}

.top-bar-section ul {
    background: none;
}

.top-bar .toggle-topbar.menu-icon a::after {
    -webkit-box-shadow: 1px 10px 1px 1px #000,1px 16px 1px 1px #000,1px 22px 1px 1px #000;
    box-shadow: 0 10px 0 1px #000,0 16px 0 1px #000,0 22px 0 1px #000;
}

.top-bar input {
    padding: .22rem 1rem .22rem .5rem;
}


/*
------------------
AUTOCOMPLETE
------------------
*/

.ui-autocomplete {
    background: #fff;
    border:1px #efefef solid;
    max-width:300px;
}

.ui-autocomplete li {
    padding:2px 5px;
    list-style: none;
}

.ui-autocomplete li:hover {
    background: #efefef;
}


/*
------------------
MAP
------------------
*/



#map {
    z-index: 0;
    cursor: grab;
    margin-bottom: 60px;
}

svg text,
svg#map text.stateLabel {
    fill:  #333;
    fill-opacity: .7;
    font-size: 12px;
    font-weight: bold;
    text-anchor: middle;
    pointer-events: none;
}

svg#map text.districtLabel {
    fill:  #333;
    fill-opacity: .6;
    font-size: 2px;
    text-anchor: middle;
    pointer-events: none;
    font-weight: 200;
}

path {
    cursor: pointer;
}

svg {
  fill: none;
  border: none;
}

svg text {
  fill: #333;
}

path {
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

path.district:hover,
path.state:hover {
    opacity: 0.5;
}

path.domain {
  stroke: none;
}

.y .tick line {
  stroke: #e2e2e2;
}

.district-border,
.state-border {
  fill: none;
  stroke: #777;
  stroke-linejoin: round;
  stroke-linecap: round;
}


.axis path,
.axis line {
  fill: none;
  stroke: #999;
  stroke-width:1.5px;
  shape-rendering: crispEdges;
}

.x.axis text {
    font-size:14px;
}

/*
------------------
CHART CONTAINER
------------------
*/


#chart_container {
    padding: 40px 0;
    background: #333;
}

#chart_container #pvi {
    color :white;
}

#chart_container text {
    fill: white;
}

#chart_container .datapoint {
    cursor: crosshair;
}

#chart_container .datapoint text {
    font-size: 0;
    fill: #333;
    text-anchor: middle;
}

#chart_container .datapoint:hover text,
#chart_container .datapoint.active text{
    font-size: 24px;
    font-weight: bold;
}

#chart_container .datapoint:hover circle,
#chart_container .datapoint.active circle {
    stroke: #333;
    stroke-width: 2px;
}

#chart_container svg text.legend {
    text-anchor: start;
}

/*
------------------
SOCIAL
------------------
*/


.fb-like-button {
    width: 130px !important;
    display: inline-block;
}

#twitter-widget-0 {
    vertical-align: top;
}

#facebook .fa-facebook,
#twitter .fa-twitter,
#googleplus .fa-google-plus {
    color: white;
}

#facebook .fa-square {
    color: #3b5998
}

#twitter .fa-square {
    color: #55acee
}

#googleplus .fa-square {
    color: #dd4b39
}

/*
------------------
WIDGETS
------------------
*/


.widget {
    margin : 0rem auto  .9375rem !important;
    border: 1px solid #efefef;
    padding: 1rem 0.5rem;
}

.widget h6 {
    margin-bottom: 0;
}

.widget hr {
    margin-top: 0.25rem;
}

.widget ul {
    margin: 0 0 0.5rem 0;
    padding: 0;
    font-size: 90%;
    list-style: none;
}

.widget ul li {
    margin-bottom: 0.25rem;
    padding: 0.25rem 0;
    border-top: 1px #eee solid;
}



/*
------------------
MOBILE FIXES
------------------
*/


@media only screen and (max-width: 64em) { 
    
    #map_box {
        margin-bottom: 20px;
    }

    #mapspace {
        padding-bottom: 20px;
    }

    #mainarticle,#coverarticle  {
        margin-top: 0px;
        
    }

    article { 
        padding: 10px;
    }

    #cover {
        height: 300px;
    }

    #sidebar {
        border: 0;
    }

    .align-left,
    .align-right {
        float: none;
        margin: 0;
    }

}    

@media only screen and (min-width: 40.063em){
    .joyride-tip-guide {
    width: 400px;
    left: inherit;
}
}