/* ------------------------------------------------------------------ */
/* Colour palette from:                                               */
/* http://www.colourlovers.com/palette/77121/Good_Friends             */
/* #D9CEB2>ebe5d8,#948C75,#D5DED9,#7A6A53>524738,#99B2B7              */
/* ------------------------------------------------------------------ */
/* Colour palette:                                                    */
/* - dark: #1f1b15                                                    */
/* - medium: #7a746c                                                  */
/* - light: #cbcbcb                                                   */
/* - bg: #fefefe                                                      */
/* - a:hover: OrangeRed                                               */
/* Colours:                                                           */
/* - Blue - RGB: 22, 63, 102 - Hex: 163F66                            */
/* - Green - RGB: 63, 129, 129 - Hex: 3F8181                          */

/* ------------------------------------------------------------------ */
/* Top-level rules                                                    */
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, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	font-size: 100%;
	color: #000;
	line-height: 1.4;
}
/* ------------------------------------------------------------------ */
/* - Fonts                                                            */
html, body, div, span, applet, object, iframe,
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, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	font-family: an-text, Arial, Helvetica, sans-serif;
}
input, 
textarea {
	font-family: an-text, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family: an-headings, Arial, Helvetica, sans-serif;
}
.an-logo-txt {
	font-family: an-logotype, an-text, Arial, Helvetica, sans-serif;
	font-size: 1.4rem;
	line-height: 1; /* align size with standard font */
	color: inherit; 
}
.cursive {
	font-family: an-cursive, cursive;
}

/* ------------------------------------------------------------------ */
body {
	background-color: #fdfdfd;
	position: relative;
	text-align: center;
	text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------ */
/* Flex-defined divs                                                  */
.isflex {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
/* ------------------------------------------------------------------ */
/* To be deleted:                                                     */
.flextop {
	-ms-flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-ms-flex-justify-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	/*-ms-align-items: flex-start; 
	-webkit-align-items: flex-start; 
	align-items: flex-start; */
	-ms-align-content: flex-start; 
	-webkit-align-content: flex-start; 
	align-content: flex-start; 
}
.flexcenter {
	-ms-flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-ms-flex-justify-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-ms-align-items: center; 
	-webkit-align-items: center; 
	align-items: center; 
	-ms-align-content: flex-start; 
	-webkit-align-content: flex-start; 
	align-content: flex-start; 
}
.flex-space-between {
	-ms-flex-justify-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
/* ------------------------------------------------------------------ */
.flex-row-col {
	-ms-flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
}
.flex-row {
	-ms-flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
}
.flex-col {
	-ms-flex-flow: column nowrap;
	-webkit-flex-flow: column nowrap;
	flex-flow: column nowrap;
}
.flex-jc-center {
	-ms-flex-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.flex-jc-space-around {
	-ms-flex-justify-content: space-around;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
.flex-jc-space-between {
	-ms-flex-justify-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.flex-ai-center {
	-ms-flex-align-items: center;
	-webkit-align-items: center;
	align-items: center;
}
.flex-ai-top {
	-ms-flex-align-items: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.col2 {
	flex: 0 1 50%;
}
.col3 {
	flex: 0 1 33%;
}

/* --- Multi-columns (2-cols) --- */
.grid-2 {
  -ms-columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -ms-column-gap: 15px;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  column-gap: 15px;
}
/*.grid-2 > * {
  display: inline-block;
  width: 100%;
}*/
/* --- Multi-columns (3-cols) --- */
.grid-3 {
	-ms-columns: 3;
	-webkit-columns: 3;
	-moz-columns: 3;
	columns: 3;
}
/* --- Multi-columns (4-cols) --- */
.grid-4 {
	-ms-columns: 4;
	-webkit-columns: 4;
	-moz-columns: 4;
	columns: 4;
}
/* ------------------------------------------------------------------ */
/* Main page container                                                */
#container {
	position: relative; 
	top: 0; 
	left: 0;
	max-width: 780px;
	margin: 0 auto;
	text-align: left; 
	z-index: 2;
}
div.container2 {
	margin: 0 auto;
	width: 90%;
	max-width: 800px;
	padding: 6px 0;
	background-color: rgba(254, 254, 254, 0.8);
	border-radius: 10px;
}

/* --- Main section --- */
div#main {
	/*margin-top: 0.5em;*/
}
/* TOCHECK */
div#top_title {
	padding-top: 4px;
}

/* --- Top intro section --- */
div#intro {
	margin-bottom: 1em;
}
div#intro_claim {
	padding: 1.5em 0;
	text-align: center;
	background: url('../images/bing_sbox.png') no-repeat 100% 50%;
}
div#intro_claim p.cursive {
	color: #163f66;
}

/* --- Defines standard padding for main blocks (desktop vs. mobile) --- */
div.stdpadding {
	text-align: left;
	margin-top: 1em;
	padding: 0 1.25%;
}

/* --- Other sections --- */
div#menu {
	/*margin-top: 2em;*/
	-ms-flex-justify-content: space-around;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-ms-flex-align-items: center;
	-webkit-align-items: center;
	align-items: center;
}
div#menu00 {
	align-self: flex-end;
}
div#menu div.divtitle {
	width: 200px;
}
div#process, 
div#project {
    display: none;
}
div#process h2, 
div#project h2 {
	cursor: pointer; 
}
div.divtitle {
	padding: 0.25em;
	text-align: center;
}
div.divtitle h2 {
	margin-top: 0;
	padding: 2px 0;
	cursor: pointer; 
}
/*** Elements folding/unfolding sub-elements ***/
h2.foldsec {
	display: none;
}

