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

@pid1_color: #5480c2; /* Option National */
@pid2_color: #dd0000; /* Quebec Liberal Party */
@pid3_color: #0e3192; /* Parti Québécois */
@pid4_color: #00acec; /* Coalition Avenir Québec */
@pid5_color: #70bf45; /* Green Party of Quebec */
@pid6_color: #ff5b14; /* Québec solidaire */
@you_color: #666666; /* gray */

@pid1_image: 'blue-dark'; 
@pid2_image: 'red';
@pid3_image: 'blue';
@pid4_image: 'blue-light';
@pid5_image: 'green';
@pid6_image: 'orange';
@you_image: 'you';




/* RESULTS ITEMS */
ul.partyNav li.nav_pid_1 a:hover, ul.partyNav li.nav_pid_1 a.selected, ul.partyNav li.nav_pid_7 a:hover, ul.partyNav li.nav_pid_7 a.selected { background-color: @pid1_color; }
ul.partyNav li.nav_pid_2 a:hover, ul.partyNav li.nav_pid_2 a.selected, ul.partyNav li.nav_pid_8 a:hover, ul.partyNav li.nav_pid_8 a.selected { background-color: @pid2_color; }
ul.partyNav li.nav_pid_3 a:hover, ul.partyNav li.nav_pid_3 a.selected, ul.partyNav li.nav_pid_9 a:hover, ul.partyNav li.nav_pid_9 a.selected { background-color: @pid3_color; }
ul.partyNav li.nav_pid_4 a:hover, ul.partyNav li.nav_pid_4 a.selected, ul.partyNav li.nav_pid_10 a:hover, ul.partyNav li.nav_pid_10 a.selected { background-color: @pid4_color; }
ul.partyNav li.nav_pid_5 a:hover, ul.partyNav li.nav_pid_5 a.selected, ul.partyNav li.nav_pid_11 a:hover, ul.partyNav li.nav_pid_11 a.selected { background-color: @pid5_color; }
ul.partyNav li.nav_pid_6 a:hover, ul.partyNav li.nav_pid_6 a.selected, ul.partyNav li.nav_pid_12 a:hover, ul.partyNav li.nav_pid_12 a.selected,
ul.partyNav li.nav_pid_13 a:hover, ul.partyNav li.nav_pid_13 a.selected, ul.partyNav li.nav_pid_14 a:hover, ul.partyNav li.nav_pid_14 a.selected { background-color: @pid6_color; }




/* PARTY RESULTS ITEMS */
.partiesResultsContainer .pid_6, .partiesResultsContainer .pid_12, .partiesResultsContainer .pid_13, .partiesResultsContainer .pid_14,
.partiesResultsContainer .pid_5, .partiesResultsContainer .pid_11,
.partiesResultsContainer .pid_4, .partiesResultsContainer .pid_10,
.partiesResultsContainer .pid_3, .partiesResultsContainer .pid_9,
.partiesResultsContainer .pid_2, .partiesResultsContainer .pid_8,
.partiesResultsContainer .pid_1, .partiesResultsContainer .pid_7 {
    position: relative; 
    width: 411px; 
    height: 25px; 
    margin-bottom: 10px; 
    float: left;
}

.partiesResultsContainer .pid_6 .left, .partiesResultsContainer .pid_12 .left, .partiesResultsContainer .pid_13 .left, .partiesResultsContainer .pid_14 .left,
.partiesResultsContainer .pid_5 .left, .partiesResultsContainer .pid_11 .left,
.partiesResultsContainer .pid_4 .left, .partiesResultsContainer .pid_10 .left,
.partiesResultsContainer .pid_2 .left, .partiesResultsContainer .pid_9 .left,
.partiesResultsContainer .pid_3 .left, .partiesResultsContainer .pid_8 .left,
.partiesResultsContainer .pid_1 .left, .partiesResultsContainer .pid_7 .left {
    width: 68px; 
    height: 24px; 
    float: left; 
    color: #ffffff; 
    font-size: 18px; 
    padding: 1px 0px 0px 8px; 
}

.partiesResultsContainer .pid_1 .left, .partiesResultsContainer .pid_7 .left { background-color: @pid1_color; }
.partiesResultsContainer .pid_2 .left, .partiesResultsContainer .pid_8 .left { background-color: @pid2_color; }
.partiesResultsContainer .pid_3 .left, .partiesResultsContainer .pid_9 .left { background-color: @pid3_color; }
.partiesResultsContainer .pid_4 .left, .partiesResultsContainer .pid_10 .left { background-color: @pid4_color; }
.partiesResultsContainer .pid_5 .left, .partiesResultsContainer .pid_11 .left { background-color: @pid5_color; }
.partiesResultsContainer .pid_6 .left, .partiesResultsContainer .pid_12 .left, .partiesResultsContainer .pid_13 .left, .partiesResultsContainer .pid_14 .left { background-color: @pid6_color; }

