@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
    font-family: 'Open Sans', sans-serif;
}


/* Logo
---------*/
#logo-header-wrapper {
    background: #fff;
}
#logo-header-wrapper header {
    width: 1280px;
    margin: 0 auto;
    padding: 1em 0;
    overflow: auto;
}
header h1#logo {
    margin: 0;
    padding: 0;
    position: relative;
    float: left;
}
header h1#logo .badge {
    background: #c00;
    border: 3px solid #fff;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    color: #fff;
    font-size: 20px;
    left: 300px;
    padding: 3px 5px;
    position: absolute;
    top: 25px;
    text-transform: uppercase;
    transform: rotate(-10deg) translate(20%, 20%);
}
#top-corner-text {
    float: right;
    font-size: 16px;
    margin: 10px 0 0;
    text-align: right;
    max-width: 40%;
}
#top-corner-text strong {
    color: #B82B22;
    font-weight: normal;
}


/* Header
-----------*/
#sub-header-wrapper {
    background: #2AA9E0;
    color: #fff;
}
#sub-header-wrapper header {
    color: #fff;
    margin: 0 auto;
    overflow: auto;
    padding: 15px 0;
    padding: 1em 0;
    position: relative;
    width: 1280px;
}
header.extrapadded {
	padding: 28px 0 !important;
}
#main_header h2 {
    font-size: 34px;
    margin: 0;
}
#main_header h3 {
    font-size: 16px;
    margin: 10px 0 0;
}
#main_header a {
    color: #fff;
    text-decoration: underline;
}
#main_header a:hover {
    color: #ccc;
    text-decoration: underline;
}
#header-info {
    right: 0;
    max-width: 40%;
    text-align: right;
    top: 15px;
    position: absolute;
}
#twitter-link {
    font-size: 12px;
    right: 0;
    bottom: 10px;
    position: absolute;
    text-decoration: none !important;
}


/* Main menu
--------------*/
#main-navigation-wrapper {
    background: #B72822;
    padding: 4px 0;
}
#main_menu {
    width: 1280px;
    margin: 0 auto;
    border-color: #fff;
    border-width: 0 0 0 1px;
    border-radius: 0;
}
.navbar {
    min-height: auto;
}
.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}
.navbar-default .navbar-nav > li > a {
    border-right: 1px solid #fff;
    padding: 0.3em 0.7em !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a {
    color: #fff !important;
    background: #cc3832 !important;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a {
    border-color: #fff !important;
    color: #fff;
    font-weight: bold;
}
.navbar-default .navbar-toggle {
    border-color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: #cc3832;
}
.navbar-default .navbar-toggle:focus .icon-bar,
.navbar-default .navbar-toggle:hover .icon-bar {
    background-color: #fff;
}
.navbar-right {
    margin-right: 0;
    border-left: 1px solid #fff;
}
.navbar-right .username {
    display: inline-block;
    max-width: 125px;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collapsing .navbar-nav, .in .navbar-nav {
    margin: 0;
}
.in .navbar-collapse {
    padding-left: 15px;
    padding-right: 15px;
}
.collapsing.navbar, .in.navbar,
.collapsing.navbar a, .in.navbar a,
.collapsing .navbar-right, .in .navbar-right {
    border: 0 !important;
}


/* Sub menus
---------------*/
.navbar-default .dropdown-menu {
    background: #B72822;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-width: 120px;
}
.navbar-default .dropdown-menu > li > a,
.navbar-default .dropdown-menu > li > a:focus,
.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #fff !important;
    font-size: 14px;
    font-weight: bold;
    padding: 0.4em 0.7em !important;
}
.navbar-default .dropdown-menu > li > a:focus,
.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
    background-color: #cc3832;
}
.navbar-default .dropdown .dropdown-menu {
    padding: 0 !important;
}


