@font-face {
  font-family: 'nbsp';
  src: local('Times New Roman'), local('Times');
  unicode-range: U+00A0;
}

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,figure,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

sub, sup { 
	font-size: 75%;
	line-height: 0; 
	position: relative; 
	vertical-align: baseline; 
}
sup { 
	top: -0.5em; 
}
sub { 
	bottom: -0.25em; 
}



@media (max-width:512px) {
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

body {
    font:normal 1.2em/1.3em 'nbsp', 'Charter', 'Charter BT', 'xcharter-web', 'Charis SIL', 'Veleka', 'Khartiya', 'Charta', Georgia, serif;
	background:#efefef;
    color:#000;
    text-align:justify;
}

html, body {
	width:100%;
	height:100%;
}


body {
	background:#EEE;
}

#top {
	max-width:100%; /*was 55em*/
	margin:0 auto;
	background:#FFF;
}

a {
    color:#3f72bf;
    font-weight:bold;
    text-decoration:underline;
    transition: all .2s;
}
a:visited {
    color:#5095ff;
}

a.ccliclink,
a.ccliclink:visited {
    color:#ccc;
}

a:hover, a:active {
    color: #f93;
    text-decoration:none;
}

#subtitle a {
    color:#b6cbd8;
    text-decoration:none;
    transition: all 0.2s;
}
#subtitle a:hover, #subtitle a:active {
    color: #f93;
}

#blackheader{width:100%;height:160px;margin-top:-10px;background-color:#000;transition:all .5s ease}
#blackheader img{margin-top:-10px;width:80%;height:180px;border:none;transition:all .5s ease;vertical-align:bottom;opacity:1}
#blackheader h1{text-align:left;color:#fff;padding: 0 0 5px 30px;background-color:#000;transition:all .5s ease;font-size:36px;max-width:none}
#blackheaderbis h1{text-align:right;color:#fff;margin-top:-170px;margin-bottom:160px;background-color:#000;transition:all .5s ease;font-size:42px;max-width:none}
a.noline {
    text-decoration:none;
}

h1,
#footer {
	text-align:left;
	background:#000;
	color:#FFF;
}

h1 {
	padding:.2em .5em .5em .5em;
    font:bold 150%/170% 'helvetica neue', helveticaneue, helvetica, arial, sans-serif;
}

#subtitle {
    background-color:#000;
    color: #fff;
    padding: 0 .5em .2em 0;
    font:bold 100%/120% 'helvetica neue', helveticaneue, helvetica, arial, sans-serif;
    text-align:right;
}

#menuShowHide {
	position:absolute;
	left:-999em;
    height:0;
}

#mainMenu {
	list-style:none;
	text-align:left;
	padding:0.25em 0 0.25em .4em;
	margin:0 0 1em 0;
	background:#000;
    border-top:1px solid #dedede;
}

#mainMenu li {
	display:inline;
    margin:0;
    padding:0;
}

#mainMenu a {
	display:inline-block;
	padding:0.25em .8em;
    font-size:.9em;
	text-decoration:none;
	color:#fff;
}

#mainMenu a.currentCat {
    background:#fff;
    color:#000;
    font-weight:bold;
}

#mainMenu li:last-child a {
    border-left:2px solid #333;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background:#ACE;
    background:#B6CBD8;
    color:#000;
}

#mainMenu a.currentCat:hover {
    background:#fff;
}


#content {
    padding:0 1em 3em 1em;
    flex: 1 0 auto;
}

#catinfo, .subhead {
    font-size:.8em;
    font-style:italic;
    margin:0 auto;
    padding:0;
    text-align:center;
}
.subhead {
    line-height:.9em;
    padding-bottom:1em;
}
.subhead em {
    font-style:normal;
}


h2 {
    font-size:1.4em;
    line-height:1.25em;
    color:#31488b;
    width:100%;
    padding-bottom:0;
    margin-bottom: 1em;
    border-bottom:2px solid #31488b;
    clear:both;
}


.blogEntry {
    margin-bottom:4em;
}

.blogEntry h2 {
    font-size:1.2em;
    line-height:1.25em;
    margin:1.1em 0 .5em 0;
    padding-bottom:2px;
    border-bottom:2px solid #31488b;
}
.blogEntry h2.first {
    margin-top:.5em;
}