.partiesResultsContainer .pid_6 .barContainer, .partiesResultsContainer .pid_12 .barContainer, .partiesResultsContainer .pid_13 .barContainer, .partiesResultsContainer .pid_14 .barContainer,
.partiesResultsContainer .pid_5 .barContainer, .partiesResultsContainer .pid_11 .barContainer,
.partiesResultsContainer .pid_4 .barContainer, .partiesResultsContainer .pid_10 .barContainer,
.partiesResultsContainer .pid_3 .barContainer, .partiesResultsContainer .pid_9 .barContainer,
.partiesResultsContainer .pid_2 .barContainer, .partiesResultsContainer .pid_8 .barContainer,
.partiesResultsContainer .pid_1 .barContainer, .partiesResultsContainer .pid_7 .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_6 .barContainer .barBg, .partiesResultsContainer .pid_12 .barContainer .barBg, .partiesResultsContainer .pid_13 .barContainer .barBg, .partiesResultsContainer .pid_14 .barContainer .barBg,
.partiesResultsContainer .pid_5 .barContainer .barBg, .partiesResultsContainer .pid_11 .barContainer .barBg, 
.partiesResultsContainer .pid_4 .barContainer .barBg, .partiesResultsContainer .pid_10 .barContainer .barBg,
.partiesResultsContainer .pid_3 .barContainer .barBg, .partiesResultsContainer .pid_9 .barContainer .barBg,
.partiesResultsContainer .pid_2 .barContainer .barBg, .partiesResultsContainer .pid_8 .barContainer .barBg,
.partiesResultsContainer .pid_1 .barContainer .barBg, .partiesResultsContainer .pid_7 .barContainer .barBg {
    height: 23px; 
    float: left; 
    padding: 2px 2px 0px 2px; 
}

.partiesResultsContainer .pid_1 .barContainer .barBg, .partiesResultsContainer .pid_7 .barContainer .barBg { background-color: @pid1_color; }
.partiesResultsContainer .pid_2 .barContainer .barBg, .partiesResultsContainer .pid_8 .barContainer .barBg { background-color: @pid2_color; }
.partiesResultsContainer .pid_3 .barContainer .barBg, .partiesResultsContainer .pid_9 .barContainer .barBg { background-color: @pid3_color; }
.partiesResultsContainer .pid_4 .barContainer .barBg, .partiesResultsContainer .pid_10 .barContainer .barBg { background-color: @pid4_color; }
.partiesResultsContainer .pid_5 .barContainer .barBg, .partiesResultsContainer .pid_11 .barContainer .barBg { background-color: @pid5_color; }
.partiesResultsContainer .pid_6 .barContainer .barBg, .partiesResultsContainer .pid_12 .barContainer .barBg, .partiesResultsContainer .pid_13 .barContainer .barBg, .partiesResultsContainer .pid_14 .barContainer .barBg { background-color: @pid6_color; }

.partiesResultsContainer .pid_6 .barContainer .barBg .barPercentage, .partiesResultsContainer .pid_12 .barContainer .barBg .barPercentage, .partiesResultsContainer .pid_13 .barContainer .barBg .barPercentage, .partiesResultsContainer .pid_14 .barContainer .barBg .barPercentage,
.partiesResultsContainer .pid_5 .barContainer .barBg .barPercentage, .partiesResultsContainer .pid_11 .barContainer .barBg .barPercentage,
.partiesResultsContainer .pid_4 .barContainer .barBg .barPercentage, .partiesResultsContainer .pid_10 .barContainer .barBg .barPercentage,
.partiesResultsContainer .pid_3 .barContainer .barBg .barPercentage, .partiesResultsContainer .pid_9 .barContainer .barBg .barPercentage,
.partiesResultsContainer .pid_2 .barContainer .barBg .barPercentage, .partiesResultsContainer .pid_8 .barContainer .barBg .barPercentage,
.partiesResultsContainer .pid_1 .barContainer .barBg .barPercentage, .partiesResultsContainer .pid_7 .barContainer .barBg .barPercentage {
	background: url(../../media/site/images/bargraph-bg.png) top left repeat-x; 
    height: 21px; 
    float: left; 
    width: 100%;
}