/* Page content
-----------------*/
#main-wrapper {
    background: #cae9f7;
}
#main {
    width: 1280px;
    margin: 0 auto;
    padding: 25px 0;
}
article {
    background: #fff;
    line-height: 1.6;
	padding: 25px 0;
}
article h1 {
    color: #BE311B;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 1em;
}
article h2, article h3, article h4, article h5, article h6 {
	color: #BE311B;
    margin-top: 1em;
    margin-bottom: 0.25em;
}
article p {
    margin: 0.3em 0 1.5em;
}
article a, article a:hover {
	color: #BE311B;
}
article h1 {
	font-size: 22px;
}
article h2 {
	font-size: 17px;
}
article h3, article h4, article h5, article h6 {
	font-size: 15px;
}
article .widget {
	background: #8CCCFB;
	border-radius: 10px;
	padding: 1em;
	margin: 1em 1em 2em;
}
article .widget a {
	color: #BE311B;
}
.widget_news ol {
	list-style: none;
	padding: 0;
}
.widget_news li {
	margin: 15px 0;
}
.alert a {
    color: inherit;
}
.static_page article {
	overflow: auto;
}
aside {
    margin: 25px 0;
    padding: 0 0 0 25px !important;
}
aside h3 {
    font-size: 22px;
    font-weight: bold;
}

#basic-wrapper {
    font-size: 14px;
}
#basic-wrapper article {
    margin: 0;
    padding: 0;
}


/* Footer
-----------*/
#footer-wrapper {
    background: #B72822;
}
footer {
    width: 1280px;
    margin: 0 auto;
    color: #fff !important;
    overflow: auto;
    padding: 5px 0;
}
footer a {
    color: #fff !important;
}
footer a img {
    border: none;
}
.gdl-footer {
    float: left;
    font-size: 13px;
    font-weight: bold;
    padding: 22px 0 8px;
}
.ru-footer {
    float: right;
}

#basic-footer {
    text-align: right;
    width: auto;
}
#basic-footer #logo img {
    height: 40px;
    width: auto;
}


/* Button colours
-------------------*/
.btn-primary {
    background: #2AA9E0;
    border-color: #2AA9E0;
}
.btn-primary:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    background: #2A93C0;
    border-color: #2A93C0;
}
.btn-danger {
    background: #B72822;
    border-color: #B72822;
}
.btn-danger:hover, .btn-danger.focus, .btn-danger:focus, .btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open>.dropdown-toggle.btn-danger.focus, .open>.dropdown-toggle.btn-danger:focus, .open>.dropdown-toggle.btn-danger:hover {
    background: #8e2414;
    border-color: #8e2414;
}


/* Pagination colours
-----------------------*/
.pagination > li > a, .pagination > li > span {
    color: #2A93C0;
}
.pagination > .active > a {
    background-color: #2aa9e0;
    border-color: #2aa9e0;
}
.pagination > .active > a:hover {
    background-color: #2A93C0;
    border-color: #2A93C0;
}


/* Homepage
-------------*/
.homepage .lead {
    font-size: 16px;
    background: #fff;
    margin: 25px 0;
    padding: 20px 15px 20px 20px;
}

.homepage .col-md-6:nth-child(2) {
    padding: 0 12px 0 0;
}
.homepage .col-md-6:last-child {
    padding: 0 0 0 13px;
}
.homepage .col-md-6 > div,
.homepage .col-md-3 > div {
    background: #fff;
    margin: 0 0 25px 0;
    padding: 15px 20px;
}
.homepage .col-md-6 h3,
.homepage .col-md-3 h3 {
    color: #BE311B;
    margin-top: 0;
    margin-bottom: 0.25em;
    font-size: 17px;
}
.homepage .col-md-3 h3 a {
    color: inherit;
}
.homepage .buttonstrip {
    text-align: right;
}
.homepage .image {
    padding: 10px 0;
}
.homepage .image img {
    width: 100%;
}

.homepage .col-md-3 {
    margin: 0;
    padding: 25px 0 25px 25px;
}
.homepage .col-md-3 > div {
    margin-right: 0;
}

.homepage .widget_twitter {
	padding: 0 10px !important;
}
.homepage .widget_twitter h3 {
	padding: 20px 10px 0 10px;
}
.homepage .widget_news p {
	font-size: 13px;
}


/* IWI World Maps
-------------------*/
.iwi-worldmaps #map_div {
	height: 700px;
}
.iwi-worldmaps #map_thumbs {
	overflow: auto;
}
.iwi-worldmaps #map_thumbs div {
	float: left;
	width: 19%;
	margin: 0 1.25% 1% 0;
}
.iwi-worldmaps #map_thumbs div:last-child {
	margin-right: 0;
}

/* Play With IWI
------------------*/
.iwi-form article {
	overflow: auto;
}
.iwi-form .radio-inline label {
    font-weight: normal;
    min-width: 50px;
}
.iwi-form .col-sm-offset-4 {
    margin-top: 20px;
    margin-bottom: 20px;
}


