body {
  /* background-color: #1d354c; */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  color: #363636;
  -webkit-font-smoothing: antialiased;
  }
.limiter {
  width: 681px;
  margin: 0 auto;
  }

/*** Typography ***/
@font-face {
  font-family: 'AlternateGothicLTNo3Regular';
  src: url('../fonts/alternate_gothic-webfont.eot');
  src: url('../fonts/alternate_gothic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/alternate_gothic-webfont.woff') format('woff'),
    url('../fonts/alternate_gothic-webfont.ttf') format('truetype'),
    url('../fonts/alternate_gothic-webfont.svg#AlternateGothicLTNo3Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  }

/*** Layout rules ***/
.inner {
  padding:15px;
  }

/* Header styles */
h1,h2,h3,h4,h5 {
  font-family: 'AlternateGothicLTNo3Regular','HelveticaNeueBoldCondensed', 'HelveticaNeue-Bold-Condensed', 'Arial Narrow', 'Arial', sans-serif;
  font-weight: 100;
  color: #363636;
  padding-top: 15px;
  padding-bottom: 15px;
  clear: left;
  }
h2 {
  font-size: 32px;
  border-bottom: #c6c6c6 1px solid;
  margin-bottom: 15px;
  padding-top:40px;
  }
h3 {
  font-size: 20px;
  }
h4 {
  font-weight: normal;
  font-size: 18px;
  }
pre {
  background: #ebebeb;
  font-size: 12px;
  margin-bottom: 15px;
  overflow: auto;
  padding: 10px;
  }
pre, pre code {
  font-family: 'Menlo Regular',Consolas,monospace;
  }
#cabinet h3 {
  padding-right: 120px;
  }
.drawer h4 {
  font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 13px;
  }
.drawer h5 {
  font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 11px;
  }
/* Use this class for getting left/right padding */
.container {
  padding-left: 15px;
  padding-right: 15px; 
  }

.ranking>h2.container {
  padding-top: 0px;
  }

  /* Get out of the shadows. */
  .slider .container {
    padding-left: 20px;
    }

.label {
  font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 12px;
  font-weight: normal;
  color: #363636;
  }
.button {
  font-size: 10px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: #363636;
  cursor: pointer;
  }
.country-info .button.green,
.button.front {
  margin: 10px 10px 0 0;
  }
.button.green {
  display: block;
  color: #fff;
  background-color: #68BB37;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  line-height: 10px;
  width: auto;
  float: right;
  text-align: center;
  }
.button.methodology {
  /* display: none; */
  position: absolute;
  right: 13px;
  top: 0px;
  }
  .button.methodology.default {
    z-index:10;
    }

.front #map-indicators li a,
ul.tabs.level-2 li a,
.country-selector input.button,
.button.methodology {
  /*display: none; */
  background-color:#ebebeb;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#d8d8d8));
  background-image:-webkit-linear-gradient(top, #f5f5f5, #d8d8d8);
  background-image:   -moz-linear-gradient(top, #f5f5f5, #d8d8d8);
  background-image:    -ms-linear-gradient(top, #f5f5f5, #d8d8d8);
  background-image:     -o-linear-gradient(top, #f5f5f5, #d8d8d8);
  background-image:        linear-gradient(to bottom, #f5f5f5, #d8d8d8);
  border:1px solid #b0b0b0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* display:inline-block; */
  text-decoration:none;
  text-align: center;
  color:#444;
  margin:10px auto;
  text-shadow:0 1px 0 rgba(255,255,255,0.8);
  padding:4px 10px;
  -moz-border-radius:2px;
  border-radius:2px;
  font-weight:600;
  -webkit-transition:border-color 250ms linear;
     -moz-transition:border-color 250ms linear;
       -o-transition:border-color 250ms linear;
          transition:border-color 250ms linear;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 10px 10px rgba(255,255,255,0.10)
  }
  .front #map-indicators li a,
  ul.tabs.level-2 li a {
    margin:0 -5px 2px 0;
    -webkit-border-radius:0;
            border-radius:0;
    }
    ul.tabs.level-2 li a {
      font-size:9px;
      padding:2px 6px;
      text-transform:uppercase;
      }
  .front #map-indicators li a:hover,
  ul.tabs.level-2 li a:hover,
  .country-selector input.button:hover,
  .button.methodology:hover {
    border:1px solid #606060;
    }
  .front #map-indicators li a:hover,
  ul.tabs.level-2 li a:hover {
    position:relative;
    }
  .front #map-indicators li a:active,
  .front #map-indicators li a.selected,
  ul.tabs.level-2 li a:active,
  ul.tabs.level-2 li a.active,
  .country-selector input.button:active,
  .button.methodology:active,
  .button.methodology.active {
    background:#fff;
    border-color:#b0b0b0;
    -moz-box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.10);
         box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.10);
    }


#cabinet.country .indicator-info {
    padding: 0;
}
    #cabinet.country .indicator-info h3 {
        padding-left: 15px;
    }
    #cabinet.country .indicator-info .description {
        max-height: 250px;
        overflow-y: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

.indicator-info .button.methodology {
  top: 40px;
  }
.correction-control a { width: auto!important; }
.button:hover{text-decoration: none;}
.button.green:hover { background-color: #5A2; }

p {
  font-family: 'HelveticaNeue-Normal', 'HelveticaNeueNormal', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: #363636;
  padding: 0 0 15px 0;
  }
a {
  color: #5A2;
  text-decoration: none;
  }
a:hover {
 color: #4B971E;
 text-decoration: underline;
  }
ul {
  padding-bottom: 15px;
  }
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  width: 200px;
  }
img.left {
  float: left;
  margin: 5px 15px 15px 0;
  }
.hidden {
  display: none;
  }
/**
 * Documents.
 */
.document ul {
  padding-bottom: 15px;
  }
.document ul li {
  margin: 0 5px;
  list-style: disc inside;
  }
.document h2 {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  }
.document table {
  width: 100%;
  margin-bottom: 15px;
  }
.document table td {
  background-color: #d8ecf7;
  border: 1px solid #fff;
  padding: 5px 15px;
  vertical-align: middle;
  }
  .document table td.water          { background-color: #d8ecf7;}
  .document table td.health         { background-color: #aed7ee;}
  .document table td.infrastructure { background-color: #92cae8;}
  .document table td.sensitivity    { background-color: #aed7ee;}
  .document table td.capacity       { background-color: #92CAE8;}
  .document table td.governance     { background-color: #aed7ee;}
  .document table td.social         { background-color: #92cae8;}

/**
 * Icons.
 */
.icon-trend {
  height: 15px;
  width: 15px;
  text-indent: -9999px;
  background: transparent url(../images/sprite.png) no-repeat 0 0;
  }
  .icon-trend-up    { background-position: -35px -1365px; }
  .icon-trend-down  { background-position: -35px -1345px; }
  .icon-trend-same  { background-position: 0 -389px; }

/**
 * Tabs
 */
ul.tabs {
  padding:0;
  }
  ul.tabs.level-1 li {
    float: left;
    margin-left: 5px;
    }
    ul.tabs.level-1 li:first-child {
      margin-left:10px;
      }
ul.tabs.level-1 li a {
  line-height: 30px;
  float: left;
  width: auto;
  padding: 5px 20px;
  background-color: #d8d8d8;
  text-align: center;
  font-family: 'AlternateGothicLTNo3Regular','HelveticaNeueBoldCondensed', 'HelveticaNeue-Bold-Condensed', 'Arial Narrow', 'Arial', sans-serif;
  color: #363636;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow:inset 0 -4px 10px rgba(0, 0, 0, 0.10);
      box-shadow:inset 0 -4px 10px rgba(0, 0, 0, 0.10);
  -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
  -webkit-transition: box-shadow 500ms linear;
     -moz-transition: box-shadow 500ms linear;
       -o-transition: box-shadow 500ms linear;
          transition: box-shadow 500ms linear;
  text-shadow: 0 1px rgba(255,255,255,.5);
  }
ul.tabs.level-1 li a:hover {
  -webkit-box-shadow:inset 0 -8px 12px rgba(0, 0, 0, 0.10);
          box-shadow:inset 0 -8px 12px rgba(0, 0, 0, 0.10);
  }
ul.tabs.level-1 li a.active {
  background-color: #fff;
  -webkit-box-shadow: none;
      box-shadow: none;
  }
.tab-wrapper .tab-wrapper {
  background-color: #fff;
  padding: 15px;
  clear: left;
  }
  ul.tabs.level-2 {
    float: left;
    padding: 0;
    margin-right: 13px;
    }
    ul.tabs.level-2.last {
      margin:0;
      }
    ul.tabs.level-2 li {
      display: inline-block;
      margin:0;
      padding:0;
      }

/**
 * Header styles
 */
.fullscreen-map #header {
  display: none;
 }

#header {
  height: 85px;
  background-color: #11202c;
  position: relative;
  z-index: 20;
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.25);
          box-shadow: 0 0 20px rgba(0,0,0,0.25);
  }
#header .limiter {
  position: relative;
  clear: both;
  }
#header h1,
#header .navigation {
  float: left;
  }
#header h1 a.logo {
  background: transparent url(../images/nd_gain_logo.png) no-repeat;
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  text-indent: -9999px;
  width: 180px;
  height: 72px;
  z-index: 9999;
  }
#header .tagline {
  position: absolute;
  left: 108px;
  top: 15px;
  font-family: 'HelveticaNeue-Bold', 'HelveticaNeueBold', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  width: 149px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.9);
  }
#header .navigation {
  position: absolute;
  left: 241px;
  margin:22px 0 0;padding:0;
  }
