body {
    font-family: Arial, Tahoma;
    font-size: 14px;
    margin: 4px;
    height: 100%;
    height: -webkit-fill-available;
    background-color: #FFFFFF;
}

html {
    height: 100%;
    height: -webkit-fill-available;
}

form {
    max-width: 960px;
    margin: 0 auto;
    color: #000000;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 2px;
    border-color: #AAAAAA;
    padding: 8px;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    position: relative;
}

p {
    margin: 20px 0px;
    color: #000000;
}

sup {
    font-size: 8px;
}

input {
    background-color: #FFFFFF;
    color: #000000;
}

#divPleaseWait {
    border-style: solid;
    border-width: 2px;
    border-color: #F0BF4E;
    background-image: url(images/pleasewait.png);
    position: fixed;
    width: 200px;
    height: 50px;
    font-size: 24px;
    padding: 20px 0px 0px 0px;
    display: none;
    margin-top: -15px;
    margin-left: 0px;
    top: 50%;
    left: calc(50% - 100px);
    text-align: center;
    border-radius: 10px;
    z-index: 9999;
}



.offline {
    background-image: url(images/maintenance.gif);
    background-position: 4px 4px;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    padding: 10px 10px 10px 140px;
    min-height: 100px;
}



.clearboth {
    clear: both;
}

li ~ li {
    margin-top: 0.2em !important;
}

input[type="text"], input[type="date"], input[type="password"], select, textarea {
    font-size: 100%;
    border-style: solid;
    border-color: #888888;
    border-width: 1px;
    font-family: Arial;
    padding: 2px;
}

.pageheader {
    background-color: #4472C4;
    color: #FFFFFF;
    padding: 5px;
    min-height: 57px;
    position: relative;
    background-image: url(Images/reading.PNG);
    background-repeat: no-repeat;
    background-position: right 60px top;
}


    .pageheader h1 {
        margin-top: 0px !important;
        margin-bottom: 2px !important;
        margin-right: 80px !important;
        display: inline-block;
    }

.userholder {
    position: absolute;
    top: 5px;
    right: 5px;
}

.logoffholder {
    position: absolute;
    bottom: 4px;
    right: 4px;
}

.subtitle {
    display: block;
    font-size: 16px;
}

.titleskillset {
    position: absolute;
    left:4px;
    bottom:4px;
    font-size: 18px;
    width: 120px;
    text-align: center;
    background-color: #123677;
    padding-top: 1px;
    border-radius: 8px;
}

.headerbar {
    position: relative;
    background-color: #565656;
    font-size: 16px;
    font-weight: bold;
    margin-top: 2px;
    margin-bottom: 0px;
}



.headerinfo {
    margin-top: 2px;
    font-size: 18px;
    color: #222222;
}

.headerbutton {
    padding: 4px 12px 3px 12px;
    background-color: #565656;
    border-style: none;
    font-size: 18px;
    color: #FFFFFF;
    cursor: pointer;
}

    .headerbutton:hover {
        background-color: #727272;
    }

    .headerbutton:disabled {
        color: #AAAAAA;
    }

        .headerbutton:disabled:hover {
            background-color: #888888;
        }

.rightbutton {
    position: absolute;
    right: 0px;
    color: #FFFFFF;
    text-decoration: none;
}

.pagefooter {
    color: #FFFFFF;
    padding: 4px;
    position: absolute;
    bottom: 8px;
    width: calc(100% - 24px);
    background-color: #4472C4;
}

.mainarea {
    overflow: hidden;
    background-color: #ffffff;
    padding: 0px 0px 20px 0px;
    margin-bottom: 64px;
}

.cvInfo {
    margin: 10px 0px 10px 0px;
    display: block;
    padding: 5px 5px 0px 40px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    border-radius: 5px;
    background-color: #FAFAFA;
    background-image: url(images/exclaimorange.gif);
    background-repeat: no-repeat;
    background-position: 4px 8px;
}

    .cvInfo li {
        margin-top: 2px !important;
        line-height: 1.2em !important;
    }


h1 {
    font-size: 22px;
    margin-top: 14px;
    margin-bottom: 10px;
}

h2 {
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 20px;
}

h3 {
    font-size: 18px;
    margin-bottom: 8px;
    margin-top: 14px;
}

h4 {
    font-size: 16px;
    margin-bottom: 6px;
}

h5 {
    font-size: 14px;
    margin-bottom: 4px;
}

.confirm {
    background-image: url(images/exclaimorange.gif);
    background-position: center 4px;
    background-repeat: no-repeat;
    margin-top: 10px;
    padding-top: 50px;
    text-align: center;
}

.hrseparator {
    width: 95%;
    margin-top: 20px;
    border-width: 1px 0px 0px 0px;
    border-color: #AAAAAA;
    margin-bottom: 5px;
}


.strongtext {
    font-weight: bold;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
    right: 0px;
}

.questionholder {
    clear: both;
    padding-top: 12px;
}

    .questionholder p {
        margin-top: 0px !important;
        margin-bottom: 15px;
    }

.questionmain {
    padding-right: 20px;
    width: 200px;
    float: left;
}

.questionsmall {
    padding-right: 20px;
    width: 150px;
    float: left;
}

.questionsub {
    display: block;
    margin-left: 20px;
    font-size: 12px;
}

.questioninline {
    display: inline-block;
    padding-right: 10px;
    padding-left: 15px;
    min-width: 50px;
}

.questioninlinewide {
    min-width: 93px;
    display: inline-block;
}


.textboxholder {
    overflow: hidden;
    display: block;
}

.textboxholdersmall {
    vertical-align: top;
    width: 270px;
    display: inline-block;
}

.textboxholdermultiline {
    display: block;
    margin-left: 20px;
    margin-top: 12px;
    margin-bottom: 20px;
}

.fulltextbox, .fullquestion {
    width: 98%;
}

.dropdownadapt {
    max-width: 98%;
}

.smalltextbox {
    width: 145px;
}

.datetextbox {
    width: 120px;
}

.optiontextbox {
    width: 80px;
}

.interventiondropdown {
    width: 126px;
}

.interventiondropdownwide {
    width: 167px;
}

.valuetextbox {
    width: 60px;
}

.numbertextbox {
    width: 44px;
}

.hidetext label {
    width: 1px;
    display: none;
}


.smalltd {
    width: 35px;
}

.widetd {
    width: 70px;
}

.optiontd {
    width: 90px;
}

.midlistbox, .midtextbox {
    width: 50%;
    min-width: 250px;
}

.widetextbox {
    width: 85%;
    min-width: 250px;
}

.smalllistbox {
    width: 150px;
}

.monthlistbox {
    width: 152px;
}

.separator {
    padding-left: 5px;
    padding-right: 5px;
}

.probelistbox, yearlistbox {
    width: 75px;
}

.checkboxblock {
    padding-left: 20px;
    display: block;
    text-indent: -20px;
    margin-bottom: 2px;
}

.checkboxinline {
    display: inline-block;
    margin-right: 50px;
}

.checkboxinlinesmall {
    display: inline-block;
    margin-right: 20px;
}

.checkboxinlinesmallest {
    display: inline-block;
    margin-right: 1.2px;
}

.checkboxnolabel {
    display: inline-block;
    padding-left: 15px;
}

.checkboxskillword {
    display: inline-block;
    min-width: 80px;
    margin-right: 10px;
}

.groupme {
    display: inline-block;
    margin-bottom: 5px;
}

.smalltext {
    font-size: 12px;
    color: #444444;
}

.requiredtext {
    color: #AAAAAA;
}

.inlineblock {
    display: inline-block;
}

.infotext {
    display: inline-block;
    color: #444444;
    font-size: 12px;
    padding-left: 10px;
}

.infotextblock {
    display: block;
    color: #444444;
    font-size: 12px;
    padding: 5px 0px 0px 10px;
}



.infobox {
    display: block;
    margin: 5px 0px 20px 0px;
    min-height: 30px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    background-color: #FAFAFA;
    padding: 5px 5px 5px 50px;
    font-size: 14px;
    background-image: url(images/info.gif);
    background-position: 5px 5px;
    background-repeat: no-repeat;
}

.textboxholder .infobox {
    margin: 0px 12px 0px 0px;
}

.infohighlight {
    padding-left: 40px;
    color: #00AA00;
}

.marginright {
    margin-right: 100px;
}

.marginrightmid {
    margin-right: 78px;
}

.marginrightsmall {
    margin-right: 20px;
}

.marginbottomsmall {
    margin-bottom: 5px;
}

.charactersused {
    font-size: 12px;
    color: #008800;
    display: inline-block;
    margin-left: 40px;
}

/* Skill highlight styles */
.skillhighlight {
    text-decoration: underline;
}

.reviewwordsholder .skillhighlight {
    text-decoration-thickness: 2px;
}
/* End of Skill highlight styles */

/* button Styles */

.buttonholder {
    display: block;
    margin-top: 15px;
    text-align: right;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color: #AAAAAA;
    padding-top: 5px;
}

