/** dark blue #007c91 **/
/** light blue #d6e1e6 **/
/** dark beige #aaa683 **/
/** light beige #edece1 **/
/** red #be1e2d **/


#page {
    position: relative;
    width: 100%;
    margin: auto;
}


/***** MAIN MENU *****************/
#mainmenu {
    position: relative;
    z-index: 99999;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: #ffffff;
    padding: 0 0 0 0vw;
    align-items: flex-start;
    text-align: center;
    justify-content: flex-start;
}

table.mainmenu td {
    color: #aaa683;
    background: #ffffff;
    border-collapse: collapse;
    border: none;
    padding: 5px;
}

a.mainmenu {
    color: #aaa683;
    text-decoration: none;
    background: #ffffff;
    font-weight: normal;
    font-size:90%;
}

a.mainmenu:visited {
    color: #aaa683;
}

a.smallmenu {
    color: #aaa683;
    text-decoration: none;
    background: #007c91;
    font-weight: normal;
    font-size:90%;
}

a.smallmenu:visited {
    color: #aaa683;
}

a.maintitle
 {
    color: #000000;
    font-family: "Max-BoldSC";
    font-size: 140%;
    text-decoration: none;
    background: #ffffff;
    text-transform: uppercase;
}

a.maintitle:visited {
    color: #000000;
}

span.mainmenu {
    font-size: 150%;
    color: #000000;
    font-weight: bold;
    text-align: left;
}


/****** SUB MENU **********/
#submenu {
    position: relative;
    z-index: 99999;
    border: 0px none;
    margin: auto;
    background: #007c91;
    padding: 0 0 0 0.08333333vw;
    display: flex;
    align-items: flex-start;
    text-align: center;
    justify-content: flex-start;
}

ul.submenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #007c91;
}

li.submenu {
    display: block;
    float: left;
    border-right: 2px solid #ffffff;
    display: list-item;
    padding: 14px 16px;
    background-color: #007c91;
}

    li.submenu:last-child {
        border-right: 2px solid #ffffff;
    }

a.submenu  {
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
}
a.submenu:visited {
    color: #ffffff;
}

a.submenu:hover {
    color: #000000;
    font-weight: bold;
}

li.submenusel {
    display: block;
    float: left;
    border-right: 2px solid #ffffff;
    display: list-item;
    padding: 14px 16px;
    background-color: #d6e1e6;
}

a.submenusel  {
    color: #007c91;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
}
    a.submenusel:visited {
        color: #007c91;
    }
    
    
#error {
        position: relative;
        margin: auto;
        border: 1px solid;
        width: 100%;
        padding-top: 10px;
        height: 30px;
        left: 0px;
        background: #be1e2d;
        color: #fff;
        text-align: center;
    }


/***** SMALL - MENU ********/
.small-title {
    padding: 0px;
    opacity: 0;
    height: 0px;
    width: 100%;
    float: left;
    background-color: #007c91;
    color: #ffffff;
    border: none;
    border-collapse: collapse;
    font-size: 120%;
    font-weight: bold;
}


.small-menu-cont {
    display: none;
    position: absolute;
    top: 40px;
    background-color: #007c91;
    min-width: 300px;
    overflow: auto;
    right: 0;
    z-index: 99999;
}

    .small-menu-cont.show {
        display: block;
    }

.small-menu-button {
    width: 100%;
    float: left;
    background-color: #007c91;
    color: #FFF;
    border: none;
    font-size: 100%;
    padding: 15px;
    border-top: 1px solid #ffffff;
    text-align: left;
    cursor: pointer;
    cursor: hand;
}

    .small-menu-button:hover {
        font-weight: bold;
    }

.small-menu-help {
    width: 100%;
    float: left;
    background-color: #007c91;
    color: #FFF;
    border: none;
    font-size: 100%;
    padding: 15px;
    border-top: 1px solid #ffffff;
    text-align: left;
	cursor: pointer;
	cursor: hand;
}

    .small-menu-help:hover {
        font-weight: bold;
    }

    .small-menu-help:before {
        position: absolute;
        font-family: keeleklikk;
        font-size: 28px;
        content: 'd';
        margin-left: -5px;
        margin-top: -2px;
    }

.small-menu-login {
    width: 100%;
    float: left;
    background-color: #007c91;
    color: #FFF;
    border: none;
    font-size: 100%;
    padding: 15px;
    border-top: 1px solid #ffffff;
    text-align: left;
    cursor: pointer;
    cursor: hand;
}

    .small-menu-login:hover {
        font-weight: bold;
    }

    .small-menu-login:before {
        position: absolute;
        font-family: keeleklikk;
        font-size: 26px;
        color: #ffffff;
        content: 'f';
        margin-left: -5px;
        margin-top: -3px;
    }