/* IWI Downloads
------------------*/
.iwi-downloads table {
    background: #fff;
    font-size: 0.9em;
}
.iwi-downloads td {
    padding: 3px 5px !important;
}


/* EDUCOEF
------------*/

.educoef article {
    overflow: auto;
    min-height: 400px;
}
.educoef form {
    margin-bottom: 3em;
}
#educoef_charts {
    float: left;
    width: 70%;
}
.chart {
    display: none;
    height: 300px;
    margin-top: 5px;
}
#chart_boys, #chart_girls{
    width: 85%;
}
#chart_boys_enrol, #chart_girls_enrol {
    width: 14%;
}
#educoef_legend {
    display: none;
    float: right;
    font-size: 14px;
    width: 25%;
}
#educoef_legend dt {
    float: left;
    width: 22%;
    font-weight: bold;
}
#educoef_legend dd {
    float: left;
    width: 78%;
    margin-bottom: 15px;
}


/* Area data download page
----------------------------*/
.areadata_download h3 {
    margin-top: 30px;
}
.areadata_download table {
    background: #fff;
}


/* Area data sources page
---------------------------*/
.data-sources .table-condensed {
    font-size: 0.9em;
}


/* Area data region pages
---------------------------*/
.regionpage .category {
    background: #fff;
    margin: 0 0 30px;
    padding: 0;
}
.regionpage thead tr {
    background: #B72822;
    color: #fff;
}
.regionpage thead th {
    text-align: center;
}
.regionpage thead th:first-child {
    text-align: left;
}
.regionpage .category a {
    color: inherit;
}

.regionpage .value {
    width: 140px;
    text-align: center;
}
.regionpage td.trend {
    padding-right: 10px;
    text-align: right;
    width: 80px;
}
.regionpage .spacer {
    width: 35px;
}
.regionpage .rank{
    text-align: center;
    width: 125px;
}
.regionpage .decile {
    text-align: center;
    width: 120px;
}
.regionpage .year {
    width: 80px;
    text-align: center;
}

.regionpage .trend.none {
    text-align: center;
}
.regionpage .trend-insignificant {
    color: #999 !important;
}
.regionpage .trend-positive {
    color: #6C6;
}
.regionpage .trend-positive:after {
    content: ' ▲';
}
.regionpage .trend-negative {
    color: #C66;
}
.regionpage .trend-negative:after {
    content: ' ▼';
}


/* SDG dashboard report
-------------------------*/
.sdg-categories {
    background: #fff;
    padding: 10px;
    margin: 0 0 30px;
    display: flex;
    justify-content: space-between;
}
.sdg-categories > a > img {
    width: 65px;
}

.sdg-dashboard .category-image {
    width: 150px;
    margin-right: 10px;
}
.sdg-dashboard .category-image img {
    width: inherit;
    background: #fff;
}

.sdg-dashboard .category {
    margin: 0 0 30px;
    display: flex;
    padding: 0;
}
.sdg-dashboard .category table {
    flex-grow: 1;
    width: calc(100% - 150px - 10px);
    background: #fff;
}
.sdg-dashboard thead tr {
    background: #B72822;
    color: #fff;
}
.sdg-dashboard thead th {
    text-align: center;
}
.sdg-dashboard thead th:first-child {
    text-align: left;
}
.sdg-dashboard .category a {
    color: inherit;
}

.sdg-dashboard tr.separator > td {
    border-top: 5px solid #ccc;
}
.sdg-dashboard tr.other > td {
    font-style: italic;
}

.sdg-dashboard .buttons {
    text-align: right;
}
.sdg-dashboard .buttons > .btn {
    background-color: #ABE5FF;
    border: none;
    border-radius: 6px;
    padding: 0.1em 0.5em 0;
}
.sdg-dashboard .buttons > .btn:hover {
    background-color: #9DD4EC;
}

