body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, button {
  margin: 0;
  padding: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal; }

ol, ul {
  list-style: none; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%; }


html {
  -webkit-text-size-adjust: none; }

body {
  background-color: white;
  margin: 0;
  padding: 0 0 100px 0;
  font-size: 85%;
  line-height: 122%; }

body, input, textarea, button {
  font-family: "Helvetica", "Arial", sans-serif;
  color: #464646; }

a {
  text-decoration: none; }

button {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: none; }

.clearfix {
  clear: both; }
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  * html .clearfix {
    height: 1px; }

.row {
  display: table; }
  .row .vcentered {
    display: table-cell;
    vertical-align: middle; }

.co2 {
  font-size: 70%;
  position: relative;
  top: 10%; }

#container {
  width: 900px;
  display: table;
  margin: 0 auto;
  position: relative; }

#head {
  position: relative;
  margin-top: 23px;
  margin-bottom: 46px; }
  #head #header {
    clear: both;
    position: relative;
    top: 0;
    height: 46px; }
    #head #header:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden; }
    * html #head #header {
      height: 1px; }
    #head #header h1, #head #header h2 {
      position: absolute;
      font-weight: normal;
      bottom: 0;
      top: auto; }
    #head #header #logo {
      clear: both;
      left: 10px;
      font-size: 200%;
      background-image: url(/images/quilt-logo.png);
      background-repeat: no-repeat;
      width: 295px;
      height: 49px; }
      #head #header #logo:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden; }
      * html #head #header #logo {
        height: 1px; }
      #head #header #logo a {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        color: #464646;
        text-indent: -9000px; }
      #head #header #logo span {
        display: none;
        color: #5f5f5f;
        position: relative;
        left: 305px;
        top: 0px;
        font-size: 55%; }
    #head #header #strapline {
      color: #f1f1f1;
      font-size: 150%;
      right: 10px;
      font-style: italic; }

body.visualiser #head #header #logo span {
  display: inline; }

#nav {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #eeeeee;
  position: absolute;
  right: 0;
  top: -2px;
  height: 31px;
  padding: 15px 40px 0 10px; }
  #nav li {
    float: left;
    margin-left: 30px; }
    #nav li a {
      color: #464646; }
      #nav li a:hover {
        color: #ff0000; }
    #nav li.active a {
      font-weight: bold; }

#intro {
  clear: both;
  margin: 23px 0 23px 10px; }
  #intro:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  * html #intro {
    height: 1px; }
  #intro p {
    float: left;
    width: 45%; }
  #intro p + p {
    margin-left: 40px; }

#mode {
  clear: both;
  position: relative;
  left: 0;
  border-bottom: solid 5px #5f5f5f;
  width: 500px; }
  #mode:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  * html #mode {
    height: 1px; }
  #mode .tab {
    background-color: #464646;
    color: #f1f1f1;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 200px;
    float: left;
    position: relative;
    padding: 8px 0 0 10px;
    height: 15px;
    color: #f1f1f1;
    font-size: 90%;
    font-weight: bold;
    line-height: 90%;
    cursor: pointer; }
    #mode .tab.active {
      background-color: #5f5f5f;
      color: #f1f1f1;
      color: #f1f1f1; }
      #mode .tab.active:hover {
        background-color: #5f5f5f;
        color: #f1f1f1; }
    #mode .tab:hover {
      background-color: #3b3b3b;
      color: #f1f1f1; }
    #mode .tab + .tab {
      border-left: solid 1px #3b3b3b; }
  #mode #mode_explorer {
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0; }
  #mode #mode_user-entry {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0; }

