/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}


/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.25; /* 1 */
margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
overflow: visible;
}

/**
 * Remove the inheritance of text transformtransform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text  in Firefox.
 */

button { /* 1 */
text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
vertical-align: baseline;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
display: list-item;
}


/*tasta alkaa sivuston maaritykset*/

/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border-top: 1px solid #DCDCDC;
border-right: 1px solid #DCDCDC;
border-bottom: none;
border-left: 1px solid #DCDCDC;
outline: none;
cursor: pointer;
padding: 6px 2px;
font-size: 16px;
border-radius:0;
}

.tablink2 {
width: 50%;
}

.tablink3 {
width: 33.33%;
}

.tablink4 {
width: 25%;
}

.tablink6 {
width: 16.66%;
}

.tablink:hover {
background-color: #777;
border-top: 1px solid #DCDCDC;
border-right: 1px solid #DCDCDC;
border-bottom: none;
border-left: 1px solid #DCDCDC;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
display: none;
padding: 35px 5px 5px 5px;
height: 100%;
background-color: #DCDCDC;
}


#fontti {
width: 4em;
}

.kommenttikentta {
border: 1px solid #ccc;
border-radius: 4px;
}	


#todistus1, #todistus2, #todistus3, #todistus4, #todistus5, #todistus6, #esimerkkiS {
display: none;
}

.asetustekstit {
clear: both;
float: left;
font-family: "Computer Modern Serif";
font-size: 14px;
font-weight: normal;
break-inside: avoid;
margin: 1px 0;
text-align: left;
text-indent: 0;
white-space: nowrap;
}


.nakymaton {
display: none;
}

.hidden {
visibility: hidden;
}

.akselimuutokset {
background-color: #F0F0F0;
border: 1px solid #000000;
border-radius: 4px;
clear: both;
display: inline-block;
float: left;
position: absolute;
width: 130px;
z-index: 50;
}

.kappale1 {
border-right: 1px solid black;
display: inline-block;
width: 121px;
}

.kappale2 {
display: inline-block;
width: 120px;
}

.pistemuutokset {
background-color: #F0F0F0;
border: 1px solid #000000;
border-radius: 4px;
clear: both;
display: inline-block;
float: left;
position: absolute;
width: 141px;
z-index: 50;
}

.pistekoko {
width: 50px;
}

.asetusmuutokset {
background-color: #F0F0F0;
border: 1px solid #000000;
border-radius: 4px;
clear: both;
display: inline-block;
float: left;
position: absolute;
width: 241px;
z-index: 50;
}

.asetusotsikko {
clear: both;
color: #000000;
float: left;
font-size: 14px;
}

.varialue {
clear: both;
}

.varitieto {
display: inline-block;
float: left;
height: 20px;
width: 16.6%;
}

.tyylitieto {
background-color: white;
border: 1px solid black;
display: inline-block;
float: left;
height: 20px;
width: 38px;
}

.tyyliviiva1 {
width: 100%;
height: 10px;
border-bottom: 2px solid black;
position: relative;
}

.tyyliviiva2{
width: 100%;
height: 10px;
border-bottom: 2px dotted black;
position: relative;
}

.tyyliviiva3{
width: 100%;
height: 10px;
border-bottom: 2px dashed black;
position: relative;
}

.varitieto2 {
border: 1px solid black;
display: inline-block;
float: left;
height: 20px;
width: 48%;
}

.varitieto:hover,
.varitieto2:hover, 
.tyylitieto:hover {
cursor:pointer;	
}

.slider {
clear: both;
float: left;
width: 80%;
}

.slider2 {
clear: both;
float: left;
margin: 0 2px;
width: 100px;
}

.paikkaalue {
clear: both;
cursor: pointer;
float: left;
font-size: 10px;
height: 36px;
position: relative;
width: 36px;
}

.luode {
background-color: white;
border: 1px solid blue; 
bottom: 26px;
display: inline-block;
height: 10px;
left: 10px;
position: absolute;
width: 10px;    
}

.pohjoinen {
background-color: white; 
border: 1px solid blue;
bottom: 26px;
display: inline-block;
height: 10px;
left: 22px;
position: absolute;
width: 10px;     
}

.koilinen {
background-color: white; 
border: 1px solid blue;
bottom: 26px;
display: inline-block;
height: 10px;
left: 34px;
position: absolute;
width: 10px;  
}

.lansi {
background-color: white;  
border: 1px solid blue;
bottom: 14px;
display: inline-block;
height: 10px;
left: 10px;
position: absolute;
width: 10px;
}

.keskus {
background-color: red;
border: 1px solid blue;
bottom: 14px;    
cursor: default;
display: inline-block;
height: 10px;
left: 22px;
position: absolute;
width: 10px;
}

.ita {
background-color: white;
border: 1px solid blue;  
bottom: 14px;
display: inline-block;
height: 10px;
left: 34px;
position: absolute;
width: 10px;
}

.lounas {
background-color: white;
border: 1px solid blue;
bottom: 2px;
display: inline-block;
height: 10px;
left: 10px;
position: absolute;
width: 10px;     
}

.etela {
background-color: white;
border: 1px solid blue;
bottom: 2px; 
display: inline-block;
height: 10px;
left: 22px;
position: absolute;
width: 10px;
}

.kaakko {
background-color: white;
border: 1px solid blue;
bottom: 2px; 
display: inline-block;
height: 10px;
left: 34px;
position: absolute;
width: 10px;
}


.maaritelma{
background-color:#00FF00;
padding-left:2px;
padding-right:2px;
}

.lause{
background-color:#FFD700;
padding-left:2px;
padding-right:2px;
}

.todistus{
background-color:#FFFF66;
padding-left:2px;
padding-right:2px;
}

.merkinta{
background-color:#87CEFA;
padding-left:2px;
padding-right:2px;
}

.esimerkki{
background-color:#DCDCDC;
padding-left:2px;
padding-right:2px;
}

#apupyynto, #kapupyynto {
display: none;
float: right;
margin-left: auto;
margin-right: 1px;
padding: 0 1px 0 1px;
vertical-align: middle;
}


#kommenttinappula {
margin: 2px 0;
padding: 0 1px 0 1px;
}

#mallivastaus {
display: none;
margin: 2px;
padding: 1px;
}

#apu, #kapu {
display: none;
}

#etsinta, #ketsinta {
display: none;
}

#kopiointi {
display: none;
font-family: "Computer Modern Serif";
font-style: normal;
font-variant-ligatures: none;
line-height: 1.15;
font-weight: normal;
white-space: pre-wrap;
word-wrap: break-word;
}

#kuvat {
display: block;
font-family: "Computer Modern Serif";
font-style: normal;
font-variant-ligatures: none;
font-weight: normal;
line-height: 1.15;
visibility: visible;
white-space: pre-wrap;
word-wrap: break-word;
}


#piilossa{
display: none;
}

.piilota {
display: none;
}

.nakyva {
display: inline-block;
}

.dropdown {
background-color: #D0D0D0;
float: left;
position: relative;
width: 30px;
}

.kropdown {
background-color: #00CED1;
display: inline-block;
position: relative;
}

.dropdown-sisalto {
background-color: #D0D0D0;
display: none;
position: absolute;
top: 30px;
}

.kropdown-sisalto {
background-color: #00CED1;
display: none;
position: absolute;
}

.dropdown:hover .dropdown-sisalto {
background-color: #D0D0D0;
display: flex;
z-index: 60;
}

.kropdown:hover .kropdown-sisalto {
background-color: #00CED1;
display: flex;
z-index: 60;
}

/*editorin menun merkkikaavion, pikanappainten ja fonttimuutos solut*/
.pikanappainteksti {
background-color: #D0D0D0;
}

.kikanappainteksti {
background-color: #00CED1;
}

.pikanappainteksti, .kikanappainteksti {
height: 20px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}

.pikanappaimetekarivi {
height: 30px;
left: 0;
position: absolute;
top: 20px;
width: 320px;
}

.pikanappaimettokarivi {
height: 30px;
left: 0;
position: absolute;
top: 50px;
width: 320px;
}

