/* WWF styles, from Brand Guidelines, Chapter 7

Infographic colour scheme
Green: #5E9C1C; Aqua: #0097AA; Blue: #1892CA; Light orange: #D61D00; Dark Orange: #E8510A; Red: #C90943;
*/

/* Page layout */
body { background: white; margin: 0; padding: 0; font-family: arial, helvetica, sans-serif; line-height: 1.15; }
#wrapper { width: 940px; height: 500px; margin: 0 auto; overflow: hidden; background: #555; position: relative; }
#wrapper-inner { width: 100%; height: 100%; position: relative; background: white; font-size: 15px; z-index: 1; overflow: hidden; left: 0px; top: 0px; }
#info-text { position: absolute; top: 0px; left: 0px; padding: 15px 15px 15px 25px; width: 150px; height: 470px; margin: 0 0 0 740px; color: white; font-size: 13px; font-family: arial, sans-serif; line-height: 1.2; }

/* Default links */
a:link, a:visited { color: #006262; text-decoration: none; }
a:hover, a:active { color: #002929; text-decoration: underline; }

/* Fly-out text block */
#textblock { font-family: Guardian-Text-Egyp-Web-Reg-Latin, georgia, serif; position: absolute; top: 20px; padding: 20px; background: #7BBB00; text-align: right; width: 640px; overflow: hidden; }
#textblock #head1 { color: #444; font-size: 42px; font-family: GuardianTitlepieceWeb-Regular-Latin, georgia, serif;}
#textblock #subhead { color: #4A4A4A; font-size: 22px; }
#textblock #text { color: white; font-size: 22px; line-height: 1.3;}
#textblock #info-icon, #textblock #tweet-icon { margin-left: 5px; cursor: pointer; color: #4A4A4A; font-size: 20px; width: 20px; }
#small-tweet-button { display: inline; position: relative; }

/* Controls */
#controls { display: none; }
.button { position: absolute; cursor: pointer; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); color: #D61D00; width: 100px; font-size: 100px; }
#next-button { top: 200px; right: -120px; }
#back-button { display: none; }

/* Info area */
.info-text-panel { display: none; color: rgb(244,243,237); }
.info-text-panel.selected { display: block; }
#info-close { text-align: right; cursor: pointer; margin-bottom: 5px; }
#info-close:hover { color: #aaa; }
.info-text-panel a:link, .info-text-panel a:visited { color: rgb(244,243,237); text-decoration: underline; }
.info-text-panel a:hover, .info-text-panel a:active { color: white; text-decoration: underline; }

/* SVG general */
svg { font-family: Guardian-Text-Egyp-Web-Reg-Latin, georgia, serif; font-size: 18px; text-anchor: middle; width: 100%; height: 100%; }
.plane { fill: #888; }
.graphline { fill: none; stroke-width: 6; }

/* SVG forecast line and label */
.graphline.forecast { stroke: white; stroke-width: 3; stroke-dasharray: 20,20;  }
.graphline.forecastbg { stroke: #333; stroke-width: 20; }
#p1 text { text-anchor: start; }
#p1 circle { opacity: 0.75; }

/* SVG Heathrow line and label */
.graphline.lhr { stroke: #0097AA; }
#p2 text { fill: #0097AA; text-anchor: end; }

/* SVG UK line and label */
.graphline.uk { stroke: #5E9C1C; }
#p3 text { fill: #5E9C1C; text-anchor: end; }

/* SVG proportion line and label */
.graphline.proportion { stroke: #1892CA; }
/*#p4 #case { font-family: FontAwesome; font-size: 100px; fill: rgba(100,100,100,0.6);}*/

/* SVG proportion line and label */
.graphline.videoConf { stroke: #C90943; stroke-dasharray: 5,5; }
.middle { text-anchor: middle; }
.stat { font-size: 70px; font-family: GuardianTitlepieceWeb-Regular-Latin, georgia, serif;}

/* SVG axes */
.axis { shape-rendering: crispEdges; }
.axislabel { fill: black; text-anchor: middle; }
.y.axis line, .y.axis path { fill: none; stroke: #000; }
.y.axis text { font-size: 14px; fill: #333; stroke: none; }
.y.axis-label { font-size: 18px; fill: #333; stroke: none; }
.x.axis line, .x.axis path { fill: none; stroke: #000; }
.x.axis .tick { stroke: #777; stroke-dasharray: 2,2; }
.x.axis .minor { stroke-opacity: 0.4; }
.x.axis text { font-size: 20px; fill: #0097AA; stroke: none; }
.domain { display: none; }

/* Social */
#final-shares { text-align: right; padding-right: 230px; }
#tweet-button { vertical-align: bottom; position: relative; left: -800px; visibility: hidden; }
#fb-button { display: none; vertical-align: bottom; }
#credit { font-family: Guardian-Text-Egyp-Web-Reg-Latin, georgia, serif; text-align: right; position: absolute; right: 5px; bottom: 5px; font-size: 10px; color: #aaa; text-transform: uppercase; font-family: Guardian-Sans-Web-Regular-Latin, georgia, serif; }

/* Font */
@font-face {
  font-family: 'Guardian-Text-Egyp-Web-Light-Latin';
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Egyp Web-Light.eot");
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Egyp Web-Light.eot?#iefix") format("embedded-opentype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Egyp Web-Light.woff") format("woff"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Egyp Web-Light.ttf") format("truetype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Egyp Web-Light.svg#Guardian Egyp Web") format("svg");
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Guardian-Text-Egyp-Web-Med-Latin';
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Med.eot");
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Med.eot?#iefix") format("embedded-opentype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Med.woff") format("woff"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Med.ttf") format("truetype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Med.svg#Guardian Text Egyp Web") format("svg");
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Guardian-Text-Egyp-Web-Reg-Latin';
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Reg.eot");
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Reg.eot?#iefix") format("embedded-opentype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Reg.woff") format("woff"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Reg.ttf") format("truetype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Reg.svg#Guardian Text Egyp Web") format("svg");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Guardian-Text-Egyp-Web-Reg-Latin';
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Reg-It.eot");
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Reg-It.eot?#iefix") format("embedded-opentype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Reg-It.woff") format("woff"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Reg-It.ttf") format("truetype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Text Egyp Web-Reg-It.svg#Guardian Text Egyp Web") format("svg");
  font-weight: 400;
  font-style: italic;
  font-stretch: normal;
}

@font-face {
  font-family: 'GuardianTitlepieceWeb-Regular-Latin';
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/GuardianTitlepieceWeb-Regular.eot");
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/GuardianTitlepieceWeb-Regular.eot?#iefix") format("embedded-opentype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/GuardianTitlepieceWeb-Regular.woff") format("woff"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/GuardianTitlepieceWeb-Regular.ttf") format("truetype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/GuardianTitlepieceWeb-Regular.svg#Guardian Titlepiece Web") format("svg");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Guardian-Sans-Web-Regular-Latin';
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Sans Web-Regular.eot");
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Sans Web-Regular.eot?#iefix") format("embedded-opentype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Sans Web-Regular.woff") format("woff"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Sans Web-Regular.ttf") format("truetype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Sans Web-Regular.svg#Guardian Sans Web") format("svg");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Guardian-Sans-Web-Light-Latin';
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Sans Web-Light.eot");
  src: url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Sans Web-Light.eot?#iefix") format("embedded-opentype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Sans Web-Light.woff") format("woff"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Sans Web-Light.ttf") format("truetype"),
       url("https://gdn-pub.s3.amazonaws.com/2013/feb/fonts/latin1/Guardian Sans Web-Light.svg#Guardian Sans Web-Light") format("svg");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}