/*--------.BarChartContainer {position: relative;height: 190px}

#BarChart_H2_bg {width : 614px; height : 354px; position: absolute;  padding: 0.2vh; 
             background: url(BarChart_H2/HydrogenSmokeChart.gif) center no-repeat; 
             background-size: cover; color: white; pointer-events: auto; z-index: -1}


/* Base of chart = 185px (height of highest element) =  below top; 2x152=304px ...  -----*DISABLE/
.GraphIcons {position: absolute;  z-index: 2; bottom: 2px;}
.GryPos  {left: 120px; height: 108px;}   
.BlkPos  {left: 170px; height: 172px;}
.BluPos  {left: 255px; height:  72px;}  
.Gr1Pos  {left: 305px; height: 190px;}


h4[id$="Txt"]   {color:white; position: absolute; z-index: 2; }
#GryTxt  {left: 130px; font-size: 120%; bottom: 50px }
#BlkTxt  {left: 190px; font-size: 200%; bottom: 95px }
#BluTxt  {left: 265px; font-size: 80%;  bottom: 40px}
#Gr1Txt  {left: 325px; font-size: 210%; bottom: 105px}
#Gr2Txt  {left: 390px; font-size: 70%;  bottom: -15px} 

-------------------------*/



/* ----------NEW TABLE(S) ------------------------------------ */
#NewChartContainer {  background-color: grey;  padding: 10px; }


table[id*="col-"], #Yaxis  {display: inline-block; width: 6vw; height: 25vw; position: relative; z-index: 1}
.smoke                       {position: relative; height: 20vw; z-index: -1}
.smoke img, .smoke h4        {position: absolute; bottom: 0; margin-left: 50%; transform: translateX(-50%);}
.smoke h4                    {translate: 10% 30%;}

#Yaxis                {width: 4vw;}

#Y-axisLabel          {height: 25vw; position: absolute; }
#Y-axisLabel h4       {position: absolute; height: 100%; font-size: 150%; translate:-120% -50%;  
                      writing-mode: vertical-lr;  transform: rotate(180deg); color: white; }
#Y-axisNumbers        {position: absolute; width: 2vw;bottom: 0; height: 20vw; color: white; translate: 140% 100%;}


#col-grey  .smoke {border-left: black solid 2px;}
#col-grey  .smoke  h4, #col-grey  .smoke  img {height: 12vw; font-size: 120%}       /*-- 22 ->12      ----*/
#col-black .smoke  h4, #col-black .smoke  img {height: 15vw;  font-size: 200% }     /*-- 30 ->15      ----*/
#col-blue  .smoke  h4, #col-blue  .smoke  img {height: 6vw; font-size: 80%; }     /*-- 19 ->6       ----*/
#col-green1 .smoke h4, #col-green1 .smoke img {height: 16vw; font-size: 230% }    /*-- 35 ->16      ----*/
#col-green2 .smoke h4, #col-green2 .smoke img {height: 0vw; font-size: 80% }
#col-white .smoke h4, #col-white .smoke img {height: 0vw; font-size: 80%;  }

.box div              {margin: 0 0.7vw;}
.box div  h2          {height: 3vw; border: black solid 1px; padding: 0.5vw; color: white; font-size: 150%; line-height: 0.6;}
#col-grey   .box h2 {background-color: grey;}
#col-black  .box h2 {background-color: black;}
#col-blue   .box div {background-color: #00abd2;}
#col-green1 .box div {background-color: #61d36f;}
#col-green2 .box div {background-color: #61d36f;}
#col-white .box div {background-color: white; }
#col-white .box div h2 {color: black; }

table     h4       {width: 2em; bottom: -2em; left: 0.2em; color: white}
table[id*="col-"]:hover    { z-index: 2}