#header .navigation li {
  float: left;
  }
#header .navigation li a {
  font: 15px/40px 'AlternateGothicLTNo3Regular','HelveticaNeueBoldCondensed', 'HelveticaNeue-Bold-Condensed', 'Arial Narrow', 'Arial', sans-serif;
  text-transform:uppercase;
  text-decoration:none;
  float: left;
  height: 100%;
  width: 9999px;
  color: white;
  padding-left:10px;
  margin-left:1px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  -webkit-transition: background-color 0.1s linear;
     -moz-transition: background-color 0.1s linear;
       -o-transition: background-color 0.1s linear;
          transition: background-color 0.1s linear;
  }
  #header .navigation li a:hover {
    background-color:#35434c;
    }
  #header .navigation li a.active {
    background-color:#fff;
    color:#11202C;
    }
  #header .navigation li a .icon {
    background: transparent url(../images/sprite.png) no-repeat 0 0;
    display:inline-block;
    float:left;
    width:20px;
    height:20px;
    margin:10px 5px 0 10px;
    }

#header .navigation li a .map                  { background-position: 0 -60px; margin-left:15px; }
#header .navigation li a:hover .map            { background-position: 0px -60px; }
#header .navigation li a.active .map           { background-position: -100px -60px; }
#header .navigation li a.active:hover .map     { background-position: -100px -60px; }

#header .navigation li a .rank                 { background-position: -25px -60px; margin-left:5px;}
#header .navigation li a:hover .rank           { background-position: -25px -60px; }
#header .navigation li a.active .rank          { background-position: -125px -60px; }
#header .navigation li a.active:hover .rank    { background-position: -125px -60px; }

#header .navigation li a .matrix               { background-position: -50px -60px; }
#header .navigation li a:hover .matrix         { background-position: -50px -60px; }
#header .navigation li a.active .matrix        { background-position: -150px -60px; }
#header .navigation li a.active:hover .matrix  { background-position: -150px -60px; }

#header .navigation li a .about                { background-position: -75px -60px; }
#header .navigation li a:hover .about          { background-position: -75px -60px; }
#header .navigation li a.active .about         { background-position: -175px -60px; }
#header .navigation li a.active:hover .about   { background-position: -175px -60px; }

#header .org {
  float:right;
  }
  #header .org .nd-logo {
    background: transparent url(../images/nd_gain_logo_bw.png) no-repeat 0px -31px;
    display: block;
    height: 16px;
    width: 94px;
    margin-top: 15px;
  }
  #header .links {
    padding-top: 14px;
  }
  #header .org a {
     background: #1D354C;
     color: white;
     text-decoration: none;
     padding: 8px 15px;
     -webkit-border-radius:4px;
     -moz-border-radius:4px;
     border-radius:4px;
     -webkit-box-shadow: 0 1px 0 0 black;
     -moz-box-shadow: 0 1px 0 0 black;
     box-shadow: 0 1px 0 0 black;
     }
     #header .org a:hover {
       background: #39485F;
     }


/*** Top Footer styles ***/
#footer1 {
  height: 60px;
  font-size: 20px;
  background-color: #11202C;
  border-bottom: #1d354c 1px solid;
  }
#footer1 .download {
  background: #1D354C;
  float: left;
  width: 660px;
  height: 25px;
  margin: 15px 0 15px 0;
  padding: 5px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }
#footer1 a {
  color: white;
  }
#footer1 a.cc {
  background: transparent url(../images/sprite.png) no-repeat 10px -865px;
  height: 20px;
  width: 95px;
  text-indent: -999em;
  display: block;
  float: left;
  margin-top: 2px;
  }
