:root{--header-height: 150px;--navbar-height: 3.5rem;--font-family: Calibri, Helvetica, Arial, sans-serif;--font-family-code: monospace;--purple: #da97f7;--success: #008575;--info: #287cb8;--danger: #da3a42;--warning: #ffe08a;--white: #fff;--black: #222;--grey: #aaa;--dark-purple: #700F99;--header-bg: #057;--background-color: var(--black);--text-color: var(--white);--inactive: var(--grey);--shadow-color: var(--grey);--navbar-bg-color: var(--black);--hamburger-color: var(--white)}@media (prefers-color-scheme: light){:root{--inactive: #888;--background-color: var(--white);--text-color: var(--black);--shadow-color: var(--black);--navbar-bg-color: var(--white);--hamburger-color: var(--black);--purple: #8e13c3}}html{background-color:var(--background-color);font-family:var(--font-family)}body{color:var(--text-color);background-color:var(--background-color);font-family:var(--font-family);font-size:.85rem;text-indent:0;word-spacing:0;line-height:1.15;margin:0;scroll-padding-top:var(--navbar-height)}@media (prefers-color-scheme: dark){body footer img{filter:invert(1)}}nav{position:fixed;top:0;height:var(--navbar-height);display:flex;justify-content:center;background-color:var(--navbar-bg-color);z-index:5;width:100%}nav>ul{align-items:center;display:flex;justify-content:center;margin:0;padding:0}nav>ul a:hover{color:var(--purple)}nav>ul>li{padding:1rem;position:relative}nav>ul>li>span{padding-right:2rem;display:block}nav>ul>li>span::after{border:3px solid var(--purple);border-radius:2px;border-right:0;border-top:0;content:" ";height:.5rem;margin-top:-.5rem;margin-left:.5rem;pointer-events:none;position:absolute;top:50%;transform:rotate(-45deg);transform-origin:center;width:.5rem}nav>ul>li:hover>ul,nav>ul>li.active>ul{display:block}nav>ul>li>ul{position:absolute;background-color:var(--navbar-bg-color);padding:0rem;margin-top:1rem;border-radius:4px;display:none;padding-left:0;box-shadow:0 0 5px var(--shadow-color)}nav>ul>li>ul>li{position:relative;padding:.1rem 1.25rem;line-height:1.2}nav>ul>li>ul>li a{white-space:nowrap;text-decoration:none;padding:.25rem 0;display:block;color:var(--text-color)}nav>ul>li>ul>li:first-child a{padding-top:.5rem}nav>ul>li>ul>li:last-child a{padding-bottom:.5rem}nav>ul>li>ul>li:empty{border-top:1px solid var(--grey);margin:.25rem 0}nav>ul>li>ul.right{right:0}nav>ul li{list-style:none}nav button{display:none}nav button.open~ul{display:block;height:calc(100vh - var(--navbar-height));width:100%;background-color:var(--background-color);color:var(--text-color)}nav button.open~ul::after{display:none}nav button.open~ul ul{position:relative;display:block;border:none;box-shadow:none}nav button.open~ul .divider{display:none}nav button.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}nav button.open span:nth-child(2){opacity:0}nav button.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}@media screen and (max-width: 1024px){nav{display:block}nav>ul{margin-top:0;display:none;overflow:auto;max-height:calc(100vh - var(--navbar-height))}nav>ul li span::after{content:none}nav>ul>li>ul>li a{white-space:normal}nav button{min-height:var(--navbar-height);width:var(--navbar-height);height:var(--navbar-bg-color);position:relative;margin-left:auto;display:flex;justify-content:center;background-color:transparent;border:0}nav button span{transform-origin:center;transition-duration:50ms;transition-property:background-color,opacity,transform;transition-timing-function:ease-out;height:1px;width:1.5rem;background-color:var(--hamburger-color);position:absolute}nav button span:nth-child(1){top:calc(50% - 6px)}nav button span:nth-child(2){top:calc(50%)}nav button span:nth-child(3){top:calc(50% + 6px)}}header{background-color:var(--header-bg);margin-top:var(--navbar-height);height:var(--header-height);display:flex;justify-content:center;align-items:center;width:100%;background-image:url(/img/imagebar_720.webp);background-position:center}@media screen and (min-width: 720px){header{background-image:url(/img/imagebar_1200.webp)}}@media screen and (min-width: 1200px){header{background-image:url(/img/imagebar.webp)}}header a{display:flex;justify-content:center;align-items:center;text-decoration:none}header a h1{font-weight:600;color:white;font-size:1.5rem;display:inline;margin:0 0 0 .3rem;text-shadow:0 0 15px black}main{max-width:1200px;margin:0 auto;padding:1rem 3rem}@media screen and (max-width: 1024px){main{padding:.5rem 1.5rem}}@media screen and (max-width: 600px){main{padding:.1rem .5rem}}main h1,main h2,main h3,main h4,main strong{font-weight:bold;color:var(--purple)}main h1{margin-top:1rem;margin-bottom:.7rem;font-size:120%}main h2{margin-top:.8rem;margin-bottom:.5rem;font-size:115%}main h3{margin-top:.6rem;margin-bottom:.3rem;font-size:105%}main h4,main strong{margin-top:.4rem;margin-bottom:.3rem;font-size:100%}main p{margin-top:.2rem;margin-bottom:.5rem;font-size:100%}main p:not(:first-child){margin-bottom:.5rem}main a,main span{font-size:100%;color:var(--text-color)}main figure{margin:.5rem 1rem 1rem 1rem;display:inline-block}main figure figcaption{padding-top:4px;text-align:center}main a{text-decoration:underline}main dl{display:grid;grid-template-columns:45fr 55fr;margin-top:1rem}main dl dt,main dl dd{border-top:1px solid var(--grey);padding:.5rem .75rem}main dl dd{text-align:center;margin-left:0;padding-left:2rem}main ol{margin-left:2rem;margin-top:1rem;margin-bottom:1rem;padding-left:1rem}main ul{padding-left:1rem;padding-right:1rem}main pdn-tip h3,main pdn-note h3,main pdn-warning h3,main pdn-example h3{z-index:2;position:relative;height:32px;background-repeat:no-repeat;padding-left:35px;margin-left:8px;margin-top:4px;background-size:contain}main pdn-tip p,main pdn-note p,main pdn-warning p,main pdn-example p{margin-bottom:-16px;z-index:1;position:relative;top:-20px;border-style:solid;border-width:thick;border-radius:8px;padding:3px 5px 3px 45px;color:var(--white)}main pdn-tip p a,main pdn-note p a,main pdn-warning p a,main pdn-example p a{color:var(--white)}main pdn-tip h3{background-image:url(/svg/tip.svg)}main pdn-tip p{border-color:var(--success);background-color:var(--success)}main pdn-note h3{background-image:url(/svg/note.svg)}main pdn-note p{color:var(--black);border-color:var(--warning);background-color:var(--warning)}main pdn-note p a{color:var(--black)}main pdn-note p strong{color:var(--dark-purple)}main pdn-warning h3{background-image:url(/svg/warning.svg)}main pdn-warning p{border-color:var(--danger);background-color:var(--danger)}main pdn-example h3{background-image:url(/svg/example.svg)}main pdn-example p{border-color:var(--info);background-color:var(--info)}main tabs-wrapper{display:block;padding:1rem 0}main tabs-wrapper ul{display:flex;flex-direction:row;flex-wrap:wrap}main tabs-wrapper ul li{list-style:none}main tabs-wrapper ul li label{align-items:center;border-bottom:1px solid var(--inactive);color:var(--inactive);display:flex;justify-content:center;margin-bottom:.5rem;padding:.5rem;vertical-align:top;white-space:nowrap;cursor:pointer}main tabs-wrapper ul li label:hover{border-bottom-color:var(--purple);color:var(--purple)}main tabs-wrapper ul li.active label{border-bottom-color:var(--purple);color:var(--purple)}main tabs-wrapper tabs-content{display:block;box-shadow:0 0 5px var(--shadow-color);border-radius:5px;padding:1rem}main tabs-wrapper tabs-content tab-content{display:none}main tabs-wrapper tabs-content input{display:none}main tabs-wrapper tabs-content input:checked+tab-content{display:block}main .tag{border-radius:4px;color:var(--white);padding:.25rem .5rem;margin:0 .1rem;height:1rem;display:inline-block}main .tag.purple{border-color:var(--dark-purple);background-color:var(--dark-purple)}main .tag.info{border-color:var(--info);background-color:var(--info)}main .tool{vertical-align:middle;margin:0 3px;display:inline-block;background-repeat:no-repeat;background-image:url(/img/tool_sprite.webp);width:16px;height:16px;filter:drop-shadow(0 0 1px var(--grey))}@media (min-resolution: 144dpi){main .tool{background-image:url(/img/tool_sprite@2x.webp);background-size:41px 336px}}main .tool.clonestamp{background-position:0 0}main .tool.colorpicker{background-position:0 -17px}main .tool.ellipticalselect{background-position:0 -34px}main .tool.eraser{background-position:0 -51px}main .tool.gradient{background-position:0 -68px}main .tool.lassoselect{background-position:0 -85px}main .tool.linecurve{background-position:0 -102px}main .tool.magicwand{background-position:0 -119px}main .tool.movecursor{background-position:0 -136px;width:25px;height:25px}main .tool.moveselectedpixels{background-position:0 -247px}main .tool.moveselection{background-position:-16px -247px}main .tool.paintbrush{background-position:0 -162px}main .tool.paintbucket{background-position:0 -179px}main .tool.pan{background-position:-16px -319px}main .tool.pencil{background-position:0 -196px}main .tool.recolor{background-position:0 -213px}main .tool.rectangleselect{background-position:0 -230px}main .tool.select{background-position:0 -247px;width:32px}main .tool.shapes{background-position:0 -264px;width:41px;height:20px}main .tool.text{background-position:0 -285px}main .tool.tools{background-position:0 -302px}main .tool.view{background-position:0 -319px;width:32px}main .tool.zoom{background-position:0 -319px}main table{display:block;max-width:-moz-fit-content;max-width:fit-content;margin:0 auto;overflow-x:auto}main table .tip p,main table .note p,main table .warning p,main table .example p{margin-bottom:0}main table tbody tr td:first-child{font-family:var(--font-family-code)}main table:nth-of-type(2) tbody tr td:nth-child(2){font-family:var(--font-family-code);text-align:center}main pdn-level{display:flex;flex-wrap:wrap;justify-content:space-evenly;text-align:center}main img,main video{height:auto;max-width:100%}main fieldset{border:none;display:grid;grid-template-columns:.2fr .4fr .4fr;column-gap:.5rem;row-gap:.5rem}main fieldset input,main fieldset textarea,main fieldset button{padding:.5rem;margin:.2rem;grid-column:2 / 4;border-radius:4px;border-width:1px}main fieldset label{justify-self:end;padding:.2rem;margin:.2rem;font-weight:bold}main fieldset button{grid-column:2 / 3;padding:1rem;background-color:var(--purple);color:var(--white);border-color:transparent;max-width:10rem;cursor:pointer}main fieldset div{justify-self:end}@media screen and (max-width: 600px){main fieldset{grid-template-columns:1fr}main fieldset input,main fieldset label,main fieldset textarea,main fieldset button{grid-column:1;justify-self:start;width:95%}}footer{margin:2rem;display:flex;flex-direction:column;align-items:center}footer a{color:var(--text-color)}img[alt="Pääikkuna"]{background-image:url(/img/main_annotation_w.webp)}img[alt="Työkalut"]{background-image:url(/img/tool_annotation_w.webp)}body.no-webp header{background-image:url(/img/imagebar_720.jpg)}@media screen and (min-width: 720px){body.no-webp header{background-image:url(/img/imagebar_1200.jpg)}}@media screen and (min-width: 1200px){body.no-webp header{background-image:url(/img/imagebar.jpg)}}body.no-webp main .tool{background-image:url(/img/tool_sprite.png)}@media (min-resolution: 144dpi){body.no-webp main .tool{background-image:url(/img/tool_sprite@2x.png)}}body.no-webp img[alt="Pääikkuna"]{background-image:url(/img/main_annotation_w.png)}body.no-webp img[alt="Työkalut"]{background-image:url(/img/tool_annotation_w.png)}@media (prefers-color-scheme: light){body.no-webp img[alt="Pääikkuna"]{background-image:url(/img/main_annotation.png)}body.no-webp img[alt="Työkalut"]{background-image:url(/img/tool_annotation.png)}}@media (prefers-color-scheme: light){body img[alt="Pääikkuna"]{background-image:url(/img/main_annotation.webp)}body img[alt="Työkalut"]{background-image:url(/img/tool_annotation.webp)}}.sr{border:none !important;clip:rect(0, 0, 0, 0) !important;height:.01em !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important;width:.01em !important}picture{display:flex;justify-content:center}@media print{header,nav{display:none}main{padding:0}}h2#palaute{display:none}