.pikanappaimetkolmasrivi {
height: 30px;
left: 0;
position: absolute;
top: 80px;
width: 320px;
}

#merkkikaavioteksti {
background-color: #D0D0D0;
height: 20px;
left: 0;
position: absolute;
top: 0;
width: 230px;
}

#merkkikaaviozerot {
background-color: #D0D0D0;
height: 30px;
left: 0;
position: absolute;
top: 20px;
width: 220px;
}

#merkkikaaviolisays {
background-color: #D0D0D0;
height: 30px;
left: 0;
position: absolute;
top: 50px;
width: 150px;
}

#trigot, #trigot2 {
background-color: #D0D0D0;
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 125px;
}

#arctrigot, #arctrigot2 {
background-color: #D0D0D0;
height: 30px;
left: 0;
position: absolute;
top: 30px;
width: 125px;
}

#suluteka {
background-color: #D0D0D0;
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 155px;
}

#suluttoka {
background-color: #D0D0D0;
height: 30px;
left: 0;
position: absolute;
top: 30px;
width: 155px;
}

#variteka {
background-color: #D0D0D0;
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 187px;
}

#varittoka {
background-color: #D0D0D0;
height: 30px;
left: 0;
position: absolute;
top: 30px;
width: 187px;
}


#fonttieka {
background-color: #D0D0D0;
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 155px;
}

#fonttitoka {
background-color: #D0D0D0;
height: 30px;
left: 0;
position: absolute;
top: 30px;
width: 155px;
}



#editorfooter, #piirtofooter {
min-height: 32px;
display: flex;
}

#editorfooter span, #piirtofooter span {
align-self: center;
}

#info, #yes, #virhe, #finfo, #fyes, #firhe, #kinfo, #kyes, #kirhe {
border: 1px solid;
border-radius: 6px;
display: none;
margin: 1px 2px;
padding: 2px;
}

#info, #finfo, #kinfo {
background-color: #FFFF66;
color: #9F6000;
}

#yes, #fyes, #kyes {
background-color: #DFF2BF;
color: #4F8A10;
}

#virhe, #firhe, #kirhe {
background-color: #FFBABA;
color: #D8000C;
}

div .tehtava, div .tehtavateksti {
color: black;
font-family: "Computer Modern Serif";
font-size: 20px;
margin: 5px;
text-align: left;
}

.tehtavateksti {
background-color: #D0D0D0;	
}

.ratkaisuteksti {
background-color: #D8D8D8;
font-size: 20px;
padding: 2px 0;
}

.kommenttiteksti {
background-color:#FFFFFF;
border-color: #909090;
border-radius: 10px;
border-style: solid;
border-width: 2px;
margin: 2px 0;
font-size: 20px;
}

.apuateksti {
background-color: #FFFFFF;
border-color: #FF0000;
border-radius: 10px;
border-style: solid;
border-width: 2px;
font-size: 20px;
margin: 2px 0;
}

.kommentoija {
background-color: #E0E0E0;
border-radius: 10px 10px 0 0;
font-size: 16px;
}

.eitehty {
background-color:#F0F0F0;
color: #FF0000;
}

.tehty {
background-color:#F0F0F0;
color: #00FF00;
}

.valkoinen {
color: #FFFFFF;
}

.punainen {
color: #FF0000;
}

.ajankohtaista {
background-color:GreenYellow;
}

.tausta {
background-color: #DCDCDC;
}

.suoritettu {
color: #339900;
}

.otsikot1 {
background-color: #D0D0D0;
color: #000000;
font-family: "Times";
font-size: 22px;
text-align: left;
}

.otsikot2 {
background-color: #D0D0D0;
color: #000000;
font-family: "Times";
font-size: 20px;
text-align: left;
}

.tabulaattori {
font-size: 20px;
vertical-align: middle;
}

.ed {
border-style: solid;
border-width: 1px;
}


#toolBar {
background-color: #D0D0D0;
font-family: "Times";
font-size: 16px;
user-select: none;
}


#toolBar select {
font-size: 16px;
height: 22px;
}

.intLink {
align-items: center;
background: white;
border: 1px solid #909090;
border-radius: 4px;
cursor: pointer;
display: flex;
float: left;
font-family: "Times";
font-size: 24px;
justify-content: center;
height: 28px;
margin-right: 1px;
overflow: hidden;
width: 28px;
}

.intLink5 {
background: white;
border: 1px solid #909090;
border-radius: 4px;
cursor: pointer;
float: left;
font-family: "Times";
font-size: 24px;
height: 28px;
margin-right: 1px;
overflow: hidden;
width: 28px;
}


.intLink2 {
background: white;
border: 1px solid #909090;
border-radius: 2px;
cursor: pointer;
font-family: "Times";
height: 14px;
width: 14px;
}

.intLink3 {
background: white;
border: 1px solid #909090;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-family: "Times";
font-size: 24px;
height: 28px;
margin-right: 1px;
overflow: hidden;
width: 17px;
}

#piirtoToolbar {
clear: both;
padding: 2px;
}

.intLink4 {
background: white;
border-color: #909090;
border-style: solid;
border-width: 3px;
border-radius: 4px;
cursor: pointer;
float: left;
font-family: "Times";
font-size: 24px;
height: 28px;
margin-right: 1px;
overflow: hidden;
width: 28px;
}

.intLink:hover, .intLink2:hover, .intLink3:hover {
border: 1px solid #000000;
}

.intLink4:hover {
border-color: #000000;
}

.piirtotoiminto {
border-color: #CC0000;	
}

.piirtotoiminto:hover {
border-color: #CC0000;	
}

.tooltip {
display: inline-block;
height: 28px;
letter-spacing: 1px;
position: absolute;
text-align: center;
width: 28px;
z-index: +2;
}

.tooltip3 {
display: inline-block;
height: 28px;
letter-spacing: 1px;
padding-top: 2px;
position: absolute;
text-align: center;
width: 17px;
}

.tooltip:hover:after, .tooltip3:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
color: #fff;
content: attr(data-tooltip);
font-size: 12px;
height: 20px;
left: 95%;
line-height: 20px;
padding: 2px 3px;
position: absolute;
top: -20px;
white-space: nowrap; 
z-index: 65;
-webkit-text-fill-color: #fff; 
}

.tooltip2 {
display: inline-block;
height: 16px;
letter-spacing: 1px;
position: relative;
width: 16px;
}

.tooltip2:hover::after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
color: #fff;
content: attr(data-tooltip);
font-size: 12px;
height: 20px;
left: 12px;
line-height: 20px;
padding: 2px 3px;
position: absolute;
top: -20px;
white-space: nowrap; 
z-index: 65;
}


.viivaK {
border: 1px solid black;
display: block;
margin-bottom: 1px;
margin-left: 4px;
margin-top: 1px;
width: 18px;
}

.viivaL {
border: 1px solid black;
display: block;
margin-bottom: 1px;
margin-left: 4px;
margin-top: 1px;
width: 12px;
}

.viivaC {
border: 1px solid black;
display: block;
margin-top: 1px;
margin-bottom: 1px;
margin-left: auto;
margin-right: auto;
width: 12px;
}

.viivaR {
border: 1px solid black;
display: block;
margin-bottom: 1px;
margin-left: auto;
margin-right: 4px;
margin-top: 1px;
width: 12px;
}

.laskin {
background-color: black;
display: inline-block;
position: relative;
height: 28px;
width: 28px;
}

.naytto {
border: 2px solid white;
display: block;
position: absolute;
top: 5px;
left: 3px;
width: 18px;
}

.nappi1{
border: 2px solid white;
display: block;
position: absolute;
top: 13px;
left: 3px;
width: 2px;
}

.nappi2{
border: 2px solid white;
display: block;
position: absolute;
top: 13px;
left: 11px;
width: 2px;
}

.nappi3{
border: 2px solid white;
display: block;
position: absolute;
top: 13px;
left: 18px;
width: 2px;
}

.nappi4{
border: 2px solid white;
display: block;
position: absolute;
top: 19px;
left: 3px;
width: 2px;
}

.nappi5{
border: 2px solid white;
display: block;
position: absolute;
top: 19px;
left: 11px;
width: 2px;
}

