﻿/*Body (has gradient background*/
#body {
    position: relative;
    padding-top: 0px;
}

/*Invelope (white block inside gradient*/
#invelope {
    position: relative;
    margin: 0px;
    padding: 10px 0px 0px 0px;
    text-align: left;
}

/*Header*/
#header {
    position: relative;
    padding: 10px 0px 5px 5px;
}



/*Big form*/
FORM.bigform {
    margin: 0px;
    padding: 0px;
    font-size: 14px;
}

FORM.framedform {
    padding: 10px;
    /*border: 2px solid #FFB944;*/
}

FORM.bigform H1 {
    color: #1E3665;
    font-weight: normal;
    margin: 0px 0px 0.25em 0px;
    font-size: 150%;
}

/*FORM.bigform H2 {
    color: #1E3665;
    font-weight: normal;
    margin: 20px 0px 10px 0px;
    font-size: 120%;
    padding-bottom: 5px;
    border-bottom: 1px dotted;
}
*/
FORM.bigform DIV.form_introduction {
    margin-bottom: 20px;
    font-style: italic;
}

FORM.bigform DIV.introduction {
    margin-bottom: 20px;
    font-style: italic;
}

FORM.bigform DIV.hint {
    margin-left: 200px;
    text-align: right;
    font-style: italic;
    font-size: 80%;
    color: #696969;
    margin-top: -5px;
    margin-bottom: 10px;
}

FORM.bigform DIV.formline {
    position: relative;
    padding-left: 200px;
    margin-bottom: 10px;
    text-align: right;
}

FORM.bigform SPAN.caption {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    text-align: left;
}

FORM.bigform DIV.noninput {
    width: 95%;
    border: 0px inset;
    padding: 5px;
    font-size: 90%;
    background-color: #FFF8DC;
    text-align: left;
    font-style: italic;
}

FORM.bigform INPUT.textbox {
    width: 95%;
    border: 1px inset;
    padding: 5px;
    font-size: 90%;
    background-color: #FFF8DC;
}

FORM.bigform TEXTAREA.textbox {
    width: 95%;
    border: 1px inset;
    padding: 5px;
    font-size: 90%;
    background-color: #FFF8DC;
}

FORM.bigform INPUT.button {
    border: 1px outset;
    padding: 2px 5px;
}

FORM.bigform DIV.submitline {
    position: relative;
    margin-bottom: 10px;
    text-align: right;
}

    FORM.bigform DIV.submitline A {
        margin-right: 10px;
        color: #696969;
    }

FORM.bigform DIV.result {
    margin-top: 30px;
    margin-bottom: 25px;
    margin-left: 30px;
    padding-left: 30px;
    font-style: italic;
    position: relative;
}

    FORM.bigform DIV.result IMG {
        position: absolute;
        top: -5px;
        left: 0px;
    }

FORM.bigform DIV.error_goback {
    margin-bottom: 10px;
    margin-left: 60px;
}

FORM.bigform DIV.backlink {
    margin-bottom: 100px;
    margin-left: 60px;
}

FORM.bigform DIV.pozor {
    background-color: #E2E2E2;
    margin: 0px -10px;
    padding: 10px 10px 1px 10px;
    font-size: 80%;
}

FORM.bigform DIV.pozor_item {
    position: relative;
    margin-bottom: 10px;
    padding-left: 40px;
}

    FORM.bigform DIV.pozor_item IMG {
        position: absolute;
        left: 5px;
        top: 0px;
    }

FORM.bigform DIV.pozor_title {
    font-weight: bold;
    margin-bottom: 3px;
    color: #454545;
}

FORM.bigform DIV.checkboxline {
    position: relative;
    margin-bottom: 12px;
    text-align: left;
}

div.framedform {
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #FFB944;
}

div.highlighted {
    padding: 10px;
    margin: 10px -10px 20px -10px;
    background-color: #EEEEEE;
}


/*Big arrow*/
.bigarrow {
    background-image: url(/Nabytek/arrow-yellow.gif);
    background-position: right;
    background-repeat: no-repeat;
    height: 38px;
    padding-top: 19px;
    margin-top: 30px;
    text-align: right;
    padding-right: 50px;
    margin-right: -8px;
}

    .bigarrow A.click {
        display: block;
        font-size: 120%;
        color: #696969;
        font-weight: bold;
    }

.green {
    background-image: url(/Nabytek/arrow-green.gif);
    background-position: right;
    background-repeat: no-repeat;
    height: 38px;
    padding-top: 19px;
    margin-top: 30px;
    text-align: right;
    padding-right: 50px;
    margin-right: -8px;
}

    .green A.click {
        display: block;
        font-size: 120%;
        text-decoration: none;
        color: #000000;
        font-weight: bold;
    }

        .green A.click:hover {
            color: #696969;
            font-weight: bold;
            text-decoration: underline;
        }


/*Images on the test pages*/
FORM.framedform IMG {
    float: right;
}

FORM.bigform H1 {
    margin: 0px 0px 1.5em 0px;
}


/*Test styles*/
div#pagecount {
    float: right;
    margin-top: 0px;
    margin-left: 10px;
    color: #359bd7;
}