#conversion {
  background-color: #5f5f5f;
  color: #f1f1f1;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 0 8px 10px;
  height: 30px;
  position: relative;
  z-index: 1000;
  top: -5px; }
  #conversion #configuration-selection {
    float: none;
    clear: both;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 10px 20px;
    margin-top: 10px; }
  #conversion #layouts {
    display: inline; }
    #conversion #layouts div {
      display: inline;
      vertical-align: top; }
    #conversion #layouts span {
      vertical-align: text-top; }
    #conversion #layouts select {
      display: inline;
      margin-left: 4px;
      vertical-align: top;
      position: relative; }
    #conversion #layouts input {
      vertical-align: baseline; }
    #conversion #layouts .multiplier {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      color: #000000;
      border: none;
      font-weight: bold;
      font-size: 1em;
      padding: 3px 6px;
      width: 50px;
      margin-left: 4px;
      outline: none; }
  #conversion #layouts, #conversion #db-result {
    font-size: 0.8em;
    color: #f1f1f1; }
  #conversion #explorer {
    position: relative;
    padding-top: 4px; }
  #conversion #source-wrap {
    font-size: 0.8em;
    color: #999;
    position: absolute;
    left: auto;
    margin-top: 10px;
    top: 33px;
    right: 10px; }
    #conversion #source-wrap #source a {
      font-weight: normal;
      color: #999;
      border-bottom: dotted 1px #999; }
      #conversion #source-wrap #source a:hover {
        color: #ff0000;
        border-color: #ff0000; }
  #conversion #db-result a {
    font-weight: bold;
    cursor: pointer;
    border-bottom: dotted 1px #ff0000;
    color: #ff0000;
    margin-left: 2px; }
    #conversion #db-result a:hover {
      border-bottom-style: solid; }
  #conversion #user-entry label {
    font-size: 110%;
    font-weight: bold;
    margin-right: 10px; }
  #conversion #mass-and-units {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    display: inline-block;
    padding: 5px 0 5px 0;
    height: 18px;
    width: 400px;
    position: relative;
    z-index: 10000;
    cursor: pointer;
    border: solid 1px transparent;
    background: #fff url(/images/down.png) top right no-repeat; }
    #conversion #mass-and-units:hover {
      border-color: red; }
    #conversion #mass-and-units #mass-input {
      outline: none;
      border: none;
      background-color: #fff;
      padding: 0 0 0 10px;
      height: 20px;
      font-size: 150%;
      font-weight: bold;
      color: #000000;
      width: 180px; }
    #conversion #mass-and-units #units {
      display: inline-block;
      position: absolute;
      top: 0;
      right: 0;
      width: 210px;
      height: 30px;
      vertical-align: top;
      z-index: 2222; }
      #conversion #mass-and-units #units #units-pulldown {
        position: absolute;
        top: 0;
        right: 0;
        height: 28px;
        width: 180px;
        padding-right: 30px;
        color: #000000;
        font-size: 130%;
        font-weight: bold; }
        #conversion #mass-and-units #units #units-pulldown .value {
          position: relative;
          top: 4px; }
        #conversion #mass-and-units #units #units-pulldown .select {
          -moz-border-radius: 5px;
          -webkit-border-radius: 5px;
          border-radius: 5px;
          -webkit-box-shadow: 0px 6px 30px #999999;
          -moz-box-shadow: 0px 6px 30px #999999;
          z-index: 10000;
          color: #464646;
          padding-top: 10px;
          position: absolute;
          width: 210px;
          top: 0;
          left: 0;
          border: solid 1px #5f5f5f;
          background-color: #fff; }
          #conversion #mass-and-units #units #units-pulldown .select h3 {
            padding-left: 10px;
            color: #464646;
            font-size: 14px; }
          #conversion #mass-and-units #units #units-pulldown .select ul {
            font-weight: normal;
            font-size: 80%;
            line-height: 140%;
            cursor: pointer;
            margin-bottom: 10px; }
            #conversion #mass-and-units #units #units-pulldown .select ul li {
              padding-left: 20px; }
              #conversion #mass-and-units #units #units-pulldown .select ul li:hover {
                background-color: red;
                color: white; }
  #conversion #recalculate {
    background-color: #464646;
    color: #f1f1f1;
    font-size: 110%;
    font-weight: bold;
    height: 30px;
    padding: 0 20px 0 20px;
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 100;
    cursor: pointer; }
    #conversion #recalculate.changed, #conversion #recalculate:hover {
      background-color: #ff0000;
      color: #ffffff; }
    #conversion #recalculate:active {
      background-color: #ffffff;
      color: #ff0000; }

