/* CSS Document for Floating Point Number pages ONLY */
.fpwrap {
    width: auto;
    margin: auto;
}
.mantissa, .exponent {
    width: auto;
    height: auto;
    border: 1px solid #febc02;
    border-radius: 10px;
    padding: 10px;
    float: left;
    margin: 0 20px 10px 0;
}
.nl {
    width: 100%;
    height: 1px;
    border: none;
    clear: both !important;
    padding: 0;
    margin: 0;
}
.binFirst {
    width: 120px !important;
}
.bitTable, .addTable {
    width: auto;
    min-width: 576px;
}
.bitTable td, .addTable td, .expoArrowsDown td, .mantArrowsDown td, .expoBitColumns td {
    text-align: center;
    margin: 0 2px 0 2px;
    padding: 10px 0 0 0;
    float: left;
    width: 60px;
    height: 80px;
    font-weight: 700;
    font-size: 250%;
    overflow: hidden;
}
.bitTable td {
    background-image: url("../img/al-fp-bit.png");
}
.bitColumns td, .addTable td, .expoBitColumns td {
    color: #fff;
    font-weight: 300;
    font-size: 120%;
    height: 50px !important;
    
}
.bitColumns td, .expoBitColumns td {
    background-image: url("../img/al-fp-bit-column.png");
}
.expoArrowsDown td, .mantArrowsDown td {
    padding: 0;
    height: 40px;
    background-image: url("../img/al-fp-arrow-down-purple.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.expoFlippedBits, .mantFlippedBits {
    float: left;
}
.expoArrowsDown td img, .mantArrowsDown td img {
    width: 100% !important;
}
.addOne {
    height: 60px !important;
    width: auto !important;
}
.fpanswer {
    width: 100%;
    height: 180px;
    font-weight: 700;
    margin: auto;
    font-family: "kit-rounded", sans-serif;
    text-align: center;
    font-size: 600%;
    background-image: url("../img/al-fp-answer.png");
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 30px;
    text-shadow: 0 0 10px #fff;
}
.mantPointArrow {
    text-align: center;
    font-weight: 700;
    padding-top: 33px;
    font-size: 130%;
    width: 292px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center center;
}
.expoNegOnly, .mantNegOnly {
    width: 100%;
    display: none;
}
#hideSteps {
    width: 100%;
    display: none;
}
/* Hex Steps */
.split {
    width: 50%;
    float: left;
}
.bitTblSml, .bitTblLrg {
    width: auto;
}
.bitTblSml td, .addTblSml td, .bitTblLrg td, .bitTblSml th {
    text-align: center;
    padding: 10px 0 0 0;
    float: left;
    width: 60px;
    height: 50px;
    font-weight: 700;
    font-size: 150%;
    overflow: hidden;
}
.bitTblSml td, .bitTblLrg td, .bitTblSml th {
    margin: 0 2px 0 2px;
}
.bitTblSml td {
    background-image: url("../img/al-fp-bit-sml.png");
}
.bitTblLrg td {
    background-image: url("../img/al-fp-bit-lrg.png");
    width: 90px;
}
.bitTblSml th {
    background-image: url("../img/al-fp-bit-column-sml.png");
    color: #fff;
}
.bitTblSml .blank, .bitTblLrg .blank {
    background:none;
}
.bitTblSml .join, .bitTblSml .splitNibbles {
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}
.bitTblSml .join {
    background-image: url("../img/al-join.png");
}
.bitTblSml .splitNibbles {
    background-image: url("../img/al-splitNibbles.png");
}

.addTblSml .rowC {
    border-top: 3px #6b44c1 solid;
    border-bottom: 3px #6b44c1 solid;
}
.addTblSml .rowAcurrent {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border: #febc02 solid 3px;
    border-bottom: none; 
}
.addTblSml .rowABcurrent {
    border-left: #febc02 solid 3px;
    border-right: #febc02 solid 3px;
}
.addTblSml .rowDcurrent {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border: #febc02 solid 3px;
    border-top: none; 
}
.splitArrows, .joinArrows {
    width: 107px;
    height: 46px;
    margin: auto;
    clear: both;
}
.splitArrows {
    background-image: url("../img/al-split.png");
}
.joinArrows {
    background-image: url("../img/al-joinArrows.png");
}

/* Binary / Hex / Denary Questions */
.formula {
    height: 60px;
    font-weight: 700;
    font-size: 100%;
}
#getUsr {
    height: 60px;
    width: 100px;
    font-size: 150%;
    font-family: "kit-rounded", sans-serif;
    padding: 0;
    margin: 0;
    border: 0;
    text-align: center;
}
#getVal {
    display: none;
}

#correct, #incorrect {
    clear: both;
    width: 50%;
    margin: auto;
    text-align: center !important;
    display: none;
}
#tick, #cross {
    display: none;
}

/* Responsive */
@media (max-width: 1220px) {
    .bitTable td, .expoArrowsDown td, .mantArrowsDown td, .expoBitColumns td, .bitTblSml td, .bitTblSml th, .addTblSml td {
        padding: 5px 0 0 0;
        width: 25px;
        height: 35px;
        font-weight: 700;
        font-size: 100%;  
    }

    .bitColumns td, .expoBitColumns td {
        padding: 5px 0 0 0;
        font-size: 80%;
        height: 25px !important;
        background-size: 100%;
    }
    .bitColumns td, .expoBitColumns td {
        font-size: 50%;
    }
    .addOne {
        height: 60px !important;
        width: auto !important;
    }
    .fpanswer {
        font-size: 450%;
    }
}