/* 'People of the Nile' designed and developed by David Bihanic and Thibault Jaillon -- ©2014 -- built with D3.js */


/* Drop down menu */

#menu a { 
	display:block; 	
	text-decoration:none;
}

#menus {  
    cursor: pointer;    
    z-index: 1000000;
    width: 100%;
    position: relative;
    /*border: 1px dashed #FFF;*/
    margin: 0px auto;
    text-align: left;    	
}

#toggle {
    font-size: 1.2rem;
	font-family: "niveaugrotesklight";
    padding-left: 0;
    color:white;
    margin-left: 20px;
    margin-right: 20px;
    text-align:left;
}

#toggle > ul li {        
    position: relative;
	float: left;    
    margin-right: 30px;
    padding: 5px 0px;
}

#menu {    
    font-size: 1.2rem;
	font-family: "niveaugrotesklight";
	text-align:left;
	padding-left: 0;
}

.menudata {
	position: relative;
	display:inline-block;
	list-style: none;
	color:white;
	line-height: 1.05rem;
	width: 300px;
	padding: 5px 10px;
	text-align: left;
}

.menucountries {
    width: 150px;  
    position: relative;
	display:inline-block;
	list-style: none;
	line-height: 1.05rem;
	color:white;	
	padding: 5px 10px;
	text-align: left;
}

#menu > li { zoom:1;}
#menu > li li { background: transparent none; }
#menu > li li a { color: white; }
#menu > li li a:hover { color:#fab7b4; }

#menu ul {
	position: absolute;    
	top: 2.2em; left:0;
    
	max-height:0em;    
	margin:0; padding:0;
    
    /*
    overflow:hidden;
	-webkit-transition: 1s max-height 0.3s;
	-moz-transition: 1s max-height 0.3s;
	-ms-transition: 1s max-height 0.3s;
	-o-transition: 1s max-height 0.3s;
	transition: 1s max-height 0.3s;
    */
    //background: rgba(255,100,100,100);
    //background: -moz-linear-gradient(rgba(255,100,100,0), rgba(255,100,100,1)); /* FF3.6+ */	
	//background: -webkit-linear-gradient(rgba(255,100,100,0),rgba(255,100,100,1)); /* Chrome10+,Safari5.1+ */
	//background: -o-linear-gradient(rgba(255,100,100,0),rgba(255,100,100,1)); /* Opera 11.10+ */
	//background: -ms-linear-gradient(rgba(255,100,100,0),rgba(255,100,100,1)); /* IE10+ */
	//background: linear-gradient(rgba(255,100,100,0),rgba(255,100,100,1)); /* W3C */
}

#menu>li>ul>li {
    font-size: 1.0rem;    
}

#menu>li>ul>li:hover {    	
    text-decoration: underline;
}

#menu>li:hover ul {
	max-height:100em;
}

.ie7 #menu > li {
	display: inline;
	zoom:1;
}

#datavis {    
    position: relative;    
    /*border: 1px dashed #FFF;*/
    margin: 300px auto;
    text-align: center;
    height: 1200px;
	width: 90%;    
}

#countries {
    position: absolute;
    margin-top: 70px;      
    margin-bottom: 500px;
    width: 100%;    
}

.base {
    box-shadow: 1px 1px 1px 12px rgba(0, 0, 0, 0.03);   
}

.country_name {
    position: absolute;
    font-size: 1rem;
    color: white;
    text-shadow: 1px 1px 5px #888888;
    font-family: "niveaugroteskbold";
	text-align:center;    
}

.country_legend {
    position: absolute;
    font-size: 1rem;
    color: white;
    text-shadow: 1px 1px 5px #888888;
    font-family: "niveaugrotesklight";
	text-align:left;    
}

.country_legend1 {    
    font-size: 1rem;
    font-family: "niveaugroteskbold";    
}

.country_legend2 {
    width:100px;
    font-size: 0.9rem;
    font-family: "niveaugroteskbold";    
}
.country_legend3 {
    width:100px;
    font-size: 0.8rem;
    font-family: "niveaugroteskbold";    
}
.country_legendwomen {
    width:180px;
    font-size: 1.4rem;
    line-height: 1.2rem;
    text-align: right;
    font-family: "niveaugroteskbold";    
}
.country_legendwomen_location {    
    font-size: 1.1rem;
    text-align: right;
    font-family: "niveaugrotesklight";    
}


#sch_legend_1 {
	height: 150px;
	width: 150px;
}

.circle {    
	position: absolute;
	height: 150px;
	width: 150px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius:50%;    
	/*border:1px solid white;*/
}

#circle_1_1 {
	position: absolute;
	height: 148px;
	width: 148px;
	-moz-border-radius: 74px;
	-webkit-border-radius: 74px;
	border-radius:74px;
	border:1px solid white;
}

#circle_1_2 {
	position: absolute;
	height: 122px;
	width: 122px;
	margin-left: 12px;
	margin-top: 12px;
	-moz-border-radius: 61px;
	-webkit-border-radius: 61px;
	border-radius:61px;
	border:1px solid white;
}

#circle_1_3 {
	position: absolute;
	height: 96px;
	width: 96px;
	margin-left: 12px;
	margin-top: 12px;
	-moz-border-radius: 48px;
	-webkit-border-radius: 48px;
	border-radius: 48px;
	border:1px solid white;
}

#circle_1_4 {
	position: absolute;
	height: 70px;
	width: 70px;
	margin-left: 12px;
	margin-top: 12px;
	-moz-border-radius: 35px;
	-webkit-border-radius: 35px;
	border-radius:35px;
	border:1px solid white;
}