#footer1 a.downloadbutton:hover {background: #5A2;}
#footer1 a.downloadbutton {
  float: right;
  text-transform: none;
  font-weight: normal;
  display: block;
  font-size: 12px;
  line-height: 35px;
  padding: 0 10px;
  background: #58BD32;
  margin: -5px -5px 0 0;
  -webkit-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
  }
#footer1 a.downloadbutton span {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  margin-right: 10px;
  }
#footer1 .search {
  margin: 15px 0 0 30px;
  float: left;
  width: 300px;
  }
#footer1 .search input {
  background-color: white;
  padding: 5px 10px;
  float: left;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }
#footer1 .search input.textfield {
  background: transparent url(../images/sprite.png) no-repeat 7px -627px;
  padding-left: 25px;
  width: 195px;
  background-color: #fff;
  }
#footer1 .search input.button {
  color: #fff;
  -webkit-box-shadow: 0 1px 0 0 black;
  -moz-box-shadow: 0 1px 0 0 black;
  box-shadow: 0 1px 0 0 black;
  background-color: #1d354c;
  margin-left: 5px;
  }
#footer1 .search input.button:hover {background-color: #21405d;}
/*Autocomplete*/
/*Autocomplete Dropdown*/
.ui-autocomplete {
  background: #fff;
  margin: 3px 5px 5px;
  width: 185px;
  padding: 4px 0px;
  z-index: 99;
  }
li.ui-menu-item a {
  display: block;
  border: 0px;
  color: #333;
  }
li.ui-menu-item a.ui-corner-all {
  padding: 4px 10px;
  border: 0px;
  cursor: pointer;
  background-color: transparent;
  font-weight: normal;
  z-index: 100;
  }
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
  background: #ebebeb;
  }

/*** Bottom Footer Styles ***/
#footer2 {
  height: 150px;
  background-color: #11202C;
  }
  #footer2 #address{
   float: left;
   color: white;
   padding-top: 45px;
   width: 500px;
   }
   #footer2 #address a {
     font-weight: bold;
     color: white;
     }
  #footer2 .org a {
   margin-top: 10px;
   display: block;
   float: right;
   left: 810px;
   width: 160px;
   height: 72px;
   background: transparent url(../images/nd_gain_logo.png) no-repeat 0 0;
   text-indent: -9999px;
   }
/** Feedback tab **/
#feedbacktab {
  position: fixed;
  color: white;
  width: 320px;
  right: 20px;
  bottom: 0;
  z-index: 21;
  }
.fullscreen-map #feedbacktab {
  display: none;
}
#feedbacktab .tab.button.green {
  padding: 0 20px;
  margin-right: 0;
  width: 50px;
  margin-top: 0;
  line-height: 30px;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  }
#feedbacktab .content {
  width: 320px;
  height: 200px;
  padding-bottom: 20px;
  background: #fff;
  -moz-border-radius: 0 4px 0 0;
  -webkit-border-radius: 4px 0 0 0;
  border-radius: 4px 0 0 0;
  position: relative;
  display: none;
  }
#feedbacktab.open {
  z-index: 20;
  }
#feedbacktab.open .content{
  display: block;
  }
#feedbacktab.open .tab.button.green{
  bottom: 220px;
  background-color: #5A2;
  }
#feedbacktab .content p {
  padding: 10px 10px 5px 10px;
  clear: both;
  }
#feedbacktab a.button.green {
  margin-left: 10px;
  float: left;
  width: auto;
  clear: both;
  display: block;
  }
/**
 * Cabinet and drawer styles
 */
#cabinet {
  position: relative;
  z-index: 15;
  }
.fullscreen-map #cabinet {
  position:absolute;
  right:0;
  top: 0;
}
.bonesAdminEditing #cabinet {
  z-index: auto;
  }
#bonesAdminGrowl,
#bonesAdminPopup {
  z-index: 25!important;
  }
#bonesAdminPopup .header h2 {
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  color: white;
  line-height: 1px;
  }
#cabinet .top {
  float: left;
  width: 680px;
  /*border-right: 1px solid #666;*/
  min-height: 500px;
  background-color: #fff;
  /*-webkit-box-shadow: 0 -20px 20px rgba(0,0,0,0.25);
          box-shadow: 0 -20px 20px rgba(0,0,0,0.25);*/
  }

#cabinet .drawer {
  border-width: 1px;
  border-style: solid;
  padding-bottom: 30px;
  position: absolute;
  z-index: -1;
  /*left: 50%;
  margin-left: -80px;
  top: 20px; */
  right: 5px;
  width: 259px;
  background: #fff;
  -webkit-border-radius:0 3px 3px 0;
          border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
          border-radius:0 3px 3px 0;
  -webkit-transition: margin-left .5s ease;
     -moz-transition: margin-left .5s ease;
          transition: margin-left .5s ease;
  }

.fullscreen-map #cabinet .drawer {
  left: inherit;boxshadow
  margin-left: inherit;
  top: 50px;
  right: 10px;
  opacity: 0;
  z-index: 20;
  border: 1px solid black;
  background: #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -webkit-transition: opacity .5s ease;
}

#cabinet .drawer.updating .content {
  opacity: 0.25;
  }
#cabinet .drawer.open {
  /*left: 50%;
  margin-left: 168px;*/
  z-index: 9999
  }
.fullscreen-map #cabinet .drawer.open {
  opacity: 1;
  left: inherit;
  z-index: 26;
  margin-left: 0;
  }

  #cabinet .drawer.open h3 {
  margin-left: 0;
  padding-right: 105px;
  }
#cabinet .drawer .handle {
  height: 40px;
  line-height: 40px;
  text-align: right;
  background-color: #ebebeb;
  border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  -webkit-border-radius: 0 3px 0 0;
  }
#cabinet .drawer a.close.handle {
  text-indent: -9999px;
  margin: 10px 0 0 0;
  float: right;
  display: block;
  height: 20px; width: 20px;
  background: transparent url(../images/sprite.png) no-repeat 0 -575px;
  }
#cabinet .drawer a.close.handle:hover {
  background-position: 0 -605px;
  }

#cabinet .indicator-time .lastReported {
  padding: 0;
  float: right;
}

#cabinet .indicator-info a.button.green {
  width: 80px;
  }
#cabinet .floor a.button.green,
#cabinet .drawer a.button.green {
  width: 75px;
  margin-right: 7px;
  }
#cabinet .drawer .indicator-info a.button.green {
  width: 80px;
  }
#cabinet .drawer .country-summary {
  border: 1px solid #c6c6c6;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  }
