.limiter {
  width: 960px;
  margin: 0px auto;
  }
body {
  font: 13px/18px "Helvetica Neue",Helvetica,Arial,sans-serif;
  color: black;
  background-color: white;
  }

/* Header styles */
h1,h2,h3,h4,h5 {
  color: black;
  padding-top: 15px;
  padding-bottom: 15px;
  clear: left;
  }
h2 {
  font-size: 28px;
  border-bottom: #000 1px solid;
  margin-bottom: 15px;
  }
h3 {
  font-size: 20px;
  border-bottom: 1px solid #000;
  margin-bottom: 15px;
  }
.rankings h3 {
  width: 600px;
  }
h4 {
  font-weight: normal;
  font-size: 18px;
  }
.drawer h4 {
  font-style: italic;
  font-size: 13px;
  }
p {
  color: black;
  margin-bottom: 10px;
  }
p:last-child {
  margin-bottom: 0px;
  }
a {
  color: black;
  text-decoration: none;
  }
.label {
  text-align: left;
  font-weight: normal;
  font-style: italic;
  margin: 5px 0;
  }
pre {
  background-color: #eee;
  font-size: 13px;
  margin-bottom: 15px;
  overflow: auto;
  padding: 10px;
  color: #000;
  }
pre, pre code {
  font-family: 'Menlo Regular',Consolas,monospace;
  }

/* Header */
#header {
  border-bottom: #000 1px solid;
  width: 960px;
  height: 60px;
  margin: 0px auto 20px auto;
  }
#header .limiter {
  position: relative;
  clear: both;
  }
  #header h1 a.logo {
  font-size: 46px;
  display: block;
  float: left;
  margin-bottom: 15px;
    }
    .smalltm {
    font-size: 24px;
    vertical-align: super;
    }
  #header .tagline { 
  position: absolute;
  left: 135px;
  top: 15px;
  width: 110px;
  }
  #header .org {
  float: right;
  }

/* Tables */
table {
  width: 100%;
  margin-bottom: 20px;
  }
table tr {
  width: 100%;
  line-height: 16px;
  }
table tr.active td{
  font-weight: bold;
  font-style: italic;
  }
table thead tr {
  text-align: left;
  border-bottom: 1px solid #000;
  }
table.ranking-history thead tr {
  border-bottom: none;
  }
table thead tr th {
  padding: 5px 0 3px;
  }
table tbody tr th {
  text-align: left;
  }
table tbody tr td {
  border-bottom: 1px solid #000;
  padding: 5px 0;
  }
table.ranking-history tbody tr td {
  border-bottom: none;
  }
table tr.section td {
  font-weight: bold;
  line-height: 16px;
  }
table tr.index td.name {
  padding-bottom: 10px;
  margin-top: 10px;
  font-size: 17px;
  font-weight: bold;
  }
table tr td .placeholder {
  background: #fff;
  width: 80px;
  height: 20px;
  }

/*** Matrix Section ***/
.big-matrix {
  position:relative;
  height: 830px;
  width: 840px;
  }
.big-matrix .graph {
  position:relative;
  width: 580px;
  height: 350px;
  margin-left: 60px;
  margin-bottom: 30px;
  border-style: solid;
  border-color: #000;
  border-width: 0 0 1px 1px;
  }
.big-matrix .graph div.point {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #a8a8a8;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 1px #000;
  -webkit-box-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000;
  border: 1px solid black;
  }

