/* make Login.aspx more responsive */

/* Microsoft sets viewport in CSS, other browsers in <meta>
   scale -> zoom
   user-scalable=yes/no -> user-zoom: zoom/fixed
*/
@-ms-viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
    min-zoom: 1;
    max-zoom: 3;
    user-zoom: zoom;
}
@viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
    min-zoom: 1;
    max-zoom: 3;
    user-zoom: zoom;
}

@media only screen and (max-device-height: 480px) {
    .boxTypeWelcome, .boxTypeHelp, .boxTypeLinks, .boxTypeNews, .boxTypeCustom1, .boxTypeCustom2, .boxTypeCustom3, .boxTypeCustom4, .boxTypeCustom5 {
        display: none !important;
    }

    /* plugin status bar */
    #divInf {
        display: none !important;
    }

    /* on phones treat the remaining login block as size 11 */
    .blockswidth1 #blocks, .blockswidth2 #blocks, .blockswidth3 #blocks {
        width: 640px;
    }

    .blocksheight1 #blocks, .blocksheight2 #blocks {
        height: 270px;
    }

    .blockswidth1 #blocks.centered, .blockswidth2 #blocks.centered, .blockswidth3 #blocks.centered {
        margin-left: -150px;
    }

    .blocksheight1 #blocks.middle, .blocksheight2 #blocks.middle {
        margin-top: -125px;
    }
}

@media only screen and (max-device-width: 480px) {
    /* on phones hide all elements but login panel and language selector */
    .boxTypeWelcome, .boxTypeHelp, .boxTypeLinks, .boxTypeNews, .boxTypeCustom1, .boxTypeCustom2, .boxTypeCustom3, .boxTypeCustom4, .boxTypeCustom5
    {
        display: none !important;
    }
    
    .newsli
    {
        display: none !important;
    }
    
    #divInf
    {
        display: none !important;
    }

    /* on phones treat the remaining login block as size 11 */
    
    .blockswidth1 #blocks, .blockswidth2 #blocks, .blockswidth3 #blocks {
	    width: 320px;
    }

    .blocksheight1 #blocks, .blocksheight2 #blocks {
	    height: 270px;
    }

    .blockswidth1 #blocks.centered, .blockswidth2 #blocks.centered, .blockswidth3 #blocks.centered {
	    margin-left: -150px;
    }

    .blocksheight1 #blocks.middle, .blocksheight2 #blocks.middle{
	    margin-top: -125px;
    }
    
    .block21, .block31, .block12, .block22, .block32 {
	    width: 300px;
	    height: 250px;
    }
    
    /* on phones treat the remaining login block as minimal */
    
    .block{
	    padding: 0;
	    background: transparent;
	    border-radius: 0;
    }
    
    .block h2{
	    display: none;
    }

    .block input{
	    border: 0 !important;
	    box-shadow: none !important;
	    border-radius: 4px !important;
	    height: 42px !important;
    }

    .block input[type=checkbox] {
	    height: auto !important;
    } 
   
    .block .txtClear{
	    top: 14px;
    }    

    .block .txtLight{
	    color: White;
    }

    .loginandlistpanel {
        width: 100% !important;
        padding: 0px !important;
        display: block !important;
    }
    .loginandlistpanel:first-child {
        border: 0px !important;
    }
    .loginandlistpanel .caption {
        color: white;
        text-transform: initial;
    }

    .loginandlistrecent, .loginandlistall {
        display: none;
    }

    .divIdPListMobile {
        display: block;
    }

    .vmLoginAndList {
        height: 300px !important;
    }
    .vmLoginAndList .boxTypeInlog {
        height: 100%;
    }

    .loginandlistparent {
        height: initial;
    }

    #directLoginButton {
        height: 30px !important;
        background-color: #00b1dd;
    }
}

@media only screen and (max-device-width: 320px) {

    /* on very small phones center the login box */

    #blocks.right {
        right: -10px;
    }
}