/* ------------------------------- */
/* HELP */
/* ------------------------------- */


/* 
--------------------
menu
--------------------
*/

.btn-menu {
    background-repeat: no-repeat;

    color: white;
    background-position: center center;
    width: 60px;
    height: 60px;
    /* background-color: blue; */
    position: absolute;
    top: 0px;
    right: 0px;
    /* background-color: rgba(0,255,0,0.0); */
    /* background-color: rgba(0, 0, 255, 0.6); */

    visibility: hidden;
}

.PAINT .btn-menu,
.PAINT-MENU .btn-menu {
    _visibility: hidden;
    _background-color: red;
    visibility: visible;
}

.btn-menu:after {
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20style%3D%22fill%3A%23FFFFFF%3B%22%20d%3D%22M1%2C4h12c0.553%2C0%2C1-0.447%2C1-1s-0.447-1-1-1H1C0.447%2C2%2C0%2C2.447%2C0%2C3S0.447%2C4%2C1%2C4z%20M13%2C6H1%20C0.447%2C6%2C0%2C6.447%2C0%2C7c0%2C0.553%2C0.447%2C1%2C1%2C1h12c0.553%2C0%2C1-0.447%2C1-1C14%2C6.447%2C13.553%2C6%2C13%2C6z%20M13%2C10H1c-0.553%2C0-1%2C0.447-1%2C1%20s0.447%2C1%2C1%2C1h12c0.553%2C0%2C1-0.447%2C1-1S13.553%2C10%2C13%2C10z%22%2F%3E%3C%2Fsvg%3E");
    background-position: 52% 50%;
    background-repeat: no-repeat;
    background-size: 2em 2em;
    content: " ";
    display: block;
    height: 60px;
    left: 0;
    position: relative;
    width: 60px;
    cursor: pointer;
    z-index: 200;
}

.menu-back-layer {
    display: block;
    background-color: rgba(255, 0, 0, 0);
    /* background-color: rgba(255, 0, 0, 0.5); This color is used for debuging purposes */

    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    /* Full-screen layer behind the menu by default must be hidden */

    display: none;
    /* additionally this layer must be transparent */
}

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: cursor;
}

.menu {
    display: block;
    position: absolute;
    top: 60px;
    right: 0px;
    background-color: #ccc;
    border: 1px solid #222;
    border-bottom: none;

    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
    width: auto;
    cursor: pointer;
}

.menu li {

    FONT-WEIGHT: BOLD;
    color: black;

    padding: 12px 17px;
    border-bottom: 1px solid #222;
    cursor: pointer;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,dfe5d7+40,b3bead+100;Wax+3D+%233 */
    background: #fcfff4;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.menu li.focused,
.menu li.MNU-SELECTED,
.menu li.is-selected {

    color: white;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
    background: #1e5799;
    /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
    /* IE6-9 */

}

.menu li:hover {
    color: white;
    background-color: #000;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+95 */
    background: rgb(181, 189, 200);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(181, 189, 200, 1) 0%, rgba(130, 140, 149, 1) 95%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(181, 189, 200, 1) 0%, rgba(130, 140, 149, 1) 95%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(181, 189, 200, 1) 0%, rgba(130, 140, 149, 1) 95%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5bdc8', endColorstr='#828c95', GradientType=0);
    /* IE6-9 */
}

/*
.menu-icon {
	position relative;
	width: 40px;
	height: 40px;
	border: 1px solid black;
	float: left;
	border-radius: 100px;
} 

.icon-about {

}
*/

/* ------------------------------- */
/* HELP */
/* ------------------------------- */

.side-menu-help {
    background-color: #2989d8;
    width: 5px;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 200;
    right: -5px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: right, color, opacity;
    -moz-transition-property: right, color, opacity;
    -o-transition-property: right, color, opacity;
    transition-property: right, color, opacity;
    opacity: 0;

    visibility: hidden;
}

.PAINT .side-menu-help,
.PAINT-MENU .side-menu-help {
    visibility: hidden;
    /* visibility: hidden; */
}

.side-menu-help.show {
    display: block;
    right: 0;
    opacity: 1;
    visibility: visible;
}

.side-menu-help .side-menu-message {
    display: block;
    position: absolute;
    top: 17px;
    width: 226px;
    height: 25px;
    background-color: #2789d8;
    text-shadow: 0 1px 1px rgb(0, 23, 100);
    line-height: 25px;
    padding-left: 7px;
    right: 102px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: right, color;
    -moz-transition-property: right, color;
    -o-transition-property: right, color;
    transition-property: right, color;
    width: 284px;
}

.side-menu-help .side-menu-message:after {
    display: block;
    position: absolute;
    top: 0;
    width: 1px;
    height: 1px;
    right: -41px;
    background-color: transparent;
    content: " ";
    border-top: 12px solid transparent;
    border-left: 20px solid #2789d8;
    border-right: 20px solid transparent;
    border-bottom: 12px solid transparent;
}

.side-menu-help.show .side-menu-message {
    display: block;
    right: 72px;
}