/* ---------------------------------------------------------------------------- barChart Style */


#barChartWrap
	{
	display:block;
	float:left;
	position:relative;
	width:1232px;
	width:1520px;

	/* center the div */
	/*eft:50%;
	margin-left:-616px;
	margin-left:-760px;*/

	background:#ffffff;

	padding:10px;
	}


/* the left side */

#barChartRange
	{
	display:block;
	float:left;
	position:relative;


	width:50px;

	height:450px;

	background:#ffffff;
	background:yellow;

	padding-top:50px;
	padding-left:25px;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}


#barChartRange
	{
	height:calc(450px - 80px);
	}

.barChartRangeStep
	{
	display:block;
	float:right;
	position:relative;


	width:25px;

	height:20px;

	background:#ffffff;


	border-top-style:solid;
	border-top-width:1px;
	border-top-color:#000000;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}


.barChartRangeStep span
	{
	display:block;
	float:left;
	position:relative;
	width:25px;

	background:#f2f2f2;

	border-style:solid;
	border-width:1px;
	border-color:#000000;

	font-size:12px;
	text-align:center;

	margin-top:-8px;
	margin-left:-25px;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}





/* the top */

/*
=========================
bar Chart Head Label
=========================
*/


#barChartHeadLabel
	{
	display:block;
	float:right;
	position:relative;

	width:1152px;
	width:1440px;

	height:20px;

	background:#ffffff;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}

#barChartHeadLabel col
	{
	padding:0px;
	}

#barChartHeadLabel div.section.group div.col.textRight
	{
	float:right;
	text-align:right;
	background:transparent;
	}





/*
=========================
bar Chart Head Clock
=========================
*/


.barChartHeadClock
	{
	display:block;
	float:left;
	position:relative;

	width:1152px;
	width:1440px;

	height:30px;

	background:#ffffff;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}


.barChartHeadClockMinute
	{
	display:block;
	float:right;
	position:relative;

	/* 1 mins per pixel */	
	width:1px;

	/* 60 mins per big black bar */
	/* width:48px; */

	height:20px;

	background:transparent;

	font-size:10px;
	text-align:right;

	margin-top:10px;

	border-right-style:solid;
	border-right-width:1px;
	border-right-color:transparent;


	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}


.barChartHeadClockMinute.fiveMin
	{
	height:10px;
	border-right-color:transparent;
	margin-top:20px;
	}


.barChartHeadClockMinute.thirtyMin
	{
	height:15px;
	border-right-color:#000000;
	margin-top:15px;
	}


.barChartHeadClockMinute.fortyFiveMin,
.barChartHeadClockMinute.fifthteenMin
	{
	height:10px;
	border-right-color:#000000;
	margin-top:20px;
	}


.barChartHeadClockMinute.hourMin
	{
	height:20px;
	border-right-color:#000000;
	margin-top:10px;
	}




.barChartHeadClockMinute span
	{
	display:block;
	float:left;
	position:relative;
	width:40px;

	background:transparent;

	border-style:solid;
	border-width:0px;
	border-color:#000000;

	text-align:center;

	margin-top:-10px;

	margin-left:-20px;
	}









/*
=========================
bar Chart Head 
=========================
*/


#barChartHead
	{
	display:block;
	float:left;
	position:relative;

	width:1152px;
	width:1440px;

	height:20px;

	background:#ffffff;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}

.barChartHeadStep
	{
	display:block;
	float:right;
	position:relative;

	/* 40 mins per big black bar */	
	width:32px;
	width:40px;

	/* 60 mins per big black bar */
	/* width:48px; */

	height:10px;

	background:#ffffff;

	font-size:10px;
	text-align:right;

	margin-top:10px;

	border-right-style:solid;
	border-right-width:1px;
	border-right-color:#000000;


	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}

.barChartHeadStep span
	{
	display:block;
	float:right;
	position:relative;
	width:32px;
	width:40px;

	background:#ffffff;

	border-style:solid;
	border-width:0px;
	border-color:#000000;

	text-align:center;

	margin-top:-11px;

	margin-right:-16px;
	}










/*
=========================
bar Chart
=========================
*/


#barChart
	{
	display:block;
	float:left;
	position:relative;

	width:1152px;
	width:1440px;

	height:400px;
	height:calc(400px - 80px);

	background:#ffffff;
	background:lime;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}

.chartStep
	{
	display:block;
	float:right;
	position:relative;

	width:15px;

	height:400px;

	background:#e6e6e6;

	font-size:6px;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}

.chartStep:nth-child(odd) 
	{
	background:#f2f2f2;
	}



/*

temperatureBar20x400.png
*/

.chartStepBar
	{
	display:block;
	float:left;
	position:absolute;

	bottom:0px;

	width:8px;
	width:10px;

	height:300px;

	background:#80bfff;

	background:url('/images/temperatureBar20x400.png') center bottom / 20px 400px no-repeat;

	font-size:6px;

	opacity:0.7;

	z-index:0;
	}

/*.chartStep:nth-child(odd) .chartStepBar
	{
	background: #bfbfbf;
	}*/








/*
================================
One Pixel Res Chart
================================
*/


div.onePixelResChartWrap
	{
	position:absolute;
	float:left;
	display:block;

	top:0px;
	left:0px;

	width:1440px;
	height:400px;

	background:transparent;

	z-index:999;
	}


.onePixelChartStep
	{
	display:block;
	float:right;
	position:relative;

	width:1px;

	height:400px;

	background:transparent;
	background:transparent;

	font-size:6px;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}

.onePixelChartStep:nth-child(odd) 
	{
	background:transparent;
	}


.onePixelChartStepBar
	{
	display:block;
	float:right;
	position:absolute;

	bottom:0px;

	width:1px;

	height:300px;

	background:#80bfff;

	background:url('/images/temperatureBar20x400.png') center bottom / 20px 400px repeat-x;

	font-size:6px;

	opacity:0.7;

	z-index:0;
	}
















/*
================================
SVG Chart
================================
*/


div.svgChartWrap
	{
	/*position:relative;
	float:left;*/
	display:table-cell;

	width:100%;
	height:100%;
	
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;

	background:#ffcccc;
	background:#ffffff;

	z-index:2;
	}


/*tool tip display */
div#svgStepBarToolTipDisplay
	{
	display:table-cell;

	background:transparent;
	color:#595959;
	/*font-size:12px;*/
	font-size: 1.5vmin;
	font-size: 3vmin;

	text-align:right;

	padding-left:3vmin;
	padding-right:3vmin;
	padding-top:20px;
	padding-bottom:0px;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;

	/*-webkit-border-radius: 	3px;
	-moz-border-radius: 		3px;
	border-radius: 				3px;*/
	}


div#svgStepBarToolTipDisplay span.svgTipDisplayHoursMin
	{
	font-size:25px;
	font-size:3vmin;
	font-size:6vmin;
	font-weight:bold;
	}

div#svgStepBarToolTipDisplay span.svgTipDisplayTmp
	{
	/*font-size:45px;
	line-height:45px;*/
	font-size:7vmin;
	font-size:14vmin;


	font-weight:bold;
	}

div#svgStepBarToolTipDisplay span.svgTipDisplayTmp.temperatureRed
	{
	color:#ff3333;
	}

div#svgStepBarToolTipDisplay span.svgTipDisplayTmp.temperatureGreen
	{
	color:#99ff99;
	}

div#svgStepBarToolTipDisplay span.svgTipDisplayTmp.temperatureBlue
	{
	color:#66ccff;
	}

div#svgStepBarToolTipDisplay span.svgTipDisplayHideData
	{
	/*visibility:none;*/
	color:transparent;
	}



svg.svgChart
	{
	width:100%;
	height:100%;
	}







/* background steps */

.svgChartStep
	{
	fill:#e6e6e6;
	}

.svgChartStep:nth-child(odd) 
	{
	fill:#f2f2f2;
	}

/* bars */
.svgChartStepBar
	{
	fill:#ff6600;
	fill:#ffffff;
	}


.svgChartStepBarBound
	{
	fill:transparent;
	}

.svgChartStepBarBound:hover
	{
	fill:black;
	}


.svgToolTip
	{
	fill:none;
	pointer-events: all;
	}

.svgChartStepBarBound:hover .svgToolTip
	{
	fill:red;
	pointer-events: all;
	}







/*
=========================
top tip
=========================
*/




/* Tooltip container */
/*.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}*/

/* Tooltip text */
.tooltip .tooltiptext 
	{
    visibility: hidden;
    width: 140px;
    background-color: #555;
	background-color: #262626;
	/*background-color: #004080;*/
	
    color: #fff;
    text-align: center;
	font-size:14px;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
	z-index:999;
    top: -88px;
    left: 50%;
    margin-left: -70px;

    /* Fade in tooltip */
    /*opacity: 0;
    transition: opacity 0.5s;*/
	}

/* Tooltip arrow */
.tooltip .tooltiptext::after 
	{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
	border-color: #262626 transparent transparent transparent;
	/*border-color: #004080 transparent transparent transparent;*/
	}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext 
	{
    visibility: visible;
    opacity: 1;
	}

/* the temperture */
.tooltip .tooltiptext span.tempetureText
	{
	line-height:30px;
	font-size:30px;
	font-weight:bold;
	color:#ffffff;
	}

.tooltip .tooltiptext hr
	{
	margin-top:4px;
	margin-bottom:4px;
	}