.buttonholdertall {
    clear: both;
    margin-bottom: 8px;
}

.standardbutton, .deletebutton {
    border-style: none;
    border-radius: 4px;
    min-width: 140px;
    background-color: #4444AA;
    color: #FFFFFF;
    margin-left: 20px;
    cursor: pointer;
    height: 28px;
    font-size: 15px;
}

    .standardbutton:hover {
        background-color: #2373CC;
    }

.standardbuttonsmall {
    width: 60px;
}

.hrefbutton, .hrefbutton:hover, .hrefbutton:visited {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    text-decoration: none;
    color: #FFFFFF;
    height: 14px;
    padding: 2px 5px 4px 5px;
    margin: 4px 0px 2px 5px;
    width: 90px;
}

.shortbutton {
    width: 80px;
    margin-left: 10px;
}

.midbutton {
    width: 100px;
    margin-left: 10px;
}


.greenbutton {
    background-color: #388b29;
}

    .greenbutton:hover {
        background-color: #3fbd29;
    }


.orangebutton {
    background-color: #a86224;
}

    .orangebutton:hover {
        background-color: #d08441;
    }

.greybutton {
    background-color: #305566;
    margin-left: 0px;
    margin-right: 20px;
}

    .greybutton:hover {
        background-color: #41748B;
    }

.redbutton {
    background-color: #A53E29;
}

    .redbutton:hover {
        background-color: #792D1E;
    }

.lightbluebutton {
    background-color: #687b9e;
}

    .lightbluebutton:hover {
        background-color: #8094b8;
    }

.deletebutton {
    background-color: #A53E29;
    width: 80px;
    margin-right: 150px;
}

    .deletebutton:hover {
        background-color: #792D1E;
    }

    .standardbutton:disabled, .deletebutton:disabled {
        background-color: #AAAAAA;
    }

.smallbutton {
    margin-left: 24px;
    width: 80px;
    height: 20px;
}

.narrowbutton {
    margin-left: 0px;
    margin-top: 0px;
    width: 120px;
    height: 22px;
}

.logbutton {
    border-style: none;
    border-radius: 4px;
    background-color: #29318d;
    color: #FFFFFF;
    margin-left: 20px;
    cursor: pointer;
    font-size: 15px;
    width: 60px;
    height: 20px;
}

    .logbutton:hover {
        background-color: #3c44a0;
    }

.loginbutton {
    margin-right: 10px;
}

.linkbutton {
    text-decoration: none;
    color: #FFFFFF;
    display: inline-block;
    vertical-align: middle;
    width: 160px;
    height: 22px;
    text-align: center;
    padding-top: 3px;
    margin-left: 0px;
}

@media screen and (max-width:826px) {
    .linkbutton {
        margin-left: -15px;
    }
}


/* end of button styles */

/* table styles */

.resultsholder {
    padding-top: 10px;
    padding-bottom: 10px;
}

.detailstable {
    width: 100%;
    font-size: 14px;
}

    .detailstable th {
        text-align: left;
        background-color: #e0ebff;
    }

    .detailstable tr {
        vertical-align: top;
        min-height: 20px;
    }


    .detailstable tbody tr:nth-child(odd) {
        background-color: #F4F4F4;
    }



.extracontrols {
    display: none;
}

@media screen and (min-width:790px) {
    .extendedtable tbody tr:hover {
        background-color: #fffff6;
    }

        .extendedtable tbody tr:hover .extracontrols {
            display: block;
        }
}


/* end of table styles */

/* Pager Styles*/

.pagecontrolstop {
    display: block;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    padding-bottom: 4px;
    border-color: #888888;
}

.pagecontrolsbottom {
    display: block;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    padding-top: 4px;
    border-color: #888888;
}

.resultsheader {
    font-size: 120%;
    font-weight: bold;
}

.floatright {
    float: right;
}

.floatleft {
    float: left;
}

.centreme {
    text-align: center;
    clear: both;
    display: block;
}

.pagernolink {
    color: #000000;
    margin: 1px 5px 1px 5px;
}

.pager, .pager:visited {
    display: inline-block;
    margin: 1px 5px 1px 5px;
    color: #888888;
}

    .pager:hover {
        color: #AAAAAA;
    }

/* End Pager Styles*/



/* Test Styles */

.testheader {
    font-size: 16px;
    color: #444444;
    background-color: #F1F1F1;
    margin-top: 4px;
    margin-bottom: 10px;
    padding: 4px 2px;
    display: table;
    width: 100%;
}

.testheadertitle {
    display: table-cell;
    white-space: nowrap;
    padding-right: 10px;
    width: 150px;
}

.testheaderdesc {
    display: table-cell;
}

.testheadercode {
    display: table-cell;
    text-align: right;
}


.testwordholder {
    display: block;
    width: 95%;
    margin: 0 auto;
    position: relative;
}

.testwordarea {
    display: block;
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    background-color: #fdfdac;
    padding: 20px 0px;
    font-size: 120px;
    text-align: center;
    height: 200px;
    vertical-align: middle;
}

.testwordareagrey {
    background-color: #FCFCFC;
}

.testcolour {
    height: 95%;
    width: 80%;
    margin: 0 auto;
    background-color: #000000;
    border-style: solid;
    border-radius: 20px;
    color: #FFFFFF;
}


.testword {
    line-height: 140px;
}

.testwordordinal {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #666666;
    font-size: 20px;
}

.testinteractive {
    text-align: left;
    padding-left: 10px;
    padding-top: 45px;
}

.testwordbase {
    font-size: 26px;
    margin-top: 40px;
}

.testwordsub {
    display: inline-block;
    width: 19%;
    text-align: center;
}

.testresponse {
    color: #0000AA;
}

.testinterface {
    width: 100%;
    text-align: center;
}

.testcontrolholder {
    display: inline-block;
    margin: 0 auto 30px auto;
    width: calc(100% - 300px);
    min-width: 340px;
    vertical-align: top;
}

.testcontrols {
    display: block;
    margin-top: 60px;
}

.testbutton {
    border-style: none;
    border-radius: 4px;
    background-color: #008800;
    margin: 0px 10px 20px 10px;
    color: #FFFFFF;
    min-width: 140px;
    height: 40px;
    font-size: 22px;
    box-shadow: 5px 5px #CCCCCC;
    cursor: pointer;
}

.testredbutton {
    background-color: #880000;
}

.testbluebutton {
    background-color: #000088;
}

.testorangebutton {
    background-color: #ef8718;
}

.testsmallbutton {
    background-color: #000088;
    width: 80px;
    height: 25px;
    font-size: 17px;
    margin: 0px 5px;
}

.testbutton:hover {
    opacity: 0.8;
}

.testbutton:disabled {
    background-color: #CCCCCC;
}

.testmathcontrol {
    width: 250px;
    border-style: solid;
    border-width: 2px;
    border-radius: 8px;
    padding: 10px 0px 0px 10px;
    text-align: left;
    margin-left: 30px;
    margin-top: 20px;
    vertical-align: top;
    display: none;
}

.testmathbutton {
    border-style: solid;
    border-color: #888888;
    border-width: 2px;
    font-size: 26px;
    padding: 5px;
    border-radius: 8px;
    width: 70px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
}

.testspellingcontrol {
    display: none;
    width: 710px;
    border-style: solid;
    border-width: 2px;
    border-radius: 8px;
    padding: 10px 0px 0px 10px;
    text-align: left;
    vertical-align: top;
    margin: 20px auto 0px auto;
}

.testspellingbutton {
    border-style: solid;
    border-color: #888888;
    border-width: 2px;
    font-size: 22px;
    padding: 5px;
    border-radius: 8px;
    width: 50px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
}

.testspellingcontrol button {
    font-family: inherit;
    font-size: 24px;
}

.testspellingmiddleline {
    margin-left: 20px;
}

.testspellingbottomline {
    margin-left: 40px;
}


.testbackbutton {
    background-color: #e19e9e;
}

.testokbutton {
    background-color: #9ee1ac;
}

.testnumeracygroup {
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    border-radius: 20px;
    background-color: #F8F8F8;
    display: inline-block;
    position: relative;
    width: 120px;
    height: 120px;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 10px;
}

.testnumeracyone {
    position: absolute;
    left: 0px;
    top: 36px;
    width: 100%;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: 4px;
    text-align: center;
}

.testnumeracytwo {
    position: absolute;
    left: 0px;
    top: 6px;
    width: 100%;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: 4px;
    text-align: center;
}


@media screen and (max-width:700px) {
    .testwordarea {
        font-size: 80px;
    }

    .testwordbase {
        font-size: 20px;
        margin-top: 45px;
    }
}

@media screen and (max-width:550px) {
    .testwordbase {
        font-size: 17px;
    }

    .testwordsub {
        width: 18%;
    }

    .testheader {
        font-size: 14px;
        font-weight: normal;
        color: #000000;
    }
}

