html {
  padding: 0;
  margin: 0;
}

body {
  background: url(bg.png);
  color: #fff;
  font: 300 100.1% Arial, sans-serif;
  padding: 0;
  margin: 0;
}

#body {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  clear: both;
  padding-top: 5px;
}

h1 {
  font-size: 26px;
  line-height: 36px;
}

h1 div {
  font-size: 18px;
  margin-top: 10px;
}

#map-container {
  position: relative;
  margin: 0;
  margin-left: -1px;
}

#map {
  width: 1000px;
  height: 400px; 
  border: 1px solid #eee;
  overflow: hidden;
  background: #4D4B48;
}

#map-control {
  margin-top: 10px;
}

#up, #down, #scale-down, #scale-up, #time-play, #current-year, #duplicates {
  display: block;
  width: 24px;
  height: 32px;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  float: left;
  margin: 5px 6px;
}

#up { 
  background-image: url(zoom-in.png);
}

.slider {
  width: 200px;
  height: 16px;
  float: left;
  margin: 12px 5px 5px 5px;
}

#down { 
  background-image: url(zoom-out.png);
}

#up:hover {
  background-image: url(zoom-in-hover.png);
}

#down:hover {
  background-image: url(zoom-out-hover.png);
}

.ui-widget-content {
  background: #BABDB6;
}

#scale-down, #scale-up, #time-play, #time-pause {
  width: 32px;
}

#scale-down {
  background-image: url(scale-down.png);
}

#scale-up {
  background-image: url(scale-up.png);
}

#scale-down:hover {
  background-image: url(scale-down-hover.png);
}

#scale-up:hover {
  background-image: url(scale-up-hover.png);
}

#popup, .language-label {
  position: absolute;
  color: #fff;
  padding: 5px;
  font: 12px sans-serif;
  background: black;
  border: 1px solid #eee;
  z-index: 9999;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

#time-play {
  background-image: url(play.png);
}

#time-play:hover {
  background-image: url(play-hover.png);
}

#current-year {
  line-height: 31px;
  cursor: pointer;
  width: auto !important;
  padding-left: 10px;
}

#current-year.off {
  color: #fff;
}

#current-year.on {
  color: #babdb6;
}

#time-play.paused {
  background-image: url(pause.png) !important;
}

#time-play.paused:hover {
  background-image: url(pause-hover.png) !important;
}

#duplicates, #duplicates.checked:hover {
  width: 32px;
  background-image: url(duplicate.png);
  cursor: pointer;
}

#duplicates:hover, #duplicates.checked {
  background-image: url(duplicate-hover.png);
}

.box {
  margin-top: 65px;
  background: #E2DACD;
  clear: both;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  color: #333;
  font-size: 0.8em;
  height: 330px;
  position: relative;
  overflow: hidden;
}

.box #left, .box #right1, .box #center, .box #right2 {
  float: left;
  width: 200px;
  height: 235px !important;
  overflow: hidden;
  margin: 0 0 12px 3px;
  padding: 10px;
  background: #efefef;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
}

.box #center {
  width: 400px;
}

.box h3 {
  font-size: 12px;
  color: #333;
  margin: 1px;
  margin-top: -10px;
  padding: 1px;
  border-bottom: 1px solid #666;
}

.box ul, .box ol {
  display: table;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 11px;
}

.box #left {
  width: 135px;
}

.box #right1 {
  width: 230px;
}

.box #right2 {
  width: 130px;
  padding-left: 4px;
  padding-right: 16px;
}

.box #right1, .box #right2 {
  float: left;
}

.box li {
  display: table-row;
  padding: 0;
}

.box li span {
  display: table-cell;
  width: 50%;
  padding: 2px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

.box li span + span {
  text-align: right;
}

#flag {
  display: block;
  width: 64px;
  height: 64px;
  float: left;
  opacity: 0.5;
  margin: 0 10px;
  background-repeat: no-repeat;
  background-position: center center;
}

.help {
  cursor: help;
}

#control-labels {
  clear: both;
  margin: 1px;
}

#control-labels span {
  width: 280px;
  color: #ccc;
  text-transform: uppercase;
  font-size: 11px;
  display: inline-block;
  margin-left: 75px;
}

#control-labels span + span {
  margin-left: 15px;
}

#control-labels span + span + span {
  margin-left: 10px;
}

#box-rankings.box {
  height: auto;
  min-height: 330px;
}

#box-rankings table {
  border-collapse: collapse;
  margin-left: 1px;
  margin-top: -10px;
  width: 100%;
}

#box-rankings td, #box-rankings th {
  line-height: 15px;
  height: 15px;
  font-size: 11px;
  border: 0;
  overflow: hidden;
}

#box-rankings td {
  background-repeat: no-repeat;
  background-position: center center;
}

#box-rankings tbody div {
  float: left;
  padding: 0;
  margin: 0;
  width: 125px;
}

#box-rankings tr {
  width: 120px;
  height: 20px;
}

