.header-button-tools.selected {
	background-color: transparent!important;
}
html.no-touch .header-button-tools:hover {
	background-color: rgba(0,0,0,.1) !important;
}

/***/
html.no-mobile.tools-visible .header-button-tools {
	display: none;
}
html.no-mobile.tools-visible #container {
	padding-right: 50px;
}
html.no-mobile.tools-visible #navigation-contents {
    right: 50px;
}

/***/
#tools-sheet {
	position: fixed;
	top: 0;
	left: 0;
	right: 50px;
	bottom: 0;
	z-index: 100;
}
#tools {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50px;
	background-color: #000;
	z-index: 101;
}

.tools-button-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background-image: url(../index/images/tools.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
html.no-touch .tools-button-toggle:hover {
	background-color: rgba(255,255,255,.2) !important;
}

html:not(.tools-visible) #tools-sheet,
html:not(.tools-visible) #tools {
	display: none;
}

html.mobile #tools-sheet,
html.mobile #tools,
html.mobile .header-button-tools {
	display: none;
}

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


/* SELAINILMOITUS */
.tyokalut-selainIlmoitus {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 13px;
    line-height: 1em;
    padding: 11px 6px 12px 13px;
    box-sizing: border-box;
    color: #fff;
    background-color: #000;
    color: #fff;
}
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;
    box-sizing: border-box;
    pointer-events: none;
    
    border: 10px solid transparent;
    -webkit-border-image: url(images/tools/reunus.png) 20 round;
    border-image: url(images/tools/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);
    -webkit-border-image: none;
    border-image: none;
}


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



/*** TEKSTIT ***/
.tyokalut-merkinnat-tekstit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
	bottom: 0;
    overflow: hidden;
}

.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: #fff;
    border: 1px solid #ccc;
    
    outline: 0px solid transparent !important;
}
.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%;
    border: 1px solid #fff;
    box-sizing: border-box;
	z-index: 1;
    
    background-image: url(images/tools/tekstiikonit.png);
    background-size: auto 100%;
}
.tyokalut-merkinnat-tekstit .teksti-siirraB {
    left: -10px;
    top: -10px;
    background-color: #00f;
    background-position: left 0% center;
    cursor: move;
}
.tyokalut-merkinnat-tekstit .teksti-poistaB {
    right: -10px;
    top: -10px;
    background-color: #f00;
    background-position: left 100% center;
    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 {
    
}
.tyokalut-valikko.piilossa {
    display: none;
}

.tyokalut-valikko-taulu {
    position: absolute;
    top: calc(50% + 25px);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.tyokalut-valikko-rivi {
    padding: 5px 0;
	margin: 0 5px;
}
.tyokalut-valikko-rivi:not(:first-child) {
    border-top: 1px solid #666;
}

.tyokalut-valikko-nappi {
	position: relative;
	
	width: 40px;
    height: 40px;
    cursor: pointer;
    
    background-image: url(images/tools/tyokaluikonit.png);
    background-size: 200% auto;
}
.tyokalut-valikko-nappi.selected {
    background-color: #666;
}
.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 #666;
	box-sizing: content-box;
}
html.no-touch .tyokalut-valikko-nappi:hover .tyokalut-valikko-nappi-sisalto {
    border-color: #fff;
}


.tyokalut-varipaletti {
    position: absolute;
    bottom: 0;
    right: 50px;
    background-color: #000;
    padding: 5px;
	z-index: 10001;
}
.tyokalut-varipaletti::before {
    content: '';
    position: absolute;
    left: calc(100% - 17px);
    bottom: 10px;
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #000;
}
.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%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    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: #fff;
}



