@media screen and (max-width: 300px) {
    #full-width-container div.terms div.row label {
        width: 85%;
        /*font-size: smaller;*/
    }

    body {
        font-size: 0.60em !important
    }
}
@media screen and (max-width: 320px) {
    #full-width-container div.terms div.row label {
        width: 85%;
        /*font-size: smaller;*/
    }

    body {
        font-size: 0.75em
    }
}
@media screen and (max-width: 850px) {
    body {
        width: 100%;
    }

    #body-container {
        width: 98%;
    }

    #content-container {
        width: 100%;
    }

    #left-container {
        width: 92%;
        margin: 2%;
        padding: 0 2%;
    }

    .right-container {
        width: 92%;
        margin: 2%;
        padding: 10px 2%;
    }
    
    .right-container-group {
        margin: 10px 10px 0 10px;
        padding: 10px 2% 8px 2%;
    }

    #message-container {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #full-width-container{
        width: auto;
        margin: 20px 20px 0 20px;
        padding: 10px;
    }

    #full-width-container div.row label{
        width:auto !important;
    }

    .nav-home {
        display: none;
    }

    .cssgradients #navigation-container li {
        height: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .cssgradients #navigation-container li a {
        /*line-height: 20px;*/
    }

    .call-out {
        position: static;
    }
    
    #progress-container ol {
        margin-left: 10px;    
    }

    #progress-container .four-step li, #progress-container .three-step li {
        width: 100%;
    }

    #header-container {
        padding: 0 2% 0 2%;
        min-height: inherit;
        padding-bottom: 10px;
    }

    #header-container img {
        width: 95%;     
    }

    #create-usi-container p, #left-container #forgotten-usi-container p {
        width: 100%;
    }
    
    /* wrapping the field beneath the label */
    
    label, .row label {
        display: block;
        margin: 0 0 3px 0;
        width: auto;
    }

    .sub-group .field-validation-error {
        margin-left: 0;
    }

    .terms .row label {
        margin: 0.4em 0 10px;
    }

    .terms h2 {
        margin: 0 5px;
        font-size: 105%;
    }

    .format {
        margin: 0 0 3px 0;
    }

    .row input, .row select {
        margin-bottom: 10px;
        width: auto;
    }

    .row label.mandatory img {
        display: inline;
        position: relative;
        margin-left:10px;
    }

    .field-validation-error, .not-matched, .match {
        margin: -5px 0 5px 0;
    }

    #left-container dt, #message-container dt, #full-width-container dt {
        width: 32%;
    }
    
    #left-container dd, #message-container dd, #full-width-container dd {
        width: 60%;
    }

    .radio-button-grp {
        width: 100%;   
    }

    select.fixed {
        width: 98%;   
    }

    .sub-group fieldset label {
        margin: 0;
    }

    div.radio-button-grp label {
        width: auto;
    }

    input.wideText {
        width: 93%;
        max-width: 93%;
    }

     li {
        width: 96%;
    }
     
    .tiles li div {
        width: 98%;
        min-height: 70px;
    }

    .cssgradients #navigation-container li {
        width:33.3%
    }

    #banner {
        height: auto;
    }

    #banner-sub {
        width: 100%;
        height: auto;
        display: inline-block;
    }

    #banner #login-status-container {
        font-size: 0.92em;
        padding: 2px 0 2px 2px;
    }

    .environment {
        font-size: inherit;
        line-height: 1.1em;
        padding: 2px;
    }

    #breadcrumb-container {
        font-size: 90%;
        padding-left: 5px;
    }

    #breadcrumb-container .breadcrumb {
        margin: -1px .25em 0 .25em;
    }

    #navigation-container {
        font-size: 0.88em;
    }

    .hint-block {
        padding-left: 10px;
        padding-right: 10px;
        width: 92%;
        margin: 10px 0 10px 0;
    }

    /* tables */

    table.mobile, table.mobile thead, table.mobile tbody, table.mobile th, table.mobile td, table.mobile tr { 
        display: block; 
    }
	
    table.mobile thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
	
    table.mobile td { 
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%; 
        font-size:inherit;
        height: auto;
    }

    table.mobile td.transcriptselect { 
        padding-left: 5px; 
    }
    

    table.mobile td.qualunit { 
        padding-left: 45%; 
    }
	
    table.mobile td:before { 
        position: absolute;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }
	
    table.mobile tr.footer td {
        padding-left: 0;
    }

    table.mobile tr.footer td:before { 
        content: none;
    }

    .pager {
        display: block;
        margin-bottom: 10px;
    }

    .pager, .rec-count {
        margin-left: 10px;
    }

    .pager li a {
        padding: 4px;
    }

    table a {
        padding-right: 5px;
    }

    /*  Transcripts  */

    .qualification-row p.text-center {
        text-align: left;
    }

    #transcript-container {
        width: 100%;
    }

    /*  Labels the table data  */
    tr.view-permission-row td:nth-of-type(1):before { content: "Organisation Name"; color: #426b69; }
    tr.view-permission-row td:nth-of-type(2):before { content: "Organisation Code"; color: #426b69; }
    tr.view-permission-row td:nth-of-type(3):before { content: "Expiry Date"; color: #426b69; }
    tr.view-permission-row td:nth-of-type(4):before { content: "View Details"; color: #426b69; }
    tr.view-permission-row td:nth-of-type(5):before { content: "Update Details"; color: #426b69; }

    tr.found-org-row td:nth-of-type(1):before { content: "Organisation Name"; color: #426b69; }
    tr.found-org-row td:nth-of-type(2):before { content: "Organisation Code"; color: #426b69; }
    tr.found-org-row td:nth-of-type(3):before { content: "ABN"; color: #426b69; }
    tr.found-org-row td:nth-of-type(4):before { content: ""; }

    /*tr.qualification-row td:nth-of-type(1):before { content: "Hide"; color: #426b69; }*/
    tr.qualification-row td:nth-of-type(2):before { content: "Qualification"; color: #426b69;}    
    
    /*tr.noncontinuing-row td:nth-of-type(1):before { content: "Hide"; color: #426b69; }*/   
    /*tr.noncontinuing-row td:nth-of-type(2):before { content: "Unit/Module (ID \0365  \0365  )"; color: #426b69; white-space: pre;}*/
    tr.noncontinuing-row td:nth-of-type(2):before { content: "Outcome"; color: #426b69; }
    tr.noncontinuing-row td:nth-of-type(3):before { content: "Enrolment Period"; color: #426b69; }
    
    /*tr.continuing-row td:nth-of-type(1):before { content: "Hide"; color: #426b69; }*/            
    /*tr.continuing-row td:nth-of-type(2):before { content: "Unit/Module (ID \0365  \0365  )"; color: #426b69; white-space: pre;}*/	
    tr.continuing-row td:nth-of-type(2):before { content: "Outcome"; color: #426b69; }
    tr.continuing-row td:nth-of-type(3):before { content: "Commenced"; color: #426b69; }


    .transcriptselectlabel
    {         
        display:inline !important;
        color: #426b69 !important;
        float: left !important;
        width: 38px;
        margin-right: 30%;
        height: 100%;
        border-bottom: 1px dotted;
    }

    .transcriptunitmodulelabel {
        display:inline !important;
        color: #426b69 !important;
        float: left !important;
        width: 90px;
        padding-right: 12%;
        height: 100%;
    }

    /*.mobiletitle {
        border-bottom: 1px dotted;
        position: relative;
    }*/

    .mobiletitle .title {
        position: absolute;
        display: inline;
        top: -50px;
        background-color: #426b69;
        color: white;
        padding: 4px;
        left: 40px;
        width: 200px;
        
    }
    .lastLoginShow 
    {
        display: inline-block;
        float: none !important;
        margin: 0px !important;
        text-align: center;
    }

    .password-requirements {
        margin-left: initial;
    }
}