.nappi6{
border: 2px solid white;
display: block;
position: absolute;
top: 19px;
left: 18px;
width: 2px;
}

.grad {
/* Fallback */
background-color: blue;
  
/* Create the gradient. */
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  
/* Set the background size and repeat properties. */
background-size: 12px;
background-repeat: repeat;

/* Use the text as a mask for the background. */
/* This will show the gradient as a text color rather than element bg. */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; 
}


.miinus6 {
vertical-align: -6px;
}

.lisakirjaimet {
clear: both;
}

#valinnat {
display: none;
}

.table {
display: table;
}

.pienisolu {
height: 6px;
width: 8px;
}

.korkeasolu {
height: 20px;
width: 2px;
}

.minisolu {
height: 6px;
width: 2px;
}

.taysi {
height: 100%;
width: 100%;
}

.nopadding {
padding: 0;
}

.downkolmio {
height: 0;
width: 0;
border-left: 4.5px solid transparent;
border-right: 4.5px solid transparent;
border-bottom: 0;
border-top: 6px solid #228B22;
}

.upkolmio {
height: 0;
width: 0;
border-left: 4.5px solid transparent;
border-right: 4.5px solid transparent;
border-bottom: 6px solid #228B22;
border-top: 0;
}

.leftkolmio {
height: 0;
width: 0;
border-left: 0;
border-right: 3px solid #228B22;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}

.rightkolmio {
height: 0;
width: 0;
border-left: 3px solid #228B22;
border-right: 0;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}

.merkkitable {
border-collapse: collapse;
font-size: 5px;
margin-top: 2px;
}

.kata11 {
font-size: 7px;
height: 7px;
left: 7px;
position: absolute;
top: 2px;
text-align: center;
}

.kata12 {
font-size: 7px;
height: 7px;
left: 7px;
position: absolute;
top: 10px;
text-align: center;
}

.kata13 {
font-size: 7px;
height: 7px;
left: 10px;
position: absolute;
top: 18px;
text-align: center;
}

.kata21 {
font-size: 7px;
height: 7px;
right: 10px;
position: absolute;
top: 2px;
text-align: center;
}

.kata22 {
font-size: 7px;
height: 7px;
right: 8px;
position: absolute;
top: 10px;
text-align: center;
}

.kata23 {
font-size: 7px;
height: 7px;
right: 10px;
position: absolute;
top: 18px;
text-align: center;
}

@media only screen and (max-width:820px) {
	#toolBar select {
		display: none;
	}
	#valinnat {
		display: inline;
	}
	.mobile {
		display: none;
	}
}

#tekstiAlue {
background-color: white;
border-color: #000000;
border-style: solid;
border-width: 1px;
caret-color: auto;
clear: both;
cursor: text;
font-family: "Computer Modern Serif";
font-size: 24px;
font-style: normal;
font-variant-ligatures: none;
font-weight: normal;
min-height: 200px;
letter-spacing: 0;
overflow-y: scroll;
overflow-x: scroll;
padding: 4px;
white-space: normal;
word-wrap: normal;
-webkit-user-modify: read-write-plaintext-only;
-moz-user-modify: read-write-plaintext-only;
}

#tekstiAlue:focus {
outline: 0px solid transparent;
}


#oDocmenu {
background: #FFFFFF;
border: 1px solid #C6C6C6;
box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
color: #555555;
display: none;
font-family: sans-serif;
font-size: 12px;
opacity: 0;
padding: 0;
position: fixed;
visibility: hidden;
z-index: 30;
}

.oDocmenu {
display: block;
padding: 6px 8px 6px 8px;
position: relative;
width: 160px;
}

#oDoctablemenu {
background: #FFFFFF;
border: 2px solid #000000;
box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
color: #555555;
display: none;
font-family: sans-serif;
font-size: 24px;
height: 300px;
opacity: 0;
padding: 0;
position: absolute;
visibility: hidden;
width: 800px;
z-index: 30;
}

#oDoclinkkimenu, #oDocidmenu, #oDoclassmenu {
background: #FFFFFF;
border: 2px solid #000000;
box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
color: #000000;
display: none;
font-family: sans-serif;
font-size: 24px;
height: 200px;
opacity: 0;
padding: 5px;
position: absolute;
visibility: hidden;
width: 600px;
z-index: 30;
}

.keskinappula {
margin: 0;
position: absolute;
bottom: 10px;
left: 280px;
}

.oDocmenuno {
color: #D3D3D3;
display: block;
padding: 6px 8px 6px 8px;
position: relative;
width: 160px;
}

.shortcut {
color: #BCB1B3;
float: right;
}

.pasteshortcut {
color: #FF0000;
float: right;
}

.menusisalto, .menusisaltosize, .menusisaltocolor, .menusisaltocenter, .menusisaltotable {
background: #FFFFFF;
border: 1px solid #C6C6C6;
box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
clear: both;
color: #555555;
display: none;
font-family: sans-serif;
font-size: 12px;
padding: 0;
position: absolute;
visibility: hidden;
}

.menusisalto {
left: 176px;
top: -2px;
}

.menusisaltosize {
left: 176px;
top: -180px;
width: 131px;
}

.menusisaltocolor {
left: 176px;
top: -207px;
}

.menusisaltocenter {
left: 176px;
top: -25px;
}

.menusisaltotable {
left: 176px;
top: -258px;
}

.menusisalto div  {
color: #555555;
display: block;
padding: 6px 8px 6px 8px;
position: relative;
width: 130px;
}

.sarake {
box-sizing: border-box;
display: block;
float: left;
width: 50%;
}

.sarake div  {
box-sizing: border-box;
color: #555555;
display: block;
padding: 6px 4px 6px 4px;
position: relative;
width: 65px;
}


.menusisaltocolor div  {
display: block;
padding: 6px 8px 6px 8px;
position: relative;
width: 130px;
}

.menusisaltocenter div  {
color: #555555;
display: block;
padding: 6px 8px 6px 8px;
position: relative;
text-decoration: none;
width: 130px;
}

.menusisaltotable div  {
color: #555555;
display: block;
padding: 6px 8px 6px 8px;
position: relative;
text-decoration: none;
width: 130px;
}

.oDocmenu:hover {
background: #3879D9;
color: #FFFFFF;
}

#menufontstyle:hover .menusisalto {
color: #BCB1B3;
display: block;
visibility: visible;
z-index: 90;
}

#menufontfamily:hover .menusisalto {
color: #BCB1B3;
display: block;
visibility: visible;
z-index: 90;
}

#menufontsize:hover .menusisaltosize {
color: #BCB1B3;
display: block;
visibility: visible;
z-index: 90;
}

#menufontcolor:hover .menusisaltocolor {
display: block;
visibility: visible;
z-index: 90;
}

#menujustify:hover .menusisaltocenter {
color: #BCB1B3;
display: block;
visibility: visible;
z-index: 90;
}

#menutable:hover .menusisaltotable {
color: #BCB1B3;
display: block;
visibility: visible;
z-index: 90;
}

#menunofontstyle {
color: #D3D3D3;
}

#menunofontfamily {
color: #D3D3D3;
}

#menunofontsize {
color: #D3D3D3;
}

#menunofontcolor {
color: #D3D3D3;
}

#menunotable {
color: #D3D3D3;
}

#tablepuoli {
height: 250px;
left: 0;
position: absolute;
top: 0;
width: 500px;
}

#solupuoli {
height: 250px;
left: 500px;
position: absolute;
top: 0;
width: 300px;
}

.varivalinta {
width: 490px;
height: 30px;
}

.tabletyylivalinta {
width: 290px;
height: 40px;
}

.varilaiska {
border: 1px solid black;
display: inline-block;
float: left;
height: 28px;
width: 28px;
}

#currentbg, #currentodd, #currenteven {
border: 1px solid black;
display: inline-block;
float: right;
height: 28px;
width: 28px;
}

#currentborder, #currentborderstyle, #currentoutsideborder, #currentinsideborder {
border-color: black;
border-style: solid;
border-width: 5px;
display: inline-block;
float: right;
height: 20px;
width: 20px;
}

.currenttext {
float:right;
font-size: 16px;
display: inline-block;
}