#summary {
  background-color: #5f5f5f;
  color: #f1f1f1;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-top: 46px;
  padding: 8px 0 0 10px;
  height: 38px;
  position: relative;
  font-size: 160%;
  font-weight: bold;
  line-height: normal; }
  #summary #share-mass {
    background-color: #464646;
    color: #f1f1f1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 8px 20px 0 20px;
    height: 22px;
    width: 80px;
    position: absolute;
    right: 10px;
    top: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    color: #f1f1f1;
    z-index: 200000; }
    #summary #share-mass:hover {
      background-color: #ff0000;
      color: #ffffff; }
    #summary #share-mass.active:hover {
      background-color: #464646;
      color: #f1f1f1;
      color: #f1f1f1; }
    #summary #share-mass #sharing-options {
      background-color: #464646;
      color: #f1f1f1;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      cursor: auto;
      text-align: left;
      position: absolute;
      padding: 0 10px 10px 10px;
      right: -10px;
      top: 38px;
      width: 880px;
      z-index: 199999;
      font-weight: normal; }
      #summary #share-mass #sharing-options .social {
        clear: both;
        position: relative; }
        #summary #share-mass #sharing-options .social:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden; }
        * html #summary #share-mass #sharing-options .social {
          height: 1px; }
        #summary #share-mass #sharing-options .social label, #summary #share-mass #sharing-options .social #share-messages {
          position: relative;
          top: 4px; }
        #summary #share-mass #sharing-options .social .progress {
          background-color: #464646;
          color: #f1f1f1;
          display: block;
          float: left;
          width: 22px;
          height: 22px;
          background-image: url(/images/share/loadinfo.net.gif);
          background-position: 3px 3px;
          background-repeat: no-repeat;
          position: absolute;
          opacity: 0.8;
          filter: alpha(80); }
        #summary #share-mass #sharing-options .social a {
          text-indent: -9000px;
          width: 22px;
          height: 22px;
          display: block;
          float: left;
          margin-right: 5px;
          cursor: pointer;
          position: relative;
          background-position: 0 0;
          background-repeat: no-repeat; }
        #summary #share-mass #sharing-options .social .twitter {
          background-image: url(/images/share/twitter.png); }
      #summary #share-mass #sharing-options .group {
        padding-top: 23px; }
      #summary #share-mass #sharing-options .explanation {
        color: #d6d6d6;
        font-size: 90%; }
      #summary #share-mass #sharing-options .section {
        padding: 20px 10px; }
        #summary #share-mass #sharing-options .section.content {
          background-color: #3b3b3b;
          -moz-border-radius: 5px;
          -webkit-border-radius: 5px;
          border-radius: 5px; }
      #summary #share-mass #sharing-options .overlap {
        background-color: #464646;
        color: #f1f1f1;
        position: absolute;
        width: 120px;
        height: 16px;
        top: -12px;
        right: 10px;
        z-index: 199999; }
      #summary #share-mass #sharing-options .done {
        background-color: #5f5f5f;
        color: #f1f1f1;
        padding-top: 0;
        height: 30px;
        width: 100px;
        text-align: center;
        cursor: pointer;
        float: right;
        font-size: 100%;
        font-weight: bold; }
        #summary #share-mass #sharing-options .done:hover {
          background-color: #ff0000;
          color: #ffffff; }
      #summary #share-mass #sharing-options a {
        color: #ff0000;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        float: left;
        max-width: 800px; }
      #summary #share-mass #sharing-options p {
        clear: both;
        margin-bottom: 10px; }
        #summary #share-mass #sharing-options p:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden; }
        * html #summary #share-mass #sharing-options p {
          height: 1px; }
      #summary #share-mass #sharing-options label {
        display: block;
        float: left;
        font-weight: normal;
        width: 50px;
        margin-right: 10px;
        text-align: right; }
        #summary #share-mass #sharing-options label.checkbox {
          display: inline;
          width: auto;
          text-align: left; }
      #summary #share-mass #sharing-options input.text {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        outline: none;
        border: none;
        background-color: #fff;
        padding: 0 0 0 10px;
        height: 20px;
        font-size: 100%;
        font-weight: bold;
        color: #000000;
        width: 380px;
        float: left; }
      #summary #share-mass #sharing-options input.checkbox {
        width: auto;
        margin-right: 5px;
        vertical-align: middle;
        float: left; }
  #summary .mass-url {
    font-size: 14px;
    font-weight: normal;
    color: #f1f1f1;
    border-bottom: dotted 1px #464646;
    position: absolute;
    right: 30px;
    top: 16px; }
    #summary .mass-url.edit {
      right: 10px; }
    #summary .mass-url:hover {
      color: #ff0000;
      border-color: #ff0000; }

