
/* @import url(https://fonts.googleapis.com/css?family=Rosario:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic); */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&family=Rosario:ital,wght@0,400;0,700;1,400;1,700&display=swap');

article, aside, figure, footer, header, nav, section { display:block; }		/* For HTML5 ignorant browsers */

body {
	background-color: #f5f5f5;
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	hyphens: manual;
}
body, h1, h2.cover {
	font: 1em Rosario, Corbel, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
.dark {
	background-color: #2D3437;
	color: #DDD;
}

.bordered, table { border: thin solid #6d848f; }

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: 0;
	max-width: 100%;
}

.contentblock, .contentblockWide, .footer, .header, .headerTop, .leader, #updatesBlockContainer {
	border: 0;
	margin-left: auto;
	margin-right: auto;
}
#coverHLContainer { max-width: 780px; margin: 0 auto; }
.contentblock, .contentblockWide { overflow: auto; }
.contentblock, .header, nav.leader {
	width: 100%;
	max-width: 820px;
}
.headerTop {
	height: calc(100vw / 11.5);
	max-height: 140px; min-height: 90px;
	background-image: url(/include/phpthumb/phpThumb.php?src=%2Fimages%2Fheader-bg.020711.jpg&w=1280&hash=cb0ddaa498463cbbff5bc67e91b665331da71b40042947ec4337a0438df57902);
	background-size: cover;
	background-position: 10% 90%;
}
.contentblockWide, #updatesBlockContainer {
	width: 1200px;
	max-width: 100%;
}
#updatesBlock { background-color: #f5f5f5; }
.dark #updatesBlock { background-color: #2D3437; }
.contentblock, .contentblockWide { padding: 0 0 20px; }		/* 40px padding to be added to subelements */

.graphicblock, .journalblock, .contents p, .button a { border: 1px solid #6d848f; }

.journalblock {
	width: 738px;
	height: 100px;
	float: left;
	clear: left;
	margin-top: 20px;
}
.journalblock, .graphicblock {
	max-width: 49.1%;
	background-size: cover;
}

.printOnly { display: none; }

.contentblock p, .contentblock ul, .contentblock ol, .contentblock dl, .contentblockWide p, .contentblockWide ul, .contentblockWide ol,  .contentblockWide dl, .content, blockquote, .contentblock form, .contentblockWide form, pre {
	line-height: 150%;
	margin: 0.7em auto;
	padding: 0 20px;
	max-width: 740px;
	text-align: left;
}
blockquote {
	max-width: 660px;
}
footer p, nav p, blockquote { padding: 0 40px; }

.errors {
	-moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
	max-width: 740px;
	margin: 20px auto;
}
.errors h1, .errors h2 { font-weight: 600; font-size: 116%; text-align: left; margin: 12px 0; line-height: 150%; }
img.errorIcon { float: left; margin: 1em 1.5em 2em 1.5em; max-width: 15%; }

ul {
	list-style: square;
	list-style-image: url("/images/bullet_rect.141005.gif");
	list-style-position: outside;
}
li { margin-left: 1em; }

nav.header ul, nav.leader ul {		/* UPDATE */
	margin: 0 auto;
	max-width: 740px;
	padding: 0 20px;
	list-style: none;
}
nav.header li, nav.leader li {		/* UPDATE */
	margin-left: 0;
	display: inline-block;
	height: 1.4em;					/* Need fixed height to know cover page deductions */
}

.return { font-weight: bold; }
dt {
	float: left;
	font-weight: bold;
}
dd { margin: 0.33em 0 0.33em 10em; }

abbr { border-bottom: 1px dotted #BBBBBB; }

q:before, q:after { content: ""; }

h1, h2, h3, h4, .byline {
	max-width: 740px;
	padding: 0 20px;
	margin-left: auto; margin-right: auto;
}
h1 {
	margin-top: 2em; margin-bottom: 1em;
	font-size: 200%;
	text-align: center;
	font-weight: 700;
}
h2, ul.button { font-weight: 600; }
h2 {
	font-size: 120%;
	margin-top: 1em; margin-bottom: 1em;
}
h2.headline {
	text-align: center;
	margin-bottom: 2em;
}
h3 {
	font-size: 100%;
	line-height: 120%;
	margin-top: 1.5em; margin-bottom: 0.7em;
	font-weight: 600;
	color: #5E6E75;
}
.dark h3 { color: #A5B4B4; }

.cover img {
	height: calc(100vh - (7em + 0.8 * (1.4em + 0.7em * 2)));		/* 100% less height & padding for leader & headers */
    object-fit: cover;
	object-position: 50% 50%;
    width: 100%;
}
#flag img {
	min-height: 7em;
	object-fit: cover;
	object-position: 50%;
	width: 100%;
}
#coverHeadlineBlock {
	position: absolute;
	color: white;
}
header.cover {
	position: relative;
	margin-bottom: 2em;
}
section.cover, header#flag {
	background-color: white;
	color: black;
}
.dark section.cover, .dark header#flag { background-color: #f5f5f5; }
section.cover {	height: 7em; }
header#flag { margin: 0 0 1em; }
.dark header#flag { margin-bottom: 3em; }

