//            stroke              fill
//    {0xcc, 0xcc, 0xcc}, {0x7f, 0x7f, 0x7f}, /* 0 */
//    {0xff, 0x99, 0x99}, {0xff, 0x00, 0x00}, /* 1 */
//    {0x99, 0xff, 0x99}, {0x00, 0xcc, 0x00}, /* 2 */
//    {0xff, 0xff, 0x33}, {0xff, 0xa0, 0x00}, /* 3 */
//    {0x99, 0x99, 0xff}, {0x00, 0x00, 0xff}, /* 4 */
//    {0xcc, 0x99, 0xff}, {0x80, 0x00, 0xff}, /* 5 */
//    {0x66, 0xb3, 0xff}, {0x00, 0x80, 0xff}, /* 6 */
//    {0xff, 0xff, 0xff}, {0x7f, 0x7f, 0x7f}, /* 7 */
//
///* light */ - use for background blocsk
//    {0xee, 0xee, 0xee}, {0x7f, 0x7f, 0x7f}, /* 0 */
//    {0xff, 0xcc, 0xcc}, {0xff, 0x00, 0x00}, /* 1 */
//    {0xcc, 0xff, 0xcc}, {0x00, 0xcc, 0x00}, /* 2 */
//    {0xff, 0xff, 0x99}, {0xff, 0xa0, 0x00}, /* 3 */
//    {0xcc, 0xcc, 0xff}, {0x00, 0x00, 0xff}, /* 4 */
//    {0xe6, 0xcc, 0xff}, {0x80, 0x00, 0xff}, /* 5 */
//    {0xb3, 0xd9, 0xff}, {0x00, 0x80, 0xff}, /* 6 */
//    {0xff, 0xff, 0xff}, {0x7f, 0x7f, 0x7f}, /* 7 */
//
///* bold */
//    {0xaa, 0xaa, 0xaa}, {0x7f, 0x7f, 0x7f}, /* 0 */
//    {0xff, 0x5c, 0x5c}, {0xff, 0x00, 0x00}, /* 1 */
//    {0x5c, 0xff, 0x5c}, {0x00, 0xcc, 0x00}, /* 2 */
//    {0xff, 0xc0, 0x00}, {0xff, 0xa0, 0x00}, /* 3 */
//    {0x5c, 0x5c, 0xff}, {0x00, 0x00, 0xff}, /* 4 */
//    {0xae, 0x5c, 0xff}, {0x80, 0x00, 0xff}, /* 5 */
//    {0x29, 0x94, 0xff}, {0x00, 0x80, 0xff}, /* 6 */
//    {0xff, 0xff, 0xff}, {0x00, 0x00, 0x00}  /* 7 white, black outline */


body
{
margin: 0px;
background: #000000;
font-family: sans-serif;
font-size: 3vw;
}

.black, div.item.grey div.key, div.item.grey div.item-text, div.menu h1, div.menu h2
{
color: #7f7f7f;
-webkit-text-fill-color: #cccccc;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #7f7f7f;
text-fill-color: #cccccc;
text-stroke-width: 0.03em;
text-stroke-color: #7f7f7f;
}

.red
{
color: ##ff0000;
-webkit-text-fill-color: #ff9999;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #ff0000;
text-fill-color: #ff9999;
text-stroke-width: 0.3em;
text-stroke-color: #ff0000;
}

.green
{
color: #00cc00;
-webkit-text-fill-color: #99ff99;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #00cc00;
text-fill-color: #99ff99;
text-stroke-width: 0.03em;
text-stroke-color: #00cc00;
}

.yellow
{
color: #ffa000;
-webkit-text-fill-color: #ffff33;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #ffa000;
text-fill-color: #ffff33;
text-stroke-width: 0.03em;
text-stroke-color: #ffa000;
}

.blue, div.item, div.item-options, div.instructions p
{
color: #0000ff;
-webkit-text-fill-color: #9999ff;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #0000ff;
text-fill-color: #9999ff;
text-stroke-width: 0.03em;
text-stroke-color: #0000ff;
}

.magenta
{
color: #8000ff;
-webkit-text-fill-color: #cc99ff;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #8000ff;
text-fill-color: #cc99ff;
text-stroke-width: 0.03em;
text-stroke-color: #8000ff;
}

.cyan, div.item-options div.option.selected
{
color: #0080ff;
-webkit-text-fill-color: #66b3ff;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #0080ff;
text-fill-color: #66b3ff;
text-stroke-width: 0.03em;
text-stroke-color: #0080ff;
}

.black-background, div.item.grey div.key, div.item.grey div.item-text 
{
background: #eeeeee;
border: 0.06em solid #7f7f7f;
}

.blue-background, div.item div.key, div.item div.item-text, div.item-options div.option, div.item-slider
{
background:#ccccff;
border:0.06em solid #0000ff;
}

.cyan-background, div.item-options div.option.selected
{
background: #b3d9ff;
border: 0.06em solid #0080ff;
}

div.menu
{
position: absolute;
top: 0px;
right: 0px;
opacity: 1;
background: #ffffff;
width: 100%;
min-height: 100%;
transition: width 1s ease, height 1s ease, opacity 1s ease, top 1s ease, right 1s ease;
}