.small-menu-settings {
    width: 100%;
    float: left;
    background-color: #007c91;
    color: #FFF;
    border: none;
    font-size: 100%;
    padding: 15px;
    border-top: 1px solid #ffffff;
    text-align: left;
    cursor: pointer;
    cursor: hand;
}

    .small-menu-settings:hover {
        font-weight: bold;
    }

    .small-menu-settings:before {
        position: absolute;
        font-family: keeleklikk;
        font-size: 26px;
        color: #ffffff;
        content: 'o';
        margin-left: -5px;
        margin-top: -3px;
    }

.small-menu-logoff {
    width: 100%;
    float: left;
    background-color: #007c91;
    color: #FFF;
    border: none;
    font-size: 100%;
    padding: 15px;
    border-top: 1px solid #ffffff;
	text-align: left;
    cursor: pointer;
    cursor: hand;
}

    .small-menu-logoff:hover {
        font-weight: bold;
    }

    .small-menu-logoff:before {
        position: absolute;
        font-family: keeleklikk;
        font-size: 28px;
        color: #ffffff;
        content: 'g';
        margin-left: -5px;
        margin-top: -3px;
    }

/****  KLAVER  *******/
.klaver {
    position: relative;
    width: 100%;
    background: #edece1;
    max-width:400px;
}

.klaver-klahv-tyhi {
    position: relative;
    float: left;
    color: #edece1;
    font-size: 100%;
    text-align: center;
    padding: 10px;
    width: 10%;
    background-color: #edece1;
    border: 1px solid #edece1;
}

.klaver-klahv-tyhik {
    position: relative;
    float: left;
    color: #000000;
    font-size: 100%;
    text-align: center;
    width: 50%;
    padding: 7px;
    background-color: #ffffff;
    border: 1px solid #edece1;
    cursor: pointer;
    cursor: hand;
}

    .klaver-klahv-tyhik:hover {
        background-color: #d6e1e6;
    }
	.klaver-klahv-tyhik:focus{
		outline: 0;
	}

.klaver-klahv-cntr {
    position: relative;
    float: left;
    color: #000000;
    font-size: 65%;
    text-align: center;
    padding-left: 5px;
    padding-top: 13px;
    padding-bottom: 15px;
    width: 10%;
    background-color: #ffffff;
    border: 1px solid #edece1;
    cursor: pointer;
    cursor: hand;
}

    .klaver-klahv-cntr:hover {
        background-color: #d6e1e6;
    }
	.klaver-klahv-cntr:focus{
		outline: 0;
	}

.klaver-klahv {
    position: relative;
    float: left;
    color: #000000;
    font-size: 100%;
    text-align: center;
    padding: 10px;
    width: 10%;
    background-color: #ffffff;
    border: 1px solid #edece1;
    cursor: pointer;
    cursor: hand;
}

    .klaver-klahv:hover {
        background-color: #d6e1e6;
    }
	.klaver-klahv:focus{
		outline: 0;
	}

.klaver-klahv-ok {
    position: relative;
    float: left;
    color: #ffffff;
    font-size: 100%;
    text-align: center;
    padding-top: 35px;
    padding-bottom: 40px;
    width: 10%;
    background-color: #007c91;
    border: 1px solid #007c91;
    font-weight: bold;
    margin-top: -60px;
    border: 1px solid #edece1;
    cursor: pointer;
    cursor: hand;
}

    .klaver-klahv-ok:hover {
        color: #d6e1e6;
    }
	.klaver-klahv-ok:focus{
		outline: 0;
	}

.klaver-klahv-kyss {
    position: relative;
    float: left;
    color: #ffffff;
    font-size: 100%;
    text-align: center;
    padding-top: 35px;
    padding-bottom: 40px;
    width: 10%;
    background-color: #007c91;
    border: 1px solid #007c91;
    font-weight: bold;
    margin-top: -60px;
    border: 1px solid #edece1;
    cursor: pointer;
    cursor: hand;
}

    .klaver-klahv-kyss:hover {
        color: #d6e1e6;
    }
	.klaver-klahv-kyss:focus{
		outline: 0;
	}

/**** Content *******************/
#content {
    position: relative;
    margin: auto;
    border: 0px none;
    width:  100%;
    left: 0px;
    padding-top: 10px;
    background-color: #ffffff;
}

