/*analyze_my_diet_a11y.css*/
html, body, p, h1, h2, h3, h4, h5, th, td, li, label {
font-size: 16px;
}
.visually-hidden,
[data-block_type="visually-hidden"] {
position: absolute;
border: 0;
height: 0;
width: 0;
margin: 0;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
}
html {
overflow-y: unset;
height: 100% !important;
background-color: #ddd;
}
body {
background-color: #ddd;
margin: 0;
height: 100%;
}
[data-type="chapter"].ui-corner-all {
border: 0;
border-radius: 0;
}
#manuscript {
min-width: 0;
height: 100%;
background-color: #ddd;
}
[data-type="chapter"] {
max-width: none;
margin: 0;
background-color: transparent;
/* This was causing problems in Chrome when changing the height
of the browser window */
height: 100%;
display: flex;
flex-direction: column;
}
[data-type="section"] {
max-width: none;
padding: 0 !important;
/*height: 100%;*/ /* caused early vert scroll bar*/
/*width: 100%;*/
margin: 0;
}
/*
[data-type="section"].focus {
outline: 3px dashed #000;
}
*/
[data-type="box"][data-block_type="sec_wrap"] {
border: 0;
margin-top: 0;
background-color: #ddd;
}
[data-block_type="sec_wrap"] [data-type="box_inner"] {
border: none;
padding: 1em 0 0;
margin: 0 auto;
background-color: transparent;
max-width: 640px;
}
main {
/*height: 100%;*/
flex-basis: 100%;
/*padding: 3px;*/
border: 3px solid transparent;
}
main.focus {
border: 3px dashed #000;
}
#digfir_section_0 {
padding: 0 !important;
margin: 0 !important;
}
#digfir_section_0_wrap {
padding: 0;
border: 0;
background-color: transparent;
}
#digfir_section_0_wrap > [data-type="box_inner"] {
border: none;
background-color: transparent;
}
#intro_box {
border: none;
background-color: transparent;
}
p {
line-height: 1.4;
}
p + p {
margin-top: 1em;
}
a:focus {
outline: 2px dashed #000;
}
[data-type="section"]:focus {
outline: 3px dashed #000;
}
header {
/*background-color: #00adc1;*/
background-color: #00818f;
/*display: flex;*/ /*old menu*/
flex-direction: column;
position: relative;
/*box-shadow: 3px 3px 3px 3px #aaa;*/
/*border-bottom: 2px solid #555;*/
box-shadow: 0 0 5px 3px #999;
}
header h1 {
display: block;
font-size: 1.1em;
line-height: 1.2;
text-transform: uppercase;
color: #fff;
letter-spacing: .05em;
text-align: center;
margin-bottom: 0.25em;
}
header h2 {
display: block;
font-weight: bold;
font-size: 1.2em;
letter-spacing: .05em;
text-align: center;
text-transform: uppercase;
color: #fff;
margin-bottom: 0.4em;
line-height: 1;
}
header #hidden_h3 {
font-size: 1em;
text-align: center;
display: block;
letter-spacing: .05em;
text-transform: uppercase;
font-weight: bold;
color: transparent;
opacity: 0;
}
#header_middle {
margin-bottom: 0em;
}
[data-block_type="subtitle"] {
border: none;
padding-top: 0;
margin-top: 0;
font-size: 1.3em;
margin-bottom: 0.5em;
}
#progress-wrapper {
/*width: 172px;*/ /* extra 2px for left border */
width: 100%;
height: 16px;
margin: 0 auto 0.35em auto;
padding-left: calc(2em + 10px);
padding-right: 0;
display: flex;
max-width: 250px;
padding-top: calc(0.25em + 1px);
padding-right: 0.5em;
}
#progress-wrapper .cell {
height: 100%;
border-right: 2px solid #fff;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
/*float:left;*/
flex-grow: 1;
}
#progress-wrapper .cell:first-child {
border-left: 2px solid #fff;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
#progress-wrapper .cell:last-child {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
#progress-wrapper .cell.complete {
background-color: #000;
}
[data-type="figure"][data-block_type="intro_fig"] {
display: none;
float: none;
width: auto;
}
#digfir_section_0 [data-block_type="intro_fig"] img {
max-width: none;
width: 100%;
}
#digfir_section_0 h3 {
margin-bottom: 1em;
margin-top: 1.75em;
}
[data-block_type="intro_fig"] [data-type="caption"] {
margin-left: 5px;
margin-right: 5px;
}
[data-block_type="activity_title"] p {
color: #b60000;
font-weight: bold;
font-size: 1.4em;
margin-bottom: 0.5em;
display: none;
}
/*
#step_button {
background-color: #00818f;
border: 0;
border-radius: 3px;
box-shadow: 3px 3px rgba(0,0,0,.3);
margin-top: 20px;
float: right;
}
*/
/*
.ui-button-text-icon-secondary .ui-button-text {
padding: .4em 1em;
color: #fff;
letter-spacing: 0.05em;
font-size: 1.4em;
font-weight: normal;
}
*/
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text {
padding: 0;
}
#closing_material_button_0,
#manuscript #step_button {
background-color: #00818f;
border: 0;
border-radius: 3px;
box-shadow: 3px 3px rgba(0,0,0,.3);
margin-top: 20px;
float: right;
padding: .4em 1em;
color: #fff;
letter-spacing: 0.05em;
font-size: 1.4em;
font-weight: normal;
text-transform: uppercase;
}
#manuscript #step_button[aria-disabled="true"] {
cursor: not-allowed;
background-color: #bbb;
color: #454545;
box-shadow: none;
}
#manuscript #step_button[aria-disabled="true"]:hover {
cursor: not-allowed;
background-color: #bbb;
color: #454545;
box-shadow: none;
}
#closing_material_button_0 {
margin-top: 0;
}
#closing_material_button_0:focus,
#step_button:focus {
outline: 3px dashed #000;
}
#closing_material_button_0:hover,
#manuscript #step_button:hover {
background-color: #00aabd;
}
#digfir_section_2 #step_button {
margin-top: -25px;
}
/*
[data-attr="input-grid"] input {
border: 2px solid transparent;
}
*/
[data-attr="input-grid"] td input:focus {
border: 2px dashed #000;
}
[data-attr="input-grid"] td input:focus {
background-color: #ffffb0;
/*outline: 3px dashed #000;*/
}
[data-attr="input-grid"] td input:out-of-range {
/*outline: 3px solid #CC0000;*/
outline: 5px solid #fff;
border: 2px solid #b60000;
color: #b60000;
}
[data-attr="input-grid"] tr:nth-child(2n) td input:out-of-range {
outline: 5px solid #efefef;
}
[data-attr="input-grid"] td input:out-of-range:focus {
border: 2px dashed #b60000;
}
[data-attr="input-grid"] td input:invalid {
/*outline: 3px solid #CC0000;*/
outline: 5px solid #fff;
border: 2px solid #b60000;
color: #b60000;
}
[data-attr="input-grid"] tr:nth-child(2n) td input:invalid {
outline: 5px solid #efefef;
}
[data-attr="input-grid"] td input:invalid:focus {
border: 2px dashed #b60000;
}
.input_err {
display: block;
font-size: 0.9em;
color: #b60000;
margin-top: 5px;
}
[data-block_type="question_sequence_one_at_a_time"] {
background-color: transparent;
border: none;
border-radius: 0;
padding: 0;
position: relative;
margin-top: 3em;
}
[data-block_type="question_sequence_one_at_a_time"] [data-type="question"] {
margin: 0;
padding: 10px;
}
.question_sequence_navigator {
float: none;
font-size: .8em;
font-weight: bold;
color: #b60000;
background-color: #fff;
border-radius: 12px;
text-align: center;
position: absolute;
padding: 0 10px;
line-height: 2;
display:inline-block;
top: -1.5em;
left: 10px;
}
[data-type="question"] {
border: none;
border-radius: 0;
background-color: transparent;
padding: 10px;
}
[data-type="question"]:focus {
outline: 3px dashed #000;
}
[data-type="question"] legend.query_text {
border: none;
border-radius: 0;
margin-bottom: 10px;
}
[data-type="question"] h4 {
color: #b60000;
font-weight: bold;
font-size: 1.4em;
margin-bottom: 10px;
margin-top: 0;
display: inline-block;
}
/* For IE/Edge */
[data-type="question"] h4:focus {
outline: none;
border: none;
}
[data-type="question"].focus {
outline: 2px dashed #000;
}
[data-block_type="question_sequence_one_at_a_time"] .query_text {
padding: 0;
}
.question_feedback {
border-top: 2px solid #fff;
margin: 2.5em 0 0;
padding: 1em 0 0;
position: relative;
}
.question_feedback h5 {
margin: 0;
position: absolute;
font-weight: bold;
top: -0.9em;
padding-right: 0.5em;
background: #ddd;
}
.query_mc_correct_choice, .query_mc_incorrect_user_choice {
border-radius: 0;
border: 0;
opacity: 0;
}
.hint {
background-color: #e7e7e7;
color: #000;
/*padding: 10px 12px;*/
/*margin-bottom: 10px;*/
transition: height 333ms;
height: 0;
overflow: hidden;
}
.hint p {
padding: 10px 12px;
margin: 0;
background-color: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.hint[aria-hidden="true"] {
display: none;
}
.hint_toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
background-color: #e7e7e7;
color: #000;
padding: 5px 10px;
text-align: left;
text-transform: uppercase;
border: none;
margin: 0;
border: 2px solid #aaa;
}
.hint_toggle:focus {
outline: none;
border: 2px dashed #000;
}
.hint_toggle:hover {
cursor: pointer;
}
.hint_toggle[aria-pressed="true"] {
margin-bottom: 0;
}
.hint_toggle span img {
vertical-align: middle;
transition: 333ms;
}
.hint_toggle[aria-pressed="true"] span img {
transform: rotate(180deg);
}
.show_hint {
/*
cursor: pointer;
text-decoration: underline;
font-weight: bold;
*/
white-space: nowrap;
background-color: transparent;
text-decoration: none;
font-weight: bold;
}
/*
.show_hint.focus, .show_hint.hover {
background-color: #FFFF80;
}
*/
.show_hint .get_help {
margin-left: 2px;
cursor: pointer;
/*font-weight: bold;*/
border: 1px solid transparent;
padding: 0;
/*background-color: #fff;*/
/*box-shadow: 2px 2px 1px 0 #777;*/
vertical-align: top;
background-color: #fff;
}
.show_hint .get_help:focus {
outline: 2px dashed #000;
}
/*
.show_hint .get_help:hover {
background-color: #00aabd;
}
*/
.show_hint:hover {
/*text-decoration: underline;*/
/*background: #00bcd1;*/
cursor: pointer;
}
.show_hint .get_help .info_icon {
height: 1.25em;
width: 1.25em;
display: block;
}
.hint_bubble {
display: none;
position: absolute;
background-color: #ffffad;
border: 2px solid #000;
padding: 0.5em;
}
.hint_bubble.show {
display: block;
}
.mc_option input[type="radio"] {
vertical-align: middle;
margin: 0 !important;
}
.mc_option input[type="radio"]:focus {
outline: none;
}
.query_mc_other_choice {
border: none;
}
.mc_option {
margin-top: 10px;
float: left;
margin-right: 15px;
border: 2px solid #00aabd;
background-color: #fff;
padding: 8px 12px;
color: #000;
}
.mc_option:hover {
background-color: #00aabd;
cursor: pointer;
}
.mc_option .label {
padding-left: 12px;
padding-right: 15px;
margin: 0;
display: inline;
line-height: 1;
}
.mc_option.focus {
color: #000;
border: 2px dashed #000;
outline: none;
}
.mc_option.checked {
background-color: #00aabd;
color: #000;
/*box-shadow: 3px 3px rgba(0,0,0,.3);*/
border: 2px solid #00aabd;
}
.mc_option.focus.checked {
border: 2px dashed #000;
}
.question_action_div {
padding: 0;
margin-top: 10px;
}
#manuscript .question_submit_button {
background-color: #00818f;
border: 0;
border-radius: 3px;
box-shadow: 3px 3px rgba(0,0,0,.3);
margin-top: 20px;
color: #fff;
padding: .4em 1em;
letter-spacing: 0.05em;
font-weight: normal;
font-size: 1.4em;
text-transform: uppercase;
}
#manuscript .question_submit_button:hover {
background-color: #00aabd;
}
#manuscript .question_submit_button.ui-state-focus {
outline: 3px dashed #000;
}
#manuscript .question_submit_button[aria-disabled="true"] {
cursor: not-allowed;
background-color: #bbb;
color: #454545;
box-shadow: none;
}
.fieldset {
overflow: auto;
margin: 0;
list-style-type: none;
}
.fieldset .mc_option {
background-color: #ddd;
color: #006370;
}
.fieldset .mc_option:hover {
cursor: default;
}
.fieldset .mc_option.incorrect_answer {
background-color: #fff;
color: #d60000;
border: 2px solid #d60000;
background-image: url(../asset/incorrect.png);
background-repeat: no-repeat;
background-size: 20px;
background-position: 12px center;
}
.fieldset .mc_option.correct_answer {
background-color: #fff;
color: #009900;
border: 2px solid #009900;
background-image: url(../asset/correct.png);
background-repeat: no-repeat;
background-size: 20px;
background-position: 12px center;
}
.choices_wrap {
position: relative;
border-top: 2px solid #fff;
margin-bottom: 0.75em;
margin-top: 1.5em;
}
h5.choices {
margin-top: 0;
font-weight: bold;
position: absolute;
background-color: #ddd;
display: inline-block;
top: -0.9em;
padding-right: 0.5em;
}
.question_sequence_review {
margin: 10px;
padding-top: 10px;
border-top: 2px solid #000;
display: none;
}
h3.section-title {
display: block;
position: static;
text-align: center;
margin: 2em 0 0;
letter-spacing: 0.05em;
font-size: 1.5em;
font-weight: bold;
text-transform: uppercase;
line-height: 1;
/*color: #000;*/
/*color: #00818f;*/
color: #b60000;
}
/* For IE/Edge */
h3.section-title:focus {
outline: none;
border: none;
}
h3.section-title:focus span {
/*outline: 3px dashed #000;*/
padding: 0 5px;
}
header #top_wrap {
display: flex;
flex-direction: column;
}
#header_right {
display: flex;
order: -1;
padding-top: 0.25em;
align-items: flex-start;
}
#header_right_menu {
/*position: absolute;*/
top: 0.25em;
right: 0.5em;
}
#menu {
margin: 0;
height: 0;
padding: 0;
background-color: #FFF;
display: none;
}
#menu.show {
height: auto;
display: block;
/*box-shadow: inset 0 10px 10px -10px #000;*/
/*border-top: 2px solid #555;*/
background-color: transparent;
position: absolute;
right: -0.5em;
top: 3.5em;
z-index: 999;
}
#menu ol {
list-style-type: none;
margin: 0 auto;
overflow: auto;
height: 0;
background-color: transparent;
max-width: 20em;
}
#menu.show ol {
padding: 1em;
height: auto;
background-color: #fff;
}
#menu.show ol::after {
position: absolute;
content: "";
display: block;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 1.25em solid white;
top: -0.75em;
left: calc(100% - 2.45em - 3px);
}
#menu ol li.menu_item {
line-height: 1;
}
.menu_item + .menu_item {
margin-top: 0.25em;
}
#menu ol li a {
border: 2px solid transparent;
border-radius: 12px;
display: block;
margin: 0 2px;
padding: 5px 1.5em;
}
#menu ol li a:hover {
border: 2px solid #000;
}
#menu ol li a[aria-disabled="true"]:hover {
border: 2px solid transparent;
}
#menu ol li a[aria-disabled="true"] {
color: #696969;
font-weight: normal;
cursor: not-allowed;
}
#menu ol li a[aria-disabled="true"][data-current="true"] {
border: 2px solid #000;
color: #000;
}
#menu ol li a[data-current="true"] {
font-weight: bold;
}
#menu_button_wrap {
/*background-color: transparent;*/ /*old menu*/
background-color: #00818f; /*new menu*/
/*box-shadow: inset 0 10px 10px -10px #000;*/
/*border-top: 2px solid #555;*/ /*old menu*/
padding-right: 0.25em;
}
#menu_button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*border: 2px solid #fff;*/ /*old menu*/
border: 2px solid transparent; /*new menu*/
/*border-top: 2px solid #555;*/
/*background: url(../asset/downarrow.png) no-repeat;*/
/*background-position-x: center;*/ /*old menu*/
/*height: 1.25em;*/
/*background-color: #fff;*/ /*old menu*/
background-color: transparent; /*new menu*/
/*border-radius: 0 0 3em 3em;*/ /*old menu*/
/*width: 2.25em;*/
/*background-size: 1.25em;*/ /*old menu*/
color: #000;
text-transform: uppercase;
font-size: 1em;
/*padding-bottom: 0.15em;*/ /*old menu*/
padding: 2px 3px; /*new menu*/
/*background-position-y: 1.25em;*/ /*old menu*/
display: block;
margin: 0 auto;
cursor: pointer;
}
#menu_button[aria-pressed="true"] {
/*background: url(../asset/uparrow.png) no-repeat;*/
/*background-color: #fff;*/ /*old menu*/
/*background-size: 1.25em;*/ /*old menu*/
/*background-position-x: center;*/ /*old menu*/
/*background-position-y: 1.25em;*/ /*old menu*/
}
#menu_button:hover {
background-color: #00aabd;
border: 2px solid #00aabd;
}
#menu_button:focus {
border: 2px dashed #000;
/*outline: none;*/
}
#menu_btn_txt {
/*background: url(../asset/menu.png) no-repeat;*/
/*background-position-x: center;*/
/*width: 1em;/ /*old menu*/
display: block;
color: transparent;
/*width: 1.25em;*/
/*height: 1.25em;*/
/*background-size: 1.25em;*/
/*min-width: 16px*/
height: 1.5em;
}
#menu_icon {
width: 1.5em;
}
/*
header #bottom_wrap {
position: absolute;
top: calc(100%);
width: 100%;
padding: 0;
text-align: center;
margin: 0;
margin-left: 0;
background-color: #E0FBFF;
z-index: 1000;
overflow: auto;
height: 0;
display: flex
flex-direction: column-reverse;
box-shadow: inset 0 10px 10px -10px #000;
}
*/
/*
header #bottom_wrap.menu_expanded {
flex-direction: column;
}
*/
[data-block_type="activity_report"] {
margin: 2em auto;
border: none;
border-radius: 0;
background-color: transparent;
width: auto;
}
[data-block_type="activity_report"] p {
text-align: center;
margin: 0;
}
[data-block_type="activity_report"] p + p {
margin-top: 0.5em;
}
/*
#congrat_mesg {
text-align: center;
}
#total_score_message {
text-align: center;
}
*/
#grade_submitted_message {
display: block;
}
@media (min-width: 42em) {
header {
/*flex-direction: row;*/
flex-direction: column;
/*justify-content: space-between;*/
/*align-items: stretch;*/
padding: 0.5em;
}
header #top_wrap {
flex-direction: row;
justify-content: space-between;
/*align-items: stretch;*/
align-items: center;
display: flex;
}
header h2 {
margin-bottom: 0;
}
#header_left {
flex-basis: 33%;
}
#header_middle {
flex-basis: 34%;
margin-bottom: 0;
}
#header_right {
flex-basis: 33%;
padding-top: 0;
display: flex;
/*align-items: flex-start;*/
align-items: center;
order: 0;
}
/*
header #bottom_wrap {
margin-left: -0.5em;
margin-top: calc(-1.5em - 6px);
}
*/
#menu_button_wrap {
background-color: transparent;
padding-right: 0;
}
#menu_button {
/*margin-top: calc(-0.25em - 1px);*/
}
header h1 {
padding-left: 15px;
max-width: 14em;
text-align: left;
margin: 0;
}
#progress-wrapper {
margin: 0 0 0 auto;
padding-left: 0;
display: flex;
align-items: center;
flex-wrap: nowrap;
width: 100%;
max-width: 250px;
/*padding-top: 3px;*/
padding-top: 0;
}
#progress-wrapper .cell {
flex-grow: 1;
}
[data-type="figure"][data-block_type="intro_fig"] {
display: block;
flex-basis: 50%;
margin: 0;
}
/*
#digfir_section_0_wrap {
margin-top: calc(-1em - 6px);
}
*/
#digfir_section_0_wrap > [data-type="box_inner"] {
display: flex;
}
#intro_box {
flex-basis: 50%;
padding: 25px;
}
[data-block_type="question_sequence_one_at_a_time"] {
margin-top: 0;
}
.question_sequence_navigator {
left: -5.5em;
top: calc(10px + 1.55em);
display: block;
margin-left: 0;
}
h3.section-title {
display: block;
/*position: relative;
top: -1.75em;*/
text-align: center;
margin: 0;
letter-spacing: 0.05em;
font-weight: bold;
text-transform: uppercase;
line-height: 1;
/* new */
margin-top: 2em;
font-size: 1.5em;
}
[data-block_type="activity_title"] p {
display: block;
}
[data-type="box"][data-block_type="sec_wrap"] {
margin-top: 1em;
padding-top: 0;
}
#digfir_section_0 h3.section-title {
margin-top: 1em;
margin-bottom: 1.4em;
}
#menu.show {
height: auto;
display: block;
/*box-shadow: inset 0 10px 10px -10px #000;*/
/*border-top: 2px solid #555;*/
background-color: transparent;
position: absolute;
right: 0;
top: 3.65em;
}
#menu.show ol::after {
position: absolute;
content: "";
display: block;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 1.25em solid white;
top: -0.75em;
left: calc(100% - 2.2em - 4px);
}
#header_right_menu {
position: static;
}
#progress_right_menu {
margin-right: 2.5em;
}
}
/* list styling */
ul li {
line-height: 1.4;
}
ul li ul {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
/* table styling */
[data-type="table"] {
background: transparent;
/*border-radius: 5px;
border: 4px solid #00aabd;*/
border: none;
padding: 0;
position: relative;
z-index: 2;
margin: 1.5em 0;
}
[data-type="table"] table {
border-collapse: collapse;
border-radius: 5px;
border: 4px solid #00aabd;
position: relative;
width: 100% !important;
}
[data-type="table"][data-layout-width="xlarge"] {
width: auto;
}
[data-type="table"] th {
font-weight: bold;
color: #b60000;
background-color: #fff;
vertical-align: middle;
border: 1px solid #00aabd;
padding: 7px 10px;
width: 50%;
}
[data-type="table"] td {
border: 1px solid #00aabd;
padding: 7px 10px;
color: #005761;
width: 50%;
}
[data-type="table"][data-block_type="col_3"] th,
[data-type="table"][data-block_type="col_3"] td
{
width: 33.33%;
}
[data-type="table"] td:first-child,
[data-type="table"] th:first-child
{
text-align: left;
}
[data-type="table"] tr {
background-color: #fff;
}
[data-type="table"] tr:nth-child(2n) {
background-color: #efefef;
}
td input {
background-color: transparent;
height: 1.5em;
width: 5em;
color: #000;
font-weight: bold;
}
a[target="_help"] {
background-image: url(../asset/new_window.png);
background-repeat: no-repeat;
padding-right: 1.35em;
background-position-x: right;
background-size: 1.15em;
background-position-y: center;
}
a[href$=".pdf"] {
background-image: url(../asset/pdf.png);
background-repeat: no-repeat;
padding-right: 1.25em;
background-position-x: right;
background-size: 1.15em;
background-position-y: center;
}
a[target="_ebook"] {
background-image: url(../asset/new_window.png);
background-repeat: no-repeat;
padding-right: 1.35em;
background-position-x: right;
background-size: 1.15em;
background-position-y: center;
}
/*
a {
text-decoration: underline !important;
}
*/
[data-type="table"] + [data-block_type="footnote"] {
margin-top: -1.25em;
margin-bottom: 2em;
}
[data-block_type="footnote"] p {
font-size: 1em;
}