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, "times new roman", serif;
max-width: 61em; 
margin: auto;
background: white;
}
#search-2 {
margin-bottom: 1em;
} header {
background-color: #095dd3; white; 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; text-align: center;
margin: 0;
}
header h2 {
font-size: 1.2em;
color: black;
font-family: 'Inconsolata', 'courier new', '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: white; 
float: left;
margin-left: 1em;
top: 0;
position: -webkit-sticky;
position: sticky;
width: 20em;
font-size: 1em;
}
.sidebar a {
text-decoration: none;  
color: black; 
}
.sidebar a:hover { color: #d3095d; 
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: aliceblue;
float:left;
margin-bottom: 1em;
line-height: 1.5;
}
.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: aliceblue;
}
.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;
margin: 0;
}
.single-article .article-footer .share {
font-weight: bold;
background: white;
text-align: left;
margin: 1em; 
margin-bottom: 0;
padding: 0.5em;
border-radius: 1em 1em 0 0 ; }
.single-article .article-footer .copyright-warning {
font-weight: normal;
color: red;
margin: 1em;;
background: white;
padding:0.5em;
margin-top: 0;
border-radius: 1em;
}
.entry-content a {
text-decoration: none;
color: #d3095d;
}
.entry-content a:hover {
border-bottom: 3px solid #d3095d;
}
.entry-content a:visited {
border-bottom: 1px solid #d3095d;
}
.article-meta-section {
background: aliceblue;
padding-top: 1em;
margin-bottom: 0;
}
.article-meta-section .byline {
text-align: center;
margin: 0;
}
.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; }
#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;
display:none;
}
}
@media screen and (min-width: 50em) {
#banner {
display: block;
}
#banner1 {
display: none;
}    
}
@media screen and (max-width: 50em) {
#banner {
display: none;
}
#banner1 {
display: block;
}
} div.sharedaddy h3.sd-title {
font-size: 1.2em !important; font-weight: bold;
color: #d3095d !important; } blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
} img.centered {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
.c1 {
color: #000000;
background-color: #FFF8DC;
margin: 1em;
padding: 1em;
border-style: solid;
border-width: 1px;
border-radius: 0.75em;
}
.c2 {
color: #000000;
background-color: #DCFFE6;
margin: 1em;
padding: 1em;
border-style: solid;
border-width: 1px;
border-radius: 0.75em;
}
.c3 {
color: #000000;
background-color: #DCE3FF;
margin: 1em;
padding: 1em;
border-style: solid;
border-width: 1px;
border-radius: 0.75em;
}
.c4 {
color: #000000;
background-color: #FFDCF4;
margin: 1em;
padding: 1em;
border-style: solid;
border-width: 1px;
border-radius: 0.75em;
}
.i1 {
color: #000000;
background-color: #DCFFE6;
font-weight: bold;
padding: 2px;
}
.i2 {
color: #000000;
background-color: #DCE3FF;
font-weight: bold;
padding: 2px;
}
.i3 {
color: #000000;
background-color: #FFDCF4;
font-weight: bold;
padding: 2px;
}
.i4 {
color: #000000;
background-color: #FFF8DC;
font-weight: bold;
padding: 2px;
}
.yellow {
background-color: #FFFF00;
padding: 2px;
}
pre {
color: white;
background: black;
margin: 0;
padding: 0.5em;
font-family: "inconsolata", "consolas", "Courier New", Courier, "Nimbus Mono L", monospace;
overflow: auto;
}
code {
background: rgba(0,0,0, 0.06);
border-radius: 0.3em;
padding: 0.1em 0.2em 0.1em 0.2em;
}
table {
margin: 0 auto;
} .single-article .kbd{ display: inline-block; 
padding: 0 0.3em 0 0.3em; 
color: black;
vertical-align: middle; 
background-color: #fcfcfc; 
border: solid 1px #ccc; 
border-bottom-color: #bbb; 
border-radius: 0.2em; 
box-shadow: inset 0 -1px 0 #bbb; 
}
.single-article .mark {
font-family: "courier new", "inconsolata", consolas, "liberation mono", courier, "courier new", monospace; 
font-size: 1em; background-color: yellow;  padding: 0.1em 0.3em 0.1em 0.3em; }
.single-article .preamble{
background: #cbff7b;
border: 1px solid black;
border-radius: 0.5em;
padding: 0 1em 0 1em;
margin-top: 1em;
margin-bottom: 1em;
}
.single-article .hint{
background: #fff17b;
border: 1px solid black;
border-radius: 0.5em;
padding: 0 1em 0 1em;
margin-top: 1em;
margin-bottom: 1em;
}
.single-article .p-note{
background: #fcf2ff;
border: 1px solid black;
border-radius: 0.5em;
padding: 0 1em 0 1em;
margin-top: 1em;
margin-bottom: 1em;
}
.single-article table, tr, td, th {
border: 1px solid lightgrey;
border-collapse: collapse;
padding: 0.3em;
}
.single-article tr:nth-child(even) {
background: whitesmoke;
}
.single-article tr:nth-child(odd) {
background: white;
}
.single-article th {
background: lightgray;
text-transform: uppercase;
text-align: center;
}
.single-article .html-tag{
background-color: #fcfcfc;
border: solid 1px;
border-radius: 0.3em;
padding: 0 0.2em;
}
.single-article .html-tag:before{
content: "<";
}
.single-article .html-tag:after{
content: ">";
}
.single-article a > .html-tag{
margin: 0 0.1em;
border: none;
border-radius: 0;
background-color: transparent;
padding: 0;
}
.note{
display:inline;
position:relative;
border-bottom:thin dotted red;
}
.note:hover:after{
background: #333333;
background: rgba(0,0,0,0.8);
border-radius: 5px;
top: 1.5em;
color: #ffffff;
content: attr(data-note);
left: -5em;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 15em;
}
a.footnote-ref sup{
background: #d3095d;
color: white;
padding: 0 0.2em;
font-weight: bold;
}
.next {
background: #cbff7b;
float: right;
padding: 0 3em;
border: black 1px solid;
}
.prev {
background: #cbff7b;
float: left;
padding: 0 3em;
border: black 1px solid;
}
.clear {
clear : both;
}
.css-property {
color: blue;
font-size: 1.13em;
padding: 0 0.2em;
font-weight: bold;
font-family: "inconsolata", "consolas", "Courier New", Courier, "Nimbus Mono L", monospace;
}
.css-class {
color: crimson;
font-family: "inconsolata", "consolas", "Courier New", Courier, "Nimbus Mono L", monospace;
font-weight: bold;
font-size: 1.13em;
padding: 0 0.2em;
}
.css-id {
color: #008f18;
font-family: "inconsolata", "consolas", "Courier New", Courier, "Nimbus Mono L", monospace;
font-weight: bold;
font-size: 1.13em;
padding: 0 0.2em;
}
.css-attribute {
color: #00188f;
font-family: "incosolata", "consolas", "Courier New", monospace;
font-weight: bold;
font-size: 1.13em;
padding: 0 0.2em;    
}
.css-value {
color: red;
font-family: "inconsolata", "consolas", "Courier New", Courier, "Nimbus Mono L", monospace;
font-weight: bold;
font-size: 1.13em;
padding 0, 0.2em;
}
.css-pseudo-element {
color: purple;
font-family: "inconsolata", "consolas", "Courier New", Courier, "Nimbus Mono L", monospace;
font-weight: bold;
font-size: 1.13em;
padding: 0 0.2em;    
}
.css-function {
color: purple;
font-family: "incosolata", "consolas", "Courier New", monospace;
font-weight: bold;
font-size: 1.13em;
padding: 0 0.2em;       
}
.html-output {
background: white;
padding: 1em;
border: 1px solid black;
} body {
counter-reset: h2counter;
}
h1 {
counter-reset: h2counter;
}
h2[id] {
counter-reset: h3counter;
}
h2[id]:before {
content: counter(h2counter) ".\0000a0\0000a0";
counter-increment: h2counter;
}
h3[id]:before {
content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
counter-increment: h3counter;
}
pre.css::before {
content: "CSS";
display: block;
background: green;
margin-bottom: 1em;
padding-left: 1em;
font-size: 1.5em;
font-weight: bold;
margin: -0.5rem;
margin-bottom: 1rem;
color:white;
}
pre.html::before {
content: "HTML";
display: block;
background: blue;
margin-bottom: 1em;
padding-left: 1em;
font-size: 1.5em;
font-weight: bold;
margin: -0.5rem;
margin-bottom: 1rem;
color:white;
}  a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; position: absolute; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
pre.numberSource a.sourceLine
{ position: relative; }
pre.numberSource a.sourceLine:empty
{ position: absolute; }
pre.numberSource a.sourceLine::before
{ content: attr(data-line-number);
position: absolute; left: -5em; text-align: right; vertical-align: baseline;
border: none; pointer-events: all;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
a.sourceLine::before { text-decoration: underline; }
code span.al { color: #ff0000; font-weight: bold; } code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } code span.at { color: #7d9029; } code span.bn { color: #40a070; } code span.bu { } code span.cf { color: #007020; font-weight: bold; } code span.ch { color: #4070a0; } code span.cn { color: lightblue; } code span.co { color: bisque; font-style: italic; } code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } code span.do { color: #ba2121; font-style: italic; } code span.dt { color: #C04040; } code span.dv { color: orange; } code span.er { color: #ff0000; font-weight: bold; } code span.ex { color: aqua; } code span.fl { color: #40a070; } code span.fu { color: yellow; } code span.im { } code span.in { color: aqua; font-weight: bold; } code span.kw { color: lightgreen; font-weight: bold; } code span.op { color: #66ffff; } code span.ot { color: blanchedalmond; } code span.pp { color: orchid; } code span.sc { color: #4070a0; } code span.ss { color: #bb6688; } code span.st { color: lightblue; } code span.va { color: #19177c; } code span.vs { color: #4070a0; } code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; }