#cabinet .floor {
  padding-bottom: 10px;
  /* position: absolute; 
  z-index: -1;
  top: 20px;
  left: 50%;
  margin-left: 168px; */
  width: 681px;
  background: #ebebeb;
  -webkit-border-radius:0  3px 3px 0;
          border-radius:0  3px 3px 0;
  }
#cabinet .drawer.slider.fixed {
  position: fixed;
  top: 20px;
  right: 5px;
  }
#cabinet.front .slider.fixed {
  position: absolute;
  }
#cabinet .slider.fixed.bottom {
  position: absolute;
  top: auto;
  bottom: 0;
  }
#cabinet.front .slider.fixed.bottom {
  top: 20px;
  bottom: auto;
  }

.floor .search {
  padding: 20px 0;
  background-color: #c6c6c6
  }
.floor .search input {
  padding: 5px 10px;
  background-color: #fff;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  }
.floor .search input.textfield {
  -moz-box-shadow: inset 0 0 3px #000;
  -webkit-box-shadow: inset 0 0 3px #000;
  box-shadow: inset 0 0 3px #000;
  }
.floor .search input.button {
  background-color: #fff;
  }

/**
 * Data tables
 */
table.data {
  background: #fff;
  width: 100%;
  table-layout: fixed;
  clear: left;
  }
table.data thead {
  border-bottom: 1px solid #c6c6c6;
  }
table.data thead tr td {
  text-align: left;
  }
table.data tbody tr td {
  border-bottom: 1px solid #ebebeb;
  }
table.data tr td{
  line-height: 25px;
  }
table.data.full {
  margin-bottom: 25px;
  }
  table.data tr td a{
    color: #444;
    font-weight: bold;
    font-size: 14px;
    }
table tr {
  text-align: left;
  }
table.full tbody tr.active td{
  cursor: pointer;
  background-color: #ebebeb;
  }
table.full tbody tr td:hover,
table.full tbody tr:hover {
  cursor: pointer;
  background-color: #f5f5f5;
  }
table.full tbody tr.active td:hover,
table.full tbody tr.active:hover {
  cursor: pointer;
  background-color: #ebebeb;
  }

/**
 * Country summary generic styles
 * PLEASE put page specific styles in the respective pages.
 */
.country-summary {
  height: 160px;
  float: left;
  }
.country-summary h3{
  margin-left: 10px;
  float: left;
  }
.country-summary .gain {
  float:left;
  text-align: center;
  width: 100px;
  height: 130px;
  padding-top: 20px;
  border-style: solid;
  border-color: #c6c6c6;
  border-width: 0 1px 0 1px;
  -webkit-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
  }
.country-summary div.gain .name {
  font-weight: bold;
  font-size: 12px;
  }
.country-summary div.gain .value {
  display: block;
  font-weight: bold;
  font-size: 30px;
  line-height: 40px;
  }
.country-summary div.gain .trend {
  color: #666;
  }
.country-summary div.gain .icon-trend {
  display: inline-block;
  width: 15px;
  height: 15px;
  }
.country-summary div.chart {
  float: right;
  height: 110px;
  width: 120px;
  }
.country-summary div.chart .mini-matrix {
  margin: 15px 0 0 10px;
  }
.country-summary .indicator {
  text-align: center;
  line-height: 27px;
  }
.country-summary #indicator-vulnerability {
  border-color: #c6c6c6;
  border-style: solid;
  border-width: 1px 0 1px 0;
  line-height: 26px;
  }
/**
 * Small Matrix
 */
.mini-matrix {
  position: relative;
  width: 100px;
  height: 90px;
  background: transparent url(../images/sprite.png) no-repeat 5px -465px;
  }
.mini-matrix .quad {
  position: absolute;
  background: #c6c6c6;
  height: 32px;
  width: 32px;
  }
.mini-matrix .tl {
  top: 0;
  left: 23px;
  -moz-border-radius: 3px 0 0 0;
  -webkit-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
  }
.mini-matrix .tr {
  top: 0px;
  left: 56px;
  -moz-border-radius: 0 3px 0 0;
  -webkit-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
  }
.mini-matrix .br {
  top: 33px;
  left: 56px;
  -moz-border-radius: 0 0 3px 0;
  -webkit-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  }
.mini-matrix .bl {
  top: 33px;
  left: 23px;
  -moz-border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
  }
.mini-matrix div {
  -moz-transition: background-color 0.3s linear;
  -o-transition: background-color 0.3s linear;
  -webkit-transition: background-color 0.3s linear;
  transition: background-color 0.3s linear;
  }
.matrix-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 290px;
  height: 175px;
  opacity: 0;
  -moz-opacity: 0;
  filter:alpha(opacity=0);
  padding: 10px;
  z-index: 100;
  color: #222;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  font-weight: 500;
  }
.interactive .matrix-overlay {
  display: none;
  }

.quad-tl{
  background-color: #F77C80;
  padding-top: 25px;
  top: 0;
  left: 61px;
  width: 212px;
  height: 116px;
  }
.quad-tr {
  background-color: #68B5DF;
  padding-top: 25px;
  top: 0;
  left: 293px;
  width: 328px;
  height: 116px;
  }
.quad-br {
  background-color: #68BB37;
  top: 152px;
  left: 293px;
  width: 328px;
  height: 178px;
  }
.quad-bl {
  background-color: #F6CD47;
  top: 152px;
  left: 61px;
  width: 212px;
  height: 178px;
  padding: 8px 10px 12px;
  }

.interactive .mini-matrix .tl:hover,
.mini-matrix .tl.active {
  background-color: #F77C80;
  } /* red */
.interactive .mini-matrix .tr:hover,
.mini-matrix .tr.active {
  background-color: #68B5DF;
  } /* blue */
.interactive .mini-matrix .br:hover,
.mini-matrix .br.active {
  background-color: #68BB37;
  } /* green */
.interactive .mini-matrix .bl:hover,
.mini-matrix .bl.active {
  background-color: #F6CD47;
  } /* yellow */

.mini-matrix .pin {
  position: absolute;
  background: transparent url(../images/sprite.png) no-repeat 0 -1135px;
  top: 43px;
  left: 43px;
  width: 15px;
  height: 15px;
  }
.interactive .mini-matrix {
  float: left;
  width: 100px;
  }
ul.mini-matrix-links {
  float: left;
  font-size: 11px;
  line-height: 18px;
  margin-top: -3px;
  }
.browser {
  background: white;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
  }
/**
 * Front page
 */
body.fullscreen-map {
  overflow: hidden;
}