h3 {
    font-size:1em;
    line-height:1.25em;
    color:#31488b;
    width:100%;
    margin:4.5em 0 .5em 0;
    padding-bottom:0;
    border-bottom:1px solid #31488b;
}
h3.fop {
    margin-top:1.5em;
    
}

h4 {
    color:#31488b;
    margin:.5em 0 .5em 0;
}

h1 a:link,
h1 a:focus,
h1 a:visited {
    color:#fff;
    text-decoration:none;
}
h2 a:link,
h2 a:focus,
h2 a:visited,
h3 a:link,
h3 a:focus,
h3 a:visited {
    color:#31488b;
    text-decoration:none;
}
h2 a:hover, h2 a:active,
h3 a:hover, h3 a:active {
    color: #f93;
    text-decoration:none;
}

p {
	padding-bottom:1em;
}

strong {
    color: #c00;
}

i {
    color: #fff;
}

/* obsolete! */
/*
i {
    font-family: 'Charis SIL', CharisSIL, Times, 'Times New Roman', serif;
}
*/

.red {
    color: #c00;
}
.blu {
    color: #31488b;
}

strong.green {
    color: #096;
}

table.center {
    margin-left:auto; 
    margin-right:auto;
}


ol, ul {
    margin-left:1em;
    padding-left:1em;
    margin-bottom:1em;
}
ul li, ol li {
    padding-bottom:.5em;
}
ol.compressed li,
ul.compressed li {
    padding-bottom:0;
}

ul.projnames {
    margin:0;
    padding-left: 0;
    margin-left: 0.66em;
    line-height:.8em;
}

#references {
    margin-top:4em;
}

ol.reflist li {
    padding-bottom: 1em;
}

/* do your best to prevent the dreaded 'courier new': */
kbd, tt, .ttt td, td.ttt, input.ttt, textarea.ttt, code, pre
{
    font-size:.9em;
    line-height: .9em;
    font-family:
    'menlo',
    'lucida sans typewriter',
    'lucida console',
    'consolas',
    'monaco',
    'courier',
    'andale mono',
    'dejavu sans mono',
    'bitstream vera sans mono',
    'vera sans mono',
    monospace;
    font-weight:bold;
    font-style:normal;
}
.blockpre {
    line-height:1.2em;
    padding-left:2em;
}

blockquote {
    border-left:4px solid #999;
    margin-left:1em;
    padding-left:1em;
    font-style:italic;
}

blockquote em {
    font-style:normal;
}

blockquote ul {
    margin-left: 1em;
}

.reflist blockquote {
    font-size: .85em;
    line-height: 1em;
}

.thinbsp {
    font-size: .2em;
}

/* add top margin */
.atm {
    margin-top:2em;
}
.atmx {
    margin-top:6em;
}

.remarkbox {
    box-sizing:border-box;
    padding: 20px;
    background-color:#efefef;
    border-radius:10px;
    width:100%;
    max-width:1003px;
    margin:2em 0 0 0;
}

.date {
    display:block;
    float:right;
    font-size:0.7em;
    line-height:2em;
    font-style:italic;
    margin-left:1em;
}

h2 .date {
    line-height: 2.3em;
}
/* was .date .updmark */
.updmark {
    cursor:pointer;
    color:#800000;
}

.blogMore {
    text-align:right;
    font-size: .85em;
}
.blogMore a,
.blogMore a:visited {
    display:inline-block;
    padding: .25em .75em;
    background-color:#3f72bf;
    color:#fff;
    font-weight:bold;
    border-radius: .5em;
    text-decoration:none;
}

.blogMore a:hover,
.blogMore a:active {
    background-color:#f93;
}


#imageholder {
    margin:0 auto;
    padding:0;
    background-color:#000;
    text-align:center;
}

img {
    max-width:100%;
}

.imgfig {
    max-width:90%;
    margin: 0 auto 1em auto;
    font-size: .8em;
    line-height: 1em;
}

figure.figblock {
    display:block;
    text-align:center;
    margin: .5em auto 1em auto;
}
figcaption {
    font-size: .8em;
    line-height: 1em;
}
figcaption .sub {
    font-size: .8em;
    line-height: .8em;
}

figcaption i {
    color: inherit !important;
}