div#project div.col {
	-ms-flex: 1 1 50%;
	-webkit-flex: 1 1 50%;
	flex: 1 1 50%;
}
div#legalbody div.col, 
div#samplebody div.col {
	-ms-flex: 1 1 33%;
	-webkit-flex: 1 1 33%;
	flex: 1 1 33%;
}

/* --- Flex columns, generic attributes --- */
div.coll {
	padding-right: 1.0em;
}
div.colc {
	padding-left: 1.0em;
	padding-right: 1.0em;
}
div.colr {
	padding-left: 1.0em;
}

div#col1 {
	order: 1;
}
div#col2 {
	order: 2;
}
div#col3 {
	order: 3;
}

/* --- Basic elements --- */
img {
	/* the following 3 allow for dyn resize */
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
div.illus {
	text-align: center;
	padding-top: 2.5%;
	padding-bottom: 2.5%;
}
div.illus img {
	max-width: 75%;
	flex: 0 0 auto;
}
div.illus img:active {
	max-width: 100%;
}

h1 {
	font-size: 2.0rem;
	color: #fdfdfd;
}
h2 {
	font-size: 1.6rem;
	color: #524738;
}
h3 {
	font-size: 1.4rem;
	color: #524738;
}

h1 {
	background-color: #99b2b7; 
	border-radius: 3px;
	padding-left: 8px; 
	padding-right: 8px; 
	margin-bottom: 0.75em;
}
h2 {
	background-color: #e6e4df;
	border-radius: 3px; 
	padding: 2px 0 2px 8px; 
	margin-top: 1.25em;
	margin-bottom: 0.5em;
}
h3 {
	padding: 3px 3px 0 2px; 
	margin-top: 1em;
	margin-bottom: 0.5em;
	border-bottom: 1px solid #99b2b7; 
}
h4 {
	margin-top: 0.75em;
	margin-bottom: 0.5em;
	border-bottom: 1px solid #99b2b7; 
}
p, 
li,
blockquote {
	font-size: 1.0rem;
}
td, 
th {
	font-size: 0.9rem;
}
p {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 0;
}
p.top {
	margin-top: 0.75em;
}
p.xtop {
	margin-top: 2em;
}
p.compact {
	margin-bottom: 0;
}
p.cursive {
	font-size: 1.8rem; 
	margin-top: 0.5em; 
	/*text-shadow: 2px 2px 2px #aaa;*/
}
.inlinenote {
	margin: 0 0 0.5em 2.4em;
}
ul.simple {
	display: block; 
	margin-left: 0.9em;
	margin-bottom: 0.5em;
}
ul.arrow {
	display: block; 
	margin-left: 2.4em;
	margin-bottom: 0.5em;
}
ul.inline {
	margin: 0 0 0.5em 0; 
}
ul.inline li {
	display: inline; 
}
ul.inline li::before {
	content: "♦ "; 
}
ul.inline li:first-child::before {
	content: ""; 
}
ul.circle {
	list-style-type: circle;
}
ul.disc {
	list-style-type: disc;
}
ul.square {
	list-style-type: square;
}
ul.simple li {
	margin: 0 0 0 1em;
}
ul.arrow li::before {
	content: "↪ ";/* ⌕ ⪧ ↪ */
}
ul.arrow li {
	text-indent: -1.2em;
}
blockquote {
	background: url('../images/dblquote.png') no-repeat;
	padding-left: 32px;
	padding-right: 32px; 
	margin: 0 0 0.5em 0;
}

strong {
	font-weight: bold;
	color: #18436b; 
}
em {
	font-style: italic;
	color: inherit; 
}
.normal {
	font-style: normal;
	color: inherit; 
}
.emph {
	font-style: italic;
	color: inherit; 
}
.strong {
	font-weight: bold;
	color: #3d352a;
}
.vstrong {
	font-weight: bold;
	color: #674941;/*E4EBF2*/
}
.smaller {
	font-size: 0.9rem;
}
.xsmaller {
	font-size: 0.8rem;
}
.xbig {
	font-size: 2rem;
}
.maroon {
	font: inherit;
	color: maroon;
}
.anblue {
	color: #18436b;
}
.center {
	text-align: center;
}
div.secsep {
	background: url('../images/an_header_bot.png') no-repeat center bottom;
	min-height: 0.25em;
	margin: 0.75em 20%;
}

a {
	color: inherit;
	text-decoration: none;
	font-size: inherit;
}
a.plain {
	color: inherit;
	text-decoration: underline;
}
a.extlink {
	background: url('../images/extlink_12x12.png') no-repeat right center; 
	padding-right: 15px;
}
a:hover {
	color: OrangeRed; /*#362622*/
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	font-family: inherit; 
}

/* --- Header --- */
/* fixed header: 
   - position:fixed; top:0; left:0; right:0; 
   - the, div#main goes with margin-top:77px;
   issue: appearance of vscroll bars which make header shake
*/
header {
	position: relative; 
	min-height: 64px;
	background-color: #163F66;
}
header div.container2 {
	padding: 0;
	border-radius: 32px;
	background-color: #18436b;
}
/* --- Header - nav/subnav --- */
/* --- Inspired by http://designmodo.com/create-drop-down-menu-search-box/ --- */
nav {
    position: relative;
	padding-right: 6px; 
	text-align: right;
}
nav img#hamburg {
	width: 28px; 
	height: 28px; 
	margin-top: 7px;
}
.subnav {
    visibility: hidden;
    position: absolute;
    top: 20%;
    right: 40px;
    height: auto;
    opacity: 0;
    transition: all 0.1s;
    background-color: white;
	padding: 2px; 
	border: 1px solid #cbcbcb;
	border-radius: 4px;
	white-space: nowrap;
}
.subnav li {
    /*float: left;*/
	padding-left: 6px;
	padding-right: 6px;
	font-size: 0.9rem;
	color: inherit;
}
.subnav li::after {
	content: " ▾";
}
.subnav li a {
	color: inherit; 
}
.subnav li a:hover {
	color: OrangeRed; 
}
/*
*** hover not appropriate on mobile devices ***
#menu:hover .subnav {
    visibility: visible;
    top: 45%;
    opacity: 1;
}
*/

