html {
font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body {
margin: 0;
}  article,
aside,
details, figcaption,
figure,
footer,
header,
main, menu,
nav,
section,
summary { display: block;
} audio,
canvas,
progress,
video {
display: inline-block;
} audio:not([controls]) {
display: none;
height: 0;
} progress {
vertical-align: baseline;
} template, [hidden] {
display: none;
}  a {
background-color: transparent; -webkit-text-decoration-skip: objects; } a:active,
a:hover {
outline-width: 0;
}  abbr[title] {
border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b,
strong {
font-weight: inherit;
} b,
strong {
font-weight: bolder;
} dfn {
font-style: italic;
} h1 {
font-size: 2em;
margin: 0.67em 0;
} mark {
background-color: #ff0;
color: #000;
} small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}  img {
border-style: none;
} svg:not(:root) {
overflow: hidden;
}  code,
kbd,
pre,
samp {
font-family: monospace, monospace; font-size: 1em; } figure {
margin: 1em 40px;
} hr {
box-sizing: content-box; height: 0; overflow: visible; }  button,
input,
select,
textarea {
font: inherit; margin: 0; } optgroup {
font-weight: bold;
} button,
input { overflow: visible;
} button,
select { text-transform: none;
} button,
html [type="button"], [type="reset"],
[type="submit"] {
-webkit-appearance: button; } button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
} button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
} fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
} legend {
box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } textarea {
overflow: auto;
} [type="checkbox"],
[type="radio"] {
box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
-webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; } * { box-sizing: border-box;
}
p br {
margin-bottom: 1em;
} .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
white-space: nowrap;
height: 1px;
width: 1px;
overflow: hidden;
}
body {
font-family: "noto sans", "Open Sans", sans-serif;
max-width: 61em; 90%;
margin: auto;
background: aliceblue; #eee
} header {
background-color: #095dd3; #536879; #f0f1ff; #3c49f4; width: 100%;
margin: 0;
padding: 0;
display:block;  padding: 0.625em 0 0.635em 0;
}
.nav { height: 2em;
background: #095dd3;
margin-bottom: 40px;
margin-top: 0;
color: white;
font-weight: 700;
padding-top: 5px;
}
header h1 {
font-weight: bold;
font-size: 2em;
color: black; #fff8dc; text-align: center;
margin: 0;
}
header h2 {
font-size: 1.2em;
color: black; #fff8dc;
font-family: 'Inconsolata', 'verdana', 'arial', monospace;
font-weight: normal;
font-style: normal; 
text-align: center;
margin: 0;
}
nav {
margin-top 0;
width: 100%;
height: 2em;
background-color: #d5c6a6; margin: 0; 
padding: 0;
vertical-align: top;
}
footer {
background-color: #095dd3;
color: white;
font-weight: bold;
text-align: center;
padding-top: 0.625em;
padding-bottom: 0.625em;
}
.lattice {
padding: 0;
margin:auto;
float:left; } .main-container {
margin: auto;
}
.main-container:after { 
content: " "; 
display: block;
clear: both;
} 
.article-grid {
padding: 0; float:left;
}
.article-grid:after { 
content: " "; 
display: block;
clear: both;
} 
.centering-grid {
margin: auto;
display: table;
}
.centering-grid:after { 
content: " "; 
display: block;
clear: both;
} 
.sidebar {
background-color: aliceblue; #fff0f8; cornsilk;
float: left;
margin-left: 1em;
top: 0;
position: -webkit-sticky;
position: sticky;
width: 20em;
font-size: 1em;
display:none;
}
.sidebar a {
text-decoration: none;  
color: black; #095dd3;
}
.sidebar a:hover { color: #d3095d; red; #095dd3;
font-size: 1em;
font-weight: bold; }
.sidebar ul {
list-style-type: square;
padding-left: 2em;
}
.sidebar > .widget > ul > li {
margin-bottom: 0.2em;
padding-bottom: 0.2em;
border-bottom: 1px dotted #095dd3;
margin-right: 1.5em;
}
.sidebar .widget .widget-title {
background: #095dd3;
margin: 0 1em 0.5em 1em;
border-radius: 0.25em;
color: white;
padding: 0 0 0.2em 1em;
}
.sidebar ul ul {
padding-left: 1em;
}
.sidebar .widget_categories {
width: 100%;
}
.nav a {
color: white;
text-decoration: none;
border: 0.25em solid #095dd3;
}
.nav a:hover { box-shadow: 0.25em 0.25em 1em 0.125em rgba(0, 0, 0, 1);
padding: 0 0 0 0;
}
.nav a:visited {
color: inherit;
}
.main {
margin: auto;
}
.main:after { 
content: " "; 
display: block;
clear: both;
} 
.single-article {
max-width: 40em;
font-size:1em; box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, .3);
padding: 1em;
background-color: white;
float:left;
margin-bottom: 1em;
line-height: 1.5em;
}
.single-article:after { 
content: " "; 
display: block;
clear: both;
} 
.single-article .article-header {
background: #095dd3;
border-radius: 0.5em;
}
.single-article .article-header .page-title {
font-size:1.5em;
color: white;
}
.single-article .entry-content {
background-color: white;
}
.single-article img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
text-align: center;
}
.single-article .article-footer {
background: aliceblue;
color: black;
}
.entry-content a {
text-decoration: none;
color: blue;
}
.entry-content a:hover {
border-bottom: 3px solid blue;
}
.article-meta-section {
background: aliceblue;
padding: 1em;
text-align: center;
}
.note {
display: inline;
position: relative; 
border-bottom: thin dotted red;
}
.note:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
top: 1.5em;
color: #fff;
content: attr(note);
left: -5em;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 15em;
}
#breadcrumbs{
list-style:none;
margin:0 0 0.5em 0;
padding-left: 0.5em;
overflow:hidden;
padding: 0;
box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.4);
border-radius: 0.625em;
}
#breadcrumbs li{
display:inline-block;
vertical-align:middle;
margin-left: 0.5em;
font-size:1em;
}
#breadcrumbs .separator{
font-size:1.2em;
font-weight:100;
color:blue;
}
#breadcrumbs a {
text-decoration: none;
color: #d3095d;  #d37f09;
}
#breadcrumbs a:hover {
font-weight: bold;
}
#breadcrumbs a:visited {
color: #d3095d;
} @media screen and (max-width: 62em) {
.single-article {
max-width:40em;
float:none;
}
.sidebar {
background-color: white;
float: none;
margin: auto;
}
}
@media screen and (min-width: 50em) {
#banner {
display: block;
}
#banner1 {
display: none;
}    
}
@media screen and (max-width: 50em) {
#banner {
display: none;
}
#banner1 {
display: block;
}
}