.varireuna {
display: inline-block;
float: left;
height: 20px;
width: 20px;
border-width: 5px;
}

.paksureuna {
display: inline-block;
float: left;
height: 20px;
width: 20px;
border-style: solid;
border-color: #000000;
}

.varilaiska:hover,
.varireuna:hover,
.paksureuna:hover {
cursor:pointer;	
}

.lapin {
background-color: #FFFFFF;
}

.punai {
background-color: #FF0000;
}

.orans {
background-color: #FFA500;
}

.kella {
background-color: #FFFF00;
}

.limev {
background-color: #00FF00;
}

.vihre {
background-color: #008000;
}

.harma {
background-color: #A9A9A9;
}

.syaan {
background-color: #00FFFF;
}

.sinin {
background-color: #0000FF;
}

.fuksi {
background-color: #FF00FF;
}

.viole {
background-color: #800080;
}

.ruske {
background-color: #A52A2A;
}

.musta {
background-color: #000000;
}

.forestgreen {
background-color: #228B22;
}

.lapinre {
background-color: #FFFFFF;
border-style: solid;
}

.punaire {
border-color: #FF0000;
border-style: solid;
}

.oransre {
border-color: #FFA500;
border-style: solid;
}

.keltare {
border-color: #FFFF00;
border-style: solid;
}

.limevre {
border-color: #00FF00;
border-style: solid;
}

.vihrere {
border-color: #008000;
border-style: solid;
}

.harmare {
border-color: #A9A9A9;
border-style: solid;
}

.syaanre {
border-color: #00FFFF;
border-style: solid;
}

.sininre {
border-color: #0000FF;
border-style: solid;
}

.fuksire {
border-color: #FF00FF;
border-style: solid;
}

.violere {
border-color: #800080;
border-style: solid;
}

.ruskere {
border-color: #A52A2A;
border-style: solid;
}

.mustare {
border-color: #000000;
border-style: solid;
}

.resol {
border-color: #000000;
border-style: solid;
}

.redot {
border-color: #000000;
border-style: dotted;
}

.redas {
border-color: #000000;
border-style: dashed;
}

.redou {
border-color: #000000;
border-style: double;
}

.regro {
border-color: #000000;
border-style: groove;
}

.renon {
border-color: #000000;
border-style: none;
}

.reun1 {
border-width: 0.1em;
}

.reun2 {
border-width: 0.15em;
}

.reun3 {
border-width: 0.2em;
}

.reun4 {
border-width: 0.25em;
}

.reun5 {
border-width: 0.3em;
}

.reun6 {
border-width: 0.4em;
}


#tableok {
position: absolute;
top: 260px;
left: 50%;
}	

#funktioY {
background-color: #FFFFFF;
border-style: none;
clear: both;
cursor: initial;
font-family: "Computer Modern Serif";
font-size: 24px;
font-style: normal;
font-weight: normal;
min-height: 40px;
min-width: 300px;
letter-spacing: 0;
margin-left: 2px;
overflow: auto;
position: relative;
text-align: left;
}

#operaattori, .operaattori {
font-size: 16px;
margin-left: 2px;
margin-right: 2px;
vertical-align: 0.1em;
}


#funktioAlue {
background-color: #affef1;
border-style: none;
cursor: text;
display: inline-block;
font-family: "Computer Modern Serif";
font-size: 24px;
font-style: normal;
font-variant-ligatures: none;
font-weight: normal;
letter-spacing: 0;
overflow: hidden;
padding-left: 5px;
padding-right: 5px;
text-align: left;
vertical-align: middle;
white-space: pre-wrap;
word-wrap: break-word;
}

#funktioAlue:focus {
outline: 0px solid transparent;
}


#tekstiLisays {
background-color: white;
border-color: #000000;
border-style: solid;
border-width: 1px;
clear: both;
cursor: text;
font-family:"Computer Modern Serif";
font-size: 20px;
font-style: normal;
font-variant-ligatures: none;
font-weight: normal;
min-height: 80px;
letter-spacing: 0;
min-width: 200px;
overflow-y: scroll;
overflow-x: scroll;
padding: 4px;
white-space: pre-wrap;
word-wrap: break-word;
}


#tekstiLisays:focus {
outline: 0px solid transparent;
}


.oikealle {
float: right;
}

#oikeinvaivaarin {
color: #0000FF;
}


.kaksi {
font-size:200%;
line-height:200%;
}


.alla {
font-size: 24px;
font-style: inherit;
vertical-align: bottom;
}

.allaborderi {
border-bottom: 1px solid black;
}

#edi, #piirtoedi {
background-color: #D0D0D0;
border-style: solid;
border-width: 2px;
min-width: 300px;
z-index: 50;
}

#edi {
opacity: 0.1;
}

#kedi {
background-color: #00CED1;
border-style: solid;
border-width: 2px;
display: none;
left: 10%;
position: absolute;
right: 10%;
z-index: 50;
}

.ruutu {
border-style: dotted;
border-width: 1px;
}


#piirtoalue {
background-color: #F0F0F0;
}

#koordinaatisto {
background-color: #FFFFFF;
border: 1px solid #000000;
min-height: 320px;
min-width: 320px;
touch-action: auto;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}

.piirtokuvat {
border-color: black;
border-style: solid;
border-width: 2px;
border-radius:3px;
margin: 1px;
}

.piirtokalut {
vertical-align: top;
width: 40%;
}

.alaindeksi {
font-size: 60%;
vertical-align: sub;
}

.alkunappula {
display: table;
margin: 0 auto;
}

.tyhjaavasen {
clear: left;
}

.funktioilmo {
font-size:16px;
}

/* kayttajan omia spanneja*/
#tekstiAlue .ownclass {
background-color: #FAEBD7;
}

#tekstiAlue .ownid {
background-color: #D8BFD8;
}

#tekstiAlue .ownatag {
background-color: #32CD32;
text-decoration: underline;
}

/* matikka  (math)*/

.editori {
font-style: normal;
}


/*matematiikan kirjoittaminen sivulle*/
.mat {
display: inline;
font-family: "Computer Modern Serif";
font-size: 20px;
font-weight: normal;
break-inside: avoid;
text-indent: 0;
white-space: normal;
}

/*editorin rivit*/
.lmrow {
font-family: "Computer Modern Serif", Times, "Times New Roman";
font-variant-ligatures: none;
letter-spacing: 0;
line-height: 1.15;
margin-bottom: 2px;
margin-top: 2px;
width: 100%;
white-space: pre-wrap;
}

#tekstiAlue .lmrow::after {
content: " ";
pointer-events: none;
}

.lmtext {
width: 100%;
}

.lmchar {
display: inline;
line-height: 1.15;
}

.nospace {
letter-spacing: 0 !important;
}

.pois {
white-space: pre;
}

.merkattu {
background-color: yellow;
}


/*inline stylet soluissa*/
.vasemmalle {
text-align: left;
}

.keskelle {
text-align: center;
}

.oikealle {
text-align: right;
}

/*muuttujan tiedot*/
#muuttuja, #kuuttuja {
font-family: "Computer Modern Serif";
font-style: italic;
letter-spacing: 0.02em;
text-align: center;
text-align-last: center;
width: 150px;
}

.vakiot {
font-family: "Computer Modern Serif";
font-style: italic;
letter-spacing: 0.02em;
text-align: center;
text-align-last: center;
width: 100px;
}

#valinta {
width: 150px;
}

.muuttuja {
font-family: "Computer Modern Serif";
font-style: italic;
letter-spacing: 0.02em;
text-align-last: center;
}

/*koordinaatistoon piirtamat tekstit*/
.matpiirto {
display: inline;
font-family: "Computer Modern Serif";
font-weight: normal;
break-inside: avoid;
text-indent: 0;
white-space: nowrap;
}

/* piirtosovelluksen funktioiden kirjoitus matikat*/
.fat {
font-family: "Computer Modern Serif";
font-size: 20px;
font-style:normal;
font-variant-ligatures: none;
font-weight: normal;
break-inside: avoid;
text-align: left;
text-indent: 0;
white-space: nowrap;
word-wrap: break-word;
}


