/**
 * Basis stylesheet
 *
 * prefix: "leo_"
 *
 * remarks: normalize.css doet de "reset"
 */

/* generic */
@font-face {
    font-family: 'leo_head_font';
    src: url('/assets/fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype');
    src: url('/assets/fonts/Montserrat-Regular.woff') format('woff'), url('/assets/fonts/Montserrat-Regular.ttf') format('truetype'), url('/assets/fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'leo_body_font';
    src: url('/assets/fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype');
    src: url('/assets/fonts/Montserrat-Regular.woff') format('woff'), url('/assets/fonts/Montserrat-Regular.ttf') format('truetype'), url('/assets/fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    font-family: 'leo_body_font';
    font-size: 1rem;
    color: #000;
}

body {
    background-color: #CCCCCC;

}

a {
    color: #000;
    text-decoration: none;
}

h1 {
    font: 2rem 'leo_head_font';
    color: #333333;
    margin: 0px;


}

h2 {
    font: 1.5rem 'leo_head_font';
    color: #333333;

}

h3 {
    font: 1rem 'leo_head_font';
    color: #333333;
}


/* containers */
#leo_site_wrapper {
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    max-width: 980px;
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;

}

#leo_site_header {
    float: left;
    width: 100%;
    max-width: 980px;

    height:163px;

    background-color: #000;
    display: block;


}

#leo_content_wrapper {
    float:left;
    height:calc(100vh - 4rem - 183px);
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #FFFFFF;
    display: block;
    overflow: auto;

}
h1.leo_lesson_title
{
    width: calc(100% - 2rem);
    margin-left:1rem;
    margin-right:1rem;
    color:#000000;
}

.leo_content {
    float: left;
    width: calc(100% - 2rem);
    margin-left:1rem;
    margin-right:1rem;
    display: block;
}

#leo_site_footer {
    float: left;

    width: calc(100% - 1rem);
    max-width: calc(980px - 1rem);

    height: 3rem;
    padding:0.5rem;
    background-color: #000;
    overflow: hidden;
    display: block;
}

/* homepage */
#leo_home_intro {
    width: 100%;
    font-weight: bold;
}

#leo_home_lesson_links {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

a.leo_home_lesson_link::before {
    font-weight: bold;
    content: "> ";
}

a.leo_home_lesson_link {

}

a.leo_button {
    float: left;
    display: block;
    line-height: 3rem;
    font-weight: bold;
    height: 3rem;
    padding-left:0.5rem;
    padding-right:0.5rem;
    background-color: #cccccc;
    border-radius: 10px;
    text-transform: uppercase;
}



.leo_embed_yt_container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.leo_embed_yt_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.leo_embed_vimeo_container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.leo_embed_vimeo_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}


#leo_quiz1_content
{
    float:left;
    width:calc(100% - 2rem);
    border-radius:10px;
    padding:1rem;
    background-color: #fff;
}

#leo_quiz1_question
{
    display:block;
    float:left;
    border-radius:10px;
    border-color: #eee;
    border: 2px solid;
    width:90%;
    margin:0.5rem;
    padding:0.5rem;
    background-color: #eee;
    min-height:4rem;
}


.leo_quiz1_answer_wrapper
{
    display:block;
    float:left;
    border-radius:10px;
    border-color: #0a6aa1;
    border: 2px solid;
    width:90%;
    margin:0.5rem;
    padding:0.5rem;

}


.leo_quiz1_answer_wrapper:hover
{
    background-color: #0a6aa1;
}

.leo_quiz1_answer_letter
{
    float:left;
    width:3rem;
    font-weight: bold;
    line-height: 3rem;
    font-size: 3rem;
    font-family: leo_head_font;
}

.leo_quiz1_answer
{
    float:right;
    width:calc(100% - 4rem);
}

img.leo_full
{

    float:left;
    margin-top:0.5rem;
    margin-bottom:0.5rem;
    width: 100%;
}

img.leo_left
{
    float:left;
    margin:0.5rem;;
    width: 50%;
}

img.leo_right {
    float: right;
    margin: 0.5rem;;
    width: 50%;
}


img.leo_right_33 {
    float: right;
    margin: 0.5rem;;
    width: 33%;
}

img.leo_right_50 {
    float: right;
    margin: 0.5rem;;
    width: 50%;
}


img.leo_left_33 {
    float: left;
    margin: 0.5rem;;
    width: 33%;
}

img.leo_left_50 {
    float: left;
    margin: 0.5rem;;
    width: 50%;
}

.leo_question_set_wrapper
{
    line-height: 150%;
}

.leo_question_set_50 {
    width: calc(50% - 1rem);
}

.leo_question_set_67 {
    width: calc(67% - 1rem);
}

@media screen and (max-width: 676px) {
    img.leo_left,
    img.leo_right,
    img.leo_right_33,
    img.leo_right_50 {
        margin: 0rem;
        float: left;
        width: 100%;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .leo_question_set_50,
    .leo_question_set_67 {
        width: 100%;
    }

    #leo_content_wrapper
    {
        height: auto;
    }

    #leo_site_header
    {
        height:auto;
    }


}


/**
 * Wordfind
 */


#leo_wordfinder1_puzzle {
    border: 1px solid black;

    float: left;

    /*max-width: 480px;*/

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;


}

#leo_wordfinder1_puzzle div {

    width: 100%;
    margin: 0 auto;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* style for each square in the puzzle */
#leo_wordfinder1_puzzle .puzzleSquare {
    height: 1.8rem;
    width: 1.8rem;
    text-transform: uppercase;
    background-color: #ffffff;
    color:#000000;
    border: 0;
    font: 1em sans-serif;
    line-height: 1.8rem;
    margin-bottom:0px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

