@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700, 900";
@import "https://fonts.googleapis.com/css?family=Open+Sans:100,400,300,500,600,700";

img {max-width:100%;}
.indicator-definition img { height:auto!important;}

input[type=image] {border: solid 0px #e5e5e5; max-width:100%; height:auto; }

:root {
  --graph1: #555;
  --graph2: #666;
  --graph3: #333;

  --nav-main:  #1E2978; 
  --nav-secondary: #1E2978; 
  --sub-nav: #666;

  --header1color: #333; 
  --header2color: #68979B;
  --header3color: #68979B;

 --logoGreen: #39b04a; 

 --primaryBlue: #1E2978;
 --primaryYellow: #F2DB1D;
}


/********************** common styles ******************************/


body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; line-height:150%; color:#333; font-size:14px; margin:0px; padding: 0px; margin-top:10px;}
h1 { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:400; color: var(--header1color); font-size:30px; margin-top:0px; }
h2, h2 a:link, h2 a:visited { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:500; color: var(--header2color); text-decoration:none; margin-top:0px; margin-bottom: 5px;}
h3, h3 a:link, h3 a:visited { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:500; color: var(--header3color); text-decoration:none; font-size:20px;}
a { color: #68979B; }
h6 { font-family: 'Roboto', Arial, Helvetica, sans-serif;  font-size:12px; font-weight:400; line-height:1.1; margin:10px 0px;}
table, th { border: 1px solid #666;  border-collapse: collapse;}
td, th { padding: 3px; }

.container { display: grid; grid-template-rows: auto 1fr auto; }
.header { grid-area:header; background-color:#fff; margin-bottom:30px; }
.body { grid-area:body;}

.home-top { display:grid; grid-template-rows: 1fr auto; grid-column-gap:20px; }
.home-title { width:auto; border-bottom: solid 7px var(--logoGreen); width: fit-content; padding-bottom:15px; padding-right:40px;}

.home-flash { background-color: #D9EDF7; border-radius: 3px;padding: 15px; margin-bottom:20px; text-align: center; font-size:85%}  /* background-image: url('../images/New@2x.png'); background-repeat: no-repeat; background-size: 70px;  */
.home-flash-pic { min-width: 40%;}
.home-flash h3 { margin-top:0px; margin-bottom:7px;}
.home-flash a:link { text-decoration:none; }
.footer { grid-area: footer; border-top: 1px solid #e5e5e5; padding:20px; background-color:rgb(250, 250, 250); }
.footer-logos {max-height: 4rem;}
.copyright { display:grid; grid-template-columns: auto auto auto auto auto auto auto auto; margin-top: 30px; border-top: solid 1px #e5e5e5; padding-top:20px;}

.domain-icon { max-width:35px; margin-right: 0.5em; }
.home-domains .synopsis, .domain-indicators .synopsis { margin-bottom:10px; }
.home-domains .more-button { margin-bottom:20px; }
.home-top, .home-domain { margin-bottom:20px; }
.domain-border { border-bottom: 1px solid #ccc; }

.more-button {color: var(--header2color); border: solid 1px var(--header2color); border-radius: 5px; text-decoration:none; padding:3px 5px; font-size: 90%; display:inline-block; max-width: auto; }

.tab-group { background-color: #f5f5f5; border-bottom: 1px solid #ddd; overflow:hidden;}
.tab-group > div {  padding:10px 15px; float: left; cursor:pointer; }
.tab-group a { text-decoration: none; }
.graph-dropdowns > select { padding:5px; margin: 10px 10px 15px 0px; }
.graph-dropdowns option {font-size:15px; }

.graph-tab { background-color:inherit; border:none}
.graph-tab-active { display:block; z-index:1000; background-color:#fff; border: solid 1px #ddd; border-bottom-color:transparent;  border-radius:5px; margin-bottom: -2px;}

#theMap {height:700px;width:auto;border:solid 1px #999;}

.nav-main { margin: 0 0 0 0em; padding:0px; list-style-type: none; line-height:200%; }
.nav-item {   color: var(--nav-main);  }
.nav-item:before {font-size:70%; content: "\25BA"; margin-right:5px; position:relative; top:-2px; }
.nav-item a:link, .nav-item a:visited { color: var(--nav-main); text-decoration:none; } 
.nav-secondary  { padding:0px; margin:0px; list-style-type: none; line-height:200%;}
.nav-secondary a:link, .nav-secondary a:visited {color: var(--nav-secondary); text-decoration:none; } 
.nav-element { }

.nav-active, .nav-active a:link, .nav-active  a:visited { color:var(--nav-main); text-decoration:none; }
.nav-active:before { content:  "\25BC"!important; margin-right:5px; font-size:79%; position:relative; top:-1px; }
.sub-nav { margin-left:20px; font-size:12px; }
.sub-nav, .sub-nav a:link, .sub-nav a:visited {color: var(--sub-nav);  text-decoration:none; }


.sub-nav a { display: inline-block; line-height: 1.4; padding: 5px 0px;}



a:link .fact1, a:visited .fact1 { color: var(--header2color); text-decoration:none; font-size: 30px; font-weight: 900; margin-bottom:5px;}
a:link .fact2, a:visited .fact2 { color: var(--header2color); text-decoration:none; font-size: 18px; }
a:link .fact3, a:visited .fact3 { color: var(--header2color); text-decoration:none; font-size: 12px; }


.domain-name { margin-bottom:20px; }
.domain-intro { margin-top:0px; margin-bottom: 20px; }
.domain-indicators-fact a:link, .domain-indicators-fact a:visited { text-decoration:none; }
.domain-indicators-fact { margin-bottom: 20px; }
.domain-indicators { padding-bottom:20px; margin-bottom: 20px; }
.domain-indicators:not(:last-child) {  border-bottom: solid 1px #e5e5e5; }
.download-button { height:18px!important; }
.rights-framework {  margin-bottom:30px; }
.rights-framework a:link, .rights-framework a:visited { text-decoration:none;}

.indicator-header { font-family: 'Roboto', Arial, Helvetica, sans-serif; background-color: #e5e5e5; padding:10px; font-weight:400; font-size:22px; margin-bottom:10px; }
.indicator-header.data { margin-bottom:20px; }
.indicator-content-block { margin-bottom:20px; }
.indicator-panel { background-color: #f5f5f5; border:solid 1px #ddd; border-radius: 4px; padding:15px; margin-bottom:20px;}
.indicator-data { margin-bottom:20px; }

.graph-source, .graph-notes { font-size: 11px; margin-bottom:10px; display:grid; grid-template-columns: 1fr 7fr; grid-column-gap:20px; }
.graph-source h5, .graph-notes h5,{ margin:0px; font-size:11px; }
.graph-source { border-bottom: solid 1px #e5e5e5; padding-bottom:10px; }
.graph-notes ol { margin:0px; padding-left:10px; }
.small-head { font-weight:bold; }

.panel-head { font-weight:700; margin-bottom:0px; position:relative; }
.panel-head:after { content: "\2304";  position: absolute;  right: 5px; top: 30%; transform: translateY(-50%); font-size:20px; }
.panel-head-active { font-weight:700; margin-bottom:0px; position:relative; }
.panel-head-active:after { content: "\2303";  position: absolute;  right: 5px; top: 50%; transform: translateY(-50%);  }

.panel-link { text-decoration:none; color:#000; }
#panel1, #panel2, #panel3 { display:none; margin-top:20px; }


.contributor { display: grid; grid-template-columns: 1fr 4fr; grid-column-gap: 20px; }
.contributor:not(:last-child) { border-bottom: solid 1px #e5e5e5; padding-bottom:20px; }


.social-grants { background-color:var(--primaryYellow); padding:12px 15px; text-decoration:none; border-radius: 15px; text-align:center;}
.social-grants h4 { text-transform:uppercase; font-size:14px; color:#404040; margin:0px; margin-bottom:2px; font-weight:400; letter-spacing:4px; }
.social-grants h2 { font-weight:500; margin: 0px; color:#404040; }
.no-underline { text-decoration: none; }


.grants-table {border:solid 1px black; border-collapse: collapse; }
.grants-title { padding:10px 15px;}
.grants-head { background-color:#AECAC4; border-bottom:1px solid black; align-content: center; }
.grants-head h2 { color: black; }
.grants-head h3 { color: black; text-align:center; font-size:16px;}
.grants-title h3 { color: black;font-size:16px; margin:0px;}
.grant-value { text-align:center; padding:5px; align-content:center; }
.grant-value h4 { margin:0px; }
.sub-text { font-size:90%; }
hr.content-divider { border:0px; border-top: 1px solid #ccc; margin: 20px 0px 20px 0px;}
.bottom-border { border-bottom: 1px solid #999; }


/********************** mobile styles ******************************/

.nav-large { display:none; }
.side-nav { display:none; }

.nav-small {  overflow: hidden;  position: relative;}
.nav-small #navLinks {  display: none; } 
.nav-small a.icon {  display: block;  position: absolute;  right: 10px;  top: 10px;}
.logo {  background-color: #f8f8f8;  color: white; border-bottom: solid 1px #e7e7e7; padding:10px; }
.logo img { max-height:70px; }
.nav-links { background-color:#f8f8f8; padding:10px;border-bottom: solid 1px #e7e7e7; line-height:250%; }
.nav-links li { border-bottom: 1px solid #e5e5e5; }
.nav-img { display:grid; grid-template-columns:1fr 1fr; grid-column-gap:20px;margin-top:20px; }
.nav-img img {  max-height:70px;  }

.container { grid-template-areas: "header" "body" "footer"; }
.body { padding: 0px 20px; }
.footer {display:grid; grid-template-rows: auto auto auto; }
.footer img { max-height:40px; margin-right:30px; }



/********************** desktop styles ******************************/


@media (min-width: 1024px) {

  .container { max-width:1080px; margin: 0 auto; grid-template-columns: 1fr 3fr; grid-column-gap:40px; grid-template-areas: "header header" "sidebar body" "footer footer";}
  

  .nav-large { display:grid; grid-template-columns: 1fr auto auto; grid-column-gap: 30px; padding:0px;}
  .nav-element { font-size: 12px;  padding:0px 5px;}
  .nav-element:hover, .nav-element:hover a {background-color:var(--nav-main); color:white;}
  
  .cc-logo { height:100px; }
  .ci-logo, .uct-logo { display: flex; align-items: center; }
  .ci-logo img, .uct-logo img { height:40px; }


  .body {border:solid 0px blue; padding:0px; margin-bottom:50px;}
  .nav-small {display:none;}
  .home-top { grid-template-columns: 2fr 1fr; grid-column-gap:20px; }
  .home-intro { margin-bottom:30px; }
  .footer { border:none;  }
  .footer img.social-logo { display: inline; max-height: 25px; border-radius: 3px; opacity: 0.3; margin-right: 10px; }
  .footer h6 { margin-top:0px; }
  .copyright { display:grid; grid-template-columns: auto  1fr; grid-column-gap:60px; }

  .side-nav { display:block; padding:10px; height:inherit; padding-top:20px;background-color:rgb(250, 250, 250); margin-bottom:30px;}

  .home-domains { display:grid; grid-template-columns: 1fr 1fr; grid-column-gap: 20px; }
  .home-flash { display:block; }
  .home-flash-pic {border: solid 1px purple; max-width:100%; }


  .domain-indicators { display:grid; grid-template-columns: 1fr 3fr; grid-column-gap: 20px;}
  .domain-indicators-fact { text-align: center; display: grid; place-items: center; margin:0px; }



  .search-box {margin: 25px 0px; }
  .search-box input { border:solid 1px #ccc;padding:5px; }

  .footer {display:grid; grid-template-areas: "current previous" "copyright copyright"}
  .footer img { max-height:40px; margin-right:20px; }
  .current-supporters { grid-area: current; }
  .previous-supporters { grid-area: previous; }
  .copyright { grid-area: copyright; }

}