.partiesResultsContainer .pid_6 .percentage, .partiesResultsContainer .pid_12 .percentage, .partiesResultsContainer .pid_13 .percentage, .partiesResultsContainer .pid_14 .percentage,
.partiesResultsContainer .pid_5 .percentage, .partiesResultsContainer .pid_11 .percentage,
.partiesResultsContainer .pid_4 .percentage, .partiesResultsContainer .pid_10 .percentage,
.partiesResultsContainer .pid_3 .percentage, .partiesResultsContainer .pid_9 .percentage,
.partiesResultsContainer .pid_2 .percentage, .partiesResultsContainer .pid_8 .percentage,
.partiesResultsContainer .pid_1 .percentage, .partiesResultsContainer .pid_7 .percentage {
    float: left; 
    letter-spacing: -0.04em;
}

.partiesResultsContainer .pid_1 .percentage, .partiesResultsContainer .pid_7 .percentage { color: @pid1_color; }
.partiesResultsContainer .pid_2 .percentage, .partiesResultsContainer .pid_8 .percentage { color: @pid2_color; }
.partiesResultsContainer .pid_3 .percentage, .partiesResultsContainer .pid_9 .percentage { color: @pid3_color; }
.partiesResultsContainer .pid_4 .percentage, .partiesResultsContainer .pid_10 .percentage { color: @pid4_color; }
.partiesResultsContainer .pid_5 .percentage, .partiesResultsContainer .pid_11 .percentage { color: @pid5_color; }
.partiesResultsContainer .pid_6 .percentage, .partiesResultsContainer .pid_12 .percentage, .partiesResultsContainer .pid_13 .percentage, .partiesResultsContainer .pid_14 .percentage { color: @pid6_color; }




/* LEADER RESULTS ITEMS */
.leadersResultsContainer .pid_6, .leadersResultsContainer .pid_12, .leadersResultsContainer .pid_13, .leadersResultsContainer .pid_14,
.leadersResultsContainer .pid_5, .leadersResultsContainer .pid_11,
.leadersResultsContainer .pid_4, .leadersResultsContainer .pid_10,
.leadersResultsContainer .pid_3, .leadersResultsContainer .pid_9,
.leadersResultsContainer .pid_2, .leadersResultsContainer .pid_8,
.leadersResultsContainer .pid_1, .leadersResultsContainer .pid_7 {
	position: relative; 
    width: 411px; 
    height: 56px; 
    margin-bottom: 5px; 
    float: left;
}

.leadersResultsContainer .pid_6 .left, .leadersResultsContainer .pid_12 .left, .leadersResultsContainer .pid_13 .left, .leadersResultsContainer .pid_14 .left,
.leadersResultsContainer .pid_5 .left, .leadersResultsContainer .pid_11 .left,
.leadersResultsContainer .pid_4 .left, .leadersResultsContainer .pid_10 .left,
.leadersResultsContainer .pid_3 .left, .leadersResultsContainer .pid_9 .left,
.leadersResultsContainer .pid_2 .left, .leadersResultsContainer .pid_8 .left,
.leadersResultsContainer .pid_1 .left, .leadersResultsContainer .pid_7 .left {
    position: relative; 
    width: 76px; 
    height: 25px; 
    float: left; 
    border-top: 16px solid #ffffff;
    border-bottom: 15px solid #ffffff;
}

.leadersResultsContainer .pid_1 .left, .leadersResultsContainer .pid_7 .left { background-color: @pid1_color; }
.leadersResultsContainer .pid_2 .left, .leadersResultsContainer .pid_8 .left { background-color: @pid2_color; }
.leadersResultsContainer .pid_3 .left, .leadersResultsContainer .pid_9 .left { background-color: @pid3_color; }
.leadersResultsContainer .pid_4 .left, .leadersResultsContainer .pid_10 .left { background-color: @pid4_color; }
.leadersResultsContainer .pid_5 .left, .leadersResultsContainer .pid_11 .left { background-color: @pid5_color; }
.leadersResultsContainer .pid_6 .left, .leadersResultsContainer .pid_12 .left, .leadersResultsContainer .pid_13 .left, .leadersResultsContainer .pid_14 .left { background-color: @pid6_color; }