body.fullscreen-map .front #map {
  z-index: 24;
  background: white;
  position: fixed !important;
  width: auto !important;
  height: auto !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.front #map {
  position: relative;
  height: 490px;
  width: 680px;
  overflow: hidden;
  }
.front #map .map {
  position: absolute;
  top: 0;
  left: 0;
  }
.front #map .zoom-control {
  position: absolute;
  z-index: 26;
  top: 15px;
  left: 15px;
  }
.front #map .zoom-control a {
  background:#434343 url(../images/sprite.png) repeat-x -35px -1390px;
  background-color:rgba(67,67,67,0.95);
  float: left;
  width:30px;
  height:30px;
  line-height: 30px;
  display:block;
  text-indent:-999em;
  color: #fff;
  }
.front #map .zoom-control a.zoomin {
  border-right: 1px solid #666;
  -webkit-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
  }
.front #map .zoom-control a.zoomout {
  background-position:-70px -1390px;
  -webkit-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
  }
.front #map .zoom-control a:hover {
  text-decoration: none;
  background-color:#333;
  }

.front #map-years {
  background:#666;
  z-index: 100;
  position: absolute;
  display: block;
  height:30px;
  line-height:30px;
  margin:0;
  padding:0;
  }
.front #map-years li a {
  font-weight:300;
  color: #fff;
  padding: 0 3px;
  display: block;
  }
.front #map-years li a.selected,
.front #map-years li a:hover {
  background:#333;
  }
.front #map-indicators {
  position: absolute;
  bottom: 45px;
  left: 15px;
  padding:0;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }
  .front #map-indicators li:first-child a {
    -webkit-border-radius:  4px 0 0 4px;
            border-radius:  4px 0 0 4px;
    }
  .front #map-indicators li:last-child a {
    -webkit-border-radius: 0 4px 4px 0;
            border-radius: 0 4px 4px 0;
    }

.front #map-years {
  bottom:0;
  width:100%;
  text-align:center;
  }
.front .map-selector li {
  display:inline-block;
  }
.front #map .wax-fullscreen {
  background:#434343 url(../images/sprite.png) repeat-x 0 -1390px;
  background-color:rgba(67,67,67,0.95);
  z-index: 26;
  position: absolute;
  left: 85px;
  top: 15px;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }

.wax-fullscreen-map {
  position: fixed!important;
  width: auto!important;
  height: auto!important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  }
.wax-tooltip {
  background: transparent url(../images/sprite.png) repeat-x 0 -1570px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.9);
  padding: 5px 10px;
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }

.front #map .help-text {
    position: absolute;
    z-index: 30;
    top: 60px;
    left: 15px;
    width: 200px;
    font-size: 15px;
}

.front #map .legend {
  opacity: 0;
  transition:         0.4s opacity;
  -webkit-transition: 0.4s opacity;
  }
  .front #map .legend.active {
    opacity: 1;
    }
.front #map .legend {
  bottom: 33px;
  right: 10px;
  position: absolute;
  z-index: 30;
  background-color: rgba(255, 255, 255, .5);
  padding: 1px;
  border-radius: 2px;
  }
  .front #map .legend .mini-matrix {
    width: 88px;
    height: 85px;
    overflow: hidden;
  }
  .front #map .legend.vulnerability,
  .front #map .legend.gain,
  .front #map .legend.readiness {
    bottom: 50px;
    right: 7px;
    }

.legend .label {
  font-style: normal;
  font-size: 11px;
  width: 33px;
  margin: 0 3px;
  line-height: 15px;
  }
.legend .scale,
.legend .label { float: left; }

.legend .scale { width: 128px; }
.legend .scale .swatch { float: left; width: 15px; height: 15px; margin-right: 1px; }
.legend .scale .scale-1 { background-color: #f85f5f; }
.legend .scale .scale-2 { background-color: #f5734e; }
.legend .scale .scale-3 { background-color: #eb944e; }
.legend .scale .scale-4 { background-color: #E2B343; }
.legend .scale .scale-5 { background-color: #ded943; }
.legend .scale .scale-6 { background-color: #B3CE44; }
.legend .scale .scale-7 { background-color: #94c250; }
.legend .scale .scale-8 { background-color: #79ba51; }

.front #carousel {
  height: 155px;
  background-color: #ebebeb;
  }
.front #carousel h2{
  border-bottom: 0;
  margin-bottom: 0;
  padding-top:30px;
  }
.front #carousel .overview {
  display: none;
  height: 140px;
  padding-top: 15px;
  padding-right: 30px;
  padding-left: 160px;
  }
.front #carousel .active {
  display: block;
  }
.front #carousel a {font-weight: bold;}
.front #carousel .slide1 {background: transparent url(../images/sprite.png) no-repeat -230px -1035px; }
.front #carousel .slide4 {background: transparent url(../images/sprite.png) no-repeat -230px -1155px; }
.front #carousel .slide3 {background: transparent url(../images/sprite.png) no-repeat -215px -1275px; }
.front #carousel .slide2 {background: transparent url(../images/sprite.png) no-repeat -230px -1415px; }

#carousel-nav-wrapper {
  position: relative;
  }
#carousel-nav {
  position: absolute;
  z-index: 20;
  top: -140px;
  right: 0px;
  width: 110px;
  }
#carousel-nav a {
  background: transparent url(../images/sprite.png) no-repeat -20px -660px;
  display: block;
  width: 15px;
  height: 15px;
  text-indent: -99999px;
  float: left;
  margin-left: 10px;
  }
#carousel-nav a.activeSlide {
  background-position: 0 -660px;
  }
.front .mission {
  clear: left;
  background-color: #ebebeb;
  }
.front .featured .country {
  float: left;
  width: 648px;
  border:1px solid #c6c6c6;
  margin-bottom: 15px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }
.front .featured .country:hover {
  background-color: #f5f5f5;
  cursor: pointer;
  }
.front .featured .country .info {
  width: 360px;
  float: left;
  }
.front .featured .country-summary {
  width: 268px;
  float: left;
  }
.front .featured .country-summary .gain {
  width: 128px;
  -webkit-border-radius:0;
          border-radius:0;
  }

/**
 * Download page
 */
.document .download ul {
  border: 1px solid #c6c6c6;
  padding: 15px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }

.document .download li {
  list-style: disc;
  padding: 5px 0 5px 0;
  margin-left: 20px;
}

.document .download a.button {
  display: block;
  font-family: 'AlternateGothicLTNo3Regular','HelveticaNeueBoldCondensed', 'HelveticaNeue-Bold-Condensed', 'Arial Narrow', 'Arial', sans-serif;
  font-weight: normal;
  font-size: 28px;
  height: 40px;
  line-height: 40px;
  text-indent: 45px;
  padding: 10px 15px;
  margin: 0 15px 15px 0;
  width:620px;
  float: left;
  text-align:left;
  background:#68BB37 url(../images/sprite.png) no-repeat 10px -265px;
}
.document .download a.button:hover {
  background-color:#5A2;
  }

