/*  Alberta Choropleth CSS  */





/*
----------------------------------------
    
    SETUP

----------------------------------------
*/


@font-face {

    font-family: 'WorkSans';
    src: url('resources/webfonts/woff2/WorkSans-ExtraBold.woff2') format('woff2'),
       url('resources/webfonts/woff/WorkSans-ExtraBold.woff') format('woff'),
       url('resources/webfonts/ttf/WorkSans-ExtraBold.ttf')  format('truetype');
    font-weight: 800;
    font-style: normal;

}

@font-face {

    font-family: 'WorkSans';
    src: url('resources/webfonts/woff2/WorkSans-SemiBold.woff2') format('woff2'),
        url('resources/webfonts/woff/WorkSans-SemiBold.woff') format('woff'),
        url('resources/webfonts/ttf/WorkSans-SemiBold.ttf')  format('truetype');
    font-weight: 600;
    font-style: normal;

}

html {

    background-color: #FFFEF9;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
     overflow-x: hidden; 

}

body {

    margin: 0;

}





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

----------------------------------------
*/


#header {

    height: 350px;
    background-color: #19262F;

    overflow: hidden;

}

h1 {

    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 45px 0px 0px 0px;

    font-family: 'WorkSans', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 50px;
    text-align: center;
    color: #E4E9ED;

    cursor: default;

}

#header hr {

    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #253645;

}

#intro {

    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 25px 0px 35px 0px;

    text-align: center;
    color: #E4E9ED;
    font-family: 'PT Serif', serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 30px;

    cursor: default;

}

#byline {
    
    margin: 0px auto;
    padding: 19px 0px;
    text-align: center;
    color: #E4E9ED;
    font-family: 'PT Serif', sans-serif;
    font-weight: 700;
    font-size: 12px;

}

#byline a {

    padding: 10px;

    color: #E4E9ED;
    text-decoration: none;
    cursor: pointer;

}

.italic {

    font-weight: 400;
    font-style: italic;

}





/*
----------------------------------------
    
    MENU

----------------------------------------
*/

#vis {

    height: 1030px;
    width: 960px;
    min-width: 960px;
    margin: 0 auto;
    white-space: nowrap;

}


#visMenu {

    float: left;
    display: inline-block;

    height: 1030px;
    width: 340px;

    background-color: #E4E3D5;

}

#visMenu h3 {

    margin: 0;
    padding: 61px 0px 22px 40px;

    font-family: 'WorkSans', 'Helvetica', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #646B6C;
    letter-spacing: 1.5px;
    line-height: 21px;

    cursor: default;

}

#vis hr {

    height: 0;
    width: 290px;
    margin-left: 0;

    border: 0;
    border-top: 1px solid #CAC9B9;

    background-color: #E4E3D5;

}

#menuTable {

    padding-top: 25px;
    padding-left: 40px;

    background-color: #E4E3D5;

}

.sideCategories {

    font-family: 'WorkSans', 'Helvetica', sans-serif;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.8px;
    line-height: 10px;
    color: #9A9A91;

    cursor: default;

}

.sideOptions {

    margin-top: 11px;
    margin-bottom: 20px;
    padding: 0;
    
    font-family: 'PT Serif', 'Georgia', serif;
    font-size: 12px;
    line-height: 21px;
    color: #505859;
    list-style: none;

}

.sideOptions > li {

    cursor: pointer;

}

.column-2 {

    padding-left: 24px;

}

#row-3, #row-5 {

    vertical-align: top;

}

#mid-hr {

    margin-top: 15px;

}

h4 {

    margin: 0;
    padding: 28px 0px 0px 40px;

    font-family: 'WorkSans', 'Helvetica', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #646B6C;
    letter-spacing: 0.8px;

    cursor: default;

}

#menuTable-2 {

    padding-top: 22px;
    padding-left: 40px;

}

#row-6 > .column-2 {

    padding-left: 62px;

}






/*
----------------------------------------
    
    CHOROPLETH

----------------------------------------
*/


#map {

    display: inline-block;
    height: 1030px;
    width: 100%;
    max-width: 620px;

    background-color: #FFFEF9;

}

#visTitle {

    height: 105px;
    width: 100%;
    max-width: 530px;

    margin: 40px auto;
    white-space: normal;

    text-align: center;
    color: #4F4E47;

    cursor: default;

}

h5 {

    margin: 0px auto;
    font-family: 'WorkSans', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.8px;

}

#propHeader {

    height: 81px;
    width: 100%
    max-width: 530px;
    margin: 15px auto 0px auto;
    line-height: 81px;

}

#propHeader>span {

    display: inline-block;
    line-height: 0;
    vertical-align: middle;

}

