/*
Theme Name: AHS20
Text Domain: ahstheme
Template: ahs20
Author: Jordan Chatwin, Conor Maxwell
Author URI: http://conormaxwell.com
Description: AfricanHealthStats Phase 2.2
Version: 1.0
*/
/* 3 Feb 2014 ahstheme01 : from aitheme11 (which in turn from twentytwelve)
* 9 Feb 2014 AHS01 :
* 11 Feb 2014 and many changes , panels etc
* 12 Feb 2014 AHS02 (wireframe v3 from Jordan)
* 13 Feb 2014 many, for wireframe delivery, chart page
* 14 Feb 2014 change date panel to format panel
* 18 Mar 2014 AHS03, switch front end from FusionCharts to HighCharts and HighMaps
* 26 Mar 2014 AHS04 : Jordan's V2 design (home page and country page)
* 30 Mar 2014 V2 continued (indicator page)
* 5 Apr 2014 V2 selection panel
* 25 Apr 2014 AHS05: Jordan's V7 design
* 29 Apr 2014 Country page
* 30 Apr 2014 Indicator page
* 5 May 2014 Chart page
* 10 May 2014 Selection panel
* 11 May 2014 diagdiv length
* 12 May 2014 remove blue border around data_country_tablediv and indicator table in Chrome
* 12 May 2014 add multichart page (mchart...)
* 13 May 2014 chart format warnings etc
* 16 May 2014 use Lato 300 for h2 headings
* 21 May 2014 bigger .bigmap width on country landing page
* 14 Jun 2014 Header changes (Jordan feedback)
* 17 Jun 2014 Stats icons (selection panel)
* 18 Jun 2014 Indicator tool tip
* 24 Jun 2014 indicator landing page (hoverarrow and hovermask etc)
* h2,h3,h4 changes (Jordan 11jun)
* 26 Jun 2014 v8 changes (data panel)
* 27 Jun 2014 About page (fixed text), footer border-top
* 28 Jun 2018 About page, dynamic text
* 29 Jun 2014 Tooltipdiv needs to be above footer border-top (indicator landing page)
* 5 Jul 2014 AHS09: Jordan's v9 designs
* 6 Jul 2014 new Home page layout
* 8 Jul 2014 Selection panel on all pages, start invisible
* 9 Jul 2014 Selection panel, move h2's up, new close icon
* 10 Jul 2014 make closelink fixed. Home page: indicator div
* 11 Jul 2014 home page : country div (homeleftdiv), and moved general classes to end (precedence)
* 12 Jul 2014 home page topchart area
* 13 Jul 2014 country page v9 layout, indicator page v9
* 15 Jul 2014 chart page v9,
* 17 Jul 2014 chart page tips area, centralise menudiv, chart buttons on single indi page
* 20 Jul 2014 single country page buttons, contact page,
* add styles for FastSecureContactForm plugin
* 21 Jul 2014 contact page sidebar
* 23 Jul 2014 download dropdown menu
* 25 Jul 2014 changes with Jordan
* 29 Jul 2014 changes after Jordan session: home page, chart page, country page
* 30 Jul 2014 ditto: indicator page, about page
* 31 Jul 2014 ditto: contact page, inc africamap size on countrylanding page,
* sharethis div (and change containerdiv padbottom from 20px to 3, cos of sharethis
* 1 Aug 2014 countrypage:sharethis div; select panel chart icons;
* 2 Aug 2014 header: margin around stats icon, chartinfotable, chartinfosubtable
* 3 Aug 2014 reduce sprites to 100% size for IE8, smaller greencircle
* 4 Aug 2014 logo image ( not bkgd), send button in fscf form
* 14 Aug 2014 fallback font Arial etc (for IE8)
* 15 Aug 2014 countrysingle: move middlecountrydiv mychartdiv down
* 16 Aug 2014 chart download button sprite
* 28 Aug 2014 indicator summary def close button (summaryclose)
* 2 Sep 2014 cursor pointer for switchbuttons, send button (fscf_button_submit), hidebutton (maps)
* 3 Sep 2014 homecharticon - change tooltips, agreenbutton (restrict width), timeline colours
* 22 Sep 2014 languagediv buttons (french now active)
* 17 Oct 2014 alternative sources on indicator page etc (under countries with no data)
* 18 Oct 2014 alternative data sources on chart pages (alongside source)
* incr ht of middlecountrydiv (cos overlapping with new chartinfotable on countrypage)
* 26 Oct 2014 add Template: ahs10 to avoid 'theme broken' (not needed, it was lack of index.php ?)
* 6 Nov 2014 various layout changes for French alignment, and chartinfotable
* 7 Nov 2014 indi landing page: vert alignment of top, cope with long (wrapped) lines
* select panel (selectlist) cope with long wrapped lines
* 8 Nov 2014 indicator landing page: prevent flicker if mouse over hoverarrowdiv (line 1010/1095)
* 10 Nov 2014 indic landing page : hovermaskdiv width 1px (was 10) to minize flicker
* 12 Nov 2014 footer: fix problem if reduce width
* 13 Nov 2014 footer: language buttons
* 16 Nov 2014 header language buttons need hand pointer
* 17 Nov 2014 change all s to 26px and s to 20px, homecentredtop wider so no orphan
*
* Phase 2.1
* 30 Apr 2016 add homelatestnews div
* 1 May 2016 add morenews (latestnews expansion)
* 2 May 2016 z-index of latestnews less than #datapanel
* 10 May 2016 #scrolldowndiv now absolute, not in indicator page subtitle (for printing)
* and same with #indicatorlinkdiv on country page
* 11 May 2016 chartbutton.6 for hide/show scatterplot names
* 22 May 2016 move #latestnews to right side
*
* Phase 2.2
* 1 Aug 2017 countryindicatorlist etc (and remove @charset "utf-8" (deprecated?))
* 16 Aug 2017 countrynodata to display list even if no data for current indic
* 18 Aug 2017 chartbutton.seven for Show target on Country page (timeline)
* 24 Aug 2017 instruction page layout
* 3 Sep 2017 published date on indicator page
* 11 Sep 2017 instruction page sidebar heading, chartbutton.eight and nine for Alpha button
* 23 Sep 2017 modal window for change year range, and chartbutton.ten
* 24 Sep 2017 move countryindicatorbutton and list below year range button (prevent clash)
* 27 Oct 2017 new twg (technical working group) page layout
* 9 Nov 2017 change twg page layout
* 21 Nov 2017 change twg page layout again
* 22 Nov 2017 continue twg page
* 28 Dec 2017 chartbutton.eleven for show/hide projections (country page)
* 23 Jan 2018 change twg page layout (again !) v5
* 24 Jan 2018 change twg page layout (again !!) v6
* 27 Jan 2018 word wrap in indicator summary div (for URLs in Chrome and IE)
* 13 Feb 2018 home page indicator sprites for new indigroups
* 17 Feb 2018 home page improve line ht in indicatorlist
* 18 Feb 2018 map page: add our own fake legend div maptargetlegenddiv
* 20 Feb 2018 make maptargetlegend div a bit darker grey bkgd
* 23 Feb 2018 increase font size of about page sidebar
* 4 Mar 2018 move indicatorlinkdiv down a bit on country page (was 73)
* 6 Mar 2018 add countryfactdiv for link
* 9 Mar 2018 replace by countryfactsheetbutton and list (for PDf and CSV options)
* 1 Apr 2018 make tertiary target vertical tertiarylegenddiv
* 20 Apr 2018 privacy page layout (wider, cos more text), wpforms styling (contact us)
* 27 Apr 2018 styling of links in indicator page desc4 and 5
*
* 27 Apr 2019 maptargetlegenddiv wider for french
*
*/
/* =Notes
--------------------------------------------------------------
No responsiveness built into this theme, to keep it as simple as possible.
/* = Initialise
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
/* font-size: 100%; removed 18may13 just specify in html only */
vertical-align: baseline;
}
body {
line-height: 1;
}
ol,ul {
list-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,th,td {
font-weight: normal;
text-align: left;
}
html {
overflow-y: scroll;
/* min-height: 101%; /* force firefox vert scrollbar to avoid alignment jump */
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a:focus {
outline: none;
}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {
display: block;
}
audio,canvas,video {
display: inline-block;
}
audio:not([controls]) {
display: none;
}
del {
color: #333;
}
ins {
background: #fff9c0;
text-decoration: none;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin: 5px 0 10px;
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
small {
font-size: smaller;
}
img {
border: 0;
display:block; /* Conor to remove 2px under caused by default display:inline; */
-ms-interpolation-mode: bicubic;
}
/* Clearing floats */
.clear:after,.wrapper:after,.format-status .entry-header:after {
clear: both;
}
.clear:before,.clear:after,.wrapper:before,.wrapper:after,.format-status .entry-header:before,
.format-status .entry-header:after {
display: table;
content: "";
}
/* **************** GENERAL *********************** */
body {
margin: 0;
padding: 0;
color: #000000;
background-color: #FFFFFF;
font-family: Lato, Arial, Helvetica, sans-serif;
font-size: 14px; /* see if this expandable, if not use rems ? */
}
/* close link - in selection panel really, but here because it overlaps header */
/* will need to do final horiz pos in jquery, as for green page pointer */
#closelink {
position: fixed;
top: 54px;
left: 1116px;
width: 52px;
height: 66px;
background-repeat:no-repeat;
background-position: 0 0;
background-image: url(images/buttons/ahs-stats-close.png);
z-index: 15; /* above header */
display: none; /* except when display panel is visible */
cursor:pointer;
}
#closelink p {
position: absolute;
bottom: 0;
width: 52px;
text-align: center;
color: #FFFFFF;
font-size: 12px;
}
#closelink:hover {
background-position: -52px 0;
}
#closelink:hover p {
color: #FFBF00;
}
/* HEADER and MENU */
#outerheader {
background-color: #F1F1F1;
margin: 0;
padding: 0;
position:fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10; /* to get above highcharts rect */
}
#headerdiv {
position: relative;
width: 1204px;
height: 50px;
margin: 0 auto;
padding: 0;
/* text-align: center; */
overflow: hidden; /* for ht reduction */
}
#headerdiv.homeheader {
height: 80px;
}
#logodiv {
position: absolute;
top: 7px;
left: 38px;
width: 36px;
height: 36px;
/* background-image: url(images/buttons/ahs-header-logo-small.png); */
/*background-image: url(images/buttons/ahs-header-logo.png);
background-repeat:no-repeat;
background-position: 0 0; */
cursor:pointer;
}
#logodiv.homeheader {
top: 13px;
left: 28px;
width: 55px;
height: 55px;
/* background-image: url(images/buttons/ahs-header-logo.png); */
}
#logodiv img {
width: 100%;
}
#menudiv {
margin-top: 0;
margin-left: 229px; /* should I centralise instead ? */
height: 80px;
font-size: 14px; /* correct ? */
line-height: 14px;
font-weight: normal;
color: #666666;
float: left;
}
#menudiv a, #menudiv a:hover, #menudiv a:visited {
color: #666666;
text-decoration: none;
}
#menudiv li {
display: inline-block;
margin-right: -4px; /* to overcome white-space gaps with inline-block*/
width: 126px;
height: 80px;
text-align: center;
}
#menudiv li.centrestats {
margin-left: 60px;
margin-right: 56px; /* 4 less to overcome white-space gaps with inline-block*/
}
#menudiv li:hover {
background-color: #FFBF00;
color: #FFFFFF;
}
#menudiv li .icondiv {
margin-top: 5px;
margin-left: 43px;
margin-bottom: 10px; /* to push text out of sight */
width: 40px;
height: 40px;
background-repeat:no-repeat;
background-position: 0 0;
}
#menudiv.homeheader li .icondiv {
margin-top: 13px;
margin-bottom: 0px;
}
#menudiv li:hover .icondiv{
background-position: -40px 0;
}
#menudiv li.selected {
background-color: #0BB951;
color: #FFFFFF;
}
#menudiv li.selected .icondiv{
background-position: -40px 0;
}
#menudiv li .icondiv.stats{
background-image: url(images/buttons/ahs-header-stats.png);
}
#menudiv li .icondiv.country {
background-image: url(images/buttons/ahs-header-country.png);
}
#menudiv li .icondiv.indicator {
background-image: url(images/buttons/ahs-header-indicator.png);
}
#menudiv li .icondiv.news {
background-image: url(images/buttons/ahs-header-news.png);
}
#menudiv li .icondiv.about {
background-image: url(images/buttons/ahs-header-about.png);
}
#menudiv li .icondiv.contact {
background-image: url(images/buttons/ahs-header-contact.png);
}
#languagediv {
margin-top: 8px;
margin-right: 21px;
width: 80px;
height: 55px;
float: right;
}
#languagediv.homeheader {
margin-top: 16px;
}
#languagediv li {
display: inline-block;
margin-right: -4px; /* to overcome white-space gaps */
width: 28px;
height: 28px;
}
#languagediv li .langdiv {
width: 28px;
height: 28px;
background-repeat:no-repeat;
background-position: 0 0;
cursor: pointer;
}
#languagediv li .langdiv.english {
background-image: url(images/buttons/ahs-header-english.png);
background-position: -56px 0; /* greyed out until javascript decides which */
}
#languagediv li .langdiv.french {
background-image: url(images/buttons/ahs-header-french.png);
background-position: -56px 0; /* greyed out initially */
margin-left: 20px;
}
#languagediv li .langdiv.current {
background-position: 0 0; /* green, active */
}
#languagediv li:hover .langdiv.english{
background-position: -28px 0; /* yellow */
}
#languagediv li:hover .langdiv.french{
background-position: -28px 0;
}
/* **** AHS05 Styles ****************** */
/* FOOTER */
#outerfooter {
position: relative; /* reposition to bottom of page if too short */
background-color: #313131;
/* margin was top=50px, but problems with expanded summarydiv (singleindicator page)
so then set to 0 all, but now reverted to 40px border at Jordan's request 15 Jun 2014 */
border-top: #FFFFFF solid 40px; /* instead of margin-top to prevent border-collapse */
padding: 0;
clear:both;
}
#footerdiv {
color: #E0E0E0;
width: 1148px;
height: 120px;
margin: 0 auto;
padding: 0 28px;
font-size: 12px;
background-color: #313131;
}
#footerdiv .leftfooterdiv1 {
width: 168px;
padding-top: 23px;
float: left;
}
#footerdiv .leftfooterdiv1 img {
float: left;
}
#footerdiv .leftfooterdiv2 {
width: 150px;
padding-top: 25px; /* tricky to line with links to the right */
line-height: 1.6;
padding-left: 28px;
float: left;
}
#footerdiv .rightfooterdiv1 {
width: 98px;
padding-top: 27px;
float:right;
}
#footerdiv .rightfooterdiv2 {
width: 196px;
padding-top: 27px;
float:right;
}
#footerdiv p {
padding-top: 8px; /* to match line ht of left div 2 */
color: #B2B2B2;
}
#footerdiv a, #footerdiv a:visited {
color: #0BB951; /* green */
text-decoration: none;
}
#footerdiv a:hover {
color: #FFBF00; /* yellow */
text-decoration: none;
}
/* language buttons */
#footerdiv .rightfooterdiv1 a {
cursor: pointer;
}
#footerdiv p.current a, #footerdiv p.current a:visited {
color: #0BB951; /* green */
text-decoration: none;
}
#footerdiv p.notcurrent a, #footerdiv p.notcurrent a:visited {
color: #B2B2B2; /* grey */
text-decoration: none;
}
#footerdiv p.current a:hover, #footerdiv p.notcurrent a:hover {
color: #FFBF00; /* yellow */
text-decoration: none;
}
/* ALL PAGES */
#outercontainer {
background-color: #FFFFFF;
margin: 80px 0 0; /* top margin cos of fixed header */
padding: 0;
}
.pagepointer {
position: fixed;
z-index: 9; /* above chart, just under menu */
width: 32px;
height: 10px;
display: none; /* jquery show() when positioned correctly */
}
#chart_pagepointer {
top: 50px;
left: 269px;
}
#country_pagepointer {
top: 50px;
left: 395px;
}
#indicator_pagepointer {
top: 50px;
left: 521px;
}
#about_pagepointer {
top: 50px;
left: 773px;
}
#contact_pagepointer {
top: 50px;
left: 899px;
}
#containerdiv {
position: relative;
/*top: -30px; */
width: 1176px; /* 1204 - 2 x 14 */
margin: 0 auto;
padding: 10px 14px 3px; /* bottom was 20px 31jul14 */
line-height: 1.2; /* just Conor's idea */
color: #313131;
}
#containerdiv p{
font-weight: 300;
font-size: 16px;
line-height: 1.4;
}
/* h2s and h3s may need to be more specific */
h2 {
font-size: 26px;
line-height: 1.2;
font-weight: 300;
}
h3 {
font-size: 20px;
line-height: 1.2;
font-weight: 300;
}
/* TEST ONLY ??? */
#containerdiv p.px12{
font-size: 12px;
}
#containerdiv p.px14{
font-size: 14px;
}
#containerdiv p.px16{
font-size: 16px;
}
#containerdiv p.px26{
font-size: 26px;
}
/* HOME PAGE */
div.homecentredtop {
margin: 0 auto;
padding: 10px 0 20px;
width: 530px; /* not a fixed number of columns (98px). OK ? */
text-align: center;
}
div.homecentredtop h2 {
padding-top: 10px; /* always ? This for home page */
padding-bottom: 16px; /* ditto */
}
#containerdiv .homecentredtop p {
font-size: 16px;
font-weight: 300;
line-height:24px;
}
#homelatestnews {
position: absolute;
top: 20px;
right: 10px;
width: 290px;
border: 1px solid #CB4741;
border-radius: 15px;
background-color: #FFFFFF;
padding: 10px;
z-index: 4;
}
#homelatestnews h4 {
font-size: 16px;
font-weight: bold;
line-height: 1.5;
padding-bottom: 15px;
}
#homelatestnews p {
font-size: 14px;
font-weight: 300;
line-height: 1.4;
padding-bottom: 10px;
}
#homemorenewsbutton {
color: #0BB951 ;
text-align: right;
cursor: pointer;
}
#homemorenews {
display: none;
}
/* chart div in top 'banner' */
#hometopchartdiv {
height: 245px;
background-image: url(images/layout/homechartbkgd2.png);
}
/* grey lines behind chart */
#greylinediv {
position: absolute;
top: 300px;
left: 0px;
height: 245px;
width: 1176px;
background-color: yellow;
z-index: -10;
}
/* the small map divs inside */
#homemapdiv1 {
margin-left: 20px;
margin-right: 24px;
width: 245px;
height: 245px;
float: left;
}
#homemapdiv2 {
margin-left: 20px;
margin-right: 24px;
width: 245px;
height: 245px;
float: left;
}
#homemapdiv3 {
margin-left: 20px;
margin-right: 24px;
width: 245px;
height: 245px;
float: left;
}
#homemapdiv4 {
margin-left: 20px;
margin-right: 24px;
width: 245px;
height: 245px;
float: left;
}
/* these left and right divs are a bit hurried
But leave for now till we see Jordan's new home page design */
.homemiddlediv {
width: 1148px;
padding: 0 14px 20px;
}
.homemiddletop {
width: 756px; /* 7cols + 70 */
margin: 0 auto; /* centred */
}
.homemiddletop img {
float: left;
margin-top:14px;
}
.homemiddletopmiddle {
width : 588px; /* 6 cols */
margin-top: 15px;
float: left;
text-align: center;
}
.homemiddletop h3 {
text-align: center;
}
.homemiddletop img.right {
float: right;
}
.homegreenbutton {
width: 364px;
height: 40px;
padding: 0;
margin: 25px 0 0 0;
background-color: #0BB951;
color: #FFFFFF;
font-size: 20px;
font-weight:300;
line-height: 36px;
text-align: center;
cursor: pointer;
}
.homegreenbutton:hover {
color: #FFFFFF;
background-color: #FFBF00;
text-decoration: none;
}
a.agreenbutton {
display:block; /* to restrict the active width */
width:364px;
text-decoration:none;
}
a.agreenbutton.middle {
margin: 0 auto;
}
a.agreenbutton:visited {
text-decoration:none;
}
/* home page chart icons */
#homecharticondiv {
height: 85px;
width: 364px;
padding: 30px 0 20px;
margin: 0 auto;
}
#homecharticondiv .homecharticon {
position: relative;
margin-right: 28px;
width: 70px;
height: 85px;
float: left;
background-repeat:no-repeat;
cursor: pointer;
}
#homecharticondiv .homecharticon.last {
margin-right: 0;
}
/* need #containerdiv to override #containerdiv p !*/
#containerdiv .homecharticon p {
position: absolute;
bottom: -5px;
left: -15px;
width: 100px; /*was 70 but needs more for french */
text-align: center;
color: #FFFFFF;
font-size: 14px;
font-weight: 400;
line-height: 1.0;
}
#containerdiv .homecharticon:hover p {
color: #FFBF00;
}
#homecharticondiv .one{
background-image: url(images/buttons/ahs-home-chart-column.png);
background-position-x: -140px; /* for IE8 */
background-position: -140px 0; /* must for Firefox, others can use this or -x */
}
#homecharticondiv .two{
background-image: url(images/buttons/ahs-home-chart-timeline.png);
background-position-x: -140px;
background-position: -140px 0;
}
#homecharticondiv .three{
background-image: url(images/buttons/ahs-home-chart-scatter.png);
background-position-x: -140px;
background-position: -140px 0;
}
#homecharticondiv .four{
background-image: url(images/buttons/ahs-home-chart-map.png);
background-position-x: -140px;
background-position: -140px 0;
}
#homecharticondiv .homecharticon:hover {
background-position-x: -70px;
background-position: -70px 0; /* for Firefox */
}
.homeleftdiv {
position: relative; /* for homecountrydiv */
width: 520px; /* not 462, to make map bigger, so boundaries better in Chrome */
clear: left;
padding-top: 40px;
}
.homeleftdiv h3,.homerightdiv h3 {
padding-bottom: 20px;
text-align: left;
}
#containerdiv .homeleftdiv p, #containerdiv .homerightdiv p {
margin-top: 0px;
padding-bottom: 20px;
padding-right: 60px; /* or whatever wanted */
font-weight: 300;
font-size: 16px;
text-align: left;
line-height: 1.4;
}
#homecountrydiv {
position: absolute;
top: 500px;
left: 0px;
z-index: 4; /* above the map, but below outerpanel */
width: 168px;
display: none; /* to start */
}
#homecountrydiv h4 {
font-size: 14px;
font-weight: bold;
color: #FFBF00;
border-bottom: #CBCBCB 1px solid;
line-height: 30px;
}
#homecountrydiv p.homepoptitle, #homecountrydiv p.homeareatitle {
font-size: 14px;
font-weight:300;
font-weight: normal;
margin: 5px 0 0;
padding: 0;
}
#homecountrydiv p.homepop, #homecountrydiv p.homearea {
font-size: 26px;
font-weight: 300;
color: #666666;
border-bottom: #CBCBCB 1px solid;
line-height: 30px;
margin: 0;
padding: 3px 0 10px;
}
.homerightdiv {
width: 462px;
/* margin-right: 84px; */
clear: right;
float:right;
padding-top: 40px;
text-align: left;
}
/* home indicator icons */
#homeindicatoricondiv {
height: 60px;
padding-bottom: 15px;
}
#homeindicatoricondiv .indicatoricon {
margin-right: 17px;
width: 60px;
height: 60px;
float: left;
background-repeat:no-repeat;
background-position: 0 0;
cursor: pointer;
}
#homeindicatoricondiv .one{
background-image: url(images/buttons/ahs-home-indicator-rh.png);
background-position-x: -120px; /* for IE8 */
background-position: -120px 0; /* for Firefox */
}
#homeindicatoricondiv .two{
background-image: url(images/buttons/ahs-home-indicator-srh.png);
background-position-x: -120px;
background-position: -120px 0;
}
#homeindicatoricondiv .three{
background-image: url(images/buttons/ahs-home-indicator-cd.png);
background-position-x: -120px;
background-position: -120px 0;
}
#homeindicatoricondiv .four{
background-image: url(images/buttons/ahs-home-indicator-ncd.png);
background-position-x: -120px;
background-position: -120px 0;
}
#homeindicatoricondiv .five{
background-image: url(images/buttons/ahs-home-indicator-hf.png);
background-position-x: -120px;
background-position: -120px 0;
}
#homeindicatoricondiv .six{
background-image: url(images/buttons/ahs-home-indicator-hsp.png);
background-position-x: -120px;
background-position: -120px 0;
}
#homeindicatoricondiv .indicatoricon:hover {
background-position-x: -60px;
background-position: -60px 0;
}
#homeindicatorlistdiv {
clear: both;
}
#homeindicatorlistdiv h4 {
font-size: 14px;
font-weight: bold;
color: #0BB951;
border-bottom: #CBCBCB 1px solid;
line-height: 30px;
}
#homeindicatorlistdiv li {
font-size: 14px;
font-weight:300;
border-bottom: #CBCBCB 1px solid;
padding: 7px 0;
}
#homeindicatorlistdiv a, #homeindicatorlistdiv a:visited {
color: #656565;
text-decoration: none;
}
#homeindicatorlistdiv a:hover{
color: #FFBF00;
text-decoration: none;
}
#homeindicatorlistdiv li:hover {
background-color: #F9F9F9;
}
/* COUNTRY PAGE */
/* for landing page layout */
div.countrycentred588 {
margin: 0 auto;
padding: 0 0 10px;
width: 588px; /* 6 columns */
text-align: center;
}
div.countrycentred588 h2 {
padding-top: 0;
padding-bottom: 10px;
}
#containerdiv .countrycentred588 p {
font-size: 16px;
line-height: 24px;
font-weight: 300;
}
#leftcountrydiv {
float: left; /* is this best ? */
width: 588px;
margin-left: 14px;
padding: 50px 0 20px;
}
div.countrycoldiv {
width: 168px;
padding-right: 28px;
float: left;
}
ul.countrypagelist {
color: #656565;
font-weight: 300;
text-align: left;
}
ul.countrypagelist li {
border-top: #CBCBCB 1px solid;
line-height: 30px;
}
ul.countrypagelist li:hover {
background-color: #F9F9F9;
}
ul.countrypagelist a, ul.countrypagelist a:visited {
color: #656565;
text-decoration: none;
}
ul.countrypagelist a:hover {
color: #FFBF00;
text-decoration: none;
}
#rightcountrydiv {
float: left; /* is this best ? */
width: 520px;
margin-left: 28px;
padding: 50px 0 20px;
}
.bigmap {
width: 520px; /* was width 100% */
height: 520px;
}
/* for single country page */
#countryreturndiv {
position: absolute;
top: 16px;
left: 32px;
width: 52px;
height: 74px;
background-repeat:no-repeat;
background-position: 0 0;
background-image: url(images/buttons/ahs-return.png);
}
#countryreturndiv p {
position: absolute;
bottom: 0;
width: 52px;
text-align: center;
color: #0BB951;
font-size: 12px;
}
#countryreturndiv:hover {
background-position: -52px 0;
}
#countryreturndiv:hover p {
color: #FFBF00;
}
/* country fact sheet options (PDF and CSV) Mar 2018 */
#countryfactsheetbutton {
position: absolute;
top: 16px;
right: 32px;
width: 168px;
height: 35px;
background-image: url(images/buttons/ahs-more-indicators.png);
font-size: 12px;
text-align: center;
line-height: 28px;
cursor: pointer;
}
#countryfactsheetlist {
position: absolute;
top: 51px;
right: 32px;
width: 168px;
display: none;
}
#countryfactsheetlist li {
background-color: #0BB951;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 6px;
border-bottom: 1px #FFFFFF solid;
line-height: 16px;
}
#countryfactsheetlist a, #countryfactsheetlist a:visited{
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
}
#countryfactsheetlist a:hover{
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
}
#countryfactsheetlist a:hover li{
background-color: #FFBF00;
}
#countryinfodiv {
float: left; /* is this best ? */
width: 560px;
margin-left: 14px;
}
table.singlecountrytable {
border-collapse: collapse;
}
table.singlecountrytable td {
width: 196px;
height: 40px;
font-weight:300;
border-top: 1px #CBCBCB solid;
border-bottom: 1px #CBCBCB solid;
vertical-align: middle;
}
table.singlecountrytable td.higher {
height: 114px;
}
#countrymapdiv {
float: left; /* is this best ? */
width: 313px;
height: 232px;
margin-left: 28px;
padding-top: 5px;
padding-left: 51px;
border-top : 1px #CBCBCB solid;
border-bottom : 1px #CBCBCB solid;
}
#countryafricadiv {
float: left; /* is this best ? */
width: 166px;
height: 232px;
margin-left: 28px;
padding-top: 5px;
border-top : 1px #CBCBCB solid;
border-bottom : 1px #CBCBCB solid;
}
.smallmap {
width: 166px;
height: 166px;
}
#middlecountrydiv {
clear: both;
width: 1148px;
height: 580px; /* was 520 */
position: relative; /* for buttons */
top: 27px;
margin: 20px 14px 20px;
/* border-bottom: 1px solid #CBCBCB; */
}
#middlecountrydiv #mychartdiv{
padding-top: 32px;
}
/* for what does it mean ? link */
#indicatorlinkdiv {
position: absolute;
top: 80px;
left: 473px;
width: 200px;
height: 30px;
color: #0BB951;
font-size: 12px;
font-style: italic;
text-align: center;
line-height: 28px;
cursor: pointer;
}
/* for modal window for change year range */
.modal {
/* This way it could be display flex or grid or whatever also. */
display: block;
/* Probably need media queries here */
width: 300px;
max-width: 100%;
height: 200px;
max-height: 100%;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
/* If known, negative margins are probably better (less chance of blurry text). */
margin: -200px 0 0 -120px;
background: white;
border-radius: 10px;
}
.closed {
display: none;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
background: rgba(0, 0, 0, 0.6);
}
.modal-guts {
position: absolute;
top: 0;
left: 0;
/* width: 100%;
height: 100%; */
padding: 10px;
font-size: 1.2em;
}
.modal-table td {
padding : 0 10px 10px 0;
}
.modal .rangenumber {
width: 100px;
height: 1.6em;
font-size: 1.0em; /* trying to get size of arrows bigger in Firefox ! unsuccessfully */
margin-bottom: 10px;
}
.modal #close-button {
position: absolute;
top: 10px;
right: 20px;
width: 26px;
height: 26px;
background-repeat:no-repeat;
background-position: 0 0;
background-image: url(images/buttons/ahs-modal-close.png);
z-index: 1; /* above modal-guts */
cursor:pointer;
}
.modal #close-button:hover {
background-position: -26px 0;
}
/* end of modal window for year range */
/* for wdim/subtitle links in charts */
a.smallgreenlink, a.smallgreenlink:visited {
text-decoration: none;
color: #0BB951;
font-size: 12px;
font-style: italic
}
/* INDICATOR LANDING PAGE */
div.indicatorcentred588 {
margin: 0 auto;
padding: 0;
width: 588px; /* 6 columns */
text-align: center;
}
div.indicatorcentred588 h2 {
padding-top: 2px;
padding-bottom: 8px;
}
div.indicatorcentred588 p {
font-size: 16px;
}
div.indicatorcentred588 img { /* for single ind page */
margin: 30px auto;
}
#tableindicatordiv {
position: relative; /* for tooltip and hoverarrow and hovermask*/
padding-top: 0px;
padding-left: 14px;
padding-right: 14px;
text-align: left;
}
#hovermaskdiv {
position: absolute;
width: 1px;
height: 30px;
top: 0px;
left: 0px;
display:none;
background-color: #F9F9F9;
background-repeat:no-repeat;
background-position: 0 0;
z-index: 5; /* above tooltipdiv */
}
#leftinditablediv{
width: 462px;
display: inline-block;
padding-top: 0px;
}
/* indicator page tooltip */
#tooltipdiv {
position: absolute;
top: 126px;
left: 476px;
width: 166px;
background-color: #F9F9F9;
border: 1px solid #CBCBCB;
border-radius: 15px;
padding: 15px 28px;
z-index: 2; /* above footer border */
display:none; /* hide until something to show */
}
#tooltipdiv img {
margin: 0 auto;
}
#tooltipdiv h4 {
font-weight: bold;
font-size: 14px;
line-height: 1.4;
padding: 10px 0;
}
#tooltipdiv p {
font-size: 12px;
font-weight: normal;
}
#rightinditablediv{
margin-left: 224px; /* for tooltip */
width: 462px;
display: inline-block;
vertical-align: top;
padding-top: 27px; /* to align with left column */
}
.indicatortable {
margin-top: 20px;
}
.indicatortable div.indicatorheader {
position: relative;
font-size: 22px;
font-weight: 300;
padding-top: 20px;
padding-bottom: 10px;
padding-left: 26px;
padding-right: 100px;
border-bottom: #CBCBCB 1px solid;
}
.indicatortable div.indicatorheader.lower {
padding-top: 60px;
}
.indicatortable div.indicatorheader img {
width: 62px;
position: absolute;
right: 0px;
bottom: 6px;
}
.indicatortable li {
font-size: 14px;
font-weight: 300;
border-bottom: #CBCBCB 1px solid;
/* for wrapped lines too
padding: 7px 0px 7px 0px; not if flex */
line-height: 16px;
/* for pubdate 3sep17 */
display: flex;
justify-content: start; /* will become space-between when dates on display */
}
.indicatortable li img {
float: left;
width: 20px;
padding: 5px 4px;
vertical-align: middle;
}
.indicatortable li span.indiname {
padding: 7px 7px 7px 0px;
line-height: 16px;
text-align: left;
}
.indicatortable li span.pubdate {
display: none; /* to start with */
margin-left: auto; /* impt for flex */
color: #0BB951;
padding-top: 7px;
text-align: right; /* needed for wrapped lines */
}
.indicatortable a, .indicatortable a:visited {
color: #656565;
text-decoration: none;
}
.indicatortable a:hover{
color: #FFBF00;
text-decoration: none;
}
.indicatortable li:hover {
background-color: #F9F9F9;
}
/* SINGLE INDICATOR PAGE */
/* return to landing page button */
#indicatorreturndiv {
position: absolute;
top: -9px;
left: 21px;
width: 52px;
height: 74px;
background-repeat:no-repeat;
background-position: 0 0;
background-image: url(images/buttons/ahs-return.png);
z-index:4; /* above chart, but below panel */
}
#indicatorreturndiv p {
position: absolute;
bottom: 0;
width: 52px;
text-align: center;
color: #0BB951;
font-size: 12px;
}
#indicatorreturndiv:hover {
background-position: -52px 0;
}
#indicatorreturndiv:hover p {
color: #FFBF00;
font-size: 12px;
}
/* 'button' to scroll down to what does it mean area ?? */
#scrolldowndiv {
position: absolute;
top: 73px;
left: 488px;
width: 200px;
height: 30px;
color: #0BB951;
font-size: 12px;
font-style: italic;
text-align: center;
line-height: 28px;
cursor: pointer;
}
#indichart-container {
padding: 0 14px 0;
}
#indicatorinfodiv {
float: left; /* is this best ? */
width: 756px;
margin-left: 14px;
}
table.singleindicatortable {
border-collapse: collapse;
margin-top: 2px; /* to fix Firefox bug of losing top border ! */
}
table.singleindicatortable td {
width: 196px;
padding: 10px 0;
border-top: 1px #CBCBCB solid;
border-bottom: 1px #CBCBCB solid;
vertical-align: middle;
}
table.singleindicatortable td.wider {
width: 560px;
}
table.singleindicatortable td.nobottomborder {
border-bottom: none !important;
}
table.singleindicatortable td a, table.singleindicatortable td a:visited {
color: #0BB951;
}
table.singleindicatortable td a:hover {
color: #FFBF00;
}
#indicatornodatadiv {
float: left; /* is this best ? */
width: 358px;
margin-left: 28px;
}
table.singleindicatortable2 {
margin-top: 1px; /* to match singleindicatortable */
width: 100%;
}
table.singleindicatortable2 td {
border-top: 1px #CBCBCB solid;
vertical-align: middle;
padding: 15px 0;
}
table.singleindicatortable2 td.icon {
width: 62px;
}
#containerdiv table.singleindicatortable2 p.nodata {
color: #CB4741;
padding-left: 10px;
font-size: 14px;
font-weight: normal;
}
/* and this div now also contains 'alternative sources' link */
#altsourcediv {
margin: 15px 0;
cursor:pointer;
color:#0BB951;
}
#altsourcediv:hover {
color:#FFBF00;
}
#altsourcediv:hover #altsourceicondiv{
background-position: -62px 0;
}
#altsourceicondiv {
padding: 0;
height: 62px;
width: 62px;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-image:url(images/layout/ahs-moreinfo.png);
}
#altsourceicondiv:hover{
background-position: -62px 0;
}
#altsourcetextdiv {
padding-left: 10px;
display: inline-block;
vertical-align: middle;
font-size: 14px;
font-weight: normal;
}
/* for what does it means... */
#bottomindicatordiv { /* needs to replicate #containerdiv , no not now no wide 'greenband' */
position: relative;
width: 1148px;
margin: 0 auto;
border-top: 1px #CBCBCB solid;
padding: 35px 0 20px;
line-height: 1.4;
color: #313131;
clear:both; /* for bottom of single ind page */
}
#bottomindicatordiv div.pad{
width: 364px;
float: left;
padding-right: 28px;
padding-bottom: 20px;
}
#bottomindicatordiv div.nopad{
width: 364px;
float: left;
padding-right: 0;
padding-bottom: 20px;
}
#bottomindicatordiv h2 {
padding-top: 20px;
padding-bottom: 15px;
text-align: center;
}
#bottomindicatordiv h3 {
padding-bottom: 15px;
text-align: center;
}
#bottomindicatordiv p {
font-size: 16px;
font-weight: 300;
line-height:1.4;
padding-bottom: 10px;
text-align: left;
}
/* below bottom... for sharethis and summary def button */
#basementindicatordiv {
clear: both;
margin: 20px 14px 45px;
border-top: 1px #CBCBCB solid;
}
/* open summary def button */
#summarybuttondiv {
width: 364px;
float: right;
color: #0BB951;
cursor: pointer;
padding-top: 25px;
}
#summarybuttonleftdiv {
float:none; /* cancel div defaults */
padding-right: 0;
width: 62px;
height: 62px;
display: inline-block;
vertical-align: middle;
background-repeat:no-repeat;
background-position: 0 0;
background-image: url(images/layout/ahs-moreinfo.png);
}
#summarybuttondiv:hover {
color: #FFBF00;
}
#summarybuttondiv:hover #summarybuttonleftdiv{
background-position: -62px 0;
}
#summarybuttonmiddlediv {
float:none; /* cancel div defaults */
padding-right: 0;
width: 238px;
margin-left: 22px;
display: inline-block;
vertical-align: middle;
}
#summarybuttonrightdiv {
width: 32px;
height: 48px;
display: inline-block;
vertical-align: middle;
background-repeat:no-repeat;
background-position: 0 0;
background-image: url(images/buttons/ahs-arrow-readmore-down.png);
}
#summarybuttondiv:hover #summarybuttonrightdiv{
background-position: -32px 0;
}
#summaryouter {
clear: both;
background-color: #CB4741;
display:none;
}
#summarydiv {
width: 1148px;
margin: 0 auto;
padding: 70px 28px 60px;
background-color: #CB4741;
color: #FFFFFF;
position: relative;
}
/* summary close link */
#summaryclosediv {
position: absolute;
top: 24px;
right: 34px;
width: 70px;
height: 27px;
background-repeat:no-repeat;
background-position: 0 0;
background-image: url(images/buttons/ahs-indsumm-close3.png);
/*z-index: 15; /* above header */
/*display: none; /* except when display panel is visible */
cursor:pointer;
}
#summaryclosediv p.close {
position: absolute;
padding-bottom: 7px;
bottom: 0;
width: 40px;
text-align: left;
color: #FFFFFF;
font-size: 12px;
}
#summaryclosediv:hover {
background-position: -70px 0;
}
#summaryclosediv:hover p.close {
color: #FFBF00;
}
#summarydiv div.summarypad {
width: 340px;
display: inline-block; /* not float because I want the dynamic height */
margin-right: -4px; /* inline block white space problem */
padding-right: 52px;
vertical-align: top;
}
#summarydiv div.summarynopad{
width: 364px;
display: inline-block;
padding-right: 0;
vertical-align: top;
}
#summarydiv h3 {
padding-bottom: 15px;
}
#summarydiv p {
font-size: 16px;
font-weight: 300;
line-height:1.2;
padding-bottom: 10px;
text-align: left;
overflow-wrap: break-word; /* esp to wrap urls in Chrome and IE */
word-wrap: break-word;
}
#summarydiv a, #summarydiv a:visited {
color: white;
text-decoration: underline;
}
/* END OF INDICATOR PAGES */
/* CHART PAGES */
.topchartdiv {
position: relative;
padding-top: 0;
}
/* diagnostic for type of chart */
#diagdiv {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 50px;
padding: 0;
}
.chartbutton {
position: absolute;
width: 80px;
height: 85px;
z-index: 4;
background-repeat:no-repeat;
}
.chartbutton.one {
top: -9px;
left: 0;
background-image: url(images/buttons/ahs-switch-column.png);
cursor: pointer;
}
.chartbutton.two {
top: -9px;
left: 0;
background-image: url(images/buttons/ahs-switch-xy.png);
cursor: pointer;
}
.chartbutton.three{
top: -9px;
right: 88px;
height: 72px;
background-image: url(images/buttons/ahs-createchart.png);
}
.chartbutton.four {
top: -9px;
right: 0;
height: 72px;
background-image: url(images/buttons/ahs-discuss.png);
}
.chartbutton.five {
top: -9px;
left: 0;
/* height: 72px; */
background-image: url(images/buttons/ahs-hideshowdata2.png);
cursor: pointer;
}
.chartbutton.six {
top: -9px;
left: 88px;
/* height: 72px; */
background-image: url(images/buttons/ahs-hideshowdata2.png);
cursor: pointer;
}
.chartbutton.seven {
top: -9px;
left: 176px;
/* height: 72px; */
background-image: url(images/buttons/ahs-hideshowdata2.png);
cursor: pointer;
}
.chartbutton.eight {
top: -9px;
left: 0;
/* height: 72px; */
background-image: url(images/buttons/ahs-alpha.png);
cursor: pointer;
}
.chartbutton.nine {
top: -9px;
left: 88px;
background-image: url(images/buttons/ahs-alpha.png);
cursor: pointer;
}
.chartbutton.ten {
top: -9px;
left: 0;
background-image: url(images/buttons/ahs-range.png);
cursor: pointer;
}
.chartbutton.eleven {
top: -9px;
left: 176px;
background-image: url(images/buttons/ahs-projection.png);
cursor: pointer;
}
.chartbutton:hover {
background-position: -80px 0;
}
/* need #containerdiv to override #containerdiv p !*/
#containerdiv .chartbutton p {
position: absolute;
top: 61px; /* 85-2x12, was bottom: 0; but that's not good if english one line, french 2 */
left: -5px;
width: 90px;
text-align: center;
color: #0BB951;
font-size: 12px;
font-weight: normal;
line-height: 1.0;
}
#containerdiv .chartbutton.four p { /* discuss button */
color: #CBCBCB;
}
#containerdiv .chartbutton:hover p {
color: #FFBF00;
}
#chartprintbutton {
position: absolute;
top: 76px;
right: 0px;
width: 80px;
height: 30px;
background-color: #EEEEEE;
font-size: 12px;
text-align: center;
line-height: 28px;
cursor: pointer;
}
#chartprintbutton:hover {
background-color: #0BB951;
color: #FFFFFF;
}
#chartdownloadbutton {
position: absolute;
top: 76px;
right: 88px;
width: 80px;
height: 35px;
background-image: url(images/buttons/ahs-chart-download.png);
font-size: 12px;
text-align: center;
line-height: 28px;
cursor: pointer;
}
/*
#chartdownloadbutton:hover {
background-color: #0BB951;
color: #FFFFFF;
}
*/
#chartdownloadmenu {
position: absolute;
top: 112px;
right: 0px;
width: 168px;
display: none;
}
#chartdownloadmenu li {
height: 23px;
background-color: #0BB951;
padding-left: 10px;
padding-top: 6px;
border-bottom: 1px #FFFFFF solid;
line-height: 16px;
}
#chartdownloadmenu a, #chartdownloadmenu a:visited{
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
}
#chartdownloadmenu a:hover{
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
}
#chartdownloadmenu a:hover li{
background-color: #FFBF00;
}
/* a hidden div just to hold chart source on country page */
#chartsourcediv {
position: absolute;
top: 0;
left: 0;
display: none;
}
/* list of indicators on country page Aug 2017 */
#countryindicatorbutton {
position: absolute;
top: 76px;
left: 0px;
width: 168px;
height: 35px;
background-image: url(images/buttons/ahs-more-indicators.png);
font-size: 12px;
text-align: center;
line-height: 28px;
cursor: pointer;
}
#countryindicatorlist {
position: absolute;
top: 112px;
left: 0px;
width: 168px;
display: none;
}
#countryindicatorlist li {
background-color: #0BB951;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 6px;
border-bottom: 1px #FFFFFF solid;
line-height: 16px;
}
#countryindicatorlist a, #countryindicatorlist a:visited{
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
}
#countryindicatorlist a:hover{
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
}
#countryindicatorlist a:hover li{
background-color: #FFBF00;
}
/* and allow to display countryindicatorlist when no data */
#countrynodata {
clear: both;
position: relative; /* for buttons and list*/
top: 27px;
width: 1148px;
height: 300px; /* to allow for 5 or so indicators in indicatorlist */
overflow: visible; /* doesn't work for dropdown list ? */
margin: 20px 14px 20px;
}
#containerdiv p.nodatafound {
font-size: 23px;
padding: 50px;
/*line-height: 150px; /* to force a height when no chart there */
text-align: center;
color: #313131;
}
.smallcomment {
font-size: 10pt;
}
#chartcentred588 {
margin: 0 auto;
padding: 10px 0;
width: 588px; /* 6 columns */
text-align: center;
}
#chartcentred588 p {
padding: 40px 0;
font-size: 23px;
color: #313131;
}
/* info section on chart pages, below chart */
#chartinfodiv {
float: left; /* is this best ? */
width: 660px;
margin-left: 14px;
}
table.chartinfotable {
margin-top: 1px; /* to fix Firefox bug of losing top border ! */
width: 100%;
}
table.chartinfotable td {
vertical-align: top;
}
table.chartinfotable td.topborder {
padding: 30px 0 5px;
border-top: 1px #CBCBCB solid;
}
table.chartinfotable td.imgtd {
width: 40px ;
padding-top: 28px;
}
table.chartinfotable td.imgtd img {
width: 30px;
}
table.chartinfotable td.gaptd {
width: 40px ;
padding: 0;
}
table.chartinfotable td.infosubtitle {
width: 170px;
}
table.chartinfotable td.infotitle span{
font-size: 16px;
font-weight: 300;
font-style: normal;
line-height: 26px;
color: #666666;
}
table.chartinfotable td.titletd a, table.chartinfotable td.titletd a:visited {
line-height: 26px;
text-decoration: underline;
}
table.chartinfotable td a, table.chartinfotable td a:visited {
color: #0BB951;
}
table.chartinfotable td a:hover {
color: #FFBF00;
}
table.chartinfotable td {
padding: 0;
border-top: 1px #CBCBCB solid;
border-bottom: 1px #CBCBCB solid;
font-size: 12px;
font-weight: normal;
font-style: italic;
line-height: 24px;
vertical-align: bottom;
}
table.chartinfotable td.infosubtext {
}
table.chartinfotable td.infosubtitle {
color: #B2B2B2;
}
#chartnodatadiv {
float: left; /* is this best ? */
width: 365px;
padding-left: 125px;
margin-top: 1px; /* to fix Firefox bug of losing top border ! */
border-top: 1px #CBCBCB solid;
}
table.chartnodatatable {
width: 100%;
border-bottom: 1px #CBCBCB solid;
}
table.chartnodatatable td {
vertical-align: middle;
padding: 15px 0;
}
#containerdiv table.chartnodatatable p.nodata {
color: #CB4741;
padding-left: 10px;
font-size: 14px;
font-weight: normal;
}
table.charttipstable {
width: 100%;
}
table.charttipstable td {
padding: 20px 0 10px;
vertical-align: top;
}
table.charttipstable td.imgtd {
width: 36px ;
}
table.charttipstable td.imgtd img {
width: 30px;
}
table.charttipstable td.texttd {
width: 132px;
font-size: 12px;
font-style: italic
}
table.charttipstable td.gaptd {
width: 28px;
}
div.sharethisborder {
clear: both;
height: 50px;
margin: 0 14px;
border-bottom: 1px #CBCBCB solid;
}
#sharethisdiv {
clear: both;
margin-left: 14px;
margin-right: 14px;
/*border-top: 1px #CBCBCB solid;*/
padding-top:17px;
height: 65px;
/* width: 560px; /* only rough */
}
#sharethisdiv.indicatorpage {
clear: none;
margin-left: 0;
margin-right: 0;
}
#sharethisdiv p{
font-size: 14px;
padding-bottom: 10px;
}
/* SELECTION PANEL */
#outerpanel {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color: #000000;
display: none; /* before jquery fadeIn */
margin: 0; /* full browser width */
padding: 0;
z-index: -5; /* under container etc */
}
#paneldiv {
width: 1148px; /* 1204 - 2 x 28 */
margin: 80px auto 0px;
padding: 0; /* 44px 14px 20px; */
line-height: 1.2; /* just Conor's idea */
}
#data_panel {
}
#data_panel h2 {
color: #FFFFFF;
padding-left: 0px;
padding-top: 10px;
padding-bottom: 18px;
border-bottom: 1px #656565 solid;
}
#data_country_panel {
margin-left: 0;
width: 294px;
float: left;
position: relative;
}
#data_country_tablediv { /* for scrollbars */
clear: both;
overflow-y: scroll
}
#data_country_tablediv:focus { /* to prevent blue border in chrome */
outline: none;
}
#data_indicator_panel {
margin-left: 52px;
width: 392px;
float: left;
}
#data_indicator_tablediv { /* for scrollbars */
clear: both;
overflow-y: scroll
}
#data_indicator_tablediv:focus { /* to prevent blue border in chrome */
outline: none;
}
#data_format_panel {
margin-left: 46px;
width: 364px;
float: left;
position: relative;
}
/* headings */
.selectheaderdiv {
color: #FFFFFF;
font-size: 20px;
line-height: 36px;
height: 36px; /* new */
border-bottom: 1px #656565 solid;
}
.selectheaderdiv .numdiv {
float: left;
width: 35px; /* was 60 */
height: 36px;
}
#allcountriesbutton {
float: left;
width: 110px;
font-size: 14px;
color: #0BB951;
text-decoration: none;
cursor: pointer;
}
#clearcountriesbutton {
float: right;
width: 80px;
margin-right: 36px;
font-size: 14px;
color: #0BB951;
text-decoration: none;
text-align: right;
cursor: pointer;
}
#clearindicatorsbutton {
float: right;
width: 80px;
margin-right: 36px;
font-size: 14px;
color: #0BB951;
text-decoration: none;
text-align: right;
cursor: pointer;
}
/* selection lists (country and indicator) in selection panel */
table.selectlist {
width: 95%;
color: #FFFFFF;
}
table.selectlist tr {
border-bottom : 1px #656565 solid;
}
table.selectlist td.listheader {
color: #888888;
padding: 14px 20px 8px 5px;
font-size: 20px;
font-weight: 300;
line-height: 1.2;
vertical-align: middle;
}
table.selectlist td.imgcell {
width: 30px;
cursor: pointer;
/* hover done in ahs-script.js */
height: 30px;
vertical-align:middle;
}
table.selectlist td.imgcell img {
background-image: url(images/layout/yellow-arrow-sprite.png);
background-repeat: no-repeat;
}
table.selectlist td.textcell {
/* padding-left: 5px; */
/* to cater for longer wrapped rows */
padding: 7px 0px 6px 5px;
line-height: 1.2;
font-size: 14px;
font-weight: 300;
vertical-align: middle;
cursor: pointer;
}
table.selectlist tr.datarow:hover {
background-color: #313131;
color: #FFBF00;
}
table.selectlist td.textcell.checked {
color: #0BB951;
}
/* and change bkgd colour of indicator cells on hover
#data_indicator_panel td.textcell:hover {
background-color: #313131;
}
*/
/* chart format selection panel icons */
#chartformatdiv {
margin-top: 28px;
}
#chartformatdiv .charticon {
/*padding-right: 28px;*/
width: 98px; /* 14px + 70px + 14px */
height: 70px;
float: left;
background-repeat:no-repeat;
background-position: 0 0;
cursor: pointer;
}
#chartformatdiv .charticon.column{
width: 84px; /* 70px + 14px */
background-image: url(images/buttons/ahs-chart-column.png);
background-position: -14px 0;
}
#chartformatdiv .charticon.timeline{
width: 98px; /* 14px + 70px + 14px */
background-image: url(images/buttons/ahs-chart-timeline.png);
}
#chartformatdiv .charticon.scatterplot{
width: 98px; /* 14px + 70px + 14*/
background-image: url(images/buttons/ahs-chart-scatter.png);
}
#chartformatdiv .charticon.map{
width: 84px; /* 14px + 70px */
background-image: url(images/buttons/ahs-chart-map.png);
}
/* hover done in js (c line 580+) */
#chartformatdiv .charticon.disallowed {
background-position: -196px 0;
}
#chartformatdiv .charticon.column.disallowed {
background-position: -210px 0;
}
/* chart format 'tooltip - and warnings */
#chartformatinfodiv {
clear: both;
margin: 118px 0 0; /* 118 to overcome margin collapse ! */
/* height: 100px; /* just for now */
width: 334px;
padding: 18px 14px;
border-radius: 10px;
background-color: #313131;
border: #656565 1px solid;
/*z-index: 3; /* above selection panel */
opacity: 0.0;
}
#chartformatinfodiv h4 {
font-weight: normal;
font-size: 14px;
margin-left: 58px;
padding: 0 0 5px;
color: #FFBF00;
}
#chartformatinfodiv p {
font-weight: normal;
font-size: 12px;
margin-left: 58px;
padding: 0;
color: #FFFFFF;
}
#chartformatinfodiv img {
float: left;
}
/* chosen countries and indicators (in format column )*/
#yourselectiondiv {
}
h2.yourselection {
padding-top: 20px !important; /* override typical 40px */
}
#chosenlistheader {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
.chosenlistheaderleft {
display: inline-block;
width: 148px;
padding: 20px 0 10px;
}
.chosenlistheaderright {
display: inline-block;
width: 210px;
padding: 20px 0 10px;
}
/* this has scroll bar attached */
data_format_tablediv {
overflow-y: scroll; /* for jscrollpane */
}
div.chosenlistleft {
display: inline-block;
width: 148px;
vertical-align:top;
}
div.chosenlistright {
display: inline-block;
width: 190px;
vertical-align:top;
}
ul.chosenlist {
color: #0BB951;
font-size: 12px;
font-weight: normal;
list-style-type: disc;
margin-left: 12px;
}
/* indicator tooltip on selection panel, floats over your selection */
#data_indicatorinfodiv {
position: absolute;
left: 0;
bottom: 20px;
width: 334px;
padding: 18px 14px;
border-radius: 10px;
background-color: #313131;
border: #656565 1px solid;
z-index: 3; /* above selection panel */
display: none;
}
#data_indicatorinfodiv h4 {
font-weight: normal;
font-size: 14px;
margin-left: 58px;
padding: 0 0 5px;
color: #FFBF00;
}
#data_indicatorinfodiv p {
font-weight: normal;
font-size: 12px;
margin-left: 58px;
padding: 0;
color: #FFFFFF;
}
#data_indicatorinfodiv img {
float: left;
}
/* end of panel stuff */
/* MULTICHART PAGE */
#mchart_infodiv {
display: inline-block;
width: 400px;
height: 300px;
border: 1px #CCCCCC solid;
vertical-align: top;
overflow-y: scroll;
}
#mchart_chartdiv {
display: inline-block;
width: 600px;
height: 300px;
border: 1px #CCCCCC solid;
vertical-align: top;
}
#mchart_mapdiv {
display: inline-block;
width: 400px;
height: 300px;
border: 1px #CCCCCC solid;
vertical-align: top;
}
#mchart_timelinediv {
display: inline-block;
width: 600px;
height: 300px;
border: 1px #CCCCCC solid;
vertical-align: top;
}
/* MAP PAGE */
.topmapdiv {
position: relative;
padding-top: 20px;
margin-left: 60px;
}
/* fake target legend, because my series (L,M,H) are not 'highchart' series */
#maptargetlegenddiv {
position: absolute;
left: 145px;
top: 382px;
width: 350px; /*27apr2019 was 306, bigger fro French */
height: 50px;
padding: 10px;
background-color: #F0F0F0;
font-size: 12px;
display: none;
}
#maptargetlegenddiv h4 {
font-weight: bold;
}
/* fake map tertiary legend div (now vertical) */
#maptertiarylegenddiv {
position: absolute;
left: 240px;
top: 382px;
width: 200px;
height: 80px;
padding: 10px;
background-color: #F0F0F0;
font-size: 12px;
line-height: 20px;
}
/* content of fake legends */
.maplegendgreen, .maplegendyellow, .maplegendred {
margin-right: 20px;
padding-bottom: 10px;
vertical-align: middle;
}
.maplegendgreen:before {
content: "\25CF";
font-size: 30px;
color: #0BB951;
vertical-align: -4px;
}
.maplegendyellow:before {
content: "\25CF";
font-size: 30px;
color: #FFBF00;
vertical-align: -4px;
}
.maplegendred:before {
content: "\25CF";
font-size: 30px;
color: #CB4741;
vertical-align: -4px;
}
/* NEWS PAGE */
#newsdiv {
width: 500px;
}
#newsdiv h2 {
color: #999999;
padding-top: 30px;
padding-bottom: 0px;
}
#newsdiv h2 a, #newsdiv h2 a:hover, #newsdiv h2 a:visited {
color: #999999;
text-decoration: none;
}
#newsdiv h4 {
font-weight: normal;
font-size: 10pt;
font-style: oblique;
padding-bottom: 20px;
}
#newsdiv p {
padding-bottom: 10px;
}
/* from panel div ?? */
h1.newstitleclass {
font-weight: bold;
font-size: 12pt;
padding: 5px 20px;
}
h1.newstitleclass a, h1.newstitleclass a:hover, h1.newstitleclass a:visited {
color: #FFFFFF;
text-decoration: none;
}
h4.newsdateclass {
font-weight: normal;
font-size: 9pt;
padding: 20px 20px 10px;
}
.readmoreimg {
display: inline-block;
}
/* ABOUT PAGE */
.aboutcentred588 {
margin: 0 auto;
padding: 0 0 10px;
width: 588px; /* 6 columns */
text-align: center;
}
.about8coldiv {
width: 784px;
}
.about4coldiv {
width: 364px;
padding: 20px 28px 40px 0;
float: left;
font-weight: 300; /* this for any sections from WP that don't have a
*/
font-size: 16px;
line-height: 1.4;
}
.about4coldiv img {
padding-bottom: 20px;
}
.about4coldiv h3 {
padding-bottom: 20px;
}
.about4coldiv p {
padding-bottom: 20px;
}
.abouthr {
color: #CBCBCB;
clear: left;
}
#aboutsidebardiv {
width: 266px;
margin-left: 98px;
padding: 20px 28px 0 0;
float: right;
}
#aboutsidebardiv h4 {
font-size: 16px;
font-weight: bold;
padding-bottom: 15px;
}
#aboutsidebardiv p {
font-size: 14px;
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
}
#aboutsidebardiv a, #aboutsidebardiv a:visited {
color: #0BB951;
text-decoration: none;
}
#aboutsidebardiv img {
padding-bottom: 20px;
}
#aboutsidebardiv hr {
margin-bottom: 30px;
}
/* TWG PAGE */
.twgcentred588 {
margin: 0 auto 0;
padding: 0 0 10px;
width: 588px; /* 6 columns */
text-align: center;
}
.twgcentred588 h2 {
margin-bottom: 0;
}
.twgcentred588 p {
margin-bottom: 0;
}
.twg8coldiv {
width: 784px;
}
.twgleftheaddiv {
width: 540px;
padding: 20px 48px 20px 0;
margin-right: 0px;
margin-bottom: 0px;
float: left;
font-weight: 300; /* this for any sections from WP that don't have a
*/
font-size: 16px;
line-height: 1.4;
}
.twgrightheaddiv {
width: 540px;
padding: 20px 28px 20px 0px;
margin: 0 0px 0px 1px;
float: left;
font-weight: 300; /* this for any sections from WP that don't have a
*/
font-size: 16px;
line-height: 1.4;
}
.twgdiv {
clear: both;
position: relative;
width: 1070px; /* to limit length of
s. Good ??? */
}
.twgleftcoldiv {
/* width: 462px;*/
width: 294px;
/*padding: 20px 48px 20px 0;*/
padding: 5px 0px 5px 0px;
margin-right: 0px;
margin-bottom: 0px;
display:inline-block;
font-weight: 300; /* this for any sections from WP that don't have a */
font-size: 16px;
line-height: 1.4;
vertical-align:top;
}
.twgrightcoldiv {
width: 776px;
/* width: 608px; */
/*padding: 20px 28px 20px 28px;*/
padding: 5px 0px 5px 0px;
margin: 0;
display:inline-block;
font-weight: 300; /* this for any sections from WP that don't have a
*/
font-size: 16px;
line-height: 1.4;
/*
background-color: #F9F9F9;
border: 1px solid #CBCBCB;
border-radius: 15px;
*/
}
/* instruction to click on member's line */
.twginstr {
color: #FFBF00;
font-style:italic;
}
.twgrightcoldiv img {
padding-bottom: 20px;
}
.twgdiv tr.first td {
border-top: #CBCBCB 1px solid;
}
.twgdiv tr td:nth-child(1) {
/* width: 20%; /* to stop names column being too narrow in Chrome */
}
.twgdiv tr td {
/*padding-top: 0px; */
padding: 10px 10px 20px 10px;
font-weight: 300;
font-size: 16px;
border-bottom: #CBCBCB 1px solid;
cursor: pointer;
}
.twgdiv tr.twgselected td{
color: #FFBF00;
background-color: #F9F9F9;
text-decoration: none;
}
.twgdiv tr:hover{
color: #FFBF00;
background-color: #F9F9F9;
text-decoration: none;
}
.twgleftcoldiv h3, .twgrightcoldiv h3 {
font-weight: 300;
font-size: 16px;
padding-bottom: 5px;
}
.twgleftcoldiv h4, .twgrightcoldiv h4 {
font-weight: 300;
font-size: 16px;
padding-bottom: 5px;
}
.twgleftcoldiv p, .twgrightcoldiv p {
padding-bottom: 20px;
}
.twghr {
color: #CBCBCB;
clear: left;
margin: 30px 0;
}
#twgoverlay {
background-color: #F9F9F9;
border: 1px solid #CBCBCB;
border-radius: 15px;
position: absolute;
top: 0px;
left: 0px;
width: 1068px;
padding: 30px 20px 20px 20px;
z-index: 20;
display:none;
}
#twgoverlay .twgleftcol{
display:inline-block;
width: 520px;
vertical-align:top;
padding-right: 48px;
}
#twgoverlay .twgrightcol{
display:inline-block;
width: 480px;
vertical-align:top;
}
#twgoverlay h3 {
font-weight: 700;
padding-bottom: 20px;
}
#twgoverlay h4 {
font-weight: 700;
font-size: 16px;
padding-bottom: 20px;
}
#twgoverlay p {
padding-bottom: 10px;
}
#twgoverlayclosediv {
position: absolute;
top: 5px;
right: 0px;
width: 50px;
z-index: 25;
font-size: 20px;
cursor: pointer;
}
#twgoverlayclosediv:hover {
color: #FFBF00;
}
/* sidebar doesn't exist now - will it ? */
#twgsidebardiv {
width: 266px;
margin-left: 98px;
padding: 20px 28px 0 0;
float: right;
}
#twgsidebardiv h4 {
font-size: 14px;
font-weight: bold;
padding-bottom: 15px;
}
#twgsidebardiv p {
font-size: 12px;
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
}
#twgsidebardiv a, #twgsidebardiv a:visited {
color: #0BB951;
text-decoration: none;
}
#twgsidebardiv img {
padding-bottom: 20px;
}
#twgsidebardiv hr {
margin-bottom: 30px;
}
/* PRIVACY PAGE */
.privacycentred588 {
margin: 0 auto;
padding: 0 0 10px;
width: 588px; /* 6 columns */
text-align: center;
}
.privacy4coldiv {
width: 540px;
padding: 20px 28px 40px 0;
float: left;
}
/* to align with text not heading */
.privacy4coldivlower {
width: 540px;
padding: 60px 28px 40px 0;
float: left;
}
.privacy4coldiv p, .privacy4coldivlower p {
padding-bottom: 20px;
}
.privacyhr {
color: #CBCBCB;
clear: left;
}
/* INSTRUCTIONS PAGE (Getting Started)*/
.instructcentred588 {
margin: 0 auto;
padding: 0 0 10px;
width: 588px; /* 6 columns */
text-align: center;
}
.instructcoldiv {
width: 640px;
padding: 20px 144px 40px 0;
float: left;
font-weight: 300; /* this for any sections from WP that don't have a
*/
font-size: 16px;
line-height: 1.4;
}
.instructcoldiv img {
padding-bottom: 20px;
}
.instructcoldiv h3 {
font-weight: bold;
padding-bottom: 20px;
}
.instructcoldiv p {
padding-bottom: 20px;
}
.instructhr {
color: #CBCBCB;
clear: left;
}
.instructsidebardiv {
width: 364px;
margin-left: 28px;
padding: 20px 0 0 0;
float: right;
font-size: 14px; /* was 12px;*/
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
}
/*
.instructsidebardiv h4 {
font-size: 14px;
font-weight: bold;
padding-bottom: 15px;
}
*/
.instructsidebardiv h3 {
font-weight: bold;
padding-bottom: 20px;
}
.instructsidebardiv p {
font-size: 14px; /* was 12px;*/
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
}
.instructsidebardiv a, #instructsidebardiv a:visited {
color: #0BB951;
text-decoration: none;
}
.instructsidebardiv img {
padding-bottom: 20px;
}
.instructsidebardiv hr {
margin-bottom: 30px;
}
/* CONTACT PAGE (mostly styled within the FastSecureContactForm plugin, see CSS below*/
.contactcentred588 {
margin: 0 auto;
padding: 0 0 10px;
width: 588px; /* 6 columns */
text-align: center;
}
.contact6coldiv {
margin-left: 196px;
padding-top: 20px;
width: 588px;
float:left;
}
#containerdiv .contact6coldiv p {
font-size: 23px;
font-weight: 300;
color: #B2B2B2;
padding-bottom: 20px;
}
.contactsidebardiv {
margin-left: 28px;
padding-top: 20px;
width: 196px;
float:left;
}
#containerdiv .contactsidebardiv p {
color: #B2B2B2;
line-height: 1.5;
}
div.wpforms-container-full .wpforms-form div.wpforms-description {
font-size: 18px;
font-weight: 300;
color: #B2B2B2;
padding-bottom: 20px;
}
div.wpforms-confirmation-container-full {
background: #FFFFFF;
}
/* general classes (must be at end to override above) */
.green {
color: #0BB951;
}
.gold {
color: #FFBF00;
}
.red {
color: #CB4741;
}
.lightgrey {
color: #B2B2B2;
font-weight: 300;
}
.darkgrey {
color: #313131;
}
.bold {
font-weight: bold;
}
.normalfont {
font-weight:normal !important;
}
.lightfont {
font-weight:300;
}
.larger {
font-size: 16px;
}
.largest {
font-size: 26px;
}
.centred {
margin: 0 auto;
}
.floatleft {
float: left;
}
.floatright {
float: right;
}
.floatclear {
clear:both;
}