h1.cover {
	text-align: left;
	font-size: 400%;
	margin: 0 auto;
	text-shadow: 0 0 3em #000;
}
h2.cover, #flag h1 {
	margin-top: 0; margin-bottom: 0;
	text-align: left;
	font-size: 200%;
	font-weight: 600;
}
h2.cover { padding-top: 0.6em; padding-bottom: 0.3em; }
#flag h1 { padding-top: 0.8em; padding-bottom: 0.5em; }
.cover .byline { margin-top: 0; }
.byline, .photoByline {
	font-size: 90%;
	margin-top: 0.5em; margin-bottom: 0;
	text-transform: uppercase;
}
#flag .byline {
	margin-top: 0;
	padding-bottom: 2em;
}
#credit { margin-bottom: 2em; }
.photoByline { font-size: 80%; }


.opaqueBlock, .opaqueBlockDark {
	-moz-border-radius: 0.5em;
	-khtml-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
	padding: 0.5em;
	margin: 1em;
	max-width: 13em;
}
.opaqueBlock { background: rgb(242, 255, 255); /* fallback */ }
.opaqueBlock[class] {													/* This is ignored by IE, and is the solution for the fact that everything else ignores the IE filters */
	background: rgba(242, 255, 255, 0.66);
	backdrop-filter: blur(5px);
}
.opaqueBlockDark { background: rgb(45, 52, 55); /* fallback */ }
.opaqueBlockDark[class] {													/* This is ignored by IE, and is the solution for the fact that everything else ignores the IE filters */
	background: rgba(45, 52, 55, 0.66);
	backdrop-filter: blur(5px);
}

.journalblock .opaqueBlock[class] { background: rgba(242, 255, 255, 0.4); }
.opaqueBlock h2, .opaqueBlockDark h2, .opaqueBlock h3, .opaqueBlockDark h3, .opaqueBlock h4, .opaqueBlockDark h4 { margin: 0; }
.opaqueBlock ul, .opaqueBlockDark ul { margin: 0; }
.opaqueBlock p, .opaqueBlockDark p { margin: 0.3em 0 0 0; }