.document .download .timestamp {
  font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;
  float: right;
  font-size: 12px;
  font-weight: normal;
  text-transform: none;
}

.document .download a.ccbadge {
  text-indent: 25px;
  float: left;
  display: block;
  background: transparent url(../images/sprite.png) no-repeat 15px -230px;
  margin-bottom: 30px;
  }

/**
 * Country pages
 */
.country-profile {
  background-color: #fff;
  }
.country-profile div.prose {
  clear: both;
 }
.country-profile .country-summary div.gain .name {
  font-weight: bold;
  }
.country-profile .country-summary div.gain .value {
  display: block;
  font-weight: bold;
  font-size: 48px;
  line-height: 42px;
  }
.country-profile .country-summary .gain:hover,
.country-profile .country-summary .indicator:hover {
  cursor: pointer;
  background-color: #F5F5F5;
  }
.country-summary div.gain {
  padding-top: 20px;
  height: 141px;
  }
.country-summary div.gain .trend {
  color: #666;
  }

/*Reporting Level*/
#indicator-reporting {
  color: white;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
  padding: 0 5px;
  display: block;
  line-height: 20px;
  background-color: #B5B5B5;
  border-bottom: 1px solid #8C8C8C;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 0 10px;
  cursor: pointer;
  float: right;
  }
#indicator-reporting.active {
  background-color: #767676;
  border-color: #555;
  }
.country-profile .tab-content {
  background-color: #fff;
  }
.country-profile tbody tr {
  border-bottom: 1px solid #ebebeb;
  }
.country-profile tr.worst td.score {
  background-image: url('../images/sprite.png');
  background-repeat: no-repeat;
  background-position: -290px -885px;
  }
.country-profile tr.section td.score {
  background-position: -290px -875px;
  }
.country-profile th.score {
  width: 60px;
  }
.country-profile th.raw {
  width: 70px;
  }
.country-profile tr.index td{
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #c6c6c6;
  line-height: 40px;
  }
.country-profile tr.section td{
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #c6c6c6;
  line-height: 40px;
  }
.country-profile th.name,
.country-profile td.name {
  width: 280px;
  padding-left: 15px;
  }
.country-profile th.graph {
  width: 100px;
  }
.country-profile td.graph {
  height: 20px;
  width: 80px;
  margin-top: 5px;
  }
.country-profile td.graph div.placeholder {
  height: 20px;
  width: 80px;
  }
.country-profile table.background-info {
  width: 100%;
  margin-bottom: 15px;
}
    .country-profile table.background-info tr {
        border: none;
    }
.country-profile .country-summary {
  height: 160px;
  border:1px solid #c6c6c6;
  margin: 0 0 15px 15px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }
.country-profile .country-summary {
  border-left: 0;
  }
.country-profile .country-summary .chart {
  float: left;
  }
.country-profile .country-summary .map-wrapper {
  border-left:1px solid #c6c6c6;
  float: right;
  }
.country-profile .details,
.country-profile .rankings {
  background-color: #ebebeb;
  }
div.bottomscorelabel {
  float: right;
  text-indent: 15px;
  background: url('../images/sprite.png') -330px -892px no-repeat;
  }
.country-profile .rankings {
  padding: 0 0 20px 0;
  font-size: 11px;
  }
.country-profile div.ranking-history-wrapper {
  border: 1px solid #c6c6c6;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }
.country-profile table.ranking-history {
  width: 100%;
  background-color: transparent;
  }
.country-profile table.ranking-history th.label {
  border-right: 1px solid #c6c6c6;
  }
.country-profile table.ranking-history thead tr {
  border-bottom: 1px solid #c6c6c6;
  }
.country-profile table.ranking-history tbody tr {
  border-bottom: 0;
  }
.country-profile table.ranking-history th,
.country-profile table.ranking-history td {
  padding: 5px 0;
  text-align: center;
  }
.country-profile .rankings tr:hover {
  background-color: transparent;
  cursor: default;
  }
.rank-number {
  color: #000;
  width: 22px;
  line-height: 19px;
  text-align: center;
  background-color: #e2f1f9;
  padding: 0 2px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: block;
  }
  .ranking .rank-number {
    line-height: 25px;
    padding: 0 8px;
    top: -1px;
    position: relative;
    }
    .front .ranking .rank-number {
      float: left;
      margin: 3px 10px 0 0;
      position: static;
      padding: 0 2px;
      line-height: 19px;
      }
.ranking-history .rank-number {
  margin: 0 auto;
  }
.country-profile .rankings table tr th.label {
  border-right: 1px solid #c6c6c6;
  font-style: italic;
  font-weight: normal;
  font-size: 12px;
  width: 50px;
  text-align: left;
  padding: 0 10px;
  }

/**
 * Country page sector graphs
 */
.country-sector-graph {
  margin: 12px 15px 0 0;
  width: 70px;
  height: 10px;
  }
  .country-sector-graph.empty {
    background-color: #ccc;
    }
  .details .country-sector-graph {
    background-color: #ccc;
    }
  .drawer .country-sector-graph {
    margin: 0 0 10px 0;
    width: 100%;
    position: relative
    }
  .country-sector-graph span {
    height: 10px;
    margin-left: -1px;
    border-left: 1px solid #fff;
    display: block;
    float: left;
    }
  .country-sector-graph .hilite {
    background-color: #8AD35E;
    }
  .drawer .country-sector-graph span:hover {
    background-color: #62b331;
    }
  #indicator-vulnerability .country-sector-graph,
  #indicator-readiness .country-sector-graph {
    background-color: #8AD35E;
    }
  .country-sector-graph .info.show {
    display:block;
    }

.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 .chart {
  padding-bottom: 15px;
  }
.drawer .content .graph {
  width: 230px;
  height: 150px;
  }
  .drawer .content .no-data{
    background: transparent url(../images/empty-graph.png) no-repeat 0 0;
    width: 230px;
    height: 150px;
    }
.drawer .content .gain {
  border-left: 0;
  }
.drawer .country-info {
  position: relative;
  padding-bottom: 15px;
  padding-right: 0px;
  }

/* CountryDrawer._ styling */
.drawer .indicator-time,
.drawer .source,
.drawer .similar-countries {
  border-top: 1px solid #ccc;
  }
.drawer .similar-countries {
  height: 175px;
  }
  .drawer .similar-countries.reporting {
    height: auto;
    }