/* Common report styles
-------------------------*/
.regionpage .textblock,
.sdg-dashboard .textblock {
    background: #fff;
    margin: 0 0 30px;
    padding: 15px;
}
.regionpage .textblock:first-child,
.sdg-dashboard .textblock:first-child {
    font-size: 1.15em;
}
.regionpage .textblock:last-child,
.sdg-dashboard .textblock:last-child {
    font-size: 0.85em;
}
.regionpage .textblock p:last-child,
.sdg-dashboard .textblock p:last-child {
    margin: 0;
}
.regionpage .textblock .endnote,
.sdg-dashboard .textblock .endnote {
    margin: 0 0 0 10px !important;
    text-indent: -10px;
}
.regionpage .textblock .endnote.last,
.sdg-dashboard .textblock .endnote.last {
    margin-bottom: 10px !important;
}
.regionpage .textblock ul,
.sdg-dashboard .textblock ul {
    margin: 0 0 10px 10px;
    padding: 0;
    list-style-type: none;
}
.regionpage .textblock ul > li,
.sdg-dashboard .textblock ul > li {
    text-indent: -10px;
}
.regionpage .textblock ul > li:before,
.sdg-dashboard .textblock ul > li:before {
    content: "- ";
    text-indent: -10px;
}

/* Area data region rankings
------------------------------*/
.regionranking article h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 0.5em 0;
    text-align: center;
}
.regionranking thead tr {
    background: #B72822;
    color: #fff;
}
.regionranking td.rank {
    font-size: 12px;
    line-height: 1.1;
    padding: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}
.regionranking td.rank a {
    color: inherit;
}
.regionranking .decile-ranking {
    margin: 0 0 25px 0;
    padding: 15px;
}
.regionranking .decile-ranking > h2 {
    margin: 0 0 15px 0;
}


/* Registration page
----------------------*/
.register .form-control {
    width: 50%;
}


/* Area data table and form styles
------------------------------------*/
.areadata article {
    min-height: 750px;
}
#areadata-form {
    background: #efefef;
    padding: 10px 0;
    margin-top: -10px;
}
#areadata-form > .row {
    margin: 5px !important;
}
.form-horizontal .control-label:after {
    content: ':';
}
.form-control.year-input {
    padding: 0 2px;
    width: 30px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
}
#areadata-form ul.nav {
    margin-bottom: 10px;
}
#areadata-form ol {
    padding: 0;
}
#areadata-form ol li {
    margin-bottom: 2px;
}
#areadata-form .btn, #areadata-form {
    font-size: 12px;
    line-height: 100%;
}
#areadata-form .checkbox {
    margin-top: 0;
}
#areadata-form input[type="checkbox"], #areadata-form input[type="radio"] {
    margin: 0 0 0 -20px;
}
#areadata-form .form-group {
    margin-bottom: 5px;
}
#areadata-form h4 {
    margin: 0 0 5px;
}
#areadata-form .small-column .form-group {
    margin: 0 -15px;
}
#indicators_table {
    background: #fff;
    margin-bottom: 5px;
}
#indicators_table td:nth-child(3) {
    padding: 1px;
    width: 15px;
}
#indicators_table td .btn {
    padding: 5px 6px;
}
#add_indicator_container {
    white-space: nowrap;
}

/* Dropdown menus */
.dropdown-menu {
    z-index: 2000;
    font-size: 12px;
    line-height: 12px;
}
.dropdown .form-control {
    font-size: 12px;
    line-height: 12px;
    padding: 2px 3px;
    height: 24px;
    margin-bottom: 3px;
    display: inline-block;
}
.dropdown .checkbox,
.dropdown .radio {
    min-height: 20px;
}
.dropdown .dropdown-menu {
    padding: 0 15px !important;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
    background-color: #4eb7e5;
}
.multiselect-container {
    padding: 0;
}
.multiselect-container > li > a > label {
    padding: 5px 15px 5px 30px;
}

/* Countries dropdown */
#country-dropdown .dropdown-menu {
    width: 840px;
}
#country-dropdown .dropdown-menu .head {
    background: #4eb7e5;
    color: #fff;
    margin-top: 0 !important;
}
#country-dropdown .dropdown-menu .head > div.select-all-container {
    padding: 7px 2px 4px;
}
#country-dropdown .dropdown-menu .head > div.search-container {
    padding: 5px 4px 1px;
}
#country-dropdown .dropdown-menu .head > div > div {
    padding: 3px 5px 0;
}
#country-dropdown .dropdown-menu .list {
    padding: 0 3px;
}
#country-dropdown ul {
    padding: 0;
    margin: 0;
}
#country-dropdown .dropdown-menu ul > li {
    list-style: none;
    padding: 3px 5px 0;
}