@media screen and (max-width:450px) {
    .testwordbase {
        font-size: 15px;
    }

    .testcontrols {
        margin-top: 40px;
    }
}
/* End of test styles*/

/* Recent assessment styles */
.recentholder {
    display: inline-block;
    width: 75px;
    margin: 0px 10px 10px 0px;
    vertical-align: top;
}

.recentholderpositive {
    border-style: solid;
    border-width: 0px 0px 6px 0px;
    border-color: #00AA00;
}

.recentholdernegative {
    border-style: solid;
    border-width: 0px 0px 6px 0px;
    border-color: #DDDDDD;
}

.recentholderneutral {
    border-style: solid;
    border-width: 0px 0px 6px 0px;
    border-color: #888888;
}



.recentlink {
    border-style: none;
}

.recentlinkimage {
    border-style: none;
    color: #4472C4;
}

.fa-file-text:before {
    font-size: 36px;
}

.fa-file-text-o:before {
    font-size: 42px;
    color: #444444;
    margin-right: 10px;
}

.fa-envelope-o {
    margin-top: -7px;
}

    .fa-envelope-o:before {
        font-size: 52px;
        color: #444444;
        margin-right: 10px;
    }

.recentheader {
    border-style: solid;
    border-width: 1px;
    border-color: #777777;
    text-align: center;
    color: #FFFFFF;
    background-color: #888888;
}

.recentheaderA {
    background-color: #4444AA;
}

.recentheaderB {
    background-color: #b1964b;
}

.recentheaderC {
    background-color: #4b8fb1;
}

.recentheaderD {
    background-color: #b14b98;
}

.recentheaderG {
    background-color: #649121;
}


.recentdetail {
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-color: #888888;
    text-align: center;
    background-color: #F8F8F8;
    color: #222222;
}

.resultneutral {
    color: #000000;
}

.resultpositive {
    color: #008800;
}

.resultnegative {
    color: #880000;
}

/* SEARCH OPTIONS */
.searchcontrols {
    vertical-align: top;
    background-color: #FEFAEC;
    border-style: solid;
    border-width: 1px;
    border-color: #D2AF44;
    padding: 0px 5px 5px 5px;
    margin-top: 4px;
    position: relative;
}

.searchblock {
    display: inline-block;
    vertical-align: top;
}

.searchoption {
    display: block;
    padding-top: 5px;
    margin-right: 20px;
}

.inlineblock .searchoption {
    display: inline-block;
}

.searchoptioncheck {
    margin-left: -4px;
    margin-right: 16px;
}

.searchoptionlabel {
    display: inline-block;
    margin-right: 5px;
    width: 100px;
}

.searchoptionlabelsmall {
    width: 80px;
}

.searchoptionpadleft {
    padding-left: 48px;
}

.searchoptionpadright {
    margin-right: 70px;
}

.searchdropwide, .searchdropwider, .searchdropfull {
    width: calc(100vw - 190px);
}

.smallpadleft {
    padding-left: 3px;
}

.padright {
    padding-right: 20px;
}

.searchoptionsmall {
    min-width: 71px;
}

.settingdropdown {
    width: 300px;
}

.smalldropdown {
    width: 70px;
}

.numberdropdown {
    width: 40px;
}

.searchbuttonholder {
    display: block;
    text-align: right;
}

.searchbuttonholderinline {
    position: absolute;
    bottom: 6px;
    right: 1px;
}


.searchbutton {
    margin-top: 5px;
    border-style: none;
    border-radius: 4px;
    width: 60px;
    background-color: #459a34;
    padding: 3px 8px;
    color: #FFFFFF;
    cursor: pointer;
    margin-right: 5px;
}

    .searchbutton:hover {
        background-color: #56c73f;
        border-color: #56c73f;
    }

    .searchbutton:disabled {
        background-color: #CCCCCC;
    }


.searchbox {
    width: 470px;
}

.searchboxsmall {
    width: 165px;
}

.searchdrop {
    width: 220px;
}

.paddrop {
    margin-right: 119px;
}



.noresults {
    display: block;
    padding: 16px 0px 0px 50px;
    min-height: 40px;
    background-image: url(images/exclaimorange.gif);
    background-repeat: no-repeat;
    background-position: 4px 14px;
    margin-left: 20px;
    margin-top: 20px;
}

/* END OF SEARCH OPTIONS */

/* password styles */
.passwordarea {
    width: 440px;
    margin: 50px auto;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    box-shadow: #EEEEEE 5px 5px;
    background-color: #fafafa;
}

    .passwordarea h2 {
        background-color: #4472C4;
        border-radius: 10px 10px 0px 0px;
        color: #ffffff;
        margin: 0px;
        padding: 5px;
    }

.passwordbody {
    color: #000000;
    padding: 0px 10px 10px 10px;
}

    .passwordbody .textboxholdersmall {
        width: 238px;
    }


.blockcolour {
    background-color: #F1F1F1;
}

.passwordbox {
    width: 300px;
}

.accountbutton {
    color: #FFFFFF;
    border-style: none;
    border-radius: 2px;
    padding: 2px 10px;
    background-color: #444444;
    height: 20px;
    cursor: pointer;
}

    .accountbutton:hover {
        background-color: #888888;
    }

.passwordinfo {
    color: #222222;
    font-size: 12px;
    padding-left: 10px;
}

/* end password styles */

/* Privacy block styles */
.privacyblock {
    font-size: 14px;
    border-style: solid;
    border-radius: 4px;
    border-color: #888888;
    border-width: 1px;
    width: 90%;
    margin: 80px auto 0px auto;
    padding: 5px;
    background-color: #FCFCFC;
}

.privacytitle {
    font-weight: bold;
}
/* End of privacy block styles*/

/* Did you know styles */

.didyouknow {
    display: block;
    margin: 0px auto 0px auto;
    width: 80%;
    max-width: 650px;
    min-height: 120px;
    border-style: solid;
    border-width: 1px;
    border-radius: 20px;
    border-color: #4472C4;
    background-color: #FAFAFA;
    padding: 10px;
    box-shadow: #EEEEEE 5px 5px;
}

    .didyouknow h3 {
        font-size: 20px;
        margin-top: 0px;
        margin-bottom: 10px;
    }


