@font-face {font-family: 'Fjalla One';src: url('../fonts/FjallaOne-Regular.otf') format('opentype'),url('../fonts/FjallaOne-Regular.ttf') format('truetype');}
@font-face {font-family: 'Open Sans';src: url('../fonts/OpenSans-Regular.ttf') format('truetype');}
*                        { margin:0;padding:0;}
body                     { font-family: 'Open Sans',Arial; background-color: #000;min-height:800px;}
.footblock               { background-color:#888;  }
.content .codeblock      { overflow:scroll; }
img                      { max-width:100%;border:none; }
img.logo                 { float:left; }
.top ul                  { clear:both; }
a img                    { border: 0px; }
a                        { text-decoration:none;}
.index ul li,.top ul li  { list-style:none;}
.content li              { margin-left:20px; }
.clear                   { display:block; clear:both; height:0; overflow:hidden;}
.shasum                  { background-color:black;color:#f99;max-width:760px;padding:20px;overflow:auto;}
.wrapper                 { background-color: #111;background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);	background-size:90px 90px;	background-position:0 0, 45px 45px;min-height:300px;margin-left:auto;margin-right:auto;}
.top                     { width:360px;float:left;overflow:hidden;padding-top:60px;padding-left:40px;height:1000px;display:block;}
.top .logo               { display:block;float:left;}
.top h1                  { font-family: 'Fjalla One', Arial;color: #ffe;display:block;float:left;font-size:40px;text-shadow: 1px 1px 5px #000;margin-top:60px;line-height: 22px;font-weight:lighter;}
.top h1 span             { font-size: 20px; }
.top ul                  { display:block; position:fixed; top:0px; padding:20px; right:40px; background-color:#000; clear:none; }
.top ul li               { float:left; margin-right:10px; border-right: 1px #666 dotted; padding-right:10px; }
.manual                  { min-height:800px; }
.manual .topics          { margin-top:20px; }
.manual .index a, .top a { color:#fff; }
.manual .current         { opacity: 0.6; }
.manual .current:before   { content: "\f0da"; margin-right:5px; font-family:FontAwesome; }
.manual .index ul        { margin-bottom:20px;margin-left: 20px;}
.manual .index b         { margin-bottom:10px; display:block; opacity: 0.6;}
.index                   { float:left;height:100%;padding-top:160px;color:#ffe;text-align:right;padding-right:20px;width:180px;}
.content                 { background-color:#fff;float:left;height:100%;width:calc(100% - 600px);	padding-top:135px;color:#000;}
@media (max-width:400px)    {
.top img.logo            { display: none; }
body .top                { padding-top:20px; padding-bottom:20px; width:200px; }
}
@media (min-width:1200px)   {
.top a#bean              { position:fixed; }
.top h1                  { position:fixed; margin-left:150px; }
}
@media (max-width:1200px)   {
.top ul                  { display:none;}
.content                 { width:100%; padding-top:20px; }
.index                   { position:fixed;overflow:scroll;top:-4000px;height:100%;	transition: top 1s;background-color:#000000e9;width:100%;border-top:60px red solid;padding-top:20px;z-index:9;}
.index ul.topics         { padding-bottom:3000px; }
.index ul.topics > li    { float:left;width:100%;max-width:160px;text-align:left;}
.xindex::after,.beanmenu            { position: fixed;right: 0px;text-align: center;line-height: 60px;width: 80px;height: 59px;top: 0px;background-color: red;color: white;z-index: 10;cursor: pointer;background-image: url(/img/logo.png);background-size: 32px 32px;background-position: center 10px;background-repeat: no-repeat;content: "\f0d7";font-family: FontAwesome;line-height: 100px;display:block;}
.index.unfold            { top:0;}
.top                     { height:auto;}
}
.content .inlay          { margin:40px; min-height:1600px; }
.content p, .content kbd, .content ul, .content .codeblock {margin-bottom:40px;max-width:760px;}
.content h1, .content h2, .content h3 {	margin-bottom:10px; }
h1:after,h2:after         { content: ' ';	display:block;	max-width:800px; height: 1px;
	background: red; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
}
.content .codeblock, .content .note {padding: 20px;background-color:#DDD;overflow:auto;}
kbd                      { padding:20px;background-color:#000;color:#2E2;font-family: courier,monospace;display: block;}
.footblock               { color:#FFE;font-size:14px; background-color:#CCC;padding:40px;text-align:right;}
.footblock > p           { padding-right:10px;border-right: 1px white dotted;}
time                     { font-weight:bold;}
abbr                     { cursor:help;}
.note::before             { content: "\f0a4";font-family: FontAwesome;font-size: 34px;opacity: 0.1;position: absolute;margin-left: -40px;margin-top: -5px;}
body .content .note      { background-color: #add;padding-left: 50px;max-width: 730px;}
.top ul li:last-child     { margin-right:0;padding-right:0;	border:none;}
.logos a                 { display:block;float:right;background-size:contain;width:200px;height:120px;box-shadow: 0 0 1px 1px #000;background-color:white;margin:5px;text-indent:10000px;overflow:hidden;background-repeat:no-repeat;background-position:center;white-space: nowrap;}


@media (prefers-color-scheme:dark) {
    .content { filter:hue-rotate(60deg) invert(); }
    .content h1::after, .content h2::after {filter:invert() hue-rotate(-60deg); }
    .top ul {z-index:1; background:#5f1207}
    .footblock {filter:hue-rotate(-60deg) invert(); background:#333}
    .logos a { background-color:#000 }
    .note { filter:brightness(.6) invert() hue-rotate(-60deg); }
    .content img,
    .content input[type="image"] { filter:brightness(.8) hue-rotate(-60deg)  invert(); }
}