/* CHART SUIVI CONSO */
.chart {
	position: relative;
	margin: -11px 0 5px;
	width: 596px;
}

.chart .ajaxloader {
	position: absolute;	top: 0; left: 0; z-index: 100;
	background: url("../images/ajax-loader.gif") no-repeat scroll center center white;
	width: 100%; height: 100%;
	opacity: 0.5;

}
.chart .header {
	position: relative;
	width: 596px; height: 56px;
}
.chart .header .energize span {
	position: relative;
	display: none;	float: left;
	margin: 0 0 0 5px;
	width: 36px; height: 36px;
	cursor: pointer;
	background: url('../images/layout/sprite.png') no-repeat transparent;

	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}
.chart .header .energize span:hover,
.chart .header .energize span.current {
	margin-top: -3px;
	width: 36px; height: 46px;
}
.chart .header .energize span.ele { background-position:0 -157px; }
.chart .header .energize span.gaz { background-position:-36px -157px; }
.chart .header .energize span.wat { background-position:-72px -157px; }
.chart .header .energize span.ele:hover,
.chart .header .energize span.ele.current { background-position: 0 -111px; }
.chart .header .energize span.gaz:hover,
.chart .header .energize span.gaz.current { background-position: -36px -111px; }
.chart .header .energize span.wat:hover,
.chart .header .energize span.wat.current { background-position: -72px -111px; }


.chart .header .type {
	position: relative;
	float: right;
}
.chart .header .type > span {
	display: block;
	float: left;
	margin: 0 5px 0 0; padding-top: 6px;
	height: 30px;
	font-size: 9px;
	color: #333333;
	text-align: center;
	cursor: pointer;
	background: url('../images/layout/chart/buttonBg.gif') repeat top left transparent;

	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}
.chart.gaz.year .header .type .courbe { display: block; }
.chart .header .type .courbe {
	display: none;
	float: left;
	width: 90px;
	margin-top: 5px;
}
.chart .header .type .courbe label {
	position: relative;	top: 4px;
	font-size: 11px;
	font-weight: normal;
	line-height: 11px;
	color: #666666;
	cursor: pointer;
}
.chart.hour .header .type span.kwh,
.chart .header .type span.kwh {
	width: 36px; height: 26px;
	padding-top: 10px; margin-top: 0;
	font-size: 12px;
	color: #333333;
	background: url('../images/layout/chart/buttonBg.gif') repeat top left transparent;
}

.chart .header .type span.hour { width: 49px; display: none; }
.chart.hour.ele .hasEleHourPrices.header .type span.hour,
.chart.year.ele .hasEleHourPrices.header .type span.hour { display: block; }

.chart.hour .header .type span.kwh:hover,
.chart .header .type > span:hover,
.chart.hour .header .type .hour,
.chart .header .type span.kwh {
	color: #ffffff;
	margin-top: -3px; padding-top: 9px;
	height: 37px;
	background: url('../images/layout/sprite.png') no-repeat -108px -111px transparent;
}

.chart.hour .header .type span.kwh:hover,
.chart .header .type span.kwh {
	padding-top: 13px; height: 33px;
}
.chart.hour .header .type .hour,
.chart .header .type span.hour:hover {
	background: url('../images/layout/sprite.png') no-repeat -108px -157px transparent;
}

.chart.ele .header .type .wat,
.chart.gaz .header .type .wat,
.chart.gaz .header .type .hour,
.chart.wat .header .type .ele,
.chart.annuel .header .type .hour { display: none; }

.chart .header .legend {
	position: absolute; left: 160px; top: 6px;
	padding: 9px 5px 0 10px;
	height: 21px;
	background: #f0f0f0;
	border-radius: 3px;
	font-size: 10px;
	color: #666666;
}
.chart .header .legend span {
	position: relative;
	display: inline-block;
	padding: 0 5px 0 25px;
}
.chart .header .legend span.year { display: none; }
.chart.year .header .legend span.year { display: inline-block; }
.chart .header .legend span.annuel { display: none; }
.chart.annuel .header .legend span.annuel { display: inline-block; }
.chart .header .legend span.hour { display: none; }
.chart.hour .header .legend span.hour { display: inline-block; }