div.questionblock {
    margin: 22px 0px 0px 0px;
    /*font-family: "Trebuchet MS";*/
}

    div.questionblock H1 {
        font-size: 0.9em;
        margin: 6px 10px 4px 10px;
        color: #359bd7;
        border-bottom: solid 1px #359bd7;
    }

    div.questionblock H2 {
        font-size: 0.9em;
        margin: 6px 10px 4px 10px;
        color: #f79a2f!important;
        border-bottom: solid 1px #f79a2f;
    }


    div.questionblock div.question {
        font-size: 1.1em;
        font-weight: bold;
        color: #000;
        margin-top: 16px;
        margin-left: 10px;
    }

        div.questionblock div.question div.options {
            font-size: 0.95em;
            font-weight: normal;
            color: #000000;
            margin-top: 6px;
            margin-left: 40px;
            line-height: 1.4em;
        }

        div.questionblock div.question div.options label {
            padding-left: 6px;
        }


FORM.bigform div.buttons {
    margin: 20px 0px 0px 0px;
}

/*Statistics and score*/
DIV#teststats {
    padding-bottom: 0px;
    margin-top: 30px;
/*    margin-bottom: 10px;
    padding: 0px 10px 0px 10px;
    border: 2px solid #FFB944;
*/
    max-width: 1200px;
    margin-bottom: 1rem;
    padding: 1rem;
    border: .0625rem solid #6eb33f;
    border-radius: .3125rem;
    background-color: rgba(110, 179, 63, .05);
}

    DIV#teststats DIV.formline {
        position: relative;
        padding-left: 210px;
        margin-bottom: 10px;
        text-align: right;
    }

    DIV#teststats SPAN.caption {
        position: absolute;
        top: 4px;
        left: 10px;
        width: 210px;
        text-align: left;
    }

    DIV#teststats DIV.noninput {
        width: 95%;
        border: none;
        padding: 5px;
        font-size: 100%;
        text-align: left;
        margin-left: .5rem;
        font-weight: 700;
        background-color: transparent;
        font-style: normal;
    }

    DIV#teststats H2 {
        color: #000;
        font-weight: normal;
        margin: 10px 0px 16px 0px;
        padding-bottom: 5px;
        text-align: center;
/*        font-family: "Open Sans", sans-serif;
*/        font-size: 1.25rem;
        border-bottom: none;
    }

    DIV#teststats DIV.scoremeter {
        text-align: center;
        margin-bottom: 10px;
    }

    DIV#teststats IMG {
        float: none;
    }


/*Results styles*/
div.testresults {
    margin: 22px 0px 0px 0px;
}

    div.testresults H1 {
        font-size: 0.9em;
        margin: 6px 10px 4px 10px;
        color: #6F98CC;
        border-bottom: solid 1px #6F98CC;
    }

    div.testresults div.question {
        font-size: 1.0em;
        font-weight: bold;
        color: #000000;
        padding: 5px;
    }

        div.testresults div.question div.options {
            font-size: 0.95em;
            font-weight: normal;
            color: #000000;
            margin-top: 6px;
            margin-left: 60px;
            line-height: 1.4em;
        }

            div.testresults div.question div.options li.neutral {
                font-weight: normal;
                color: #000000;
            }

            div.testresults div.question div.options li.answer {
                font-weight: bold;
                color: #009900;
            }

            div.testresults div.question div.options li.right {
                font-weight: bold;
                color: #009900;
            }

            div.testresults div.question div.options li.wrong {
                font-weight: normal;
                color: #CC0000;
                text-decoration: line-through;
            }

        div.testresults div.question span.qgroup {
            color: #666666;
            font-weight: normal;
        }

    div.testresults div.rightFalse {
        background-color: #FFE2D7;
    }

div#eolas .roghanna {
    margin-top: 28px;
    margin-bottom: 7px;
    border-top: 1px solid #10509E;
    background-color: #E5EEFD;
    padding: 2px 5px;
    color: #0F315A; /*font-weight: bold;*/
    min-height: 120px;
}

div#eolas .rogha {
    margin: 0px;
    font-size: 1.2em;
    color: #10509E;
    font-weight: bold;
}

div#eolas .mode {
    margin-bottom: 0px;
    text-transform: uppercase;
    color: Maroon;
    font-weight: bold;
}

div#eolas .col1 {
    width: 385px;
    float: left;
}

div#eolas .col2 {
    margin-left: 410px;
}

div#eolas TABLE {
    border-collapse: collapse;
    empty-cells: show;
    margin-bottom: 1em;
    background-color: #FFFFFF;
    border-top: 1px solid #8AAFE1;
    border-left: 1px solid #8AAFE1;
    border-right: 1px solid #8AAFE1;
}

div#eolas THEAD {
    background-color: #E5EEFD;
    font-weight: bold;
}

div#eolas TD {
    border-bottom: 1px solid #8AAFE1;
    padding: 4px 4px 4px 4px;
    vertical-align: top;
}

div#evaluation {
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 10px;
}

    div#evaluation li {
        margin-top: 22px;
        margin-left: -16px;
    }


div#blurbafter {
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    padding: 10px;
    max-width: 800px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1000px or less */
@media screen and (max-width: 1000px) {

    div#eolas .col1 {
        width: auto;
        float: left;
    }

    div#eolas .col2 {
        margin-left: 0px;
    }
}

/* for 480px or less */
@media screen and (max-width: 480px) {

    div#eolas .col1 {
        width: auto;
        float: left;
    }

    div#eolas .col2 {
        margin-left: 0px;
    }

    DIV#teststats DIV.scoremeter {
        display: none;
    }

    div#blurbafter {
        padding-bottom: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
        margin-left: 0px;
        padding: 10px;
        width: auto;
    }
}
