/*
 * {less}
 * define color theme for each party
 * mapping is based on party.id in party table
 */

@pid1_color: #b50000; /* clark - lib */
@pid2_color: #24418f; /* cummins - con */
@pid3_color: #57b749; /* sterk - grn */
@pid4_color: #ff8300; /* dix - ndp */
@you_color: #666666; /* gray */

@pid1_image: 'red'; 
@pid2_image: 'blue';
@pid3_image: 'green';
@pid4_image: 'orange';
@you_image: 'you';

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
    border-radius: @radius;
}



/* RESULTS ITEMS */
ul.partyNav li.nav_pid_1 a:hover, ul.partyNav li.nav_pid_1 a.selected { background-color: @pid1_color; }
ul.partyNav li.nav_pid_2 a:hover, ul.partyNav li.nav_pid_2 a.selected { background-color: @pid2_color; }
ul.partyNav li.nav_pid_3 a:hover, ul.partyNav li.nav_pid_3 a.selected { background-color: @pid3_color; }
ul.partyNav li.nav_pid_4 a:hover, ul.partyNav li.nav_pid_4 a.selected { background-color: @pid4_color; }




/* PARTY RESULTS ITEMS */
.partiesResultsContainer .pid_4,
.partiesResultsContainer .pid_3,
.partiesResultsContainer .pid_2,
.partiesResultsContainer .pid_1 {
    position: relative; 
    width: 411px; 
    height: 25px; 
    margin-bottom: 10px; 
    float: left;
}

.partiesResultsContainer .pid_4 .left,
.partiesResultsContainer .pid_2 .left,
.partiesResultsContainer .pid_3 .left,
.partiesResultsContainer .pid_1 .left {
    width: 68px; 
    height: 24px; 
    float: left; 
    color: #ffffff; 
    font-size: 18px; 
    padding: 1px 0px 0px 8px; 
}

.partiesResultsContainer .pid_1 .left { background-color: @pid1_color; }
.partiesResultsContainer .pid_2 .left { background-color: @pid2_color; }
.partiesResultsContainer .pid_3 .left { background-color: @pid3_color; }
.partiesResultsContainer .pid_4 .left { background-color: @pid4_color; }

.partiesResultsContainer .pid_4 .barContainer,
.partiesResultsContainer .pid_3 .barContainer,
.partiesResultsContainer .pid_2 .barContainer,
.partiesResultsContainer .pid_1 .barContainer {
    width: 255px; 
    height: 25px; 
    background: url(../../media/site/images/bargraph-divider.png) top left repeat-x; 
    float: left; 
    margin: 0px 5px 0px 2px; 
}

.partiesResultsContainer .pid_4 .barContainer .barBg,
.partiesResultsContainer .pid_3 .barContainer .barBg,
.partiesResultsContainer .pid_2 .barContainer .barBg,
.partiesResultsContainer .pid_1 .barContainer .barBg {
    height: 23px; 
    float: left; 
    padding: 2px 2px 0px 2px; 
}

.partiesResultsContainer .pid_1 .barContainer .barBg { background-color: @pid1_color; }
.partiesResultsContainer .pid_2 .barContainer .barBg { background-color: @pid2_color; }
.partiesResultsContainer .pid_3 .barContainer .barBg { background-color: @pid3_color; }
.partiesResultsContainer .pid_4 .barContainer .barBg { background-color: @pid4_color; }

.partiesResultsContainer .pid_4 .barContainer .barBg .barPercentage,
.partiesResultsContainer .pid_3 .barContainer .barBg .barPercentage,
.partiesResultsContainer .pid_2 .barContainer .barBg .barPercentage,
.partiesResultsContainer .pid_1 .barContainer .barBg .barPercentage {
    background: url(../../media/site/images/bargraph-bg.png) top left repeat-x; 
    height: 21px; 
    float: left; 
    width: 100%;
}

.partiesResultsContainer .pid_4 .percentage,
.partiesResultsContainer .pid_3 .percentage,
.partiesResultsContainer .pid_2 .percentage,
.partiesResultsContainer .pid_1 .percentage {
    float: left; 
    letter-spacing: -0.04em;
}

.partiesResultsContainer .pid_1 .percentage { color: @pid1_color; }
.partiesResultsContainer .pid_2 .percentage { color: @pid2_color; }
.partiesResultsContainer .pid_3 .percentage { color: @pid3_color; }
.partiesResultsContainer .pid_4 .percentage { color: @pid4_color; }




/* LEADER RESULTS ITEMS */
.leadersResultsContainer .pid_4,
.leadersResultsContainer .pid_3,
.leadersResultsContainer .pid_2,
.leadersResultsContainer .pid_1 {
    position: relative; 
    width: 411px; 
    height: 56px; 
    margin-bottom: 5px; 
    float: left;
}

.leadersResultsContainer .pid_4 .left,
.leadersResultsContainer .pid_3 .left,
.leadersResultsContainer .pid_2 .left,
.leadersResultsContainer .pid_1 .left {
    position: relative; 
    width: 76px; 
    height: 25px; 
    float: left; 
    border-top: 16px solid #ffffff;
    border-bottom: 15px solid #ffffff;
}