/*----------------   PENULTIMATE VERSION ---------------------------
#ChartContainer {
  background-color: grey;
  padding: 10px;
}
th,td {
  overflow: visible;}
#smoky td          {width: 2vw; height: 25vw; position: relative;}
#smoky td h4       {width: 2em; bottom: -2em; left: 0.2em; color: white}
#smoky td img, h4  {position: absolute; bottom: 0; margin-left: 50%; transform: translateX(-50%);}
#x-axis td         {margin 1.3vw; }
#x-axis h2         {color: white}
#x-axis div        {height: 3vw; border: black solid 1px; padding: 1px;}
 #box-grey div  {background-color: grey;}
 #box-black div {background-color: black;}
 #box-blue  div {background-color: #00abd2;}
 #box-green div {background-color: #61d36f;}
 #box-white div {background-color: white;}
h2 {line-height: 0px;}


#smoke-grey {border-left: black solid 2px;}
#smoke-grey h4, #smoke-grey img {height: 12vw; font-size: 120%}
#smoke-black h4, #smoke-black img {height: 20vw;  font-size: 200% }
#smoke-blue h4, #smoke-blue img {height: 8vw; font-size: 80% }
#smoke-green h4, #smoke-green img {height: 23vw; font-size: 230% }
#smoke-none h4, #smoke-none img {height: 8vw; font-size: 80% }
#smoke-white h4, #smoke-white img {height: 8vw; font-size: 80% }

#YaxisLabel {height: 100%; position: relative; }
#YaxisLabel h4 {position: absolute; translate:-90% -20%;  height: 100%;font-size: 150%; writing-mode: vertical-lr;  transform: rotate(180deg); color: white; 
               }
#YaxisNumbers         {height: 100%; color: white; translate:10% -20%;}


div[id*="box-"]:hover div:nth-child(2) {opacity: 50%}
--------------- END OF PENULTIMATE VERSION ----------*/



/*----------------   OLDER VERSION ---------------------------
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:#E7E9EB;}
#ChartBox {display: grid; height:40vw; background-color:grey; position:relative;}

div[id*="bar-"] {height: 39vw; width: 12vw; position: relative;
                 border: red solid 1px;}

.smoky {height: 33vw; background-color: #f2fff2; position: relative; }
.smoky img, .smoky h4 {position: absolute; bottom: 0;
                       margin-left: 50%; transform: translateX(-50%);}
.smoky h4             {width: 2em; bottom: -2em; left: 0.2em}

.greyH h4, .greyH img {height: 12vw; font-size: 120%}
.blackH h4, .blackH img {height: 23vw;  font-size: 230% }
.blueH h4, .blueH img {height: 8vw; font-size: 80% }


div[id*="graphBar_"] {height: 5vw; width: 12vw; 
                                  position: absolute; bottom: 0px;
                                  background-color: yellow}

div[id*="bar-"]:hover div:nth-child(2) {opacity: 50%}

#bar-neut    {color: white; position: relative; width: 10vw; display: flex; }

#axisLabelNEW {width: 75%;height: 70%;font-size: 100%; writing-mode: vertical-lr; transform: rotate(180deg);
               border: green solid 1px;}
#axis         {height: 100%; width: 25%; position: relative;top: 0;
                border: green solid 1px;}
</style>
</head>
<body>

<div id="ChartBox">


   <div id="bar-neut">   
     <div id="axisLabelNEW"><h4> Tonnes of CO<sub>2 eq</sub></h4></div> 
     <div id="axis">
                    <div style="position: relative; top: 0vw">20</div><br>
                    <div style="position: relative; top: 6.5vw">10</div><br>
                    <div style="position: relative; top: 13vw">0</div>
     </div>
     <div></div>   <!----- was H colour --->
   </div>

   <div id="bar-grey">
     <div class="smoky greyH"> 
       <img src="img_tree.gif">
       <h4> 12 t</h4>
     </div>
     <div id="graphBar_A"><h4> Grey<sup> </sup>
     </h4></div>
   </div>

   <div id="bar-black">
     <div class="smoky blackH">        
       <img src="img_tree.gif">
       <h4> 20 t </h4>
     </div>
     <div id="graphBar_B"><h4> Black<sup> </sup>
     </h4></div>
   </div>

  <div id="bar-blue">
    <div class="smoky blueH">       
      <img src="img_tree.gif">
      <h4> 8 t </h4>
    </div>
    <div  id="graphBar_B"><h4> Blue<sup> </sup>
    </h4></div>
  </div>


</div>

</body>
</html>

-------------------------------------------*/