/*Nameplate*/

#nameplate {
    padding: 30px 0 70px 0;
    border-bottom: 2px solid #ccc;
}

#nameplate h1 {
    font-family: 'FranklinITCProBold';
    font-weight: normal;
    line-height: 1.3em;
}

#nameplate .body {
    font-size: 20px;
    font-family: 'FranklinITCProThin';
    font-weight: normal;   
}

/*Basic stuff*/

table {
    min-width: 100%;
}

.poll__chunk {
    padding: 0 0 70px 0;
}

.poll__chunk:before {
    display: block;
    content:  '';
    height: 1px;
    width: 55%;
    margin: 0 20% 70px 25%;
    background: #ccc
}

.image__break + .poll__group .poll__chunk:first-child:before {
    background: #fff;
}

.poll__chunk__header {
    width: 25%;
    float: left;
    padding-top: 20px;
}

.poll__chunk__image {
    width: 20%;
    float: right;
}

.poll__chunk__table { 
    width: 55%;
    float: left;
}

/*Image breaks*/

.image__break {
    padding: 70px 0;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    text-align: center;
}

.image__break img {
    width: 100%;
}

.image__break__head {
    font-family: 'FranklinITCProBold';
    font-weight: normal;
}

.graphic__part {
    width: 20%;
    padding: 0 2.5%;
    text-align: center;
    float: left;
    border-left: 1px dotted #666;
    margin-left: -1px;
}

.graphic__part img {
    max-width: 200px;
    margin: 0 auto 20px auto;
}

.image__break .graphic__part:first-of-type {
    border-left: 1px dotted transparent;
}

/*Headers*/

.poll__chunk__header p {
    font-size: 20px;
    padding: 0 60px 0 0;
    font-family: 'FranklinITCProThin';
    font-weight: normal;
    text-align: right;
}

.poll__chunk__note {
    font-size: 15px !important;
    clear: both;
    color: #666;
    text-align: center;
    margin-top: 20px;
}

.poll__chunk__image .inner {
    width: 70%;
    margin-left: 30%;
    padding-top: 20px;
}

.poll__chunk__image img {
    max-width: 320px;
    width: 100%;
    margin-bottom: 10px;
}

.graphic--big--bold {
    font-family: 'FranklinITCProBold';
    font-weight: normal;
    font-size: 36px;
    line-height: 1em;
    margin: 0 0 8px 0; 
}

.blue--big { color: #0082C6;}
.red--big { color: #ED1C24;}

.graphic--text {
    font-size: 16px;
    color: #666;
}

/*Table*/



/*Table header*/

.poll__head__cell {
    float: left;
    position: relative;
    height: 20px;
    display: block;
}

.poll__head__cell span {
    font-family: 'FranklinITCProBold';
    font-weight: normal;
    position: absolute;
    display: block;
    text-align: left;
    width: 90px;
    bottom: 6px;
    font-size: 14px;
    line-height: 14px;
    left: 0px;
    text-shadow: 0px 0px 5px #fff;
}

.poll__head__cell:last-of-type span {
    text-align: right;
    right: 0px;
    left: inherit;
}

.poll__chunk__table td {
    padding: 8px 0;
    border-top: 1px dotted #ccc;
}

.poll__chunk__table tr td:first-child {
    border: none;
}

.poll__chunk__table .leader--row td {
    border-top: 1px solid #ccc !important;
}

.group--head, .leader--group--head {
    text-transform: uppercase;
}

.leader--group--head {
    font-family: 'FranklinITCProBold';
    font-weight: normal;    
}

/*Chart*/

.bar-group {
    width: 80%;
}

.bar {
    background: #ccc;
    border: 2px solid #fff;
    margin: -2px;
    height: 20px;
    float: left;
    cursor: default;
}

.bar--active {
    z-index: 100;
    border: 2px solid #000;
    position: relative;
}

.bar__label {
    font-size: 13px;
    padding-left: 8px;
    cursor: default;
}

/*Chart classes*/



.blue.key.darker { background: #2682C4 }
.normal.darker { background: #ddd}

.blue.key { background: #CEDCF1 }
.normal { background: #eee}

.blue.key.darker .bar__label { color: #fff }
.blue.key .bar__label, .normal .bar__label { color: #0F5587 }


/*Mobile stuff*/

.header--mobile, .cell--mobile, .for-mobile {
    display: none
}

.embedded {
    max-width: 800px;
    padding: 20px 0;
    border-top: none;
    border-bottom: none;
}

.embedded:before {
    display: none;
}

.embed-cue {
    margin-top: 15px;
    
    text-align: right;
    clear: both;
}

.embed-cue a {
    font-family: 'FranklinITCProBold';
    font-weight: normal; 
}

.mobile-scroll-cue {
    display: none;
    text-align: right;
    color: #999;
}

@media (max-width: 980px) {

    .poll__chunk__image, .poll__chunk__header {
        width: 55%;
        float: none;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    .poll__chunk__table {
        margin-top: 20px;        
    }

    .poll__chunk__header p {
        padding: 0;
        text-align: center;
    }

    .poll__chunk__image .inner {
        margin-left: 0;
        width: 100%;
    }

    .poll__chunk__image img {
        max-width: 200px;
    }

    .poll__chunk__table {
        width: 100%;
        float: none;
    }

}

@media (max-width: 780px) {
    #nameplate h1 {
        font-size: 30px;
    }

    #nameplate .body {
        font-size: 16px;
    }
}

@media (max-width: 590px) {

    .for-desktop {
        display: none
    }

    .for-mobile {
        display: block;
    }

    .cell--mobile, .header--mobile {
        display: table-cell
    }

    .header--mobile {
        line-height: 1.2em;
    }

    .graphic__part  {
        text-align: left;
        width: 100%;
        padding: 20px 0;
        margin: 0 0 0 0;
        border-left: none;
        border-bottom: 1px dotted #666;
   }

   .graphic__part img {
        max-width: 150px;
        float: left;
        margin: 0 15px 0 0;
   }

   .image__break .graphic__part:last-of-type {
        border-bottom: 1px dotted transparent;
    }

    .poll__chunk__table {
        overflow-x: scroll;
    }

    .poll__chunk {
        padding: 20px 0;
        border-top: 1px solid #999 !important;
    }

    .poll__chunk:first-child {
        border-top: none;
    }

    .poll__chunk:before {
        display: none
    }

    table td {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    table tr:nth-child(even) {
        background: #E9F2F9;
    }

    .bar-group, .chart--header {
        display: none;
    }


    .poll__chunk__header, .poll__chunk__image, .poll__chunk__table {
        width: 100%;
        float: none;
    }

    .poll__chunk__table td, .poll__chunk__table th {
        text-align: left;
        padding: 8px 2px;
        font-size: 13px;
    }

}