.leadersResultsContainer .pid_6 .barContainer, .leadersResultsContainer .pid_12 .barContainer, .leadersResultsContainer .pid_13 .barContainer, .leadersResultsContainer .pid_14 .barContainer,
.leadersResultsContainer .pid_5 .barContainer, .leadersResultsContainer .pid_11 .barContainer,
.leadersResultsContainer .pid_4 .barContainer, .leadersResultsContainer .pid_10 .barContainer,
.leadersResultsContainer .pid_3 .barContainer, .leadersResultsContainer .pid_9 .barContainer,
.leadersResultsContainer .pid_2 .barContainer, .leadersResultsContainer .pid_8 .barContainer,
.leadersResultsContainer .pid_1 .barContainer, .leadersResultsContainer .pid_7 .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_6 .barContainer .barBg, .leadersResultsContainer .pid_12 .barContainer .barBg, .leadersResultsContainer .pid_13 .barContainer .barBg, .leadersResultsContainer .pid_14 .barContainer .barBg,
.leadersResultsContainer .pid_5 .barContainer .barBg, .leadersResultsContainer .pid_11 .barContainer .barBg,
.leadersResultsContainer .pid_4 .barContainer .barBg, .leadersResultsContainer .pid_10 .barContainer .barBg,
.leadersResultsContainer .pid_3 .barContainer .barBg, .leadersResultsContainer .pid_9 .barContainer .barBg,
.leadersResultsContainer .pid_2 .barContainer .barBg, .leadersResultsContainer .pid_8 .barContainer .barBg,
.leadersResultsContainer .pid_1 .barContainer .barBg, .leadersResultsContainer .pid_7 .barContainer .barBg {
    height: 23px; 
    float: left; 
    padding: 2px 2px 0px 2px;
}

.leadersResultsContainer .pid_1 .barContainer .barBg, .leadersResultsContainer .pid_7 .barContainer .barBg { background-color: @pid1_color; }
.leadersResultsContainer .pid_2 .barContainer .barBg, .leadersResultsContainer .pid_8 .barContainer .barBg { background-color: @pid2_color; }
.leadersResultsContainer .pid_3 .barContainer .barBg, .leadersResultsContainer .pid_9 .barContainer .barBg { background-color: @pid3_color; }
.leadersResultsContainer .pid_4 .barContainer .barBg, .leadersResultsContainer .pid_10 .barContainer .barBg { background-color: @pid4_color; }
.leadersResultsContainer .pid_5 .barContainer .barBg, .leadersResultsContainer .pid_11 .barContainer .barBg { background-color: @pid5_color; }
.leadersResultsContainer .pid_6 .barContainer .barBg, .leadersResultsContainer .pid_12 .barContainer .barBg, .leadersResultsContainer .pid_13 .barContainer .barBg, .leadersResultsContainer .pid_14 .barContainer .barBg { background-color: @pid6_color; }

.leadersResultsContainer .pid_6 .barContainer .barBg .barPercentage, .leadersResultsContainer .pid_12 .barContainer .barBg .barPercentage, .leadersResultsContainer .pid_13 .barContainer .barBg .barPercentage, .leadersResultsContainer .pid_14 .barContainer .barBg .barPercentage,
.leadersResultsContainer .pid_5 .barContainer .barBg .barPercentage, .leadersResultsContainer .pid_11 .barContainer .barBg .barPercentage,
.leadersResultsContainer .pid_4 .barContainer .barBg .barPercentage, .leadersResultsContainer .pid_10 .barContainer .barBg .barPercentage,
.leadersResultsContainer .pid_3 .barContainer .barBg .barPercentage, .leadersResultsContainer .pid_9 .barContainer .barBg .barPercentage,
.leadersResultsContainer .pid_2 .barContainer .barBg .barPercentage, .leadersResultsContainer .pid_8 .barContainer .barBg .barPercentage,
.leadersResultsContainer .pid_1 .barContainer .barBg .barPercentage, .leadersResultsContainer .pid_7 .barContainer .barBg .barPercentage {
	background: url(../../media/site/images/bargraph-bg.png) top left repeat-x; 
    height: 21px; 
    float: left; 
    width: 100%;
}

.leadersResultsContainer .pid_6 .percentage, .leadersResultsContainer .pid_12 .percentage, .leadersResultsContainer .pid_13 .percentage, .leadersResultsContainer .pid_14 .percentage,
.leadersResultsContainer .pid_5 .percentage, .leadersResultsContainer .pid_11 .percentage,
.leadersResultsContainer .pid_4 .percentage, .leadersResultsContainer .pid_10 .percentage,
.leadersResultsContainer .pid_3 .percentage, .leadersResultsContainer .pid_9 .percentage,
.leadersResultsContainer .pid_2 .percentage, .leadersResultsContainer .pid_8 .percentage,
.leadersResultsContainer .pid_1 .percentage, .leadersResultsContainer .pid_7 .percentage {
    float: left; 
    letter-spacing: -0.04em; 
    margin-top: 16px;
}

