* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

a {
    border: 0;
    text-decoration: none;
}

sup {
    font-size: 9px;
}

body {
    font-family: verdana, helvetica;
    font-size: 11px;
    color: #eee;
}

#page {
    width: 750px;
    margin: 0 auto;
}

img {
    border: 0;
}

strong {
    font-weight: 700;
}

p {
    margin: 10px 0;
    padding: 0;
}

em {
    font-style: italic;
}

h3 {
    font-weight: 700;
    color: #360;
    font-size: 20px;
}

/* ******************************************************************** */
.formula {
    color: #399;
    font-family: courier;
    font-size: 11px;
    padding: 10px 0;
}

.video {
    width: 500px;
    height: 281px;
    margin: auto;
    -moz-box-shadow: 0px 2px 4px #000;
    -webkit-box-shadow: 0px 2px 4px #000;
    box-shadow: 0px 2px 4px #000;
}

#intro-video .video {
    width: 500px;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -250px;
    z-index: 2;
}

.sub-panel .video {
    width: 500px;
    float: right;
    position: absolute;
    top: 55px;
    right: 60px;
    z-index: 2;
}

#table,
#conclusion-video {
    height: 400px;
    width: 750px;
    position: relative;
    display: none;
}

#good_job {
    float: left;
    width: 200px;
    font-size: 120%;
    color: #000;
    padding: 15px;
}

#see_all {
    height: 82px;
    width: 82px;
    position: absolute;
    top: 290px;
    left: 35px;
}

#conclusion-video .video {
    float: left;
    margin: 20px 0 0;
    color: #000;
    font-size: 110%;
}

.link {
    float: left;
    width: 50%;
    padding: 10px 0 0;
}

.link img {
    padding-top: 5px;
    height: 45px;
    width: auto;
}

.panel,
.sub-panel {
    background: #666 url('../images/table_blank.jpg') no-repeat;
    padding: 0px;
    margin: 0px;
    clear: left;
    height: 400px;
    width: 750px;
}

.sub-panel h2 {
    display: block;
    height: 148px;
    width: 148px;
    margin-left: 10px;
    float: left;
    position: absolute;
}

#menu,
#intro-video {
    background: #666 url('../images/table_full.jpg') no-repeat;
}

#show-skeleton {
    position: absolute;
    top: 23px;
    right: 42px;
    cursor: pointer;
}

.expert-heads {
    height: 120px;
}

.polaroid {
    background-color: #fff;
    padding: 5px;
    margin: 0 20px;
    width: 85px;
    color: #222;
    font: 11px sans-serif;
    display: inline-block;
    position: relative;
    text-align: center;
}

.polaroid-selected {
    position: relative;
    top: 12px;
    z-index: 1;
}

.polaroid-disabled {
    background-color: #BBB;
}

.polaroid-completed {
    background-color: #888;
    -moz-opacity: .50;
    filter: alpha(opacity=50);
    opacity: .50;
    cursor: default;
}

.bone_button-completed {
    -moz-opacity: .50;
    filter: alpha(opacity=50);
    opacity: .50;
    cursor: default;
}

.polaroid-rollover {
    display: none;
    background-color: #eee;
    border: 1px solid #fff;
    color: #333366;
    display: none;
    left: 0px;
    padding: 8px 2px;
    position: absolute;
    top: 0;
    height: 96px;
    width: 89px;
    z-index: 2;
}

.polaroid-rollover br {
    line-height: 1.5em;
}

.expert-nav {
    display: none;
    position: relative;
    padding: 8px 0 0 172px;
}

.expert-nav h2 {
    display: inline-block;
    width: 146px;
    height: 146px;
    float: left;
}

.expert {
    background-color: yellow;
    width: 700px;
    height: 210px;
    padding: 10px;
    margin: auto;
    color: #003489;
    position: relative;
    top: 25px;
    z-index: 1;
}

.images-column img.zoom {
    cursor: pointer;
}

.close-up-blocker {
    background-color: rgba(0, 0, 0, 0.6);
    float: left;
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 5;
    cursor: pointer;
}

.close-up {
    display: none;
    margin: 20px;
    position: relative;
    bottom: 10px;
}