h2 {

    margin: 0;
    font-size: 20px;
    font-family: 'PT Serif', 'Georgia', serif;
    font-weight: 700;
    line-height: 27px;

}

#visMap {

    width: 450px;
    padding-left: 130px;

    fill: #BDB9B3;
    stroke: #FFFEF9;
    stroke-width: 0.8px;

}





/*
----------------------------------------
    
    LEGEND

----------------------------------------
*/


#legend {

    height: 50px;
    width: 260px;

    position: absolute;
    margin-top: -120px;
    margin-left: 40px;

}

#colourKey {
 
    height: 8px;
    width: 230px;
    margin: 11px auto;

}

#colourKeyB {
 
    height: 8px;
    width: 230px;
    margin: 11px auto;

}

#keyLabels {
    
    font-family: 'WorkSans', 'Helvetica', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #646B6C;

}

#labelLeft {

    float: left;
    margin-left: 15px;

}

#labelRight {

    float: right;
    margin-right: 15px;

}




/*
----------------------------------------
    
    REGIONS

----------------------------------------
*/


#regionsDiv {

    display: block;
    height: 350px;
    min-width: 960px;
    padding-top: 25px;
    padding-left: 40px;

    background-color: #FFFEF9;
    border-top: 1px solid #E4E3D5;

}

#regionsContainer {
    
    width: 960px;
    min-width: 960px;
    margin: 0 auto;

}

#regionsTitle {

    display: inline-block;
    width: 150px;
    height: 140px;
    margin-right: 21px;

    border-bottom: 1px solid #979797;

    cursor: default;

}

#regionsTitle h6 {

    margin-top: 0;

    font-family: 'WorkSans', 'Helvetica', sans-serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 1.5px;
    color: #4F4E47;

}

#regionsTitle hr {

    height: 0;
    width: 150px;

    border: 0;
    border-top: 1px solid #CAC9B9;

    background-color: #E4E3D5;

}

#smallRegions {

    float: left;
    display: inline-block;

    width: 350px;

}

.smallMap {

    display: inline-block;
    vertical-align: top;

    height: 140px;
    width: 150px;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border: 1px solid #979797;

}

.smallMap h8 {

    position: relative;

    left: 10px;
    top: 115px;

    font-family: 'WorkSans', 'Helvetica', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.8px;
    color: #4F4E47;

}

#medicineHat {

    margin-right: 21px;

}

.smallBot {

    margin-top: 45px;

}

#largeRegions {

    display: inline-block;

    width: 550px;
    height: 325px;

}

#largeRegions div {

    display: inline-block;
    vertical-align: top;

    width: 252px;
    height: 325px;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border: 1px solid #979797;

}

.regionMap svg {

    margin-top: -18px;
    
    fill: #BDB9B3;
    stroke: #FFFEF9;
    stroke-width: 1px;

}

#edmonton {

    margin-right: 21px;

}

#largeRegions h8 {

    position: relative;

    left: 10px;
    top: 300px;

    font-family: 'WorkSans', 'Helvetica', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.8px;
    color: #4F4E47;

}






/*
----------------------------------------
    
    FOOTER

----------------------------------------
*/


#footer {

    height: 60px;
    background-color: #19262F;
    clear: both;

}

#footerContainer {

    height: 60px;
    max-width: 960px;
    margin: 0 auto;

}

#twitterCredit {

    display: inline-block;
    float: left;
    width: 195px;

    padding-top: 11px;
    padding-left: 10px;

}

#twitterCredit a {

    padding: 10px;

    font-family: 'WorkSans', 'Helvetica', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #576F86;
    letter-spacing: 1px;

    cursor: pointer;
    text-decoration: none;

}

#twitter {
    
    padding: 10px;

    font-family: 'PT Serif', 'Georgia', serif;
    font-size: 12px; 
    font-weight: 700;

}

#logos {
    
    display: inline-block;
    float: right;
    height: 50px;
    width: 240px;

    margin-top: 5px; 
    margin-right: 30px;

}

#VoxLogo {

    display: inline-block;
    float: right;
    vertical-align: middle;

}

#vcLogo {

    display: inline-block;
    float: left;
    vertical-align: middle;

}





/*
----------------------------------------
    
    TOOLTIP

----------------------------------------
*/


#tooltip {

    position: absolute;
    width: auto;
    max-width: 150px;
    height: auto;
    padding: 12px;
    background-color: white;
    pointer-events: none;
    -moz-box-shadow: 0px 0px 20px -10px #515151;
    -webkit-box-shadow: 0px 0px 20px -10px #515151;
    box-shadow: 0px 0px 20px -10px #515151;
    border: 1px solid #d9dadc;

}

.hidden {
    
    display: none;

}

#tooltip p {
    
    margin: 0;
    font-family: 'PT Serif', 'Helvetica', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2px;
    color: #515151;

}

;