@font-face         {font-family: 'Citrine'; src: url('/fonts/citrine.ttf')  format('truetype');  }
@font-face         {font-family: 'Frank Ruhl Libre'; src: url('/fonts/FrankRuhlLibre-Regular.ttf') format('truetype');}
*                  { margin:0; padding:0; }
body               {font-family:'Frank Ruhl Libre';background-color:#fff;	color:#888; text-shadow: 0 0 10px #0003; }
a                  {color:#fff;}
p.subtitle         {text-align:center;width:100%;padding-top:20px;font-size:16px;color:#e8cd33;}
h1,h2,h3           {padding:20px;text-align:center;	color:#e8cd33;}
h2,h3              {text-shadow: 0 0 1px #000;position:relative;z-index:2;}
.docs h1           {text-shadow: 0 0 1px #000;position:relative;z-index:2;}
h1>a>span { display:none; }
h1,#logodiv        {padding-top:10px;}
h1.chapter         { color:white;}
#logodiv           { margin:auto; max-width: 616px; padding-bottom:20px;}
.feature p         { min-height:180px; }
.chapters          { column-count:4;}
.langs             { column-count:6; }
.docs p a          { margin-right: 20px;}
.docs hr           { max-width:1000px; margin:auto;}
.docs p            { text-align:center; margin:auto; padding-top:20px;}
h3                 {color:white;}
ul                 {padding-left:32px;}
time               { font-weight:bold; margin-right:10px;}
output,kbd         {background-color:#000;color:#e8cd33;}
hr                 { box-shadow: 0 0 10px #000; background-color:black; border:none; height:1px; opacity:0.3;}
footer             {background-color:#fff;color:#000;text-align:center;padding:40px;font-size:18px;}
table              {background-color:#fff;width:100%;max-width:600px;margin:auto;border:1px black solid;border-collapse:collapse; margin-bottom:20px;}
table td, table th {border: 1px black solid;padding:8px;font-family:Citrine;color:#000;}
table thead th,table tbody td { max-width: 15vw;overflow: hidden; text-overflow: ellipsis;}
#logo              {max-width:100%;max-height:80px;}
.download          {font-family:'Open Sans';text-align:center;width:128px;display:block;margin-top:-160px;margin-right:20px;float:right;	position: relative;z-index: 9999;}
.terminal          {width:100%;}
.download-text     {float: left;display: block;position: relative;width: 210px;top: 124px;left: -203px;color: #049696;}
a span.link        {background-color:#CCC;color:#fff;font-weight:bold;border-radius:6px;padding:6px;display:inline-block;margin-top:2px;}
i.fa               { font-size: 64px; opacity:0.5; width:64px;}
.symbols,.symbol   {font-family:Citrine;}
.lane3             {background-repeat:repeat;background-color:#049696;color:#000;padding:20px;font-size:18px;color:#fff;background-image:url(/img/texture1.png);box-shadow: 0 0 40px #0004 inset;}
.lane3+.white      {background-color: #d1c791;color:#000;background-image:url(/img/texture2.png);}
.voorbeeld         {display:none;}
.white             {background-color:#fff;color:#000;}
.white a           {color:#000;}
.navi a            {color: #fff;}
.docs ul           {max-width:600px;margin:auto;}
.faq a             {color:rgba(0,0,0,0.4);font-weight:bold;}
body .ref          {opacity:0.4;text-decoration:none;text-align:left;line-height:14px;color:white;font-size:10px;display:block;color:white;}
.lane3 h2          {color:#fff;}
.lane3 p,.lane3 ul, footer p {max-width:1000px;margin:auto;margin-bottom:40px;line-height:24px;}
.lane3 p.question  {font-weight:bold;min-height:24px;margin: auto;max-width:1000px;margin-bottom:20px;line-height:28px;}
.voorbeeld output  {min-height: 60px; }
pre,.code,code     { background-color:#fff; color:#000; box-shadow: 0 0 4px #0006; }
.knop:not([href="/"]) 
{background-color:black;color:white;text-decoration:none;padding:10px;border-bottom: 4px #9998 solid;margin-right:20px;margin-bottom:20px;display:block;width:calc(100% - 20px);max-width:300px;box-shadow: 0 0 10px #00000066;transition: background-color,color 0.5s ease;}
.knop:hover        {background-color:white;color:black;	}
.knop:not([href="/"])::after       {content: '\f061 ';	font-family: "Font Awesome 5 Free";font-weight: 900; float:right;font-weight:bold;opacity:0.5;}
.knop[href="/"]    { text-decoration:underline; }
.feature           {width:100%; max-width:300px; margin:auto; text-align:center; min-height:250px;}
.blink             {animation: blink 1s step-start 0s infinite;-webkit-animation: blink 1s step-start 0s infinite;}
.uptext            { text-align:center;width:100%;padding-top:20px;font-size:16px;color:#e8cd33;}
.bold              { font-weight:bold; }
.knop.down::after  {content: ' ';	font-family: "Font Awesome 5 Free";font-weight: 900; float:right;font-weight:bold;opacity:0.5;}
.roadmap::before    {pointer-events:none;content: '\f279';font-family: "Font Awesome 5 Free";font-weight: 900;font-size:200px;position:absolute;opacity:0.07;left:0;right:0;margin:auto;width:200px;display:block;}
.manuals::before    {pointer-events:none;content: '\f02d';font-family: "Font Awesome 5 Free";font-weight: 900;font-size:200px;position:absolute;transform:rotate(-30deg);opacity:0.07;left:0;right:0;margin:auto;width:200px;display:block;margin-top:20px;}
.products::before   {pointer-events:none;content: '\f49e';font-family: "Font Awesome 5 Free";font-weight: 900;font-size:200px;position:absolute;opacity:0.07;left:0;right:0;margin:auto;width:250px;display:block;}
.faq::before        {pointer-events:none;content: '\f128';font-size:200px;font-family: "Font Awesome 5 Free";font-weight: 900;position:absolute;opacity:0.07;left:0;right:0;margin:auto;width:200px;	display:block;transform:rotate(30deg);}
.doclinks          { margin:auto; max-width:1000px; display:block; }
.doclinks a.knop   { margin:auto; margin-bottom:20px; }
.docs span.update::before { content: '\f017'; font-family: "Font Awesome 5 Free";font-weight: 900; margin-right:20px;}
.docs span.update  { opacity:0.3;}
.docs code         { margin-bottom: 100px; }
.docs code::after   { content: '\f063'; opacity:0.3; font-family: "Font Awesome 5 Free";font-weight: 900; font-size:75px; position:absolute; left: 0; width:100%; text-align:center; margin-top:50px; }
.knop             { text-transform: uppercase; border:none; font-family:'Frank Ruhl Libre';font-size:18px;text-align:left;}
.doclinks a.xknop[href="/"]::before { content: '\f015'; opacity:0.5; font-family: "Font Awesome 5 Free";font-weight: 900; float:left; }
.doclinks a.knop[href="/add.ctr"]::after { content: '\f0eb'; }
.docs ul.langs, .docs ul.chapters { list-style:none; }
.docs ul.langs li, .docs ul.chapters li { overflow:hidden; width:100%;   text-overflow: ellipsis;  white-space: nowrap;  }
.docs output      { margin-bottom:50px; }
.docs ul          { padding:0;}
.docs ul.chapters { margin-top:25px; margin-bottom:50px; text-shadow: 0 0 1px #0003;}
.docs ul.langs li { text-align:center; }
.docs ul.langs a  { list-style:none; text-transform: uppercase; opacity:0.3; font-weight:bold;}
.docs a           { text-decoration:none; }
.docs .lane3+.white::before { pointer-events:none;content: '\f1ab';font-family: "Font Awesome 5 Free";font-weight: 900;font-size:200px;position:absolute;opacity:0.07;left:0;right:0;margin:auto;width:250px;display:block; }
@media screen and (max-width:960px){ .langs{ column-count: 3; } .chapters{ column-count:2;} }
@media screen and (max-width:600px){ .langs{ column-count: 3; } .chapters{ column-count:1;} }
.voorbeeld::after  {content: ' ';width:100px;height:120px;display:block;float:right;background-repeat:no-repeat;background-position: bottom right;position:relative;margin-top:-200px;margin-right:-20px;}
.voorbeeld pre, voorbeeld output { overflow-y:hidden; overflow-x:auto;}
.code,code,pre,kbd,output {max-width:600px;margin:auto;display:block;padding:20px;margin-bottom:20px;border-radius:10px;overflow:auto;font-family:Citrine;font-weight:normal;}
.white code,.white pre {background-color: #fff;color:#000;}
.lane3 p.question::before {content: '> ';font-size:32px;position:relative;top:2px;opacity:0.2;}
.footerbanner { position:relative;top:20px;width:150px; }
@media screen and (max-width:600px){.showcase { font-size: 14px; }.showcase pre { height: 250px !important; }.code { padding: 10px; } .uptext { padding-top:40px;} }
@media (max-width:600px) {.download-text {display:none;}.download {margin:auto;float:none;margin-top:-64px;}.terminal {position:static;width:250px;}.code,pre,kbd,output {font-size:16px;}}
@media screen and (min-width:960px){ .left { float:left;} .right { float:right; margin-right:0 !important;} }
abbr[title] { text-decoration:none; font-style:italic; }
.kaartlink { font-size:12px; opacity:0.5;text-decoration:none; }
article.metfooter::after { content:' '; display:block; width:100%; height:200px; background-color:#fff; background-image: url(/img/citrine_banner.jpg); background-size: 150px; 
background-repeat:no-repeat; background-position:center; }
h1.beeldmerk { cursor:pointer;width:calc(100% - 40px);background-color:white;margin:0; }
.page div img { display:block; margin:auto; max-width:600px; width: 100%; box-shadow: 0 0 10px 1px #000; margin-bottom:40px; }
nav.sitemenu { background-color: #0b2123;width: 200px;position: fixed;z-index:9;font-family: 'Frank Ruhl Libre';border-radius: 5px;top: -5px;	left: -230px;padding: 15px;height: 100%;transition: left 1s ease;}

nav.sitemenu::before {
	color:#fff6;
	content: 'Site Overview';
	margin-bottom:20px;
	display:block;
	font-weight:bold;
}

nav.sitemenu ul {list-style:none;padding:0;margin:0;}
nav.sitemenu ul li {padding:0;margin:0;}
nav.sitemenu ul li a { text-decoration:none; text-transform: capitalize;}

nav.sitemenu ul li a:hover { text-decoration:underline;}

nav.sitemenu ul li a[href="#"] { margin-top:20px; display:block; color:#fff6;}
nav.sitemenu:target { left: -5px;}
nav.sitemenu:target+a { left:225px;}
nav.sitemenu+a {


transition: left 1s ease;
    position: fixed;
    z-index: 9;
    font-family: 'Frank Ruhl Libre';
    background-color: #0b2123;
    display: block;
    left: 0px;
    top: 15px;
    color: #fff;
    padding: 5px;
    text-decoration: none;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
   
}

.citrine-footer { position:relative;top:10px;width:180px; }

body.lang-he code {direction:rtl;}
body.lang-ar code {direction:rtl;}
body.lang-ur code {direction:rtl;}
body.lang-fa code {direction:rtl;}

body.lang-he .chapters {direction:rtl;}
body.lang-ar .chapters {direction:rtl;}
body.lang-ur .chapters {direction:rtl;}
body.lang-fa .chapters {direction:rtl;}

body.lang-he output {direction:rtl;}
body.lang-ar output {direction:rtl;}
body.lang-ur output {direction:rtl;}
body.lang-fa output {direction:rtl;}