#box-rankings td { width: 15%; color: #9C8E74; text-align: right; }
#box-rankings td + td { width: 35%; color: #000; padding: 0; text-align: left; }
#box-rankings td + td + td { width: 50%; text-align: center; }

#box-rankings.gtld td {
  width: auto !important;
  padding-right: 1px;
}

#box-rankings.gtld tbody div {
}

#box-rankings ul {
  display: block;
  margin: 0;
  margin-bottom: 4px;
  padding: 0;
  position: absolute;
  left: 250px;
  top: 28px;
}

#box-rankings ul + p + ul {
  left: 705px;
}

#box-rankings p {
  margin: 2px 0;
  position: absolute;
  top: 0px;
  left: 245px;
}

#box-rankings ul + p {
  margin: 2px 0;
  position: absolute;
  top: 0px;
  left: 700px;
}

#box-rankings p, #box-rankings li {
  display: block;
  font-size: 11px;
  float: left;
  padding: 5px;
}

#box-rankings li {
  cursor: pointer;
  border: 1px solid #96856B;
  color: #96856B;
  margin: 2px 5px 4px 0;
}

#box-rankings li:hover, #box-rankings li#active,
#box-rankings li:hover, #box-rankings li#active2 {
  color: #E2DACD;
  border-color: #96856B;
  background-color: #96856B;
}

.ranking-trigger {
  position: absolute;
  left: 85px;
  top: 40px;
  padding-left: 20px;
  background: transparent url(ranking.png) left center no-repeat;
  color: #96856B;
  cursor: pointer;
  display: block;
  z-index: 2;
}

.box h2 {
  font-size: 32px;
  opacity: 0.3;
  margin: 5px;
}

.box h2.country {
  line-height: 64px;
  margin-bottom: -1px;
}

.box h2.world {
  line-height: inherit !important;
  padding-bottom: 25px !important;
  margin-top: 0 !important;
}

#lineschart-legend {
  margin-top: 5px;
}

#lineschart-legend span {
  font-size: 11px;
  cursor: pointer;
  padding-left: 12px;
  margin-right: 3px;
  background: transparent url(checked.png) left 2px no-repeat;
}

#lineschart-legend span.unchecked {
  background-image: url(unchecked.png);
}

.chart-icon {
  display: block;
  float: right;
  width: 32px;
  height: 16px;
  text-indent: -5000em;
  background-color: transparent;
  background-position: 0 2px;
  background-repeat: no-repeat;
  margin-right: 10px;
  cursor: pointer;
}

#chart {
  clear: both;
}

.line-chart-icon {
  background-image: url(line-icon-grey.png);
}

.bar-chart-icon {
  background-image: url(bar-icon-grey.png);
}

.line-chart-icon:hover, .line-chart-icon.shown-chart {
  background-image: url(line-icon-black.png);
  background-position: 0 2px;
}

.bar-chart-icon:hover, .bar-chart-icon.shown-chart {
  background-image: url(bar-icon-black.png);
  background-position: 0 2px;
}

#legend {
  display: block;
  position: absolute;
  bottom: 38px;
  left: 10px;
  z-index: 9999;
  width: 160px;
  height: 210px;
  background: #A5A4A3;
  border: 1px solid #fff;
}

#legend div.legend {
  display: none;
  margin-top: 25px;
}

#legend #legend-select, #legend .legend-shown {
  display: block !important;
}

#legend-select {
  width: 160px;
  margin: 0;
  background: #847E78 url(arrow-down.png) 140px 8px no-repeat;
  border-bottom: 1px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#legend-select ul {
  display: block;
  padding: 0;
  margin: 0;
  height: 24px;
  overflow: hidden;
}

#legend-select:hover {
  background-image: url(arrow-up.png);
}

#legend-select:hover ul {
  height: auto;
  overflow: visible;
}

#legend-select li {
  font-size: 11px;
  padding: 5px;
  margin: 0;
  list-style: none;
  cursor: pointer;
  display: none;
}

#legend-select:hover li {
  display: block;
}

#legend-select li:hover, .legend li.filtered {
  background-color: #5C5C5C;
}

#legend-select .legend-selected {
  display: block;
}

.legend ul {
  padding: 5px;
  display: table;
  width: 97%;
}

.legend li {
  padding: 0;
  margin: 2px;
  font-size: 11px;
  list-style: none;
  cursor: pointer;
  display: table-row;
}

.legend-square {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1px solid #fff;
  margin-left: 1px;
  margin-bottom: -2px;
  background-position: center center;
}

#legend-type .legend-square.legend-hidden {
  background-color: #A5A4A3 !important;
}

.legend li:hover {
  color: #eee;
}

.legend li span {
  display: table-cell;
  padding-top: 1px;
}

.legend li span + span {
  padding-left: 5px;
}

.ranking-position {
  color: #666;
}

#icons {
  position: absolute;
  top: 0px;
  right: 10px;
}