.leadersResultsContainer .pid_1 .left { background-color: @pid1_color; }
.leadersResultsContainer .pid_2 .left { background-color: @pid2_color; }
.leadersResultsContainer .pid_3 .left { background-color: @pid3_color; }
.leadersResultsContainer .pid_4 .left { background-color: @pid4_color; }

.leadersResultsContainer .pid_4 .barContainer,
.leadersResultsContainer .pid_3 .barContainer,
.leadersResultsContainer .pid_2 .barContainer,
.leadersResultsContainer .pid_1 .barContainer {
    width: 255px; 
    height: 25px; 
    background: url(../../media/site/images/bargraph-divider.png) top left repeat-x; 
    float: left; 
    margin: 16px 5px 0px 2px;
}

.leadersResultsContainer .pid_4 .barContainer .barBg,
.leadersResultsContainer .pid_3 .barContainer .barBg,
.leadersResultsContainer .pid_2 .barContainer .barBg,
.leadersResultsContainer .pid_1 .barContainer .barBg {
    height: 23px; 
    float: left; 
    padding: 2px 2px 0px 2px;
}

.leadersResultsContainer .pid_1 .barContainer .barBg { background-color: @pid1_color; }
.leadersResultsContainer .pid_2 .barContainer .barBg { background-color: @pid2_color; }
.leadersResultsContainer .pid_3 .barContainer .barBg { background-color: @pid3_color; }
.leadersResultsContainer .pid_4 .barContainer .barBg { background-color: @pid4_color; }

.leadersResultsContainer .pid_4 .barContainer .barBg .barPercentage,
.leadersResultsContainer .pid_3 .barContainer .barBg .barPercentage,
.leadersResultsContainer .pid_2 .barContainer .barBg .barPercentage,
.leadersResultsContainer .pid_1 .barContainer .barBg .barPercentage {
    background: url(../../media/site/images/bargraph-bg.png) top left repeat-x; 
    height: 21px; 
    float: left; 
    width: 100%;
}

.leadersResultsContainer .pid_4 .percentage,
.leadersResultsContainer .pid_3 .percentage,
.leadersResultsContainer .pid_2 .percentage,
.leadersResultsContainer .pid_1 .percentage {
    float: left; 
    letter-spacing: -0.04em; 
    margin-top: 16px;
}

.leadersResultsContainer .pid_1 .percentage { color: @pid1_color; }
.leadersResultsContainer .pid_2 .percentage { color: @pid2_color; }
.leadersResultsContainer .pid_3 .percentage { color: @pid3_color; }
.leadersResultsContainer .pid_4 .percentage { color: @pid4_color; }

.leadersResultsContainer .pid_4 .left img,
.leadersResultsContainer .pid_3 .left img,
.leadersResultsContainer .pid_2 .left img,
.leadersResultsContainer .pid_1 .left img {
    position: absolute; 
    top: -15px; 
    left: 0px; 
    .rounded-corners(5px); 
}

.leadersResultsContainer .pid_1 .left img { border: 3px solid @pid1_color; }
.leadersResultsContainer .pid_2 .left img { border: 3px solid @pid2_color; }
.leadersResultsContainer .pid_3 .left img { border: 3px solid @pid3_color; }
.leadersResultsContainer .pid_4 .left img { border: 3px solid @pid4_color; }




/* GRID ITEMS */
.gridPositions .pid_1.icon { background: url('../../media/site/images/grid/@{pid1_image}-point.png') top left no-repeat; }
.gridPositions .pid_1.label_left, .gridPositions .pid_1.label_right, .gridPositions .pid_1.label_top, .gridPositions .pid_1.label_bottom { background-color: @pid1_color; }
.gridPositions .pid_1 .label_left_arrow { background: url('../../media/site/images/grid/@{pid1_image}-label-left.png') top left no-repeat; }
.gridPositions .pid_1 .label_right_arrow { background: url('../../media/site/images/grid/@{pid1_image}-label-right.png') top left no-repeat; }
.gridPositions .pid_1 .label_top_arrow { background: url('../../media/site/images/grid/@{pid1_image}-label-top.png') top left no-repeat; }
.gridPositions .pid_1 .label_bottom_arrow { background: url('../../media/site/images/grid/@{pid1_image}-label-bottom.png') top left no-repeat; }

.gridPositions .pid_2.icon { background: url('../../media/site/images/grid/@{pid2_image}-point.png') top left no-repeat; }
.gridPositions .pid_2.label_left, .gridPositions .pid_2.label_right, .gridPositions .pid_2.label_top, .gridPositions .pid_2.label_bottom { background-color: @pid2_color; }
.gridPositions .pid_2 .label_left_arrow { background: url('../../media/site/images/grid/@{pid2_image}-label-left.png') top left no-repeat; }
.gridPositions .pid_2 .label_right_arrow { background: url('../../media/site/images/grid/@{pid2_image}-label-right.png') top left no-repeat; }
.gridPositions .pid_2 .label_top_arrow { background: url('../../media/site/images/grid/@{pid2_image}-label-top.png') top left no-repeat; }
.gridPositions .pid_2 .label_bottom_arrow { background: url('../../media/site/images/grid/@{pid2_image}-label-bottom.png') top left no-repeat; }

