/* This needs to be it's own chunk because post-global-morality.css needs to use some of these styles */

.singular .social {
float:right;
}
body .holder,
#sidebar {
font-family:helvetica,arial,sans-serif;
}
body .hide-if-js {
display:none;
}
.no-js .hide-if-js {
display:block;
}
#indicators-database-content {
width:700px;
min-height:450px; /* The about page is too short. Rolling over nav drop downs causes scrollbars to show. EDIT: Disabled on morality interactive */
padding:0 0 10px;
border:0 none;
float: right;
}
div#indicators-database-content p {
	font-size:1.3em;
	line-height:1.5;
	margin-bottom:1.3em;
}
/*div#indicators-database-content li {
	font-size: 1.3em;
}*/
#full-width-content {
clear:both;
}
.two-column {
float:left;
width:48%;
margin-right:2%;
}
.three-column {
float:left;
width:31%;
margin-right:2%;
}
.two-column ul,
.three-column ul {
padding-left:0;
}
.two-column li,
.three-column li {
list-style:none;
padding: 7px 0;
font-size: 1.3em;
}

.subnav {
padding-left:0;
margin:30px 0;
}
.subnav li {
float: left;
font-size: 0.9em;
list-style:none;
position:relative;
color: #333;
}
.subnav > li {
width: 25%;
}
.subnav a {
border-bottom: 1px solid #aaa;
display: block;
height: 23px;
line-height: 24px;
padding-left: 0;
text-decoration: none;
text-transform:uppercase;
width: 100%;
text-align:center;
color:#333;
}
.subnav a:hover,
.subnav li:hover > a,
.subnav li.hover > a {
background-color:#ccc;
color: #fff;
}
.subnav .active a {
border-color: #AAAAAA #AAAAAA -moz-use-text-color;
border-style: solid solid none;
border-width: 1px 1px 0;
font-weight: bold;
}
.subnav ul {
display: none;
padding-left:0;
}
.subnav li:hover > ul,
.subnav li.hover > ul {
display: block;
}
.subnav .children {
position:absolute;
z-index:99;
}
.subnav .children ul {
left:100%;
top:0;
}
.subnav .children li {
float:none;
margin-bottom:0;
}
.subnav .children a {
background-color:#eee;
border:0 none;
border-bottom:1px solid #aaa;
color:#000;
font-size:120%;
font-weighT:bold;
padding:5px 10px;
text-align:left;
text-transform:none;
line-height:1.3;
height:100%;
width:192px;
}
.subnav .children li:hover .children a,
.subnav .children li.hover .children a {
background-color:#eee;
color:#000;
}
.subnav .children li:hover a,
.subnav .children li.hover a,
.subnav .children li:hover .children a:hover,
.subnav .children li.hover .children a:hover {
background-color:#aaa;
color:#fff;
}

div.options {
border-top:1px solid #ccc;
padding-top:10px;
margin-top: 5px;
position:relative;
}

.options ul {
float:right;
margin-bottom:15px;
text-align: initial;
}
.options li {
display: inline;
font-size:1em;
list-style-type: none;
padding: 0 3px;
color: #000;
}
.options .active  {
color: #C60;
font-weight: bold;
}
.options .map {
position:absolute;
right:0;
top:-23px;
}
ul.legend {
clear:both;
margin-bottom:0;
padding-left:0;
display: flex;
flex-direction: row;
}
.legend img {
width:8px;
height:8px;
}

/* Home */
.view-home #map {
width:100%;
height:360px;
margin-bottom:15px;
}

/* jVector Map */
.jvectormap-label {
position: absolute;
display: none;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
font-size:1.4em;
padding:5px 8px;
}
.jvectormap-zoomin,
.jvectormap-zoomout {
position: absolute;
left: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
padding-top: 0px;
padding-left: 1px;
padding-bottom: 0px;
padding-right: 0px;
color: white;
width: 12px;
height: 12px;
cursor: pointer;
line-height: 10px;
text-align: center;
}
.jvectormap-zoomin {
top: 10px;
}
.jvectormap-zoomout {
top: 30px;
}
jvectormap-element {
cursor:pointer;
}

/* Content */
#updated-data {
background-color: #000;
color: #fff;
font-size: 1.2em;
line-height: 1.2;
margin:0 auto;
padding: 7px 0;
text-align: center;
text-transform: uppercase;
}
#indicators-database-content h1 {
font-family: "franklin-gothic-urw",Verdana,Geneva,sans-serif;
font-size: 2.6em;
font-weight: 700;
line-height: 1.25;
}
h2 {
font-size: 1.6em;
font-weight: 700;
line-height:1.25;
padding-bottom: 4px;
font-family: "franklin-gothic-urw",Verdana,Geneva,sans-serif;
}
#indicators-database-content h2 {
padding-top:15px;
}
h2.question {
font-size: 2em;
color: #C60;
}
h3 {
font-size: 1.6em;
font-family: "franklin-gothic-urw",Verdana,Geneva,sans-serif;
padding: 15px 0;
line-height: 130%;
}
#sidebar h3 {
font-weight:700;
line-height: 100%;
}
.about h1 {
margin-bottom:15px;
}