.linked #summary {
  margin-top: 0;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.switchbar {
  background-color: #5f5f5f;
  color: #f1f1f1;
  clear: both; }
  .switchbar:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  * html .switchbar {
    height: 1px; }
  .switchbar .tab {
    background-color: #464646;
    color: #f1f1f1;
    height: 38px;
    width: 185px;
    padding: 8px 0 0 10px;
    float: left;
    cursor: pointer;
    position: relative;
    border-left: solid 1px #4e4e4e; }
    .switchbar .tab span.ind {
      display: block;
      position: absolute;
      right: 0;
      top: 8px;
      width: 32px;
      height: 32px;
      background-image: url(/images/indicator-24.png);
      background-position: left top;
      background-repeat: no-repeat; }
    .switchbar .tab.first {
      border-left: none; }
    .switchbar .tab:hover span.ind,     .switchbar .tab.active span.ind {
      background-position: right -70px; }
    .switchbar .tab.active {
      background-color: #5f5f5f;
      color: #f1f1f1; }
    .switchbar .tab#Patch {
      width: 302px; }

.goal {
  background-color: #464646;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-weight: normal;
  color: #fff;
  font-size: 120%;
  padding: 16px 20px !important;
  line-height: 120%; }
  .goal li {
    background-image: url(/images/bullet-white.png) !important; }

#about-section .switchbar, #gallery .switchbar {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px; }
  #about-section .switchbar .tab,   #gallery .switchbar .tab {
    width: 169px;
    padding: 0 0 0 10px;
    height: 46px; }
    #about-section .switchbar .tab.first,     #gallery .switchbar .tab.first {
      -moz-border-radius-topleft: 5px;
      -webkit-border-top-left-radius: 5px;
      border-top-left-radius: 5px; }
    #about-section .switchbar .tab.last,     #gallery .switchbar .tab.last {
      -moz-border-radius-topright: 5px;
      -webkit-border-top-right-radius: 5px;
      border-top-right-radius: 5px; }
    #about-section .switchbar .tab h4,     #gallery .switchbar .tab h4 {
      font-weight: normal; }
      #about-section .switchbar .tab h4 a,       #gallery .switchbar .tab h4 a {
        padding-top: 16px;
        color: #f1f1f1;
        display: block;
        height: 30px; }
    #about-section .switchbar .tab.active h4 a,     #gallery .switchbar .tab.active h4 a {
      color: #f1f1f1; }

#gallery .switchbar .tab {
  width: 289px; }

