* {
    -webkit-text-size-adjust: none;
}

body {

    color:              #fff;
    FONT-FAMILY:        Georgia, sans-serif;
    FONT-SIZE:          0.8em;
    background-color:   #003366; 
    margin-left:        0px;
    margin-right:       0px;
    margin-top:         0px;
    margin-bottom:      0px;

}


A:link    { COLOR: #ff9900; text-decoration: none; white-space: normal;}
A:visited { COLOR: #ff9900; text-decoration: none; white-space: normal;}
A:active  { COLOR: #ff9900; text-decoration: none; white-space: normal;}
A:hover   { COLOR: #ffffff; text-decoration: none; white-space: normal;}


form {	margin: 0px; display: inline;}

input, 
    textarea ,
    .checkbox-label,
    .select-label
{

    padding-left:   2px;
    padding-right:  2px;
    color:          #ffffff;
    FONT-SIZE:      2.5rem;
    FONT-WEIGHT:    none;
    background:     #006699;

    border-width:   1px;
    border-style:   solid;
    border-color:   #333333;
}

.checkbox-label,
    .select-label
{
    padding-top:    2px;
    padding-bottom: 2px;
}

input[type=button],
    .options .checkbox-label,
    .options .select-label
{
    -moz-box-shadow:        0px 0px 4px #000;
    -webkit-box-shadow:     0px 0px 4px #000;
    box-shadow:             0px 0px 4px #000;

    border-radius:          0.5rem 0.5rem 0.5rem 0.5rem;

}

.die-form {
    display:    table;
    width:      100%;
}

.die-form .die-form-row {
    display: table-row;
}

.die-form .die-input {
    display:    table-cell;
    padding:    0.5rem;
    
}

.die-form .die-input input.phrase,
    .die-form .die-input input.session ,
    .die-form .die-input input.name
{
    width:      100%; 


}

.die-form .die-input input.phrase {
    min-width:  20rem;
}

.die-form .die-input-go {
    width: 0;
}
.die-form .die-input input.phrase,
    .die-form .die-input input.session ,
    .die-form .die-input input.name,
    .die-form .die-input input.go
{
    -moz-box-shadow:        0px 0px 4px #000;
    -webkit-box-shadow:     0px 0px 4px #000;
    box-shadow:             0px 0px 4px #000;

    border-radius:          0.5rem 0.5rem 0.5rem 0.5rem;
}


.die-form .die-input input.go,
    .results input.again,
    .results input.verify
{
    background-color:   #333;
    color:              #f90;
}

.results input.again,
    .results input.verify
{
    border-radius:          0.5rem 0.5rem 0.5rem 0.5rem;
    border:                 1px solid #000000;
    font-size:              2.0rem;
}



.off-screen-nav {
    position:   fixed;
    top:        0;
    left:       0;
    bottom:     0;
    overflow-y: auto;
    width:      50%;

    transition: all 500ms ease 0s;

    border-right:           1px solid #333;
    -moz-box-shadow:        0px 0px 4px #000;
    -webkit-box-shadow:     0px 0px 4px #000;
    box-shadow:             0px 0px 4px #000;

    background-color:       #006699;
}

.nonav .off-screen-nav {
    visibility: hidden;
    -ms-transform:      translate(  -100%, 0 ); /* IE 9 */
    -webkit-transform:  translate(  -100%, 0 ); /* Safari and Chrome */
    transform:          translate(  -100%, 0 );
}

.shownav .off-screen-nav {
    visibility: visible;
}

.shownav .off-screen-nav {
    -ms-transform:      translate(  0px, 0 ); /* IE 9 */
    -webkit-transform:  translate(  0px, 0 ); /* Safari and Chrome */
    transform:          translate(  0px, 0 );

}

.off-screen-nav .cancel {
    float:      right;
    position:   relative;

    border-bottom-left-radius:  0.5rem;
    border-left:                3px solid #000;
    border-bottom:              3px solid #000;
    border-right:               0px;
    border-top:                 0px;

    background-color:           #333;

}

.off-screen-nav .cancel a {
    font-size:  1.5rem;
    padding:    0.5rem;
    line-height:    1.5rem;

}

div.full-page-container {
    width:      100%;
    height:     100%;
}


div.pusher {

    overflow-y: scroll;
    height:     100%;

}

.shownav .pusher {
    -ms-transform:      translate(  100%, 0 ); /* IE 9 */
    -webkit-transform:  translate(  100%, 0 ); /* Safari and Chrome */
    transform:          translate(  100%, 0 );
    width: 50%;
}

.content {
    padding-top:    1rem;
    padding-left:   1rem;
    padding-right:  1rem;
}

.die h2 {
    padding: 0px;
}


.log {
    padding-top:    0.5em;
}

.log .results {
    width:      100%;
    display:    table;
}

.log .results .entry {
    font-size:      2.0rem;
    border-bottom:  1px solid #333;
    display:        table-row;
}

.log .results .entry:first-child span:first-child {

    border-top-left-radius:     0.5rem;

}

.log .results .entry:first-child span:last-child {

    border-top-right-radius:    0.5rem;
}

.log .results .entry:last-child span:first-child {

    border-bottom-left-radius:     0.5rem;

}

.log .results .entry:last-child span:last-child {

    border-bottom-right-radius:    0.5rem;
}

.log .results .entry:nth-child(even) span {
    background-color: #006699;
}

.log .results .entry:nth-child(odd) span {
    background-color: #0077AA;
}

.log .results .entry.session:nth-child(even) span {
    background-color: #009966;
}

.log .results .entry.session:nth-child(odd) span {
    background-color: #00AA77;
}

.showsession input.session,
    .showsession input.name
{
    background-color:   #009966 !important;
}


.log .results .entry span.timestamp,
    .log .results .entry span.name,
    .log .results .entry span.input,
    .log .results .entry span.output,
    .log .results .entry span.message,
    .log .results .entry span.action
{
    display:    table-cell;
    padding:    0.5rem;
}

span.timestamp
    span.message,
    span.name,
    span.input,
    span.action
{
    white-space:    nowrap;
}

span.message
{
    width:      100%;
    font-style: italic;
    min-width:  10rem;
}

span.action,
    span.timestamp,
    span.input,
    span.name
{
    width:  0%;
}



.log .results .entry span,
    .log .results .entry span.output a

{
    padding-left:   1rem;
    padding-right:  1rem;
}

.log .results .entry span.timestamp { }
.log .results .entry span.input     { 
    max-width:      10rem;
    text-overflow:  ellipsis;
    overflow:       hidden;
}
.log .results .entry span.output    { }


.options {
    padding:        0.5rem;
}
.options input,
    .options .checkbox-label ,
    .options .select-label 
{
    font-size: 1.0rem;
}

.checkbox-label,
    .select-label
{
    display: inline;
}

.select-label {
    margin-left: 2px;
}

.select-label select {
    background-color:   #069;
    border:             none;
    color:              #fff;
    font-size:          1rem;
}

span.last-updated {
    margin-left:    1rem;
}

.showloading .loading {
    display:    block;
}

.noloading .loading {
    display:    none;
}

.loading {
    width:              100%;
    height:             100%;
    position:           fixed;
    top:                0;
    left:               0;
    background-color:   #000;
    opacity:            0.5;
    z-index:            1000;
}

.showmodal .modal {
    display:    block;
}

.nomodal .modal {
    display:    none;
}

.modal {
    width:              100%;
    height:             100%;
    position:           fixed;
    top:                0;
    left:               0;
    z-index:            1001;
}

.modal .message {
    position:           relative;

    width:              20rem;
    height:             10rem;
    top:                50%;
    left:               50%;

    margin-left:        -10rem;
    margin-top:         -5rem;


    border-radius:      0.5rem 0.5rem 0.5rem 0.5rem;
    box-shadow:         0 0 4px #000000;
    background-color:   #006699;
}

.modal .message {
    text-align:     center;
    font-size:      2.0rem;
    line-height:    10rem;

}

.session-link {
    margin-left:    1rem;
    margin-right:   1rem;
}

body {
    transition-property:    background-color;
    transition-duration:    0.5s;
    transition-timing:      ease-in;
}

body.FAIL {
    background-color:   #f00;
}

body.CRIT {
    background-color:   #6f6
}

.content {
    transition-property:    opacity;
    transition-duration:    0.5s;
    transition-timing:      ease-in;
}

body.FAIL .content,
body.CRIT .content {
    opacity: 0.2;
}