/* General Table Styles */
table {
border-collapse:collapse;
padding:0;
width:100%;
margin-bottom:35px;
}
table a {
display:block;
}
th,
td {
text-align:center;
}
th {
vertical-align:bottom;
font-size:1.1em;
border-bottom:1px solid #666;
color:#333;
padding:5px 0;
font-weight:normal;
text-transform:uppercase;
background-color:#fff;
}
th a {
background-repeat:no-repeat;
background-position:center right;
}
th .asc {
background-image:url(/wp-content/themes/pew-global/img/indicators-db/sort-arrow-asc.gif);
}
th .desc {
background-image:url(/wp-content/themes/pew-global/img/indicators-db/sort-arrow-desc.gif);
}
th.percentage a {
padding-right:5px;
}
td {
padding:5px 4px;
border-bottom:1px solid #ccc;
font-size:1.2em;
vertical-align: middle;
}
td a {
color:#2a5571;
text-decoration:none;
}
td a:hover,
td a:focus {
color:#999;
}
table .country,
table .issues {
text-align:left;
width:20%;
}
td.country,
td.issues {
font-weight:bold;
}
td.percentage {
width:5%;
font-weight:bold;
}
table .active {
background-color:#eee;
}
div.stickyHeader {
top:0;
position:fixed;
_position:absolute;
}
.admin-bar .stickyHeader{
top:28px;
}

/* Horizontal Chart */
#indicators-database-content .chart .bar img {
display:block;
height:15px;
}

/* Map View */
.view-indicators-map table {
float:left;
width:25%;
margin-right:2%;
}
.view-indicators-map #map {
float:left;
width:73%;
height:300px;
}
table .gt74 {
background-color:#462300;
color:#fff;
}
table .gt49 {
background-color:#CC6600;
color:#fff;
}
table .gt24 {
background-color:#D3985E;
}
table .lt25 {
background-color:#E3C2A1;
}


/* Sidebar */
#sidebar {
margin: 0 50px 40px 0;
padding:0;
width: 205px;
}
#other-asked-questions {
margin-bottom:25px;
}
#sidebar .seperate {
border-top: 5px solid #000;
padding: 10px 0 0;
}
#sidebar .topics ul {
margin: 0;
padding: 0 0 10px;
border-bottom: 1px dotted #888;
}
#sidebar .topics li {
list-style-type: none;
font-size:1.2em;
line-height:1.4;
}
#sidebar .topics li a {
color:#000;
cursor:pointer;
}
#sidebar .topics li:hover {
background-color:#F0F0E6;
}
#sidebar .topics li:hover a {
color:#000;
text-decoration:none;
}
#sidebar .topics .active {
background-image: url(/wp-content/themes/pew-global/img/indicators-db/orange-arrow-large.gif);
background-repeat:no-repeat;
background-position:top 9px right 7px;
color: #c60;
font-weight: bold;
padding: 7px 26px 7px 7px;
background-color:#f2f2f2;
}
#sidebar .topics .active a {
padding: 0;
color: #BC7B2B;
}
#sidebar .topics .active:hover {
background-color:#f2f2f2;
}
#sidebar .topics li a {
display: block;
padding: 7px 7px;
}
.about-box {
padding: 10px;
background: #EEE;
font-size:1.3em;
line-height:1.5;
margin-bottom:1.3em;
}
#sidebar .question,
#sidebar .notes {
padding-top:15px;
font-size:1.3em;
line-height:1.5;
}

.group-info {
border-bottom: 1px dotted #888;
padding-bottom:15px;
}
.group-info h2 {
font-size:2.6em;
font-weight: bold;
color:#000;
}
#indicators-database-content .label,
#sidebar .label {
color: #999;
font-size: 1.1em;
margin-bottom: 5px;
}
.flag img {
}
.flag {
text-align: center;
background: #EEE;
margin-bottom: 10px;
border-radius: 11px;
}
.group-info select {
width: 100%;
font-size: 1.4em;
padding: 5px;
height: auto;
}

/* Custom Analysis */
.custom-analysis-countries label {
display:block;
cursor:pointer;
font-size:1.4em;
padding:5px 0;
}
.custom-analysis-countries label img {
vertical-align:middle;
}


@media (max-width: 999px) {
	#sidebar {
		width:100%;
		margin-left: auto;
		margin-right: auto;
	}
	.two-column-reversed #sidebar,
	.three-column #sidebar {
		float: none;
	}
	#sidebar .topics .active {
		background-image: none;
		background: #EEE;
	}
	#sidebar .topics li {
		padding-right: 0;
	}
	#sidebar .topics li a,
	#sidebar .topics .active {
		padding: 15px;
		border-top:1px dotted #ccc;
	}
	#indicators-database-content {
		border-bottom: 1px dotted #000;
		margin-bottom: 30px;
		width: 100%;
	}
}
@media (max-width: 999px) and (min-width: 650px) {
	#sidebar .topics li {
		width: 50%;
		float: left;
	}
	#sidebar .topics .active {
		width:48%;
		padding: 15px 1%;
	}
	#sidebar h3 {
		clear:both;
	}
	.topics ul {
		overflow:auto;
	}
}
@media (max-width: 650px) {
	/* We just won't send people on mobile to the map */
	ul.map {
		display:none;
	}
}
@media (max-width: 600px) {
	/* We just won't send people on mobile to the map */
	.subnav {
		border-top: 1px solid #ccc;
	}
	.subnav li {
		width:50%;
	}
	.subnav > li:hover ul {
		display:none;
	}
	.subnav .active > a,
	.subnav > li > a {
		border-width: 0;
		border-bottom: 1px solid #ccc;
		font-size: 1.2em;
		height: 40px;
		line-height: 40px;
	}
}