.big-matrix .graph div.active-tl,
.big-matrix .graph div.active-tr,
.big-matrix .graph div.active-br,
.big-matrix .graph div.active-bl,
.big-matrix .graph div.point:hover {background-color: #111; }
.big-matrix .graph div.point .country { display: none; }

.big-matrix .tooltip .country {
  position:absolute;`
  top: 10px;
  right: 10px;
  padding: 5px 5px;
  background-color: #666;
  color: #fff;
  z-index: 200;
  }
.big-matrix div.year-controls {
  margin: 20px 0;
  float: left;
  border: 1px solid black;
  color: black;
  padding: 0 5px;
  }
.big-matrix div.year-controls,
.big-matrix ul.year-selector {
  float: left;
  padding: 0 3px;
  }
.big-matrix ul.year-selector li  { float: left; }
.big-matrix ul.year-selector li a {
  float: left;
  padding: 2px 5px;
  line-height: 25px;
  font-size: 12px;
  font-weight: bold;
  }
.big-matrix ul.year-selector li a:hover,
.big-matrix ul.year-selector li a.selected {
  border-right: 1px solid black;
  border-left: 1px solid black;
  }
.big-matrix img {
  position: absolute;
  left: 20px;
  top: 0;
  }

/*** Outlook ***/
 .country-summary div.gain .icon-outlook {
      display: inline-block;
      width: 15px;
      height: 15px;
      }

/** Front Page **/
.front .ranking {margin-bottom: 15px;}

.front .ranking {
  background-color: #fff;
  }
.front .ranking table.data {
  width: 300px;
  float: left;
  clear: none;
  table-layout: auto;
  margin-bottom: 10px;
  }
  .front .ranking table.data th {
    font-weight: normal;
    font-style: italic;
    }
  .front .ranking table.data tr:hover {
    background-color: transparent
    }
  .rank-number {
    text-align: center;
    font-weight: bold;
    margin: 0 10px;
    }
  .front .ranking .rank-number {
    float: left;
    }

/*** Country Page ***/
.prose.container {margin-top: 20px;}
table.data.ranking-history {
  margin-bottom: 30px;
  }
.rankings h3 {
  margin-bottom: 0px;
  }

/** Ranking Page ***/
ul.tabs.level-1 a { display: none;}
ul.tabs.level-1 a.exact.active { 
  padding-bottom: 15px;
  margin-top: 15px;
  display: block;
  font-size: 20px;
  border-bottom: #C6C6C6 1px solid;
  font-weight: bold;
  }
ul.tabs.level-2 a.active {
  padding-bottom: 15px;
  margin-top: 15px;
  display: block;
  font-size: 20px;
  border-bottom: #000 1px solid;
  }

/*** Footer ***/
#footer2 .limiter {
  margin-top: 15px;
  border-top: #000 1px solid;
  }

#address {
  margin-top: 15px;
  }
  #address a {
    font-weight: bold;
    }

/****** Map style ******/
.wax-tooltip {
  background-color: white;
  padding: 5px 10px;
  display: block;
  font-weight: bold;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  border: 1px solid grey;
  }
.front #map {
  position: relative;
  overflow: hidden;
  }
.front #map .map {
  position: absolute;
  top: 0;
  left: 0;
  }
/****** Front page ******/
.front #map,
.front .map {
  width: 598px!important;
  height: 380px!important;
  }
.front #map {
  border: 2px solid black;
  }
/****** Country Section ******/
.country-profile {
  position: relative;
  }
.country-profile .info,
.country-profile #indicator-gain,
.country-profile .chart {
  position: absolute;
  left: 355px;
  }
.slider h4,
.slider h5 {
  padding: 0;
  }
.description {
  margin-top: 10px;
  }
.source {
  margin: 5px 0;
  }
.country-profile #indicator-gain {
  top: 95px;
  padding: 0;
  }
.country-profile .chart {
  left: 457px;
  top: 95px;
  }
.country-profile .info {
  top: 60px;
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
  }
.country-profile .map-wrapper {
  float: left;
  width: 340px;
  margin-top: -5px;
  border: 2px solid black;
  }
.featured div.country {
  border-bottom: 1px solid #000;
  padding: 0 0 10px;
  margin-bottom: 10px;
  }
.featured .info,
.featured .country-summary {
  float: left;
  width: 230px;
  }
.featured .info {
  width: 280px;
  margin-right: 90px;
  }
.featured .country-summary {
  margin-top: -10px;
  }
.country-profile div.prose {
  clear: both;
  }
#indicator-gain .name {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
  }
#indicator-gain .value {
  display: block;
  font-weight: bold;
  font-size: 46px;
  line-height: 42px;
  } 
.featured .country{
  position: relative;
  }
.featured h3 {
  padding: 0 0 10px;
  margin: 0;
  border-bottom: none;
  }
.chart {
  margin-left: -1px;
  padding: 20px 10px 10px;
  margin-top: 10px;
  float: left;
  border: 1px solid black;
  height: 55px;
  }
.indicator-time .chart {
  height: auto;
  border: none;
  padding: 10px 0;
  margin: 0;
  }
#indicator-gain .trend {
  color: #666;
  }
#indicator-reporting {
  margin-left: 475px;
  margin-top: -15px;
  margin-bottom: 5px;
  }
/*** Gain info box ***/
#indicator-gain {
  font-weight: bold;
  float: left;
  margin-top: 10px;
  text-align: center;
  width: 100px;
  border: 1px solid black;
  height: 85px;
  }
/*** Country page sector graphs ***/
.country-sector-graph {
  display: none;
  }
.country-sector-graph .bar label {
  line-height: 18px;
  display: none;
  width: 285px;
  position: absolute;
  top: -19px;
  left: 0;
  background-color: #fff;
  }
.country-sector-graph .bar:hover label {
  display: block;
  z-index: 999999;
  }
.drawer .content .graph {
  width: 285px;
  height: 150px;
  margin: 10px 0 5px;
  }
.drawer .content .gain {
  border-left: 0;
  }
.drawer .country-info {
  padding-bottom: 15px;
  }

.drawer .container {
  width: 320px;
  }
div.container {
  width: 600px;
  }

/****** Ranking Section ******/
.tab-wrapper,
.front h3,
.country table,
.ranking table {
  width: 600px;
  }
.drawer table {
  width: 100%;
  margin-bottom: 10px;
  }
/****** About Section ******/
.document table {
  width: 100%;
  margin-bottom: 15px;
  }
.document table td {
  background-color: #f5f5f5;
  border: 1px solid #fff;
  padding: 5px 15px;
  vertical-align: middle;
  }
  .document table td.water          { background-color: #f0f0f0;}
  .document table td.health         { background-color: #ebebeb;}
  .document table td.infrastructure { background-color: #e5e5e5;}
  .document table td.sensitivity    { background-color: #ededed;}
  .document table td.capacity       { background-color: #e5e5e5;}
  .document table td.governance     { background-color: #ededed;}
  .document table td.social         { background-color: #e5e5e5;}

/****** Drawer ******/
#cabinet {
  position: relative;
  }
#cabinet .drawer {
  padding: 0 10px;
  position: absolute;
  top: -20px;
  right: 0;
  width: 320px;
  margin-left: 160px;
  }
#cabinet .drawer.open {
  background: white;
  border: 1px solid #000;
  }
#cabinet.ranking .drawer {
  top: 146px;
  }
#cabinet.country .drawer.open {
  top: 436px;
  }
.slider {
  margin-top: 20px;
  }
.slider .indicator-time {
  padding-bottom: 10px;
  }
.drawer h3 {
  font-size: 17px;
  margin: 0;
  width: auto!important;
  border-bottom: none;
  padding-bottom: 5px;
  }
.drawer .country-summary {
  padding: 0;
  }
/****** Page break avoiding ******/
.description {
  page-break-before: avoid;
  page-break-inside: avoid;
  }
.document h2 {
  page-break-after: avoid;
  page-break-inside: avoid;
  }

/****** Hidden ******/
.composition-bars .label,
.slider .content.container h3,
#overviewdiagram,
.bottomscorelabel,
.trend,
#carousel,
.button,
.navigation,
#feedbacktab,
#bonesAdmin,
#carousel-nav,
#footer1,
#map-years,
.zoom-control,
.country-selector,
.gapminder,
.mini-matrix-links,
.browser,
.overview a,
a.play-button,
ul.level-2,
ul.level-1 {
  display: none;
  }
table thead tr th.composition,
table thead tr td.composition {
  visibility: hidden;
  }

/*-----------------------
  Markup free clearing
  Details: http://perishablepress.com/press/2009/12/06/new-clearfix-hack
-------------------------*/
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

* html .clearfix { height: 1%; } /* IE6 */
*:first-child + html .clearfix { min-height: 1%; } /* IE7 */
