body.pagetype-login {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4f85bb+0,4f85bb+100;Blue+3D+%239 */
    background: rgb(145, 147, 142); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(rgb(145, 147, 142)) 0%, rgba(rgb(145, 147, 142)) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(rgb(145, 147, 142)) 0%, rgba(rgb(145, 147, 142)) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(rgb(145, 147, 142)) 0%, rgba(rgb(145, 147, 142)) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f85bb', endColorstr='#4f85bb', GradientType=1); /* IE6-9 fallback on horizontal gradient */
}

.loginform-container {
    width: 30%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 10%);
    text-align: center;
    max-height: 94vh;
}

.loginform-container a {
    text-decoration: none;
    color: black;
}

.loginform-container a:visited {
    text-decoration: none;
    color: black;
}

/*
    Widths
*/
@media only screen 
and (max-width: 480px) {
    .loginform-container {
        width: 80%;
        transform: translatex(-50%);
    }
}
@media only screen 
and (min-width: 481px) 
and (max-width: 768px) {
    .loginform-container {
        width: 50%;
        transform: translatex(-50%);
    }
    @media only screen 
    and (max-height: 768px) {
        .loginform-container {
            top: 3%;
            overflow-y: scroll;
        }
    }
}
@media only screen 
and (min-width: 769px) 
and (max-width: 1024px) {
    .loginform-container {
        width: 50%;
        transform: translatex(-50%);
    }
}
/*
    Touchpad tops
*/
@media only screen 
and (max-height: 480px) 
and (min-width: 481px) {
    body.pagetype-gridcontentfooter #pagecontent{
        top: 0;
    }
}
@media only screen 
and (min-height: 481px) 
and (max-height: 768px) 
and (min-width: 481px){
    body.pagetype-gridcontentfooter #pagecontent{
        top: 18%;
    }
}
@media only screen  
and (min-height: 769px) 
and (max-height: 1024px) 
and (min-width: 481px){
    body.pagetype-gridcontentfooter #pagecontent{
        top: 35%;
    }
}
@media only screen  
and (min-height: 1025px) 
and (min-width: 481px){
    body.pagetype-gridcontentfooter #pagecontent{
        top: 50%;
    }
}

/*
 * Phone tops
 */

@media only screen 
and (max-height: 480px) 
and (max-width: 480px) {
    body.pagetype-gridcontentfooter #pagecontent{
        top: 10%;
    }
}
@media only screen 
and (min-height: 481px) 
and (max-height: 768px) 
and (max-width: 480px){
    body.pagetype-gridcontentfooter #pagecontent{
        top: 10%;
    }
}
@media only screen  
and (min-height: 769px) 
and (max-height: 1024px) 
and (max-width: 480px){
    body.pagetype-gridcontentfooter #pagecontent{
        top: 20%;
    }
}