/***/
#tyokalut-pohja {
	position: fixed;
	top: 0;
	left: 0;
	right: 2em;
	bottom: 0;
	z-index: 10001;
}
#tyokalut {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2em;
	background-color: var(--secondary-800);
	z-index: 10001;
}

#tyokalut .tyokalutB {
	position: absolute;
	top: 0;
	right: 0;
}

html:not(.tyokalut-esilla) #tyokalut-pohja,
html:not(.tyokalut-esilla) #tyokalut {
	display: none;
}


/******************* TYÖKALUT *******************/


/* SELAINILMOITUS */
.tyokalut-selainIlmoitus {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 13px;
	line-height: 1em;
	padding: 11px 6px 12px 13px;
	color: var(--secondary-000);
	background-color: #000;
	color: var(--secondary-000);
}
html:not(.badIE) .tyokalut-selainIlmoitus {
	display: none;
}



/* MERKINNÄT */
.tyokalut-merkinnat {
	overflow: hidden;
	cursor: crosshair;
}
.tyokalut-merkinnat.piilossa {
	display: none;
}
.tyokalut-merkinnat[data-tyokalu="osoitin"] {
	pointer-events: none;
	cursor: default;
}
.tyokalut-merkinnat[data-tyokalu="teksti"] {
	cursor: text;
}

/* REUNUS */
.tyokalut-merkinnat-reunus {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	
	border: 10px solid transparent;
	border-image: url(images/reunus.png) 20 round;
}
.tyokalut-merkinnat[data-tyokalu="osoitin"] .tyokalut-merkinnat-reunus {
	display: none;
}
html.badIE .tyokalut-merkinnat-reunus {
	border: 10px solid rgba(0,0,0,.5);
	border-image: none;
}


/*** CANVAS ***/
.tyokalut-merkinnat canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	transform-origin: 0 0;
}


/*** TEKSTIT ***/
.tyokalut-merkinnat-tekstit {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	transform-origin: 0 0;
}

.tyokalut-merkinnat-tekstit .teksti {
	position: absolute;
}
.tyokalut-merkinnat-tekstit .teksti-sisalto {
	display: inline-block;
	min-width: 100px;
	font-size: 25px;
	line-height: 1em;
	min-height: 1em;
	padding: .25em;
	color: #000;
	background-color: var(--secondary-000);
	border: 1px dashed #ccc;
	outline: none;
	text-align: left;
}
.tyokalut-merkinnat-tekstit .teksti-sisalto p {
	margin: 0; /*IE fix*/
}
.tyokalut-merkinnat-tekstit .teksti-poistaB,
.tyokalut-merkinnat-tekstit .teksti-siirraB {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-shadow: 0 0px 2px rgb(255,255,255);
	z-index: 1;
}
.tyokalut-merkinnat-tekstit .teksti-siirraB {
	left: -10px;
	top: -10px;
	background-color: #00f;
	cursor: move;
}
.tyokalut-merkinnat-tekstit .teksti-poistaB {
	right: -10px;
	top: -10px;
	background-color: #f00;
	cursor: pointer;
}

.tyokalut-merkinnat[data-tyokalu="teksti"] .tyokalut-merkinnat-tekstit {
	background-color: rgba(0,0,0,0); /* IE10 fix*/
}
.tyokalut-merkinnat:not([data-tyokalu="teksti"]) .tyokalut-merkinnat-tekstit {
	pointer-events: none;
}
.tyokalut-merkinnat:not([data-tyokalu="teksti"]) .tyokalut-merkinnat-tekstit .teksti-poistaB,
.tyokalut-merkinnat:not([data-tyokalu="teksti"]) .tyokalut-merkinnat-tekstit .teksti-siirraB {
	display: none;
}




