#loginPage {
    min-height: 100% !important;
}

#loginContent {
    padding-top: 23px;
}

.loginForm
{
    margin: 0 auto;     /* horizontal center */
    padding-top: 10%;   /* push down a little for illusion of vert center */
    text-shadow: none;  /* jQuery Mobile's text shadow looks goofy */
    width: 80%;
    max-width: 406px;
}

@media screen and (orientation:landscape) 
{
    .loginForm
    {
        padding-top: 0;
    }
}


#loginError
{
    margin-top: 1em;
}

/* Various error state icons to accompany various error state messages */
.iconLock
{
    background-image: url('images/error/iconLock.png');
}
.iconID
{
    background-image: url('images/error/iconID.png');
}
.iconDatabase
{
    background-image: url('images/error/iconDatabase.png');
}
/* ---------------- */

#smallLogo
{
    display: none;
}

#loginButton:active
{
    border: 1px solid #155678;
	background: #5393c5;
	color: #FFF ; 
}

@media only screen and (max-height : 749px) {
    .loginBackground
    {
        background-color: #97afb7;
    }
}

/* 
   We want to go into "small login mode" in portrait or landscape.
   This 1 media query will cover both of those scenarios 
*/
@media only screen and (max-height : 568px)
{
    #loginPage
    {
        position: relative; /* So we can center the content absolutely */
    }
    
    .loginForm
    {
        padding-top: 0;
        width: 280px;
    }
        
    #largeLogo
    {
        display: none;   
    }
    
    #smallLogo
    {
        width: 300px; /* dimensions are matched exactly to the image size */
        height: 50px;
        background-size: 100%;
        background-image: url('images/login/smallLogo.png');
        display: inline-block;
    } 
    
}

/* 
   This is anything over the size of a phone.
   We have this query so we can prevent small devices from
   downloading the big splash screen image
*/

@media only screen and (min-height : 569px)
{    
    #largeLogo
    {
        width: 507px; /* dimensions are matched exactly to the image size */
        height: 203px;
        background-size: 100%;
        background-image: url('images/login/largeLogo.png');
        display: inline-block;
    }
}

@media only screen and (min-height : 750px)
{
    .loginBackground
    {
        /* You can layer css background images. They are applied in order, starting with the layer closest to you.
           The other properties (position, repeat, etc) apply in the same fashion. 
           If you only have 1 specified (like bottom center), then it applies to all of them.
           Lastly, background-color is applied underneath it all. In this case the white background is to
           cover the topmost part of the screen, after you exceed the height of the splash image and gradient.
           http://www.css3.info/preview/multiple-backgrounds/  */
        background-image: url('images/login/splash.jpg');
        background-position: bottom center;
        background-repeat: no-repeat, repeat-x;
        background-color: #97afb7;
    }
}