/*==== Copyright (c) 2017-2020 The Wizard Of Finity ====*/ a, title, h1, h2, p, div, ul, li, textarea, pre, table, td, th, tr { padding: 0px; margin: 0px; border: none; font-weight: inherit;} body{ padding: 0px; margin: 0px; border: none; } li { margin-left: 0.7em; margin-top: 0.6em; } h3 { margin-bottom: 0.2em; } #instr ul { padding-left: 2em; } #instr h2 { font-size: 125%; text-align: center; font-weight: bold; } #instr h3 { font-size: 125%; font-weight: bold; } #instr h2.secondary { font-size: 125%; text-align: left; font-weight: normal; border-bottom: 2px solid; } #instr h3.secondary { font-size: 115%; text-align: left; font-weight: normal; border-bottom: 1px solid; } #tophead { font-weight: 400; } #instr pre { overflow-x: auto; } #instr .plainFont, .plainFont, #instr .buhs, #instr .bu { font-family: "Hind", Nunito, Arimo, Arial, sans-serif; } /* Hind is narrower than the rest */ body, #instr p, h1, h2, h3, h4, #instr h2 { font-family: Nunito, Arimo, Arial, Hind, "Maven Pro", "Open Sans", sans-serif; } /* Nunito, Arimo and Arial have almost identical dimensions; Open Sans is wider and higher */ .titleFont, #headtitle a, #tophead #headtitle h1 a, #tophead h1, #tophead .subtitle, #tophead h2, .keys { font-family: "Maven Pro", Nunito, Arimo, Arial, sans-serif; } /* Maven is slight wider than Nunito */ body, .bodyFontSize { font-size: 16.0px; } /* font size of the interface (for mobile and old devices) */ pre, #source, .CodeMirror, .zcode, .monosrc { font-size: 16.0px; } /* monospaced font size (for mobile and old devices) */ #instrmargin { font-size: 16.7px; } /* ZedLX tutorial font size (for mobile and old devices) */ pre, #source, .CodeMirror, .zcode, .monosrc { font-family:"Source Code Pro","Roboto Mono","DejaVu Sans Mono","Droid Sans Mono", monospace; tab-size:4; -moz-tab-size: 4;} .zcode, .monosrc { white-space: nowrap; } .zcode { padding: 0.1em 0.1em; margin-left: 0.2em; margin-right: 0.2em; } .block { display: block; } pre, .pre, pre.zcode, pre .zcode { white-space: pre; line-height: 140%; } .inlinepre { white-space: pre; display: inline; } .keys { font-weight: 700; } .math { font-style: italic; } .mathBlock { font-style: italic; display:inline-block; } .exerciseTitle, #instr .exerciseTitle { font-weight: normal; font-size: 113%; margin-bottom: 0.7em; margin-top: 0.7em; border-bottom: 1px solid; } .exerciseSmallerTitle { font-size: 90%; font-weight: normal; } .exerciseCenteredTitle { text-align: center; } .chapterTitle { text-align: center; } .chapterTitle .zcode { font-size: 1em; } hr.redDivider { height: 0px; border: 4px solid #702; background-color: #702; border-radius: 60%; } .exerciseOutput { float: right; margin: 10px 0px 10px 15px; display: block; border: 5px solid; width:45%; height:auto; } .exerciseOutputFull { margin: 20px auto; display: block; border: 5px solid #555; width:60%; height:auto; } ol.exercisesList > li { margin-left: -1.0em; } .plainListTable {margin-left:1em;} .plainListTable td {padding: 0 0.7em; } .plainList { list-style-type: none; } .plainListCode { list-style-type: none; line-height: 80%; } /* fixed 03.2025., was 120% */ .link-list li { margin-top:9px; margin-bottom:9px;} div.solutionShow { border:1.1px solid; padding:0.5em; margin-bottom:0.5em; cursor: pointer; clear:both;} div.solutionShow > * { display:none; } #instr div.solutionShow > p:first-child { margin: 0.2em 0px; display:block; /*text-decoration: underline;*/} .noteBox { border: solid 1.1px; padding:0px 15px 10px 15px; margin-top:1.7em; margin-bottom: 1.3em; } /* .noteBox ul { list-style-type: none; } */ .noteBox ul li { margin-left:0px; margin-right:10px; margin-top:18px; margin-bottom:10px; } .extraTextStarSeparator { text-align: center; } .extraTextShow .extraTextStarSeparator{ display: none; } @media screen and (max-width: 900px) { /* js matches 900*/ .extraTextStarSeparator { display: none; } .extraTextShow .extraTextStarSeparator{ display: block; } .extraTextShow { border: 1px solid #777; padding: 0px 20px 5px 20px; cursor:pointer; } .extraTextStarHider { display: none; } .splitScreenOnly { display: none; } } .tabletPortrait { display: none; } #tophead a { text-decoration: none;} #tophead h1 a:hover { text-decoration: underline;} #headtitle a:hover { text-decoration: underline;} .underlineP p:hover { text-decoration: underline;} #titlediv { text-align: center; } #titlediv h1, #headtitle { font-size: 165%; padding:5px; padding-top:0.4em;} #titlediv .subtitle { font-size: 108%; padding-bottom: 0.9em;} #titlediv h1, #titlediv h2, #titlediv p { margin-left: auto; margin-right: auto; } .CodeMirror { height: 100%; } .CodeMirror-lines { padding: 3px 0; /* Vertical padding around content */ } .CodeMirror pre { padding: 0 3px; /* Horizontal padding of content */ } .CodeMirror-cursor { border-left: 2px solid #333; border-right: none; width: 0; } .CodeMirror-scroll { /* 30px is the magic margin used to hide the element's real scrollbars */ /* CodeMirror bug fix */ margin-bottom: -30px; margin-right: 0px; padding-bottom: 30px; overflow-y: auto !important; /* this enables scroll wheel */ /* origial code from codemirror.css follows, * this enables scrolling with mouse wheel, * but characters sometimes end up unviewable (beyond right scrollbar) overflow: scroll !important; margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; */ } .bottomLine { border-bottom: 1px solid; } .topLine { border-top: 1px solid; } .allLine { border: 1px solid;} .noUdBorder { border-bottom: none; border-top: none;} .noLeftBorder { border-left: none;} .noRightBorder { border-right: none;} .bigMarginTop, #contentmargin .bigMarginTop { margin-top: 1.3em;} #instr p { line-height: 1.55em; } #instr p, #instr h1, #instr h2 { margin-top: 0.7em; margin-bottom: 0.7em;} #instr h2 { border-bottom: 0px solid; text-align: center;} #navShortcutKeys { font-size: 90%; } @media only screen and (hover: none) and (max-width: 1090px){ .desktopOnly { display: none; } } @media screen and (max-width: 736px) { #titlediv { height: initial;} #tophead h1, #headtitle { font-size: 155%;} #titlediv .subtitle { font-size: 110%; /*padding: 0px 10px;*/ padding-bottom: 10px;} } @media screen and (max-width: 736px) and (max-height: 770px){ #instr h3.bigMarginTop { margin-top:0.7em;} #instr .bigMarginTop { margin-top: 1em;} #instr p, #instr h1, #instr h2 { margin-top: 0.7em; margin-bottom: 0.7em;} #instr p { line-height: 1.5em; } } @media screen and (max-width: 590px) { #instr p { line-height: 1.5em; } #instr p, #instr h1, #instr h2 { margin-top: 0.65em; margin-bottom: 0.65em;} #buildmsgP { display: none; } } @media screen and (max-width: 470px) { #pagemargin .narrowInvisible { display:none; } #instr p { line-height: 1.5em; } #instr p, #instr h1, #instr h2 { margin-top: 0.6em; margin-bottom: 0.6em;} } @media screen and (max-width: 380px) { #titlediv .subtitle { font-size: 104%; margin-left:33px; margin-right:33px;} } @media screen and (max-width: 351px) { #tophead h1, #headtitle{ font-size: 140%;} } @media screen and (max-width: 340px) and (max-height: 770px) { #instr p { line-height: 1.47em; } #instr p, #instr h1, #instr h2 { margin-top: 0.6em; margin-bottom: 0.6em;} } /**************************** colors default ********************************/ body, html, .CodeMirror div, div.CodeMirror-vscrollbar, div.CodeMirror-hscrollbar { scrollbar-color: #40404f #334; } /*{ scrollbar-color: dark; }*/ body::-webkit-scrollbar, .CodeMirror div::-webkit-scrollbar { width: 13px; color: #334; background-color: #334; } body::-webkit-scrollbar-track, .CodeMirror div::-webkit-scrollbar-track { width: 13px; color: #334; background-color: #334; } body::-webkit-scrollbar-thumb, .CodeMirror div::-webkit-scrollbar-thumb { width: 11px; color: #40404f; background-color: #40404f; border: 1px solid #334;} /* scrollbars are above*/ #socshare a { background-image: url(icons8darkRow1.png); } div.firstSolution { background-color: #333; } div.firstSolution:hover { color: #ddd; background-color: #444; } body, textarea#source, #sourcediv, .CodeMirror, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { color: #c0c0c0; background-color: #202020; } hr { color: #aaa;} .zcode, .monosrc { color: #accaee; } .zcode { background-color: #313131; } .zcode b, b .zcode, .monosrc b, b .monosrc { color: #fff3c4; font-weight: normal; } #actions li:hover, #actions li.flash { color: #9dceff; background-color: #3039ac; } #actions li.flash { text-shadow: 0px 0px 2px #fff; } a { color: #7fa9fd; } a:visited { color: #6692ee; } .buttonColor, .hoverButton a, #tutnav nav a, #tutnav nav a:visited #actions li, #actions, #instr .bu { color: #8bf; } #titlediv { background-color: #121877; /* fallback */ /*background-image: linear-gradient(to right, #2a0d5e, #121877); } */ } #titlediv a, #headtitle, #tophead h1, #tophead h2, #tophead p { color: #ccc;} .topLine, .bottomLine , .allLine , #pagemargin #topnav { border-color: #0d29c9; } /*#2a44a6;*/ .buttonColor, .hoverButton { background-color: #202020; } #build, #build pre { background-color: #222949; } .hoverButton:hover { background-color: #202890; } #actions li, #actions, #instr .bu { background-color: #161880; } #editor {border-left-color: #092369; } div.solutionShow, .noteBox { border-color:#555; } #footer { color: #aaa; background-color: #161f66; } .errLine2 { background-color: #553; border-color: #bb6; } .errLine1 { background-color: #482c2c; border-color: #c66; } .exerciseOutput { border-color: #333;} /***********************************************************************/ #topnav { z-index: 10; /*padding-bottom:1px;*/} #topnav ul { padding-left:19px; float:left; } #topnav li { display: inline-block; margin-left: 0px; margin-top: 0px;} #topnav li a { display: block; padding: 4px 13px 0px 13px; height: 26px;} #contentmargin, #footermargin { margin: 0px auto; padding: 0px; } #contentmargin { max-width: 1500px; min-height: 70vh; } #footermargin { clear: both; padding-top:10px; } #instr { padding: 0px 6%; } #instr { margin-top: 1.5em;} #instr { min-height: 85vh;} #instrmargin, #footer { margin: 0px 50% 0px 0px; padding: 0px; } #footer { padding: 6px 3%; text-align: center; } #footer { font-size: 90%; } @media screen and (max-width: 900px) { /* js matches 900*/ .tabletPortrait { display: initial; } #contentmargin, #footermargin { max-width: 640px;} #contentmargin { min-height: 30vh; } #instrmargin { margin: 0px; } #instr { border-right: none; min-height: initial; } #instr { padding: 0px 2%; } .extViewWidth { /* min-width:440px; codeMirror cant scroll mobile with this*/ } .col1Inv { display:none; } #editormargin { margin-top: 12px;} #tutnav { min-height: 42px; } #socshare a { margin: 4px 2px; } #topnav li a { padding-left: 5px; padding-right: 5px; margin: 3px 5px; } #navShortcutKeys { display:none; } /* small screen, probably has no keyboard */ } @media screen and (max-width: 450px) { /*#instr { padding: 1px 4px; } */ } @media screen and (max-height: 900px), screen and (orientation:landscape) { .tabletPortrait { display: none; } } /***********************************************************************/ #socshare { display:block; float:right; padding: 2px 5px 2px 0px; } #socshare .social-share-facebook { background-position: 0px 0px; } #socshare .social-share-twitter { background-position: -33px 0px; } #socshare .social-share-googleplus{ background-position: -67px 0px; } #socshare .social-share-linkedin { background-position: -101px 0px; } #socshare .social-share-pinterest { background-position: -135px 0px; } #socshare .social-share-reddit { background-position: -169px 0px; } #socshare a { background-image: url(icons8darkRow1.png); text-indent: -9999px;display: inline-block; padding-right:3px; background-size: auto 27px; height: 27px; width: 27px; background-repeat: no-repeat; } /***********************************************************************/ #instr .buhs, #instr .bu { display: inline-block; padding: 2px 6px 0px 6px; line-height: 1.4em; } #instr .bu, #instr .buhs{ opacity:0.8;} #buprev, #bunext { position: absolute; width: 70px; height: 100%; } #buprev p, #bunext p { position: absolute; top:50%; left: 50%; width: 80%; height: 80%; margin: -17% 0 0 -30%; } #bumid { padding: 5px 80px; padding-bottom: 6px; text-align: center; } #bumid h1 { font-size: 100%; display: inline;} #buprev { float: left; left: 0px; } #bunext { float: right; right: 0px; } @media screen and (min-width: 901px) and (max-width: 1357px) { #buprev { border-left:none;} } @media screen and (min-width: 901px) { #bunext { border-right:none;} } /***********************************************************************/ #editormargin { position: fixed; left: 50%; top:113px; z-index: 9; right: 0px; bottom:0px; clear: both; } #editormargin li { margin-top: 0px; } /*#editormargin { right: 20px;} */ #editor {border-left-width: 3px; border-left-style: solid; box-sizing: border-box; height:100%; } #sourcediv { box-sizing: border-box; padding: 0px 7px 6px 0px; height: 90%; position: relative; } #source { width: 100%; height: 100%; resize: none; overflow-wrap: normal; overflow: auto; } #source, #build pre, #sourcebgr { padding: 3px; } #source, #build pre, #sourcebgr, .CodeMirror { line-height: 1.4em; } @media screen and (max-width: 736px) and (max-height: 580px) { #source, #build pre, #sourcebgr, .CodeMirror { line-height: 1.37em; } } #sourcebgr { z-index: -5; height: 100%; overflow: hidden; width: 100%; position: absolute; margin-top:0px;} .errLine1, .errLine2 { border-width: 1px; border-style: solid; border-left: none; border-right: none; } #buildmsg, #buildmsgP { box-sizing: border-box; } #build { display: block; box-sizing: border-box; overflow-y: auto; border-top-width: 0px; border-top-style: solid; } #buildmsg { white-space: pre-wrap; margin-top: 2px; } #buildmsgP { margin: 5px; float: right; font-size: 90%; } #source:focus{outline: none;} #actions { } #actions { padding-left:15px; } #actions:first-child { padding-left: 15px; padding-right:20px; } #actions li { display: inline-block; margin-left: 0px; padding: 5px 13px 0px 13px; cursor: pointer; height: 30px; opacity: 0.6; } #actions li a { background-color: inherit; color: inherit; } @media screen and (max-width: 900px) { #editor { border-left:none; } #editormargin { position: initial; } #sourcediv { height: 70vh; } #footer { margin-right: initial; } #footermargin { margin: 0px; padding: 0px; max-width: initial;} } @media screen and (max-width: 340px) and (max-height: 770px) { #actions li { padding: 5px 11px 0px 11px; } } /**************************** run canvas *******************************/ #fullscr, #fulldim { position:fixed; top: 0px; left: 0px; right:0px; bottom:0px; z-index: 100; } #fulldim { opacity:0.8; } .xaBtn li { display: block; text-align: center; height: 35px; cursor: pointer; display: flex; align-items: center; justify-content: center;} #fsmargin { position: fixed; top:6%; bottom:6%; left:9%; right:9%; z-index:110; } .xaBtn li { margin: 7px; } #canvdiv { position: absolute; top:0px; left:0px; width:80%; height:100%; } #canvmargin { position: absolute; top:2%; left:2%; right:0px; bottom: 2%;} #ocanv1 { display: block; width:auto; height:100%; margin:auto; border: none; } #fsbtn { position: absolute; top:0px; right:0px; width:20%; height:100%; } #fsbtnMargin { position: absolute; top:7%; right:2%; left: 2%; bottom:7%; } #xactionsBottom {position: absolute; bottom: 0px; width:100%;} #btnxZoom { display: none; } #RTErr {display: none; z-index:200; position: fixed; } #RTErr > div {padding: 20px 40px; } #fulldim { background-color: #141414;} #fsmargin, #canvdiv { background-color: #232323;} .xaBtn li{ background-color: #333; color: #999; } .xaBtn .hoverButton:hover { background-color: #444; color: #ccc; } .xaBtn li a { background-color: inherit; color: inherit; } #RTErr { background: black; background: rgba(0, 0, 0, 0.7); } #RTErrHead, #RTErrText {color:#ddd; } @media screen and (max-width: 1030px) and (orientation:portrait) { /* js matches */ .desktopOnly { display: none; } #ocanv1 { width: 100%; height: auto;} #fsmargin { position: fixed; top:0; bottom:auto; left:0; right:0; } #canvmargin { position: static; } #canvdiv { position: static; width:100%; height:auto; padding: 10px 0px; } #fsbtn { position: fixed; background-color: #262626; top:auto; right:0px; width:100vw; height:auto; bottom: 0px; } #fsbtnMargin { position: static; } #xactionsBottom {position: static; } #xactionsTop { clear: both; } .xaBtn li{ float: right; width: 130px; } /*#fullscr.fsZoomIn { position:absolute;} .fsZoomIn #fulldim { position:fixed;} .fsZoomIn #fsmargin { position:absolute;} */ } @media screen and (max-width: 530px) and (orientation:portrait) { /* js 757 matches */ .fsZoomIn #canvdiv { overflow: auto; } .fsZoomIn #canvmargin { width:560px;} #btnxZoom { display: block; display: flex; } #titlediv h1, #titlediv h2, #titlediv p { max-width: 360px; } } /***************************** MEDRES ******************************************/ /*@media screen and (min-width: 1300px), screen and (min-width: 1245px) and (max-height: 810px) {*/ /*@media screen and (min-width: 1201px) {*/ /*@media screen and (min-width: 1371px) { /* until 11.2023. */ /*@media screen and (min-width: 1315px) { /* from 11.2023. */ @media screen and (min-width: 1420px) { /* from 05.2024. ; view: 1390px (sans scrollbar); min. 68 characters in ZedLX tutorial */ /* change the following two values to adjust the font sizes */ body, .bodyFontSize { font-size: 16.7px; } /* font size of the interface */ pre, #source, .CodeMirror, .zcode { font-size: 16.1px; } /* monospaced font size; should be about 95% of bodyFontSize for sourceCodePro */ #instrmargin { font-size: 17.9px; } /* ZedLX tutorial font size */ #editormargin { top:134px; } #contentmargin { max-width: 106em;} /* 106×17 = 1802px = 97 characters in ZedLX tutorial*/ #titlediv { height: initial;} #titlediv h1, #headtitle { padding:7px; padding-top:14px; font-size: 160%;} #titlediv .subtitle { padding-bottom: 16px; font-size: 113%;} #topnav { /*min-height: 39px;*/ } #topnav ul { padding-left:35px; } #topnav li a { height: 28px; padding: 5px 20px 0px 20px; } /* must be in px to keep the same height for socshare */ #instr .buhs, #instr .bu { padding: 2px 6px 0px 6px; line-height: 1.4em; } #buprev, #bunext { width: 100px; } #actions li { padding: 6px 20px 0px 20px; height: 32px;} #actions:first-child { padding-left: 25px; padding-right:30px; } #source, #build pre, #sourcebgr, .CodeMirror { line-height: 1.4em; } #socshare { display:block; float:right; padding: 2px 10px 2px 0px; } /*#socshare .social-share-facebook { background-position: 0px 0px; } #socshare .social-share-twitter { background-position: -40px 0px; } #socshare .social-share-googleplus{ background-position: -80px 0px; } #socshare .social-share-linkedin { background-position: -120px 0px; } #socshare .social-share-pinterest { background-position: -160px 0px; } #socshare .social-share-reddit { background-position: -200px 0px; } #socshare a { text-indent: -9999px;display: inline-block; padding-right:3px; background-size: auto 32px; height: 32px; width: 32px; background-repeat: no-repeat; }*/ .xaBtn li { line-height: 44px; height: 44px; font-size:100%;} #buprev p, #bunext p { margin: -12% 0 0 -30%; } } /**************************** waitLoad Box ********************************/ #waitLoad { display:block; position:fixed; z-index:40; top: 30%;left: 50%; text-align: center; opacity:0.8;} #waitLoadBox { position: relative; background-color: #444; color: #DDD; display: block; padding:20px 20px; padding:2vh 2vw; margin: -100px -160px; width:320px; } /***********************************************************************/ .CodeMirror-cursor { border-left: 2px solid #aaa; } .cm-s-default div.CodeMirror-selected { background: #555; } /*.cm-s-default .CodeMirror-code {color: #06d;}*/ .cm-s-default .cm-operator {color: #7fdeff;} .cm-s-default .cm-keyword {color: #47afff;} .cm-s-default .cm-punctuation, .cm-s-default .cm-variable {color: #d4d4d4;} .cm-s-default .cm-string {color: #0e0;} .cm-s-default .cm-number {color: #00dec0;} .cm-s-default .cm-comment {color: #a89a47;} .cm-s-default .cm-multiline-comment {color: #73913d;} .cm-s-default .cm-invalidchar {color: #ff4747;} .cm-s-default .cm-error { border-bottom: 2px dashed #f66;} .cm-s-default .CodeMirror-vscrollbar { overflow: hidden; } /* fix vertical scrollbar in FF */ .cm-s-default .CodeMirror-scroll { overflow-x: hidden !important; } /* fix horizontal scrollbar in FF */ /***********************************************************************/ #PBMpage { background-color:#444; color:#DDD; } #PBMpage p { margin: 0 } #PBMpage, #PBMpage p, #PBMpage label, #PBMpage input, #PBMpageh1, #PBMpage textarea, #PBMpage a { font-family: "Nunito","Hind","Open Sans","Arimo","Arial",sans-serif; } #PBMpage h1 { font-size: 140%; width: 14em; margin: auto; padding: 20px;} #PBMpage a {color: #59f; font-size: 100%;} #PBMpage .leadLabel { width:180px; display: inline-block; text-align: right; margin-top:4px; margin-right:6px; } #PBMpage .leadInput { width:370px; vertical-align: top; } #PBMpage select.leadInput { width:initial; } #PBMpage .leadInputWide { width:500px; vertical-align: top; } #PBMpage input, #PBMpage select, #PBMpage textarea { color:#DDD; font-size: 100%; background-color: #555; border: 2px solid #aaa; padding: 0.1em 0.4em;} #PBMpage input[type=checkbox] { width: 1em; height: 1em; vertical-align: bottom; } #PBMplink {color: #59f; } #PBMplink:visited {color: #cae;} #PBMpage #PBMplinkParent { visibility: hidden; font-size: 115%; margin:0.6em; } #PBMstatus { color: #f66; font-size:115%; } #PBMsourcediv textarea, #PBMpage .monospace { font-size: 92%; font-family:"Roboto Mono","DejaVu Sans Mono","Droid Sans Mono", monospace; tab-size:4; -moz-tab-size: 4; } #PBMsourcediv textarea { width:90%; height:9em; padding: 2px; margin: 1.3em 0 0 4%; background-color: #444; color: #ddd; opacity:0.7; } /***********************************************************************/