#about-section #about-content-container {
  width: 900px;
  overflow: hidden;
  position: relative; }
  #about-section #about-content-container #about-content-slider {
    clear: both;
    width: 5400px;
    position: relative;
    left: 0;
    top: 0; }
    #about-section #about-content-container #about-content-slider:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden; }
    * html #about-section #about-content-container #about-content-slider {
      height: 1px; }
    #about-section #about-content-container #about-content-slider .page {
      width: 880px;
      padding: 23px 10px 10px 10px;
      float: left; }
      #about-section #about-content-container #about-content-slider .page h3 {
        margin-bottom: 10px; }
      #about-section #about-content-container #about-content-slider .page p {
        margin-bottom: 10px; }
      #about-section #about-content-container #about-content-slider .page ul {
        margin-bottom: 10px; }
        #about-section #about-content-container #about-content-slider .page ul li {
          background-image: url(/images/bullet.png);
          background-repeat: no-repeat;
          background-position: left 4px;
          padding-left: 10px;
          margin-bottom: 4px; }
      #about-section #about-content-container #about-content-slider .page a {
        color: #ff0000; }
      #about-section #about-content-container #about-content-slider .page strong {
        font-weight: bold; }
      #about-section #about-content-container #about-content-slider .page blockquote {
        background-color: #464646;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        font-weight: normal;
        color: #fff;
        font-size: 120%;
        padding: 16px 20px !important;
        line-height: 120%;
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-style: italic;
        margin-bottom: 5px; }
        #about-section #about-content-container #about-content-slider .page blockquote li {
          background-image: url(/images/bullet-white.png) !important; }
      #about-section #about-content-container #about-content-slider .page .attribution {
        padding: 0 10px 0 10px;
        margin-bottom: 20px;
        font-size: 90%; }
        #about-section #about-content-container #about-content-slider .page .attribution strong {
          display: block; }
      #about-section #about-content-container #about-content-slider .page dl dt {
        font-weight: bold;
        margin-bottom: 5px; }
      #about-section #about-content-container #about-content-slider .page dl dd {
        margin-bottom: 10px; }
  #about-section #about-content-container .people {
    margin-top: 36px; }
    #about-section #about-content-container .people p {
      clear: both;
      float: none; }
      #about-section #about-content-container .people p:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden; }
      * html #about-section #about-content-container .people p {
        height: 1px; }
      #about-section #about-content-container .people p img, #about-section #about-content-container .people p span {
        display: block;
        float: left; }
      #about-section #about-content-container .people p span {
        width: 310px;
        margin-left: 10px; }
  #about-section #about-content-container .visualisations {
    margin-top: 36px; }
    #about-section #about-content-container .visualisations .vis {
      clear: both;
      background-color: #464646;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      font-weight: normal;
      color: #fff;
      font-size: 120%;
      padding: 16px 20px !important;
      line-height: 120%;
      font-size: 100%;
      padding: 0 !important;
      width: 100%;
      line-height: 0;
      margin-bottom: 40px;
      -moz-border-radius-topleft: 0;
      -moz-border-radius-bottomleft: 0;
      -webkit-border-top-left-radius: 0;
      -webkit-border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0; }
      #about-section #about-content-container .visualisations .vis:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden; }
      * html #about-section #about-content-container .visualisations .vis {
        height: 1px; }
      #about-section #about-content-container .visualisations .vis li {
        background-image: url(/images/bullet-white.png) !important; }
      #about-section #about-content-container .visualisations .vis .column {
        margin-right: 0; }
      #about-section #about-content-container .visualisations .vis .column.last {
        padding: 0;
        line-height: normal; }
        #about-section #about-content-container .visualisations .vis .column.last p {
          padding: 10px; }

#patch-depth-control {
  background-color: #5f5f5f;
  color: #f1f1f1;
  width: 302px;
  padding: 0 0 10px 10px;
  position: relative;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px; }
  #patch-depth-control strong {
    font-weight: bold; }
  #patch-depth-control #patch-depth-scale {
    background-color: #ff0000;
    position: absolute;
    bottom: 10px;
    height: 1px;
    width: 204px;
    margin: 0 auto; }
  #patch-depth-control label {
    display: block; }
  #patch-depth-control .timescale {
    position: absolute;
    right: 10px;
    top: 0; }

#canvas-wrapper {
  background-color: #5f5f5f;
  color: #f1f1f1;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px; }
  #canvas-wrapper div.visual-canvas {
    width: 900px;
    height: 570px; }