.didyouknowimage {
    float: left;
    max-width: 125px;
    max-height: 90px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.didyouknowbody {
    line-height: 20px;
}

    .didyouknowbody .standardbutton {
        padding: 4px;
        margin-left: 0px;
    }

/* End of Did you know styles */

/* Resizing styles */
@media screen and (max-width:915px) {
    .pageheader h1 {
        font-size: 18px;
    }
}

@media screen and (max-width:785px) {
    .titlesub {
        display: block;
    }

    .pageheader {
        height: 64px;
    }

    .titleskillset {
        font-size: 16px;
        width: 110px;
        bottom: 3px;
    }
}

@media screen and (max-width:650px) {
    .marginright {
        margin-right: 20px;
    }

    .standardresize {
        padding: 0px 10px;
        width: auto;
        min-width: 60px;
    }

    .searchdropreport {
        width: calc(100vw - 150px);
    }

    .searchoption {
        display: inline-block;
    }
}



@media screen and (max-width:600px) {

    .smalltd, .widetd {
        width: 1px;
        display: none;
        overflow: hidden;
    }

    .labelholder {
        float: none;
        width: auto;
        overflow: hidden;
        display: block;
    }


    .textboxholder {
        overflow: visible;
        display: block;
        margin-left: 20px;
        margin-top: 5px;
    }


    .textboxholderfull {
        overflow: visible;
        display: block;
        margin-top: 2px;
    }

    .questionsmall, .questionmain {
        display: block;
        padding-right: 0px;
        width: auto;
        float: none;
    }

    .standardbutton {
        margin-left: 10px;
        padding: 0px 10px;
        width: auto;
        min-width: 60px;
        margin-bottom: 10px;
    }

    .smallbutton {
        margin-left: 25px;
        width: 80px;
        min-width: 80px;
        height: 20px;
    }

    .attachmentlist {
        margin: 20px 0px 10px 40px;
    }

    .infoblock, .indentblock {
        margin-left: 25px;
    }

    .passwordarea {
        width: 320px;
    }

    .adminbuttonc {
        display: none !important;
    }

    .loginbutton {
        margin-right: 2px;
    }

    .passwordarea .questionmain, .passwordarea .questionfull {
        display: inherit;
        float: left;
        width: 80px;
    }

    .passwordarea .textboxholdersmall {
        width: calc(98% - 75px);
    }

    .passwordarea .fulltextbox {
        width: calc(98% - 4px);
    }
}

@media screen and (max-width:560px) {
    .pageheader {
        background-repeat: no-repeat;
        background-position: right 80px bottom;
        background-size:50%;
    }
}

@media screen and (max-width:530px) {
    .adminbuttonb {
        display: none !important;
    }
}

@media screen and (max-width:480px) {
    .searchboxsmallvariable {
        width: calc(100vw - 310px);
    }
}


@media screen and (max-width:470px) {
    .inlineblock {
        display: block;
    }

    .passwordarea {
        margin: 35px auto 45px auto;
    }

        .passwordarea h2 {
            font-size: 16px;
        }

    .mainarea {
        margin-bottom: 44px;
    }

    .pageheader {
        min-height: 38px;
    }

        .pageheader h1 {
            font-size: 16px;
        }

    .privacyblock {
        font-size: 12px;
        width: 95%;
        margin: 0px auto 0px auto;
    }

    .didyouknow {
        width: 90%;
    }


    .userheader {
        display: none;
    }

    .titleskillset {
        margin-top: 8px;
    }
}

@media screen and (max-width:440px) {
    .headerbutton {
        padding: 4px 6px 3px 6px;
    }

    .searchoption {
        margin-right: 10px;
    }
}

@media screen and (max-width:420px) {
    .titleskillset {
        display: none;
    }
}

@media screen and (max-width:400px) {
    .passwordarea {
        width: 276px;
    }
    .titleskillset {
        display: none;
    }
}

@media screen and (max-width:380px) {
    .adminbuttona {
        display: none !important;
    }
}






/* End of resizing styles */

/* Access code styles */
.accesscodeholder {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 4px;
}

.accesscode {
    font-size: 28px !important;
    padding: 4px;
    margin: 0px 3px;
    border-style: solid;
    border-color: #888888;
    border-radius: 10px;
    height: 40px;
    width: 30px;
    text-align: center;
}

/* Report styles */

.reportholder {
    margin-top: 5px;
    background-color: #FDFDFD;
    border-collapse: collapse;
    width: 100%;
    max-height: 310px;
    overflow-x: auto;
    overflow-y: auto;
}

    .reportholder::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .reportholder::-webkit-scrollbar-thumb {
        background: #646464;
        border-radius: 10px;
    }

    .reportholder::-webkit-scrollbar-track {
        background: #f1f1f1;
        width: 10px;
        height: 10px;
    }

.reporttable {
    border-collapse: collapse;
}

    .reporttable tr td:first-child {
        position: sticky;
        left: 0px;
        z-index: 7999;
    }

    .reporttable a, .reporttable a:visited {
        text-decoration: none;
        color: #000000;
    }



    .reporttable td {
        border-style: solid;
        border-width: 1px;
        padding: 2px;
        border-color: #AAAAAA;
    }

.reportnone {
    background-image: url(images/exclaimorange.gif);
    background-position: 2px 2px;
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-top: 8px;
    margin-top: 20px;
    margin-left: 50px;
    min-height: 40px;
}

.reportwait {
    background-image: url(images/report2.gif);
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0px auto;
    padding-top: 260px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

/* End of Report styles */

/* Graph styles */
.graph {
    display: block;
    margin-bottom: 15px;
    margin-right: 50px;
    width: 100%;
}

    .graph h3 {
        font-size: 17px;
        color: #444444;
        margin-bottom: 12px;
    }

.graphb {
    display: block;
    margin-bottom: 0px;
    margin-right: 50px;
    width: 100%;
}

.graph h3 {
    font-size: 17px;
    color: #444444;
    margin-bottom: 6px;
}

.grapharea {
    position: relative;
}

.graphscroller {
    display: inline-block;
    width: calc(100% - 253px);
    vertical-align: top;
    overflow-x: scroll;
    height: 395px;
}

.graphscrollerb {
    display: inline-block;
    width: calc(100% - 80px);
    vertical-align: top;
    overflow-x: hidden;
    height: 370px;
    overflow-y: hidden;
}

.graphholder {
    height: 320px;
    min-width: 255px;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-color: #C8C8C8;
    display: inline-block;
    vertical-align: top;
    background-image: url('images/grid.gif');
    padding-right: 14px;
}

.graphy {
    display: inline-block;
    vertical-align: top;
}

.graphylabel {
    display: block;
    width: 40px;
    text-align: right;
    padding-right: 2px;
    font-size: 12px;
    color: #444444;
    height: 18px;
    margin-top: -6px;
    margin-bottom: 28px;
}

.graphylabeltall {
    margin-bottom: 52px;
}

.graphyinfo {
    display: inline-block;
    height: 320px;
    width: 15px;
    position: relative;
    text-align: center;
}

.graphyinfolabel {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    padding-top: 20px;
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    /* Firefox */
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    /* IE */
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    font-size: 14px;
    color: #888888;
}

.graphsubtext {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    margin-left: 60px;
    color: #444444;
}

.nomargin {
    margin-bottom: 0px;
}

.graphx {
    clear: both;
    display: block;
    margin-left: 67px;
}

.graphxlabel, .graphxlabelnarrowa, .graphxlabelnarrowb {
    display: inline-block;
    width: 50px;
    padding-top: 4px;
    text-align: center;
    color: #444444;
    font-size: 14px;
    height: 50px;
    overflow: hidden;
}

.graphxlabelnarrowa {
    width: 40px;
}

.graphxlabelnarrowb {
    width: 30px;
}


.graphxlabeldate {
    display: block;
    font-size: 12px;
}

.graphcolumnholder {
    display: inline-block;
    margin-left: 10px;
}

.graphcolumnholdernospace {
    display: inline-block;
    margin-left: 1px;
}

.graphcolumn {
    display: flex;
    /*justify-content: flex-end;*/
    flex-direction: column-reverse;
    height: 320px;
}

.graphblock, .graphblocknarrowa, graphblocknarrowb {
    width: 50px;
    display: block;
    vertical-align: bottom;
}

.graphblocknarrowa {
    width: 40px;
}


.graphblocknarrowb {
    width: 30px;
}

.graphinline {
    display: inline-block;
    margin-left: 40px;
    width: 510px;
    vertical-align: top;
}

.graphinlinenarrow {
    width: 380px;
}

.graphkeyinline {
    display: inline-block;
    margin-left: 15px;
    width: 180px;
    vertical-align: top;
}

.graphkey {
    display: block;
    margin-top: 20px;
    padding: 10px 10px 5px 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #AAAAAA;
    vertical-align: top;
    background-color: #FFFFFF;
}

.graphkeyb {
    display: block;
    padding: 10px 10px 5px 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #AAAAAA;
    vertical-align: top;
    background-color: #FFFFFF;
    position: absolute;
    left: 80px;
    top: 5px;
    opacity: 0.7;
}

.graphkeyitem {
    display: block;
}

.graphkeyicon {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    height: 10px;
    width: 10px;
    vertical-align: top;
}

.graphkeyinfo {
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
    font-size: 12px;
}

.graphkeyinfotitle {
    display: inline-block;
    margin-bottom: 4px;
    color: #222222;
    width: 135px;
    font-weight: bold;
}

.graphkeyinfolabel {
    display: inline-block;
    color: #0000AA;
    width: 50px;
    margin-left: 20px;
}

.graphkeyinfovalue {
    display: inline-block;
    color: #00AA00;
    width: 30px;
    margin-right: 20px;
}

.graphoptions {
    display: block;
}

.graphoptionslabel {
    display: inline-block;
}

.graphoptionscheckbox {
    display: inline-block;
    width: 40px;
    margin-left: -8px;
    margin-right: 5px;
}
.graphoptionscheckboxn {
    width: 35px;
}

@media screen and (max-width:660px) {
    .graphkey {
        position: absolute;
        left: 80px;
        top: 5px;
        margin-top: 0px;
        opacity: 0.7;
    }

    .graphscroller {
        width: calc(100% - 80px);
    }
}

.graphblue {
    background-color: #3280C1;
}

.graphorange {
    background-color: #ef8718;
}

.graphgrey {
    background-color: #CCCCCC;
}

.graphred {
    background-color: #CC0000;
}

.graphgreen {
    background-color: #65c132;
}

.graphdblue {
    background-color: #32b1c1;
}


.graphhalf {
    width: 392px;
    display: inline-block;
    vertical-align: top;
}

.graphfull {
    width: 784px;
    display: inline-block;
}

.printform .graphscrollerb {
    width: inherit;
}

.graphhalf .graphholder {
    width: 300px;
}

.graphfull .graphholder {
    width: 692px;
}

.printform .headertext, .printform .basetext {
    font-size: 18px;
    background-color: #4472C4;
    color: #FFFFFF;
    padding: 5px;
    display: none;
}

.printform .headertext {
    background-image: url(Images/reading.PNG);
    background-repeat: no-repeat;
    background-position: right 5px top;
    background-size: 262px 60px;
}

.printform .basetext {
    font-size: 14px;
}

.printform .summaryholder {
    max-width: 795px;
    margin: 0px auto;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    padding: 4px;
}

.printonly {
    display: none;
}

@media print {


    .summaryholder, .graph {
        -webkit-print-color-adjust: exact;
    }

    .pagebreak {
        page-break-before: always;
    }

    .printonly {
        display: block;
    }


    .printform h3, .printform .pageheader, .printform .headerbar, .printform .headerinfo, .printform .skillsetbar, .printform .searchcontrols, .printform .buttonholder, .printform .pagefooter {
        display: none;
    }

    .printform .headertext, .printform .basetext {
        display: block;
    }


    .printform .summaryholder {
        max-width: 3000px;
        border-style: none;
        padding: 0px;
        margin: 0px;
    }


    .printform {
        max-width: 3000px;
        border-style: none;
        padding: 0px;
        overflow: hidden;
    }

        .printform .graphblock {
            width: 40px;
        }

        .printform .graphxlabel {
            width: 40px;
        }

        .printform .graphblocknarrowa {
            width: 32px;
        }

        .printform .graphblocknarrowb {
            width: 20px;
        }

        .printform .graphxlabelnarrowa {
            width: 32px;
        }

        .printform .graphxlabelnarrowb {
            width: 20px;
        }

        .printform .graphxlabeldate {
            font-size: 10px;
        }

        .printform .graphfull .graphcolumnholder {
            margin-left: 5px;
        }

        .printform .graphb {
            margin-right: 0px;
        }

        .printform .graphhalf {
            width: 340px;
        }

        .printform .graphscrollerb {
            height: 365px;
        }

    .graphhalf .graphholder {
        width: 260px;
    }

    .printform .graphfull {
        width: 695px;
    }

    .printform .graphsubtext {
        margin-top: 0px;
    }

    .graphcolumnholdernospace {
        margin-left: 2px;
    }

    .graphfull .graphholder {
        width: 615px;
    }
}

/* End of Graph styles */

/* Review word styles */

.reviewwordsholder {
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 39px;
    display: table;
    width: 100%;
}

    .reviewwordsholder .standardbutton, .sheetgenerator .standardbutton {
        vertical-align: top;
        width: 134px;
        margin-left: 10px;
        background-color: #687b9e;
        border-radius: 4px 16px 16px 4px;
    }

    .reviewwordsholder .standardbutton {
        margin-bottom: 4px;
    }

        .reviewwordsholder .standardbutton:hover, .sheetgenerator .standardbutton:hover {
            background-color: #8194b6;
        }

        .reviewwordsholder .standardbutton:disabled, .sheetgenerator .standardbutton:disabled {
            background-color: #AAAAAA;
        }

    .reviewwordsholder .standardbuttonsmall {
        display: none;
    }

.reviewwordsheader {
    display: table-cell;
    width: 95px;
    font-weight: bold;
    vertical-align: top;
    padding-top: 9px;
    border-style: solid;
    border-width: 1px 0px 1px 1px;
    border-color: #444444;
    border-radius: 20px 0px 0px 20px;
    padding-left: 10px;
    min-height: 28px;
    background-color: #687b9e;
    color: #FFFFFF;
}

.reviewwords {
    display: table-cell;
    vertical-align: top;
    padding: 2px 10px;
    border-style: solid;
    border-width: 1px 0px;
    border-color: #444444;
    background-color: #fdfff0;
}

.reviewwordstable {
    display: table;
}

.reviewwordsrow {
    display: table-row;
}

.reviewwordscategory {
    display: table-cell;
    width: 160px;
}

.reviewwordslist {
    display: table-cell;
}

.reviewwordsoptions {
    display: table-cell;
    border-style: solid;
    border-width: 1px 1px 1px 0px;
    border-radius: 0px 20px 20px 0px;
    border-color: #444444;
    width: 300px;
    text-align: right;
    vertical-align: top;
    padding-top: 5px;
    background-color: #fdfff0;
    padding-right: 5px;
}

.reviewwordsdropdown {
    vertical-align: top;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    width: 45px;
}

.reviewwordsdropdownmargin {
    margin-top: -4px;
}

.sheetgenerator {
    display: table;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-color: #444444;
    border-radius: 0px 0px 20px 20px;
    padding: 4px;
    background-color: #fdfff0;
    margin: -11px auto 0px auto;
    max-width: 560px;
}


.sheetgeneratoroptions {
    display: table-cell;
    width: 140px;
    text-align: right;
}

.sheetoption {
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
}

.sheetgenerator .standardbutton {
    border-radius: 4px 4px 16px 4px;
}

@media screen and (max-width:755px) {
    .sheetgenerator {
        margin: 20px auto 0px auto;
        border-width: 1px 1px 1px 1px;
        border-color: #444444;
        border-radius: 20px 20px 20px 20px;
    }

        .sheetgenerator .standardbutton {
            border-radius: 4px 16px 16px 4px;
        }

    .reviewwordsdropdownmargin {
        margin-top: 0px;
    }
}

@media screen and (max-width:700px) {
    .reviewwordsholder .standardbutton, .sheetgenerator .standardbutton {
        width: 100px;
        margin-left: 5px;
    }

    .reviewwordsoptions {
        width: 150px;
        padding-right: 10px;
    }
}

@media screen and (max-width:640px) {
    .reviewwordscategory {
        display: block;
        font-size: 16px;
    }

    .reviewwordslist {
        display: block;
        padding-bottom: 6px;
    }

    .sheetoption {
        display: table-cell;
        padding-left: 10px;
        vertical-align: top;
    }



    .sheetgenerator .standardbutton {
        height: 34px;
    }
}

/* End of Review word styles */

/* Contact Form styles */
.contactform {
    margin: 0px 3px 0px 0px;
}

    .contactform h2 {
        font-size: 17px;
    }

    .contactform h3 {
        font-size: 15px;
    }

    .contactform p {
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .contactform a {
        color: #4444CC;
        text-decoration: none;
        font-weight: bold;
    }

        .contactform a:hover {
            text-decoration: underline;
            color: #5555DD;
        }

        .contactform a img {
            vertical-align: middle;
            margin-right: 10px;
            margin-left: 15px;
        }

/* End of Contact Form styles */


/* Wordsheet styles */

.wordform {
    max-width: 674px;
}

.wordsheet {
    width: 100%;
    font-family: Arial;
}

.wordsheetheader {
    min-height: 72px;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #444444;
    margin-top: -7px;
}


.wordsheetheaderimages {
    float: right;
    margin-left: 10px;
}

.wordsheetreference {
    display: block;
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    width: 120px;
    margin: 0 auto;
    text-align: center;
    color: #646464;
    font-size: 16px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    border-radius: 5px;
}

.wordsheetreferencesub {
    display: block;
    margin-top: 0px;
    font-size: 10px;
}

@media screen {
    .wordsheetreference {
        display: none;
    }
}

.wordsheetimage {
    display: inline-block;
    height: 50px;
    margin-left: 10px;
    vertical-align: top;
    margin-top: 8px;
}

.wordsheetlogo {
    display: inline-block;
    height: 64px;
    padding-top: 5px;
    vertical-align: top;
}

.wordsheetfooter {
    font-size: 10px;
    color: #888888;
    padding: 4px;
    position: absolute;
    bottom: 8px;
    width: calc(100% - 24px);
}

.wordsheetheaderinstruction {
    display: block;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.wordsheettitle {
    font-size: 15px;
    display: inline-block;
    color: #444444;
    text-align: center;
    padding-top: 14px;
    width: calc(100% - 340px);
}

.wordsheettitlesub {
    display: none;
}

.wordsheettitlesubtext {
    display: block;
}

@media all and (max-width:880px) {
    .wordsheettitle {
        width: 100%;
        padding-top: 5px;
    }

    .wordsheettitlesub {
        display: inline-block;
    }

    .wordsheettitlesubtext {
        display: inline-block;
    }
}


.wordsheetsectionheader {
    text-decoration: underline;
    font-weight: bold;
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

.wordsheetseparator {
    display: block;
    width: 98%;
    margin: 0px auto 5px auto;
}

.wordsheetdetail {
    font-family: ABeeZee, Comme, Opendyslexic, Cavolini, 'Comic Sans MS', Arial, Helvetica, sans-serif;
    display: block;
    margin-top: 30px;
    overflow: hidden;
    padding: 0px 0px 20px 0px;
    margin-bottom: 4px;
}

.wordsheetprobe {
    margin-bottom: 30px;
}

.wordsheetitem5 {
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-size: 120px;
}

.wordsheetitem10 {
    display: inline-block;
    width: 49%;
    font-size: 70px;
    margin-bottom: 50px;
    text-align: left;
}




.wordsheetitem20 {
    display: inline-block;
    width: 49%;
    font-size: 52px;
    margin-bottom: 18px;
    text-align: left;
}

.wordsheetitem42 {
    display: inline-block;
    width: 30%;
    font-size: 36px;
    margin-left:20px;
    margin-bottom: 18px;
    text-align: left;
}

.wordsheetitem60 {
    display: inline-block;
    width: 30%;
    font-size: 24px;
    margin-left: 30px;
    margin-bottom: 10px;
    text-align: left;
}

.wordsheetitem80 {
    display: inline-block;
    width: 24%;
    font-size: 24px;
    margin-bottom: 12px;
    text-align: left;
}

.wordsheetitem100 {
    display: inline-block;
    width: 24%;
    font-size: 18px;
    margin-bottom: 10px;
    text-align: left;
}

.skillsheetquestion {
    display: inline-block;
    -webkit-print-color-adjust: exact;
    min-width: 200px;
    font-size: 36px;
    margin-bottom: 12px;
    padding-left: 20px;
    text-align: left;
}



.skillsheetanswer {
    border-style: solid;
    border-width: 3px;
    border-color: #646464;
    padding: 0px 18px;
    vertical-align: middle;
    display: inline-block;
    height: 34px;
    margin: 0px 5px;
}

@media print {
    .skillsheetquestion {
        background-color: #FBFBFB;
    }
    .skillsheetquestion:nth-of-type(odd) {
        background-color: #F1F1F1;
    }
}

@media screen and (max-width:700px) {
    .skillsheetquestion {
        width: 45%;
    }
}

@media screen and (max-width:350px) {
    .skillsheetquestion {
        width: 90%;
    }
}


.wordsheetordinal {
    min-width: 80px;
    text-align: right;
    display: inline-block;
    margin-right: 20px;
    color: #0000AA;
}

.wordsheetsectionholder {
    clear: both;
    width: 98%;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #444444;
    margin: 0 auto;
}

    .wordsheetsectionholder .wordsheetsectionheader, .wordsheetsectionholder .wordsheetsectionfooter {
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;
        text-decoration: none;
        font-size: 18px;
    }


@media print and (min-width:700px) {
    .wordsheetitem100 {
        width: 150px;
        font-size: 22px;
        margin-bottom: 6px;
        margin-left:10px;
    }

    .wordsheetitem80 {
        width: 180px;
        font-size: 20px;
        margin-left: 10px;
        margin-bottom: 8px;
    }

    .wordsheetitem60 {
        width: 190px;
        font-size: 26px;
        margin-left:10px;
        margin-bottom: 12px;
    }

    .wordsheetitem42 {
        width: 190px;
        font-size: 30px;
        margin-bottom: 18px;
        margin-left: 10px;
    }

    .wordsheetitem20 {
        width: 300px;
        margin-left: 20px;
        font-size: 50px;
        margin-bottom: 16px;
    }

    .wordsheetitem10 {
        width: 300px;
        margin-left: 20px;
        font-size: 64px;
        margin-bottom: 50px;
    }

    .wordsheetitem5 {
        width: 470px;
        margin-left:30px;
        text-align: left;
        display: inline-block;
        font-size: 90px;
        margin-bottom: 60px;
    }
}

.reviewheader {
    text-decoration: underline;
    color: #888888;
    font-size: 16px;
}

.reviewlinebreak {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 16px;
}

.reviewincorrect {
    color: #880088;
    font-weight: bold;
}

.reviewfluency {
    color: #000088;
}

.reviewcorrect {
    color: #000000;
    font-style: italic;
}

.printbutton {
    float: right;
    margin-left: 10px;
    margin-bottom: 5px;
}


@media print {
    .printbutton {
        display: none;
    }
}

.wordsheetdisplay {
    max-width: 1900px;
}

@media screen {
    .wordsheetdisplay {
        background-color: #fbfce8;
    }
}

.wordsheetdisplay .wordsheetitem100 {
    max-width: 200px;
    min-width: 14%;
    width: auto;
    font-size: 18px;
    margin-bottom: 8px;
}

.wordsheetdisplay .wordsheetitem80 {
    max-width: 240px;
    min-width: 18%;
    width: auto;
    font-size: 20px;
    margin-bottom: 8px;
}

.wordsheetdisplay .wordsheetitem60 {
    max-width: 280px;
    min-width: 18%;
    width: auto;
    font-size: 24px;
    margin-bottom: 8px;
}

.wordsheetdisplay .wordsheetitem42 {
    max-width: 300px;
    min-width: 22%;
    width: auto;
    font-size: 30px;
    margin-bottom: 8px;
}

.wordsheetdisplay .wordsheetitem20 {
    max-width: 340px;
    min-width: 24%;
    width: auto;
    font-size: 58px;
    margin-bottom: 8px;
}

.wordsheetdisplay .wordsheetitem10 {
    max-width: 500px;
    min-width: 32%;
    width: auto;
    font-size: 70px;
    margin-bottom: 20px;
}

.wordsheetdisplay .wordsheetitem5 {
    display: inline-block;
    width: auto;
    max-width: 700px;
    min-width: 48%;
    font-size: 110px;
    margin-bottom: 20px;
}



.wordsheetdisplay .printbutton {
    display: none;
}



/* End of Wordsheet styles */

/* Yes - No styles */

.yesnobox {
    width: 80%;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    margin-top: 20px;
    border-radius: 10px;
    padding: 0px;
    box-shadow: #EEEEEE 5px 5px;
}

    .yesnobox h2 {
        margin-top: 0px;
        background-color: #4472C4;
        padding: 5px;
        color: #FFFFFF;
        border-radius: 10px 10px 0px 0px;
    }

    .yesnobox .buttonholder {
        padding: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }


/* End of Yes - No styles*/




/* EPS Styling */

.pagefooter {
    background-color: #f1f1f1;
    color: #444444;
    font-size: 12px;
    border-style: solid;
    border-color: #888888;
    border-width: 1px 0px 0px 0px;
    height: 70px;
    overflow: hidden;
}


.pagefootercontent {
    position: relative;
    height: 70px;
}

.pagefooterlogo {
    display: block;
    height: 66px;
    position: relative;
    left:6px;
    top:1px;
    z-index: 1000;
}

.pagefooterimageholder {
    position: absolute;
    top: 0px;
    right: 5px;
}

.pagefooterimage {
    height: 52px;
    margin-top: 1px;
}

.pagefootertext {
    display: block;
    right: 6px;
    bottom: 1px;
    position: absolute;
    z-index: 1000;
}


a, a:visited {
    color: #0000AA;
}

.pagefooter a, .pagefooter a:hover, .pagefooter a:visited {
    text-decoration: none;
    border-style: none;
}



@media screen and (max-width:570px) {

    .pagefooter, .pagefootercontent {
        height: 80px;
    }

}

@media screen and (max-width:420px) {

    .pagefooter, .pagefootercontent {
        height: 85px;
    }
}



/* End of EPS Styling */

/* Workgroup styling */

.workgroupheader {
    font-size: 16px;
    margin-top: 2px;
    margin-bottom: 0px;
    background-color: #687b9e;
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #444444;
    border-radius: 10px 0px 0px 0px;
    color: #FFFFFF;
}

.workgrouplistholder {
    width: 44%;
    display: inline-block;
    vertical-align: top;
}

.workgrouplist {
    width: 100%;
    height: 160px;
    border-style: solid;
    border-color: #444444;
    border-width: 1px;
    border-radius: 0px 0px 0px 10px;
    background-color: #f9f9f2;
}

.workgroupcontrols {
    width: 10%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-top: 30px;
}

.workgroupbutton {
    width: 60px;
    margin-bottom: 10px;
    margin-left: 0px;
}

@media screen and (max-width:680px) {
    .workgrouplistholder {
        width: 40%;
    }

    .workgroupcontrols {
        width: 80px;
    }
}

.grouplistholder {
    width: 49%;
    display: inline-block;
    vertical-align: top;
}

@media screen and (max-width:500px) {
    .workgrouplistholder {
        width: 35%;
    }
}

.workgrouplistholder .questionsmall {
    background-color: #687b9e;
    font-size: 14px;
    padding: 2px 5px 3px 5px;
    border-style: solid;
    border-width: 1px 0px 1px 1px;
    border-color: #444444;
    border-radius: 10px 0px 0px 10px;
    color: #FFFFFF;
    width: 100px;
    height: 16px;
}


.workgrouplistholder .standardbutton {
    font-size: 14px;
    padding: 2px 5px 3px 5px;
    border-radius: 0px 10px 10px 0px;
    color: #FFFFFF;
    height: 23px;
    margin-top: 2px;
}

.workgroupcontrols .lightbluebutton {
    height: 23px;
    margin-top: 23px;
}

.workgroupcontrols .standardbutton:disabled {
    background-color: #AAAAAA;
}


/* End of Workgroup styling */

/* Videolink styling */
.videolinks {
    border-style: solid;
    border-width: 1px;
    border-radius: 8px;
    border-color: #888888;
    padding: 4px;
    width: 280px;
    margin-bottom: 20px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
    height: 180px;
}

    .videolinks h3 {
        background-color: #4472C4;
        color: #FFFFFF;
        font-size: 16px;
        padding: 3px;
        margin-top: 0px;
        border-radius: 6px 6px 0px 0px;
    }

    .videolinks ol {
        padding-inline-start: 25px;
        padding-left: 25px;
    }

    .videolinks li > * {
        vertical-align: text-top;
    }

.noheight {
    height: 1px;
}

.videolinkswide a {
    display: inline-block;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-radius: 8px;
    border-color: #888888;
    padding: 5px 4px;
    width: 280px;
    margin-bottom: 20px;
    margin-right: 10px;
    vertical-align: top;
    height: 52px;
}

    .videolinkswide a:hover, .videolinks li:hover {
        background-color: #fefaf0;
    }

    .videolinkswide a img {
        width: 90px;
        display: none;
        margin: 0px auto 10px auto;
        border-radius: 8px;
    }

.videolinksub {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #000000;
}

.videolinks a {
    display: inline-block;
    width: 99%;
}


@media screen and (max-width:678px) {


    .videolinkswide a img {
        display: none;
    }

    .videolinkswide a {
        height: 35px;
        margin-bottom: 5px;
        border-style: none;
        padding: 5px 2px;
    }

    .videolinkswide {
        border-style: solid;
        border-width: 1px;
        border-color: #888888;
        border-radius: 8px;
        width: 286px;
    }
}

/* End of Videolink styling */

/* Acknowledgements styling */

.acknowledgements {
    margin: 20px 0px 10px 0px;
}

.fullbutton {
    width: 260px;
    height: 20px;
    border-radius: 8px;
}

/* End of acknowledgements styling */

/* Sort Styling */
.sort a, .sort a:visited, .sort a:hover {
    text-decoration: none;
    color: #000000;
    display: block;
    width: 100%;
    position: relative;
}

    .sort a .sorticon {
        position: absolute;
        top: 0px;
        right: 2px;
    }

/* Sort Styling */
/* New Styles */
body {
    background-color: #F1F1F1;
}

form {
    max-width: 1200px;
    padding: 4px;
    border-style: solid;
}

.pagefooter {
    bottom: 4px;
    padding: 0px;
    width: calc(100% - 8px);
}


.videolinkswide a {
    width: calc(33% - 20px);
}

.videolinks {
    width: calc(50% - 25px);
}

@media screen and (max-width:900px) {
    .videolinkswide a {
        width: calc(50% - 25px);
    }

    .videolinks {
        width: calc(50% - 25px);
    }
}

@media screen and (max-width:678px) {
    .videolinkswide {
        width: 100%;
        margin-right: 0px;
    }

        .videolinkswide a {
            width: calc(100% - 5px);
            height: 60px;
        }

    .videolinks {
        width: calc(50% - 15px);
        margin-right: 3px;
    }
}

@media screen and (max-width:615px) {
    .videolinks {
        height: auto;
        width: calc(100% - 8px);
        margin-right: 0px;
    }
}

@media screen and (min-width:800px) and (max-width:1200px) {
    .searchdropwide {
        width: calc(398px + (100vw - 990px));
    }
}

@media screen and (min-width:800px) and (max-width:1200px) {
    .searchdropwider {
        width: calc(398px + (100vw - 880px));
    }
}

@media screen and (min-width:650px) and (max-width:1200px) {
    .searchdropreport {
        width: calc(398px + (100vw - 850px));
    }
}

@media screen and (min-width:1200px) {
    .searchdropwide {
        width: 630px;
    }
}

@media screen and (min-width:1200px) {
    .searchdropwider {
        width: 720px;
    }
}

@media screen and (min-width:1200px) {
    .searchdropreport {
        width: 760px;
    }
}

@media screen and (max-width:450px) {
    .searchdropwide, .searchdropwider, .searchdropfull {
        width: 100%;
    }
}

.searchdrop {
    width: 170px;
}


/* End of New Styles */


/* Reading page styles */
.readholder {
    width: 98%;
    height: calc(100vh - 305px);
    overflow-y: scroll;
    overflow-x: hidden;
    word-wrap: break-word;
    font-size: 40px;
    font-family: Comme;
    border-style: solid;
    border-width: 1px;
    padding: 10px;
    line-height: 1.4em;
    position: relative;
}

    .readholder .readhighlight {
        background-color: #efef5e;
    }

.readsave {
    background: url(images/diskicon.gif) no-repeat 4px 4px;
    width: 70px;
    padding-bottom: 30px;
    height: 70px;
    line-height: 10px;
    display: block;
    margin-top: 30px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    border-radius: 4px;
    background-color: #EEEEEE;
    color: #AA0000;
}

.readsavealt {
    display: none;
}

@media screen and (max-width:600px) {
    .readsave {
        display: none;
    }

    .readsavealt {
        display: block;
    }
}


.reading {
    position: absolute;
}

.readingbutton {
    width: 80px;
}
/* End of reading page styles */



/* Video window styles */
.videoholder {
    display: none;
    width: 70%;
    margin-left: 10px;
    margin-bottom: 10px;
    vertical-align: top;
    border: 1px;
    border-style: solid;
    border-color: #AAAAAA;
    text-align: center;
    background-color: #FAFAFA;
    position: relative;
    float: right;
    padding-bottom: 35%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

    .videoholder iframe, .videoholder object, .videoholder embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-style: none;
    }


.html5-video-container {
    top: 2px !important;
}

.html5-video-player .video-click-tracking, .html5-video-player .video-stream {
    top: 0px !important;
}

/* End of Video Window Styles */


/* Reset password example screen styles */
.emailinfo {
    border-style: solid;
    border-width: 1px;
    border-color: #AAAAAA;
    background-color: #FFFFFA;
    padding: 10px;
    width: 90%;
    margin: 0 auto 20px auto;
    border-radius: 15px;
}

.rounder {
    border-radius: 10px;
}

.emailexample {
    background-color: #FFFFFF;
    width: 80%;
    margin: 30px auto;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    padding: 10px;
    box-shadow: 5px 5px #CCCCCC;
}

.linkexample {
    color: #0000AA;
    text-decoration: underline;
}

a.underline {
    text-decoration: underline;
}

.infoaccess {
    border-style: solid;
    border-width: 5px;
    border-color: #4472C4;
    padding: 20px;
    background-color: #FFFFFF;
    text-align: center;
    font-size: 18px;
    color: #000000;
    margin: 20px auto;
    width: 50%;
}

/* End of reset password example screen styles */

/* Message styles */
.messagedisplay {
    height: 180px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    padding: 5px 2px;
    width: 98%;
    margin: 15px auto 20px auto;
    background-color: #FAFAFA;
}

.messagereceiver, .messagesender {
    display: block;
    min-height: 40px;
    padding: 5px;
    border-style: none;
    border-width: 0px;
    margin-bottom: 10px;
    word-break: break-word;
    box-shadow: 4px 4px 4px #AAAAAA;
}

.messagesender {
    background-color: #fdf0ca;
    border-radius: 24px 4px 24px 4px;
    margin-right: 20px;
    margin-left: 5px;
    text-align: left;
    padding-right: 18px;
}

.messagereceiver {
    background-color: #bae4fa;
    border-radius: 4px 24px 4px 24px;
    margin-right: 5px;
    margin-left: 20px;
    text-align: right;
    padding-left: 18px;
}

.messageyou, .messageinitials {
    height: 30px;
    padding-top: 11px;
    width: 40px;
    border-style: none;
    border-radius: 20px;
    vertical-align: top;
    font-size: 16px;
    color: #FFF;
    margin-bottom: 10px;
    text-align: center;
}

.messageyou {
    background-color: #298DC0;
    float: right;
    margin-left: 10px;
}

.messageinitials {
    background-color: #cda215;
    float: left;
    margin-right: 10px;
}

.messageheader {
    display: block;
    color: #000000;
    font-size: 12px;
    margin-bottom: 2px;
}

.messagetime {
    color: #440000;
}

.messagetitle {
    font-weight: bold;
    display: block;
    margin-bottom: 3px;
}

.messagetext {
    display: block;
}

.messageunread {
    font-weight: bold;
    color: #AA0000;
}

.messageinfo {
    display: block;
    width: 80%;
    margin: 10px auto;
    border-style: solid;
    border-width: 2px;
    border-color: #AAAAAA;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    background-color: #fdfaf4;
}

.messagealert {
    display: block;
    min-height: 40px;
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    width: calc(100% - 14px);
    word-break: break-word;
    box-shadow: 4px 4px 4px #AAAAAA;
    background-color: #FAFFFA;
}

    .messagealert a {
        text-decoration: none;
    }

.messagealerticon {
    height: 40px;
    padding-top: 11px;
    width: 50px;
    border-style: none;
    border-radius: 30px;
    vertical-align: top;
    font-size: 24px;
    color: #FFF;
    margin-bottom: 10px;
    text-align: center;
    background-color: #008800;
    float: left;
    margin-right: 10px;
}

.messageread {
    background-color: #AA0000;
    font-size: 17px;
    border-radius: 8px;
    width: 20px;
    color: #FFF;
    text-align: center;
    height: 20px;
    position: absolute;
    bottom: 0px;
    right: 4px;
}
/* End of Message Styles */

/* Font selection Styles */

.fontstyle {
    display: inline-block;
    margin-left: 10px;
    margin-right: 20px;
    font-size: 12px;
    width: 80px;
    position: relative;
    vertical-align: 5px;
    text-align: left;
}

.fontpositiona {
    position: absolute;
    left: 20px;
    top: 0px;
}

.fontpositionb {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.fontseparator {
    position: absolute;
    left: 50px;
    font-size: 25px;
}

.fontstyleicon {
    font-size: 23px;
    vertical-align: top;
}



.fontstylea {
    font-family: ABeeZee, Comme, Opendyslexic, Cavolini, 'Comic Sans MS', Arial, Helvetica, sans-serif;
}

.fontstyleb {
    font-family: Comme, Opendyslexic, Cavolini, 'Comic Sans MS', Arial, Helvetica, sans-serif;
}

@media screen and (max-width:465px) {
    .fontstyle {
        margin-right: 50px;
    }
}

@media screen and (max-width:400px) {
    .fontstyle {
        margin-right: 10px;
    }
}

.fontstylesheet {
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 4px;
    vertical-align: top;
}


/* End of Font Selection Styles */


/* Interaction Styles */

.interactionanswer {
    display: inline-block;
    min-width: 150px;
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.interactionquestion {
    display: inline-block;
    width: 30px;
    padding-right: 5px;
    text-align: right;
}

.interactionpad {
    margin-left: 44px;
}

/* End of Interaction Styles */

/* Skill Set Styles */
.skillsetbar {
    background-color: #f0bf4e;
    padding-top: 2px;
    padding-left: 12px;
    height: 25px;
    position: relative;
}

.skillseticons {
    position: absolute;
    top: 2px;
    right: 10px;
    font-size: 20px;
    color: #FFFFFF;
}

.skillsetbutton {
    display: inline-block;
    margin-left: 10px;
}

    .skillsetbutton a {
        color: #f3ebbe;
        text-decoration: none;
    }

.skillsetselected a {
    color: #5e520e !important;
}

.skillsetbutton a:hover {
    color: #fdfcf5;
}

@media screen and (max-width:440px) {
 
    .skillsetbar {
        padding-left: 6px;
    }

    .skillseticons {
        right: 6px;
    }

}
/* End of Skill Set Styles */


/* Chevron Styling */

.chevrongroup {
    width: 98%;
    margin-left: 1%;
    margin-top: 15px;
    -webkit-print-color-adjust: exact;
}

.chevrongroup, .chevrontitle, .chevronwordlist, .chevroncolumns {
    border-style: solid;
    border-width: 2px;
    border-color: #888;
}

.chevroncolumns {
    border-width: 2px 2px 0px 2px;
}

.chevrontitle {
    display: block;
    text-align: center;
    padding: 2px;
    border-width: 0px 0px 2px 0px;
    font-size: 16px;
    z-index: 1000;
}

.chevrons {
    width: 350px;
    padding-left: 22px;
    display: inline-block;
}

.chevronheader {
    display: inline-block;
    vertical-align: top;
    width: 60px;
    text-align: center;
    margin-top: -6px;
    font-size: 12.8px;
}

.chevrondetail {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    color: #000;
    margin-top: -37px;
    height: 38px;
    width: 250px;
    padding: 2px 5px;
    border-style: solid;
    border-width: 2px 2px 2px 0px;
    border-radius: 0px 4px 4px 0px;
    border-color: #4472C4;
}

.chevrondetailred {
    border-color: #FF0000;
}

.chevronwordlist {
    display: inline-block;
    vertical-align: top;
    padding-left: 10px;
    font-size: 40px;
    border-width: 0px 0px 0px 2px;
    width: calc(98% - 380px);
}

.chevrona, .chevronb, .chevronbbluered, .chevronbred, .chevronbredblue, .chevronc {
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 55px;
    color: #FFF;
    font-size: 14px;
}

.chevrona {
    background-image: url(Images/chevrona.png);
}

.chevronb {
    background-image: url(Images/chevronb.png);
}

.chevronbbluered {
    background-image: url(Images/chevronbbluered.png);
}

.chevronbred {
    background-image: url(Images/chevronbred.png);
}

.chevronbredblue {
    background-image: url(Images/chevronbredblue.png);
}


.chevronc {
    background-image: url(Images/chevronc.png);
}

.chevronworditem {
    display: inline-block;
    width: 220px;
    font-size: 40px;
    margin-bottom: 10px;
}

.chevroncolumnheader {
    font-size: 18px;
    text-decoration: none;
    padding-top: 2px;
    padding-bottom: 2px;
}

.chevroninstruction {
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    border-radius: 10px;
    background-color: #FAFAFA;
    padding: 10px;
    width: 300px;
    margin-bottom: 20px;
}


.wordsheetfooter {
    display: none;
}

@media print {

    .chevrongroup {
        width: 100%;
        border-style: none;
        margin: 0px;
    }

    .chevrons {
        width: 270px;
        padding-left: 5px;
    }

    .chevrondetail {
        width: 190px;
        font-size: 14px;
        padding: 2px 3px;
    }

    .chevroninstruction {
        width: 235px;
    }

    .chevronwordlist {
        width: calc(100% - 300px);
    }

    .chevronworditem {
        display: inline-block;
        width: 124px;
        margin-bottom: 3px;
        font-size: 27px;
    }

    .chevroncolumnheader {
        font-size: 15px;
    }

    .wordsheetsectionfootertitle {
        display: block;
    }

    .wordsheetsectionholder .wordsheetsectionheader {
        margin-top: 4px;
        margin-bottom: 4px;
        font-size: 15px;
    }

    .wordsheetsectionholder .wordsheetsectionfooter {
        margin-top: 4px;
        margin-bottom: 4px;
        font-size: 15px;
    }

    .wordsheetfooter {
        display: block;
    }
}

/* End of Chevron Styling */

/* Survey Styling */

.surveyholder {
    border-style: solid;
    border-radius: 4px;
    border-color: #444444;
    background-color: #fcfbed;
    border-width: 1px;
    width: calc(100% - 12px);
    padding: 5px;
    margin-top: 10px;
}

    .surveyholder h2 {
        padding-top: 0px;
        margin-top: 0px;
    }

.surveyqrcode {
    width: 200px;
    vertical-align: top;
}

.surveytext {
    display: inline-block;
    vertical-align: top;
    max-width: calc(100% - 20px);
    margin-left: 10px;
}

    .surveytext p {
        padding-top: 0px;
    }

/* End of Survey Styling */


/* Section colours */

.readingcolour {
    /* rajah */
    background-color: #FBAB60;
}

.spellingcolour {
    /* sage */
    background-color: #BCB88A;
}

.numeracycolour {
    /* nyanza */
    background-color: #E9FFDB;
}

    .numeracycolour .skillsetbutton a {
        color: #C6C6C6;
    }

        .numeracycolour .skillsetbutton a:hover {
            color: #888888;
        }

/* End of section colours */


/* Style overrides */
.nodisplay {
    display: none;
}

.noborder {
    border-style: none;
}

.notop {
    margin-top: 0px;
}

.notoppadding {
    padding-top: 0px;
}

.noleft {
    padding-left: 0px;
}

.noright {
    margin-right: 0px;
}

.smalltop {
    margin-top: 5px;
}

.smallbottom {
    margin-bottom: 5px;
}

.midtop {
    margin: 10px 0px 0px 0px;
}

.linkbutton:visited {
    color: #FFFFFF;
}
/* End of style overrides */
/* Number spinner override */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

/* Number spinner override */
.searchdropreport option:disabled {
    color: #4472C4;
    font-weight: bold;
}

.randomizer {
    position: absolute;
    font-size: 10px;
    color: #646464;
    bottom: 80px;
    left: 5px;
}


.skillsheetblocks {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 18px;
}

.skillsheetblocks .testnumeracyone, .skillsheetblocks .testnumeracytwo {
    font-size: 18px;
    width: 52px;
    line-height: 22px;
    margin-top: -2px;
}

.skillsheetblocks .testnumeracyone {
    top: 18px;
}

.skillsheetblocks .testnumeracyequal {
    display:inline-block;
    vertical-align:middle;
    font-size:30px;
    margin-top:14px;
}
    .skillsheetblocks .testnumeracyanswer, .skillsheetblocks .skillsheetanswerlarge, .skillsheetblocks .skillsheetanswerwide {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-style: solid;
        border-width: 1px;
        border-color: #444444;
        background-color: #FFFFFF;
        vertical-align: top;
        margin-left: 6px;
    }

.skillsheetblocks .testnumeracygroup {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-left:6px;
    margin-right:6px;
}
    .skillsheetblocks .skillsheetanswerlarge {
        width: 54px;
        height: 54px;
        margin-left: 10px;
        margin-right: 0px;
    }
    .skillsheetblocks .skillsheetanswerwide {
        width: 180px;
        height: 45px;
        margin-left: 10px;
        margin-right: 0px;
    }