#circle_colors {
	height: 45px;
	width: 300px;
}

#circle_color_1 {
	float: left;
	height: 42px;
	width: 42px;
	-moz-border-radius: 21px;
	-webkit-border-radius: 21px;
	border-radius:21px;
	margin-right: 8px;
	background-color:#d34b4b;
}

#circle_color_2 {
	float: left;
	height: 42px;
	width: 42px;
	-moz-border-radius: 21px;
	-webkit-border-radius: 21px;
	border-radius:21px;
	margin-right: 8px;
	background-color:#0cd3ce;
}

#circle_color_3 {
	float: left;
	height: 42px;
	width: 42px;
	-moz-border-radius: 21px;
	-webkit-border-radius: 21px;
	border-radius:21px;
	margin-right: 8px;
	background-color:#f33df2;
}

#circle_color_4 {
	float: left;
	height: 42px;
	width: 42px;
	-moz-border-radius: 21px;
	-webkit-border-radius: 21px;
	border-radius:21px;
	margin-right: 8px;
	background-image: url(../img/portrait.jpg);
	background-size: 42px 42px;
}

#circle_color_5 {
	float: left;
	height: 42px;
	width: 42px;
	-moz-border-radius: 21px;
	-webkit-border-radius: 21px;
	border-radius:21px;
	margin-right: 8px;
	background-color:#7cd30b;
}

#circle_color_6 {
	float: left;
	height: 42px;
	width: 42px;
	-moz-border-radius: 21px;
	-webkit-border-radius: 21px;
	border-radius:21px;
	background-color:#f9f901;
}

#rivers_labels {
	margin:0 auto;
	height: 45px;
	width: 1600px;
	line-height: 2.9rem;
	font-size: 1.3rem;
	text-align: left;
	color: white;
	font-family: "niveaugrotesklight";
}


.country {
    position: absolute;
}


/*
##########################################################################
##########################################################################
For 1200px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 1950px) {

/* Structure */

#datavis {
	height: 1100px;
}

}

/*
##########################################################################
##########################################################################
For 1685px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 1685px) {

/* Structure */

#datavis {
	height: 900px;
}
    
.menudata {
	width: 280px;	
}

.menucountries {
    width: 150px;      
}

}

/*
##########################################################################
##########################################################################
For 1280px or less 
##########################################################################
##########################################################################
*/

@media screen and (max-width: 1280px) {

/* Structure */

#datavis {
	height: 700px;
}

#toggle{    
    font-size: 1.1rem;
}
    
#menu {    
    font-size: 1.1rem;
}
    
.menudata {
	width: 250px;	
}

.menucountries {
    width: 120px;      
}
    
#menu>li>ul>li {
    font-size: 1.0rem;    
}
        
.country_name {    
    font-size: 1.1rem;
}

.country_legend {
    font-size: 1.1rem;
}

.country_legend1 {  
    font-size: 1.1rem;
}

.country_legend2 {
    font-size: 1.1rem;
}
    
.country_legend3 {
    font-size: 1.0rem;
}

}


/*
##########################################################################
##########################################################################
For 1024px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 1024px) {

/* Structure */

#datavis {
	height: 600px;
}
    
#toggle{    
    font-size: 0.9rem;
}

#menu {    
    font-size: 0.9rem;
}
    
#menu>li>ul>li {
    font-size: 0.9rem;    
}
    
.menudata {
	width: 210px;	
}

.menucountries {
    width: 80px;      
}
    
.country_name {    
    font-size: 0.9rem;
}

.country_legend {
    font-size: 0.9rem;
}

.country_legend1 {  
    font-size: 0.9rem;
}

.country_legend2 {
    font-size: 0.9rem;
}
    
.country_legend3 {
    font-size: 0.8rem;
}
    
    
}


/*
##########################################################################
##########################################################################
For 700px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 850px) {

#datavis {
	height: 500px;
}
 
#toggle{    
    font-size: 0.8rem;
}
    
#menu {    
    font-size: 0.8rem;
}
    
#menu>li>ul>li {
    font-size: 0.8rem;    
}
    
#toggle > ul li {            
    margin-left: 15px;    
}

.menudata {
	width: 180px;	
}

.menucountries {
    width: 70px;      
}
        
.country_name {    
    font-size: 0.8rem;
}

.country_legend {
    font-size: 0.8rem;
}

.country_legend1 {  
    font-size: 0.8rem;
}

.country_legend2 {
    font-size: 0.8rem;
}
    
.country_legend3 {
    font-size: 0.7rem;
}
    
}

/*
##########################################################################
##########################################################################
For 700px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 750px) {

#datavis {
	height: 400px;
}


#toggle{    
    font-size: 0.7rem;
}
    
#menu {    
    font-size: 0.7rem;
}
    
#menu>li>ul>li {
    font-size: 0.7rem;    
}
    
.menudata {
	width: 160px;    
}

.menucountries {
    width: 50px;     
}
    
.country_name {    
    font-size: 0.7rem;
}

.country_legend {
    font-size: 0.7rem;
}

.country_legend1 {  
    font-size: 0.7rem;
}

.country_legend2 {
    font-size: 0.7rem;
}

.country_legend3 {
    font-size: 0.7rem;
}
    
}


/*
##########################################################################
##########################################################################
For 480px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 480px) {

#datavis {
	height: 280px;
}
    
.menudata {
	width: 160px;	
}

.menucountries {
    width: 50px;      
}


}