#world_map_visualisation_canvas {
  position: relative; }
  #world_map_visualisation_canvas #patch-depth-control #patch-depth-scale {
    width: 190px;
    bottom: 10px; }
  #world_map_visualisation_canvas #world_map {
    background-image: url(/images/Gall-peters-900x570.jpg);
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0; }
    #world_map_visualisation_canvas #world_map #world_map_patch {
      background-color: #ff0000;
      cursor: move; }
      #world_map_visualisation_canvas #world_map #world_map_patch:hover {
        outline: solid 1px red; }


#sphere-canvas h3, #cube-canvas h3, #figures-canvas h3 {
  color: #f1f1f1; }

#cube-canvas .loading, #sphere-canvas .loading {
  display: table;
  margin: 0 auto;
  position: relative;
  top: 200px; }

#figures-canvas h3.loading, #cube-canvas h3.loading, #sphere-canvas h3.loading {
  position: relative;
  top: 20%;
  display: table;
  margin: 0 auto;
  color: #464646; }
#figures-canvas.loading, #cube-canvas.loading, #sphere-canvas.loading {
  background-image: url(/images/loadinfo.net.gif);
  background-position: 50% 30%;
  background-repeat: no-repeat; }

#figures-canvas {
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  position: relative; }
  #figures-canvas #facts-figures {
    padding: 23px 10px 10px 10px; }
    #figures-canvas #facts-figures .section {
      margin-bottom: 10px;
      width: 283px;
      padding-right: 10px;
      float: left;
      line-height: 21px; }
    #figures-canvas #facts-figures .break {
      clear: both;
      margin-bottom: 23px; }
      #figures-canvas #facts-figures .break:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden; }
      * html #figures-canvas #facts-figures .break {
        height: 1px; }
    #figures-canvas #facts-figures .divided {
      border-top: solid 1px #464646;
      padding-top: 10px; }
    #figures-canvas #facts-figures .explanation {
      color: #d6d6d6;
      font-size: 90%;
      line-height: 17px; }
      #figures-canvas #facts-figures .explanation p {
        padding-right: 20px; }
    #figures-canvas #facts-figures a {
      color: #f1f1f1;
      border-bottom: dotted 1px #f1f1f1; }
      #figures-canvas #facts-figures a:hover {
        color: #ff0000;
        border-color: #ff0000; }
    #figures-canvas #facts-figures strong {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      font-weight: bold;
      color: white;
      background-color: #ff0000;
      padding: 2px 5px; }
    #figures-canvas #facts-figures h4 {
      color: #d6d6d6;
      margin-bottom: 10px; }
      #figures-canvas #facts-figures h4 .co2 {
        top: 0; }

.column {
  float: left;
  width: 420px;
  margin-right: 20px; }
  .column.last {
    margin-right: 0; }
  .column.images {
    width: 439px; }

#welcome, #contact {
  margin-top: 46px; }
  #welcome .contentwrapper,   #contact .contentwrapper {
    padding-left: 10px; }
  #welcome .column,   #contact .column {
    width: 357px; }
    #welcome .column.last,     #contact .column.last {
      margin-right: 0; }
  #welcome ul.column,   #contact ul.column {
    position: relative;
    left: 5px;
    width: 498px; }
  #welcome ul.column li,   #contact ul.column li {
    float: left;
    margin-left: 5px; }
  #welcome p,   #contact p {
    margin-bottom: 10px; }
    #welcome p strong,     #contact p strong {
      font-weight: bold; }
  #welcome h3,   #contact h3 {
    background-color: #5f5f5f;
    color: #f1f1f1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 36px;
    padding: 10px 0 0 10px;
    margin-bottom: 23px;
    font-size: 160%;
    font-weight: bold; }

#welcome .column.goal {
  width: 50%; }
#welcome .introtext {
  padding: 0 !important;
  width: 380px;
  margin-right: 0; }
  #welcome .introtext a {
    color: #ff0000; }
    #welcome .introtext a:hover {
      text-decoration: underline; }
