/*
File: sessionStyles.css
Site: TNT
Date: 09/29/19
Author: KLP
Comments:

*/

form div#formContents{
/*    background-color: blue;*/
    display: flex;
    flex-direction: row;
}

form figure {
    float: right;
    margin-right: 0%;
}

input#pw {
    display: inline-block;
    float: left;
}

img#statusIcon {
    width: 60%;
    margin-left: 30px;
}

input[type='submit'] {
    display: block;
    margin-top: 10px;
}

#clearBtn {
    margin-top: 20px;
}

div#imgBtn {
    margin-top: -20px;
}

label#imgLabel {
    display: inline;
    font-style: italic;
    margin-left: -5px;
}

form fieldset img {
    width: 50px;
    vertical-align: middle;
}

input#clearBtn,
input#submitBtn {
    display: inline;
    margin-top: -20px;
}

input#clearBtn {
    margin-left: 10px;
}

@media (min-width: 200px) {

    /*gray*/
    form div#formContents{
        width: 250px;
        display: flex;
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
    }
    
    form figure{
        float: none;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    img#statusIcon {
        width: 60%;
        margin-left: 40px;
    }

    div#controls {
/*        background-color: orange;*/
        margin-bottom: 10px;
        padding-bottom: 5px;
        padding-left: 1%;
    }

    div#navIcon {
/*        background-color: green;*/
        margin-top: 5px;
    }
}

@media (min-width: 400px){
    /*black*/
    form div#formContents{
        width: 100%;
    }
    
    form figure{
        float: none;
        width: 55%;
        margin-left: auto;
        margin-right: auto;
    }
    
    div#controls {
        padding-left: 20%;
    }
}

@media (min-width: 500px) {

    /*pre-red*/
    
    form label{
        font-size: 15px;
    }
    form div#formContents{
        width: 100%;
        flex-direction: row;
        margin-left: auto;
        margin-right: auto;
    }
    
    form figure{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    img#statusIcon {
        width: 60%;
        margin-left: 40px;
    }

    div#controls{
        width: 58%;
/*        background-color: orange;*/
        margin-bottom: 0px;
        padding-left: 0%;
    }

    div#navIcon {
        width: 42%;
/*        background-color: green;*/
        margin-top: 0px;
    }
}

@media (min-width: 600px) {
    /*red*/
    form figure{
        width: 100%;
    }
    div#content p{
        font-size: 20px;
    }
}