/* This HTML markup needs to be in the Footer of the View at http://futurecity.org/page/our-impact

<div class="region-container region-canada">
    <div class="region-name">
        <a href="/canada"></a>
    </div>
</div>
<div class="region-container region-china">
    <div class="region-name">
        <a href="/china"></a>
    </div>
</div>
<div class="region-container region-middle-east">
    <div class="region-name">
        <a href="/middle-east"></a>
    </div>
</div>

*/

.region-container.region-canada {
    position: absolute;
    top: 234px;
    left: -25px;
}

.region-container.region-china {
    position: absolute;
    top: 254px;
    left: -25px;
}

.region-container.region-middle-east {
    position: absolute;
    top: 274px;
    left: -25px;
}

.region-name {
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #006da4;
    border-radius: 8px;
    padding: 2px;
    background-color: #fff;
    position: relative;
}

.region-name a {
    display: block;
    margin: 0;
    width: 10px;
    height: 10px;
    background-color: #96d8ee;
    border-radius: 5px;
    position: relative;
    line-height: 11px;
    text-transform: lowercase;
    color: #0896CF;
    text-decoration: none;    
}

.region-name a:hover {
    background-color: #fdb913;
}

.region-container.region-canada a:after {
    content: 'Canada';
    padding-left: 19px;
    text-transform: none;
}

.region-container.region-china a:after {
    content: 'China';
    padding-left: 19px;
    text-transform: none;
}

.region-container.region-middle-east a:after {
    content: 'Middle East';
    display: block;
    padding-left: 19px;
    text-transform: none;
    width: 70px;
}