/*itseisarvoon */
.piirto {
border-color: inherit;
}

/*editorin kuvaluokka*/
.kuva {
background: white;
display: inline-block;
line-height: 0.1em;
margin-left: 2px;
margin-right: 2px;
overflow: hidden;
resize: vertical;
text-indent: 0;
}

.kuva img {
width: 100%;
height: 100%;
}

/*editing styles*/
.yliviivaus {
text-decoration: line-through;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 0.15em;
}

.alleviivaus {
text-decoration: underline;
text-decoration-style: solid;
text-decoration-color: inherit;
text-decoration-thickness: 0.1em;
}

.viivaylla {
text-decoration: overline;
text-decoration-style: solid;
text-decoration-color: inherit;
text-decoration-thickness: 0.1em;
}

.italic {
font-style: italic;
letter-spacing: 0.05em;
font-kerning: none;
}

/*jotkin tarvitsevat marginaalia*/
.letspace {
letter-spacing: 0.02em;
}

.letnosto {
vertical-align: 0.08em;
}

.font9 {
font-size: 9px;
}

.font11 {
font-size: 11px;
}

.font12 {
font-size: 12px;
}

.font14 {
font-size: 14px;
}

.font16 {
font-size: 16px;
}

.font17 {
font-size: 17px;
}

.font18 {
font-size: 18px;
}

.font20 {
font-size: 20px;
}

.font22 {
font-size: 22px;
}

.font24 {
font-size: 24px;
}

.font26 {
font-size: 26px;
}

.font28 {
font-size: 28px;
}

.font30 {
font-size: 30px;
}

.font32 {
font-size: 32px;
}

.font34 {
font-size: 34px;
}

.font40 {
font-size: 40px;
}

.font44 {
font-size: 44px;
}

.font48 {
font-size: 48px;
}

.fontxxxsmall {
font-size: 0.5em;
}

.fontxxsmall {
font-size: 0.625em;
}

.fontxsmall {
font-size: 0.75em;
}

.fontsmall {
font-size: 0.875em;
}

.fontmedium {
font-size: 1em;
}

.fontlarge {
font-size: 1.125em;
}

.fontxlarge {
font-size: 1.25em;
}

.fontxxlarge {
font-size: 1.5em;
}

.fontxxxlarge {
font-size: 2em;
}

.fontxxxxlarge {
font-size: 3em;
}

.prime {
font-style: italic;
letter-spacing: 0.02em;
margin-left: -0.1em;
margin-right: 0.1em;
position: relative;
bottom: 0.1em;
}

.bold {
font-weight: bold;
}

.puna {
color: #FF0000;
}

.oranssi {
color: #FFA500;
}

.kelta {
color: #FFFF00;
}

.lime {
color: #00FF00;
}

.vihrea {
color: #008000;
}

.harmaa {
color: #A9A9A9;
}

.syaani {
color: #00FFFF;
}

.sini {
color: #0000FF;
}

.fuchsia {
color: #FF00FF;
}

.violetti {
color: #800080;
}

.ruskea {
color: #A52A2A;
}

.arial {
font-family: "Arial";
}

.times {
font-family: "Times";
}

.courier {
font-family: "Courier New";
}

/*editorin normitaulukko*/
.editaulukko {
background-color: var(--taulubgcolor, transparent);
border-collapse: collapse;
border-color: var(--taulucolor, black);
border-style: var(--taulustyle, solid);
border-width: var(--tauluwidth, 0.15em);
font-family: "Computer Modern Serif";
margin: 0.1em;
outline-color: transparent;
outline-style: solid;
padding: 0.06em;
white-space: pre-wrap;
}

.editaulukko tr, 
.editaulukko td {
border-color: var(--taulucolor, black);
border-style: var(--taulustyle, solid);
border-width: var(--taulusisawidth, 0.1em);
}

.odd tr:nth-child(odd){
background-color: var(--tauluoddcolor, transparent);
}

.even tr:nth-child(even){
background-color: var(--tauluevencolor, transparent);
}

/*vastaus taulukko*/
.vastaustaulukko {
border: none;
background-color: aqua;
}

.vastauslaatikko tbody, .vastaustaulukko tbody {
border: none;
background-color: aqua;
}

.vastauslaatikko {
background-color: aqua;
border: none;
font-family: "Computer Modern Serif";
margin: 0.1em 0;
outline-style: none;
padding: 0;
}

.vastauseka td {
border: none;
}

.v0::before {
content:"";
pointer-events: none;
}

.v1::before {
content:"a)";
pointer-events: none;
}

.v2::before {
content:"b)";
pointer-events: none;
}

.v3::before {
content:"c)";
pointer-events: none;
}

.v4::before {
content:"d)";
pointer-events: none;
}

.v5::before {
content:"e)";
pointer-events: none;
}

.v6::before {
content:"f)";
pointer-events: none;
}

.v7::before {
content:"g)";
pointer-events: none;
}

.v8::before {
content:"h)";
pointer-events: none;
}

.rivi {
background-color: transparent;
}

.solu {
background-color: transparent;
font-size: inherit;
min-width: 20px;
padding: 0.1em 0.2em;
text-align: left;
vertical-align: baseline;
white-space: pre;
}

.eireunaa {
border: none;
outline: none;
margin: 0;
}

/*editorin merkkikaavio*/
.merkkikaavio {
background-color: transparent;
border-collapse: collapse;
border-color: black;
border-style: solid;
border-width: var(--kaaviowidth, 0.1em);
font-family: "Computer Modern Serif";
margin: 0.1em;
outline-color: transparent;
outline-style: solid;
padding: 0.06em;
}

.ksolu {
background-color: transparent;
font-size: inherit;
min-width: 20px;
vertical-align: baseline;
}

.otsikkosolu {
border-right-color: red;
border-width: var(--kaaviowidth, 0.1em);
text-align: left;
}

.ekasolu {
border-width: var(--kaaviowidth, 0.1em);
text-align: left;
}

.nollaraja {
border-right-color: red;
border-right-style: solid;
border-width: var(--kaaviowidth, 0.1em);
}

.vikasolu {
border-left-color: red;
border-left-style: solid;
border-width: var(--kaaviowidth, 0.1em);
}

.nollakohta {
background-color: transparent;
border-bottom-color: red;
border-bottom-style: solid;
border-left-color: red;
border-left-style: solid;
border-right-color: red;
border-right-style: solid;
border-width: var(--kaaviowidth, 0.1em);
font-size:inherit;
text-align:center;
}

.nollakohtavika {
border-bottom-color: red;
border-bottom-style: solid;
border-left-color: red;
border-left-style: solid;
border-right-color: red;
border-right-style: solid;
border-width: var(--kaaviowidth, 0.1em);
text-indent: -33%;
}

/*matriisi*/
.matriisi {
background-color: transparent;
display: inline-block;
margin-left: 0.1em;
margin-right: 0.1em;
outline-color: transparent;
outline-style: solid;
position: relative;
vertical-align: middle;
text-indent: 0;
}

.matriisiauki, .matriisikiinni {
background-color: transparent;
display: inline-block;
height: calc(100% - 0.1em);
position: absolute;
top: 0;
}

.matriisiauki {
border-color: var(--maaukicolor, black);
border-style: solid;
border-width: 0.075em 0 0.075em 0.085em;
left: 0;
width: 0.2em;
}

.matriisikiinni {
border-color: var(--makiinnicolor, black);
border-style: solid;
border-width: 0.075em 0.085em 0.075em 0;
right: 0;
width: 0.2em;
}

.matriisisisus {
background-color: transparent;
display: inline-table;
margin-left: 0.1em;
margin-right: 0.1em;
outline-color: transparent;
outline-style: solid;
padding-left: 0.2em;
padding-right: 0.2em;
vertical-align: middle;
}

.matriisirivi {
background-color: transparent;
display: table-row;
text-align: center;
}

