styles/chartcss/scatter.scss

@font-face {
font-family:'Guardian Egyptian Web'; src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.eot');src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.eot?#iefix') format('embedded-opentype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.woff2') format('woff2'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.woff') format('woff'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.ttf') format('truetype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Regular.svg#GuardianEgyptianWeb-Regular') format('svg');font-weight:400;font-style:normal;font-stretch:normal}

@font-face {
font-family:'Guardian Egyptian Web'; src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.eot');src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.eot?#iefix') format('embedded-opentype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.woff2') format('woff2'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.woff') format('woff'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.ttf') format('truetype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Medium.svg#GuardianEgyptianWeb-Medium') format('svg');font-weight:500;font-style:normal;font-stretch:normal}

@font-face {
font-family:'Guardian Egyptian Web'; src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.eot');src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.eot?#iefix') format('embedded-opentype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.woff2') format('woff2'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.woff') format('woff'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.ttf') format('truetype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.svg#GuardianEgyptianWeb-Semibold') format('svg');font-weight:900;font-style:normal;font-stretch:normal}

@font-face {
font-family:'Guardian Text Sans Web';
src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.eot');src:url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.eot?#iefix') format('embedded-opentype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.woff2') format('woff2'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.woff') format('woff'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.ttf') format('truetype'),url('//pasteup.guim.co.uk/fonts/0.1.0/hinting-on/kerning-on/original/GuardianTextSansWeb/GuardianTextSansWeb-Regular.svg#GuardianTextSansWeb-Regular') format('svg');font-weight:400;font-style:normal;font-stretch:normal}

@font-face {
font-family:'Guardian Agate Sans';
src:url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Reg.eot');src:url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Reg.eot?#iefix') format('embedded-opentype'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Reg.woff') format('woff'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Reg.ttf') format('truetype'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Reg.svg#Guardian-Text-Egyp-Web-Reg') format('svg');font-weight:normal;font-style:normal;font-stretch:normal}

@font-face {
font-family:'Guardian Agate Sans';
src:url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Bold.eot');src:url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Bold.eot?#iefix') format('embedded-opentype'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Bold.woff') format('woff'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Bold.ttf') format('truetype'),url('https://pasteup.guim.co.uk/fonts/latin1/Guardian-Ag-Sans-1-Web-Bold.svg#Guardian-Text-Egyp-Web-Medium') format('svg');font-weight:bold;font-style:normal;font-stretch:normal}

html {
  -webkit-font-smoothing:antialiased;
  font-family:'Guardian Egyptian Web', georgia, serif;
  box-sizing:border-box;
  font-size: 100%;
  background-color: white;
}

    
#outer-wrapper {

  background-color: white;

  a {
    color:#005689;
    text-decoration: none !important;
    border-bottom: 0.0625em solid #dcdcdc;
    -webkit-transition: border-color 0.15s ease-out;
    transition: border-color 0.15s ease-out;
  }

  a:hover {
    border-color: #6e99b3;
  }

  .indent {
    margin-left:20px;
  }

  ul {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-padding-start:0;
  }

  p {
    margin:0;
  }

