/*  

    - This media queries work on devices with a resolution (we are using width to decide which css to load) less then 1280px. 
    - If the res is higher than 1279px the css to use are the "usual" ones i.e. the Styles.css file. This is because we have 
      one client who is still using IE7 and IE8 (cutting edge tech!!) and we don't want to change the desing massively just in case.

    - The ".device" css is only for debugging tasks. This label will be hidden in live (check the label below at the top of the files) 
     <asp:Label ID="lbldevice" runat="server" Text="Device" CssClass="device" Width="100%"></asp:Label>

*/

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    BLACK    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

.body
{
    font-family: 'Lato' , sans-serif;
    background-color: wHITE;
}


@media only screen and (min-width: 1280px)
{

    .device
    {
        background-color: Black;
    }
    /*Survey1.aspx ///////////////////////////////////////////////////////////////////////*/

    .main-wrapper
    {
        width: 900px;
        min-height: 380px;
        border: none;
    }
    .wrap_Survey
    {
        margin-top: 0.2em;
    }
    .header
    {
        margin-top: 2em;
        width: 900px;
        border: none;
    }
    .Loginbar
    {
        display: none;
    }

   /* .left
    {
        display: none;
    }*/
    .right /*The image at the top*/
    {
       /* padding-top: 1em;
        margin-left: auto;
        margin-right: auto;
        max-width: 350px;
        display: block;*/
        float: right;
    }

    .Title1S1
    {
        font-size: 1.50em;
        font-family: Lato;
        font-weight: bold;
        color: #0072C6;
        margin-bottom: 20px;
    }
    .Title2S1
    {
        padding-top: 20px;
        font-size: 1.30em;
        font-family: Lato;
        color: #8c8c8c;
    }

    .TextS1
    {
        font-size: 1.3em;
        font-family: Lato;
    }


    .footer
    {
        width: 900px;
    }

    /*Survey2.aspx ///////////////////////////////////////////////////////////////////////*/

    .TcCbx
    {
        height: 2.5em;
        padding-top: 0.5em;
        padding-left: 5em;
    }



    .Notification-Label
    {
        width: auto;
        margin-left: 0%;
        padding-right: 20px;
        text-align: center;
    }
    .SurveyQuestionTitle
    {
        border: none;
        padding-top: 0.7em;
    }

    .SurveyQuestion
    {
        padding-top: 0.6em;
        border: 1px solid #0064B4;
        border-top: 1px solid #0064B4;
        border-bottom: 1px solid #0064B4;
        border-left: none;
        border-right: none;
        font-weight: 700;
    }





}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    BLACK    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/




/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    LIME    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

