/* ------------------------------------------------------------------------------------------------------------------ 
    Copyright (C) 2018 by William Paul Liggett (junktext@junktext.com)
    This Source Code Form is subject to the terms of the Mozilla Public License (MPL), v. 2.0.
    If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
------------------------------------------------------------------------------------------------------------------ */

@font-face {
    /* TeX Gyre Adventor can be used as a replacement for ITC Avant Garde Gothic
       The ITC font was designed by Herb Lubalin and Tom Carnase in 1970. */
    font-family: TeX_Gyre_Adventor_Bold;
    src: url("../media/fonts/qag2.003otf/texgyreadventor-bold.otf");
}

.center {
    text-align: center;
}

h1 {
    font-size: 20pt;
    text-align: center;
}

h2 {
    font-size: 16pt;
    text-align: center;
    text-decoration: underline;
    margin-top: 2rem;
}

#vigilance_display_banner_text {
    font-size: 16pt;
    text-align: center;
    display: block;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

#login_welcome_msg {
    width: 80%;
    display: block;
    margin: auto;
    text-align: justify;
}

#StartTestButton {
    margin: auto;
    display: block;
}

#nature_video_div {
    text-align: center;
}

#vigilance_display_extra_text {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    text-align: center;
}

/* Background image container to have the random letter to be centered vertically. */
.container {
    position: relative;
}

#background-smaller-circles {
    margin: auto;
    display: block;
    z-index: -1; /* Causes the image to go beneath the random O, D, and backwards D letters. */
}

.letter_o, .letter_d {
    /* Ensures that the backwards D and the regular O and D characters are using the same scaling. */
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
}

.letter_o {
    display: inline; /* Either: none or inline */
}

.letter_d {
    display: inline; /* Either: none or inline */
}

.letter_backwards_d {
    /* Technique by: Duopixel (2015) [https://stackoverflow.com/a/5409373/5513567] */
    /* And by: enigment (2016) [inline-block fix] */
    /* License: CC By-SA 3.0 [https://creativecommons.org/licenses/by-sa/3.0/] */
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    display: inline-block; /* Either: none or inline-block */
}

.random_letter {
    font-family: TeX_Gyre_Adventor_Bold;
    font-size: 38pt; /* The older academic paper used 24pt Avant Garde, but they said it resulted in 8x6mm dimensions. So, this 38pt font that replaces Avant Garde has these same dimensions on a 1360x768 resolution. */
    position: absolute;
    left: 0;
    top: 40%; /* Not using 50% as specified by the W3C, since it doesn't result in the exact vertical center for some reason. [https://www.w3.org/Style/Examples/007/center.en.html#text] */
    width: 100%;
    text-align: center;
    transform: translate(0, -50%); /* As recommended by the W3C for centering vertically. [https://www.w3.org/Style/Examples/007/center.en.html#text] */
    
    /* WebAIM Color Contrast Tool (https://webaim.org/resources/contrastchecker/): I believe the color RGB: 214, 214, 214 (#d6d6d6)
       [lighter gray] might be the 45% (hard) ratio as mentioned in the academic paper dated for Summer 2000.
       For reference, the color RGB: 205, 205, 205 (#cdcdcd) [darker gray] might be the 59% (easy) ratio.*/
    color: #d6d6d6; 
}

/* Used to add or remove this hidden class to hide or show the random letters. */
.hidden {
    display: none;
}

/* Test Conditon #4: Break Reminder Pop-Up Image */
#break_reminder_popup_image {
    position: absolute;
    top: 200px;
    left: 500px;
}

/* For styles affecting a <form>. */
form#UserLogin label,
form#AdminLogin label {
    width: 5rem;
    margin-right: 1.5rem;
    margin-bottom: 0.2rem;
    float: left;
    display: inline-block;
}

form#UserLogin input[type = "text"], input[type = "password"],
form#AdminLogin input[type = "text"], input[type = "password"] {
    width: 8rem;
    margin-bottom: 0.2rem;
    display: inline-block;
}

form#UserLogin input[type = "submit"],
form#AdminLogin input[type = "submit"] {
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: inherit;
}

div#scheduled_tests_buttons {
    margin-top: 1.5rem;
    display: block;
    text-align: center;
}

input[type = "button"] {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.error_msg {
    text-align: center;
    color: red;
}

form[name = "UserLogin"],
form[name = "AdminLogin"] {
    margin: auto;
    display: block;
    width: 16rem;
}

table {
    border-collapse: collapse;
    margin: auto;
}

tr:nth-child(even) {
    background-color: #cfe2f3; /* Light blue. */
}

th {
    padding-left: 2rem;
    padding-right: 2rem;
}

td {
    border: solid 1pt black;
    text-align: center;
}

/* The participant's "Sign Out" button */
#user_sign_out_button {
    margin: 3rem auto 1rem auto;
    display: block;
}

/* --- START of jQuery UI: Pop-up Dialog Boxes --- */
div#dialog_form_add_test label, div#dialog_form_add_test input,
div#dialog_form_edit_test label, div#dialog_form_edit_test input,
div#dialog_form_remove_test label, div#dialog_form_remove_test input {
    display: block;
}

div#dialog_form_add_test input.text,
div#dialog_form_edit_test input.text,
div#dialog_form_remove_test input.text {
    margin-bottom: 12px;
    width: 95%;
    padding: 0.4em;
}

div#dialog_form_add_test fieldset,
div#dialog_form_edit_test fieldset,
div#dialog_form_remove_test fieldset {
    padding: 0; 
    border: 0; 
    margin-top: 25px;
}

div#dialog_form_add_test h1,
div#dialog_form_edit_test h1,
div#dialog_form_remove_test h1 {
    font-size: 1.2em; 
    margin: 0.6em 0;
}

.ui-dialog .ui-state-error { 
    padding: 0.3em; 
}

.validateTips { 
    border: 1px solid transparent; 
    padding: 0.3em; 
}

form#AddTest input[disabled = "disabled"], 
form#EditTest input[disabled = "disabled"],
form#RemoveTest input[disabled = "disabled"] {
    background-color: #dedede; /* Gray */
}
/* --- END of jQuery UI: Pop-up Dialog Boxes --- */