.drawer .composition {
  height: 90px;
  }
.drawer .source ul {
  padding-bottom: 15px;
  }
.drawer .source ul li {
  margin: 0 5px;
  list-style: disc inside;
  }
.drawer table.similar {
  width: 100%;
  table-layout: fixed;
  }
.drawer table.similar th {
  width: 50%;
  }
.drawer table.similar td {
  padding-top: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid #ddd;
  }
.drawer table.similar .nowrap {
  width: 100px;
  }
.drawer table.similar td.empty {
  color: #999;
  }
.drawer table.similar td.country {
  border-right: 1px solid #ddd;
  }
.drawer table.similar th {
  padding-top: 15px;
  padding-bottom: 3px;
  font-weight: normal;
  font-style: italic;
  text-align: left;
  border-bottom: 1px solid #aaa;
  }
.drawer .chart .legend {
  float: right;
  }
.drawer .chart .legend .legendLabel {
  font-size: 12px;
  vertical-align: middle;
  padding-left: 5px;
  }
.drawer .chart .legend .legendColorBox {
  vertical-align:middle;
  padding-left: 10px;
  }
.floor .correction-control {
  border-top: 1px solid #ccc;
  padding-top: 15px;
  padding-bottom: 15px;
  height: 55px;
  }
.floor .correction-control p {
  font-style: italic;
  padding-bottom: 0;
  }

/**
 * Rankings page
 */
.top .ranking {background-color: #ebebeb;}
.top .comment {padding: 10px 15px;}
.ranking p.label {
 /* position: absolute;
 left: 430px;
 top: 90px;
 width: 180px;
 line-height: 150%;
 text-align: right;*/
 }

.ranking thead tr th a {
  padding-right: 20px;
  height: 10px;
  }
.ranking thead tr th a:hover {
  text-decoration: none;
  color: #8C8C8C;
  }

.ranking thead tr th a.sort.label.rank   { background: url('../images/sprite.png') 221px -411px; }
.ranking thead tr th a.sort.label.alpha  { background: url('../images/sprite.png') 238px -411px; }
.ranking thead tr th a.sort.label.income { background: url('../images/sprite.png') 269px -411px; }

.ranking thead tr th a.sort.label.rank.activeSort   { background: url('../images/sprite.png') 31px -411px; font-weight: bold; }
.ranking thead tr th a.sort.label.alpha.activeSort  { background: url('../images/sprite.png') 48px -411px; font-weight: bold; }
.ranking thead tr th a.sort.label.income.activeSort { background: url('../images/sprite.png') 79px -411px; font-weight: bold; }

.ranking thead tr th a.sort.label.rank.activeSort:hover,
.ranking thead tr th a.sort.label.alpha.activeSort:hover,
.ranking thead tr th a.sort.label.income.activeSort:hover {
  font-weight: bold;
  color: #444;
  }

.ranking p.label:
.ranking {
  background-color: #ebebeb;
  }
.ranking table.data th.rank {
  width: 60px;
  }
.ranking table.data th.income {
  width: 130px;
  }
.ranking table.data th.index {
  width: 75px;
  }
.ranking table.data th.rank,
.ranking table.data th.income,
.ranking table.data th.index {
  padding-bottom: 5px;
  }
.ranking table.data th,
.ranking table.data td {
  padding: 0 15px;
  text-align: left;
  font-weight: normal;
  }
  .ranking table.data th.score,
  .ranking table.data td.score {
    padding-left: 0;
    }
.ranking table.data th.trend {
  width: 65px;
  }
.ranking table.data th.score {
  width: 35px;
  }
.ranking table.data th.country {
  padding: 0 0 0 15px;
  }
.ranking table.data .icon-trend {
  margin: 5px 0 0 15px;
  }

/**
 * Featured ranking, front page
 */
.front .ranking {
  background-color: #fff;
  }
.front .ranking table.data {
  width: 50%;
  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: transparent
  }
.front .ranking .ranktop .rank-number {
  background-color: #79ba51;
  }
.front .ranking .rankbottom .rank-number {
  background-color: #f85f5f;
  }


/**
 * Matrix section
 */
.big-matrix {
  position:relative;
  height: 430px;
  width: 680px;
  border: 1px solid;
  padding-top: 30px
  }
.big-matrix img {
  position: absolute;
  left: 20px;
  /* top: 0; */
  }
.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: 15px;
  height: 15px;
  background: transparent url(../images/sprite.png) no-repeat -35px -1135px;
  }
.big-matrix .graph div.point:hover {
  background: transparent url(../images/sprite.png) no-repeat 0 -1135px;
  }

.big-matrix .graph div.point .country { display: none; }
.big-matrix .graph div.point .country-display {
    position: absolute;
    top: 12px;
    left: 11px;
    font-size: 11px;
}

.big-matrix .graph div.active-tl { background: url('../images/sprite.png') -35px -1255px; z-index: 1; } /* red */
.big-matrix .graph div.active-tr { background: url('../images/sprite.png') -35px -1225px; z-index: 1; } /* blue */
.big-matrix .graph div.active-br { background: url('../images/sprite.png') -35px -1165px; z-index: 1;} /* green */
.big-matrix .graph div.active-bl { background: url('../images/sprite.png') -35px -1195px; z-index: 1; } /* yellow */

.big-matrix .graph div.active-tl:hover { background: url('../images/sprite.png') 0 -1255px; z-index: 1; } /* red */
.big-matrix .graph div.active-tr:hover { background: url('../images/sprite.png') 0 -1225px; z-index: 1; } /* blue */
.big-matrix .graph div.active-br:hover { background: url('../images/sprite.png') 0 -1165px; z-index: 1;} /* green */
.big-matrix .graph div.active-bl:hover { background: url('../images/sprite.png') 0 -1195px; z-index: 1; } /* yellow */

.big-matrix .tooltip .country {
  background: transparent url(../images/sprite.png) repeat-x 0 -1570px;
  color: #fff;
  position:absolute;
  top: 10px;
  right: 10px;
  padding: 0 15px;
  height:30px;
  line-height:30px;
  z-index: 200;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }

.big-matrix div.year-controls {
  float:left;
  background: #666;
  color: #fff;
  margin: 20px 0 0;
  width:100%;
  }
.big-matrix div.year-controls,
.big-matrix ul.year-selector {
  float: left;
  padding: 0;
  }
  .big-matrix div.year-controls a.play-button {
    background: transparent url(../images/sprite.png) 5px -1300px;
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    text-indent: -999em;
    margin-top: 5px;
    }
  .big-matrix div.year-controls a.play-button.running {
    background-position: 5px -1325px;
    }