ul.button {
	list-style: none inside none;
	text-align: left;
	font-size: 102%;
	margin: 0 auto;
	padding: 20px;
	max-width: 740px;
}
ul.aboutLinks, ul.indexLinks {
	border-top: 4px solid #6D848F;
}
ul.photoContents {
	max-width: 100%;
	margin: 0;
	padding: 0;
}
.photoContents li.button {
	margin: 0 0 20px 0;
	float: none;
	width: 100%;
}
li.button {
	float: left;
	margin: 0 20px 20px 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 48.5%;
}
li.buttonLast {
	margin-right: 0;
	float: right;
}
li.buttonLast.aboutLinks { float: left; }
li.aboutLinks {
	width: 31%;
}
.aboutLinks a, .photoContents a, .indexLinks a {
	padding: 20px;
	display: block;
	line-height: 120%;
}
.aboutLinks a, .indexLinks a { height: 60px; }
.photoContents a {
	width: 100%; height: 160px;
	font-size: 160%; font-weight: 600;
	padding: 3em 0 0 1.5em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.indexPhotocontents .photoContents a {
	font-size: 120%;
	padding-top: 4em;
	height: 140px;
}

.contents { font-size: 166%; font-weight: bold; }
.contents p {
	padding: 80px 0 20px 20px;
	margin: 1.2em 0 0 0;
}

article p:first-of-type { margin-top: 0; }

.refs ul { list-style-image: url("/images/bullet_ref.090325.gif"); }
.pdf ul, ul.pdf {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	font-style: normal;
	font-weight: bold;
	line-height: 133%;
}
.pdf ul li, ul.pdf li {
	background-image: url(/images/pdf-icon.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 25px;
	margin: 0 0 0.3em;
}
.refs li, .links li { margin-top: 0.4em; margin-bottom: 0.4em; }
.refs h2, .links h2 {
	margin-top: 3em;
	text-align: left;
}
.socialMenu ul {
	list-style: none;
	list-style-image: none;
	padding: 0;
	margin: 0;
	line-height: 100%;
}
.socialMenu li {
	float: left;
	margin: 0.5em 0.25em;
}

.index {
	margin: 2em 2em 0 2em;
}
.index li { margin: 1em 0; }

.floatLeftClear {
	float: left;
	clear: left;
	margin: 0.5em 1.5em 1em 0;
	text-align: left;
}
.floatCenterClear {
	clear: both;
	margin: 2em auto;
	text-align: center;
	display: block;
}
.floatRightClear {
	float: right;
	clear: right;
	margin: 0.5em 0 1em 3em;
	text-align: right;
}
.floatRightClear, .floatLeftClear { max-width: 45%; }
.floatCenterClear { max-width: 100%; }
.floatLeftClear, .floatCenterClear, .floatRightClear { border-bottom: 1px solid #6d848f; }

#updatesBlock {
	float: right;
	clear: right;
	width: 140px;
	margin: 5px 20px 5px 20px;
	border: 4px solid #6D848F;
	padding: 4px;
	position: relative;
	background-color: rgba(245, 245, 245, 0.95);
	font-weight: initial;
}

.commentsBlock {
	max-width: 740px;
	margin: 3em auto 0 auto;
	border: 4px solid #6D848F;
	padding: 20px 20px 0 20px;
}

.caption, .footer, .header, section.leader, .socialMenu { font-size: 80%; }

.socialMenu { padding-left: 15px; padding-right: 15px; }

.caption {
	margin: 0.5em auto;
	text-align: center;
	font-style: italic;
}
.floatCenterClear .caption { max-width: 740px; padding: 0 20px; }
.floatRightClear .caption { padding-right: 20px; }
.floatLeftClear .caption { padding-left: 20px; }
.caption, .socialMenu { color: #666666; }
.dark .caption, .dark .socialMenu { color: #BBBBBB; }

.footer, .header, section.leader { padding: 0.7em 0; }
footer, header, section.leader {
	background-color: #6d848f;
	color: #FFF;
	font-weight: 600;
}
section.leader { position: relative; }

footer { text-align: center; }

.footer p, .header p { margin: 0; }

blockquote { font-style: italic; }

.floatRightQuote, .floatLeftQuote, .boxCenterQuote {
	background-color: #cddcdc;
	border: 1px solid #6d848f;
	font-style: normal;
}

.nowrap { display: inline-block; }

sup {
	position: relative;
	vertical-align: top;
	height: 0;
	line-height: 1;
	top: 0.1em;
 }

.floatRightQuote p, .floatLeftQuote p, .boxCenterQuote p, .floatRightQuote ul, .boxCenterQuote ul, .refs ul, .links ul, .footer, .header, .leader, .caption, .socialMenu, ul.button, .opaqueBlock a, h2, h3, h4, h5, .byline, .photoByline, table, input, textarea {
	font-family: Open Sans, Tahoma, Geneva, Arial, Helvetica, sans-serif;
	/* font-size-adjust: 0.45; */
}
input, textarea {
	font-size: 100%;
	padding: 0.2em;
	border: 1px solid #6d848f;
    max-width: 100%;
	box-sizing: border-box;
}
input[type="button"], input[type="submit"] { width: 10em; }

.floatRightQuote p, .floatLeftQuote p, .boxCenterQuote p, .floatRightQuote ul, .boxCenterQuote ul, .links ul, .opaqueBlock a, table { font-size: 93%; }
.refs ul, .links ul { text-align: left; }
.refs ul { font-size: 80%; }

blockquote.floatRightQuote {
	float: right;
	clear: right;
	max-width: 35%;
	margin: 2px 0 20px 20px;
	padding: 0;
}
blockquote.floatLeftQuote {
	float: left;
	max-width: 35%;
	margin: 2px 20px 20px 0;
	padding: 0;
}
blockquote.boxCenterQuote {
	float: none;
	clear: both;
	max-width: 740px;
	margin: 15px auto 20px auto;
	padding: 0;
}

a:link, .photoContents a:link, .cover a:link, #flag a:link {
	text-decoration: none;
	color: #0000CC;
}
a:visited, .photoContents a:visited, .cover a:visited, #flag a:visited {
	text-decoration: none;
	color: #000099;
}
a:hover, .photoContents a:hover, .cover a:hover, #flag a:hover {
	text-decoration: underline;
	color: #0000FF;
}
a:active, .photoContents a:active, .cover a:active, #flag a:active {
	text-decoration: underline;
	color: #0033FF;
}
.dark a:link { color: #87D0FF; }
.dark a:visited { color: #BEE1FF; }
.dark a:hover { color: #e6f4ff; }
.dark a:active { color: #EDF7FF; }

.socialMenu a:hover { text-decoration: none; }

.header a, .dark .header a, .footer a, .dark .footer a, .leader a, .dark .leader a { color: #FFF; }
a[name]:hover { text-decoration: inherit; color: inherit; background: inherit; }

table {
	margin: 1.2em 40px 0 40px;
	padding: 0;
	border-collapse: collapse;
	font-size: 90%;
}
.widetable {
	margin: 1.2em 0 0 0;
	overflow-x: auto;
	background-image: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)), linear-gradient(to left, #999, rgba(153, 153, 153, 0)), linear-gradient(to right, #999, rgba(153, 153, 153, 0));
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-repeat: no-repeat;
	background-size: 4em 100%, 4em 100%, 1em 100%, 1em 100%;
	background-attachment: local, local, scroll, scroll;
}
.widetable table {
	margin: 0 auto;
	max-width: 740px;
}
thead tr { border-bottom: 1px solid white; }
th { border-left: 1px solid white; border-right: 1px solid white; }
tbody th { text-align: left; }
td, th { padding: 0.3em 0.6em; }
th {
	background-color: #6d848f;
	background-color: rgba(0, 46, 68, .55);
	color: white;
}

.cg_handbook { font-family: "Swis721 Ex BT", Impact, Arial, Helvetica; }

.formUnit {
	display: block;
	margin: 0.5em 0;
}
pre {
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
	background-color: #EEEEEE;
	padding: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.textItems { 
	color: inherit;
	font: 1em Consolas, monospace;
}

input#sub_toggle {
  display: none;
  visibility: hidden;
}
label[for=sub_toggle] {
  display: block;
  float: right;
  cursor: pointer;
  text-transform: uppercase;
  margin-right: 20px;
}
label[for=sub_toggle]:hover {
  text-decoration: underline;
}
#sub_expand {
  height: 0;
  overflow: hidden;
  text-align: right;
  transition: height 0.3s;
}
#sub_toggle:checked ~ #sub_expand {
  height: 22em;
}

.mc-field-group { margin: 1em 0; }
#mce-responses, .mce_inline_error {
	font-style: italic;
	margin-bottom: 0.5em;
}
#mc_embed_signup_scroll input {
	width: 18em;
	margin-left: 0.5em;
}
#sub_expand section { margin: 1.5em 20px 0; float: right; }
#sub_expand section p, #sub_expand section li { margin: 1em 0; line-height: 150%; padding: 0; }
#sub_expand ul { padding: 0; }
#sub_expand section p:first-of-type { margin-top: 0; text-transform: uppercase; }
#sub_expand section li { display: inherit; height: initial; }
section#emailsub { max-width: 375px; border-left: 1px solid white; height: 20em; padding-left: 2em; }
#altsubs .fb-like { margin: 0.5em 0; }