div.menu h1
{
font-size: 100%;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}

div.menu h2
{
font-size: 100%;
margin-top: 1em;
margin-bottom: 0.25em;
margin-left: 1em;
margin-right: 1em;
}

div.menu div.logo
{
margin: auto;
text-align: center;
font-size: 125%;
margin-top: 0.5em;
margin-bottom: -0.5em;
}

div.menu div.logo.big
{
font-size: 500%;
margin-top: 0em;
margin-bottom: -0.125em;
}

div.spacer {
height: 1em;
}

div.items {
padding-bottom: 0.5em;
}

div.item {
margin-top: 0.06em;
cursor: pointer;
width: 100%;
}

div.item div.key {
float: left;
width: 1.5em;
text-align: center;
padding-top: 0.25em;
padding-bottom: 0.25em;
margin-left: 1em;
margin-right: 0.06em;
overflow: hidden;

}

div.item-text {
overflow: auto;
text-align: left;
padding-top: 0.25em;
padding-bottom: 0.25em;
padding-left: 0.5em;
padding-right: 0.25em;
margin-left: 2em;
margin-right: 1em;

}

div.item-text select {
float: right;
}

div.item-options
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;

margin-left: 1em;
margin-right: 0.94em;

cursor: pointer;

}

div.item-options div.option
{
flex-grow: 1;
position: relative;

margin-right: 0.06em;
margin-top: 0.06em;
padding: 0.25em;
}

div.item-options div.option.four
{
flex: 1 0 0;
width: 0%;
}

div.item-options div.option.three
{
width: 25%;
}

div.item-options div.option div.key
{

display: inline-block;
width: 1.5em;
text-align: center;

padding-top: 0.25em;
padding-bottom: 0.25em;

margin-left: -0.25em;
margin-top: -0.25em;
margin-bottom: 0.25em;
margin-right: 0.5em;

background:#ccccff;
border-right: 0.06em solid #0000ff;
border-bottom: 0.06em solid #0000ff;
}

div.item-options div.option.selected div.key
{
background: #b3d9ff;
border-right: 0.06em solid #0080ff;
border-bottom: 0.06em solid #0080ff;
}

div.item-options div.option img
{
width: 100%;
display: block;
}

div.item-options div.option input
{
float: right;
width: 3em;
height: 1em;
font-size: 100%;
}

div.item-slider
{
margin-left: 1em;
margin-right: 1em;
margin-top: 0.06em;
padding-left: 2em;
padding-right: 0.25em;
padding-bottom: 0.25em;
}

div.item-slider input.slider
{
display: block;
float: left;
width: calc(100% - 6em);
height: 1em;
}

div.item select
{
font-size: 100%;
}

div.item input
{
font-size: 100%;
}

div.item-slider input.number
{
float: right;
font-size: 100%;
width: 3em;
height: 1em;
}

div.item-slider div.title
{
text-align: left;
padding-top: 0.25em;
padding-bottom: 0.25em;
}

div.item-left {
float: left;
}

div.item-right {
float: right;
}


div.clear {
clear: both;
}


div.instructions p
{
margin-left: 1em;
margin-right: 1em;
}




















div#menu-icon {
display: none;
position: fixed;
top: 0px;
right: 0px;
background: #ffffff;
cursor: pointer;
transition: opacity 1s ease;
opacity: 1;
}




div.keypad
{
position: fixed;
top: 0px;
left: 0px;
display: table;
background: #ffffff;
width: auto;
border: 1px solid black;
font-size: 16px;
}

div.keypad.transition
{
transition: top 1s ease, left 1s ease;
}

div.keypad.minimised
{
top: -125px;
left: -125px;
}

div.keypad div.row
{
display: table-row;
width: auto;
}

div.keypad div.row div.cell
{
display: table-cell;
height: 50px;
width: 50px;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 2px solid #ffffff;

}

div.keypad div.row div.cell div.key
{
display: table-cell;
height: 50px;
width: 50px;
text-align: center;
vertical-align: middle;
cursor: pointer;
top: 0px;
left: 0px;
}

div.keypad div.row div.cell div.key.cyan
{
background:#b3d9ff;
border:2px solid #0080ff;
}

div.keypad div.row div.cell div.key.blue
{
background:#ccccff;
border:2px solid #0000ff;
}

div.keypad div.row div.cell div.toggle
{
display: table-cell;
height: 50px;
width: 50px;
text-align: right;
vertical-align: bottom;
cursor: pointer;
}

div.keypad div.row div.cell div.drag
{
display: table-cell;
height: 50px;
width: 50px;
text-align: left;
vertical-align: bottom;
cursor: pointer;
}





@media (max-width: 480px)
{
    body
    {
        font-size: 14.4px;
    }

    div.item div.key, div.item-options div.option div.key
    {
        display: none;
    }

    div.item div.item-text, div.menu h2, div.item-options, div.item-slider, div.instructions p
    {
        margin-left: 0em;
        margin-right: 0em;
    }

    div.item-slider
    {
        padding-left: 0.5em;
    }

    div#menu-icon
    {
        font-size: 200%;
    }

    div.item, div.slider
    {
        margin-top: 1px;
    }

    div.item-options div.option
    {
        margin-top: 1px;
        margin-right: 1px;
    }
}