/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700');


div#map {
    height: 100%;
    width: 100%;
}


#map svg {
    width: 100%;
    height: 100%;
    fill: #919185;
    stroke-width: 0.5px;
    stroke: white;
}

body {
    background-color: #FFFFFF;
    padding: 0px;
    
}

#stage {
    margin-top: 36px;
        box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: absolute;
    width: 650px;
    height: 750px;
    background-color: white;
    overflow:hidden;
        border-top-color: #d5ebf2;
    border-top-width: 6px;
    border-top-style: solid;
}

div#headline {
    position: absolute;
    top: 0px;
}


div#teaser {
    position: absolute;
    top: 25px;
    left: 30px;

}



div#title {
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 22px;
}

div#subline {
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    font-weight: 100;
    font-size: 15px;
    margin-top: 18px;
    width: 240px;
    line-height: 22px;
}

/*   ToolTip  */

a.tooltips {
    position: absolute;
    display: inline;
}
a.tooltips span {
position: absolute;
    width: 140px;
    color: #000000;
    background: #ffffff;
    height: 145px;
    line-height: 30px;
    text-align: left;
    padding: 10px;
    padding-left: 15px;

    
    /* visibility: hidden; */
    border-radius: 2px;
    box-shadow: 2px 0px 5px -1px rgba(0,0,0,0.44);
    -webkit-box-shadow: 2px 0px 5px -1px rgba(0,0,0,0.44);
    -moz-box-shadow: 2px 0px 5px -1px rgba(0,0,0,0.44);
}
a.tooltips span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0; height: 0;
    border-top: 8px solid #FFFFFF;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
a:hover.tooltips span {
    visibility: visible;
    opacity: 0.8;
    bottom: 30px;
    left: 50%;
    margin-left: -76px;
    z-index: 999;
}


#tooltip{
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-align: left;
    font-size: 14px;
}


p#tt_title {
    margin-top: 0px;
    border-bottom-style: solid;
    padding-bottom: 0px;
    border-bottom-width: 0.5px;
    border-bottom-color: #6f6f6f;
    border-bottom-style: dotted;
        line-height: 20px;
    padding-top: 5px;
}

p#tt_wage {
    font-weight: 100;
    color: grey;
    line-height: 17px;
    margin-top: -4px;
    font-size: 12px;
}

p#tt_change {
    font-weight: 100;
    color: grey;
    line-height: 17px;
    margin-top: -4px;
    font-size: 12px;
}

p.tt_label {
    font-weight: 100;
    color: black;
    line-height: 17px;
    margin-top: -4px;
    font-size: 12px;
        margin-bottom: 0px;
    font-weight: bold;
    color: grey;
}

#tooltip {
    opacity: 0;
}



/* legend */


.legenditem {
    
width: auto;
    float: left;
    height: 24px;
    margin-right: 18px;
    margin-top: 2px;
}

div#legend {
    margin-top: 10px;
}
.colorfield {
    width: 25px;
    height: 16px;
    float: left;
    margin-right: 7px;
}


.legendlabel {
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    font-weight: 100;
    font-size: 15px;
}


div#legend {
    width: 340px;
}



#tablecontainer {

    font-family: 'Univers', Arial, Helvetica, sans-serif;

}

.label_bottom {

}

#comparison {
    
    cursor: pointer;
    
}


div#tablecontainer {

    
}


div#close {
    width: 19px;
    height: 19px;
    border-style: solid;
    border-radius: 6px;
    padding-left: 3px;
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    padding-top: 3px;
    padding-left: 7px;
    float: right;
    position: absolute;
    right: 10px;
    border-color: #0081ad;
    top: 10px;
    color: #0081ad;
    border-width: 2px;
    display: none;
}

div#tabs {
    background: white;
    display: block;
    height: 200px;
    width: 650px;
}


.top_tab {
cursor: pointer;
    float:right;
    margin-left: 5px;
    background: #d5ebf2;
    color: #00384f;
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    
    width: auto;
    /* display: block; */
    font-weight: 300;
    display: inline-block;
    font-size: 12px;
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
        padding-left: 20px;
    padding-right: 20px;
}

.active {
    background-color: #0081ad;
    color: #fff;
}



div#comparison_container,
div#overview_container{
    position: absolute;
    top: 0px;
    background-color: white;
    width: 650px;
    height: 750px;
}

div#overview_title,
div#comparison_title{
    margin-left: 30px;
    margin-top: 25px;
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 5px;
}

div#overview_subline {
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    font-weight: 100;
    font-size: 15px;
    margin-left: 30px;
}


svg#overview_svg {
    width: 580px;
    height: 750px;
    background: #ff00001a;
    margin-left: 30px;
    margin-top: 20px;
}

.bars {
    /* background: red; */
    background: #0081ad;
    position: relative;
    top: -27px;
    height: 15px!important;
    left: 140px;
}

.barlabel{
        height: 20px;
    margin: 0px;
}

p.barlabel {
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 12px;
    position: relative;
    top: 5px;
    left: 10px;
}

div#overview_box {
    margin-top: 40px;
        margin-left: 30px;
}

p.barnumber {
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 11px;
    margin-left: 30px;
    color: #00384f;
    position: relative;
    top: 4px;
}

.bar_item {
    background: #d3e3ee9c;
    width: 590px;
    margin-bottom: 1px;
}

div#comparison_note {
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-top: 10px;
    margin-left: 40px;
}
.comm {
    font-family: 'Univers', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 12px;
    position: absolute;
    margin-top: -14px

}

div#comparison_box {
    margin-left: 30px;
    margin-top: 80px;
}

p.com_hours.comm {
    left: 180px;
}

p.com_currency.comm {
    left: 250px;
}

p.com_change.comm {
    left: 380px;
}
    
a.com_more.comm {
    left: 490px;
}

.bar_item.darkbluebar {
    background: #8aaec791!important;
}

a.com_more.comm {
    font-weight: 700;
    color: #005977;
        text-decoration: none;
}

div#comparison_legend {
    margin-top: 30px;
    margin-bottom: -70px;
}

p.barlabel.title {
    left: 40px;
    font-weight: 700;
}

p.com_hours.comm.title {
    font-weight: 700;
}

p.com_change.comm.title {
    font-weight: 700;
}

a.com_more.comm.title {
    color: black;
}

p#note {
    font-size: 11px;
    font-weight: 300;
    line-height: 1;
    color: grey;
    margin-top: -8px;
}