@import "tagSymbols.css";

div.macroAnim { position: relative; cursor: pointer; width: 800px; height: 600px; margin: 20px 0; }
div.macroAnim img.anim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; box-shadow: 0 0 15px 3px rgba(0, 0, 0, .3); }
div.macroAnim img.play { position: absolute; top: 43.16667%; left: 44.875%; display: block; }

button.ui { font: normal 12px/1.5 'Segoe UI'; height: 25px; padding: 0 8px; margin: 0 4px; border: 1px solid #adadad; }
button.ui img { vertical-align: -3px; margin-right: 3px; }

.macro { font: normal 14px/1.6 Consolas, monospace; padding: 10px; padding-left: 20px; white-space: pre-wrap;
	margin: 10px 0; border: 1px solid gray; background: white; width: 100%; }
.macro span { margin: 0; padding: 0; }
span.keyword { color: #0000ff; }
span.expressionVariable       { font: normal 14px/1.6 Consolas, monospace; color: #2B91AF; }
span.expressionFunction       { font: normal 14px/1.6 Consolas, monospace; color: #000000; }
span.expressionOperator       { font: normal 14px/1.6 Consolas, monospace; color: #000000; }
span.expressionMember         { font: normal 14px/1.6 Consolas, monospace; color: #808080; }
span.expressionBooleanLiteral { font: normal 14px/1.6 Consolas, monospace; color: #0000FF; }
span.expressionNumericLiteral { font: normal 14px/1.6 Consolas, monospace; color: #000000; }
span.expressionStringLiteral  { font: normal 14px/1.6 Consolas, monospace; color: #A31515; }
span.comment { color: #358000; }
.macro img { margin: 0 5px 0 -10px; }

.subtitle { margin-top: -1rem; font-size: 1.5rem; }

div.date { margin-bottom: 1.5rem }
div.toc::before { content : 'In this post'; font-size: 14px; }
ul.toc li { font-size: 14px; line-height: 1.4; }