﻿@media screen and (max-width: 640px) {
    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: 100%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .cssgradients #navigation-container li {
        height: 100%;
    }

    .cssgradients #navigation-container li a {
        line-height: 20px;
        height: 100%;
    }

    .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%;
    }

    #header-container img {
        width: 95%;     
    }

    #user-status-container {
        position: static;
    }

    
    #user-status-container #login-status-container {
        padding: 0 25px 0 10px;
    }

    #user-status-container #logout-container {
        float: none;
    }
    
    /* wrapping the field beneath the label */
    
    label, .row label {
        display: block;
        margin: 0 0 3px 0;
        width: 100%;
    }

    .sub-group .field-validation-error {
        margin-left: 0;
    }

    .terms label {
        display: inline;
    }

    .format {
        margin: 0 0 3px 0;
    }

    .row input, .row select {
        margin-bottom: 10px;
    }

    .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;
    }
}