.chart .header .legend span span {
	content: '\0020';
	position: absolute;	left: 2px; top: -4px; z-index: 10; zoom: 1;
	display: block;
	padding: 0; margin: 0;
	width: 20px; height: 20px;
	border-radius: 6px;
}
.chart.ele .header .legend span.doux span {
	opacity: 0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}
.chart.ele .header .legend span span {
	background: #f6a800 ;z-index: 30;
}
.chart.ele.hour .header .legend span span {
	background: #57ab27 ;z-index: 30;
}
.chart.ele .header .legend span.manq span {
	background: url('../images/layout/chart/eleManq.png') repeat;
}
.chart.gaz .header .legend span span {
	background: #9ec432 ;z-index: 30;
}
.chart.gaz .header .legend span.manq span {
	background: url('../images/layout/chart/gazManq.png') repeat;
}
.chart.wat .header .legend span span {
	background: #009fe3 ;z-index: 30;
}
.chart.wat .header .legend span.manq span {
	background: url('../images/layout/chart/watManq.png') repeat;
}
.chart .carouselContainer {
	position: relative;
	overflow: hidden;
	width: 596px; height: 270px;
	background: url('../images/layout/chart/scaleBG.gif') repeat-x 0 -2px;
}
.chart .carousel:before,
.chart .carousel:after {
	content: '\0020';
	position: absolute;	left: 1px; bottom: 35px; z-index: 50; zoom: 1;
	display: block;
	width: 10px; height: 3px;
	background: white;

}
.chart .carousel:after {
	left: auto; right: 1px;
}
.chart .carousel {
	position: relative; left:15px;
	overflow: hidden;
	width: 566px; height: 270px;
}
.chart .carousel .hourContainer,
.chart .carousel .annuelContainer { display: none; }
.chart .hourContainer,
.chart .annuelContainer,
.chart .yearContainer {
	position: absolute; right: 0; z-index: 5;
	width: 566px; height: 270px;
}
.chart .hourContainer .year,
.chart .annuelContainer .year,
.chart .yearContainer .year {
	position: relative; z-index: 5;
}

.chart .hourContainer .year,
.chart .yearContainer .year {
	background: url('../images/layout/chart/scale.png') repeat-x right -2px;
}
.chart .monthContainer {
	position: relative;
	height: 218px;
}
.chart .an,
.chart .month {
	position: absolute; bottom: 0;
	float: left;
	width: 40px; height: 94px;
	text-align: center;
	border-radius: 6px;
	border: 2px solid white;
	cursor: pointer;
}
.chart .wrapperMonth .month.short span { display: none; }
.chart .wrapperMonth .month:first-child {
	top: 13px;
	opacity: 0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}
.chart .wrapperMonth .month:first-child span {
	position: absolute;	top: auto; bottom: 4px; left: 0;
	height: 20px; width: 41px;
}
.chart .an { width: 87px; }

.chart .monthsAlpha span.m12:after { content:'JAN'; }
.chart .monthsAlpha span.m11:after { content:'FEV'; }
.chart .monthsAlpha span.m10:after { content:'MAR'; }
.chart .monthsAlpha span.m9:after { content:'AVR'; }
.chart .monthsAlpha span.m8:after { content:'MAI'; }
.chart .monthsAlpha span.m7:after { content:'JUIN'; }
.chart .monthsAlpha span.m6:after { content:'JUIL'; }
.chart .monthsAlpha span.m5:after { content:'AOU'; }
.chart .monthsAlpha span.m4:after { content:'SEP'; }
.chart .monthsAlpha span.m3:after { content:'OCT'; }
.chart .monthsAlpha span.m2:after { content:'NOV'; }
.chart .monthsAlpha span.m1:after { content:'DEC'; }

.chart .month.m1 { right: 2px; }
.chart .month.m2 { right: 49px; }
.chart .month.m3 { right: 96px; }
.chart .month.m4 { right: 143px; }
.chart .month.m5 { right: 190px; }
.chart .month.m6 { right: 237px; }
.chart .month.m7 { right: 284px; }
.chart .month.m8 { right: 331px; }
.chart .month.m9 { right: 378px; }
.chart .month.m10 { right: 425px; }
.chart .month.m11 { right: 472px; }
.chart .month.m12 { right: 519px; }

