/* 
    Created on : 22-Feb-2015, 19:06:20
    Author     : Matt
*/
@media screen and (max-width: 99999px){

    .viewPort{
        position: relative;
        margin: auto;
        width: 807px;
        height: 325px;
        margin-top: 1%;
        color: black;
    }

    .viewPortCreate{
        position: relative;
        margin: auto;
        width: 807px;
        height: 1060px;
        margin-top: 1%;
        color: black;
        //text-align: center;

    }

    .createFormTitle{
        font-size: 150%;
        color: black;
        text-align: center;
        margin-top: 5%;
        margin-bottom: 5%;
    }

    .viewPortCreate form fieldset div input{
        font-size: 1.1em;

    }
    .viewPortCreate form fieldset div {
        font-size: 1.1em;

    }


    .viewPortExisting{
        position: relative;
        margin: auto;
        width: 807px;
        height: 260px;
        margin-top: 1%;
        color: black;
        //text-align: center;

    }

    .viewPortResetting{
        position: relative;
        margin: auto;
        width: 807px;
        height: 450px;
        margin-top: 1%;
        color: black;
        //text-align: center;

    }

    .navButtonCollection{
        display: inline-block;
        float: right;
    }

    .navButton{
        margin: 5px;
        margin-top: 8px;
        border: 1px solid black;
        border-radius: 10px;
        display: inline-block;
        width: 4em;
        height: 1.5em;
        vertical-align: middle;
        font-weight: normal;
        float: right;
    }

    .navButton:hover{
        cursor: pointer;
    }

    #navselectionLightBlue{
        background: rgba(163, 204, 255, 1);
        color: black;

    }
    #navselectionDarkBlue{
        background: rgba(84, 141, 211, 1);
        color: white;
    }
    
    .singlePaneReset{
        position: relative;
        width: 100%;
        height: 100%;
        display: inline-block;
        background: rgba(163, 204, 255, 1);
        border: 2px solid black;
        border-radius: 10px;
        margin: auto;
    }
    .singlePaneReset form fieldset{
        border: none;
        color: black;
        margin-left: 5%;
        //margin-top: 10%;
    }

    .singlePaneExisting{
        position: relative;
        width: 100%;
        height: 100%;
        display: inline-block;
        background: rgba(163, 204, 255, 1);
        border: 2px solid black;
        border-radius: 10px;
        margin: auto;
    }
    .singlePaneExisting form fieldset{
        border: none;
        color: black;
        margin-left: 5%;
        //margin-top: 10%;
    }
        

    .singlePaneCreate{
        position: relative;
        width: 100%;
        height: 100%;
        display: inline-block;
        background: rgba(163, 204, 255, 1);
        border: 2px solid black;
        border-radius: 10px;
        margin: auto;
    }
    
    
    .singlePaneReset form fieldset div input{
        font-size: 1.1em;
        
        
    }
    .singlePaneReset form fieldset youHaveSelectedText{
        margin-left: 15%;
    }
    .singlePaneReset form fieldset label{
        
    }
    
    
    
    
    .singlePaneExisting form fieldset div input{
        font-size: 1.1em;
        float: right;
    }
    .singlePaneExisting form fieldset div label{
        margin-left: 15%;
    }
    .singlePaneExisting form fieldset label{
        margin-left: 15%;
    }

    .singlePaneCreate form fieldset{
        border: none;
        color: black;
        margin-left: 5%;
        //margin-top: 10%;
    }
    .singlePaneCreate form fieldset div input{
        
        float: right;
    }
     .singlePaneCreate form fieldset div #countrySelect{
        float: right;
    }
    

    .youHaveSelected{

        margin: auto;
        border: 2px solid black;
        //padding: 10px 40px; 
        background: rgba(163, 204, 255, 1);
        width: 800px;
        height: 70px;
        display: inline-block;
        white-space: nowrap;
        border-radius: 10px;
        text-align: center;
        //display: inline-block;
        vertical-align: middle;

    }
    .youHaveSelectedText{
        font-size: 1.4em;
        margin-top: 2%;
    }
    .youHaveSelectedTextLogin{
       font-size: 1.4em;
        margin-top: 2%; 
    }

    .loginLeftPane{
        position: relative;
        margin-top: 10px;
        width: 49%;
        height: 200px;
        display: inline-block;
        background: rgba(84, 141, 211, 1);
        border: 2px solid black;
        border-radius: 10px;
        text-align: center;



    }
    .loginLeftPane span{
        font-size: 0.9em;
    }
    .loginLeftPane:hover{
        background: rgba(163, 204, 255, 1);
    }

    .loginRightPane{
        position: relative;
        margin-top: 10px;
        width: 49%;
        height: 200px;
        display: inline-block;
        background: rgba(84, 141, 211, 1);
        border: 2px solid black;
        border-radius: 10px;
        text-align: center;


    }
    .loginRightPane span{
        font-size: 0.9em;
    }

    .loginRightPane:hover{
        color: black;
        background: rgba(163, 204, 255, 1);
    }

    .loginPaneText{
        font-size: 2.5em;
        color: white;
        margin-top: 10%;
        z-index: 49;
    }


    .buttonSelect{
        
        margin-top: 1%;
        border: 1px solid black;
        border-radius: 10px;
        display: inline-block;
        width: 7em;
        height: 2em;
        vertical-align: middle;
        //line-height: 1.5em;
        font: inherit;
        font-weight: normal;
        background: rgba(84, 141, 211, 1);
        color: white;
        -webkit-appearance: none;
    }

    .buttonSelect:hover{
        cursor: pointer;
        background: white;
        color: black;

    }
    .buttonReset{    
        
        margin-top: 1%;
        border: 1px solid black;

        border-radius: 10px;
        display: inline-block;
        width: 8em;
        height: 2em;
        vertical-align: middle;
        //line-height: 2em;
        font: inherit;
        font-weight: normal;

        background: rgba(84, 141, 211, 1);
        //float: right;
        color: white;
        margin-left: 15%;
    }
    .buttonReset p{
        position: relative;
        margin-top: 5px; 
        margin-left: 3px;
        text-transform:none;
        text-decoration: none;
        color: white;
    }

    .buttonReset:hover{
        cursor: pointer;
        background: white;
        color: black;
    }
    .buttonReset:hover p{
        color: black;
    }

    .backButton{
        
        position: relative;
        background-image: url("../images/BACK_BUTTON_stacked.png");
        background-repeat: no-repeat;
        width: 69px;
        float: right;
        height: 50px;
        margin-right: 5%;
        margin-top: -40%;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 

    }
    .backButton:hover{
        background-position: 0 -51px;
        cursor: pointer;
    }
    .backButton:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
        cursor: pointer;
    }
    .backButtonLabel{
        position: relative;
        vertical-align: middle;
        top:17px;
        left: 10px;
        font-size: 0.9em;
        color: black;
        font-weight: bold;
    }

    .entryLabel{
        font-size: 1.1em;
    }

    .loginFields{
        width: 500px;
        height: 200px;
        position: relative;
        margin-top: 7%;
        margin-left: 15%;

    }
    .g-recaptcha{
        
    }
    
   .singlePaneCreate form fieldset div input[type='checkbox'] {
        width:30px;
        height:30px;
        background:white;
        border-radius:5px;
        border:2px solid #555;
        
    }
     
    
    
    
}
@media screen and (max-width: 840px){

    .youHaveSelected{

        width: 100%;
        height: 70px;
    }
    .youHaveSelectedText{
        font-size: 1.4em;
        margin-top: 4%;
    } 
    .backButton{
        margin-top: -50%;
    }


    .viewPortCreate{
        width: 640px;
        height: 1060px;
    }
    .viewPortExisting{
        width: 640px;
    }

    .viewPortResetting{
        width: 640px;

    }

    .viewPort{

        width: 640px;
        height: 320px;

    }
    .loginPaneText{
        
        margin-top: 12%;
    }

    .loginFields{
        width: 500px;
        height: 200px;
        position: relative;
        margin-top: 7%;
        margin-left: 5%;

    }


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


    .viewPort{

        width: 480px;
        height: 310px;

    }


    .youHaveSelected{

        width: 480px;
        height: 70px;
    }
    .youHaveSelectedText{
        font-size: 1.2em;
        margin-top: 4%;
    } 


    .viewPortCreate{
        width: 480px;
        height: 1260px;
    }
    .viewPortExisting{
        width: 480px;
    }
    .viewPortResetting{
        width: 480px;
        height: 500px;
    }

    .loginLeftPane{
        width: 48%;

    }
    .loginRightPane{
        width: 48%;
        float: right;

    }


    .loginPaneText{
        
        margin-top: 15%;
    }

    .loginFields{
        width: 500px;
        height: 200px;
        position: relative;
        margin-top: 12%;
        margin-left: -10%;

    }


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

    .viewPort{

        width: 310px;
        height: 310px;

    }

    .youHaveSelected{

        width: 310px;
        height: 70px;
    }
    .youHaveSelectedText{
        font-size: 0.8em;
        margin-left: 0%;
        margin-top: 8%;
    }
    .youHaveSelectedTextLogin{
        font-size: 0.8em;
        margin-left: -20%;
        margin-top: 8%;
    }
    .backButton{
        margin-top: -40%;
    }

    .viewPortCreate{
        width: 310px;
        height: 1260px;

    }
    .viewPortExisting{
        width: 310px;
        height: 300px;
    }

    .viewPortResetting{
        width: 310px;
        height: 500px;
    }

    .singlePaneCreate{
        
    }
    .selectOption{
        width: 90%;
    }

    .loginLeftPane{
        width: 47%;

    }
    .loginRightPane{

        width: 47%;


    }

    .loginPaneText{
        font-size: 2em;
        margin-top: 30%;
    }

    .loginFields{
        width: 350px;
        height: 200px;
        position: relative;
        margin-top: 20%;
        margin-left: -15%;

    }

    .buttonSelect{
        margin-top: 5%;
    }
    .buttonReset{
        margin-top: 5%;
    }
    .singlePaneCreate form fieldset div input{
        float: none;
        width: 255px;
    }
    .singlePaneCreate form fieldset div #countrySelect{
        float: none;
    }
    .g-recaptcha{
        transform:scale(0.85);
        -webkit-transform:scale(0.85);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
        
    }
       
    
    
}