:root {
	--pad-large: 30px;
	--pad: 20px;
	--pad-small: 10px;


}

/* simpler format css */

.navbar2 li.active {
    background-color: #00546a;
	
}
.navbar2 li.active a {color:#FFFFFF !important;}
/* text */

h1 {
	font-weight: 100;
	font-size: 3.4em;
	color: #ffffff;
	background-color: #00546a;
	box-sizing: content-box;

    margin:0 -25px !important;/*  */
	padding: var(--pad); /* 30px 350px 10px 25px; why the rhs padding? */
	border: 4px solid #00546a;
}

h2 {
	font-weight: 400;
	font-size: 2.4em;
	color: #00548a;
	padding-bottom: var(--pad);
	position: relative;
}

h3 {
	clear: both;
	font-size: 1.8em;
	font-weight: 100;
	color: #41768A;
	margin:var(--pad) 0;
	position: relative;
}
/* collapse compound margins */
h2 + h3 {margin-top: 0;}
h2 + section + h3.icon {margin-top: 0;}

h4 {
	font-size: 1.2em;
}

p {margin: 0 0 1em 0;} /* no top margin to align text columns */

li {margin-bottom: var(--pad-small);}

figure {margin:0 0 var(--pad) 0; padding:0;}
figcaption {
    font-size: .9em;
	color: #00807e;
	margin-top: 10px;
	font-weight: bold;
}
.bg-dark, .bg-dark figcaption,  .bg-dark a {color:white;text-decoration: none; font-weight: normal;}
.bg-dark figcaption {padding: 5px;display: block; }

/* .chapter */
article {
	margin: 3% 1%;
}

/* temp */
.columns { 
        columns: 3 auto;
        column-gap: 30px;
		border: none;
		clear: both;
}
.columns h2, .columns h3 {column-span: all}

img {max-width: 100%; display: block; box-sizing: border-box;}

.banner {margin:0 -23px;margin-top:-10px;}/*-2% 23px but content has margin as percent*/
.banner img {max-width: auto;}

/* image blocks, unless grid or flex offer flexible option */
.float-right {float:right; margin-left: 20px;} /* 3% */
.float-left {float:left; margin-right: 20px;} 
.float-clear {clear: both;}
.float-clear-not {clear:none;}

.flex-middle { display: flex; justify-content: center; flex-direction: column;}
.flex-middle > * {margin:auto;}
.flex {display: flex;}
.flex-equal > * {  flex: 1; } 

.flex-pad > * {padding-left: var(--pad);}
.flex-pad > *:first-child {padding-left: 0;}
/*::not(:first-child)*/

.bg-dark {background-color: #00546a;}

.pad {padding: var(--pad);}
.pad-large {padding: var(--pad-large);}

a.btp { float:right; margin-top: -1.8em; margin-right: -30px; font-size: 0.9em;  transform: rotate(-90deg);} 
#content {position: relative;}

/* link */
.toc { 

		position: fixed;
		width: 200px;
		height: auto;
		overflow: hidden;
		z-index: 99999999;

		transform: rotate(-90deg);
		width: 42px; 
		margin-left: 944px;
		margin-top: -56px;
		background-color: #00546a; /* #3366cc;*/
		padding: 2px 5px;
		color: #fff !important;
		font-size: 10px;
		border-radius: 10px 10px 1px 1px;
		text-decoration: none;
		line-height: 16px;
}
/* header icons */

.icon::after {
	content: "";
	position: absolute;
	top: -20px; right: 0;
	width: 60px; height: 60px;
	background: url("/state-of-the-climate/ui/icons/FutureClimate.png") no-repeat right;
	filter: hue-rotate(80deg);
  }


.future-climate::after { background-image: url("/state-of-the-climate/ui/icons/FutureClimate.png");}
.cryosphere::after		{ background-image: url("/state-of-the-climate/ui/icons/Cryosphere.png");}
.greenhouse::after		{ background-image: url("/state-of-the-climate/ui/icons/GreenhouseGases.png");}

.cyclones::after		{ background-image: url("/state-of-the-climate/ui/icons/TropicalCyclones.png");}
.temperature::after		{ background-image: url("/state-of-the-climate/ui/icons/Temperature.png");}
.streamflow::after		{ background-image: url("/state-of-the-climate/ui/icons/Streamflow.png");}
.snowfall::after	{ background-image: url("/state-of-the-climate/ui/icons/Snowfall.png");}
.seaLevel::after		{ background-image: url("/state-of-the-climate/ui/icons/SeaLevel.png");}
.rainfall::after		{ background-image: url("/state-of-the-climate/ui/icons/Rainfall.png");}

.sst::after		{ background-image: url("/state-of-the-climate/ui/icons/OceanHeat.png");}
.acid::after		{ background-image: url("/state-of-the-climate/ui/icons/OceanAcid.png");}
.rainfall-heavy::after		{ background-image: url("/state-of-the-climate/ui/icons/HeavyRainfall.png");}
.carbon::after		{ background-image: url("/state-of-the-climate/ui/icons/GlobalCarbon.png");}
.fire::after		{ background-image: url("/state-of-the-climate/ui/icons/FireWeather.png");}

.spare::after		{ background-image: url("/state-of-the-climate/ui/icons/###.png");}

.box-feature { background-color: #9EE1DF;  padding: var(--pad);margin: var(--pad-large)  0 ; border: none;}
.box-feature h3 {margin-bottom: var(--pad);}
.box-feature li { list-style-image: url("/state-of-the-climate/ui/icons/bullet.png");}

.feature-light {background-color: #DEF7F7;}

.box-feature li:last-child, .box-feature p:last-child {margin-bottom: 0; padding-bottom: 0;}
h2 + .box-feature {margin-top: 0;}