#icons p {
  font-size: 12px;
  margin: 4px 0;
}

#icons ul {
  padding: 0;
  display: block;
  float: left;
}

#icons li {
  float: left;
}

#icons li a {
  display: block;
  float: left;
  width: 38px;
  height: 33px;
  text-indent: -5000em;
  margin-right: 10px;
}

#onu-pin { background-image: url(onu-pin-not.png); }
#onu-pin.sig { background-image: url(onu-pin-sig.png); }
#onu-pin.ret { background-image: url(onu-pin-ret.png); }
#onu-rac { background-image: url(onu-rac-not.png); }
#onu-rac.sig { background-image: url(onu-rac-sig.png); }
#onu-rac.ret { background-image: url(onu-rac-ret.png); }
#onu-tp { background-image: url(onu-tp-not.png); }
#onu-tp.sig { background-image: url(onu-tp-sig.png); }
#onu-tp.ret { background-image: url(onu-tp-ret.png); }
#ce-rac { background-image: url(ce-rac-not.png); }
#ce-rac.sig { background-image: url(ce-rac-sig.png); }
#ce-rac.ret { background-image: url(ce-rac-ret.png); }
#ce-pin { background-image: url(ce-pin-not.png); }
#ce-pin.sig { background-image: url(ce-pin-sig.png); }
#ce-pin.ret { background-image: url(ce-pin-ret.png); }
#ce-cc { background-image: url(ce-cc-not.png); }
#ce-cc.sig { background-image: url(ce-cc-sig.png); }
#ce-cc.ret { background-image: url(ce-cc-ret.png); }

#left em {
  font-weight: normal;
}

#left small {
  font-size: 11px;
}

#left li {
  width: 100%;
}

#left span {
  width: 25%;
}

#left .value {
  font-weight: bold;
  vertical-align: middle;
  width: 75%;
}

#left a, #left a:active, #left a:link, #left a:visited {
  text-decoration: none;
  font-weight: normal;
  border-bottom: 1px dotted #515AB7;
  color: #515AB7;
}

#intro span {
  font-weight: bold;
  color: #f00;
  font-size: 16px;
}

#intro {
  text-align: justify;
  font-size: 14px;
}

#intro a, a:visited, a:hover, a:link {
  color: #fff;
}

#intro a:hover {
  text-decoration: none;
}

#intro acronym {
  padding-bottom: 1px;
  border-bottom: 1px dotted #fff;
  cursor: help;
}

#hosts .label {
  white-space: nowrap;
}

#loading {
  font-size: 34px;
  text-align: center;
  width: 100%;
  height: 1500px;
  position: absolute;
  z-index: 10001;
  background: transparent url(help.png) center -15px no-repeat;
  margin: 0;
  padding-top: 30px;
  cursor: pointer;
}

#barra {
  margin-top: -14px !important;
}

#help-link {
  font: 14px Arial, sans-serif;
  position: absolute;
  top: 23px;
  right: 0;
  color: #aaa;
  width: 120px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: bold;
}

#help-link:hover {
  color: #fff;
}

.safernet-footer-section {
  height: 160px !important;
}

em#removed-info,
em#languages-text {
  font-style: normal;
}

#disclaimer {
  z-index: 9999;
  color: #fff;
  position: absolute;
  right: 10px;
  bottom: 30px;
  font-size: 11px;
  text-align: right;
  width: 600px;
}

#hosts-header .type,
#hosts-header .year {
  display: none;
}

#hosts-header select {
  font-size: 12px;
  background: transparent;
  font-weight: bold;
  color: #333;
}

#partner-select {
  font-size: 14px;
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
  background: #4D4B48;
}

#partner-select option {
  background: #4D4B48;
}

#hotlines-count {
  font-style: normal;
}

#top {
  background: #3A3838;
}

#top h2 {
  margin: 0;
}

#top h2 a {
  display: inline-block;
  width: 194px;
  height: 40px;
  background: transparent url(images/datasafer.png) center center no-repeat;
  text-indent: -5000em;
  margin: 0;
  float: left;
}

#top a.top-link {
  line-height: 40px;
  display: inline-block;
  color: #c7c6c6;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  margin: 0 30px;
  font-size: 14px;
  font-weight: bold;
}

#top a:hover {
  color: #fff;
}

#social a {
  float: right;
  height: 16px;
  margin: 12px;
  width: 32px;
  background-size: contain !important;
}

#social #facebook { background: transparent url(images/icon-facebook.png) center center no-repeat; }
#social #twitter { background: transparent url(images/icon-twitter.png) center center no-repeat; }
#social #youtube { background: transparent url(images/icon-youtube.png) center center no-repeat; }
#social #instagram { background: transparent url(images/icon-instagram.png) center center no-repeat; }

#social a span {
  display: none;
}

#safernet-footer-logos {
  width: 100% !important;
}

.safernet-footer-category {
  float: right;
  margin-right: 124px !important;
}

li[data-type='Não classificado'] {
  display: none !important;
}