#at-a-glance {
border: 2px solid #f5f5f5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 2em 0 1em 0;
padding: 1em;
position: relative;
}

#at-a-glance h2 {
margin-top: 0;
}
.intro{
    display:none;
}
.intro.active{
    display:block;
}
#regions {
height: 350px;
margin-top: -.75em;
position: relative;
}
#regions g path{
    fill:#B0B0B0;
}
#regions g.active path{
    fill:#547002;
}
#layer_1, 
#layer_2, 
#layer_3, 
#layer_4, 
#layer_5 {
position: absolute;
}

#layer_1 {
top: 0;
left: 10px;
transform: translate(10px,0);
}

#layer_2 {
top: 93px;
left: 0; 
transform: translate(0,93px);
}

#layer_3 {
top: 205px;
left: 205px; 
transform: translate(205px,205px);
}

#layer_4 {
top: 137px;
left: 299px; 
transform: translate(299px,137px);
}

#layer_5 {
top: 153px;
left: 383px; 
transform: translate(383px,153px);
}

.nwt, 
.western,
.ontario,
.quebec,
.atlantic {
fill: #B0B0B0;
}

/* region labels */
.region-label {
color: #FFF;
font-family: 'Roboto Slab', serif;
font-size: .75em;
text-align: center;
position: absolute;
}

#label-western {
left: 65px;
top: 200px;
}

#label-ontario {
left: 240px;
top: 255px;
}

#label-quebec {
left: 335px;
top: 240px;
}

#label-atlantic {
color: #222;
left: 415px;
top: 235px;
}

/* regions fill color change when clicked */
.western-active {
fill: #547002;
}
.ontario-active {
fill: #425703;
}
.quebec-active {
fill: #A3C440;
}
.atlantic-active {
fill: #547002;
}


.popup {
    background: #FFF;
    border: 3px solid #8CB700;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.6) 0 2px 6px;
    -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 2px 6px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 2px 6px;
    display: none; 
    padding: 1em;
    position: absolute;
    top: 20%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    z-index: 5;
}
.popupContent{
    display:none;
}
.popup.active,.popupContent.active{
    display:block;
}
.popup h2 {
color: #222;
margin: 0;
}

.popup-info {
    font-family: 'Roboto Slab', serif;
    overflow-y: scroll;
    position: absolute;
    top: 50px;
    left: 1em;
    bottom: 1em;
    right: 1em;
}
.popup-info ul{
    margin:0;
}
.popup-info ul.stores {
    padding: .5em 0 0 0;
}
.popup-info ul.size {
    padding: 0;
}
.popup-info ul.stores li:before,.popup-info ul.size li:before{
    content:normal;
}
.popup-info ul.stores li {
color: #999;
display: inline;
margin-right: 1em;
}

.popup-info ul.size li {
color: #74AB02;
display: inline;
font-size: 1.75em;
margin-right: 0.5em;
}

.popup-info ul.size li .label {
    font-size: .75em;
}
.popup-info ul.size li .unit {
    font-size: .5em;
}

.popup-info td.total_stores {
color: #74AB02;
font-size: 1.5em;
text-align: right !important;
}

.close {
    float: right;
    width:17px;
    height:17px;
    /* margin: -.5em -.5em 0 0; */
    background:url(../img/close.png) no-repeat top left;
}
.intros{
    float:left;
    width:350px;
}
#logos {
/*
float: left;
position: relative;
width: 350px;
*/
margin-bottom:20px;
position:relative;
}
#logos ul{
    padding:0;
    margin:0;
}
#logos li:before{
    content:normal;
    
}
#logos ul li {
    display: inline;
    float: left;
    padding: 0;
    text-align: center;
    min-width: 150px;
}

#logos ul li a img {
padding: .5em 1em;
}

#map {
float: right;
width: 510px;
}

#map p {
margin-bottom: .25em;
}

#at-a-glance table {
margin-top: 1.5em; 
}

#at-a-glance th, #at-a-glance td,
.popup-info th, .popup-info td {
padding: 0 1em .25em 0;
text-align: left;
}

#at-a-glance th,
.popup-info th {
color: #046332;
font-family: 'Roboto Slab', serif;
}
#at-a-glance td.store_logo{
    padding:10px 0;
    text-align:center;
}
#at-a-glance td.store_logo img{
/*
    max-height: 32px;
    width: auto;
    */
}
.total_stores,.footage,.communities_served {
color: #74AB02;
font-size: 2em;
}
.footage .unit{
    font-size:0.5em;
}

#at-a-glance .title {
color: #222;
margin-bottom: 0;
}

.asterisk { 
color: #999;
font-size: .75em;
font-style: italic;
}

#tooltip_store {
position: absolute;
top: -15px;
left: 35px;    
z-index: 4;
}

#tooltip_map {
position: absolute;
top: 50px;
left: 100px;    
z-index: 4;
}

.tooltip {
background-color: #222;
color: #FFF;
font-size: .75em;
padding:5px;
position: relative;
text-align: center;
width: 80px;
}

.tooltip:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #222;
top: 100%;
left: 50%;
margin-left: -10px;
}


/* Fix first logo nav li element position on Firefox */
@-moz-document url-prefix() {
    #logos ul li:first-child  {
        margin-left: -1em;
    }
}

@media only screen and (max-width: 40em) {
    .intros{
        width:inherit;
    }
    #at-a-glance {
    border: none;
    padding: 0;
    }

    #logos, #map {
    float: none;
    width: 100%;
    }

    #logos {
    padding-bottom: 0;
    }

    #logos ul li a img {
    padding: .5em;
    }

    #map {
    clear: both;
    }

    .popup {
    top: 55%;
    left: 2%;
    right: 2%;
    }

    .popup-info ul.stores li,
    .popup-info ul.size li {
    display: block;
    margin-right: 1em;
    }

}