/*

stylesheet.css

Stylesheet for the national grid live status site

Created by Kate Morley - http://iamkate.com/ - and released under the terms of
the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

@font-face{
  font-family : 'Proza';
  font-weight : 300;
  src         : url('/proza-light.woff2') format('woff2'),
                url('/proza-light.woff') format('woff');
}

@font-face{
  font-family : 'Proza';
  font-weight : 400;
  src         : url('/proza-regular.woff2') format('woff2'),
                url('/proza-regular.woff') format('woff');
}

body{
  margin                : 0;
  padding               : 16px 16px 0;
  font                  : 300 16px/1.25 Proza,sans-serif;
  background            : #fafafa;
  color                 : #666;
  font-feature-settings : 'tnum';
}

@media screen and (min-resolution:120dpi){

  body{
    color : #222;
  }

}

@media screen and (max-width:480px){

  body{
    font-size : 16px;
  }

}

#container{
  max-width : 1280px;
  margin    : 0 auto;
}

/* boxes **********************************************************************/

.box{
  box-sizing    : border-box;
  margin        : 0 0 16px;
  padding       : 16px;
  border-radius : 2px;
  background    : white;
  box-shadow    : 0 1px 3px rgba(0,0,0,0.3);
}

h1,
h2{
  margin                  : -16px -16px 16px;
  padding                 : 10px 16px;
  border-top-left-radius  : 1px;
  border-top-right-radius : 1px;
  background              : #9e9e9e;
  color                   : #fff;
  font-weight             : normal;
}

/* introduction ***************************************************************/

#introduction h1{
  font-size : 2em;
}

#introduction p{
  margin      : 0;
  padding     : 0;
  font-size   : 18px;
  line-height : 24px;
}

/* energy boxes ***************************************************************/

#energyBoxes{
  display : flex;
  margin  : 0 -8px;
}

#energyBoxes > div{
  flex   : 1 1 0;
  margin : 0 8px;
}

#energyBoxes > div + div{
  flex : 0 0 400px;
}

#energyBoxes > div > div{
  padding-bottom : 1px;
}

#production{
  height : 546px;
}

#pieChartNow{
  max-width : 300px;
  margin    : 0 auto 12px;
}

/* energy box headers *********************************************************/

h2{
  font-size : 1.5em;
}

.unit{
  font-variant   : small-caps;
  text-transform : lowercase;
}

/* energy box contents ********************************************************/

#energyBoxes table{
  width           : 100%;
  margin          : 0;
  border-collapse : collapse;
}

#energyBoxes table.threeSources{
  margin-bottom : 144px;
}

#energyBoxes td{
  vertical-align : top;
}

#energyBoxes td:nth-child(1){
  padding : 0 0 16px;
}

#energyBoxes td:nth-child(2){
  padding : 0 0 16px 8px;
}

#energyBoxes td:nth-child(3),
#energyBoxes td:nth-child(4){
  padding : 0 0 16px 12px;
}

#energyBoxes td:nth-child(1),
#energyBoxes td:nth-child(3),
#energyBoxes td:nth-child(4){
  width      : 0;
  text-align : right;
}

#energyBoxes td:nth-child(3):after{
  content        : 'GW';
  color          : #999;
  font-variant   : small-caps;
  text-transform : lowercase;
}

#energyBoxes td:nth-child(4):after{
  content : '%';
  color   : #999;
}

#energyBoxes .key{
  position   : relative;
  width      : 1em;
  height     : 1em;
  margin-top : 3px;
}

#interconnectors .key:after{
  content    : '';
  position   : absolute;
  top        : 2px;
  bottom     : 2px;
  left       : 2px;
  right      : 2px;
  background : #fff;
}

.information{
  display       : inline-block;
  width         : 1em;
  height        : 1em;
  border-radius : 50%;
  background    : #9e9e9e;
  color         : #fff;
  line-height   : 1em;
  text-align    : center;
  cursor        : pointer;
}

.information:after{
  content : 'i';
}

/* energy box and key colours *************************************************/

.production{
  background : #000000;
}

.generation{
  background : #999;
}

#brownEnergy h2,
.brown,
.fossil-fuels{
  background : #d32f2f;
}

#greenEnergy h2,
.green,
.renewables{
  background : #7cb342;
}

#otherEnergy h2,
.unknown,
.other-energy{
  background : #0288d1;
}

.interconnectors{
  background : #9e9e9e;
}

/* type colours ***************************************************************/

.coal{
  background : #b71c1c;
}

.oil{
  background : #f44336;
}

.ocgt{
  background : #ff7043;
}

.ccgt{
  background : #fb8c00;
}

.solar{
  background : #ffc107;
}

.wind{
  background : #4caf50;
}

.hydro{
  background : #00acc1;
}

.pumped{
  background : #2196f3;
}

.nuclear{
  background : #5c6bc0;
}

.biomass{
  background : #ab47bc;
}