#footer {
	padding:1em;
    font-size:.7em;
    line-height:1em;
    font-weight:bold;
}
#footer a:link,
#footer a:active,
#footer a:focus,
#footer a:visited,
#footer a:hover {
    color:#fff;
}

.langswitch {
    display:inline-block;
    padding: .2em .6em;
    margin-right:1em;
}

span.langswitch {
    border:1px #fff solid;
}
a.langswitch {
    border:1px #f93 solid;
    color:#3f72bf;
    background-color:#fff;
}
a.langswitch:link,
a.langswitch:visited {
    color:#3f72bf !important;
    text-decoration:none;
}
a.langswitch:hover,
a.langswitch:active {
    color:#f93 !important;
}
    

#footer img {
    vertical-align:text-top;
}

.lefthalf {
    width:49.75%;
    height:1.2em;
    padding:.5em 0 0 0;
    display:inline-block;
}
.righthalf {
    width:49.75%;
    height:1.2em;
    display:inline-block;
    text-align:right;
}

.co_num {
    font-size: .85em;
    padding-right:4em;
}

.acenter {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
.aright {
    text-align:right;
}
.small {
    font-size: .85em;
    line-height: 1.1em;
}
p.min1em {
    margin-top:-1em;
}
.xsmall {
    font-size: .7em;
    line-height: .9em;
}
.min {
    font-size: .1em;
    line-height: .1em;
}
.stroke {
    text-decoration: line-through;
}

.ps {
    padding-left:2.2em;
    text-indent:-2.2em;
}

.marksection {
    text-align:center;
    font-size:3em;
    padding: 1em 0;
}
.marksectionsmall {
    text-align:center;
    font-size:2em;
    padding: .1em 0 .5em 0;
}

.hpff {
    display:none;
}

.gallery {
    text-align:center;
    padding-bottom:1em;
}
.gallery img,
img.imgcenter {
    vertical-align:middle;
    display:inline-block;
    position:relative; /* <tj> 2021-06-06 */
    padding: .2em;
    margin: .2em .1em;
}

.gallery a img,
a.baguetteBox img {
    border: 1px solid #31488b;
}

.gallery a:hover img,
.gallery a:active img,
a:hover.baguetteBox img,
a:active.baguetteBox img {
    border: 1px solid #f93;
}

.gallerycaption {
    font-size:.85em;
    line-height:.95em;
    font-style:italic;
}

.calgal {
    text-align:center;
}
.calgalbox {
    display:inline-block;
    position:relative;
    margin:4px 2px; /* 2px 0; */
    text-align:center;
    font-size:12px;
    border:none;
    border-radius:4px;
}

.calgalbox h5 {
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
    width:100%;
    max-width:200px;
    background-color:#ececec;
    text-align:center;
    opacity: .8;
    font-size: 1.2em;
}

.colbox {
    display:inline-block;
    vertical-align: middle;
    width:4em;
    height:.5ex;
}

.colbox.smaller {
    width:2em;
}

/* togglebox */
.holder {
    position: relative;
}
.proj2 {
    display:none;
    position:absolute;
    top:0;
    left:0;
     z-index:20;
}
.switchbutton {
    max-width: 1003px;
    width:100%;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    color:#fff;
    padding: 8px 0 8px 0;
    margin:4px 0 8px 0;
    cursor:pointer;
    background: rgb(96,108,136);
}
.switchbutton:active {
    color:#dedede;
}
.switchbox {
    color:#fff;
    font-weight:bold;
    text-align:center;
    background-color:#000;
    max-width:1003px;
}
p.switchbox {
    line-height:1.4em;
    padding:0;
    margin:0;
}
/* /togglebox */


a.bbox,
a.bbox:visited,
.greentext
 {
     color: #096;
     text-decoration:none;
}
a.bbox:hover {
    color: #096;
    text-decoration:underline;
}

.shareblock {
    text-align:left;
    margin: 2em 0 1em 0;
    font-size:1em;
    line-height:1em;
    padding: .8em 1em .5em .5em;
    border: 1px solid #31488b;
    border-radius: 2px;
    vertical-align:middle;
    display:inline-block;
}
.share-buttons {
    list-style: none;
    margin:0;
    padding:0;
}
.shareblock a:hover {
    text-decoration:none;
}

.share-buttons li {
    display: inline;
}
a.permalink {
    margin-left:1em;
    font-size: .8em;
    color:#800000;
    padding:.5em 1em;
    border: 1px solid #000;
}
a:hover.permalink,
a:active.permalink,
a:visited.permalink {
    color:#800000;
}
li.prml {
    vertical-align:top;
}


.remarkbox {
    box-sizing:border-box;
    padding: 1.5em;
    background-color:#efefef;
    border-radius:10px;
    width:100%;
    max-width:1003px;
    margin:2em 0 0 0;
}

.imgleft {
    float:left;
    margin: .3em 1.1em 1em 0;
    padding: .2em;
}
.imgpi {
    float:left;
    padding: 0;
    margin: 0 .2em .2em 0;
}
.imgright {
    float:right;
    margin-left:1em;
    text-align:right;
}
.clearer {
    clear:both;
}
.nomarg {
    margin:0 !important;
}
.notopmarg {
    margin-top:0 !important;
}
.nobottmarg {
    margin-bottom:0 !important;
}

.nopad {
    padding:0 !important;
}
.black {
    color: #000 !important;
}
.colinherit {
    color: inherit !important;
}

.uline {
    text-decoration: underline !important;
}

/*Mobile View*/
/* https://www.cssscript.com/pure-css-mobile-friendly-responsive-table/ */
@media only screen and  (max-width: 820px) {
    
    table.bigtable {
        border:none !important;
    }

    table.bigtable td, table.bigtable tr { display: block; }

    /* Hide table headers (but not display: none;, for accessibility) #f6f8fa */

    table.bigtable thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    table.bigtable tr { border: 1px solid #e74c3c; }

    table.bigtable tr + tr { margin-top: 1.5em; }

    table.bigtable td {
      /* make like a "row" */
      border: none;
      border-bottom: 1px solid #eee !important;
      position: relative;
      padding-left: 50%;
      padding-right:5px;
      background-color: #f6f8fa;
      text-align: left;
    }

    table.bigtable td:before {
      content: attr(data-label);
      display: inline-block;
      line-height: 1.5;
      margin-left: -100%;
      width: 100%;
      white-space: nowrap;
    }
}

@media (max-width:46em) {
	body {
		padding:0;
	}
	h1 {
		text-align:left;
        padding:.5em 2em 0 .5em;
	}
    #imageholder {
        display:none;
    }
	#mainMenu {
		clear:both;
		display:none;
		overflow:hidden; /* wrap floats and margins */
		padding:0.25em;
		margin-top:-1em;
		border-top:2px solid #000;
	}
	#mainMenu li {
        float:left;
        width:50%;
	}
	#mainMenu a {
		display:block;
		padding:0.75em;
		margin:0.25em;
		border: 1px solid #fff;
	}
    #mainMenu li:last-child a {
        border-left: 1px solid #fff;;
    }
    
	#menuShowHide+label {
		position:relative;
		float:right;
        font-size:0.85em;
		padding:0.5em 0.5em;
		margin:-5em 0.5em 0;
		border:2px solid #FFF;
		background:#000;
		color:#FFF;
	}
    #menuShowHide + label:before {
		display:block;
		content:"";
		width:2em;
		height:0.5em;
		margin-bottom:0.75em;
		background:transparent;
		border:solid #FFF;
		border-width:0.25em 0;
	}
	#menuShowHide + label:after {
		position:absolute;
		top:2em;
		left:0.5em;
		content:"";
		width:2em;
		height:0.24em;
		background:#FFF;
	}
	#menuShowHide:checked + label {
		background:#dedede; 
	}
	#menuShowHide:checked ~ #mainMenu {
		display:block;
	}
    
    .lefthalf, .righthalf {
        display:block;
        margin: .2em;
        text-align:left;
        padding:.2em 0;
        height:auto;
    }
    .imgleft.biggr,
    .imgright.biggr {
        float:none;
        margin: 0;
        padding: 0;
        display:block;
    }
    .imgright {
        float:none;
        margin:1em 0 1em 0;
        text-align:center;
    }
    .ftccimg {
        display:block;
        margin:.2em;
    }
    .date, h2 .date {
        float:none;
        line-height:1.5em;
    }
}

/* was 18em */
@media (max-width:24em) {
    body {
        
    }
    #subtitle {
        text-align:left;
        padding-left: .8em;
    }
    #mainMenu li {
        float:none;
        width:auto;
    }
    
    .langswitch {
        display:block;
    }
}