.image-layout-left .images-column {
    float: left;
    margin-right: 10px;
}

.image-layout-thumbs .images-column,
.image-layout-bottom .images-column {
    position: absolute;
    bottom: 7px;
}

.image-layout-thumbs .images-column img {
    margin-right: 10px;
}

.play-again-buttons {
    display: none;
    position: absolute;
    top: 158px;
    width: 125px;
    left: 22px;
    text-align: center;
}

.play-task-again {
    cursor: pointer;
}

.play-checkin-again {
    display: none;
    cursor: pointer;
}

.quiz-question {
    margin: 0 0 6px 0;
}

.quiz-column {
    width: 220px;
    height: 180px;
    float: right;
    margin-left: 10px;
    padding: 14px;
}

.quiz-confirm {
    display: none;
    text-align: center;
}

.quiz-confirm-correct strong {
    font-size: 15px;
    color: green;
}

.quiz-confirm-wrong strong {
    font-size: 15px;
    color: #c00;
}

.quiz-answer {
    background: transparent url('../images/checkbox_empty.png') no-repeat 2px 2px;
    padding: 4px 1px 6px 24px;
    margin: 4px;
    font-weight: 700;
}

.quiz-answer-border {
    padding: 3px 0px 5px 23px;
}

#bone-button-tray {
    margin: auto;
    position: relative;
    top: 95px;
    width: 290px;
    padding: 5px;
}

a.bone-button img {
    margin: 13px 0 0 11px;
}

#watch-intro-video-again-header {
    position: absolute;
    top: 305px;
    left: 50px;
}

#watch-intro-video-again {
    position: absolute;
    top: 323px;
    left: 31px;
    cursor: pointer;
}

#close-button {
    position: absolute;
    bottom: 5px;
    right: 7px;
    z-index: 4;
    cursor: pointer;
}

#next-button {
    display: none;
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 100px;
    height: 33px;
    margin-left: 15px;
    z-index: 4;
    cursor: pointer;
}

#next-button.next-intro {
    margin-left: -50px;
}

#next-button.next-payoff {
    width: auto;
    height: auto;
    bottom: 15px;
    margin-left: -25px;
}


#qmark {
    position: absolute;
    right: 85px;
    top: 70px;
}

.back-to-menu {
    background: transparent url('../images/button_pickanother.png') no-repeat top left;
    height: 82px;
    width: 82px;
    position: absolute;
    top: 290px;
    left: 35px;
}

.instructions {
    display: none;
    position: absolute;
    left: 305px;
    top: 145px;
}

/* COLOR section */
#femur .expert {
    background-color: #ccffff;
    color: #003333;
}

#femur .expert .quiz-column {
    background-color: #66cccc;
}

#ribs .expert {
    background-color: #ccffff;
    color: #003333;
}

#ribs .expert .quiz-column {
    background-color: #66cccc;
}

#eggs .expert {
    background-color: #ffcc99;
    color: #330000;
}

#eggs .expert .quiz-column {
    background-color: #ff9966;
}

#skull .expert {
    background-color: #ffcc99;
    color: #330000;
}

#skull .expert .quiz-column {
    background-color: #ff9966;
}

#teeth .expert {
    background-color: #fcda7e;
    color: #330000;
}

#teeth .expert .quiz-column {
    background-color: #f0b310;
}

#vertebra .expert {
    background-color: #ccff99;
    color: #003300;
}

#vertebra .expert .quiz-column {
    background-color: #99cc00;
}

.shadow {
    -moz-box-shadow: 0px 2px 4px #000;
    -webkit-box-shadow: 0px 2px 4px #000;
    box-shadow: 0px 2px 4px #000;
}

.text-shadow {
    text-shadow: 1px 1px 3px #888;
}

.rounded {
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

/**
 * Non-semantic helper classes: please define your styles before this section.
 */
/* For image replacement */
.ir {
    display: block;
    text-indent: -999em;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
}

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
    display: none;
    visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
    visibility: hidden;
}

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after {
    clear: both;
}

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix {
    zoom: 1;
}

/* fix plyr mute only size */
#page .plyr__volume {
    width: auto;
    min-width: unset;
}