/***** Body - the text size is percentage-based *****/
body {
    margin:0 auto;
    padding:0;
    font:80% Arial, Helvetica, sans-serif;
    background:#666666;
    background-image:url(images/slice.png);
    background-repeat:repeat-x;
}

p {
    font-size:1.0em;
}

h1 {
    color:#505050;
    background-color:inherit;
    font-size:1.6em;
    margin:0 0 5px 0;
}

h2 {
    color:#505050;
    background-color:inherit;
    font-size:1.4em;
    margin:0 0 5px;
}

h3 {
    color:#505050;
    background-color:inherit;
    font-size:1.2em;
    margin:0 0 5px;
}

h4 {
    color:#505050;
    background-color:inherit;
    font-size:1em;
    margin:0 0 5px;
}


/***** Container - This contains the page in a specific width box. *****/
#wrap {
    background-color:#ffffff;
    color:#555555;
    margin:0 auto;
    max-width:960px;
}


/***** Links *****/
a {
    text-decoration:underline;
    font-weight:bold;
    color:#3B617D;
    background-color:inherit;
}

a:hover {
    text-decoration:underline;
    color:#000000;
    background-color:inherit;
}

a:active {
    text-decoration:underline;
    color:#000000;
    background-color:inherit;
}


/***** Header - this is typically a graphic *****/
#header {
    margin:0 0 0 0;
    border:0;
    background-image:url(images/header.png);
    background-repeat:no-repeat;
    background-size:cover;
    height:100px;
    background-color:#212121;
}

@media(width<480px) {
    #header {
        height: auto;
        min-height: 65px;
        aspect-ratio: 480 / 100;
    }
}


/***** Home and Logout Div *****/
#subhead {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    min-height: 20px;
    background-color:#DDA129;
    color:#111;
    padding: 5px 10px;
    font-weight:bolder;
    font-size:1.2em;
}

#subhead a {
    color:#000000;
    text-decoration: underline;
}

#subhead a:hover {
    text-decoration:none;
}

/** This floats the item to the right and puts a right margin.
    Can be used for items inside of div tags.
    Can also be used to position a div. **/
.floatright {
    float:right;
    margin:0 10px 0 0;
}

/** This floats the item to the left and puts a left margin.
    Can be used for items inside of div tags.
    Can also be used to position a div. **/
.floatleft {
    float:left;
    margin:0 0 0 10px;
}

.center {
    text-align:center;
}


/***** Left Column *****/
#leftnav {
    float:left;
    max-width:500px;
    margin:0 0 5px;
    padding: 0px 5px 0 8px;
}

#leftnav a img {
    text-decoration: none;
    border: none;
}


/***** (2) CONTENT: 2 Column *****/
#content_two{
    margin:10px 8px 5px 510px;
    padding:5px 5px 0 10px;
    line-height:1.6em;
}


/*** Content - 1 Column ***/
#content_one {
    margin: 10px 8px 5px 8px;
}


#admintools  {
	font-size: 1.3em;
	font-weight:bolder;
}
#admintools a {
	color: #000;
	text-decoration: underline;
}
#admintools a:hover {
	color: #9A6F18;
	text-decoration: none;
}

#admintools a .selected {
	color:#9A6F18;
	text-decoration: none;
}

#admintools > span {
    text-wrap-mode: nowrap;
}

/***** Footer *****/
#footer {
    display: flex;
    justify-content:space-between;
    clear:both;
    margin:0 auto;
    padding:10px 0 20px;
    border-top:2px solid #ffcc33;
    text-align:center;
    color:#757575;
    background:inherit;
    font-size:0.9em;
}

#footer a {
    color:#555555;
}

#footer a:hover {
    text-decoration:none;
}


/***** Version Div ******/
#version {
    clear:both;
    margin:0 auto;
    padding:10px 0 5px;
    text-align:center;
    color:inherit;
    background:#ffffff;
    font-size:1.0em;
}


/*** Table Classes  ***/
th {
    background-color:#ffcc66;
    color: #333333;
    padding: 5px 5px 5px 5px;
}


/* This is the background color for every other row on a table */
.alt {
    background-color:#f9e0ac;
}

.question_box {
    background-color:#AFCCDB;
    color: #545454;
    padding: 5px 5px 5px 5px;
}

.question_box .validator {
    color: #ac0000 !important;
}

.question {
    font-weight: bolder;
    font-size:1.2em;
}

.answer_box {
    font-size: 1.2em;
    background-color: #F9E4C0;
    padding: 5px 5px 5px 5px;
}

.answer {
    font-weight: bolder;
}

.response {
    color: #000;
    font-style:italic;
}


/* Misc. Styles  */
.red {
    color: #e00;
}

.bold {
    font-weight: bolder;
}

.incorrect {
    color: #900;
    font-weight:bolder;
}

.correct {
    color: #006130;
    font-weight:bolder;
}

.nongraded {
    color: #063;
    font-weight: bolder;
}

.explanation {
    color: #069;
    font-style:italic;
}

.login {
    display: inline-block;
    padding: 1rem !important;
    padding-bottom: 2rem !important;
    margin-left: 20px;
}

.goldbox {
    background-color:#f8d182;
    padding: 5px 5px 5px 5px;
    color: #5c5c5c;
}

.registrationsection {
    max-width:400px;
}

.registrationsection td {
    padding: 3px;
}

td.registrationlabel {
    width: 165px;
    text-align: right;
    font-weight: bold;
}

td.registrationinputfield {
    width: 215px;
}

.withareacode {
    font-weight: normal;
}

.shorttextbox {
    width: 50px;
}

.nopad td {
    padding: 0px;
}

.username {
    font-style: italic
}

.caseinfolabel {
    font-weight: bold;
}

.rightstrong {
    text-align: right;
    font-weight: bold;
}

.requiredfield {
    color: #933;
}

/* From FoK */
#video {
    BACKGROUND-COLOR: #000000;
    MARGIN-TOP: 0px;
    width: 490px;
    min-height: 317px;
    PADDING-TOP: 0px;
}

#video DIV {
    TEXT-ALIGN: center;
    MARGIN: 0px
}


#footerLogoMUhdfs {
    padding: 0 40px;
}

#footerText {
    FONT-FAMILY: Arial,Verdana, Helvetica, sans-serif;
    FONT-SIZE: 11px;
    padding: 0 8px;
}

#footerLogoMUextn {
    order: 3;
    FONT-FAMILY: Arial,Verdana, Helvetica, sans-serif;
    FONT-SIZE: 11px;
    padding: 0 40px;
}

@media (width < 768px) {
    #footer {
        display: grid;
        gap: 0.5rem;
    }
    #footerLogoMUextn {
        grid-column: 2;
        padding: 0;
    }
    #footerText {
        grid-row: 2;
        grid-column:1/3;
    }
    #footerLogoMUhdfs {
        padding: 0;
    }
}

.table-responsive {
    overflow-x: auto;
}

.validator {
    color: #eb0000 !important;
}

.goldbox .validator {
    color: #bd0000 !important;
}

#skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: #000;
    color: #fff;
    padding: 0.75rem 1rem;
    z-index: 1000;
}

#skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
}

#StartTheProgram {
    padding: 10px 13px;
    background-color: #dda129;
    color: black;
    font: inherit;
    font-size: 1.25em;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    border: 0;
    display: inline-block;
    margin: 10px 0 20px 0;
    cursor: pointer;
}