@media (orientation: portrait) {
	.cover img {
		min-height: 85vw;		/* Try to preset height before image load to stop layout jumping, cannot use 100vw because of scrollbar */
		height: unset;
		max-height: calc(100vh - (7em + 0.8 * (1.4em + 0.7em * 2)));		/* 100% less height & padding for leader & headers */
		object-position: unset;
	}
	#coverHeadlineBlock {
		left: 0;
		width: 100%;
	}
	.cover .byline { padding-bottom: 2em; }
}

@media (pointer: coarse) {
	input[type="button"], input[type="submit"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"] { min-height: 2.5em; }
	#sub_toggle:checked ~ #sub_expand { height: 24em; }
	section#emailsub { height: 22em; }
}

@media (max-width: 1920px) { .headerTop { background-image: url(/include/phpthumb/phpThumb.php?src=%2Fimages%2Fheader-bg.020711.jpg&w=1920&hash=c684cf1845956e7e324ed28419ae881bc7a60a344bbf2f837c4d830d0de0abbb); } }
@media (max-width: 1366px) { .headerTop { background-image: url(/include/phpthumb/phpThumb.php?src=%2Fimages%2Fheader-bg.020711.jpg&w=1366&hash=6e885c93223c52d7191553f03eed9bdf7eb3f7f076847ae9cdff197e19868239); } }

@media (min-width: 1240px) {
	#updatesBlock { margin-right: 0; }
	.socialMenu { padding-right: 0; }
}

@media (max-width: 1200px) {
	.photoContents a { border-left: none; border-right: none; }
	h1.cover, h2#flag { font-size: 350%; }
}

@media (max-width: 1035px) { .headerTop { background-image: url(/include/phpthumb/phpThumb.php?src=%2Fimages%2Fheader-bg.020711.jpg&w=1035&hash=9a4a801d7fc47ee1466525b7b8718cc515d90d1649b7f3ae27591233353723a9); } }

@media (max-width: 1000px) {
	.photoContents a { height: 140px; }
}

@media (max-width: 820px) {		/* when column has zero side spacing */
	blockquote.floatRightQuote { border-right: none; }
	blockquote.floatLeftQuote { border-left: none; }
	.bordered {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}
@media (max-width: 780px) {		/* when column is reduced to 20px padding limits */
	.photoContents a {
		height: 130px;
		font-size: 150%;
	}
	h1.cover, h2#flag { font-size: 300%; }
	.byline { font-size: 80%; }
}
@media (max-width: 740px) {		/* when column is reduced to 740px max width */
	blockquote.boxCenterQuote { border-left: none; border-right: none; }
}
@media (max-width: 710px) {		/* button links need to be single column */
	li.button, li.buttonLast {
		float: none;
		margin-left: auto; margin-right: auto;
		width: 360px;
		max-width: 100%;
	}
	li.aboutLinks {	width: 234px; }
	li.buttonLast.aboutLinks { float: none; }
	.contentblock ul.button, .contentblockWide ul.button { padding-left: 0; padding-right: 0; padding-bottom: 0; }
}
@media (max-width: 600px) {
	.floatRightClear, .floatLeftClear, blockquote.floatRightQuote, blockquote.floatLeftQuote {
		max-width: 100%;
		float: none;
		clear: none;
		margin: 2em auto;
		border-left: none; border-right: none;
	}
	.socialMenu li {
		float: none;
		display: inline-block;
	}
	.floatRightClear .caption, .floatLeftClear .caption {
		width: 100%;
		padding: 0;
	}
	.photoContents a {
		height: 120px;
		font-size: 140%;
	}
	#sub_toggle:checked ~ #sub_expand { height: 34em; }
	#sub_expand section {
		clear: right;
		padding-left: 0;
		height: unset;
	}
	section#emailsub { border-left: none; }
}
@media (max-width: 600px) and (orientation: portrait) {
	section.cover { height: unset; }
}
@media (max-width: 500px) {
	#updatesBlock { margin-right: 10px; }
	table { font-size: 80%; }
	h1, h2.cover { font-size: 175%; }
	h1.cover { font-size: 225%; }
	.byline, .photoByline { font-size: 75%; }
}
@media (max-width: 400px) {
	blockquote { padding-left: 30px; padding-right: 30px; }
	.contentblock p, .contentblock ul, .contentblock ol, .contentblock dl, .contentblockWide p, .contentblockWide ul, .contentblockWide ol,  .contentblockWide dl, .content, .contentblock form, .contentblockWide form, pre, h1, h2, h3, h4, .byline {
		padding-left: 15px; padding-right: 15px;
	}
	.socialMenu ul { padding: initial; }
	#sub_toggle:checked ~ #sub_expand { height: 38em; }
	#mc_embed_signup_scroll input {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}
}
@media (max-width: 360px) {
	.indexLinks a { border-left: none; border-right: none; }
	.floatRightClear .caption, .floatLeftClear .caption {
		padding: 0 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	photoContents a {
		height: 100px;
		font-size: 130%;
	}
}
@media (max-width: 320px) {
	.contentblock p, .contentblock ul, .contentblock ol, .contentblock dl, .contentblockWide p, .contentblockWide ul, .contentblockWide ol,  .contentblockWide dl, .content, .contentblock form, .contentblockWide form, pre, h1, h2, h3, h4, .byline, .socialMenu {
		padding-left: 10px; padding-right: 10px;
	}
	blockquote { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 300px) {
	body { font-size: 90%; }
}
@media (max-width: 234px) {
	.aboutLinks a { border-left: none; border-right: none; }
}

