/***
DEFAULTS
****/

@font-face {font-family: TitlingGothicFBCond-Standard; src: url(https://s3-us-west-2.amazonaws.com/gazdata-assets/2017+election+ballot/assets/fonts/TitlingGothicFBCond-Standard.otf);}
@font-face {font-family: BenetonSans-Regular; src: url(https://s3-us-west-2.amazonaws.com/gazdata-assets/2017+election+ballot/assets/fonts/BentonSans-Regular.otf);}

.container {
    padding: 0 15px;
    margin-right: auto;
    margin-left: auto;
}


body{
    font-family: 'BenetonSans-Regular', sans-serif;
    font-size: 100%;
    overflow-x: hidden;
    word-wrap:break-word;
    margin:0;
    padding:0;
}

.displaynone{display:none;}


html{
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
}
*, *:before, *:after {
    -webkit-box-sizing:inherit;
    -moz-box-sizing: inherit;
    box-sizing:inherit;
}


/***
Specific styles

Coderre: #ee5930
Projet Montreal: #6bbb34
Coalition Montreal: #ffad29
other: lightblue
***/
.graphic-contain{
    max-width:600px;
    height:auto;
    margin:0;
    padding:5px;
    display:block;
}

main{
    display:block;
    max-width:390px;
    width:100%;
    position:absolute;
    height:auto;
    float:left;
    z-index:2;
    top:0;
}
main:after{
    clear:both;
}
aside{
    width:100%;
    max-width:200px;
    height:450px;
    display:inline-block;
    position:relative;
    float:right;
}


/*SET MAX WIDTH to 380 to have buttons in full right column*/
h1{
    max-width:600px;
    font-weight:400;
    font-size:1.2rem;
    line-height:1.25em;
    color: black;
    display:inline-block;
    margin:5px 0px 10px 5px;
}
button{
    font-family: 'BenetonSans-Regular', sans-serif;
}
#chart-title{
    font-weight:700;
    font-family: 'TitlingGothicFBCond-Standard', sans-serif;
    font-size: 1.7rem;
}
h1 a{
    color:black;
    text-decoration: underline;
    text-decoration-style: none;
    text-decoration-skip: ink;
    text-decoration-color: hotpink;
}



.person-circle{
    display:block;
    position:relative;
    margin:3px;
    width:42px;
    height:42px;
    border-radius: 100%;
    display:block;
    position:relative;
    border: 2px solid;
    background-size: cover;
    background-repeat: no-repeat;
    float:left;
}
.person-circle:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:100%;
    opacity:0.25;
}
.person-circle.edc{
    border-color:#ee5930;
    background-color:#ee5930;

}
.person-circle.edc:after{
    background-color:#ee5930;
}

.person-circle.pm{
    border-color: #6bbb34;
    background-color: #6bbb34;
}
.person-circle.pm:after{
    background-color: #6bbb34;
}

.person-circle.cm{
    border-color:#ffad29;
    background-color: #ffad29;
}

.person-circle.cm:after{
    background-color: #ffad29;

}

.person-circle.other{
    border-color:lightblue;
    background-color:lightblue;
}
.person-circle.other:after{

    background-color:lightblue;
}

aside{
    padding:3px 5px;

}
.team-button{
    display:block;
    position:relative;
    width:100%;
    height:50px;
    margin:0 0 10px 0;
    padding:0;
    background:	#F5F5F5;
    outline:none;
    font-family: 'TitlingGothicFBCond-Standard', sans-serif;
    border:none;
    border-radius:5px;
    cursor:pointer;
    padding-top:2px;

}
.team-button:hover, .team-button.is-checked{
    background-color: lightgrey;
    cursor:pointer;
}


.seat-number{
    display:block;
    width:50px;
    height:50px;
    text-align:right;
    padding-top:4px;
    padding-right:5px;
    float:left;
    font-size:2.25rem;
    line-height:1.25em;
    font-weight:700;
}

.edc .seat-number{
    color:#ee5930;
}
.pm .seat-number{
    color:#6bbb34;
}

.cm .seat-number{
    color: #ffad29;
}


.other .seat-number{
    color: lightblue;
}
.team-name{
    display:inline-block;
    text-transform:uppercase;
    font-weight:400;
    font-family: 'BenetonSans-Regular', sans-serif;
    width:100%;
    max-width:130px;
    height:50px;
    font-size:1rem;
    text-align:left;
    float:left;

}
.team-name p{
    position:absolute;
    bottom:5px;
    margin:0;
}
aside .other p{
    bottom:10px;
}

.inline-button{
    background:none;
    border:none;
    outline:none;
    cursor:pointer;
    font-weight:400;
    font-size:1.2rem;
    line-height:1.25em;
    color: black;
    margin:0;
    padding:0;
    display:inline-block;
    text-decoration: underline;
    text-decoration-style: none;
    text-decoration-skip: ink;
    text-decoration-color: hotpink;
}

.inline-button:hover{
    background-color: lightgrey;
}

/*OVERLAY*/
#overlay{
    z-index: 10;
    width:385px;
    height:auto;
    position:absolute;

    top:140px;
    left:5px;
    background-color:white;
    border-radius:10px;
    padding:15px;
    border: 3px solid;
    display:inline-block;
    overflow-y:auto;
}
.imagehold{
    display:inline-block;
    position:relative;
    top:0;
    height:100%;
    vertical-align:top;
}

.imagehold:after{
}

#select-image{
    vertical-align:top;
    position:relative;
    display:inline-block;
    width:100px;
    height:100px;
    margin:0;
}
.imagehold img{
    vertical-align:top;
    width:100%;
    height:100%;
    border-radius:100%;

}