#welcome .widget {
  margin-bottom: 0;
  padding-bottom: 0; }
  #welcome .widget a {
    color: red; }
    #welcome .widget a:hover {
      color: #ffffff;
      text-decoration: underline; }
#welcome .gotovisualiser {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: solid 3px #00a518;
  padding: 10px;
  padding-right: 20px;
  background-color: #1fb534;
  color: #ffffff;
  width: 250px;
  float: right;
  cursor: pointer;
  padding: 0 10px;
  margin: 10px 0 10px 0 !important; }
  #welcome .gotovisualiser:hover {
    background-color: #ff0000;
    border-color: #cc0000; }
    #welcome .gotovisualiser:hover a {
      background-color: #ff0000; }
      #welcome .gotovisualiser:hover a span {
        background-position: 0 -77px; }
  #welcome .gotovisualiser a {
    color: #ffffff;
    display: block;
    font-weight: bold;
    width: 253px;
    height: 20px;
    padding: 10px 0;
    position: relative; }
    #welcome .gotovisualiser a span {
      display: block;
      position: absolute;
      right: 0;
      top: 8px;
      width: 19px;
      height: 23px;
      background-image: url(/images/goto-visualiser.png);
      background-repeat: no-repeat;
      background-position: 0 0; }

.visualalt {
  display: block;
  background-color: #000;
  color: #fff;
  position: absolute;
  z-index: 1;
  bottom: 3px;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0.7;
  font-size: 90%; }
  .visualalt span {
    display: block;
    padding: 4px; }

#footer {
  margin-top: 184px;
  padding-left: 10px;
  font-size: 90%;
  color: #8a8a8a;
  position: relative; }
  #footer a {
    color: #8a8a8a;
    border-bottom: dotted 1px #f1f1f1; }
  #footer a.top {
    position: absolute;
    right: 0; }
  #footer a:hover {
    color: #ff0000;
    border-bottom-color: #ff0000; }

#introvideo {
  display: table;
  margin: 46px auto;
  width: 600px; }

#contact {
  padding-left: 10px; }
  #contact a {
    color: #ff0000; }

.mass-title {
  background-color: #464646;
  color: #f1f1f1;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 8px 0 0 10px;
  min-height: 38px;
  color: #f1f1f1;
  font-size: 160%;
  line-height: 140%;
  font-weight: normal; }

#gallery .photo, #gallery .video {
  clear: both;
  margin-bottom: 46px; }
  #gallery .photo:after,   #gallery .video:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  * html #gallery .photo,   * html #gallery .video {
    height: 1px; }
  #gallery .photo p,   #gallery .video p {
    margin-bottom: 10px; }
  #gallery .photo h3,   #gallery .video h3 {
    margin-bottom: 10px;
    font-size: 110%; }
    #gallery .photo h3 a,     #gallery .video h3 a {
      display: inline;
      float: none;
      color: #464646; }
      #gallery .photo h3 a:hover,       #gallery .video h3 a:hover {
        color: #ff0000; }
  #gallery .photo .thumb,   #gallery .video .thumb {
    display: block;
    float: left;
    margin-right: 10px; }
    #gallery .photo .thumb:hover,     #gallery .video .thumb:hover {
      outline: solid 2px #ff0000; }
  #gallery .photo a,   #gallery .video a {
    color: #ff0000; }
#gallery .video .thumb:hover {
  outline: none; }
#gallery #gallery-loading {
  padding-left: 34px;
  background-image: url(/images/loading-gallery.gif);
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 4px;
  height: 24px;
  display: table;
  margin: 46px auto;
  color: #5f5f5f; }
#gallery #gallery-content-container {
  padding: 23px 10px 0 10px; }

.help {
  width: 15px;
  height: 15px;
  position: absolute;
  display: block;
  cursor: pointer;
  background-image: url(/images/help-icon.png);
  background-position: 0 0;
  background-repeat: no-repeat; }
  .help.active, .help:hover {
    background-image: url(/images/help-icon-active.png); }