.leadersResultsContainer .pid_1 .percentage, .leadersResultsContainer .pid_7 .percentage { color: @pid1_color; }
.leadersResultsContainer .pid_2 .percentage, .leadersResultsContainer .pid_8 .percentage { color: @pid2_color; }
.leadersResultsContainer .pid_3 .percentage, .leadersResultsContainer .pid_9 .percentage { color: @pid3_color; }
.leadersResultsContainer .pid_4 .percentage, .leadersResultsContainer .pid_10 .percentage { color: @pid4_color; }
.leadersResultsContainer .pid_5 .percentage, .leadersResultsContainer .pid_11 .percentage { color: @pid5_color; }
.leadersResultsContainer .pid_6 .percentage, .leadersResultsContainer .pid_12 .percentage, .leadersResultsContainer .pid_13 .percentage, .leadersResultsContainer .pid_14 .percentage { color: @pid6_color; }

.leadersResultsContainer .pid_6 .left img, .leadersResultsContainer .pid_12 .left img, .leadersResultsContainer .pid_13 .left img, .leadersResultsContainer .pid_14 .left img,
.leadersResultsContainer .pid_5 .left img, .leadersResultsContainer .pid_11 .left img,
.leadersResultsContainer .pid_4 .left img, .leadersResultsContainer .pid_10 .left img,
.leadersResultsContainer .pid_3 .left img, .leadersResultsContainer .pid_9 .left img,
.leadersResultsContainer .pid_2 .left img, .leadersResultsContainer .pid_8 .left img,
.leadersResultsContainer .pid_1 .left img, .leadersResultsContainer .pid_7 .left img {
    position: absolute; 
    top: -15px; 
    left: 0px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

.leadersResultsContainer .pid_1 .left img, .leadersResultsContainer .pid_7 .left img { border: 3px solid @pid1_color; }
.leadersResultsContainer .pid_2 .left img, .leadersResultsContainer .pid_8 .left img { border: 3px solid @pid2_color; }
.leadersResultsContainer .pid_3 .left img, .leadersResultsContainer .pid_9 .left img { border: 3px solid @pid3_color; }
.leadersResultsContainer .pid_4 .left img, .leadersResultsContainer .pid_10 .left img { border: 3px solid @pid4_color; }
.leadersResultsContainer .pid_5 .left img, .leadersResultsContainer .pid_11 .left img { border: 3px solid @pid5_color; }
.leadersResultsContainer .pid_6 .left img, .leadersResultsContainer .pid_12 .left img, .leadersResultsContainer .pid_13 .left img, .leadersResultsContainer .pid_14 .left img { border: 3px solid @pid6_color; }




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

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

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

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

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

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

.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, img.pid_7 { border-color: @pid1_color; }
img.pid_2, img.pid_8 { border-color: @pid2_color; }
img.pid_3, img.pid_9 { border-color: @pid3_color; }
img.pid_4, img.pid_10 { border-color: @pid4_color; }
img.pid_5, img.pid_11 { border-color: @pid5_color; }
img.pid_6, img.pid_12, img.pid_13, img.pid_14 { border-color: @pid6_color; }

.label_pid_6, .label_pid_12, .label_pid_13, .label_pid_14,
.label_pid_5, .label_pid_11,
.label_pid_4, .label_pid_10,
.label_pid_3, .label_pid_9,
.label_pid_2, .label_pid_8,
.label_pid_1, .label_pid_7,
.label_you { 
    font-size: 14px; 
    color: #ffffff; 
    font-weight: bold; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    padding: 1px 6px 1px 6px; 
    cursor: default;
}

.label_pid_1, .label_pid_7 { background-color: @pid1_color; }
.label_pid_2, .label_pid_8 { background-color: @pid2_color; }
.label_pid_3, .label_pid_9 { background-color: @pid3_color; }
.label_pid_4, .label_pid_10 { background-color: @pid4_color; }
.label_pid_5, .label_pid_11 { background-color: @pid5_color; }
.label_pid_6, .label_pid_12, .label_pid_13, .label_pid_14 { background-color: @pid6_color; }
.label_you { background-color: @you_color; }

.youvsparty .label_pid_6, .youvsparty .label_pid_12, .youvsparty .label_pid_13, .youvsparty .label_pid_14,
.youvsparty .label_pid_5, .youvsparty .label_pid_11,
.youvsparty .label_pid_4, .youvsparty .label_pid_10,
.youvsparty .label_pid_3, .youvsparty .label_pid_9,
.youvsparty .label_pid_2, .youvsparty .label_pid_8,
.youvsparty .label_pid_1, .youvsparty .label_pid_7 {
    display: none;
}