.chart .wrapperMonth .month span:after {display: none; }
.chart .an.m1 { right: 22px; }


.chart.ele .an, .chart.ele .month { background:#f6a800; }
.chart.ele .wrapperMonth .month { background:#57ab27; }
.chart.gaz .an, .chart.gaz .month { background:#9ec432; }
.chart.wat .an, .chart.wat .month { background:#009fe3; }
.chart.ele .month.manq { background: url('../images/layout/chart/eleManq.png') repeat; }
.chart.gaz .month.manq { background: url('../images/layout/chart/gazManq.png') repeat; }
.chart.wat .month.manq { background: url('../images/layout/chart/watManq.png') repeat; }


.chart.ele .month.manq span {
	text-shadow: -2px 0 #f6a800, 0 2px #f6a800,	2px 0 #f6a800, 0 -2px #f6a800;
}
.chart.gaz .month.manq span {
	text-shadow: -2px 0 #9ec432, 0 2px #9ec432,	2px 0 #9ec432, 0 -2px #9ec432;
}
.chart.wat .month.manq span {
	text-shadow: -2px 0 #009fe3, 0 2px #009fe3,	2px 0 #009fe3, 0 -2px #009fe3;
}
.chart .wrapperMonth .month.none:first-child,
.chart .wrapperMonth .month.none,
.chart .monthContainer .an.none,
.chart .monthContainer .month.none {
	background: #e7dcc7;
	height: 10px;
}
.chart.ele .an.none span,
.chart.gaz .an.none span,
.chart.wat .an.none span,
.chart.ele .month.none span,
.chart.gaz .month.none span,
.chart.wat .month.none span {
	display: none;
}
.chart .an span,
.chart .month span {
	position: relative;
	top: 5px;
	font-size: 18px;
	color: white;
}
.chart.ele .out span { color: #f6a800; }
.chart.gaz .out span { color: #9ec432; }
.chart.wat .out span { color: #009fe3; }
.chart .monthContainer .manq.out span,
.chart .an.out span,
.chart .monthContainer .month.out span {
	top: -20px;
	text-shadow: none;
}
.chart .monthsAlpha span.none {
	color: #e7dcc7;
}
.chart .monthsAlpha {
	position: relative;
	z-index: 300;
	background: white;
	height: 14px;
	overflow: hidden;
}
.chart .monthsAlpha span {
	display: block;
	float: right;
	width: 47px;
	color: #999999;
	font-size: 14px;
	text-align: center;
	text-transform: uppercase;
}
.chart .annuelContainer .monthsAlpha {
	padding-right: 3px;
	border-bottom: 1px solid #DDDDDD ;
	height: 15px;
}
.chart .annuelContainer .monthsAlpha span {
	width: 92px;
	margin: 0 10px;
}
.chart .yearNum {
	clear: both;
	overflow: hidden;
	float: right;
	width: 100%;
	margin: 1px 0 0; padding-top: 4px;
	height: 14px;
	font-size: 12px;
	color: #999999;
	border-top: 1px solid #dddddd;
}
.chart .yearNum span {
	display: block;
	float: right;
	margin-left: 12px;
	width: 554px; height: 14px;
}
.chart a.before {
	position: absolute; bottom: 25px; left: 10px; z-index: 20;
	display: block;
	width: 6px;	height: 24px;
	background: url('../images/layout/sprite.png') no-repeat -90px -24px;
}
.chart a.after {
	position: absolute; bottom: 25px; right: 10px; z-index: 20;
	display: block;
	width: 6px;	height: 24px;
	background: url('../images/layout/sprite.png') no-repeat -96px -24px;
}
.chart a.before.grey { background-position: -102px -24px; cursor: auto; }
.chart a.after.grey { background-position: -108px -24px; cursor: auto; }

.chart .linkVue {
	position: absolute;	bottom: 16px; left: 26px; z-index: 20;
	width: 544px;
	border-bottom: 1px solid #DDDDDD;
	text-align: center;
	display: none;
}
.chart.ele .hasMonthlyEle.hasAnnualEle.linkVue,
.chart.gaz .hasMonthlyGaz.hasAnnualGaz.linkVue,
.chart.wat .hasMonthlyWat.hasAnnualWat.linkVue { display: block; }

.chart .linkVue span {
	display: inline-block;
	padding-top: 4px; margin-bottom: -1px;
	width: 80px; height: 17px;
	color: #999999;
	font-size: 11px;
	text-align: center;
	background: url('../images/layout/chart/anBt.png') repeat-x 0 0 #DDDDDD;
	cursor: pointer;
}
.chart.hour .linkVue span {
	cursor: no-drop;
	display: none;
}

.chart.hour .linkVue .year,
.chart.year .linkVue .year,
.chart.annuel .linkVue .annuel,
.chart .linkVue span:hover {
	color: white;
	background: url('../images/layout/chart/anBt.png') repeat-x 0 -21px;
}
body .wrap.padded .chart .tempLine {
	position: absolute; top: 18px; left: 20px;
	display: none;
}
body .wrap.padded .chart.gaz.year .tempLine.show {
	display: block;
}

body .wrap.padded .chart.gaz.year .tempLine div {
	position: absolute;	z-index: 200;
	padding: 4px 0 0;
	width: 20px; height: 16px;
	text-align: center;
	color: #ffffff;
	font-size: 10px;
	background: url('../images/layout/sprite.png') no-repeat -56px -287px;
}

.popover .infos {
	width: 350px;
}
.popover .infos.small {
	width: 180px;
}
.popover .infos.small .left {
	margin: auto;
	width: auto;
	float: none;
}
.popover .infos.small .left:before,
.popover .infos.small .right,
.popover .infos.small .left:after {
	display: none;
	position: absolute; top: -1000px;
}
.popover .infos.show {
	opacity: 1;
}
.popover .infos .left {
	position: relative;
	float: left;
	width: 130px;
	text-align: center;
}
.popover .infos .left:before {
	content: '\0020';
	position: absolute;	right: -10px; top: 13px; z-index: 10;
	display: block;
	width: 19px; height: 28px;
	background: url('../images/layout/sprite.png') no-repeat -93px -274px;
}
.popover .infos .left:after {
	content: '\0020';
	position: absolute;	right: 0; top: 10px;	z-index: 5;
	display: block;
	width: 2px; height: 66px;
	background: url('../images/layout/sprite.png') no-repeat -206px -157px;
}
.popover .infos .left > span {
	display: block;
	margin: -5px 0 -4px;
	font-size: 11px;
	color: #e7dcc7;
}
.popover .infos .left div {
	font-size: 36px;
	font-weight: bold;
	line-height: normal;
}
.popover .infos .left div.chf {
	font-size: 30px;
}
.popover .infos .right {
	position: relative;
	float: left;
	padding-left: 15px;
	width: 205px;
}
.popover .infos .right div {
	display: inline-block;
	padding-top: 17px;
	font-size: 48px; line-height: 20px;
	font-weight: bold;
}
.popover .infos .right strong {
	font-size: 18px;
}
.popover .infos .right p {
	display: inline;
	font-size: 11px;
	margin: -8px 0 0 4px;
}



.carouselEco {
	position: relative;
	margin: 20px 0;
	width: 596px;
	background: url('../images/layout/eco/bgCarousel.png') repeat-y 0 0;
}

.carouselEco > strong {
	display: block;
	padding: 15px 0 15px 20px;
	font-size: 20px; font-weight: 600;
}

.carouselEco .overflowCurve {
	overflow: hidden;
	position: relative;
	width: 596px; height: 231px;
	background: url('../images/layout/eco/bgCurveRepeat.png') repeat 0 11px;
}
.carouselEco  .monthsWrapper {
	overflow: hidden;
	position: absolute;	top: 50px; left: 0; z-index: 20;
	width: 596px; height: 122px;
}
.carouselEco  .monthsWrapper:before,
.carouselEco  .monthsWrapper:after {
	content: '\0020';
	position: absolute;	top: 0; left: 10px; z-index: 50;
	display: block;
	width: 24px; height: 24px;
	background: url('../images/layout/sprite.png') no-repeat -112px -298px;
}
.carouselEco  .monthsWrapper:after {
	top: auto; bottom: 0;
	background-position: -136px -298px;
}
.carouselEco .curveWrapper {
	position: absolute; top: 17px; left: -381px;
	width: 1128px;height: 201px;
	background: url('../images/layout/eco/bgCurveRepeat.png') repeat 0 0;
}
.carouselEco .curveWrapper:after {
	content: '\0020';
	position: absolute;	top: -17px; left: 0; z-index: 20;
	display: block;
	width: 200%; height: 34px;
	background: url('../images/layout/eco/bgCurve.png') repeat-x 0 0;
}
.carouselEco .monthsAlpha {
	position: absolute;	top: 52px; left: 28px;
	width: 560px;
}
.carouselEco .monthsAlpha:after {
	content: '\0020';
	position: absolute;	top: 9px; left: 0;z-index: 5;
	display: block;
	width: 100%; height: 1px;
	background: #cccccc;
}
.carouselEco .monthsAlpha span {
	position: relative;	z-index: 10;
	display: inline-block;
	width: 34px;
	font-size: 14px;
	color: #999999;
	background: #f9f9f9;
	text-align: center;
}
.carouselEco .curve {
	position: absolute; top: 11px; left: 35px; z-index: 30;
}
.carouselEco a.before {
	position: absolute; top: 95px; left: 5px; z-index: 40;
	display: block;
	width: 6px;	height: 24px;
	background: url('../images/layout/sprite.png') no-repeat -90px -24px #f9f9f9;
	border: 5px solid #f9f9f9;
}
.carouselEco a.after {
	position: absolute; top: 95px; right: 5px; z-index: 40;
	display: block;
	width: 6px;	height: 24px;
	background: url('../images/layout/sprite.png') no-repeat -96px -24px #f9f9f9;
	border: 5px solid #f9f9f9;
}
.carouselEco a.before.grey { background-position: -102px -24px; cursor: auto; }
.carouselEco a.after.grey { background-position: -108px -24px; cursor: auto; }
.carouselEco .curvehover {
	position: absolute; top: 30px; left: 35px;	z-index: 300;
	width: 580px; height: 100%;
}
.carouselEco .curvehover > span {
	position: absolute;
	display: block;
	height: 24px; width: 24px;
	background: url('../images/layout/sprite.png') no-repeat -102px -322px #f9f9f9;
	cursor: pointer;
}
.carouselEco .curvehover > span .labelText {
	/*position: absolute; left: 26px;	top: 1px;*/
	position: absolute; left: -20px; top: 22px;
	display: block;
	width: 70px;
	font-size: 18px;
	color: #333333;
	text-align: center;
}
.carouselEco .curvehover > span.red .labelText {
	top: -22px;
}
.carouselEco .curvehover > span.green {
	background-position: -126px -322px;
}
.ecoPopover {
	width: 280px;
	padding: 6px 10px 10px;
	font-weight: normal;
}
.ecoPopover strong {
	font-size: 13px;
}
.carouselEco .saison {
	position: absolute; top: 0; left: 36px;
	width: 526px;
}
.carouselEco span.saison1 {
	position: absolute; top: -5px;
	display: block;
	height: 34px; width: 34px;
	background: url('../images/layout/sprite.png') no-repeat 0 -310px;
}
.carouselEco span.saison2 {
	position: absolute; top: -5px;
	display: block;
	height: 34px; width: 34px;
	background: url('../images/layout/sprite.png') no-repeat -34px -310px;
}
.carouselEco span.saison3 {
	position: absolute; top: -5px;
	display: block;
	height: 34px; width: 34px;
	background: url('../images/layout/sprite.png') no-repeat -68px -310px;
}
.carouselEco span.saison4 {
	position: absolute; top: -5px;
	display: block;
	height: 34px; width: 45px;
	background: url('../images/layout/sprite.png') no-repeat -164px -305px;
}