/* WWF styles, from Brand Guidelines, Chapter 7

Containers: #F4F3EC; Containers, heading background: #E9E8D8
Links: #006262; Links hover: #002929
Body: #222222, 15pt; Descriptions: #4A4A4A, 12pt
Heavy lines and captions: #777777; Light lines: #CCCCCC

Infographic colour scheme
Green: #5E9C1C; Aqua: #0097AA; Blue: #1892CA; Light orange: #F29724; 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: 935px; height: 500px; margin: 0 auto; overflow: hidden; background: #555; position: relative; }
#wrapper-inner { width: 100%; height: 100%; position: relative; background: #F4F3EC; 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 735px; 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: wwfregular; position: absolute; top: 20px; padding: 20px; background: #E9E8D8; text-align: right; width: 640px; overflow: hidden; }
#textblock #head1 { color: #1892CA; font-size: 62px; }
#textblock #subhead { color: #4A4A4A; font-size: 36px; }
#textblock #text { color: #4A4A4A; font-size: 36px; }
#textblock #info-icon, #textblock #tweet-icon { margin-left: 5px; cursor: pointer; color: #4A4A4A; font-size: 20px; width: 20px; }
#small-tweet-button { display: inline-block; width: 60px; top: 2px; height: 1em; position: relative; }

/* Controls */
#controls { display: none; }
.button { position: absolute; cursor: pointer; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); color: #F29724; 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: wwfregular; font-size: 28px; 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 conference call panel */
.conf-call.left { fill: #5E9C1C; }
.conf-call.right { fill: #0097AA; }

/* SVG proportion line and label */
.graphline.videoConf { stroke: #C90943; stroke-dasharray: 5,5; }
.middle { text-anchor: middle; }
.stat { font-size: 80px; }

/* SVG spending bars */
#rightbar { fill: #C90943; }
#leftbar { fill: #5E9C1C; }

/* 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: 18px; fill: #333; stroke: none; }
.y.axis-label { font-size: 22px; 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: 26px; fill: #0097AA; stroke: none; }
.domain { display: none; }

/* Equation for panel 6 */
#equation { position: absolute; top: -300px; left: 20px; text-shadow: -2px 2px 3px #999; line-height: 15px; }
#equation .eq-element { height: 100px; display: inline-block; vertical-align: bottom; font-family: wwfregular; font-size: 150px; margin-left: 12px; position: relative; }
#equation .eq-element.block { padding: 10px 10px 25px; display: inline-block; background: white; box-shadow: -4px -4px 4px #999; -moz-box-shadow: -4px -4px 4px #999; -webkit-box-shadow: -4px -4px 4px #999; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 
    transform:rotate(-5deg);
    -ms-transform:rotate(-5deg); /* IE 9 */
    -webkit-transform:rotate(-5deg); /* Safari and Chrome */

}
#equation .eq-element i { display: block; font-size: 120px; text-shadow: none; padding: 0px 10px; }
#equation #eq-5 { color: #C90943; }
#equation #eq-6 { padding-left: 100px; }
#equation #eq-7 { color: #0097AA; }
#equation #eq-9 { color: #E8510A; }
#equation #eq-11 { color: #5E9C1C; }
#equation .eq-element img { display: block; width: 160px; margin-top: 10px; }

/* Controls in footer */
#controls { width: 935px; margin: 4px auto; font-size: 14px; color: #aaa; text-transform: uppercase; opacity: 0.9; }
#controls #buttons.left { float: left; }
#controls #buttons.right { float: right; }
#controls #buttons i { cursor: pointer; margin-left: 2px; }

/* 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: wwfregular; text-align: right; position: absolute; right: -100px; bottom: 10px; font-size: 16px; color: #aaa; text-transform: uppercase; }

/* Font */
@font-face {
    font-family: 'wwfregular';
    src: url('../font/wwf-webfont.eot');
    src: url('../font/wwf-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/wwf-webfont.woff') format('woff'),
         url('../font/wwf-webfont.ttf') format('truetype'),
         url('../font/wwf-webfont.svg#wwfregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.wwf-font { font-family: wwfregular!important; }