/*PAINIKKEIDEN IKONIT*/
/*materiaaliartikkeleiden ohjeteksteissä käytetään painikkeista kuvakkeita (ikoneita) tekstin sisällä. Painikkeiden kuvat ovat png-kuvia ja löytyvät Mediakirjastosta. Itse kuva
on png-muotoinen ja leveys määritellään CSS-muotoilussa width ja height määritteellä ja elementti asetetaan inline-block-määritteellä.*/

/*PAINIKKEET NÄPPÄIMISTÖN YHTEYDESSÄ*/

span.a {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/a.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.alt {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/alt.webp);
    background-size: contain;
    width: 50px;
    height: 30px;
}
span.altgr {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/altgr.webp);
    background-size: contain;
    width: 50px;
    height: 30px;
}
span.b {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/b.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.backspace {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/backspace.webp);
    background-size: contain;
    width: 70px;
    height: 30px;
}
span.c {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/c.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.caps-lock {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/caps.webp);
    background-size: contain;
    width: 70px;
    height: 30px;
}
span.ctrl {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/ctrl.webp);
    background-size: contain;
    width: 50px;
    height: 30px;
}
span.d {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/d.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.delete {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/delete.webp);
    background-size: contain;
    width: 50px;
    height: 30px;
}
span.e {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/e.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.end {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/end.webp);
    background-size: contain;
    width: 50px;
    height: 30px;
}
span.enter {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/enter.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.g {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/g.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.hiiri-1 {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/hiiri-1.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.hiiri-2 {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/hiiri-2.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.hiiri-rulla {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/hiiri-rulla.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.home {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/home.webp);
    background-size: contain;
    width: 50px;
    height: 30px;
}
span.i {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/i.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.insert {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/insert.webp);
    background-size: contain;
    width: 50px;
    height: 30px;
}
span.m {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/m.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.o {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/o.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.printscreen {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/printscreen.webp);
    background-size: contain;
    width: 50px;
    height: 30px;
}
span.r {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/r.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.s {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/s.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.shift {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/shift.webp);
    background-size: contain;
    width: 70px;
    height: 30px;
}
span.tab {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/tab.webp);
    background-size: contain;
    width: 70px;
    height: 30px;
}
span.v {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/v.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.windows {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/windows.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.x {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/x.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.y {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/y.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}
span.z {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    background-image: url(../img/z.webp);
    background-size: contain;
    width: 30px;
    height: 30px;
}