body{
    padding:25px;
}

div {
    font-family:  Verdana, Geneva, Tahoma, sans-serif;
}

h1{
    border:0;
    background-color:white;
    font: normal 24pt verdana;
    text-align:left;  
    margin:0;  
}

input[type=text] {
    width:100%;
    box-sizing: border-box;

    border:1px solid darkgray;    
    border-radius:5px;
    font:normal 12pt verdana;
    padding:8px;
    margin-top:5px;
}

input[type=password]{
    width:100%;
    box-sizing: border-box;

    border:1px solid darkgray;    
    border-radius:5px;
    font:normal 12pt verdana;
    padding:8px;
    margin-top:5px;
}

button {    
    padding:10px;
    font:normal 12pt verdana;    
    border:1px solid darkgray;
    border-radius:5px;
}

#layout{
    background-color:white;
}


#signInBox {
    width:25%;
    margin:auto;    
    border:1px solid darkgray;
    border-radius:10px;
    padding:15px;
    margin-top:25px;
}

#footer {
    margin-top:25px;
    padding-top:2px;
    background:linear-gradient(to right, white, gainsboro, white);
}

#copyrightFooter{
    text-align:center;
    font:normal 9pt verdana;    
    padding:20px;
    background:linear-gradient(to right, white, #f8f8f8, white);
}

#messageBox {
    text-align:center;
    color:#cc3300;
    padding-top:15px;   
}

.testBodyClass {
    background:0;
	background-color:white;
}
.productionBodyClass {
    background:0;
	background-color:white;
}

.primaryButton {
    background:linear-gradient(#ccffcc,#99ff99);
}

.dividing-line {
    font:normal 9pt verdana;
    margin-top:45px;
    margin-bottom:15px;
    text-align:center;
    color:darkgray;
    line-height:0px;
    border:1px solid #767676;
    height:0;
}

.dividing-line-text {
    background-color:white;
    padding:0;
    padding-left:15px;
    padding-right:15px;
    color:#767676
}

.buttonBox {
    margin-top:25px;
    text-align:center;
}

.labelBox {
    margin-top:20px;
}

#title{
    display:grid;
    grid-template-columns: auto auto;
    grid-template-rows: 50px;
    border-bottom:5px solid navy;    
    align-items:center;
    padding-top:5px;
    padding-bottom:5px;    
}

#title .item-1 {
    padding-left: 10px;
}

#title .item-2 {
    text-align:right;
    padding-right:10px;
}

#titleText {
    width:65%;
    margin:auto;   
    visibility:visible;
    height:auto;    
    color:navy;
}

#title-link {
    font-size:125%;    
    text-decoration:none;
}


/* --------- iphone portrait -----------  */
/*@media screen and (max-width: 320px) {*/
@media screen and (max-width: 540px) {
    body {
        padding:0;
        background:linear-gradient(to right, white, #f8f8f8, white);
    }
    h1 {
        padding:0;
    }

    input[type=text] {        
        padding:10px;        
    }

    input[type=password]{        
        padding:10px;
    }
    
    button {        
        padding:25px;        
        background:linear-gradient(white, gainsboro);
    }

    #content {
        padding:15px;
        background:linear-gradient(to right, white, #f8f8f8, white);
    }

    #signInBox {                               
        width:auto;          
        padding:15px;
        margin-top:0px;
        background-color:white;
    }
    
    #copyrightFooter{        
        padding:30px;
    }

    #title {
        grid-template-columns: auto;
        grid-template-rows: 30px;
        padding:10px;
    }

    #title .item-1 {        

        text-align:center;
    }

    #title .item-2 {        
        display:none;
    }


    .labelBox {
        
    }        		

    .dividing-line {        
        margin-top:75px;
        margin-bottom:45px;
        text-align:center;
        color:darkgray;
        line-height:0px;
        border:1px solid #767676;
        height:0;
    }

}


/* --------- ipad portrait -------------  */

/*
    I think covering both portrait and landscape at once will be fine.
    @media screen and (min-width: 481px) and (max-width: 1366px) and (orientation:portrait) {
    @media screen and (min-width: 481px) and (max-width: 1366px) and (orientation:landscape) {
*/
@media screen and (min-width: 481px) and (max-width: 1366px) {
    body {
        padding:0;
        background:linear-gradient(to right, white, #f8f8f8, white);
    }

    input[type=text] {
        font:normal 14pt verdana;
        padding:15px;        
    }

    input[type=password]{
        font:normal 14pt verdana;
        padding:15px;
    }
    
    button {
        width:75%;
        font: normal 14pt verdana;
        background:linear-gradient(white, gainsboro);
    }

    #content {
        padding:20px;        
        background:linear-gradient(to right, white, #f8f8f8, white);
    }

    #signInBox {                               
        width:75%;
        background-color:white;                
        padding:15px;
        margin-top:25px;
    }        

    #footer {
        margin-top:0;
    }

    .dividing-line {
        font:normal 14pt verdana;
        margin-top:45px;
        margin-bottom:25px;
        text-align:center;
        color:darkgray;
        line-height:0px;
        border:1px solid #767676;
        height:0;
    }
}