#lesson {
    position: relative;
    margin: auto;
    border: 0px none;
    width: 100%;
    left: 0px;
    background-color: #ffffff;
    padding-top:5px;
}

#lesson-header {
    position: relative;
    margin: auto;
    border: 0px none;
    width: 100%;
    height: 30px;
    left: 0px;
    align-items: flex-start;
    text-align: left;
    justify-content: center;
}

.lesson-content {
    position: relative;
    overflow: auto;
    border: 0px none;
    width: 100%;
    padding:0px;
}

#lesson-footer {
    position: relative;
    margin: auto;
    border: 0px none;
    width: 100%;
    height: 45px;
    left: 0px;
    float:left;
    background-color: #edece1;
    text-align:center;
}

.footerTab{
    position: relative;
    float: left;
    padding-left:20px;
}
.footerTab td{
    padding:0px;
}

.btTask {
    position: relative;
    font-family: "EtelkaMediumPro";
    color: #edece1;
    background-color: #aaa683;
    border-color: #ffffff;
    border-width: 0px;
    width: 40px;
    height: 38px;
    margin-top:2px;
}
.btTask:hover {
    border-color: #edece1;
}

.lesson-pg {
    font-family: "EtelkaMediumPro";
    color: #aaa683;
    letter-spacing: .04em;
    padding-left: 1vw;
}

.lesson-les {
    font-family: "EtelkaMediumPro";
    color: #000000;
    letter-spacing: .04em;
    padding-left:1.5vw;
}

.lesson-task {
    font-family: "Lato";
    color: #000000;
    letter-spacing: .04em;
    padding-left: 1.2vw;
    background-color: #aaa683;
}

/***** Task **************/
.lessonRaam {
    content: "";
    clear: both;
    display: block;
}

.lesson-img {
    padding-left: 35px;
    padding-top: 35px;
    background: #FFF;
    text-align: right;
    padding-right:35px;
}
.col-title-img {
    display:none;
}

.lesson-txt {
    background: #FFF;
    padding-left: 35px;
    text-align: left;
}

#title {
    background-color: #edece1;
    color: #000;
    height: 65px;
    padding-left: 15px;
    padding-top: 8px;
    font-size: 90%;
}

/*** SORTABLE  ******/
.sortable {
    list-style-type: none;
    list-style-position: inside;
    margin: 0;
    padding: 0;
    width: fit-content;
}

    .sortable :hover {
        font-weight: bold;
    }

    .sortable li {
        margin: 0 3px 3px 3px;
        padding: 7px;
        font-size: 100%;
        background-color: #edece1;
    }

        .sortable li:before {
            background-image: url('../img/updown.png');
            content: '';
            display: inline-block;
            height: 1em;
            width: 1em;
            background-size: contain;
            background-repeat: no-repeat;
            padding-left: 2em;
        }

.sortable-itm {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #aaa683;
    padding-bottom: 25px;
    cursor: pointer;
    cursor: hand;
}


.itm-ok {
    color: #007c91;
}

.itm-err {
    color: #be1e2d;
}

.input-norm[type=text] {
    border: none;
    border-bottom: 2px solid #aaa683;
    font-size: 100%;
    color: #000000;
    text-align: center;
}

    .input-norm[type=text]:focus {
        outline: none;
        border-bottom: 2px solid #000000;
    }

.input-err[type=text] {
    border: none;
    border-bottom: 2px solid #be1e2d;
    font-size: 100%;
    outline: none;
    text-align: center;
}

.input-ok[type=text] {
    border: none;
    border-bottom: 2px solid #007c91;
    color: #007c91;
    font-size: 100%;
    font-weight: bold;
    outline: none;
    text-align: center;
}

.input-help[type=text] {
    border: none;
    border-bottom: 2px solid #aaa683;
    color: #aaa683;
    font-size: 100%;
    font-weight: bold;
    outline: none;
    text-align: center;
}

.lessonProgress{
	float:right;
	background-color:#ffffff;
	height:90%;
}

.lessonProgressItm0{
	float:right;
	background-color:#edece1;
	height:100%;
	width:0px;
	border:solid;
	border-color:#ffffff;
	display:none;
}

.lessonProgressItm1{
	float:right;
	background-color:#edece1;
	height:100%;
	width:20px;
	border:solid;
	border-color:#ffffff;
}

.lessonProgressItm2{
	float:right;
	background-color:#aaa683;
	height:100%;
	width:20px;
	border:solid;
	border-color:#ffffff;
}