.other{
  background : #e91e63;
}

.hvdcMoyle{
  background : #e57373;
}

.hvdcCrossChannel{
  background : #ffb74d;
}

.britned{
  background : #dce775;
}

.eastWest{
  background : #81c784;
}

.nemoLink{
  background : #4dd0e1;
}

.ifa2{
  background : #7986cb;
}

.nsl{
  background : #ba68c8;
}

/* additional boxes ***********************************************************/

#additionalBoxes{
  clear : left;
}

#additionalBoxes h2{
  padding   : 8px 16px;
  font-size : 1.5em;
}

/* graphs *********************************************************************/

.graphs{
  margin : 0 72px;
}

.graph{
  float        : left;
  width        : 25%;
  margin-right : 48px;
}

.graph1{
  margin-left : -72px;
}

.graph4{
  margin-right : -72px;
}

@media screen and (max-width:860px){

  .graphs{
    margin : 0 8px;
  }

  .graph{
    width : 50%;
  }

  .graph1,
  .graph3{
    clear       : left;
    margin-left : -8px;
  }

  .graph2,
  .graph4{
    margin-right : -8px;
  }

}

@media screen and (max-width:455px){

  .graphs{
    margin : 0;
  }

  .graph{
    clear  : left;
    width  : 100%;
    margin : 0;
  }

}

h3{
  margin      : 12px 16px;
  padding     : 0;
  font-size   : 1em;
  font-weight : normal;
  text-align  : center;
}

h4{
  margin      : 0 16px 12px;
  padding     : 0;
  font-size   : 0.857em;
  font-weight : normal;
  text-align  : center;
}

.pieChart,
.lineGraph{
  margin : 0 0 12px;
}

#additionalBoxes .key{
  clear : left;
  float : left;
}

#additionalBoxes .key h3{
  margin     : 0 0 4px;
  text-align : left;
}

#additionalBoxes .key div{
  float     : left;
  margin    : 0 18px 6px 0;
  font-size : 0.857em;
}

#additionalBoxes .key span{
  float   : left;
  display : block;
  width   : 16px;
  height  : 16px;
  margin  : 1px 6px 0 0;
}

.clearFloats{
  clear : left;
}

/* footer *********************************************************************/

#footer p{
  margin      : 0;
  padding     : 0;
  font-size   : 18px;
  line-height : 24px;
}

#footer a{
  color           : rgb(128,192,64);
  text-decoration : none;
}

/* messages *******************************************************************/

#message{
  display         : flex;
  align-items     : center;
  justify-content : center;
  position        : fixed;
  top             : 0;
  bottom          : 0;
  left            : 0;
  right           : 0;
  z-index         : 10;
  background      : rgba(0,0,0,0.5);
}

#message > div{
  max-width     : 480px;
  margin        : 32px;
  padding       : 1.33em;
  border-radius : 2px;
  background    : #fff;
  box-shadow    : 0 12px 25px rgba(0,0,0,0.3);
}

#message > div > div{
  margin    : 0 0 0.75em;
  font-size : 1.5em;
}

#message > div > div:first-child{
  float       : right;
  width       : 2.33em;
  margin      : -0.5em;
  line-height : 2.33em;
  text-align  : center;
  cursor      : pointer;
}

#message > div > div:first-child:after{
  content : '✖';
}

/* pie charts *****************************************************************/

.pie-chart{
  display   : grid;
  max-width : 300px;
  margin    : 0 auto;
  font-size : 16px;
}

.pie-chart > div,
.pie-chart > svg{
  grid-row    : 1 / 2;
  grid-column : 1 / 2;
}

.pie-chart > div{
  display       : grid;
  justify-items : center;
  align-content : center;
  text-align    : center;
}

.pie-chart > div + div{
  opacity : 0;
}

.pie-chart > div > div:nth-child(2){
  display : block;
  width   : 35%;
  height  : 2px;
  margin  : 4px 0;
}

.pie-chart > svg{
  z-index : 1;
}

.pie-chart > svg > path{
  stroke        : #fff;
  stroke-width  : 2;
  vector-effect : non-scaling-stroke;
}

/* fill colours ***************************************************************/

path.coal{
  fill : #b71c1c;
}

path.oil{
  fill : #f44336;
}

path.ocgt{
  fill : #ff7043;
}

path.ccgt{
  fill : #fb8c00;
}

path.solar{
  fill : #ffc107;
}

path.wind{
  fill : #4caf50;
}

path.hydro{
  fill : #00acc1;
}

path.pumped{
  fill : #2196f3;
}

path.nuclear{
  fill : #5c6bc0;
}

path.biomass{
  fill : #ab47bc;
}

path.other{
  fill : #e91e63;
}

path.fossil-fuels{
  fill : #d32f2f;
}

path.renewables{
  fill : #7cb342;
}

path.other-energy{
  fill : #0288d1;
}