.tyokalut-valikko-nappi[data-tyokalu="osoitin"]{
    background-position: left 100% top 0%;
}
.tyokalut-valikko-nappi[data-tyokalu="tyhjenna"]{
    background-position: left 100% top 9.09%;
}
.tyokalut-valikko-nappi[data-tyokalu="kumi"]{
    background-position: left 100% top 18.18%;
}
.tyokalut-valikko-nappi[data-tyokalu="peruuta"]{
    background-position: left 100% top 27.27%;
}
.tyokalut-valikko-nappi[data-tyokalu="kyna"]{
    background-position: left 100% top 36.36%;
}
.tyokalut-valikko-nappi[data-tyokalu="yliviivaus"]{
    background-position: left 100% top 45.45%;
}
.tyokalut-valikko-nappi[data-tyokalu="viiva"]{
    background-position: left 100% top 54.54%;
}
.tyokalut-valikko-nappi[data-tyokalu="suorakulmio"]{
    background-position: left 100% top 63.63%;
}
.tyokalut-valikko-nappi[data-tyokalu="suorakulmio-taytto"]{
    background-position: left 100% top 72.72%;
}
.tyokalut-valikko-nappi[data-tyokalu="soikio"]{
    background-position: left 100% top 81.81%;
}
.tyokalut-valikko-nappi[data-tyokalu="soikio-taytto"]{
    background-position: left 100% top 90.9%;
}
.tyokalut-valikko-nappi[data-tyokalu="teksti"]{
    background-position: left 100% top 100%;
}

.tyokalut-valikko-nappi[data-tyokalu="osoitin"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="osoitin"]:hover{
    background-position: left top 0%;
}
.tyokalut-valikko-nappi[data-tyokalu="tyhjenna"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="tyhjenna"]:hover{
    background-position: left top 9.09%;
}
.tyokalut-valikko-nappi[data-tyokalu="kumi"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="kumi"]:hover{
    background-position: left top 18.18%;
}
.tyokalut-valikko-nappi[data-tyokalu="peruuta"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="peruuta"]:hover{
    background-position: left top 27.27%;
}
.tyokalut-valikko-nappi[data-tyokalu="kyna"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="kyna"]:hover{
    background-position: left top 36.36%;
}
.tyokalut-valikko-nappi[data-tyokalu="yliviivaus"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="yliviivaus"]:hover{
    background-position: left top 45.45%;
}
.tyokalut-valikko-nappi[data-tyokalu="viiva"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="viiva"]:hover{
    background-position: left top 54.54%;
}
.tyokalut-valikko-nappi[data-tyokalu="suorakulmio"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="suorakulmio"]:hover{
    background-position: left top 63.63%;
}
.tyokalut-valikko-nappi[data-tyokalu="suorakulmio-taytto"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="suorakulmio-taytto"]:hover{
    background-position: left top 72.72%;
}
.tyokalut-valikko-nappi[data-tyokalu="soikio"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="soikio"]:hover{
    background-position: left top 81.81%;
}
.tyokalut-valikko-nappi[data-tyokalu="soikio-taytto"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="soikio-taytto"]:hover{
    background-position: left top 90.9%;
}
.tyokalut-valikko-nappi[data-tyokalu="teksti"].selected,
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="teksti"]:hover{
    background-position: left top 100%;
}


.tyokalut-valikko-nappi[data-tyokalu="vari"]{
    background-image: none !important;
}
.tyokalut-valikko-nappi[data-tyokalu="vari"].selected{
	background-color: transparent;
	pointer-events: all;
}


.tyokalut-valikko-nappi[data-tyokalu="koko"]{
    background-image: url(images/tools/kokoikonit.png);
	background-size: auto 200%;
}
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"]:hover,
.tyokalut-valikko-nappi[data-tyokalu="koko"].selected{
    background-image: url(images/tools/kokoikonit.png);
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="0"]{
    background-position: left 0% top 100%;
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="1"]{
    background-position: left 25% top 100%;
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="2"]{
    background-position: left 50% top 100%;
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="3"]{
    background-position: left 75% top 100%;
}

html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="0"]:hover{
    background-position: left 0% top;
}
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="1"]:hover{
    background-position: left 25% top;
}
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="2"]:hover{
    background-position: left 50% top;
}
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="3"]:hover{
    background-position: left 75% top;
}