@media only screen and (min-width: 1024px) and (max-width: 1279px)
{
    .device
    {
        background-color: Lime;
    }
    /*Survey1.aspx ///////////////////////////////////////////////////////////////////////*/

    .wrap_Survey
    {
        width: 80%;
    }
    .main-wrapper
    {
        width: 80%;
        min-height: 380px !important;
        border: none;
    }
    .header
    {
        width: 80%;
        margin-top: 2em;
        border: none;
    }
    .footer
    {
        width: 80%;
    }
    .Loginbar
    {
        display: none;
    }
  /*  .left
    {
        display: none;
    }*/

    .line
    {
        display: block;
        color: #0072C6;
        height: 3px;
        background-color: #0072C6;
    }
    .Title1S1
    {
        font-size: 1.50em;
        font-family: Lato;
        font-weight: bold;
        color: #0072C6;
        margin-bottom: 20px;
    }

    .Title2S1
    {
        padding-top: 20px;
        font-size: 1.30em;
        font-family: Lato;
        color: #8c8c8c;
    }

    .TextS1
    {
        font-size: 1.3em;
        font-family: Lato;
    }
    .right /*The image at the top*/
    {
      /*  padding-top: 0.4em;
        margin-left: auto;
        margin-right: auto;
        max-width: 350px;
        display: block; */
        float: right;
    }

    /*Survey2.aspx ///////////////////////////////////////////////////////////////////////*/

    .SurveyQuestionTitle
    {
        font-size: 1.50em;
        font-family: Lato;
        font-weight: 400;
        color: #0072C6;
        padding-top: 0px;
    }

    .SurveyQuestion
    {
        font-size: 1.2em;
        font-family: Lato;
        padding-top: 1em;
        padding-bottom: 1em;
        margin-bottom: 1em;
        font-weight: 700;
    }
/*
    .CbxSurveyResponse
    {
        font-size: 1em !important;
        font-family: Lato !important;
        padding-top: 1em;
        padding-bottom: 1em;
        height: 10em;
        width: 10em;
    }

*/
    
    .CbxSurveyResponse input {width:25px; height:25px;}


    .message
    {
        font-size: 0.7em;
        font-family: Lato;
    }


    .Image-Chk
    {
        width: 2em;
    }
    .Label-survey
    {
        width: 280px !important;
        font-size: 1.1em;
        font-family: Lato;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .TcCbx
    {
        height: 2.5em;
    }

    /*PreliminaryPage.aspx ///////////////////////////////////////////////////////////////////////*/

    .main-wrapper
    {
        width: 75%;
    }
    .header
    {
        width: 75%;
    }
    .footer
    {
        width: 75%;
    }

    .wrap-Prelim
    {
        padding: 0px 0px 0px 1.5em;
        width: 90%;
        margin-left: 3.5em;
    }
    .color-grey
    {
        width: 90%;
    }
    .Prelim-DDL
    {
        float: left;
        margin-top: 5px;
        margin-bottom: 10px;
        width: 75%;
    }

    .PrelimLabels
    {
        width: 100px;
        margin-top: 10px;
        margin-right: 10px;
    }

    #DivPrelimLabels
    {
        float: left;
        width: 20%;
        padding-top: 3px;
        margin-bottom: 0px;
    }

    #DivPrelimDropDowns
    {
        float: right;
        width: 75%;
    }

    .centre-align
    {
        width: 90%;
    }

    .footnoteside
    {
        width: 50%;
        text-align: left;
    }

    .PrelimTable
    {
        width: 100%;
    }
    .Notification-Label
    {
        width: auto;
        margin-left: 0%;
        padding-right: 20px;
        text-align: center;
    }

    .centre-align2
    {
        text-align: center;
        margin-top: 2em;
        margin-bottom: 2em;
    }

}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    LIME    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/




/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    RED    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

@media only screen and (min-width:100px) and (max-width: 767px)
{
    .device
    {
        background-color: Red;
    }
    /*Survey1.aspx ///////////////////////////////////////////////////////////////////////*/

    .wrap_Survey
    {
        width: 80%;
    }


    .main-wrapper
    {
        width: 80%;
        min-height: 380px !important;
        border: none;
    }
    .header
    {
        width: 80%;
        margin-top: 2em;
        border: none;
    }
    .footer
    {
        width: 80%;
    }
    .Loginbar
    {
        display: none;
    }
   /* .left
    {
        display: none;
    }*/
    .right /*The image at the top*/
    {
       /* padding-top: 0.3em;
        margin-left: auto;
        margin-right: auto;
        max-width: 350px;
        display: block;*/
        float: right;
    }
    .right2 /*The image at the bottom*/
    {
        position: absolute;
        width: 170px;
        float: right;
        width: 50%;
        max-height: 50%;
    }

    .left2
    {
        width: 50%;
        float: left;
    }

    .Title1S1
    {
        font-size: 1.25em;
        font-family: Lato;
        font-weight: bold;
        color: #0072C6;
        margin-bottom: 20px;
    }

    .Title2S1
    {
        padding-top: 20px;
        font-size: 1.2em;
        font-family: Lato;
        color: #8c8c8c;
    }

    .TextS1
    {
        font-size: 1.3em;
        font-family: Lato;
    }

    .line
    {
        display: block;
        color: #0072C6;
        height: 3px;
        background-color: #0072C6;
        margin-left: 0px;
    }

    /*Survey2.aspx ///////////////////////////////////////////////////////////////////////*/
    .wrap_Survey
    {
        width: 80%;
    }
    .SurveyQuestionTitle
    {
        font-size: 1.35em;
        font-family: Lato;
        font-weight: 400;
        color: #0072C6;
        padding-top: 0px;
    }

    .SurveyQuestion
    {
        font-size: 1.3em;
        font-family: Lato;
        padding-top: 1em;
        padding-bottom: 1em;
        margin-bottom: 1em;
        font-weight: 700;
    }
/*
    .CbxSurveyResponse
    {
        font-size: 1em !important;
        font-family: Lato !important;
        padding-top: 1em;
        padding-bottom: 1em;
        height: 10em;
        width: 10em;
    }

*/
    
    .CbxSurveyResponse input {width:25px; height:25px;}


    .message
    {
        font-size: 0.7em;
        font-family: Lato;
    }

    .Image-Chk
    {
        width: 2em;
    }
    .Label-survey
    {
        width: 180px !important;
        font-size: 1.1em;
        font-family: Lato;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .TcCbx
    {
        height: 2.5em;
    }


    /*PreliminaryPage.aspx ///////////////////////////////////////////////////////////////////////*/

    .main-wrapper
    {
        width: 75%;
    }
    .header
    {
        width: 75%;
    }

    .wrap-Prelim
    {
        padding: 0px 0px 0px 1.5em;
        width: 90%;
        margin-left: 3.5em;
    }
    .color-grey
    {
        width: 90%;
    }
    .Prelim-DDL
    {
        float: left;
        margin-top: 5px;
        margin-bottom: 10px;
        width: 90%;
    }

    .PrelimLabels
    {
        width: 100px;
        margin-top: 10px;
        margin-right: 10px;
    }

    #DivPrelimLabels
    {
        float: left;
        width: 100%;
        margin-bottom: 0px;
    }

    #DivPrelimDropDowns
    {
        width: 100%;
    }

    .centre-align
    {
        width: 80%;
    }

    .footnoteside
    {
        width: 50%;
        text-align: left;
    }

    .PrelimTable
    {
        width: 90%;
    }
    .right2
    {
        position: relative;
        display: inline-block;
        width: auto;
    }
    .Notification-Label
    {
        width: auto;
        margin-left: 0%;
        padding-right: 20px;
    }

}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    RED    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/



/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    FUCHSIA    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

@media only screen and (min-width: 768px) and (max-width: 1023px)
{
    .device
    {
        background-color: Fuchsia;
    }
    /*Survey1.aspx ///////////////////////////////////////////////////////////////////////*/

    .wrap_Survey
    {
        width: 80%;
    }

    .main-wrapper
    {
        width: 80%;
        min-height: 380px !important;
        border: none;
    }
    .header
    {
        width: 80%;
        margin-top: 2em;
        border: none;
    }
    .footer
    {
        width: 80%;
    }
    .Loginbar
    {
        display: none;
    }
   /* .left
    {
        display: none;
    }*/

    .line
    {
        display: block;
        color: #0072C6;
        height: 3px;
        background-color: #0072C6;
    }
    .Title1S1
    {
        font-size: 1.50em;
        font-family: Lato;
        font-weight: bold;
        color: #0072C6;
        margin-bottom: 20px;
    }

    .Title2S1
    {
        padding-top: 20px;
        font-size: 1.30em;
        font-family: Lato;
        color: #8c8c8c;
    }

    .TextS1
    {
        font-size: 1.3em;
        font-family: Lato;
    }
    .right /*The image at the top*/
    {
       /* padding-top: 0.4em;
        margin-left: auto;
        margin-right: auto;
        max-width: 350px;
        display: block;*/
        float: right;
    }

    .message
    {
        font-size: 0.7em;
        font-family: Lato;
    }


    .Image-Chk
    {
        width: 2em;
    }
    .Label-survey
    {
        width: 280px !important;
        font-size: 1.1em;
        font-family: Lato;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    /*Survey2.aspx ///////////////////////////////////////////////////////////////////////*/

    .SurveyQuestionTitle
    {
        font-size: 1.50em;
        font-family: Lato;
        font-weight: 400;
        color: #0072C6;
        padding-top: 0px;
    }

    .SurveyQuestion
    {
        font-size: 1.3em;
        font-family: Lato;
        padding-top: 1em;
        padding-bottom: 1em;
        margin-bottom: 1em;
        font-weight: 700;
    }

/*
    .CbxSurveyResponse
    {
        font-size: 1em !important;
        font-family: Lato !important;
        padding-top: 1em;
        padding-bottom: 1em;
        height: 10em;
        width: 10em;
    }

*/
    
    .CbxSurveyResponse input {width:25px; height:25px;}


    .TcCbx
    {
        height: 2.5em;
    }


    /*PreliminaryPage.aspx ///////////////////////////////////////////////////////////////////////*/

    .main-wrapper
    {
        width: 75%;
    }
    .header
    {
        width: 75%;
    }
    .footer
    {
        width: 75%;
    }

    .wrap-Prelim
    {
        padding: 0px 0px 0px 1.5em;
        width: 90%;
        margin-left: 3.5em;
    }
    .color-grey
    {
        width: 90%;
    }
    .Prelim-DDL
    {
        float: left;
        margin-top: 5px;
        margin-bottom: 10px;
        width: 75%;
    }

    .PrelimLabels
    {
        width: 100px;
        margin-right: 10px;
    }

    #DivPrelimLabels
    {
        float: left;
        width: 20%;
        padding-top: 5px;
        margin-bottom: 0px;
    }

    #DivPrelimDropDowns
    {
        float: right;
        width: 75%;
    }

    .centre-align
    {
        width: 90%;
    }

    .footnoteside
    {
        width: 50%;
        text-align: left;
    }

    .PrelimTable
    {
        width: 100%;
    }
    .Notification-Label
    {
        width: auto;
        margin-left: 0%;
        padding-right: 20px;
        text-align: center;
    }

    .centre-align2
    {
        text-align: center;
        margin-top: 2em;
        margin-bottom: 2em;
    }



}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    FUCHSIA    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/





/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    PURPLE    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

@media only screen and (min-width:481px) and (max-width: 737px) and (orientation: landscape)
{
    .device
    {
        background-color: Purple;
    }

    .Label-survey
    {
        width: 240px !important;
        font-size: 1.0em;
        font-family: Lato;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .Prelim-DDL
    {
        float: left;
        margin-top: 5px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .centre-align2
    {
        text-align: center;
        margin-top: 2em;
        margin-bottom: 2em;
    }


}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    PURPLE    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/




/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    OLIVE    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

@media only screen and (min-width:320px) and (max-width: 640px) and (orientation: landscape)
{
    .device
    {
        background-color: Olive;
    }
    .wrap-Prelim
    {
        padding: 0px 0px 0px 1em;
        width: 100%;
        margin-left: 4em;
    }
    .centre-align
    {
        width: 75%;
    }
    .right2
    {
        position: relative;
        display: inline-block;
        width: auto;
    }
    .Notification-Label
    {
        width: auto;
        margin-left: 0%;
        padding-right: 20px;
    }

    .centre-align2
    {
        text-align: center;
        margin-top: 2em;
        margin-bottom: 2em;
    }
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    OLIVE    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/






/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    BLUE    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

@media only screen and (min-width:320px) and (max-width: 568px) and (orientation: landscape)
{
    .device
    {
        background-color: Blue;
    }
    .wrap-Prelim
    {
        padding: 0px 0px 0px 1em;
        width: 100%;
        margin-left: 1.5em;
    }
    .centre-align
    {
        width: 85%;
    }
    .right2
    {
        position: relative;
        display: inline-block;
        width: auto;
    }
    .Notification-Label
    {
        width: auto;
        margin-left: 0%;
        padding-right: 20px;
    }
    .centre-align2
    {
        text-align: center;
        margin-top: 2em;
        margin-bottom: 2em;
    }

}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    BLUE    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/






/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    GREEN    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

@media only screen and (min-width:100px) and (max-width: 767px) and (orientation: portrait)
{
    .device
    {
        background-color: Green;
    }
    /*Survey1.aspx ///////////////////////////////////////////////////////////////////////*/


    .wrap_Survey
    {
        width: 80%;
        padding: 0px 0px 0px 0px ;
    }
    .footer
    {
        width: 80%;
    }
    .Title1S1
    {
        font-size: 1.25em;
        font-family: Lato;
        font-weight: bold;
        color: #0072C6;
        margin-bottom: 20px;
    }

    .Title2S1
    {
        padding-top: 20px;
        font-size: 1.1em;
        font-family: Lato;
        color: #8c8c8c;
    }

    .TextS1
    {
        font-size: 1.1em;
        font-family: Lato;
    }

    .right /*The image at the top*/
    {
      /*  padding-top: 1em;
        margin-left: auto;
        margin-right: auto;
        max-width: 90% !important;
        display: block;*/
        float: right;
    }
    .right2 /*The image at the bottom*/
    {
        position: relative;
        padding-top: 10px;
        text-align: center;
        width: 100%;
        display: block;
        float: none;
    }
    .left2
    {
        width: 100%;
        text-align: center;
    }

    .centre-align2
    {
        text-align: center;
        margin-top: 2em;
        margin-bottom: 2em;
    }

    /*Survey2.aspx ///////////////////////////////////////////////////////////////////////*/

    .SurveyQuestionTitle
    {
        font-size: 1.3em;
        font-family: Lato;
        font-weight: 400;
        color: #0072C6;
        padding-top: 0px;
    }

    .SurveyQuestion
    {
        font-size: 1.3em;
        font-family: Lato;
        padding-top: 1em;
        padding-bottom: 1em;
        margin-bottom: 1em;
        font-weight: 700;
    }



    .message
    {
        font-size: 0.6em;
        font-family: Lato;
    }


    .Image-Chk
    {
        width: 2em;
    }
    .Label-survey
    {
        width: 110px;
        font-size: 1.0em;
        font-family: Lato;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .TcCbx
    {
        height: 2.5em;
    }


    /*PreliminaryPage.aspx ///////////////////////////////////////////////////////////////////////*/

    .main-wrapper
    {
        width: 80%;
        height: 50%;
    }
    .header
    {
        width: 80%;
    }
    .wrap-Prelim
    {
        padding: 0px 0px 0px 1em;
        width: 100%;
        margin-left: 0px;
    }
    .color-grey
    {
        width: 90%;
    }
    .Prelim-DDL
    {
        float: left;
        width: 16em;
        margin-top: 5px;
        margin-bottom: 10px;
        width: 100%;
    }

    .centre-align
    {
        width: 90%;
    }

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

    #DivPrelimLabels
    {
        float: left;
        width: 100%;
        margin-bottom: 0px;
    }

    #DivPrelimDropDowns
    {
        float: left;
        padding-left: 0px;
    }

    .PrelimTable
    {
        width: 90%;
        margin-left: 0px;
    }

    .Notification-Label
    {
        width: 77%;
        margin-left: 0%;
        padding-right: 20px;
    }

}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    GREEN    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/