.gridPositions .pid_3.icon { background: url('../../media/site/images/grid/@{pid3_image}-point.png') top left no-repeat; }
.gridPositions .pid_3.label_left, .gridPositions .pid_3.label_right, .gridPositions .pid_3.label_top, .gridPositions .pid_3.label_bottom { background-color: @pid3_color; }
.gridPositions .pid_3 .label_left_arrow { background: url('../../media/site/images/grid/@{pid3_image}-label-left.png') top left no-repeat; }
.gridPositions .pid_3 .label_right_arrow { background: url('../../media/site/images/grid/@{pid3_image}-label-right.png') top left no-repeat; }
.gridPositions .pid_3 .label_top_arrow { background: url('../../media/site/images/grid/@{pid3_image}-label-top.png') top left no-repeat; }
.gridPositions .pid_3 .label_bottom_arrow { background: url('../../media/site/images/grid/@{pid3_image}-label-bottom.png') top left no-repeat; }
.gridPositions .pid_3 .label_top, .gridPositions .pid_3 .label_bottom { left: -2px; }
.gridPositions .pid_3 .label_top_arrow { left: 19px; }
.gridPositions .pid_3 .label_bottom_arrow { left: 19px; }

.gridPositions .pid_4.icon { background: url('../../media/site/images/grid/@{pid4_image}-point.png') top left no-repeat; }
.gridPositions .pid_4.label_left, .gridPositions .pid_4.label_right, .gridPositions .pid_4.label_top, .gridPositions .pid_4.label_bottom { background-color: @pid4_color; }
.gridPositions .pid_4 .label_left_arrow { background: url('../../media/site/images/grid/@{pid4_image}-label-left.png') top left no-repeat; }
.gridPositions .pid_4 .label_right_arrow { background: url('../../media/site/images/grid/@{pid4_image}-label-right.png') top left no-repeat; }
.gridPositions .pid_4 .label_top_arrow { background: url('../../media/site/images/grid/@{pid4_image}-label-top.png') top left no-repeat; }
.gridPositions .pid_4 .label_bottom_arrow { background: url('../../media/site/images/grid/@{pid4_image}-label-bottom.png') top left no-repeat; }
.gridPositions .pid_4 .label_top, .gridPositions .pid_4 .label_bottom { left: -1px; }
.gridPositions .pid_4 .label_top_arrow { left: 19px; top: 26px; }
.gridPositions .pid_4 .label_bottom_arrow { left: 19px; }

.gridPositions .you.icon { background: url('../../media/site/images/grid/@{you_image}-point.png') top left no-repeat; }
.gridPositions .you.label_left, .gridPositions .you.label_right, .gridPositions .you.label_top, .gridPositions .you.label_bottom, .gridPositions .you.label_offset { background-color: #666666; }
.gridPositions .you .label_left_arrow { background: url('../../media/site/images/grid/@{you_image}-label-left.png') top left no-repeat; }
.gridPositions .you .label_right_arrow { background: url('../../media/site/images/grid/@{you_image}-label-right.png') top left no-repeat; }
.gridPositions .you .label_top_arrow { background: url('../../media/site/images/grid/@{you_image}-label-top.png') top left no-repeat; }
.gridPositions .you .label_bottom_arrow { background: url('../../media/site/images/grid/@{you_image}-label-bottom.png') top left no-repeat; }
.gridPositions .you .label_offset_arrow { background: url('../../media/site/images/grid/@{you_image}-label-offset.png') top left no-repeat; }




/* IMAGE ITEMS */
img.pid_1 { border-color: @pid1_color; }
img.pid_2 { border-color: @pid2_color; }
img.pid_3 { border-color: @pid3_color; }
img.pid_4 { border-color: @pid4_color; }

.label_pid_4,
.label_pid_3,
.label_pid_2,
.label_pid_1,
.label_you { 
    font-size: 14px; 
    color: #ffffff; 
    font-weight: bold; 
    .rounded-corners(3px);
    padding: 1px 6px 1px 6px; 
    cursor: default;
}

.label_pid_1 { background-color: @pid1_color; }
.label_pid_2 { background-color: @pid2_color; }
.label_pid_3 { background-color: @pid3_color; }
.label_pid_4 { background-color: @pid4_color; }
.label_you { background-color: @you_color; }

.youvsparty .label_pid_4,
.youvsparty .label_pid_3,
.youvsparty .label_pid_2,
.youvsparty .label_pid_1 {
    display: none;
}



/* REPLACE LABELS WITH LEADER THUMBNAILS - YvsP & PvsP - USA elections 
ul.responseNav div span img {
    max-width: 24px;
    .rounded-corners(5px);
}

.label_pid_1 img { border: 3px solid @pid1_color; }
.label_pid_2 img { border: 3px solid @pid2_color; }
.label_pid_3 img { border: 3px solid @pid3_color; }
.label_pid_4 img { border: 3px solid @pid4_color; }
*/