/* alan is kingly */ /* page is the overall container which contains everything within the body EXCEPT the footer element - so the body tag has two childer,

and

is 100% width and it directly contains

which is 960px wide and centered within

*/ #page { /* following rules on min-height, height (twice) and margin required for sticky footer */ min-height: 100%; height: auto !important; height: 100%; width: 100%; min-width: 1100px; text-align: center; /*margin: 0 auto -403px;*/ /* the bottom margin is the negative value of the footer's height i.e. (height + padding) of footer */ } #main { width:1100px; padding: 40px 0; /* setting this margin is what allows us to centre this div i.e.

which is a direct child of */ margin: 0px auto; } /* mainleft is a third layer of 'main'/'outer' container, which just sits inside #main and fills it 100% width but aligns text left instead of centre */ #mainleft { width:100%; text-align:left; background: #fff; padding: 20px; box-sizing: border-box; } /* following 2 classes (.footer and .push) required for sticky footer */ .footer { color:inherit; /* background-color:#323026;*/ } .push { /* the .push div is a very neat construct to balance the footer to ensure the footer is always flush to the bottom regardless of whether the actaul content pushes the viewport down far enough to get a vertical scrollbar or not i.e. fills the viewport or not */ /*height: 403px;*/ /* .push must be the same height as .footer i.e. (height + padding) of footer */ } /* following are all related to items in the footer */ .statscontainer { width:100%; text-align:center; color:inherit; } .statsiframe-country { min-width:1010px; height:185px; border-width:0; border-style:none; } .statsiframe-world { min-width:1010px; height:185px; border-width:0; border-style:none; } .statsIntro { width:1100px; padding:10px 0px 10px 4px; color:#FFFFFF; background-color:#323026; font-size:24px; text-align:left; /* this next margin rule makes the div centre aligned within page */ margin:0 auto; } .statsOutro { width:1100px; height:auto; color:#FFFFFF; background-color:#323026; /* this next margin rule makes the div centre aligned within page */ margin:0 auto; } .statsOutroCR { float:left; font-size:x-small; color:#5D5A49; background-color:transparent; padding-top:4px; padding-bottom:20px; padding-left:7px; height:100%; } .footerimage { width:100%; height:190px; text-align:center; background-color:#FFFFFF; display:none; } .footerimageinner { width:90%; min-width:1010px; height:190px; } /* end of footer stuff */ .events-map-container { position:relative; margin: 0px auto; width:100%; text-align:left; color:inherit; background-color:#FFFFFF; height:600px; } .loadingmapdiv { position:absolute; top:20px; left:20px; font-size:20px; z-index:0; } /* this navigation below gets us to the top level list of events or subregions of the "focus" region (usually a country), such that the list will sit flush to the lhs of the container */ .events-map-container > div > div > div > ul, .events-map-container > div > div > div > ul > li { margin-left: -1.4em; /* IE7-only - the ul starts flush left in IE7 so we don't want the additional push left */ *margin-left: 0em; } /* this navigation below gets us to the info panel that changes when we hover over an event */ .events-map-container > div > div > div > div { font-size:18px; } div#tree___34LHOENOP7 ul { margin: 0px; padding-left: 23px; } @keyframes fade { from { opacity: 0; } } .blinking { animation: fade 0.5s infinite alternate; } .leaflet-control-layers-expanded { font-size: 13px; color: #D99F00; } .leaflet-control-layers-expanded {background: #F5FAFC;} .leaflet-container a {color: #FFA300;} .mapRegionName { cursor:pointer;color:#FFA300; } .mapLeafNodeLI { padding-left: 20px; list-style: none; } @media (max-width: 1160px) { #page { width: 100%; min-width: auto; } #main, .statscontainer, .headerbar{ width:100%; padding-left:30px; padding-right:30px; box-sizing: border-box; } } @media (max-width: 767px) { #main { padding: 30px 0; } #main, .statscontainer, .headerbar{ padding-left: 20px; padding-right: 20px; } } @media (max-width: 1024px) { div#cMAPx3R3NPEQN5Ji9Mq0 { width: initial !important; } }