CameraUI {
    font-family: Consolas;
    font-weight: bold;

    .whiteborder {
        position: absolute;
        border: 0px lightgray;
        color: rgba( 0, 0, 0, 0);
        background-color: rgba( 0, 0, 0, 0);
        left: 1.5%;
        top: 1.5%;
        width: 182%;
        height: 97%;
    }

    .camerarootpanel {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0 0);
        color: rgba(0,0,0 0);
    }

    .camslist {
        width: 54%;
        height: 48%;
        left: 125%;
        top: 40%;
        background-image: url( '/UI/mapscreen.png' );
        background-size: 100% 100%;
        pointer-events: none;
        cursor: none;
        opacity: 0;

        .onea {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 32.1%;
            top: 0.6%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }

        .oneb {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 27.1%;
            top: 17%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }

        .five {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 0.6%;
            top: 25%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }

        .seven {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 84.8%;
            top: 25.3%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }

        .onec {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 19.1%;
            top: 39.7%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }

        .six {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 82.6%;
            top: 63.5%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }

        .three {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 11.3%;
            top: 68.45%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }

        .twoa {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 32%;
            top: 73.5%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }

        .twob {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 32%;
            top: 85.2%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }

        .foura {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 58.5%;
            top: 73.9%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }

        .fourb {
            border: 1px white;
            font-size: 22px;
            position: absolute;
            width: 13.5%;
            height: 9.9%;
            left: 58.6%;
            top: 85.5%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: none;

            &:hover {
                text-stroke: 3px #999;
                opacity: 1;
            }
        }
    }

    &.dothing {
        .whiteborder {
            border: 5px white;
        }

        .camslist {
            pointer-events: all;
            cursor: default;
            opacity: 1;

            .onea {
                pointer-events: all;
                cursor: default;
            }

            .oneb {
                pointer-events: all;
                cursor: default;
            }

            .onec {
                pointer-events: all;
                cursor: default;
            }

            .five {
                pointer-events: all;
                cursor: default;
            }

            .seven {
                pointer-events: all;
                cursor: default;
            }

            .six {
                pointer-events: all;
                cursor: default;
            }

            .three {
                pointer-events: all;
                cursor: default;
            }

            .twoa {
                pointer-events: all;
                cursor: default;
            }

            .twob {
                pointer-events: all;
                cursor: default;
            }

            .foura {
                pointer-events: all;
                cursor: default;
            }

            .fourb {
                pointer-events: all;
                cursor: default;
            }
        }
    }

    &.oneaactive {
        .camslist {
            .onea {
                background-color: lawngreen;
                color: black;
            }
        }
    }

    &.onebactive {
        .camslist {
            .oneb {
                background-color: lawngreen;
                color: black;
            }
        }
    }

    &.onecactive {
        .camslist {
            .onec {
                background-color: lawngreen;
                color: black;
            }
        }
    }

    &.fiveactive {
        .camslist {
            .five {
                background-color: lawngreen;
                color: black;
            }
        }
    }

    &.sevenactive {
        .camslist {
            .seven {
                background-color: lawngreen;
                color: black;
            }
        }
    }

    &.sixactive {
        .camslist {
            .six {
                background-color: lawngreen;
                color: black;
            }
        }
    }

    &.threeactive {
        .camslist {
            .three {
                background-color: lawngreen;
                color: black;
            }
        }
    }

    &.twoaactive {
        .camslist {
            .twoa {
                background-color: lawngreen;
                color: black;
            }
        }
    }

    &.twobactive {
        .camslist {
            .twob {
                background-color: lawngreen;
                color: black;
            }
        }
    }

    &.fouraactive {
        .camslist {
            .foura {
                background-color: lawngreen;
                color: black;
            }
        }
    }

    &.fourbactive {
        .camslist {
            .fourb {
                background-color: lawngreen;
                color: black;
            }
        }
    }
}