.dpe-A { background-color: #7ab51d; }
.dpe-B { background-color: #97be0d; }
.dpe-C { background-color: #c8d200; }
.dpe-D { background-color: #f5ab4e; }
.dpe-E { background-color: #ee8146; }
.dpe-F { background-color: #ea5f40; }
.dpe-G { background-color: #e3001b; }

.ges-A { background-color: #f0edf8; }
.ges-B { background-color: #d7d3e3; }
.ges-C { background-color: #c7b9da; }
.ges-D { background-color: #b3a2d5; }
.ges-E { background-color: #8c6fb1; }
.ges-F { background-color: #7a66a8; }
.ges-G { background-color: #492a86; }

.dpe-ges {
	margin: 20px 0;		
}
.dpe-ges ul { margin-bottom: 5px; }
.dpe-ges .block-title { margin-bottom: 10px; }
.not-front .main .dpe-ges li {
	list-style-type: none;
	color: #fff;	
	margin-left: 0;
	padding: 5px 10px;
	margin-bottom: 1px;
	position: relative;
	font-family: arial;
}
.dpe-ges li:before {
	border-style: solid;
	border-width: 15px;
	content: "";
	position: absolute;
	top: 0;
	background-color: #fff;
}
.dpe-ges li.note-A:before { left: 70px; }
.dpe-ges li.note-B:before {	left: 90px; }
.dpe-ges li.note-C:before { left: 110px; }
.dpe-ges li.note-D:before { left: 130px; }
.dpe-ges li.note-E:before { left: 150px; }
.dpe-ges li.note-F:before { left: 170px; }
.dpe-ges li.note-G:before { left: 190px; }

/* Couleur fleche DPE */
.dpe-ges li.dpe-A:before { border-color: transparent transparent transparent #7ab51d; }
.dpe-ges li.dpe-B:before { border-color: transparent transparent transparent #97be0d; }
.dpe-ges li.dpe-C:before { border-color: transparent transparent transparent #c8d200; }
.dpe-ges li.dpe-D:before { border-color: transparent transparent transparent #f5ab4e; }
.dpe-ges li.dpe-E:before { border-color: transparent transparent transparent #ee8146; }
.dpe-ges li.dpe-F:before { border-color: transparent transparent transparent #ea5f40; }
.dpe-ges li.dpe-G:before { border-color: transparent transparent transparent #e3001b; }

/* Couleur flèche GES */
.dpe-ges li.ges-A:before { border-color: transparent transparent transparent #f0edf8; }
.dpe-ges li.ges-B:before { border-color: transparent transparent transparent #d7d3e3; }
.dpe-ges li.ges-C:before { border-color: transparent transparent transparent #c7b9da; }
.dpe-ges li.ges-D:before { border-color: transparent transparent transparent #b3a2d5; }
.dpe-ges li.ges-E:before { border-color: transparent transparent transparent #8c6fb1; }
.dpe-ges li.ges-F:before { border-color: transparent transparent transparent #7a66a8; }
.dpe-ges li.ges-G:before { border-color: transparent transparent transparent #492a86; }

.dpe-ges li.note-A { width: 80px; }
.dpe-ges li.note-B { width: 100px; }
.dpe-ges li.note-C { width: 120px; }
.dpe-ges li.note-D { width: 140px; }
.dpe-ges li.note-E { width: 160px; }
.dpe-ges li.note-F { width: 180px; }
.dpe-ges li.note-G { width: 200px; }

.dpe-ges li span.lettre { float: right; }
.result-dpe-ges {
	background-color: #3b3f44;
	border-radius: 4px;
	color: #fff;
	float: right;
	font-size: 14px;
	font-weight: 700;
	margin: -5px -77px 0 0;
	padding: 0 7px 0 7px;
	width: 40px;
	line-height: 30px;
	text-align: center;
}
.result-dpe-ges:before {
	border-color: transparent #3b3f44 transparent transparent;
	border-style: solid;
	border-width: 15px;
	content: "";
	position: absolute;
	top: 0;
}
.note-A span.result-dpe-ges:before { left: 70px; }
.note-B span.result-dpe-ges:before { left: 90px; }
.note-C span.result-dpe-ges:before { left: 110px; }
.note-D span.result-dpe-ges:before { left: 130px; }
.note-E span.result-dpe-ges:before { left: 150px; }
.note-F span.result-dpe-ges:before { left: 170px; }
.note-G span.result-dpe-ges:before { left: 190px; }