/* =========================================== COMMON =========================================== */
/*html {
    scrollbar-width: none;
}*/

body {
    background-color: #002c5b;
    overflow-x: hidden;
    overflow-y: auto;
    /*    -ms-overflow-style: none;*/
}

/*body::-webkit-scrollbar{
    display: none;
}
*/

.gui_page {
    background: url("../TheImages/bg_body.jpg") repeat-x;
    width: 100%;
    min-width: 1000px;
    min-height: 764px;
}

.gui_wrapper {
    margin: 0 auto;
    width: 960px;
}
/* ----------------- Html Option ----------------- */
.checkbox {
    width: 19px;
    height: 20px;
    padding: 0px;
    background: url("../TheImages/icon_checkbox.png") repeat scroll 0 -2px transparent;
    display: block;
    clear: left;
    float: left;
}

.radio {
    width: 19px;
    height: 19px;
    padding: 0px;
    background: url("../TheImages/icon_radio.png") repeat scroll 0 -3px transparent;
    display: block;
    clear: left;
    float: left;
}

.checked {
    background-position: 0px -51px;
}

.clicked {
    background-position: 0px -51px;
}

.rchecked {
    background-position: 0px -53px;
}

.rclicked {
    background-position: 0px -53px;
}

.clicked.checked {
    background-position: 0px -75px;
}
/* ----------------- Html Button ----------------- */
.btn_primary {
    background-color: #0074CC;
    background-image: -moz-linear-gradient(center top, #0088CC, #0055CC);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    font-family: Arial;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 4px 8px;
    cursor: pointer;
}

.btn_primary_grey {
    background-color: #CCCCCC;
    /*background-image: -moz-linear-gradient(center top , #0088CC, #0055CC);*/
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    font-family: Arial;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 4px 8px;
    cursor: pointer;
}

.btn_primary_big {
    background-color: #0074CC;
    background-image: -moz-linear-gradient(center top, #0088CC, #0055CC);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    font-family: Arial;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 10px 20px;
    cursor: pointer;
}

.btn_activestatus {
    background-image: -moz-linear-gradient(center top, #008040, #008040);
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-image: none;
    border-style: solid;
    border-radius: 4px 4px 4px 4px;
    border-width: 1px;
    padding: 0 5px;
    cursor: pointer;
}

.btn_disablestatus {
    background-image: -moz-linear-gradient(center top, #800000, #800000);
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-image: none;
    border-style: solid;
    border-radius: 4px 4px 4px 4px;
    border-width: 1px;
    padding: 0 5px;
    cursor: pointer;
}

.btn_signin {
    background-color: #f2f2f2;
    background-image: -moz-linear-gradient(center top, #f3ffff, #ebebeb);
    color: #333333;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    padding: 0 5px;
    cursor: pointer;
    padding: 5px 14px;
    font-size: 18px;
    border-color: #bbbbbb;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    text-shadow: none;
}

.btn_seek {
    background: url("../TheImages/icon_search.png") no-repeat;
    float: left;
    width: 23px;
    height: 23px;
    border: 0;
    cursor: pointer;
    margin-top: 27px;
}

.btn_report_main {
    background: url("../TheImages/btn_bg_report.png") no-repeat;
    font-size: 17px;
    color: #ffffff;
    font-weight: bold;
    float: left;
    width: 300px;
    height: 37px;
    border: 0;
    cursor: pointer;
    margin-top: 1px;
}

.btn_report_120 {
    background: url("../TheImages/btn_bg_120.png") no-repeat;
    font-size: 17px;
    color: #ffffff;
    font-weight: bold;
    float: left;
    width: 120px;
    height: 37px;
    border: 0;
    cursor: pointer;
    margin-top: 1px;
}

.btn_report_grey_120 {
    background: url("../TheImages/btn_bg_120.png") no-repeat;
    font-size: 17px;
    color: #ffffff;
    font-weight: bold;
    float: left;
    width: 120px;
    height: 37px;
    border: 0;
    cursor: pointer;
    margin-top: 1px;
}
/* ----------------- Html List ----------------- */
.dropdownlist .dd2 {
    height: 28px;
    background: none;
    position: relative;
}

    .dropdownlist .dd2 .ddTitle {
        width: 218px;
        height: 28px;
        background: url(../TheImages/bgselect218.png) 0 0 no-repeat;
        font-weight: bold;
    }

        .dropdownlist .dd2 .ddTitle span.arrow {
            top: 0;
            height: 28px;
            background: none;
        }

        .dropdownlist .dd2 .ddTitle span.ddTitleText {
            line-height: 28px;
        }

            .dropdownlist .dd2 .ddTitle span.ddTitleText span.ddTitleText {
                margin: 0;
                padding: 0;
            }

    .dropdownlist .dd2 .ddChild {
        width: 216px;
    }

        .dropdownlist .dd2 .ddChild ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .dropdownlist .dd2 .ddChild ul li {
                margin: 0;
            }

                .dropdownlist .dd2 .ddChild ul li span.ddlabel {
                    cursor: pointer;
                    display: block;
                    padding: 3px 5px;
                    font-weight: normal;
                }

                    .dropdownlist .dd2 .ddChild ul li span.ddlabel:hover {
                        background: #ccc;
                    }

.dropdownlist120 .dd2 .ddTitle {
    width: 120px;
    height: 28px;
    background: url(../TheImages/bgselect120.png) 0 0 no-repeat;
}

.dropdownlist120 .dd2 .ddChild {
    width: 120px;
}

.dropdownlist300 .dd2 .ddTitle {
    width: 300px;
    height: 28px;
    background: url(../TheImages/bgselect300.png) 0 0 no-repeat;
}

.dropdownlist300 .dd2 .ddChild {
    width: 300px;
}
/* ----------------- Html input ----------------- */
.txtinputgrey {
    color: #999999;
}

.txtinput {
    border: solid 1.5px #000000;
    border-radius: 3px;
}

.txtinputerror {
    border: solid 1px red !important;
}

.error input {
    border: solid 1px red !important;
}

.txterror, .txterror span, .txterror p {
    color: #b50000 !important;
}
/* ----------------- Click Show Sub ----------------- */
.jssubtitle {
    margin: 0 0 0 5px;
    display: block;
    cursor: pointer;
    float: left;
}

.jssubimg {
    float: left;
    margin-top: 5px;
    cursor: pointer;
}

.jssubcontent {
    clear: both;
}

    .jssubcontent .item {
        margin: 0 0 5px 40px;
    }

/* ----------------- Other ----------------- */
h2 {
    font-family: "FuturaStdBold";
    color: #0066cc;
    font-size: 16px;
}

.left {
    float: left;
}

.center {
    text-align: center;
}

.wrappercover {
    background: #efefef;
    position: absolute;
    width: 280px;
    height: 470px;
    opacity: 0.5;
}

.opacity05 {
    opacity: 0.5;
}


/* =========================================== HEADER =========================================== */
.gui_header {
    height: 124px;
}

    .gui_header .top {
        float: left;
        width: 960px;
        margin: 0 0 0 -20px;
    }

    .gui_header .logo {
        background: url("../TheImages/logo.png") no-repeat;
        width: 60px;
        height: 44px;
        margin-top: 5px;
        float: left;
    }

        .gui_header .logo a {
            display: block;
            width: 60px;
            height: 44px;
            cursor: pointer;
        }

    .gui_header .welcome {
        color: #ffffff;
        font-weight: bold;
        float: left;
        margin: 5px 0 0 5px;
    }

    .gui_header .login {
        color: #ffffff;
        float: right;
        margin: 5px -35px 0 0;
    }

        .gui_header .login a {
            color: #ffffff;
            font-weight: bold;
        }

            .gui_header .login a:hover {
                color: #efefef;
            }

.linkmenu {
    margin: 10px 0 0 5px
}

/* ----------------- Menu ----------------- */
.gui_header .gui_menu {
    float: left;
    width: 960px;
    height: 75px;
}

    .gui_header .gui_menu .pagetitle {
        float: left;
    }

.skip {
    padding: 6px;
    position: absolute;
    top: -40px;
    left: 0px;
    color: #FFFFFF;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border-bottom-right-radius: 8px;
    background: rgba(33, 83, 146, .5);
    ;
    -webkit-transition: top 1s ease-out;
    transition: top 1s ease-out;
    z-index: 100;
}


    .skip:focus {
        position: absolute;
        left: 0px;
        top: 0px;
        outline-color: transparent;
        -webkit-transition: top .1s ease-in;
        transition: top .1s ease-in;
    }

.gui_header .gui_menu h1 {
    font-family: "FuturaStdBold";
    color: #ffffff;
    font-size: 22px;
    margin: 17px 0 0 8px;
    text-transform: capitalize;
    text-shadow: 0 2px 5px #333333;
    width: 155px;
    line-height: 25px;
}

.gui_header .gui_menu .menu {
    list-style: none;
    float: right;
    margin: 0 10px 0 0;
}

    .gui_header .gui_menu .menu li {
        float: left;
        margin-left: 10px;
    }

    .gui_header .gui_menu .menu .stu a {
        background: url("../TheImages/menu_stu.png") no-repeat scroll -24px -22px transparent;
        display: block;
        height: 66px;
        width: 66px;
    }

        .gui_header .gui_menu .menu .stu a:hover {
            background: url("../TheImages/menu_stuon.png") no-repeat scroll -24px -22px transparent;
            display: block;
            height: 66px;
            width: 66px;
        }

        .gui_header .gui_menu .menu .stu a.active {
            background: url("../TheImages/menu_stuon.png") no-repeat scroll -24px -22px transparent;
        }

    .gui_header .gui_menu .menu .ur a {
        background: url("../TheImages/menu_user.png") no-repeat scroll -24px -22px transparent;
        display: block;
        height: 66px;
        width: 66px;
    }

        .gui_header .gui_menu .menu .ur a:hover {
            background: url("../TheImages/menu_useron.png") no-repeat scroll -24px -22px transparent;
            display: block;
            height: 66px;
            width: 66px;
        }

        .gui_header .gui_menu .menu .ur a.active {
            background: url("../TheImages/menu_useron.png") no-repeat scroll -24px -22px transparent;
        }

    .gui_header .gui_menu .menu .gro a {
        background: url("../TheImages/menu_gro.png") no-repeat scroll -25px -22px transparent;
        display: block;
        height: 66px;
        width: 66px;
    }

        .gui_header .gui_menu .menu .gro a:hover {
            background: url("../TheImages/menu_groon.png") no-repeat scroll -25px -22px transparent;
            display: block;
            height: 66px;
            width: 66px;
        }

        .gui_header .gui_menu .menu .gro a.active {
            background: url("../TheImages/menu_groon.png") no-repeat scroll -25px -22px transparent;
        }

    .gui_header .gui_menu .menu .les a {
        background: url("../TheImages/menu_les.png") no-repeat scroll -15px -22px transparent;
        display: block;
        height: 66px;
        width: 85px;
    }

        .gui_header .gui_menu .menu .les a:hover {
            background: url("../TheImages/menu_leson.png") no-repeat scroll -15px -22px transparent;
            display: block;
            height: 66px;
            width: 85px;
        }

        .gui_header .gui_menu .menu .les a.active {
            background: url("../TheImages/menu_leson.png") no-repeat scroll -15px -22px transparent;
        }

    .gui_header .gui_menu .menu .quic a {
        background: url("../TheImages/menu_quic.png") no-repeat scroll -14px -23px transparent;
        display: block;
        height: 66px;
        width: 87px;
    }

        .gui_header .gui_menu .menu .quic a:hover {
            background: url("../TheImages/menu_quicon.png") no-repeat scroll -14px -23px transparent;
            display: block;
            height: 66px;
            width: 87px;
        }

        .gui_header .gui_menu .menu .quic a.active {
            background: url("../TheImages/menu_quicon.png") no-repeat scroll -14px -23px transparent;
        }

    .gui_header .gui_menu .menu .pla a {
        background: url("../TheImages/menu_pla.png") no-repeat scroll -24px -23px transparent;
        display: block;
        height: 66px;
        width: 66px;
    }

        .gui_header .gui_menu .menu .pla a:hover {
            background: url("../TheImages/menu_plaon.png") no-repeat scroll -24px -23px transparent;
            display: block;
            height: 66px;
            width: 66px;
        }

        .gui_header .gui_menu .menu .pla a.active {
            background: url("../TheImages/menu_plaon.png") no-repeat scroll -24px -23px transparent;
        }

    .gui_header .gui_menu .menu .quiz a {
        background: url("../TheImages/menu_quiz.png") no-repeat scroll -25px -23px transparent;
        display: block;
        height: 66px;
        width: 66px;
    }

        .gui_header .gui_menu .menu .quiz a:hover {
            background: url("../TheImages/menu_quizon.png") no-repeat scroll -25px -23px transparent;
            display: block;
            height: 66px;
            width: 66px;
        }

        .gui_header .gui_menu .menu .quiz a.active {
            background: url("../TheImages/menu_quizon.png") no-repeat scroll -25px -23px transparent;
        }

    .gui_header .gui_menu .menu .rep a {
        background: url("../TheImages/menu_rep.png") no-repeat scroll -25px -23px transparent;
        display: block;
        height: 66px;
        width: 66px;
    }

        .gui_header .gui_menu .menu .rep a:hover {
            background: url("../TheImages/menu_repon.png") no-repeat scroll -25px -23px transparent;
            display: block;
            height: 66px;
            width: 66px;
        }

        .gui_header .gui_menu .menu .rep a.active {
            background: url("../TheImages/menu_repon.png") no-repeat scroll -25px -23px transparent;
        }

    .gui_header .gui_menu .menu .cen a {
        background: url("../TheImages/menu_cen.png") no-repeat scroll -2px -23px transparent;
        display: block;
        height: 66px;
        width: 110px;
    }

        .gui_header .gui_menu .menu .cen a:hover {
            background: url("../TheImages/menu_cenon.png") no-repeat scroll -2px -23px transparent;
            display: block;
            height: 66px;
            width: 110px;
        }

        .gui_header .gui_menu .menu .cen a.active {
            background: url("../TheImages/menu_cenon.png") no-repeat scroll -2px -23px transparent;
        }

    .gui_header .gui_menu .menu .tea a {
        background: url("../TheImages/menu_tea.png") no-repeat scroll -25px -22px transparent;
        display: block;
        height: 66px;
        width: 66px;
    }

        .gui_header .gui_menu .menu .tea a:hover {
            background: url("../TheImages/menu_teaon.png") no-repeat scroll -25px -22px transparent;
            display: block;
            height: 66px;
            width: 66px;
        }

        .gui_header .gui_menu .menu .tea a.active {
            background: url("../TheImages/menu_teaon.png") no-repeat scroll -25px -22px transparent;
        }

    .gui_header .gui_menu .menu .mpreweb a {
        background: url("../TheImages/menu_pre_webi.png") no-repeat scroll -4px -27px transparent;
        display: block;
        height: 85px;
        width: 160px;
    }

        .gui_header .gui_menu .menu .mpreweb a:hover {
            background: url("../TheImages/menu_pre_webion.png") no-repeat scroll -4px -27px transparent;
            display: block;
            height: 85px;
            width: 160px;
        }

        .gui_header .gui_menu .menu .mpreweb a.active {
            background: url("../TheImages/menu_pre_webion.png") no-repeat scroll -4px -27px transparent;
        }

    .gui_header .gui_menu .menu .trans a {
        background: url("../TheImages/menu_transfer.png") no-repeat scroll 0px -25px transparent;
        display: block;
        height: 66px;
        width: 140px;
    }

        .gui_header .gui_menu .menu .trans a:hover {
            background: url("../TheImages/menu_transferon.png") no-repeat scroll 0px -25px transparent;
            display: block;
            height: 66px;
            width: 140px;
        }

        .gui_header .gui_menu .menu .trans a.active {
            background: url("../TheImages/menu_transferon.png") no-repeat scroll 0px -25px transparent;
        }
/* =========================================== MAIN =========================================== */
.gui_main {
    background-color: #ffffff;
    width: 960px;
    min-height: 620px;
    box-shadow: 0 0 10px #000000;
    float: left;
}

.hommesage {
    background: url("../TheImages/bubble.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 350px;
    height: 195px;
    margin: -46px 0 0 830px;
}

    .hommesage .text {
        padding: 20px 0 0 52px;
        display: block;
        font-size: 12px;
        width: 264px;
        height: 158px;
        display: table-cell;
        vertical-align: middle;
    }

    .hommesage .hide {
        margin: -27px 59px 0 75px;
        font-size: 11px;
        display: block;
        float: right;
    }

.adminmesage {
    background: url("../TheImages/bubble.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 350px;
    height: 195px;
    font-size: 10px;
    margin-top: 40px;
    margin-left: 20px;
}

    .adminmesage .text {
        padding: 20px 0 0 52px;
        display: block;
        font-size: 12px;
        width: 264px;
        height: 158px;
        display: table-cell;
        vertical-align: middle;
    }

.gui_db_main .nosupportie {
    position: absolute;
    margin: -46px 0 0 850px;
    display: none;
}

/* =========================================== FOOTER =========================================== */
.gui_footer {
    background: url("../TheImages/bg_footer.jpg") repeat-x;
    height: 36px;
}

    .gui_footer .wrapper {
        width: 960px;
        margin: 0 auto;
    }

    .gui_footer .footer {
        color: #99999;
        float: left;
        font-size: 12px;
        font-weight: bold;
        margin-left: -20px;
        padding-top: 10px;
        width: 745px;
    }

    .gui_footer .social {
        list-style: none;
        float: right;
        margin: 5px -15px 0 0;
    }

        .gui_footer .social li {
            float: left;
            margin-left: 10px;
        }

            .gui_footer .social li a {
                display: block;
                width: 25px;
                height: 26px;
            }

        .gui_footer .social .fac a {
            background: url("../TheImages/icon_facebook.png") no-repeat;
        }

        .gui_footer .social .twi a {
            background: url("../TheImages/icon_twitter.png") no-repeat;
        }

        .gui_footer .social .goo a {
            background: url("../TheImages/icon_google.png") no-repeat;
        }

        .gui_footer .social .in a {
            background: url("../TheImages/icon_in.png") no-repeat;
        }

        .gui_footer .social .you a {
            background: url("../TheImages/icon_you.png") no-repeat;
        }

/* =========================================== STUDENTS =========================================== */
.gui_stu {
    margin: 0;
}

    .gui_stu .content {
        float: left;
        margin: 10px 5px;
        width: 910px;
    }

    .gui_stu .tab2 {
        background: url("../TheImages/stu_tab2.jpg") no-repeat;
        float: left;
        width: 40px;
        height: 620px;
        box-shadow: -5px 0 5px #666666;
        cursor: pointer;
    }

.step_title {
    float: left;
    width: 910px;
}

    .step_title .stepnum {
        background: url("../TheImages/bul_bg.png") no-repeat;
        float: left;
        font-family: "FuturaStdBold";
        color: #ffffff;
        font-size: 18px;
        width: 35px;
        height: 35px;
        line-height: 32px;
        text-align: center;
    }

    .step_title h2 {
        float: left;
        margin: 8px 0 0 5px;
    }
/* ----------------- Step Search ----------------- */
.gui_stu .step_search {
    float: left;
    width: 910px;
    margin: 20px 0 0 40px;
}

    .gui_stu .step_search .col {
        float: left;
        width: 198px;
        height: 100px;
        margin-right: 25px;
    }

    .gui_stu .step_search input[type="text"] {
        width: 198px;
    }

    .gui_stu .step_search .divsearch {
        margin: 5px 0 0 5px;
    }

        .gui_stu .step_search .divsearch a img {
            float: left;
            margin-right: 5px;
        }

        .gui_stu .step_search .divsearch a span {
            color: #0066cc;
            font-size: 12px;
            font-weight: bold;
            text-decoration: underline;
        }

    .gui_stu .step_search .share {
        color: #666666;
        font-size: 12px;
        text-align: center;
        margin-top: 5px;
    }

.btn_add_stu {
    background: url("../TheImages/btn_add_stu.png") no-repeat;
    width: 144px;
    height: 56px;
    border: 0;
    cursor: pointer;
    margin-left: 15px;
}

.btn_add_stu_selected {
    background: url("../TheImages/btn_add_stu_selected.png") no-repeat;
    width: 225px;
    height: 42px;
    border: 0;
    cursor: pointer;
}
/* ----------------- Step List ----------------- */
.gui_stu .step_list {
    float: left;
    width: 910px;
    margin: 0 0 0 40px;
}

    .gui_stu .step_list .grid_wrap {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        width: 875px;
        margin-top: 10px;
    }

    .gui_stu .step_list .grid_title {
        border-bottom: solid 1px #b5b5b5;
        height: 30px;
        font-size: 12px;
        font-weight: bold;
        margin: 0 10px;
        width: 860px;
    }

        .gui_stu .step_list .grid_title .id {
            width: 70px;
            color: #0066cc;
            font-size: 12px;
            line-height: 30px;
            text-transform: uppercase;
        }

        .gui_stu .step_list .grid_title .fname {
            width: 128px;
            color: #0066cc;
            font-size: 12px;
            line-height: 30px;
            text-transform: uppercase;
            text-align: center;
        }

        .gui_stu .step_list .grid_title .lname {
            width: 128px;
            color: #0066cc;
            font-size: 12px;
            line-height: 30px;
            text-transform: uppercase;
            text-align: center;
        }

        .gui_stu .step_list .grid_title .uname {
            width: 108px;
            color: #0066cc;
            font-size: 12px;
            line-height: 30px;
            text-transform: uppercase;
            text-align: center;
        }

        .gui_stu .step_list .grid_title .pass {
            width: 120px;
            color: #0066cc;
            font-size: 12px;
            line-height: 30px;
            text-align: center;
            text-transform: uppercase;
        }

        .gui_stu .step_list .grid_title .parentemail {
            width: 120px;
            color: #0066cc;
            font-size: 12px;
            line-height: 30px;
            text-align: center;
            text-transform: uppercase;
        }

            .gui_stu .step_list .grid_title .parentemail span {
                color: #0066cc;
                font-size: 12px;
                line-height: 30px;
                text-align: center;
                text-transform: uppercase;
            }

        .gui_stu .step_list .grid_title .update {
            width: 60px;
            color: #0066cc;
            font-size: 12px;
            line-height: 30px;
            text-align: center;
            text-transform: uppercase;
        }

        .gui_stu .step_list .grid_title .login {
            width: 60px;
            color: #0066cc;
            font-size: 12px;
            line-height: 30px;
            text-align: center;
            text-transform: uppercase;
        }

        .gui_stu .step_list .grid_title .del {
            width: 60px;
            color: #0066cc;
            font-size: 12px;
            line-height: 30px;
            text-align: center;
            text-transform: uppercase;
        }

    .gui_stu .step_list .grid_data {
        margin: 10px 10px;
        width: 865px;
        height: 335px;
        overflow: auto;
    }

        .gui_stu .step_list .grid_data tr th {
            color: #0066cc;
            font-size: 12px;
            line-height: 30px;
            text-transform: uppercase;
            border: 0;
            border-bottom: solid 1px #b5b5b5;
        }

            .gui_stu .step_list .grid_data tr th > a {
                color: #0066cc;
                font-size: 12px;
                line-height: 30px;
                text-transform: uppercase;
            }

        .gui_stu .step_list .grid_data input[type="text"] {
            width: 110px;
            text-align: center;
        }

        .gui_stu .step_list .grid_data .btn_update {
            font-size: 13px;
            padding: 0 5px;
            border: solid 1px #000000;
            cursor: pointer;
            border-radius: 3px;
        }

        .gui_stu .step_list .grid_data .btn_login {
            font-size: 13px;
            padding: 0 5px;
            border: solid 1px #cccccc;
            cursor: pointer;
            border-radius: 3px;
        }

        .gui_stu .step_list .grid_data .btn_del {
            background: url("../TheImages/icon_del.png") no-repeat;
            width: 16px;
            height: 16px;
            border: 0;
            cursor: pointer;
        }

.gui_stu .step_total .col {
    float: left;
    width: 910px;
    margin: 10px 0 0 40px;
    width: 260px;
}


/* =========================================== GROUPS =========================================== */
.gui_stu .tab1 {
    background: url("../TheImages/stu_tab1.jpg") no-repeat;
    float: left;
    width: 40px;
    height: 620px;
    cursor: pointer;
}

.gui_stu .step_group {
    float: left;
    margin: 30px 0 0 40px;
    width: 870px;
}

.gui_stu .step_group1 {
    float: left;
    margin-right: 25px;
    width: 305px;
}

.gui_stu .step_group2 {
    float: left;
    margin-right: 25px;
    width: 205px;
}

.gui_stu .step_group3 {
    float: left;
    width: 280px;
}
/* ----------------- Step Group 1 ----------------- */
.gui_stu .step_group1 .grid_wrap {
    border: solid 1px #dddddd;
    border-top: solid 2px #838383;
    border-left: solid 2px #dddddd;
    width: 300px;
    margin-top: 10px;
}

.gui_stu .step_group1 .grid_title {
    border-bottom: solid 1px #b5b5b5;
    height: 30px;
    font-size: 12px;
    font-weight: bold;
    margin: 0 10px;
    width: 270px;
}

    .gui_stu .step_group1 .grid_title .name {
        width: 140px;
        color: #0066cc;
        font-size: 12px;
        line-height: 30px;
        text-transform: uppercase;
    }

    .gui_stu .step_group1 .grid_title .id {
        width: 75px;
        color: #0066cc;
        font-size: 12px;
        line-height: 30px;
        text-transform: uppercase;
    }

    .gui_stu .step_group1 .grid_title .del {
        width: 55px;
        color: #0066cc;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        text-transform: uppercase;
    }

.gui_stu .step_group1 .grid_data {
    margin: 10px 10px;
    width: 290px;
    height: 420px;
    overflow: auto;
}

    .gui_stu .step_group1 .grid_data .btn_del {
        background: url("../TheImages/icon_del.png") no-repeat;
        width: 16px;
        height: 16px;
        border: 0;
        cursor: pointer;
    }
/* ----------------- Step Group 2 ----------------- */
.gui_stu .step_group2 .txt_g_input {
    border: solid 1px #dddddd;
    border-top: solid 2px #838383;
    border-left: solid 2px #dddddd;
    width: 200px;
    margin-top: 10px;
}

.btn_new_gro {
    background: url("../TheImages/btn_new_gro.png") no-repeat;
    width: 152px;
    height: 60px;
    border: 0;
    cursor: pointer;
    margin: 30px 0 0 30px;
}

/* ----------------- Step Group 3 ----------------- */
.gui_stu .step_group3 .grid_wrap {
    border: solid 1px #dddddd;
    border-top: solid 2px #838383;
    border-left: solid 2px #dddddd;
    width: 280px;
    margin-top: 10px;
}

.gui_stu .step_group3 .grid_title {
    border-bottom: solid 1px #b5b5b5;
    height: 30px;
    font-size: 12px;
    font-weight: bold;
    margin: 0 10px;
    width: 265px;
}

    .gui_stu .step_group3 .grid_title .name {
        color: #0066CC;
        font-size: 12px;
        line-height: 30px;
        padding-left: 10px;
        text-transform: uppercase;
        width: 190px;
    }

    .gui_stu .step_group3 .grid_title .del {
        width: 55px;
        color: #0066cc;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        text-transform: uppercase;
    }

.gui_stu .step_group3 .grid_data {
    margin: 10px 10px;
    width: 270px;
    height: 420px;
    overflow: auto;
}

    .gui_stu .step_group3 .grid_data .btn_del {
        background: url("../TheImages/icon_del.png") no-repeat;
        width: 16px;
        height: 16px;
        border: 0;
        cursor: pointer;
    }

/* =========================================== LESSONS 1 =========================================== */
.gui_les {
    margin: 0;
}

    .gui_les .content {
        float: left;
        margin: 10px 5px;
        width: 870px;
    }

        .gui_les .content h2 {
            margin-right: 5px;
        }

        .gui_les .content .question {
            float: right;
            margin-top: -3px;
        }

            .gui_les .content .question a {
                background: url("../TheImages/icon_question.png") no-repeat;
                display: block;
                width: 40px;
                height: 40px;
            }

    .gui_les .step_title {
        width: 865px;
    }

.commentles {
    color: #666666;
}

.gui_les .tab1 {
    background: url("../TheImages/les_tab1.jpg") no-repeat;
    float: left;
    width: 40px;
    height: 620px;
    cursor: pointer;
}

.gui_les .tab2 {
    background: url("../TheImages/les_tab2.jpg") no-repeat;
    float: left;
    width: 40px;
    height: 620px;
    box-shadow: -4px 0 5px #cccccc;
    cursor: pointer;
}

.gui_les .tab3 {
    background: url("../TheImages/les_tab3.jpg") no-repeat;
    float: left;
    width: 40px;
    height: 620px;
    cursor: pointer;
}

.gui_les .tab32 {
    background: url("../TheImages/les_tab3.jpg") no-repeat;
    float: left;
    width: 40px;
    height: 620px;
    box-shadow: -4px 0 5px #cccccc;
    cursor: pointer;
}

.gui_les .step_group {
    float: left;
    margin: 20px 0 0 40px;
    width: 835px;
}

.gui_les .step_group1 {
    float: left;
    margin-right: 40px;
    width: 260px;
}

.gui_les .step_group2 {
    float: left;
    margin-right: 20px;
    width: 220px;
}

.gui_les .step_group3 {
    float: left;
    width: 150px;
    margin-top: -30px;
}
/* ----------------- Step Group 1 ----------------- */
.gui_les .step_group1 .grid_wrap {
    border: solid 1px #dddddd;
    border-top: solid 2px #838383;
    border-left: solid 2px #dddddd;
    width: 260px;
    margin-top: 30px;
}

.gui_les .step_group1 .grid_data {
    margin: 10px 10px;
    width: 250px;
    height: 450px;
    overflow: auto;
}

    .gui_les .step_group1 .grid_data .glabel {
        float: left;
        display: block;
        width: 195px;
    }
/* ----------------- Step Group 2 ----------------- */
.gui_les .step_group2 .contentskil {
    float: left;
    margin: 10px 5px;
    width: 240px;
}

    .gui_les .step_group2 .contentskil div {
        margin: 5px 0 10px 0;
    }
/* ----------------- Step Group 3 ----------------- */
.btn_next {
    background: url("../TheImages/btn_next.png") no-repeat;
    width: 124px;
    height: 50px;
    border: 0;
    cursor: pointer;
}

.gui_les .step_group3 .nmagin {
    margin: 30px 0 0 135px;
}

.gui_les .step_group3 .person {
    margin: 60px 0 0 5px;
}


/* =========================================== LESSONS 2 =========================================== */
.gui_les .step_skills {
    float: left;
    width: 865px;
    margin: 10px 0 0 40px;
}

    .gui_les .step_skills .item {
        color: #333333;
        float: left;
        font-weight: bold;
        margin-bottom: 5px;
        width: 665px;
    }

        .gui_les .step_skills .item .title {
            color: #0066CC;
            display: block;
            float: left;
            font-family: "FuturaStdBold";
            margin-right: 5px;
            text-align: right;
            width: 97px;
        }

    .gui_les .step_skills .divnext {
        float: left;
        margin-top: -30px;
        width: 125px;
    }

.gui_les .step2_group {
    float: left;
    margin: 10px 0 0 40px;
    width: 870px;
}

.gui_les .step2_group1 {
    float: left;
    margin-right: 30px;
    width: 320px;
}

.gui_les .step2_group2 {
    float: left;
    width: 350px;
}
/* ----------------- Step Group 1 ----------------- */
.gui_les .step2_group1 .grid_wrap {
    border: solid 1px #dddddd;
    border-top: solid 2px #838383;
    border-left: solid 2px #dddddd;
    width: 310px;
    margin-top: 30px;
}

.gui_les .step2_group1 .grid_data {
    margin: 10px 10px;
    width: 300px;
    height: 390px;
    overflow: auto;
}

    .gui_les .step2_group1 .grid_data .gcheckbox {
        float: left;
        display: block;
        width: 20px;
    }

    .gui_les .step2_group1 .grid_data .glabel {
        float: left;
        display: block;
        width: 235px;
    }

    .gui_les .step2_group1 .grid_data .gimg {
        float: left;
    }
/* ----------------- Step Group 2 ----------------- */
.gui_les .step2_group2 .grid_wrap {
    border: solid 1px #dddddd;
    border-top: solid 2px #838383;
    border-left: solid 2px #dddddd;
    width: 330px;
    margin-top: 13px;
    float: left;
}

.gui_les .step2_group2 .grid_data {
    margin: 10px 10px;
    width: 320px;
    height: 170px;
    overflow: auto;
}

.gui_les .step2_group2 .grid_wrap2 {
    border: solid 1px #dddddd;
    border-top: solid 2px #838383;
    border-left: solid 2px #dddddd;
    width: 330px;
    margin-top: 10px;
    float: left;
}

.gui_les .step2_group2 .grid_data2 {
    margin: 10px 10px;
    width: 320px;
    height: 170px;
    overflow: auto;
}

.gui_les .step2_group2 .gr2 {
    margin-top: 15px;
}

.gui_les .step2_group2 .col {
    float: left;
    width: 465px;
}

.gui_les .step2_group2 .colbtn {
    float: left;
    margin: 10px 0 0 15px;
}

.btn_assign {
    background: url("../TheImages/btn_assign.png") no-repeat;
    width: 79px;
    height: 38px;
    border: 0;
    cursor: pointer;
}


/* =========================================== LESSONS 3 =========================================== */
.gui_les .step3_skills {
    float: left;
    width: 835px;
    margin: 10px 0 0 40px;
}

    .gui_les .step3_skills h2 {
        float: none;
    }

    .gui_les .step3_skills .col {
        float: left;
        margin-top: 10px;
        width: 180px;
    }

    .gui_les .step3_skills .last {
        width: 470px;
    }

    .gui_les .step3_skills .colsearch {
        float: left;
        width: 290px;
    }

        .gui_les .step3_skills .colsearch img {
            margin-top: 25px;
        }

    .gui_les .step3_skills .col input[type="text"] {
        width: 170px;
    }

    .gui_les .step3_skills .divnext {
        float: left;
        margin-top: -20px;
        width: 125px;
    }

.btn_launch {
    background: url("../TheImages/btn_launch.png") no-repeat;
    width: 124px;
    height: 50px;
    border: 0;
    cursor: pointer;
}

.gui_les .step3_group {
    float: left;
    margin: 10px 0 0 40px;
    width: 835px;
}

.gui_les .step3_group1 {
    float: left;
    margin-right: 60px;
    width: 360px;
}

.gui_les .step3_group2 {
    float: left;
    width: 335px;
}
/* ----------------- Step Group 1 ----------------- */

.gui_les .step3_group1 .content div {
    margin: 5px 0 10px 0;
}

.gui_les .step3_group1 .grid_wrap {
    border: solid 1px #dddddd;
    border-top: solid 2px #838383;
    border-left: solid 2px #dddddd;
    width: 330px;
    margin-top: 13px;
    float: left;
}

.gui_les .step3_group1 .grid_data {
    margin: 10px 10px;
    width: 320px;
    height: 150px;
    overflow: auto;
}

.gui_les .step3_group1 .grid_wrap2 {
    border: solid 1px #dddddd;
    border-top: solid 2px #838383;
    border-left: solid 2px #dddddd;
    width: 330px;
    margin-top: 10px;
    float: left;
}

.gui_les .step3_group1 .grid_data2 {
    margin: 10px 10px;
    width: 320px;
    height: 160px;
    overflow: auto;
}

.gui_les .step3_group1 .gr2 {
    margin-top: 30px;
}

.gui_les .step3_group1 .col {
    float: left;
    width: 465px;
}

.gui_les .step3_group1 .colbtn {
    float: left;
    margin: 10px 0 0 15px;
}

.gui_les .step3_group1 .grid_data2 .iarow {
    float: left;
    margin: 5px 5px 0 0;
}

.gui_les .step3_group1 .grid_data2 .item {
    list-style: none;
}

    .gui_les .step3_group1 .grid_data2 .item li {
    }

.gui_les .step3_group1 .grid_data2 .sub {
    list-style: none;
}

    .gui_les .step3_group1 .grid_data2 .sub li {
        margin: 5px 0 0 39px;
    }

/* ----------------- Step Group 2 ----------------- */
.gui_les .step3_group2 .grid_wrap {
    border: solid 1px #dddddd;
    border-top: solid 2px #838383;
    border-left: solid 2px #dddddd;
    width: 335px;
    margin-top: 30px;
}

.gui_les .step3_group2 .grid_data {
    margin: 10px 10px;
    width: 325px;
    height: 362px;
    overflow: auto;
}

    .gui_les .step3_group2 .grid_data .gcheckbox {
        float: left;
        display: block;
        width: 20px;
    }

    .gui_les .step3_group2 .grid_data .glabel {
        float: left;
        display: block;
        width: 255px;
    }

    .gui_les .step3_group2 .grid_data .gimg {
        float: left;
    }

.gui_les .step3_group2 .note {
    text-align: center;
}

/* =========================================== REPORT MAIN =========================================== */
.gui_rep .mcontent {
    float: left;
    margin: 20px 0 0 10px;
    width: 950px;
}

    .gui_rep .mcontent h2 {
        margin-bottom: 20px;
    }

    .gui_rep .mcontent h2 {
        float: left;
        margin-right: 5px;
    }

    .gui_rep .mcontent .question {
        float: right;
        margin: -10px 8px 0;
    }

        .gui_rep .mcontent .question a {
            background: url("../TheImages/icon_question.png") no-repeat;
            display: block;
            width: 40px;
            height: 40px;
        }

    .gui_rep .mcontent .item {
        float: left;
        margin: 10px 0 0 72px;
        width: 878px;
    }

    .gui_rep .mcontent .divbtn {
        float: left;
        margin-right: 10px;
    }

    .gui_rep .mcontent .text {
        float: left;
        /*margin-top: 10px;*/
        height: 60px;
        width: 550px;
    }

.btn_activity_report {
    background: url("../TheImages/btn_activity_report.png") no-repeat;
    width: 205px;
    height: 42px;
    border: 0;
    cursor: pointer;
}

.btn_progress_report {
    background: url("../TheImages/btn_progress_report.png") no-repeat;
    width: 205px;
    height: 42px;
    border: 0;
    cursor: pointer;
}

.btn_active_user_report {
    background: url("../TheImages/btn_active_user_report.png") no-repeat;
    width: 205px;
    height: 42px;
    border: 0;
    cursor: pointer;
}

.btn_conversion_report {
    background: url("../TheImages/btn_conversion_report.png") no-repeat;
    width: 205px;
    height: 42px;
    border: 0;
    cursor: pointer;
}

.btn_quiz_report {
    background: url("../TheImages/btn_quiz_report.png") no-repeat;
    width: 205px;
    height: 42px;
    border: 0;
    cursor: pointer;
}

/* =========================================== REPORT ACTIVITY =========================================== */
.gui_rep .content {
    background: #f5f5f5;
    float: left;
    margin: 20px 0 0 20px;
    width: 920px;
}

    .gui_rep .content h2 {
        margin-bottom: 20px;
    }

    .gui_rep .content .wrapcontent {
        padding: 20px;
        border: solid 1px #e5e5e5;
        border-radius: 3px;
    }

    .gui_rep .content p.title {
        font-weight: bold;
    }

    .gui_rep .content .divform {
        margin-top: 20px;
    }

        .gui_rep .content .divform .item {
            float: left;
            width: 890px;
            margin-bottom: 10px;
        }

        .gui_rep .content .divform .name {
            float: left;
            width: 95px;
            margin-right: 5px;
        }

        .gui_rep .content .divform .element {
            float: left;
            width: 780px;
        }

        .gui_rep .content .divform .item50 {
            float: left;
            width: 430px;
            margin-bottom: 10px;
            margin-left: 10px
        }

        .gui_rep .content .divform .col50 {
            float: left;
            width: 47%;
            margin-bottom: 10px;
            margin-left: 10px
        }

        .gui_rep .content .divform .name50 {
            float: left;
            width: 115px;
            margin-right: 5px;
        }

        .gui_rep .content .divform .element50 {
            float: left;
            width: 300px;
        }

        .gui_rep .content .divform .item input[type="text"] {
            width: 218px;
        }

    .gui_rep .content .opshowhide {
        float: left;
        width: 890px;
        margin-top: 10px;
    }

        .gui_rep .content .opshowhide .name {
            display: block;
            float: left;
            width: 145px;
        }

        .gui_rep .content .opshowhide ul {
            list-style: none;
        }

        .gui_rep .content .opshowhide li {
            float: left;
            margin-left: 10px;
        }
/* ----------------- Report Result ----------------- */
.gui_rep .report_result {
    background: #f5f5f5;
    border-top: solid 1px #e5e5e5;
    float: left;
    margin: 20px 0 0 20px;
    padding: 20px 0 10px 20px;
    width: 900px;
}

.gui_rep .report_result {
    margin-top: 20px;
}

    .gui_rep .report_result .item {
        float: left;
        width: 890px;
        margin-bottom: 10px;
    }

    .gui_rep .report_result .name {
        float: left;
        width: 105px;
        margin-right: 5px;
        font-style: italic;
    }

    .gui_rep .report_result .element {
        float: left;
        width: 780px;
    }
/* ----------------- Report List ----------------- */
.gui_rep .report_list {
    float: left;
    margin: 20px 0 20px 20px;
    width: 920px;
}

    .gui_rep .report_list tr th {
        background-color: #efefef;
        font-weight: bold;
        vertical-align: middle;
        border: 1px solid #DDDDDD;
        padding: 4px 5px;
    }

    .gui_rep .report_list tr td {
        border: 1px solid #DDDDDD;
        padding: 4px 5px;
        line-height: 18px;
        text-align: left;
        vertical-align: top;
    }

    .gui_rep .report_list .divbtn {
        margin-top: 20px;
    }

/* =========================================== REPORT PROGRESS =========================================== */
.gui_rep .content .item .dropdownlist180 {
    display: block;
    float: left;
    width: 217px;
}

.gui_rep .content .item .dropdownlist120 {
    display: block;
    float: left;
    margin-left: 10px;
}

/* =========================================== REPORT GROUP =========================================== */
.jstourpercent {
    display: none;
}

.reportgroupline80 {
    background: #666;
    position: absolute;
    width: 1px;
    margin: 30px 0 0 785px;
}

.reportgrouptbl tr th {
    border-left: 0 !important;
    border-right: 0 !important;
}

.reportgrouptbl tr td {
    border-left: 0 !important;
    border-right: 0 !important;
    /*vertical-align: middle !important;*/
}

.reportgroupcol2row td {
    border: 0 !important;
}

.yourpercentwrap {
    background: #eee;
    width: 300px;
    height: 20px;
}

.yourpercent {
    background: #3ca1f6;
    height: 20px;
}

.reportgroupheader {
    float: left;
    background: #e5e5e5;
}

    .reportgroupheader .ski {
        float: left;
        width: 250px;
        line-height: 30px;
    }

    .reportgroupheader .stu {
        float: left;
        width: 250px;
        line-height: 30px;
    }

    .reportgroupheader .sco {
        float: left;
        width: 250px;
        line-height: 30px;
    }

    .reportgroupheader .ben {
        float: left;
        width: 170px;
        line-height: 30px;
    }

.reportnotes tr td {
    border-left: 0 !important;
    border-right: 0 !important;
    padding-right: 20px;
    vertical-align: top;
}

.reportnotes th {
    text-align: left;
}

/* =========================================== LAUNCH QUIZZ =========================================== */
.gui_lau {
    margin: 0;
}

    .gui_lau .content {
        float: left;
        margin: 10px 5px;
        width: 910px;
    }

        .gui_lau .content h2 {
            float: left;
            margin-right: 5px;
        }

    .gui_lau .tab1 {
        background: url("../TheImages/quiz_tab1.html") no-repeat;
        float: left;
        width: 40px;
        height: 620px;
        cursor: pointer;
    }

    .gui_lau .tab2 {
        background: url("../TheImages/quiz_tab2.jpg") no-repeat;
        float: left;
        width: 40px;
        height: 620px;
        box-shadow: -4px 0 5px #cccccc;
        cursor: pointer;
    }

    .gui_lau .step_skills {
        float: left;
        width: 835px;
        margin: 10px 0 0 40px;
    }

        .gui_lau .step_skills h2 {
            float: none;
        }

        .gui_lau .step_skills .col {
            float: left;
            margin-top: 10px;
            width: 180px;
        }

        .gui_lau .step_skills .last {
            width: 530px;
        }

        .gui_lau .step_skills .col input[type="text"] {
            width: 170px;
            float: left;
        }

        .gui_lau .step_skills .spansearch {
            margin: 5px 0 0 5px;
        }

            .gui_lau .step_skills .spansearch a img {
                float: left;
                margin: -3px 0 0 10px;
            }

            .gui_lau .step_skills .spansearch a span {
                color: #0066cc;
                font-size: 12px;
                font-weight: bold;
                text-decoration: underline;
            }

        .gui_lau .step_skills .divnext {
            float: left;
            margin-top: -20px;
            width: 125px;
        }

    .gui_lau .step_group {
        float: left;
        margin: 30px 0 0 40px;
        width: 835px;
    }

    .gui_lau .step_group1 {
        float: left;
        margin-right: 60px;
        width: 360px;
    }

    .gui_lau .step_group2 {
        float: left;
        width: 335px;
    }
    /* ----------------- Step Group 1 ----------------- */

    .gui_lau .step_group1 .content div {
        margin: 5px 0 10px 0;
    }

    .gui_lau .step_group1 .grid_wrap {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        width: 330px;
        margin-top: 13px;
        float: left;
    }

    .gui_lau .step_group1 .grid_data {
        margin: 10px 10px;
        width: 320px;
        height: 380px;
        overflow: auto;
    }
    /* ----------------- Step Group 2 ----------------- */
    .gui_lau .step_group2 .grid_wrap {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        width: 370px;
        margin-top: 30px;
    }

    .gui_lau .step_group2 .grid_data {
        margin: 10px 10px;
        width: 360px;
        height: 380px;
        overflow: auto;
    }

        .gui_lau .step_group2 .grid_data .gcheckbox {
            float: left;
            display: block;
            width: 20px;
        }

        .gui_lau .step_group2 .grid_data .glabel {
            float: left;
            display: block;
            width: 290px;
        }

        .gui_lau .step_group2 .grid_data .gimg {
            float: left;
        }


/* =========================================== LAUNCH STUDENT =========================================== */
.gui_laustu {
    margin: 0;
}

    .gui_laustu .content {
        float: left;
        margin: 10px 5px;
        width: 950px;
    }

        .gui_laustu .content h2 {
            float: left;
            margin-right: 5px;
        }

    .gui_laustu .step_group {
        float: left;
        margin: 30px 0 0 40px;
        width: 835px;
    }

    .gui_laustu .step_group1 {
        float: left;
        margin-right: 30px;
        width: 360px;
    }

    .gui_laustu .step_group2 {
        float: left;
        width: 335px;
        margin-top: 30px;
    }
    /* ----------------- Step Group 1 ----------------- */
    .gui_laustu .step_group1 .grid_wrap {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        width: 360px;
        margin-top: 30px;
    }

    .gui_laustu .step_group1 .grid_data {
        margin: 10px 10px;
        width: 350px;
        height: 450px;
        overflow: auto;
    }

        .gui_laustu .step_group1 .grid_data .gcheckbox {
            float: left;
            display: block;
            width: 20px;
        }

        .gui_laustu .step_group1 .grid_data .glabel {
            float: left;
            display: block;
            width: 280px;
        }

        .gui_laustu .step_group1 .grid_data .gimg {
            float: left;
        }

    .gui_laustu .step_group2 .person {
        margin: 80px 0 0 30px;
        position: absolute;
    }


/* =========================================== LAUNCH PLAN =========================================== */
.gui_lauplan {
    margin: 0;
}

    .gui_lauplan .content {
        float: left;
        margin: 10px 5px;
        width: 910px;
    }

        .gui_lauplan .content h2 {
            margin-right: 5px;
        }

        .gui_lauplan .content .question {
            float: right;
            margin-top: -2px;
        }

            .gui_lauplan .content .question a {
                background: url("../TheImages/icon_question.png") no-repeat;
                display: block;
                width: 40px;
                height: 40px;
            }

    .gui_lauplan .step_title {
        width: 905px;
    }

    .gui_lauplan .tab1 {
        background: url("../TheImages/plan_tab1.jpg") no-repeat;
        float: left;
        width: 40px;
        height: 620px;
        cursor: pointer;
    }

    .gui_lauplan .tab2 {
        background: url("../TheImages/plan_tab2.jpg") no-repeat;
        float: left;
        width: 40px;
        height: 620px;
        box-shadow: -4px 0 5px #cccccc;
        cursor: pointer;
    }

    .gui_lauplan .step_skills {
        float: left;
        width: 905px;
        margin: 30px 0 0 40px;
    }

        .gui_lauplan .step_skills .item {
            color: #333333;
            float: left;
            font-weight: bold;
            margin-bottom: 5px;
            width: 705px;
        }

        .gui_lauplan .step_skills .divnext {
            float: left;
            margin-top: -7px;
            width: 125px;
        }

    .gui_lauplan .step_group {
        float: left;
        margin: 10px 0 0 40px;
        width: 870px;
    }

    .gui_lauplan .step_group1 {
        float: left;
        margin-right: 30px;
        width: 320px;
    }

    .gui_lauplan .step_group2 {
        float: left;
        width: 500px;
    }
    /* ----------------- Step Group 1 ----------------- */
    .gui_lauplan .step_group1 .grid_wrap {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        width: 310px;
        margin-top: 30px;
    }

    .gui_lauplan .step_group1 .grid_data {
        margin: 10px 10px;
        width: 300px;
        height: 170px;
        overflow: auto;
    }

        .gui_lauplan .step_group1 .grid_data .item {
            width: 300px;
            height: 20px;
            float: left;
            padding: 10px 0;
        }

        .gui_lauplan .step_group1 .grid_data .gcheckbox {
            float: left;
            display: block;
            width: 20px;
        }

        .gui_lauplan .step_group1 .grid_data .glabel {
            float: left;
            display: block;
            width: 235px;
        }

        .gui_lauplan .step_group1 .grid_data .gimg {
            float: left;
        }

    .gui_lauplan .step_group1 .divg12 {
        margin-top: 20px;
    }

        .gui_lauplan .step_group1 .divg12 h2 {
            float: none;
        }

    .gui_lauplan .step_group1 .gridg12_wrap {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        width: 310px;
        margin-top: 10px;
    }

    .gui_lauplan .step_group1 .gridg12_data {
        margin: 10px 10px;
        width: 300px;
        height: 480px;
        overflow: auto;
    }

        .gui_lauplan .step_group1 .gridg12_data .gcheckbox {
            float: left;
            display: block;
            width: 20px;
        }

        .gui_lauplan .step_group1 .gridg12_data .glabel {
            float: left;
            display: block;
            width: 235px;
        }

        .gui_lauplan .step_group1 .gridg12_data .gimg {
            float: left;
        }
    /* ----------------- Step Group 2 ----------------- */
    .gui_lauplan .step_group2 .grid_wrap {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        margin-top: 5px;
        float: left;
        width: 400px;
        height: 160px;
        overflow: auto;
    }

    .gui_lauplan .step_group2 .grid_wrap2 {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        margin-top: 8px;
        float: left;
        height: 196px;
        width: 400px;
        overflow: auto;
    }

    .gui_lauplan .step_group2 .gr2 {
        margin-top: 30px;
    }

    .gui_lauplan .step_group2 .col {
        float: left;
        width: 560px;
    }

    .gui_lauplan .step_group2 .colbtn {
        float: left;
        margin: 5px 0 0 10px;
    }

    .gui_lauplan .step_group2 select {
        border: 0 none;
        height: 100%;
        width: 100%;
    }

        .gui_lauplan .step_group2 select option {
            padding: 5px 0 0 10px;
        }

    /* ----------------- Plan Search ----------------- */
    .gui_lauplan .psearch {
        float: left;
        width: 500px;
        margin: 17px 0 0 0;
    }

        .gui_lauplan .psearch .cols {
            float: left;
            margin: 10px 25px 0 0;
        }

            .gui_lauplan .psearch .cols input[type="text"] {
                width: 187px;
                float: left;
            }

        .gui_lauplan .psearch .divsearch {
            float: left;
            margin: 25px 0 0 -15px;
        }

            .gui_lauplan .psearch .divsearch a span {
                color: #0066cc;
                font-size: 12px;
                font-weight: bold;
                text-decoration: underline;
            }


    /* =========================================== LAUNCH PLAN 2 =========================================== */
    .gui_lauplan .step2_skills {
        float: left;
        width: 835px;
        margin: 10px 0 0 40px;
    }

        .gui_lauplan .step2_skills h2 {
            float: none;
        }

        .gui_lauplan .step2_skills .col {
            float: left;
            margin-top: 10px;
            width: 150px;
        }

        .gui_lauplan .step2_skills .colsearch {
            float: left;
            width: 409px;
        }

            .gui_lauplan .step2_skills .colsearch img {
                margin-top: 25px;
            }

        .gui_lauplan .step2_skills .col input[type="text"] {
            width: 140px;
        }

        .gui_lauplan .step2_skills .divnext {
            float: left;
            margin-top: 0;
            width: 125px;
        }

    .gui_lauplan .step2_group {
        float: left;
        margin: 10px 0 0 40px;
        width: 835px;
    }

    .gui_lauplan .step2_group1 {
        float: left;
        margin-right: 60px;
        width: 360px;
    }

    .gui_lauplan .step2_group2 {
        float: left;
        width: 335px;
    }
    /* ----------------- Step Group 1 ----------------- */

    .gui_lauplan .step2_group1 .content div {
        margin: 5px 0 10px 0;
    }

    .gui_lauplan .step2_group1 .grid_wrap {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        width: 330px;
        margin-top: 13px;
        float: left;
    }

    .gui_lauplan .step2_group1 .grid_data {
        margin: 10px 10px;
        width: 320px;
        height: 122px;
        overflow: auto;
    }

    .gui_lauplan .step2_group1 .grid_wrap2 {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        width: 330px;
        margin-top: 5px;
        float: left;
    }

    .gui_lauplan .step2_group1 .grid_data2 {
        margin: 10px 10px;
        width: 320px;
        height: 160px;
        overflow: auto;
    }

    .gui_lauplan .step2_group1 h2.title {
        margin-top: 10px;
    }

    .gui_lauplan .step2_group1 h2.gr2 {
        margin-top: 10px;
    }

    .gui_lauplan .step2_group1 .col {
        float: left;
        width: 465px;
    }

    .gui_lauplan .step2_group1 .colbtn {
        float: left;
        margin: 10px 0 0 15px;
    }

    .gui_lauplan .step2_group1 .grid_data2 .iarow {
        float: left;
        margin: 5px 5px 0 0;
    }

    .gui_lauplan .step2_group1 .grid_data2 .item {
        list-style: none;
    }

        .gui_lauplan .step2_group1 .grid_data2 .item li {
        }

    .gui_lauplan .step2_group1 .grid_data2 .sub {
        list-style: none;
    }

        .gui_lauplan .step2_group1 .grid_data2 .sub li {
            margin: 5px 0 0 20px;
        }

    /* ----------------- Plan Search ----------------- */
    .gui_lauplan .step2_group1 .psearch {
        float: left;
        width: 500px;
        margin: 5px 0 0;
    }

        .gui_lauplan .step2_group1 .psearch .cols {
            float: left;
            margin: 0 25px 0 0;
        }

            .gui_lauplan .step2_group1 .psearch .cols input[type="text"] {
                width: 290px;
                float: left;
            }

        .gui_lauplan .step2_group1 .psearch .divsearch {
            float: left;
            margin: 14px 0 0 -17px;
        }

    /* ----------------- Step Group 2 ----------------- */
    .gui_lauplan .step2_group2 .grid_wrap {
        border: solid 1px #dddddd;
        border-top: solid 2px #838383;
        border-left: solid 2px #dddddd;
        width: 335px;
        margin-top: 30px;
    }

    .gui_lauplan .step2_group2 .grid_data {
        margin: 10px 10px;
        width: 325px;
        height: 381px;
        overflow: auto;
    }

        .gui_lauplan .step2_group2 .grid_data .gcheckbox {
            float: left;
            display: block;
            width: 20px;
        }

        .gui_lauplan .step2_group2 .grid_data .glabel {
            float: left;
            display: block;
            width: 255px;
        }

        .gui_lauplan .step2_group2 .grid_data .gimg {
            float: left;
        }

    .gui_lauplan .step2_group2 .note {
        text-align: center;
    }


/* =========================================== RESOURCES =========================================== */
.gui_res {
    float: left;
    width: 890px;
    margin: 20px 0 5px 20px;
}

    .gui_res .mytabitem {
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0 10px;
        float: left;
        border: solid #bdbdbd 1px;
        border-radius: 5px;
        box-shadow: 5px 5px 5px #888888;
    }

        .gui_res .mytabitem h5 {
            padding: 3px 5px 0 5px;
        }

    .gui_res .jsitem {
        cursor: pointer;
        margin: 0 0 5px 0;
    }

    .gui_res .mytabitem .content img {
        float: left;
        margin: 0 10px 10px 0;
    }

    .gui_res .myh3 {
        font-size: 17px;
        font-weight: bold;
        padding: 30px 0 3px 0;
        clear: both;
    }

/* =========================================== PREVIEW WEBISODES =========================================== */

.gui_brow {
    padding: 20px;
}

    .gui_brow .myh3 {
        font-size: 17px;
        font-weight: bold;
        padding: 30px 0 3px 0;
        clear: both;
        color: #0066cc;
    }

    .gui_brow .ui-tabs {
        zoom: 1;
    }

        .gui_brow .ui-tabs .ui-tabs-nav {
            list-style: none;
            position: relative;
            padding: 0;
            margin: 0;
            float: right;
            margin-right: -3px;
        }

            .gui_brow .ui-tabs .ui-tabs-nav li {
                position: relative;
                float: left;
                margin: 0 3px -2px 0;
                padding: 0;
            }

                .gui_brow .ui-tabs .ui-tabs-nav li a {
                    font-size: 17px;
                    color: #0066cc;
                    display: block;
                    padding: 10px 20px;
                    background: #f0f0f0;
                    border: 2px #ccc solid;
                    border-bottom-color: #ccc;
                    /*outline: none;*/
                    border-radius: 5px 5px 0 0;
                }

                .gui_brow .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
                    padding: 10px 20px 12px 20px;
                    background: #fff;
                    border-bottom-style: none;
                }

                .gui_brow .ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
                .gui_brow .ui-tabs .ui-tabs-nav li.ui-state-disabled a,
                .gui_brow .ui-tabs .ui-tabs-nav li.ui-state-processing a {
                    cursor: default;
                }

                .gui_brow .ui-tabs .ui-tabs-nav li a,
                .gui_brow .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
                    cursor: pointer;
                }

        .gui_brow .ui-tabs .ui-tabs-panel {
            display: block;
            clear: both;
            border: 2px #ccc solid;
            padding: 10px;
            border-radius: 5px 0 5px 5px;
        }

        .gui_brow .ui-tabs .ui-tabs-hide {
            display: none;
        }


/* =========================================== LMS DASHBOARD =========================================== */
.gui_db_body {
    background: url("../TheImages/db_bg3.jpg") repeat-x scroll 0 0 #000000;
    margin: 0;
}

.gui_db {
}
/* ----------------- header ----------------- */
.gui_db_header {
    background: url("../TheImages/db_bg_top.png") repeat-x;
    width: 100%;
    min-width: 1018px;
    background: rgba(17, 43, 86, .7);
}

    .gui_db_header .wrapp {
        width: 1018px;
        height: 42px;
        margin: 0 auto;
    }

    .gui_db_header .logo {
        float: left;
        margin: 5px 0 0 10px;
    }

        .gui_db_header .logo a {
            background: url("../TheImages/logo.png") no-repeat;
            display: block;
            width: 60px;
            height: 44px;
        }

    .gui_db_header .link {
        float: left;
        margin: 10px 0 0 5px;
    }

    .gui_db_header .login {
        float: right;
        margin: 10px 10px 0 0;
        color: #ffffff;
        font-size: 12px;
        font-weight: bold;
    }

        .gui_db_header .login a {
            font-size: 12px;
            font-weight: bold;
            color: #ffffff;
        }

    .gui_db_header a:hover {
        color: #efefef;
    }

    .gui_db_header li a:hover {
        color: #efefef;
    }

    .gui_db_header .login2 {
        color: #ffffff;
        float: right;
        margin: 3px -35px 0 0;
    }

        .gui_db_header .login2 a {
            color: #ffffff;
            font-size: 10px;
            font-weight: bold;
        }

            .gui_db_header .login2 a:hover {
                color: #efefef;
            }

        .gui_db_header .login2 .text {
            color: #ffffff;
            font-size: 11px;
            float: left;
            margin-right: 20px;
        }

/* ----------------- menu top ----------------- */
#nav_home {
    margin: 0;
}

    #nav_home li {
        margin: 0 0;
        padding: 0 0 08px;
        float: left;
        position: relative;
        list-style: none;
    }

    /* main level link */
    #nav_home a {
        font-size: 12px;
        font-weight: bold;
        color: #ffffff;
        float: left;
        height: 15px;
        margin-right: 0px;
        margin-top: 0;
        padding: 3px 7px;
        position: relative;
        text-decoration: none;
    }

    #nav_home ul li a {
        color: #1F428E;
        font-size: 12px;
        font-weight: bold;
        border-right: none;
    }

    #nav_home a:hover {
        color: #efefef;
    }

    /* main level link hover */
    #nav_home .currentwhat a {
        color: #1C75BC;
    }

    #nav_home .currentprod a {
        color: #EF4136;
    }

    #nav_home .currentcomm a {
        color: #009444;
    }

    #nav_home .currentreso a {
        color: #009EB4;
    }

    #nav_home .currentcomp a {
        color: #F36C21;
    }

    #nav_home .currentcont a {
        color: #8F499C;
    }

    /* sub levels link hover */
    #nav_home ul li:hover a, #nav li:hover li a {
        background: none;
        border: none;
        box-shadow: none;
        color: #ffffff;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }

    #nav_home ul a:hover {
        color: #009444 !important;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
    }

    /* dropdown */
    #nav_home li:hover > ul {
        display: block;
    }

    /* level 2 list */
    #nav_home ul {
        display: none;
        margin: 0;
        padding: 0;
        width: 215px;
        position: absolute;
        top: 27px;
        left: 0;
        background: #fff;
        z-index: 99999;
        border: solid 1px #efefef;
        -webkit-box-shadow: 0 10px 10px rgba(0,0,0, .3);
        -moz-box-shadow: 0 10px 01px rgba(0,0,0, .3);
        box-shadow: 0 10px 10px rgba(0,0,0, .3);
    }

        #nav_home ul li {
            float: none;
            margin: 0;
            padding: 0;
        }

        #nav_home ul a {
            font-weight: normal;
            display: block;
            width: 200px;
        }

        /* level 3+ list */
        #nav_home ul ul {
            left: 181px;
            top: -3px;
        }

        /* rounded corners of first and last link */
        #nav_home ul li:first-child > a {
            -webkit-border-top-left-radius: 9px;
            -moz-border-radius-topleft: 9px;
            -webkit-border-top-right-radius: 9px;
            -moz-border-radius-topright: 9px;
        }

        #nav_home ul li:last-child > a {
            -webkit-border-bottom-left-radius: 9px;
            -moz-border-radius-bottomleft: 9px;
            -webkit-border-bottom-right-radius: 9px;
            -moz-border-radius-bottomright: 9px;
        }

    #nav_home .last {
        border: 0;
    }