/* Years dropdown */
#years-dropdown .dropdown-menu .head {
    background: #4eb7e5;
    color: #fff;
    margin-top: 0 !important;
    padding: 4px 10px;
}
#years-dropdown ul {
    margin: 0;
    padding: 4px 0;
    height: 200px;
    width: 100%;
    overflow: auto;
}
#years-dropdown .dropdown-menu ul > li {
    list-style: none;
    padding: 5px 10px 0;
}
#years-dropdown .dropdown-menu ul > li .checkbox {
    padding: 0;
}
#years-dropdown .dropdown-menu ul > li label {
    display: block;
}
#control_toggle_advanced {
    display: none;
}

/* Table header */
#areadata_header {
    clear: both;
    color: #B72822;
    position: relative;
}
#areadata_header > h4 {
    color: inherit;
    padding: 1em 0;
    margin: 0 250px;
    text-align: center;
}
#areadata_header > div.interpolation_notice {
    position: absolute;
    font-size: 12px;
    left: 0;
    top: 14px;
}
#areadata_header > div.buttonstrip {
    position: absolute;
    right: 0px;
    top: 8px;
}
#areadata_header > div.buttonstrip > .dropdown-menu {
    left: unset;
    margin: 0;
    min-width: 130px;
    right: 0;
}

.tooltip-toggle, .toggle {
    cursor: pointer;
}

/* Tabular data */
table.floatThead-table {
    border-top: none;
    border-bottom: none;
}
#table-wrapper {
    clear: both;
    margin-top: 15px;
}
.areadata-table {
    border: 0 none;
    width: 100%;
}
.areadata-table > thead > tr {
    background: #B72822;
    color: #fff;
}
.areadata-table > thead > tr > th {
    font-size: 11px;
    padding: 1px 3px;
    text-align: center;
    vertical-align: middle;
}
.areadata-table > thead > tr > th.year {
    text-align: right;
}
.areadata-table > tbody > tr:nth-child(odd) {
    background: #f8f8f8;
}
.areadata-table > tbody > tr:hover {
    background: #ededed !important;
}
.areadata-table > tbody > tr > td {
    border: 1px solid #eee;
    font-size: 10px;
    line-height: 14px;
    overflow: hidden;
    padding: 2px;
    text-align: right;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
.areadata-table > tbody > tr > .country {
    background-color: #4eb7e5;
    color: #fff;
    font-size: 12px;
    line-height: 1.75;
    padding: 1px 3px;
    position: relative;
    text-align: center;
}
.areadata-table > tbody > tr > .country.has_buttons {
    line-height: 2;
}
.areadata-table > tbody > tr > .region {
    color: #000;
    text-align: left;
    min-width: 150px;
    max-width: 150px;
    width: 150px;
}
.areadata-table > tbody > tr > .region > a {
    color: inherit;
}
.areadata-table > thead > th:first-child {
    text-align: left;
}
.areadata-table > tbody > tr > td.interpolated,
.areadata-table > tbody > tr > td.extrapolated,
.areadata-table > tbody > tr > td.estimated,
#areadata_header > p > span {
    color: #00f;
}
.areadata-table > tbody > tr > td.proper {
    color: #f00;
}
.areadata-table > tbody > tr.separator > td {
    border-top: 2px solid #ddd;
}
.areadata-table > tbody > tr.subseparator > td {
    border-top: 2px solid #ddd;
}
.areadata #table-wrapper > .buttonstrip {
	margin-top: 20px;
}

.sgdi .areadata-table > tbody > tr > td.proper,
.shdi .areadata-table > tbody > tr > td.proper {
    color: #000;
}

.areadata .placeholder {
    margin: 15px 0 0;
    text-align: center;
}

.areadata-table > tbody > tr > .country > .buttonstrip {
    position: absolute;
    right: 4px;
    top: 0;
}
.areadata-table > tbody > tr > .country > .buttonstrip > .btn {
    background-color: #CAE9F7;
    border: none;
    border-radius: 6px;
    padding: 0.1em 0.5em 0;
}

.colour-scaled {
    color: #000 !important;
}
.scale-1 {
    background: #ff7170;
}
.scale-2 {
    background: #ff907d;
}
.scale-3 {
    background: #ffab87;
}
.scale-4 {
    background: #ffc28c;
}
.scale-5 {
    background: #ffd48f;
}
.scale-6 {
    background: #ffe898;
}
.scale-7 {
    background: #fefa99;
}
.scale-8 {
    background: #f6ffa2;
}
.scale-9 {
    background: #e9ffb4;
}
.scale-10 {
    background: #d9ffc4;
}
.scale-11 {
    background: #caffd3;
}
.scale-12 {
    background: #baffe3;
}
.scale-13 {
    background: #a8fff4;
}
.scale-14 {
    background: #99faff;
}
.scale-15 {
    background: #99eaff;
}
.scale-16 {
    background: #96d7ff;
}
.scale-17 {
    background: #94c7ff;
}
.scale-18 {
    background: #8cafff;
}
.scale-19 {
    background: #8293ff;
}
.scale-20 {
    background: #6e71ff;
}