/* --- Footer --- */
footer {
	margin-top: 1em;
	margin-bottom: 0.5em;
}
.box-soft {
	border: 1px solid #99b2b7;
	border-radius: 4px;
	padding: 6px 1em 0 1em;
}
footer * p {
	font-size: 0.7rem;
	color: inherit;
}

/* --- Homepage - Splash section --- */
#splashspot {
	background: #e1dcd2 url("../images/splash/sbg0.jpg") no-repeat scroll center center / cover ;
	padding: 180px 0 60px 0;
	text-align: center;
}
#splashspot .container2 {
	padding: 20px 0;
}
#splashspot .stdpadding {
	margin-top: 0;
}
#splashspot h1 {
	font-family: an-text, Arial, Helvetica, sans-serif;
	font-size: 1.25rem;
	color: #163f66;
	font-weight: 600;
	background-color: transparent; 
	margin-bottom: 0.25em;
}
#splashspot p.subtitle {
	font-family: an-headings, Arial, Helvetica, sans-serif;
	font-size: 2.4rem;
	color: #163f66;
	text-align: center;
	margin: 0 0 0.25em 0;
}
#splashspot li {
	font-size: 1em;
	color: #163f66;
	font-weight: 600;
}
#splashspot .thensep {
	font-size: 85%;
	color: maroon;
}

/* --- Piwik optout iframe --- */
#an_piwik_iframe {
	margin-top: 6px;
	border: 1px solid #948c75;
	border-radius: 4px; 
	width: 100%;
	min-height: 240px;
	overflow: auto;
}

/* --- Cookie choice messaging --- */
#cookieChoiceInfo {
	opacity:1;transition:opacity 1s ease;
	position: fixed; 
	width: 100%; 
	background-color: #3F8181; 
	display:-ms-flexbox;
	display: flex;
	-ms-flex-justify-content: center; 
	justify-content: center; 
	-ms-flex-align: center; 
	align-items:center; 
	margin: 0; 
	left: 0; 
	bottom: 0; 
	padding: 1rem 0; 
	z-index: 1000; 
	color: white; 
	font-size: 16px; 
	line-height: 1.5em; 
	font-style: italic; 
}
#cookieChoiceText {
	color: inherit;
	margin: 0 4px;
}
#cookieChoiceMoreInfo {
	flex: 0 1 auto; 
	margin: 0 12px;
	text-decoration: underline;
}
#cookieChoiceDismiss {
	flex: 0 1 auto; 
	background-color: #163F66; 
	color: gold;
	padding: 4px 18px; 
	border-radius: 3px;
	font-style: normal; 
	font-weight: 700;
	white-space: nowrap;
	margin: 0 4px;
}