/* ----------------- Body ----------------- */
.gui_db_main {
    float: left;
    margin: 45px 0 0;
    width: 100%;
}

    .gui_db_main .wrapp {
        background: url("../TheImages/db_bg2.png") no-repeat scroll 0 0 transparent;
        width: 1018px;
        height: 530px;
        margin: 0 auto;
    }

    .gui_db_main .colleft {
        float: left;
        margin: 114px 0 0 173px;
        width: 100px;
    }

    .gui_db_main .colright {
        float: right;
        margin: 115px 242px 0 0;
        width: 100px;
    }
    /* ----------------- col left ----------------- */
    .gui_db_main .mstu a {
        background: url("../TheImages/db_btn_mstu.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .mstu_grey a {
        background: url("../TheImages/db_btn_mstu_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .adduser a {
        background: url("../TheImages/db_btn_adduser.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .adduser_grey a {
        background: url("../TheImages/db_btn_adduser_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .bles a {
        background: url("../TheImages/db_btn_bles.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .bles_grey a {
        background: url("../TheImages/db_btn_bles_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .webs a {
        background: url("../TheImages/db_btn_webs.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .webs_grey a {
        background: url("../TheImages/db_btn_webs_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .game a {
        background: url("../TheImages/db_btn_game.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .game_grey a {
        background: url("../TheImages/db_btn_game_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .ccul a {
        background: url("../TheImages/db_btn_ccul.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .ccul_grey a {
        background: url("../TheImages/db_btn_ccul_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .quiz a {
        background: url("../TheImages/db_btn_quiz.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .quiz_grey a {
        background: url("../TheImages/db_btn_quiz_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .preweb a {
        background: url("../TheImages/db_btn_preweb.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .preweb_grey a {
        background: url("../TheImages/db_btn_preweb_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .getstarted a {
        background: url("../TheImages/db_btn_getstarted.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .getstarted_grey a {
        background: url("../TheImages/db_btn_getstarted_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .db_btn_addin a {
        background: url("../TheImages/db_btn_addin.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .db_btn_addin_grey a {
        background: url("../TheImages/db_btn_addin_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .db_btn_print a {
        background: url("../TheImages/db_btn_print.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .db_btn_print_grey a {
        background: url("../TheImages/db_btn_print_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .db_btn_faq a {
        background: url("../TheImages/db_btn_faq.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .db_btn_faq_grey a {
        background: url("../TheImages/db_btn_faq_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }
    /* ----------------- col right ----------------- */
    .gui_db_main .chou a {
        background: url("../TheImages/db_btn_chou.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .chou_grey a {
        background: url("../TheImages/db_btn_chou_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .repo a {
        background: url("../TheImages/db_btn_repo.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .repo_grey a {
        background: url("../TheImages/db_btn_repo_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .reso a {
        background: url("../TheImages/db_btn_reso.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .reso_grey a {
        background: url("../TheImages/db_btn_reso_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .lpla a {
        background: url("../TheImages/db_btn_lpla.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .lpla_grey a {
        background: url("../TheImages/db_btn_lpla_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .ebooks a {
        background: url("../TheImages/db_btn_ebooks.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }

    .gui_db_main .ebooks_grey a {
        background: url("../TheImages/db_btn_ebooks_grey.png") no-repeat;
        display: block;
        width: 97px;
        height: 49px;
    }
/* ----------------- footer ----------------- */
.gui_db_footer {
    background: none repeat scroll 0 0 #333333;
    float: left;
    width: 100%;
    min-width: 1018px
}

    .gui_db_footer .wrapper {
        width: 1018px;
        height: 37px;
        margin: 0 auto;
    }

    .gui_db_footer .footer {
        color: #c2c2c2;
        float: left;
        font-size: 12px;
        font-weight: bold;
        margin-left: 10px;
        padding-top: 10px;
        width: 745px;
    }


/* =========================================== QUIZ =========================================== */
.gui_quiz {
    margin: 0;
    width: 960px;
}

    .gui_quiz ol {
        list-style: none;
    }

    .gui_quiz .gui_top {
        float: left;
        margin: 10px 10px;
        width: 940px;
    }

        .gui_quiz .gui_top .sid {
            width: 800px;
        }

            .gui_quiz .gui_top .sid input[type="text"] {
                width: 230px;
                border: solid 1px #dddddd;
                border-top: solid 2px #707070;
                font-weight: bold;
            }

    .gui_quiz .info {
        float: right;
        margin-top: -25px;
    }

        .gui_quiz .info a {
            background: url("../TheImages/icon_question.png") no-repeat;
            display: block;
            width: 40px;
            height: 40px;
        }

    .gui_quiz .wrapp {
        background: #ffffff;
        border: 0;
        float: left;
        padding: 0 10px 20px 20px;
        height: 595px;
        width: 930px;
        overflow: auto;
    }

    .gui_quiz .col1 {
        width: 540px;
        float: left;
    }

    .gui_quiz .col2 {
        float: left;
        width: 355px;
        margin-left: 10px;
    }

        .gui_quiz .col2 .driver img {
            margin: 30px 0 0 100px;
        }

    .gui_quiz h3 {
        margin: 0px 0 45px 0;
        margin-top: 15px;
    }

        .gui_quiz h3 .blue {
            font-family: "FuturaStdBold";
            color: #0066cc;
            font-size: 18px;
        }

h3 .jslessontitle {
    font-size: 18px;
    font-weight: bold;
    color: #666666;
}

    h3 .jslessontitle span {
        font-size: 18px;
        font-weight: bold;
        color: #666666;
    }

.gui_quiz .userchoose {
    text-align: center;
    font-size: 22px;
    color: #333;
    margin-top: 100px;
}

.gui_quiz li {
    font-size: 11px;
    color: #333;
}

.gui_quiz .item {
    margin: 10px 0 0 0;
}

    .gui_quiz .item li {
        margin-left: 0;
    }

.gui_quiz .specpha .pharap {
    float: left;
    width: 460px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.gui_quiz .specpha img {
    cursor: pointer;
}
/* ----------------- question ----------------- */
.gui_quiz .item .question {
    font-weight: bold;
    color: #333;
    font-size: 21px;
    display: block;
    min-height: 30px;
    line-height: 25px;
}

    .gui_quiz .item .question u {
        font-weight: bold;
        color: #333;
        font-size: 21px;
    }

.gui_quiz .item .itemcol1 {
    float: left;
    width: 460px;
    margin-right: 20px;
    display: table;
}

.gui_quiz .item .itemcol2 {
    float: left;
    width: 35px;
    margin-top: 10px;
}


.tooltiptext {
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

    .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.gui_quiz .item .itemcol2 img {
    cursor: pointer;
}

.gui_quiz .item ol {
    margin: 30px 0 0 0;
    float: left;
}

.gui_quiz .numquesionof {
    float: left;
    color: #666666;
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0 0 10px;
}

    .gui_quiz .numquesionof span {
        color: #666666;
        font-size: 21px;
        font-weight: bold;
    }

.gui_quiz .item .qitem {
    background: url("../TheImages/quiz_bgquesion.png") no-repeat;
    height: 80px;
    width: 425px;
    padding: 5px 20px 5px 20px;
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
}

.qitem:focus {
    outline: thin dotted #333;
    outline: 10px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.gui_quiz .item .jsaws {
    font-size: 21px;
    color: #000000;
    font-weight: bold;
    width: 410px;
    display: block;
}

.gui_quiz .item .qitemcur {
    background: url("../TheImages/quiz_bgquesionchoose.png") no-repeat;
}

.gui_quiz .item ol .itemcol2 {
    margin-top: 10px;
}

    .gui_quiz .item ol .itemcol2 img {
        cursor: pointer;
    }



/* ----------------- button ----------------- */
.gui_quiz .btncon {
    text-align: center;
    margin: 3px 0 10px 30px
}

.gui_quiz .btnquiz {
    background: url("../TheImages/btnquiz.png") no-repeat;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    border: 0;
    width: 144px;
    height: 56px;
    cursor: pointer;
    padding-bottom: 3px;
    padding-left: 0;
    outline: none;
}

.btnquiz:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}


/* =========================================== QUIZ =========================================== */
.gui_quiz_result {
    margin: 0;
}

    .gui_quiz_result .content {
        width: 960px;
    }

    .gui_quiz_result .info {
        float: right;
        margin: 9px 10px 0;
    }

        .gui_quiz_result .info a {
            background: url("../TheImages/icon_question.png") no-repeat;
            display: block;
            width: 40px;
            height: 40px;
        }
    /* ----------------- congratulations ----------------- */
    .gui_quiz_result .congra {
        margin: -17px 0 0;
        width: 960px;
        float: left;
        text-align: center;
    }

        .gui_quiz_result .congra .text {
            font-family: "FuturaStdBold";
            color: #0066cc;
            font-size: 40px;
            line-height: 45px;
        }

        .gui_quiz_result .congra .last {
            margin-bottom: 20px;
        }
    /* ----------------- result ----------------- */
    .gui_quiz_result .result {
        margin: 165px 0 0;
        width: 960px;
        float: left;
        text-align: center;
    }

        .gui_quiz_result .result .wrapp {
            margin: 0 auto;
        }

        .gui_quiz_result .result .score {
            margin-right: 10px;
        }

        .gui_quiz_result .result .box {
            background: url("../TheImages/quiz_box.png") no-repeat;
            display: block;
            margin: 0 auto;
            width: 247px;
            height: 112px;
        }

            .gui_quiz_result .result .box h4 {
                color: #0066cc;
                font-size: 18px;
                font-weight: bold;
                margin-top: 20px;
            }

        .gui_quiz_result .result .text, .gui_quiz_result .result .text span {
            color: #333333;
            font-size: 30px;
            font-weight: bold;
            line-height: 50px;
            padding-top: 20px;
        }

        .gui_quiz_result .result .certificate {
            float: left;
            margin: 0 0 0 20px;
        }

            .gui_quiz_result .result .certificate a {
                color: #0066cc;
                font-size: 14px;
                font-weight: bold;
            }

        .gui_quiz_result .result .btn {
            float: right;
            margin: 16px 40px 0 0;
            background: none;
        }

.btn_quiz_retake {
    background: url("../TheImages/btn_quiz_retake.png") no-repeat;
    width: 144px;
    height: 56px;
    border: 0;
    cursor: pointer;
}

.btn_quiz_mainmenu {
    background: url("../TheImages/btn_quiz_mainmenu.png") no-repeat;
    width: 144px;
    height: 56px;
    border: 0;
    cursor: pointer;
}

.gui_quiz .queskind {
    display: none;
}




/*----------copy old css------*/
.pagination ul {
    display: inline-block;
    *display: inline;
    margin-bottom: 0;
    margin-left: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    *zoom: 1;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination li {
    display: inline;
}

.pagination a {
    float: left;
    padding: 0 14px;
    line-height: 34px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-left-width: 0;
}

    .pagination a:hover,
    .pagination .active a {
        background-color: #f5f5f5;
    }

.pagination .active a {
    color: #999999;
    cursor: default;
}

.pagination .disabled span,
.pagination .disabled a,
.pagination .disabled a:hover {
    color: #999999;
    cursor: default;
    background-color: transparent;
}

.pagination li:first-child a {
    border-left-width: 1px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.pagination li:last-child a {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

.pagination-centered {
    text-align: center;
}

.pagination-right {
    text-align: right;
}

.label,
.badge {
    font-size: 10.998px;
    font-weight: bold;
    line-height: 14px;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #999999;
}

.label {
    padding: 1px 4px 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.badge {
    padding: 1px 9px 2px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

a.label:hover,
a.badge:hover {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.label-important,
.badge-important {
    background-color: #b94a48;
}

    .label-important[href],
    .badge-important[href] {
        background-color: #953b39;
    }

.label-warning,
.badge-warning {
    background-color: #f89406;
}

    .label-warning[href],
    .badge-warning[href] {
        background-color: #c67605;
    }

.label-pending,
.badge-pending {
    background-color: #CCB791;
}

    .label-pending[href],
    .badge-pending[href] {
        background-color: #CCB791;
    }

.label-success,
.badge-success {
    background-color: #468847;
}

    .label-success[href],
    .badge-success[href] {
        background-color: #356635;
    }

.label-info,
.badge-info {
    background-color: #3a87ad;
}

    .label-info[href],
    .badge-info[href] {
        background-color: #2d6987;
    }

.label-inverse,
.badge-inverse {
    background-color: #333333;
}

    .label-inverse[href],
    .badge-inverse[href] {
        background-color: #1a1a1a;
    }

.btn {
    display: inline-block;
    *border-left: 0 none #e6e6e6;
    border-right: 0 none #e6e6e6;
    border-top: 0 none #e6e6e6;
    border-bottom: 0 none #b3b3b3;
    display: inline;
    padding: 4px 10px 4px;
    margin-bottom: 0;
    *margin-left: .3em;
    font-size: 13px;
    line-height: 18px;
    *line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    *background-color: #e6e6e6;
    background-repeat: repeat-x;
    *-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    zoom: 1;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    *
}

    .btn:hover,
    .btn:active,
    .btn.active,
    .btn.disabled,
    .btn[disabled] {
        background-color: #e6e6e6;
        *background-color: #d9d9d9;
    }

    .btn:active,
    .btn.active {
        background-color: #cccccc \9;
    }

    .btn:first-child {
        *margin-left: 0;
    }

    .btn:hover {
        color: #333333;
        text-decoration: none;
        background-color: #e6e6e6;
        *background-color: #d9d9d9;
        /* Buttons in IE7 don't get borders, so darken on hover */

        background-position: 0 -15px;
        -webkit-transition: background-position 0.1s linear;
        -moz-transition: background-position 0.1s linear;
        -ms-transition: background-position 0.1s linear;
        -o-transition: background-position 0.1s linear;
        transition: background-position 0.1s linear;
    }

    .btn:focus {
        outline: thin dotted #333;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    .btn.active,
    .btn:active {
        background-color: #e6e6e6;
        background-color: #d9d9d9 \9;
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .btn.disabled,
    .btn[disabled] {
        cursor: default;
        background-color: #e6e6e6;
        background-image: none;
        opacity: 0.65;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

.btn-large {
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    .btn-large [class^="icon-"] {
        margin-top: 1px;
    }

.btn-small {
    padding: 5px 9px;
    font-size: 11px;
    line-height: 16px;
}

    .btn-small [class^="icon-"] {
        margin-top: -1px;
    }

.btn-mini {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 14px;
}

.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

    .btn-primary.active,
    .btn-warning.active,
    .btn-danger.active,
    .btn-success.active,
    .btn-info.active,
    .btn-inverse.active {
        color: rgba(255, 255, 255, 0.75);
    }

.btn {
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn-primary {
    background-color: #0074cc;
    *background-color: #0055cc;
    background-repeat: repeat-x;
    background-image: linear-gradient(top, #0088cc, #0055cc);
    border-left-color: #0055cc;
    border-right-color: #0055cc;
    border-top-color: #0055cc;
    border-bottom-color: #003580;
}

    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary.disabled,
    .btn-primary[disabled] {
        background-color: #0055cc;
        *background-color: #004ab3;
    }

    .btn-primary:active,
    .btn-primary.active {
        background-color: #004099 \9;
    }

.btn-warning {
    background-color: #faa732;
    *background-color: #f89406;
    background-repeat: repeat-x;
    background-image: linear-gradient(top, #fbb450, #f89406);
    border-left-color: #f89406;
    border-right-color: #f89406;
    border-top-color: #f89406;
    border-bottom-color: #ad6704;
}

    .btn-warning:hover,
    .btn-warning:active,
    .btn-warning.active,
    .btn-warning.disabled,
    .btn-warning[disabled] {
        background-color: #f89406;
        *background-color: #df8505;
    }

    .btn-warning:active,
    .btn-warning.active {
        background-color: #c67605 \9;
    }

.btn-danger {
    background-color: #da4f49;
    *background-color: #bd362f;
    background-repeat: repeat-x;
    background-image: linear-gradient(top, #ee5f5b, #bd362f);
    border-left-color: #bd362f;
    border-right-color: #bd362f;
    border-top-color: #bd362f;
    border-bottom-color: #802420;
}

    .btn-danger:hover,
    .btn-danger:active,
    .btn-danger.active,
    .btn-danger.disabled,
    .btn-danger[disabled] {
        background-color: #bd362f;
        *background-color: #a9302a;
    }

    .btn-danger:active,
    .btn-danger.active {
        background-color: #942a25 \9;
    }

.btn-success {
    background-color: #5bb75b;
    *background-color: #51a351;
    background-repeat: repeat-x;
    background-image: linear-gradient(top, #62c462, #51a351);
    border-left-color: #51a351;
    border-right-color: #51a351;
    border-top-color: #51a351;
    border-bottom-color: #387038;
}

    .btn-success:hover,
    .btn-success:active,
    .btn-success.active,
    .btn-success.disabled,
    .btn-success[disabled] {
        background-color: #51a351;
        *background-color: #499249;
    }

    .btn-success:active,
    .btn-success.active {
        background-color: #408140 \9;
    }

.btn-info {
    background-color: #49afcd;
    *background-color: #2f96b4;
    background-repeat: repeat-x;
    background-image: linear-gradient(top, #5bc0de, #2f96b4);
    border-left-color: #2f96b4;
    border-right-color: #2f96b4;
    border-top-color: #2f96b4;
    border-bottom-color: #1f6377;
}

    .btn-info:hover,
    .btn-info:active,
    .btn-info.active,
    .btn-info.disabled,
    .btn-info[disabled] {
        background-color: #2f96b4;
        *background-color: #2a85a0;
    }

    .btn-info:active,
    .btn-info.active {
        background-color: #24748c \9;
    }

.btn-inverse {
    background-color: #414141;
    *background-color: #222222;
    background-repeat: repeat-x;
    background-image: linear-gradient(top, #555555, #222222);
    border-left-color: #222222;
    border-right-color: #222222;
    border-top-color: #222222;
    border-bottom-color: #000000;
}

    .btn-inverse:hover,
    .btn-inverse:active,
    .btn-inverse.active,
    .btn-inverse.disabled,
    .btn-inverse[disabled] {
        background-color: #222222;
        *background-color: #151515;
    }

    .btn-inverse:active,
    .btn-inverse.active {
        background-color: #080808 \9;
    }

button.btn,
input[type="submit"].btn {
    *padding-top: 2px;
    *padding-bottom: 2px;
}

    button.btn::-moz-focus-inner,
    input[type="submit"].btn::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

    button.btn.btn-large,
    input[type="submit"].btn.btn-large {
        *padding-top: 7px;
        *padding-bottom: 7px;
    }

    button.btn.btn-small,
    input[type="submit"].btn.btn-small {
        *padding-top: 3px;
        *padding-bottom: 3px;
    }

    button.btn.btn-mini,
    input[type="submit"].btn.btn-mini {
        *padding-top: 1px;
        *padding-bottom: 1px;
    }

.btn-group {
    position: relative;
    *margin-left: .3em;
    *zoom: 1;
}

    .btn-group:before,
    .btn-group:after {
        display: table;
        content: "";
    }

    .btn-group:after {
        clear: both;
    }

    .btn-group:first-child {
        *margin-left: 0;
    }

    .btn-group + .btn-group {
        margin-left: 5px;
    }

.btn-toolbar {
    margin-top: 9px;
    margin-bottom: 9px;
}

    .btn-toolbar .btn-group {
        display: inline-block;
        *display: inline;
        /* IE7 inline-block hack */

        *zoom: 1;
    }

.btn-group > .btn {
    position: relative;
    float: left;
    margin-left: -1px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

    .btn-group > .btn:first-child {
        margin-left: 0;
        -webkit-border-bottom-left-radius: 4px;
        border-bottom-left-radius: 4px;
        -webkit-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-topleft: 4px;
    }

    .btn-group > .btn:last-child,
    .btn-group > .dropdown-toggle {
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        -moz-border-radius-bottomright: 4px;
    }

    .btn-group > .btn.large:first-child {
        margin-left: 0;
        -webkit-border-bottom-left-radius: 6px;
        border-bottom-left-radius: 6px;
        -webkit-border-top-left-radius: 6px;
        border-top-left-radius: 6px;
        -moz-border-radius-bottomleft: 6px;
        -moz-border-radius-topleft: 6px;
    }

    .btn-group > .btn.large:last-child,
    .btn-group > .large.dropdown-toggle {
        -webkit-border-top-right-radius: 6px;
        border-top-right-radius: 6px;
        -webkit-border-bottom-right-radius: 6px;
        border-bottom-right-radius: 6px;
        -moz-border-radius-topright: 6px;
        -moz-border-radius-bottomright: 6px;
    }

    .btn-group > .btn:hover,
    .btn-group > .btn:focus,
    .btn-group > .btn:active,
    .btn-group > .btn.active {
        z-index: 2;
    }

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    outline: 0;
}

.btn-group > .dropdown-toggle {
    *padding-top: 4px;
    padding-right: 8px;
    *padding-bottom: 4px;
    padding-left: 8px;
    -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-group > .btn-mini.dropdown-toggle {
    padding-right: 5px;
    padding-left: 5px;
}

.btn-group > .btn-small.dropdown-toggle {
    *padding-top: 4px;
    *padding-bottom: 4px;
}

.btn-group > .btn-large.dropdown-toggle {
    padding-right: 12px;
    padding-left: 12px;
}

.btn-group.open .dropdown-toggle {
    background-image: none;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-group.open .btn.dropdown-toggle {
    background-color: #e6e6e6;
}

.btn-group.open .btn-primary.dropdown-toggle {
    background-color: #0055cc;
}

.btn-group.open .btn-warning.dropdown-toggle {
    background-color: #f89406;
}

.btn-group.open .btn-danger.dropdown-toggle {
    background-color: #bd362f;
}

.btn-group.open .btn-success.dropdown-toggle {
    background-color: #51a351;
}

.btn-group.open .btn-info.dropdown-toggle {
    background-color: #2f96b4;
}

.btn-group.open .btn-inverse.dropdown-toggle {
    background-color: #222222;
}

.btn .caret {
    margin-top: 7px;
    margin-left: 0;
}

.btn:hover .caret,
.open.btn-group .caret {
    opacity: 1;
    filter: alpha(opacity=100);
}

.btn-mini .caret {
    margin-top: 5px;
}

.btn-small .caret {
    margin-top: 6px;
}

.btn-large .caret {
    margin-top: 6px;
    border-top-width: 5px;
    border-right-width: 5px;
    border-left-width: 5px;
}

table {
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
}

.table {
    width: 100%;
    margin-bottom: 18px;
}

    .table th,
    .table td {
        padding: 8px;
        line-height: 18px;
        text-align: left;
        vertical-align: top;
        border-top: 1px solid #dddddd;
    }

    .table th {
        font-weight: bold;
    }

    .table thead th {
        vertical-align: bottom;
    }

    .table caption + thead tr:first-child th,
    .table caption + thead tr:first-child td,
    .table colgroup + thead tr:first-child th,
    .table colgroup + thead tr:first-child td,
    .table thead:first-child tr:first-child th,
    .table thead:first-child tr:first-child td {
        border-top: 0;
    }

    .table tbody + tbody {
        border-top: 2px solid #dddddd;
    }

.table-condensed th,
.table-condensed td {
    padding: 4px 5px;
}

.table-bordered {
    border: 1px solid #dddddd;
    border-collapse: separate;
    *border-collapse: collapsed;
    border-left: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .table-bordered th,
    .table-bordered td {
        border-left: 1px solid #dddddd;
    }

    .table-bordered caption + thead tr:first-child th,
    .table-bordered caption + tbody tr:first-child th,
    .table-bordered caption + tbody tr:first-child td,
    .table-bordered colgroup + thead tr:first-child th,
    .table-bordered colgroup + tbody tr:first-child th,
    .table-bordered colgroup + tbody tr:first-child td,
    .table-bordered thead:first-child tr:first-child th,
    .table-bordered tbody:first-child tr:first-child th,
    .table-bordered tbody:first-child tr:first-child td {
        border-top: 0;
    }

        .table-bordered thead:first-child tr:first-child th:first-child,
        .table-bordered tbody:first-child tr:first-child td:first-child {
            -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
            -moz-border-radius-topleft: 4px;
        }

        .table-bordered thead:first-child tr:first-child th:last-child,
        .table-bordered tbody:first-child tr:first-child td:last-child {
            -webkit-border-top-right-radius: 4px;
            border-top-right-radius: 4px;
            -moz-border-radius-topright: 4px;
        }

    .table-bordered thead:last-child tr:last-child th:first-child,
    .table-bordered tbody:last-child tr:last-child td:first-child {
        -webkit-border-radius: 0 0 0 4px;
        -moz-border-radius: 0 0 0 4px;
        border-radius: 0 0 0 4px;
        -webkit-border-bottom-left-radius: 4px;
        border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
    }

    .table-bordered thead:last-child tr:last-child th:last-child,
    .table-bordered tbody:last-child tr:last-child td:last-child {
        -webkit-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
    }

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
    background-color: #f9f9f9;
}

.table tbody tr:hover td,
.table tbody tr:hover th {
    background-color: #f5f5f5;
}

table .span1 {
    float: none;
    width: 44px;
    margin-left: 0;
}

table .span2 {
    float: none;
    width: 124px;
    margin-left: 0;
}

table .span3 {
    float: none;
    width: 204px;
    margin-left: 0;
}

table .span4 {
    float: none;
    width: 284px;
    margin-left: 0;
}

table .span5 {
    float: none;
    width: 364px;
    margin-left: 0;
}

table .span6 {
    float: none;
    width: 444px;
    margin-left: 0;
}

table .span7 {
    float: none;
    width: 524px;
    margin-left: 0;
}

table .span8 {
    float: none;
    width: 604px;
    margin-left: 0;
}

table .span9 {
    float: none;
    width: 684px;
    margin-left: 0;
}

table .span10 {
    float: none;
    width: 764px;
    margin-left: 0;
}

table .span11 {
    float: none;
    width: 844px;
    margin-left: 0;
}

table .span12 {
    float: none;
    width: 924px;
    margin-left: 0;
}

table .span13 {
    float: none;
    width: 1004px;
    margin-left: 0;
}

table .span14 {
    float: none;
    width: 1084px;
    margin-left: 0;
}

table .span15 {
    float: none;
    width: 1164px;
    margin-left: 0;
}

table .span16 {
    float: none;
    width: 1244px;
    margin-left: 0;
}

table .span17 {
    float: none;
    width: 1324px;
    margin-left: 0;
}

table .span18 {
    float: none;
    width: 1404px;
    margin-left: 0;
}

table .span19 {
    float: none;
    width: 1484px;
    margin-left: 0;
}

table .span20 {
    float: none;
    width: 1564px;
    margin-left: 0;
}

table .span21 {
    float: none;
    width: 1644px;
    margin-left: 0;
}

table .span22 {
    float: none;
    width: 1724px;
    margin-left: 0;
}

table .span23 {
    float: none;
    width: 1804px;
    margin-left: 0;
}

table .span24 {
    float: none;
    width: 1884px;
    margin-left: 0;
}

.gui_rep .report_list .rightalign {
    text-align: right;
}

.checklist1 table tr td {
    padding-right: 30px;
}


/* =========================================== CURRICULUM =========================================== */
.nomaginright {
    margin-right: 0 !important;
}

.w920 {
    width: 920px !important;
}

.gui_curri .list {
    width: 920px;
    margin: 20px auto;
}

    .gui_curri .list h3 {
        color: #0066cc;
        font-weight: bold;
        font-size: 21px;
    }

    .gui_curri .list li {
        background: url('../TheImages/Curriculum/bg_item.png') no-repeat;
        float: left;
        width: 449px;
        min-height: 80px;
        margin: 0 20px 10px 0;
    }

        .gui_curri .list li img {
            float: left;
            margin: 10px 10px 0 10px;
        }

        .gui_curri .list li .icontent {
            float: left;
            width: 364px;
            margin: 10px 0 0 3px;
        }

        .gui_curri .list li p {
            line-height: 20px;
        }

.gui_curri .img_emmaanddog {
    float: right;
    margin: -296px 85px 0 0;
}

.gui_curri .listpdf {
    margin: 20px 0 20px 25px;
    width: 870px;
}

.gui_curri h1 {
    font-size: 32px;
    color: #0066cc;
}

.gui_curri .listpdf .borderwrapp {
    display: block;
    border: solid #ddd 1px;
    border-radius: 5px;
    padding: 5px 10px;
    width: 400px;
}

.gui_curri .listpdf ul li {
    margin-bottom: 30px;
    font-size: 20px;
    clear: both;
}

.gui_curri .listpdf ul a {
    font-size: 20px;
    line-height: 20px;
    color: #666666;
}

.gui_curri .listpdf ul li .spanleft {
    color: #444;
    width: 295px;
    display: block;
    float: left;
    font-size: 19px;
}

.gui_curri .listpdf ul li .spanarrow {
    font-size: 20px;
    width: 30px;
    display: block;
    float: left;
}

.gui_curri .back {
    margin: 5px 0 10px 0;
}

    .gui_curri .back a {
        margin: 5px 0 10px 0;
        font-size: 21px;
        color: #333;
        font-weight: bold;
    }

.gui_curri .listpdf ul li ul {
    margin-top: 10px;
}

    .gui_curri .listpdf ul li ul li {
        margin-bottom: 0;
    }

    .gui_curri .listpdf ul li ul a {
        font-size: 17px;
        line-height: 25px;
    }
/* ----------------- Sub Page ----------------- */
.gui_curri .lessonitem {
    float: left;
    margin: 20px 0 0 0;
}

    .gui_curri .lessonitem .right {
        float: left;
        width: 800px;
    }

    .gui_curri .lessonitem p {
        font-size: 18px;
        line-height: 30px;
    }

    .gui_curri .lessonitem a {
        font-size: 18px;
        text-decoration: underline;
        line-height: 30px;
    }

.anounder a {
    text-decoration: none !important;
}
/* ----------------- Sub Sub Page ----------------- */
.gui_curri .listpdfsub {
    margin: 20px 0 20px 250px;
    width: 600px;
}

    .gui_curri .listpdfsub ul li {
        margin-bottom: 0;
    }

    .gui_curri .listpdfsub ul a {
        font-size: 18px;
        line-height: 35px;
    }

    .gui_curri .listpdfsub h1 {
        margin-bottom: 20px;
        line-height: 35px;
    }

.sepline {
    border-bottom: solid 3px black;
}

.treeNode {
    font-family: "Trebuchet MS";
    font-size: 14px;
    color: #000000;
}

.rootNode {
    display: block;
    line-height: 18px;
    color: #333;
    margin-bottom: 10px;
}

.leafNode {
    font-family: "Trebuchet MS";
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    margin: 0;
    padding: 0;
    line-height: 18px;
}

.selectNode {
    background-color: Black;
    color: White;
    border-radius: 5px;
}

.colorff:hover {
    color: #fff;
}

.divGroup {
    background: #17365D;
    color: #fff;
    text-align: center;
    font-size: 18px;
    padding: 5px 0;
    clear: both;
    margin: 0 0 10px 0;
}

/* =========================================== NEW VERSION 3.0 =========================================== */

/* ----------------- Pre-Assessment Page ----------------- */
.tblpreasstitle {
    color: #666;
    font-weight: bold;
    font-size: 15px;
}

.tblpreass {
    margin-top: 10px;
}

    .tblpreass th {
        color: #666;
        font-weight: bold;
        font-size: 15px;
        border: 0;
        border-bottom: solid 2px #707070;
        text-align: center;
        line-height: 22px;
    }

    .tblpreass .thleft {
        text-align: left !important;
        width: 40% !important;
    }

    .tblpreass .tr1 {
        background: #ffffff;
    }

    .tblpreass td {
        border: 0;
        padding: 5px 0 5px 5px;
    }

    .tblpreass .radio {
        float: none;
        margin: 0 auto;
    }

.tblpreasstotal {
    border: solid 2px #707070;
    float: right;
    margin: 20px 36px 10px 0;
}

    .tblpreasstotal td {
        border: solid 2px #707070;
        text-align: center;
        padding: 5px 0 5px 5px;
        width: 99px;
    }

.preassbtn {
    float: left;
    margin: 20px 20px 20px 20px;
    width: 100%;
    text-align: center;
}

.pvgrouplesson {
    width: 580PX;
    float: right;
}

.help-text {
    color: #666666;
    font-size: 13px;
}

input:disabled, textarea:disabled {
    color: rgb(84, 84, 84);
    background-color: rgba(0,0,0,0.05);
}

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 19px;
    height: 20px;
    padding: 0px;
    background: url(../TheImages/icon_checkbox.png) repeat scroll 0 -2px transparent;
    display: block;
    clear: left;
    float: left;
}

    input[type=checkbox]:focus {
        outline: none !important;
    }

    input[type=checkbox]:checked {
        background-position: 0px -51px !important;
    }


.audioTags {
    z-index: 100;
    pointer-events: none;
}