/* Leaflet maps
-----------------*/
body.maps article .form-group {
    margin: 0 0 5px 15px;
}
body.maps article .form-group .col-xs-2 {
    width: 10%;
}
body.maps article .form-group .col-xs-2:after {
    content: ':';
}
body.maps .controls {
    position: relative;
}
body.maps .buttonstrip {
    position: absolute;
    bottom: 0;
    right: 0;
}

#leaflet_map {
    background-color: #d9eef9;
    margin-top: 15px;
    width: 100%;
    height: 600px;
}
#leaflet_map .caption {
    color: #333;
    font: 20px 'Open Sans', 'Arial', 'Helvetica', sans-serif;
    font-weight: bold;
    position: absolute;
    text-align: center;
    text-shadow: 0 0 5px #fff, 0 0 5px #fff;
    width: 1240px;
}
#leaflet_map .info {
    background: rgba(255,255,255,0.8);
    border-radius: 5px;
    font: 14px/16px 'Open Sans', 'Arial', 'Helvetica', sans-serif;
    max-width: 200px;
    padding: 6px 8px;
}
#leaflet_map .info h4 {
    margin: 0 0 5px;
    color: #777;
}
#leaflet_map .legend {
    background: rgba(255,255,255,0.8);
    border-top-right-radius: 5px;
    color: #555;
    font: 14px/16px 'Open Sans', 'Arial', 'Helvetica', sans-serif;
    line-height: 18px;
    margin: 0;
    padding: 3px 2px 3px 6px;
    text-align: left;
}
#leaflet_map .legend i,
#leaflet_map .legend span {
    display: inline-block;
    width: 12px;
    height: 12px;
    opacity: 0.7;
}
#leaflet_map .legend span {
    font-size: 12px;
    display: inline;
    line-height: 1.4;
    vertical-align: top;
    padding: 0 3px;
}
#leaflet_map .legend span.prefix {
    padding: 0 6px 0 0;
}


/* Responsive: smartphone in portrait or landscape
----------------------------------------------------*/
@media only screen and (max-width: 760px) {
    #logo-header-wrapper header {
        width: 100%;
    }
    header h1#logo {
        float: none;
        text-align: center;
    }
    header h1#logo img {
        width: 100%;
        max-width: 426px;
        height: auto;
    }
    #sub-header-wrapper header {
        text-align: center;
        width: 100%;
    }
    #top-corner-text, #header-info,
    #sub-header-wrapper #twitter-link {
        display: none;
    }
    #main_menu {
        width: 100%;
    }
    #main {
        width: 100%;
    }
    footer {
        text-align: center;
        width: 100%;
    }

    .homepage .col-md-6:nth-child(2) {
        padding: 0;
    }
    .homepage .col-md-6:last-child {
        padding: 0;
    }
    .homepage .col-md-3 {
        padding: 0;
    }

    /* Area database
    ------------------*/
    #areadata-form .col-md-8,
    #areadata-form .col-md-9 {
        padding-left: 30px;
    }
    #country-dropdown .dropdown-menu,
    #add_indicator_container .dropdown-menu {
        width: auto;
        max-height: 350px;
        overflow: auto;
    }
    #control_indicator button {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #control_indicator .multiselect-selected-text,
    #add_indicator_container .multiselect-selected-text {
        display: inline-block;
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #add_indicator_container {
        white-space: normal;
    }

    .interpolation_notice {
        display: none;
    }
    #areadata_header > div.buttonstrip {
        display: none;
    }
    #areadata_header > h4 {
        margin: 0;
    }
    .country .buttonstrip {
        display: none;
    }

    #control_toggle_advanced {
        display: block;
    }
    #toggle_advanced {
        background-color: #fff;
    }
    .form-group.advanced {
        display: none;
    }

    .single #control_countries,
    .multiple #control_indicators {
        padding-bottom: 10px;
    }
    #control_group_order {
        border-top: 3px solid #fff;
        padding-top: 20px;
    }
}