/*** VALIKKO ***/
.tyokalut-valikko {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tyokalut-valikko.piilossa {
	display: none;
}

.tyokalut-valikko-taulu {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tyokalut-valikko-nappi {
	flex: 0 1 2em;
	position: relative;
	width: 2em;
	height: auto;
	cursor: pointer;
	background-image: url(images/tyokaluikonit.png);
	background-size: 100% auto;
}
.tyokalut-valikko-nappi-jakaja {
	border-top: 1px solid var(--secondary-600);
}
html.no-touch .tyokalut-valikko-nappi:not(.selected):hover {
	background-color: var(--secondary-700);
}
.tyokalut-valikko-nappi.selected {
	background-color: var(--secondary-900);
	pointer-events: none;
}
.tyokalut-valikko-nappi.disabled {
	pointer-events: none;
	display: none;
}
.tyokalut-valikko-nappi-sisalto {
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	border: 1px solid var(--secondary-000);
	box-sizing: content-box;
}
html.no-touch .tyokalut-valikko-nappi:hover .tyokalut-valikko-nappi-sisalto {
	border-color: var(--secondary-000);
}


.tyokalut-varipaletti {
	position: absolute;
	bottom: 0;
	right: calc(100% + 10px);
	background-color: var(--text-black);
	padding: 5px;
	z-index: 10001;
	/* box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.5); */
	box-shadow: var(--varjo);
}
.tyokalut-varipaletti::before {
	content: '';
	position: absolute;
	left: calc(100% - 17px);
	bottom: .5em;
	width: 20px;
	height: 20px;
	transform: rotate(45deg);
	background-color: var(--text-black);
}
.tyokalut-varipaletti-taulu {
	position: relative;
}
.tyokalut-varipaletti-rivi {
	display: block;
	white-space: nowrap;
	line-height: 0;
}
.tyokalut-varipaletti-nappi {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
}
.tyokalut-varipaletti-nappi-sisalto {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 80%;
	transform: translate(-50%, -50%);
	border: 1px solid #666;
}
html.no-touch .tyokalut-varipaletti-nappi:hover .tyokalut-varipaletti-nappi-sisalto,
.tyokalut-varipaletti-nappi.selected .tyokalut-varipaletti-nappi-sisalto {
	border-color: var(--secondary-000);
}



.tyokalut-valikko-nappi[data-tyokalu="osoitin"]{
	background-position: center top 0%;
}
.tyokalut-valikko-nappi[data-tyokalu="tyhjenna"]{
	background-position: center top 9.09%;
}
.tyokalut-valikko-nappi[data-tyokalu="kumi"]{
	background-position: center top 18.18%;
}
.tyokalut-valikko-nappi[data-tyokalu="peruuta"]{
	background-position: center top 27.27%;
}
.tyokalut-valikko-nappi[data-tyokalu="kyna"]{
	background-position: center top 36.36%;
}
.tyokalut-valikko-nappi[data-tyokalu="yliviivaus"]{
	background-position: center top 45.45%;
}
.tyokalut-valikko-nappi[data-tyokalu="viiva"]{
	background-position: center top 54.54%;
}
.tyokalut-valikko-nappi[data-tyokalu="suorakulmio"]{
	background-position: center top 63.63%;
}
.tyokalut-valikko-nappi[data-tyokalu="suorakulmio-taytto"]{
	background-position: center top 72.72%;
}
.tyokalut-valikko-nappi[data-tyokalu="soikio"]{
	background-position: center top 81.81%;
}
.tyokalut-valikko-nappi[data-tyokalu="soikio-taytto"]{
	background-position: center top 90.9%;
}
.tyokalut-valikko-nappi[data-tyokalu="teksti"]{
	background-position: center top 100%;
}
.tyokalut-valikko-nappi[data-tyokalu="vari"]{
	background-image: none !important;
}
.tyokalut-valikko-nappi[data-tyokalu="koko"]{
	background-image: url(images/kokoikonit.png);
	background-size: auto 100%;
}
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"]:hover,
.tyokalut-valikko-nappi[data-tyokalu="koko"].selected{
	background-image: url(images/kokoikonit.png);
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="0"]{
	background-position: left 0% center;
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="1"]{
	background-position: left 33.333% center;
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="2"]{
	background-position: left 66.666% center;
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="3"]{
	background-position: left 100% center;
}