.big-matrix ul.year-selector li  { float: left; }

.big-matrix div.year-controls a.play-button,
.big-matrix ul.year-selector li a {
  color: #fff;
  float: left;
  padding: 2px 4px;
  line-height: 25px;
  font-size: 10px;
  font-weight: 300;
  }
.big-matrix ul.year-selector li a:hover,
.big-matrix ul.year-selector li a.selected {
  background:#333;
  text-decoration: none;
  }

.country-selector input.textfield {
  background: #fff url(../images/sprite.png) no-repeat 5px -625px;
  vertical-align: middle;
  color: #404040;
  border: 1px solid #CCC;
  border-color: #CCC #DDD #DDD;
  padding: 7px 20px 7px 25px;
  -webkit-box-shadow: inset #DDD 0px 1px 3px;
     -moz-box-shadow: inset #ddd 0px 1px 3px;
          box-shadow: inset #DDD 0px 1px 3px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  }
.country-selector {
  float: left;
  background-color: #ebebeb;
  width:100%;
  }
.country-selector .active-countries {
  float: left;
  padding: 15px 0;
  min-height: 40px;
  }
.country-selector .active-countries span.country {
  background: transparent url(../images/sprite.png) repeat-x 0 -1570px;
  display: block;
  float: left;
  margin: 0 5px 10px 0;
  padding: 0 35px 0 10px;
  line-height: 30px;
  position: relative;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  }
  .country-selector .active-countries span.country a {
    color: #fff;
    }
    .country-selector .active-countries span.country a.remove {
      background: transparent url(../images/sprite.png) 0 -1275px;
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      right: 5px;
      top: 5px;
      text-indent: -999em;
      }
.country-selector .display-code-toggle {
    float: right;
    margin-top: 15px;
    margin-right: 5px;
}

.gapminder {
  border-top: 1px solid #c6c6c6;
  clear: left;
  background-color: #ebebeb;
  padding: 15px;
  }
.gapminder a {
  display: block;
  padding: 5px 5px 5px 35px;
  color: white;
  background: #68BB37 url(../images/sprite.png) no-repeat -315px -975px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
  border-radius: 3px;
  moz-border-radius: 3px;
  webkit-border-radius: 3px;
  }

  .gapminder a:hover {
  text-decoration: none;
  background-color: #5A2;
  }


/**
 * Bones-admin : popups.
 */
.AdminPopup .attribute .description {
  color: #999;
  margin: 5px 0;
  font-size: 11px;
  }
.AdminPopup .attribute input {
  width: 400px;
  }
.AdminPopup .attribute .path-prefix {
  padding-top: 2px;
  padding-right: 5px;
  float: left;
  }
.AdminPopup .attribute.id input {
  width: 340px;
  }
#bonesAdminPopup .AdminPopup .buttons {
  padding: 15px 20px;
  }

/** About section **/
/*** About section navigation*/
#about-nav-container {
  width: 200px;
  }
#about-nav-container ul {
  padding: 0;
  list-style-type: none;
  }
#about-nav-container a {
  display: block;
  padding: 10px 10px 10px 40px;
  margin-bottom: 10px;
  width: 230px;
  background: transparent url(../images/sprite.png) no-repeat 0 0;
  }
#about-nav-container a:link,
#about-nav a:visited {
  text-decoration: none;
  }

#about-nav-container a.nav-overview     { background-position: 10px -913px; }
#about-nav-container a.nav-methodology  { background-position: 10px -950px; }
#about-nav-container a.nav-matrix       { background-position: 10px -983px; }
#about-nav-container a.nav-consultation { background-position: 10px -1017px;}
#about-nav-container a.nav-reference    { background-position: 10px -1087px;}
#about-nav-container a.nav-download     { background-position: 10px -1052px;}

#about-nav-container a:active,
#about-nav-container a.active,
#about-nav-container a:hover {
  background-color: #fff;
  color: #363636;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  }
#about-nav-container a:hover {
  background-color: #F5F5F5;
  }
#about-nav-container a.active:hover {
  background-color: #fff;
  }
h3#overviewdiagram{
 background: transparent url(../images/about_illustration.png) no-repeat center top;
 height: 130px;
 text-indent: -9999px;
 }

/*** Error Page ***/
.error-page {
  padding-top: 150px;
  height: 300px;
  width: 640px;
  }
.error-page h2 {
  color: #fff;
  text-align: center;
  border-bottom: 0;
  padding: 0 0 20px 0;
  font-size: 135px;
  line-height: 60px;
  }
.error-page .message {
  font-size: 35px;
  color: white;
  text-align: center;
  }
.error-page a {
  display: block;
  color: #1d354c;
  text-align: center;
  margin: 20px auto 0 auto;
  background-color: #8AD35E;
  height: 20px;
  width: 160px;
  padding: 5px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  }
.error-page a:hover {
  background-color: #94eb60;
  }

/*-----------------------
  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 */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
  #feedbacktab {
    position: static;
    width: auto;
    }
  #feedbacktab .tab {
    display: none;
    }
  #feedbacktab .content {
    position: static;
    display: inline;
    width: auto;
    height: auto;
    background: transparent;
    -moz-border-radius: none;
    -webkit-border-radius: none;
    border-radius: none;
    color: #fff;
    }
   #feedbacktab .content p {
    color: #7C858B;
    padding: 0;
    margin: 0;
    font-size: 11px;
    line-height: 14px;
    }
   #feedbacktab a.button.green {
    display: inline;
    margin: 0;
    padding: 0;
    float: none;
    font-weight: normal;
    background: transparent;
    text-transform: capitalize;
    color: #5A2;
    clear: none;
    font-size: 11px;
    }
  #cabinet .slider.fixed {
    position: absolute;
    }
  }
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
  #feedbacktab {
    position: static;
    width: auto;
    }
  #feedbacktab .tab {
    display: none;
    }
  #feedbacktab .content {
    position: static;
    display: inline;
    width: auto;
    height: auto;
    background: transparent;
    -moz-border-radius: none;
    -webkit-border-radius: none;
    border-radius: none;
    color: #fff;
    }
   #feedbacktab .content p {
    color: #7C858B;
    padding: 0;
    margin: 0;
    font-size: 11px;
    line-height: 14px;
    }
   #feedbacktab a.button.green {
    display: inline;
    margin: 0;
    padding: 0;
    float: none;
    font-weight: normal;
    background: transparent;
    text-transform: capitalize;
    color: #5A2;
    clear: none;
    font-size: 11px;
    }
  #cabinet .slider.fixed {
    position: absolute;
    }
  }