/*  h1 {
    font-family: "Guardian Egyptian Web",Georgia,serif;
    font-size: 32px;
    font-weight: normal;
    color: black;
    line-height: 38px;
  }

  h2 {
    font-family: "Guardian Egyptian Web",Georgia,serif;
    font-size: 1.2em;
    font-weight: normal;
    color: black;
    font-weight:900;
  }
*/
/*  .chartTitle {
    font-size:1.25em;
    line-height:1.375em;
    padding-bottom:.45em;
    font-weight:600;
    color:#000;
  }*/

  .borderBottom {
    border-bottom:1px solid #dcdcdc;
    padding-bottom:.45em;
  }

  .borderTop {
    border-top:1px solid #dcdcdc;
    padding-top:.45em;
  }


  .chartSans, .axis text, .axis .label {
    font-size:12px;
    line-height:1em;
    color:#767676;
    fill:#767676;
    font-family:'Guardian Text Sans Web', 'Agate Sans', sans-serif;
  }


  @media (max-width: 450px) {
   .chartSans, .axis text,.axis .label {
      font-size:8px;
    }

  /*  .dot-label {
    display: none;
    }*/

}

  .dot-label {
    fill:#767676;
    font-size:10px;
  }

  /*.subTitle {
    font-size:1em;
    color:#808080;
    font-weight:bold;
    font-family:'Guardian Text Sans Web', 'Agate Sans', sans-serif;
  }

  .footer {
    font-size: 12px;
    line-height: 16px;
    color: rgb(118, 118, 118);
    font-family: 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  }*/

  .chartNotes { 
    font-size:0.9em; 
    color:#767676;
    font-family:'Guardian Text Sans Web', 'Agate Sans', sans-serif;
  }

  .center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  }

  .btn {
    background-color: #eaeaea;
    border-radius: 62.5em;
    border: none;
    display: inline-block;
    outline: 0;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 16px;
    font-family: 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    color: #767676;
    padding: 4px 10px;
    margin: 1px 1px;
    text-align: right;
    cursor:pointer;
  }

  .btn:hover {
    opacity: 0.7 !important;
  }

  .btn-selected {
    background-color: #005689;
    color: #FFF;
  }

  .gu-graphic-footer {
    border-top:1px solid #dadada;
    padding-top:1px;
    color:#767676;
    font-family:'Guardian Text Sans Web', arial, sans-serif;
    font-size:.75em;
    position:relative;
  }

  .gu-graphic-footer p {
    font-size:.75em;
    margin:0;
    display:inline-block
  }

  .gu-graphic-footer p:nth-of-type(2) {
    float:right
  }

  .right {
    text-align: right;
    float:right;
  }   

  .left {
    text-align: left;
    float:left;
  }

  .btns-share .btn-tt {
    background: #bdbdbd url(../img/twitterIcon.svg) no-repeat center center;
  }

  .btns-share .btn-tt:hover {
    background-color: #03b3ee;
  }
      
  .btns-share .btn-fb {
    background: #bdbdbd url(../img/facebookIcon.svg) no-repeat center center;
  }

  .btns-share .btn-fb:hover {
      background-color: #3067a3;
  }

  .btns-share button {
      color: #fff;
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 9000px;
      display: inline-block;
      vertical-align: top;
      cursor: pointer;
      outline: none;
      -webkit-appearance: button;
      text-transform: none;
      overflow: visible;
      -webkit-font-smoothing: antialiased;
      margin: 0;
  }

  #loading {
    font-family: "Guardian Egyptian Web",Georgia,serif;
    font-size:1.1em;
    color:#000;
  }



  .axis path,
  .axis line {
    fill: none;
    stroke: #767676;
    shape-rendering: crispEdges;
  }

  .y {
    margin-left: 20px;
  }

  .regression {
    stroke-width: 2px;
    stroke: steelblue;
    stroke-dasharray: 10,5;
  }

  .keyText {
    font-size:0.8em;
    margin-top: 5px;
  }

  .keyDiv {
    display: inline-block;
    margin-left:10px;
  }

  .keyDiv .keyCircle:first-of-type, .keyDiv .keySymbol:first-of-type {
      margin-left:0;
  }

  .keyCircle {
    width:12px;
    height:12px;
    border-radius: 50%;
    display: inline-block;
  }

  .keySymbol{
    width:12px;
    height:12px;
/*    margin-bottom: 5px;*/
    display: inline-block;
  }

/*  .keySymbol {
    display: flex;
    align-items: center;
    justify-content: center;

  }*/

  .keyText {

  }

  .greyedOut {
    opacity: 0.2
  }

  .currentfilter {
    background-color: black;
    color: white
  }

  @media (max-width: 750px) {

    .chartSans {
      font-size:0.7em;
    }

  }

  .tipster {
    position: absolute!important;
    width: 200px;
    pointer-events: none;
    background-color: white;
    border: 1px;
    border-color: black;
    border-style: solid;
    padding: 10px;
    line-height: 1.1em;
    font-size: 0.9em;
  }

}

#graphicContainer {
  position:relative;
  margin-bottom:10px;
}

/*
#graphicContainer {
  display: inline-block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.svg-content {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
*/

#key {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 5px;
 /* min-height: 60px;*/
}

#colourBlind {
  width: 100px;
  height: 23px;
  border-radius: 15px;
  line-height: 22px;
  cursor: pointer;
  display: inline-block;
  background-color: darkgrey;
  text-align: center;
}

#colourBlind.chartNotes {
  color: white;
}

#key .colour_vision_key {
  display: block;
}

#key .colour_blind_key {
  display: none;
}


#key.colourvision .colour_vision_key {
  display: none;
}

#key.colourvision .colour_blind_key {
  display: block;
}




  #outer-wrapper {
    position: relative;
  }

  #outer-wrapper.immersive {
    max-width:1300px;
  }

  #outer-wrapper.inline {
    max-width:620px;
  }

  #outer-wrapper.showcase {
    max-width:620px;
  }