.matriisisolu {
background-color: transparent;
border-style: solid;
border-width: 0.1em;
border-color: var(--masolucolor, #FFFFFF);
display: table-cell;
padding-left: 0.1em;
padding-right: 0.1em;
text-align: center;
}


/*keskelle tasattu teksti*/
.tex {
text-align: center;
}

.merkki {
text-align: center;
}

/* matikan rivit */
.row {
text-align: center;
vertical-align: 0;
white-space: pre;
}

/*jakolasku*/
.frae {
border-collapse: collapse;
display: inline-table;
font-size: 0.9em;
margin-left: 0.06em;
margin-right: calc(3px + 0.1em);
outline-color: transparent;
outline-style: solid;
text-align: center;
text-indent: 0;
vertical-align: calc(50% + 1px);
}

.oso, .nim {
background-color: inherit;
outline-color: inherit;
outline-style: solid;
}

.oso {
display: inline-table;
margin: auto;
/*padding-bottom: 0.04em;*/
text-align: center;
vertical-align: bottom;
width: calc(100% + 3px);
}

.nim {
border-color: var(--nimcolor, black);
border-top-style: solid;
border-top-width: 0.07em;
display: block;
margin: auto;
/*padding-top: 0.08em;*/
text-align: center;
width: calc(100% + 3px);
}


/* aput toimivat chromen kursorin sovittajana ja safarin kursorin liikeapuna */ 
.blockapu {
background-color: inherit;
border-spacing: 0;
display: block;
margin: auto;
padding-bottom: 1px;
padding-top: 1px;
text-align: center;
width: 100%;
}

.tableapu {
background-color: inherit;
border-spacing: 0;
display: table;
margin: auto;
text-align: center;
width: 80%;
}

.potapu {
background-color: inherit;
border-spacing: 0;
display: table;
margin: auto;
text-align: center;
width: 80%;
}

.supistusapu {
background-color: inherit;
display: inline-block;
text-align: right;
width: 100%;
}


.supistusviiva {
background-color: transparent;
border-spacing: 0;
border-left: 0.1em solid;
border-left-color: var(--sucolor, black);
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
display: inline-block;
height: 0.9em;
margin-right: -0.5em;
margin-top: 0.4em;
width: 0.7em;
transform: rotate(-35deg);
}

.lavennuskeraaja, .supistuskeraaja {
display: flex;
}

.lavennusapu {
background-color: inherit;
display: inline-block;
padding-right: 0.1em;
text-align: left;
width: 100%;
}

.lavennusviiva {
background-color: transparent;
border-spacing: 0;
border-right: 0.1em solid;
border-right-color: var(--lacolor, black);
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
display: inline-block;
height: 0.9em;
margin-left: -0.6em;
margin-top: 0.4em;
width: 0.7em;
transform: rotate(35deg);
}

/*alaindeksi*/
.sub {
display: inline-block;
font-size: 0.7em;
margin-left: 0;
margin-right: 0.2em;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
vertical-align: -0.8em;
}

/* potenssi */
.sup {
display: inline-block;
font-size: 0.7em;
margin-left: 0;
margin-right: 0.1em;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
vertical-align: 0.3em;
}

/* lavennus */
.lav {
display: inline-block;
font-size: 0.7em;
margin-left: 0.1em;
margin-right: 0.1em;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
vertical-align: 0.6em;
}


/* supistus */
.spi {
display: inline-block;
font-size: 0.7em;
margin-left: 0.2em;
margin-right: 0.1em;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
vertical-align: 0.3em;
}

/* integraali */
.int {
background-color: transparent;
font-family: "Computer Modern Serif";
font-size: 1.8em;
font-style: normal;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
vertical-align: -0.1em;
}

/*intalaraja*/
.intala {
background-color: transparent;
display:inline-block;
font-size: 0.7em;
margin-left: -0.8em;
margin-right: 0.6em;
vertical-align: -1.25em;
}

/*intylaraja*/
.intyla {
background-color: transparent;
display: inline-block;
font-size: 0.7em;
margin-left: -0.1em;
margin-right: 0.2em;
vertical-align: 1.2em;
}

/*maaratty integraali*/
.maaint {
outline-color: transparent;
outline-style: solid;
text-indent: 0;
}

.iay::before {
background-color: transparent;
color: var(--maacolor, black);
content: "\222B";
font-family: "Computer Modern Serif";
font-size: 1.8em;
font-style: normal;
vertical-align: -0.1em;
pointer-events: none;
}

/* sijoitusintegraali */
.sijint {
outline-color: transparent;
outline-style: solid;
text-indent: 0;
}

.sijala {
background-color: transparent;
display: inline-block;
font-size: 0.7em;
margin-left: -1.1em;
margin-right: 0.4em;
vertical-align: -1.25em;
}

.sijyla {
background-color: transparent;
display: inline-block;
font-size: 0.7em;
margin-left: 0;
margin-right: 0.2em;
vertical-align: 1.25em;
}

.say::before {
background-color: transparent;
color: var(--sijcolor, black);
content: "/";
font-size: 2em;
font-style: normal;
font-weight: bold;
vertical-align: -0.1em;
pointer-events: none;
}

/*ala ja ylaindeksi*/
.ala {
background-color: transparent;
display: inline-block;
font-size: 0.7em;
margin-left: 0;
margin-right: 0;
vertical-align: -0.8em;
}

.yla {
background-color: transparent;
display:inline-block;
font-size: 0.7em;
margin-left: 0;
margin-right: 0.2em;
vertical-align: 0.3em;
}

/* evalintegraali */
.evalint {
outline-color: transparent;
outline-style: solid;
text-indent: 0;
}

.evaala {
background-color: transparent;
display: inline-block;
font-size: 0.7em;
margin-left: -0.2em;
margin-right: 0;
vertical-align: -1.25em;
}

.evayla {
background-color: transparent;
display: inline-block;
font-size: 0.7em;
margin-left: 0;
margin-right: 0.2em;
vertical-align: 1.3em;
}

.eay::before {
background-color: transparent;
color: var(--evalcolor, black);
content: "|";
font-size: 2em;
font-style: normal;
font-weight: bold;
vertical-align: -0.1em;
pointer-events: none;
}

/*yhtalöparit*/
.yhtpari {
display: inline-block;
margin-left: 0.1em;
margin-right: 0.1em;
outline-color: transparent;
outline-style: solid;
padding-left: 0.06em;
padding-right: 0.06em;
position: relative;
text-align: left;
text-indent: 0;
vertical-align: 0;
}

.yparialin {
background-color: transparent;
display: inline-block;
font-size: inherit;
margin-left: 0.5em;
margin-right: 0.2em;
position: relative;
top: 0;
}

.ypariekarivi, .yparivalirivi, .yparivikarivi {
background-color: transparent;
display: block;
}


/*alakeraaja*/
.alasulku {
align-items: center;
display: inline-flex;
flex-direction: column;
justify-content: flex-start;
outline-color: transparent;
outline-style: solid;
padding-left: 0.07em;
padding-right: 0.07em;
position: relative;
text-indent: 0;
vertical-align: 0;
}

.alaeka {
margin-left: auto;
margin-right: auto;
text-align: center;
}

.alaraja {
background-color: transparent;
left: 0;
position: relative;
pointer-events: none;
right: -0.1em;
top: -0.1em;
}

.alateksti {
background-color: transparent;
font-size: 80%;
margin-top: -0.1em;
position: relative;
text-align: center;
}

/*ylakeraaja*/
.ylasulku {
align-items: center;
baseline-source: last;
display: inline-flex;
flex-direction: column-reverse;
justify-content: flex-end;
outline-color: transparent;
outline-style: solid;
padding-left: 0.07em;
padding-right: 0.07em;
position: relative;
text-indent: 0;
}

.ylaeka {
margin-left: auto;
margin-right: auto;
margin-top: 0;
text-align: center;
}

.ylaraja {
background-color: transparent;
left: 0;
position: relative;
pointer-events: none;
right: -0.1em;
top: 0;
}

.ylateksti {
background-color: transparent;
font-size: 80%;
margin-bottom: -0.1em;
position: relative;
text-align: center;
}

/*vektori*/
.vector, .vectorback {
background-color: var(--bgrcolor, transparent);
display: inline-flex;
font-style: italic;
letter-spacing: 0.02em;
margin-right: 0.1em;
min-width: 0.4em;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
position: relative;
}

.vectorTop {
background-color: transparent;
left: 0.05em;
position: absolute;
pointer-events: none;
right: -0.2em;
top: 0.1em;
}

.vectorTeksti {
left: 0;
padding-top: 0.2em;
position: relative;
top: 0;
}

/*Ylanuoli tekstilla*/
.arrowup, .arrowleftup {
background-color: var(--bgrcolor, transparent);
display: inline-flex;
flex-direction: column;
margin-left: 0.1em;
margin-right: 0.1em;
min-width: 0.4em;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
vertical-align: 0.1em;
}

.arrowdown, .arrowleftdown {
background-color: var(--bgrcolor, transparent);
display: inline-flex;
flex-direction: column;
margin-left: 0.1em;
margin-right: 0.1em;
min-width: 0.4em;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
vertical-align: text-bottom;
}

.arrowTop {
background-color: transparent;
display: block;
}

.arrowTeksti {
background-color: transparent;
display: block;
font-size: 0.8em;
}

.arrowUnder {
background-color: transparent;
display: block;
margin-bottom: 0.3em;
}


/*vektorit kuviossa*/
.vektori {
background-color: transparent;
background-image: none;
border-collapse: separate;
border-color: var(--vecolor, black);
border-spacing: 0;
border-style: solid;
border-width: 0.085em 0 0 0;
display: inline-table;
font-style: italic;
letter-spacing: 0.02em;
line-height: 1em;
outline-color: transparent;
outline-style: solid;
padding-right: 0.13em;
vertical-align: 0;
}

/*summa, tulo*/
.sum, 
.tulo {
border-collapse: collapse;
display: inline-block;
font-size: 1em;
margin-left: 0.1em;
margin-right: 0.1em;
outline-color: transparent;
outline-style: solid;
text-align: center;
text-indent: 0;
vertical-align: 0;
}

.keraaja {
background-color: transparent;
display: inline-block;
vertical-align: -0.4em;
}

.ylaosa {
background-color: transparent;
display: table;
font-size: 0.8em;
margin-bottom: -0.1em;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 0.5em;
}

.alaosa {
background-color: transparent;
display: table;
font-size: 0.8em;
margin-left: auto;
margin-right: auto;
margin-top: -0.1em;
text-align: center;
width: 0.5em;
}

.keskiosa {
background-color: transparent;
display: table;
font-size: 1.4em;
text-align: center;
}

/*teksti alla ylla*/
.uno {
background-color: var(--bgrcolor, transparent);
border-collapse: collapse;
display: inline-block;
font-size: 1em;
margin-left: 0.1em;
margin-right: 0.1em;
outline-color: transparent;
outline-style: solid;
text-align: center;
text-indent: 0;
vertical-align: 0;
}

.keraaja2 {
background-color: transparent;
display: inline-block;
margin-bottom: 0;
}

.keski {
background-color: transparent;
display: inline-table;
font-size: 1em;
margin: 0 auto;
text-align: center;
width: 0.5em;
}

/*und = tekstia alla*/
.und {
baseline-source: first;
display: inline-flex;
flex-direction: column;
margin: 0 0.04em 0 0.04em;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
}

.und {
background-color: var(--bgrcolor, transparent);
}


/*tekstia ylla*/
.ove {
background-color: var(--bgrcolor, transparent);
baseline-source: last;
display: inline-flex;
flex-direction: column-reverse;
margin: 0 0.04em 0 0.04em;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
}

.oveeka, .undeka {
text-align: center;
}

.undtoka {
font-size: 80%;
margin: -0.1em 0 0 0;
text-align: center;
white-space: pre;
}

.ovetoka {
font-size: 80%;
margin: 0 0 -0.1em 0;
text-align: center;
white-space: pre;
}

/*neliojuuri*/
.sqr {
border-spacing: 0;
direction: ltr;
display: inline-table;
margin-left: 0.3em;
margin-right: 0.1em;
outline-color: transparent;
outline-style: solid;
padding-right: 0.06em;
position: relative;
text-indent: 0;
top: 0;
}

.sqrsis {
background-color: transparent;
border-top-color: var(--sqrcolor, black);
border-top-style: solid;
border-top-width: 2px;
display: inline-block;
margin-left: 0;
padding-left: 0.1em;
padding-right: 0.1em;
padding-top: 2px;
vertical-align: baseline;
}

.juurimerkki {
background-color: transparent;
display: inline-block;
}

.juurimerkkieka {
background-color: transparent;
border-top-color: var(--juurirtcolor, black);
border-top-style: solid;
border-top-width: 1px;
border-right-color: var(--juurirtcolor, black);
border-right-style: solid;
border-right-width: 2px;
bottom: calc(10% + 0.04em);
display: inline-block;
height: 0.4em;
position: absolute;
left: 0;
transform: rotate(-30deg);
transform-origin: bottom right;
width: 0.1em;
}

.juurimerkkitoka {
background-color: transparent;
border-left-color: var(--juuricolor, black);
border-left-style: solid;
border-left-width: 2px;
display: inline-block;
height: 90%;
left: 0.115em;
position: absolute;
top: 0;
transform-origin: bottom left;
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
width: 1px;
}


/*njuuri*/
.roo {
border-spacing: 0;
direction: ltr;
display: inline-table;
margin-left: 0.05em;
margin-right: 0.08em;
padding-right: 2px;
position: relative;
outline-color: transparent;
outline-style: solid;
text-indent: 0;
top: 0;
}

.rooapu {
background-color: transparent;
display: inline-flex;
font-size: 0.7em;
line-height: 1em;
margin-left: 0;
margin-right: -0.2em;
margin-bottom: calc(10% + 0.6em);
text-align: right;
vertical-align: bottom;
}

.juuri {
display: inline-block;
padding-left: 0.1em;
padding-right: 0.1em;
}

.rootmerkkieka {
background-color: transparent;
border-top-color: var(--rootrtcolor, black);
border-top-style: solid;
border-top-width: 1px;
border-right-color: var(--rootrtcolor, black);
border-right-style: solid;
border-right-width: 2px;
bottom: calc(10% + 0.04em);
display: inline-block;
height: 0.4em;
position: absolute;
left: 0;
transform: rotate(-30deg);
transform-origin: bottom right;
width: 0.1em;
}

.roottipaikka {
background-color: transparent;
display: inline-table;
position:relative;
}

.rootapu {
background-color: transparent;
border-top-color: var(--rootopcolor, black);
border-top-style: solid;
border-top-width: 2px;
display: inline-block;
margin-left: 0;
padding-bottom: 1px;
padding-right: 0.2em;
padding-left: 0.1em;
padding-top: 2px;
vertical-align: baseline;
}

.rootmerkkitoka {
background-color: transparent;
border-left-color: var(--rootcolor, black);
border-left-style: solid;
border-left-width: 2px;
display: inline-block;
height: 90%;
left: 0.115em;
position: absolute;
top: 0;
transform-origin: bottom left;
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
width: 1px;
}


/*reunat*/
.reunavasen {
background-color: var(--bgrcolor, transparent);
background-image: none;
border-collapse: separate;
border-left-color: var(--revacolor, black);
border-left-style: solid;
border-left-width: 0.12em;
border-spacing: 0;
caret-color: red;
display: inline-table;
margin-left: 0;
outline-color: transparent;
outline-style: solid;
padding-left: 0;
padding-right: 0;
text-indent: 0;
vertical-align: 0;
}

.reunayla {
background-color: var(--bgrcolor, transparent);
background-image: none;
border-collapse: separate;
border-spacing: 0;
border-top-color: var(--reylcolor, black);
border-top-style: solid;
border-top-width: 0.12em;
caret-color: red;
display: inline-table;
margin-left: 0;
outline-color: transparent;
outline-style: solid;
padding-left: 0;
padding-right: 0;
text-indent: 0;
vertical-align: 0;
}

.reunaoikea {
background-color: var(--bgrcolor, transparent);
background-image: none;
border-collapse: separate;
border-right-color: var(--reoicolor, black);
border-right-style: solid;
border-right-width: 0.12em;
border-spacing: 0;
caret-color: red;
display: inline-table;
margin-left: 0;
outline-color: transparent;
outline-style: solid;
padding-left: 0;
padding-right: 0;
text-indent: 0;
vertical-align: 0;
}

.reunaala {
background-color: var(--bgrcolor, transparent);
background-image: none;
border-bottom-color: var(--realcolor, black);
border-bottom-style: solid;
border-bottom-width: 0.12em;
border-collapse: separate;
border-spacing: 0;
caret-color: red;
display: inline-table;
margin-left: 0;
outline-color: transparent;
outline-style: solid;
padding-left: 0;
padding-right: 0;
text-indent: 0;
vertical-align: 0;
}

/*sulut*/
.pare {
border-collapse: separate;
border-spacing: 0;
display: inline-block;
outline-color: transparent;
outline-style: solid;
position: relative;
text-indent: 0;
vertical-align: 0;
}

.avaa1 {
margin-left: 0.1em;
padding-left: 0;
}

.avaa2 {
margin-left: 0.1em;
}

.avaa3, .avaa4, .avaa5 {
margin-left: 0.1em;
padding-left: 0;
}

.avaa6 {
margin-left: 0.2em;
padding-left: 0.1em;
padding-right: 0.1em
}

.sulje1 {
margin-right: 0.11em;
padding-right: 0;
}

.sulje2 {
margin-right: 0.6em;
}

.sulje3, .sulje4, .sulje5 {
margin-right: 0.2em;
padding-right: 0;
}

.sulje6 {
margin-right: 0.2em;
padding-right: 0.1em;
}

.auki1 {
background-color: transparent;
border-style: none;
border-left: 0.085em solid;
border-left-color: var(--paleftcolor, black);
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
bottom: 0;
display: inline-block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 0.6em;
}

.auki2, .ypari {
background-color: transparent;
display: inline-block;
left: 0;
pointer-events: none;
position: absolute;
}

.auki2, .ypari {
top: 0;
}


.auki3, .kiinni3, .auki6, .kiinni6 {
background-color: transparent;
display: inline-block;
height: calc(100% - 0.1em);
position: absolute;
top: 0;
}

.auki3 {
border-color: var(--paraukicolor, black);
border-style: solid;
border-width: 0.075em 0 0.075em 0.085em;
left: 0;
width: 0.2em;
}

.auki4, .kiinni4, .auki5, .kiinni5 {
background-color: transparent;
bottom: 0;
display: inline-block;
height: 100%;
position: absolute;
top: 0;
}

.auki4 {
border-left: 0.085em solid;
border-left-color: var(--pyleftcolor, black);
left: 0;
margin-left: 0;
margin-right: 0;
width: 1px;
}

.auki5 {
border-color: var(--tuaukicolor, black);
border-style: solid double;
border-width: 0 0 0 0.23em;
left: 0;
margin-left: 0;
margin-right: 0;
width: 1px;
}

.auki6 {
border-color: var(--kiinnikiinnicolor, black);
border-style: solid;
border-width: 0.075em 0.085em 0.075em 0;
left: 0;
width: 0.2em;
}

.paresis {
background-color: transparent;
display: inline-table;
position: relative;
vertical-align: 0;
z-index: +1;
}


/* normisulut haka tuplat*/
.paresisleft1 {
margin-left: 0.16em;
padding-left: 0.1em;
}

/* aalto*/
.paresisleft2 {
font-size: 1em;
margin-left: 0.5em;
}

/* pystyt*/
.paresisleft3 {
margin-left: 0.15em;
margin-right: 0.18em;
}

/* hakavaarinpain*/
.paresisleft4 {
margin-left: 0.3em;
padding-left: 0;
}

/* normisulut haka tuplat*/
.paresisright1 {
margin-right: 0.2em;
padding-right: 0.1em;
}

/* aalto */
.paresisright2 {
font-size: 1em;
}


/* pystyt*/
.paresisright3 {
font-size: 1em; 
}

/*hakavaarinpain*/
.paresisright4 {
margin-right: 0.3em;
}

.kiinni1 {
background-color: transparent;
border-style: none;
border-right: 0.085em solid;
border-right-color: var(--parightcolor, black);
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
bottom: 0;
display: inline-block;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 0.6em;
}

.kiinni2 {
background-color: transparent;
display: inline-block;
pointer-events: none;
position: absolute;
right: -0.5em;
top: 0;
}


.kiinni3 {
border-color: var(--parkiinnicolor, black);
border-style: solid;
border-width: 0.075em 0.085em 0.075em 0;
right: 0;
width: 0.2em;
}


.kiinni4 {
border-right: 0.085em solid;
border-right-color: var(--pyrightcolor, black);
margin-left: 0;
margin-right: 0;
right: 0;
width: 1px;
}

.kiinni5 {
border-color: var(--tukiinnicolor, black);
border-style: solid double;
border-width: 0 0.23em 0 0;
margin-left: 0;
margin-right: 0;
right: 0;
width: 1px;
}

.kiinni6 {
border-color: var(--aukiaukicolor, black);
border-style: solid;
border-width: 0.075em 0 0.075em 0.085em;
right: 0;
width: 0.2em;
}

.eikiinnitetty {
border-right-color: var(--rightcolor, lightgray);
}

/*binomi*/
.binomi {
background-color: transparent;
border-collapse: separate;
border-spacing: 0;
display: inline-table;
margin-left: 0.085em;
margin-right: 0.085em;
outline-color: transparent;
outline-style: solid;
position: relative;
text-indent: 0;
vertical-align: 50%;
}

.binoauki {
background-color: transparent;
border-bottom-left-radius: 50%;
border-left: 0.085em solid;
border-left-color: var(--bileftcolor, black);
border-top-left-radius: 50%;
bottom: 4%;
content: "";
display: inline-block;
height: 92%;
left: 0;
margin-left: 0;
margin-right: 0;
position: absolute;
top: 4%;
width: 0.6em;
}

.binokiinni {
background-color: transparent;
border-bottom-right-radius: 50%;
border-right: 0.085em solid;
border-right-color: var(--birightcolor, black);
border-top-right-radius: 50%;
bottom: 4%;
content: "";
display: inline-block;
float: left;
height: 92%;
margin-left: 0;
margin-right: 0;
position: absolute;
right: 0;
top: 4%;
width: 0.6em;
}

.binsiseka {
background-color: transparent;	
display: block;
margin-left: 0.1em;
margin-right: 0.1em;
padding-left: 0.2em;
padding-right: 0.2em;
position: relative;
text-align: center;
z-index: +1;
}

.binsistoka {
background-color: transparent;
display: block;
margin-left: 0.1em;
margin-right: 0.1em;
padding-left: 0.2em;
padding-right: 0.2em;
position: relative;
text-align: center;
z-index: +1;
}

.hakaeikiinnitetty {
border-color: var(--parkiinnicolor, lightgray);
}

.valittu {
background-color: rgb(0,0,255,0.99);
outline-color: rgb(0,0,255,0.99);
}

.ennen.valittu::before {
background-color: rgb(0,0,255,0.99);
}

.jalkeen.valittu::after, .jalkeen.valitturivi::after {
background-color: rgb(0,0,255,0.99);
}

.moi::after {
	content: "\a";
}

/*html editorin otsikot*/
.h1 {
font-size: 2em;
font-weight: bold;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 0;
margin-right: 0;
text-indent: 0;
}

.h2 {
font-size: 1.5em;
font-weight: bold;
margin-top: 0.8em;
margin-bottom: 0.8em;
margin-left: 0;
margin-right: 0;
text-indent: 0;
}

.h3 {
font-size: 1.17em;
font-weight: bold;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
text-indent: 0;
}

.h4 {
font-size: 1em;
font-weight: bold;
margin-top: 1.2em;
margin-bottom: 1.2em;
margin-left: 0;
margin-right: 0;
text-indent: 0;
}

.h5 {
font-size: .83em;
font-weight: bold;
margin-top: 1.5em;
margin-bottom: 1.5em;
margin-left: 0;
margin-right: 0;
text-indent: 0;
}

.h6 {
font-size: .67em;
font-weight: bold;
margin-top: 2em;
margin-bottom: 2em;
margin-left: 0;
margin-right: 0;
text-indent: 0;
}