button::-moz-focus-inner {
    border: 0;
}

/* indicates when a square has been selected */
#leo_wordfinder1_puzzle .selected {
    background-color: orange;
}

/* indicates that the square is part of a word that has been found */
#leo_wordfinder1_puzzle .found {
    background-color: blue;
    color: white;
}

#leo_wordfinder1_puzzle .solved {
    background-color: purple;
    color: white;
}

/* indicates that all words have been found */
#leo_wordfinder1_puzzle .complete {
    background-color: green;
}

/**
* Styles for the word list
*/
#leo_wordfinder1_words {
    float:left;
    max-width:400px;
    width:100%;
}

#leo_wordfinder1_words ul {
    list-style-type: none;
    padding-left:1rem;
}

#leo_wordfinder1_words li {
    padding: 3px 0;
    font-size: 1rem;

}

/* indicates that the word has been found */
#leo_wordfinder1_words .wordFound {
    text-decoration: line-through;
    color: gray;
    display:list-item;
}






/**
 * virtual keyboards van het endword, lingo etc
 */

ul.leo_virtualkeyboard {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;

}

ul.leo_virtualkeyboard li {
    float: left;
    margin: 0 0.3rem 0.3rem 0;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    background: #fff;
    border: 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ul.leo_virtualkeyboard li.empty {
    background-color: #eeeeee;
    width: 0.5rem;
}

ul.leo_virtualkeyboard li:hover, ul.leo_virtualkeyboard li.active {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    cursor: pointer;
    background-color: red;
}


.leo_virtualkeyboard_wrapper {

    width:100%;
    text-align: center;
    float: left;
    background-color: #eeeeee;

    background-color: #eeeeee;
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}


/**
 * endword
 */

#leo_endword_pogingen_intro
{
    float:left;
    width:calc(100% - 2rem);
    margin:0.5rem;
    padding:0.5rem;

}


/* eind puzzle */
.leo_endword_goede_letters_intro {
    float: left;
    margin-top: 0.2rem;
    margin-left: 0.5rem;
}

.leo_endword_goede_letters {
    font-weight: bold;
    font-size: 1.2rem;
    display: inline-block;
    float: left;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

#leo_endword_letters {
    float: left;
    width: 100%;
}

.leo_endword_letter {
    float: left;
    border: 0.05rem solid #AAAAAA;
    width: 2rem;
    height: 2rem;
    margin: 0.1rem;
    text-align: center;
    line-height: 2rem;
    background-color: #fff;
    color: #000;
    cursor: pointer;
}

.leo_endword_space {
    border-color: transparent;
    background-color: transparent;
}

.leo_endword_letter_ok_wrong_pos {
    background-color: #C9C9C9;
    color: #fff;
    font-weight: bold;
}

.leo_endword_letter_ok {
    background-color: #00A54F;
    border: 0.05rem solid #00A54F;
    color: #fff;
    font-weight: bold;
}

.leo_endword_active {
    border-color: #000000;
    background-color: #ccc;
}

.leo_endword_active{
    color: #000;

    animation: leo_endword_active_blinking 1s infinite;
}
@keyframes leo_endword_active_blinking{
    0%		{ background-color: #fff;}
    50%		{  background-color: #ccc;}
    100%		{  background-color: #ccc;}

}

#leo_endword_puzzle_feedback {
    float: left;
    width: calc(100% - 2rem);
    margin:1rem;
    color: #00c6e0;

    font-size: 1rem;
}

#leo_endword_goede_letters_verkeerde_plek {
    float:left;
    width:calc(100% - 2rem);
    margin:0.5rem;
    padding:0.5rem;
    font-size: 1rem;

    background-color: #00A54F;
}



#leo_endword_quiz-done-eindwoord {
    margin-top: 2rem;
}








/* lingo */
.leo_lingo_letter_row
{
    float:left;
    width:100%;
}

.leo_lingo_letter_wrapper
{
    float:left;
    width:3rem;
    height:3rem;
    margin-right:0.1rem;
    margin-bottom:0.1rem;

    background-color: #0b3e6f;
    border: #000 1px solid;


}
.leo_lingo_letter
{
    float:left;
    width:100%;
    height:100%;
    line-height: 3rem;
    text-align: center;
    color:#fff;
    font-weight: bold;
}
.leo_lingo_letter_correct
{
    background-color: red;
}

.leo_lingo_letter_wrong_pos
{
    background-color: lightseagreen;
    border-radius: 1.5rem;
}

.leo_lingo_letter_active{
    color: #000;

    animation: leo_lingo_letter_active_blinking 1s infinite;
}
@keyframes leo_lingo_letter_active_blinking{
    0%		{ background-color: #fff;}
    50%		{  background-color: #ccc;}
    100%		{  background-color: #ccc;}

}


.leo_question_textarea
{
    width:90%;
    height:5rem;
}

.leo_question_textinput
{
    width:90%;
}
.leo_question_question
{
  font-weight: bold;
}

.waarom_label
{
    font-weight: bold;
}

.leo_error
{
    float:left;
    width:80%;
    padding:0.5rem;
    clear:both;
    background-color: orange;
    color:white;
    font-weight: bold;

}

#leo_access_code_form
{
    margin-top:10px;
    margin-bottom:10px;
}

.leo_access_code
{

    width:100px;
    border-radius: 4px;
    border: solid 4px #00A6E4;
    font-size:1rem;
    padding: 0.2rem;
    text-align: center;

}

#leo_name_form_container
{
    float:left;
    width:40%;
}

.leo_name_form_textinput
{
    width:90%;
}