#select-info:before, #select-info:after{

}
#select-info{
    height:auto;
    display:inline-block;
    padding:0 10px;
    width:100%;
    max-width:240px;
}

#select-district{
    font-style:italic;
}

#select-name{
    margin-top:0;
    margin-bottom:5px;
    max-width:205px;
}

#select-info h3, #select-info h4{
    margin-top:0;
    margin-bottom:5px;
    font-weight:400;
    line-height:1.25em;
}

#select-info #select-party{
    margin-top:10px;
}

.hide{
    visibility:hidden;
    display:none;
}

#close{
    background:none;
    border:none;
    z-index:12;
    position:absolute;
    right: 5px;
    top:5px;
    cursor:pointer;
    outline:none;
}

#close:focus{
    outline:none;
}

#close span{

    display:inline-block;
    font-size:16px;
    line-height:1.5em;
    border: 3px solid;
    border-radius:100%;
    width:30px;
    height:30px;
    margin:0 auto;
}
/****
TABLET
Normally a higher breakpoint but here it's set at one below max-width on WP-embeds so it'll start scaling as the parent doc collapses down
***/
@media only screen and (max-width : 599px) {
    html{
        font-size:12px;
    }

    main{
        max-width:600px;
        display:block;
        float:none;

    }
    h1{
        margin-bottom:0;
    }
    aside{
        display:inline-block;
        float:none;
        height:auto;
        max-width:600px;
    }

    .team-button{
        width:140px;
        height:32px;
        display:inline-block;
        margin-left:0;
        margin-right:5px;
        margin-bottom:5px;
        padding:0;
    }

    .seat-number{
    width:40px;
    height:32px;
    padding-top:2px;
    padding-right:5px;

    }

    .team-name{
    width:100%;
    height:32px;
    max-width:90px;


    }
    .team-name p{
        bottom:0px;
    }
    aside .other p{
        bottom:7px;
    }

    #overlay{
        width:95%;
        max-width:400px;
        margin:0 auto;
        left:0;
        right:0;
    }



    #select-image{
        display:inline-block;
    width:80px;
    height:80px;
    margin:0;
}
}

/***
Phones
***/
@media only screen and (max-width : 500px) {
    
    #select-info{
        width:100;
        max-width:180px;
        padding-left:5px;
    }
    
    .person-circle {
        margin:2px;
        width:34px;
        height:34px;
        border:none;
    }
    .person-circle:after{
        opacity:0.5;
    }
}