.help-wrapper {
  position: relative;
  z-index: 100000; }

.helptext {
  -webkit-box-shadow: 0px 6px 30px #999999;
  -moz-box-shadow: 0px 6px 30px #999999;
  cursor: pointer;
  z-index: 400000;
  font-size: 95%;
  line-height: normal; }
  .helptext.vertical {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: solid 3px #00a518;
    padding: 10px;
    padding-right: 20px;
    background-color: #1fb534;
    color: #ffffff;
    position: absolute;
    z-index: 100001;
    margin-top: 18px;
    width: 390px; }
    .helptext.vertical span.pointer {
      display: block;
      position: absolute;
      z-index: 100000;
      left: 10px;
      top: -21px;
      width: 23px;
      height: 18px;
      background-image: url(/images/help-pointer-up.png);
      background-position: 0 0;
      background-repeat: no-repeat; }
  .helptext p {
    margin-bottom: 10px; }
  .helptext:hover {
    background-image: url(/images/help-close.png);
    background-repeat: no-repeat;
    background-position: right 4px; }

#help-emissions-explorer, #help-enter-mass {
  right: 10px;
  top: 4px; }

#visualisation-help #help-area-of-quilt-popup, #visualisation-help #help-depth-of-quilt-popup {
  left: 10px;
  top: 46px; }
  #visualisation-help #help-area-of-quilt-popup .pointer,   #visualisation-help #help-depth-of-quilt-popup .pointer {
    left: 83px; }
#visualisation-help #help-depth-of-quilt-popup .pointer {
  left: 92px; }
#visualisation-help #help-sphere-of-diameter-popup, #visualisation-help #help-cube-of-dimension-popup {
  left: 323px; }
  #visualisation-help #help-sphere-of-diameter-popup .pointer,   #visualisation-help #help-cube-of-dimension-popup .pointer {
    left: 125px; }
#visualisation-help #help-cube-of-dimension-popup .pointer {
  left: 321px; }
#visualisation-help #help-fraction-of-popup {
  left: 234px;
  top: 46px; }

#volume .tab h4 {
  position: relative; }
#volume .help {
  display: inline-block;
  top: auto;
  right: auto;
  position: relative;
  left: 4px;
  vertical-align: top; }
#volume #help-area-of-quilt {
  right: 196px; }

#help-welcome-popup {
  left: 10px; }
  #help-welcome-popup .pointer {
    left: 88px; }

#help-enter-mass-popup {
  left: 378px; }

#help-emissions-explorer-popup {
  left: 168px; }

#help-depth-of-quilt {
  display: inline-block;
  top: auto;
  right: auto;
  position: relative;
  left: 4px;
  vertical-align: top; }

#help-fraction-of {
  display: inline-block;
  top: auto;
  right: auto;
  position: relative;
  left: 4px;
  vertical-align: top; }

#help-link-to-mass {
  top: 8px;
  right: 5px; }

#help-link-to-mass-popup {
  left: 464px;
  top: -46px; }
  #help-link-to-mass-popup .pointer {
    left: 344px; }

#help-facts-and-figures-popup {
  left: 464px; }
  #help-facts-and-figures-popup .pointer {
    left: 355px; }

.concertina li {
  height: 37px;
  margin-bottom: 10px;
  overflow: hidden; }
  .concertina li h4 {
    cursor: pointer;
    font-weight: normal;
    border-left: solid 3px #00a518;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-top: 5px; }
    .concertina li h4 strong {
      font-weight: bold; }
    .concertina li h4 em {
      font-style: italic; }
    .concertina li h4:hover {
      background-color: #00a518;
      color: #ffffff; }
    .concertina li h4.first {
      border-top: none; }
  .concertina li div {
    height: auto;
    margin-top: 5px; }
  .concertina li.active {
    height: 230px;
    border-bottom: solid jpx #00a518; }