* { margin: 0; padding: 0; font-family: Verdana, Sans-serif; }
body { background-color: #2e2e2e; }
article { font-size:11pt; border: .1rem solid #777; background-color:#F5F5F5; border-radius:.1rem; margin: .3rem .25rem; padding: .3rem; box-shadow: inset #888 0 0 .2rem; box-sizing: border-box; }
article:empty { border-style: dashed; background-color:#FFF; }
article p { font-size:10pt; }
article h3 a { float: right; }
article h3 a:link, article h3 a:visited,article h3 a:hover { font-size: .6rem; color: #888; text-decoration: none; }
nav { display: inline-block; margin: 0 .3em; padding: .3em; vertical-align: middle; color: #EFEFEF; }
nav i { float: right; font-size: 4em; } 
nav label { font-size: .7em; margin-left: .2rem;  }
nav input[type=text] { display:inline-block; font-size: 0.7em; padding: .2em; border: .1rem solid #777; color: #000; background-color:#FFF; border-radius:.1rem; padding: .3rem; box-shadow: inset #888 0 0 .1rem; }
nav div small { font-size:.65em; display:inline-block; width: 50ch; padding: .2em;}
h1 { display: inline-block; font-size:4em; padding: 0 2rem 0 .4rem; font-family: 'Sahitya', serif; color: #EFEFEF;  text-transform: uppercase; animation-duration: 2s; animation-name: flameshadow; animation-iteration-count: infinite; animation-direction: alternate; }
h2 { display: inline-block; font-size:3em; padding: 0 2rem 0 .4rem; font-family: 'Sahitya', serif; color: #EFEFEF;  text-transform: uppercase; animation-duration: 2s; animation-name: flameshadow; animation-iteration-count: infinite; animation-direction: alternate; }
h4 { margin-top: 1em; }
p { padding: .3em; }
q { font-variant: italic; }
u { color: #D00; font-weight: bold; }
footer { font-size: 6pt; color: #EFEFEF; }
.col3, .col4 {  display: flex; display: -webkit-flex; flex-wrap: wrap }
.col3 > article, .col4 > article { box-sizing: border-box;display: inline-block; width: calc(33.333% - .5rem); vertical-align: top; }
.col4 > article { width: calc(25% - .5rem); }
.col3 > article:first-child, .col4 > article:first-child { clear:both; }
.ds1 { background-image: linear-gradient(135deg, #caa2a2 2em, rgba(0,0,0,0) 2em ); }
.ds2 { background-image: linear-gradient(135deg, #a2caa2 2em, rgba(0,0,0,0) 2em ); }
.ds3 { background-image: linear-gradient(135deg, #a2a2ca 2em, rgba(0,0,0,0) 2em ); }
.expandable > * { display: none; }
.expandable:before { display: block; content: '+ Expand'; font-size: .6rem; cursor: pointer; }
.expandable:active > *, .expandable.show > * { display: block; }
.expandable:active:before, .expandable.show:before { content: '- Expand'; }
ul.inline { display: inline; }
ul.inline li { display: inline; }
ul.inline li.after { content: ', ' }
ul.inline li.after:last-child { content: '' }
small { font-size:.65em; }
@keyframes flameshadow {
  from { text-shadow: 0 0 3px #ee8800; }
  to { text-shadow: 0 0 8px #FF9900; }
}