@media (min-width:320px)  { 

    #login-div1 {
		width: 100%;
		height: auto;
		margin: 15% auto auto auto;
		background: rgba(0,0,0,.3);
		border: 2px solid black;
		border-radius: 15%;
		}
    #login-div1 input{
         width: 90%;
         height: 33px;
      }
      
    #d1,#d3{
        height:AUTO;
        width:100%;
        border:1px solid black;
        float:left;
        padding: 10px;
    }
    #d2,#d4{
        display: none;
    }
    
    #d4-mobile {
        width:100%;
        height:70%;
    
        float:left;
        
        margin-left:0%;
    }	
    #d5 {
        width:100%;
        height:20%;
        
    }
    #d2-mobile{
        width:100%;
        float:left;
        
    }
	
	.table ul { clear:both;}
	.table ul li { list-style:none;}
	.table ul.with50 li{width:50%; float:left;}
	.table ul.with100 li{width:100%; float:left;}
	.grEntry input{
		height:33px;
		width: 90%;
	}
	.grEntry select{
		height:33px;
		width: 90%;
	}
	.grEntryUpdate input{
		height:33px;
		width: 90%;	
	}
	.grEntryUpdate select{
		height:33px;
		width: 90%;	
	}
	.grEntryUpdate button{
		margin-left: 50px;
		width: 80%;
	}


}
@media (min-width:480px)  { 
}
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { 
  
    #login-div1 {
		width: 50%;
		height: auto;
		margin: 15% auto auto auto;
		background: rgba(0,0,0,.3);
		border: 2px solid black;
		border-radius: 15%;
		}
        #d2 {
			width:60%;
			height:30%;
			float:left;
			margin-left:-1%;
			display: block;
		}
		#d1,#d3{
			height:AUTO;
			width:20%;
			border:1px solid black;
			float:left;
		}
		
		#d4 {
			width:60%;
			height:70%;
		
			float:left;
			
			margin-left:0%;
			margin-top:-70%;
            display: block;
			
		}	
		#d5 {
			margin-top:55%;
			width:100%;
			height:20%;
			
		}
        #d2-mobile,#d4-mobile{
            display: none;
        }
		input, select{
			height:33px;
			width: 30% !important;
		}
		.grEntry{
			margin: auto;
			padding: auto;
			width: 70%;
			background: #fcfcfc;
		}
		.grEntry input{
			height:33px;
			width: 90%;
		}
		.grEntry select{
			height:33px;
			width: 90%;
		}

		.grEntryUpdate{
			margin: auto;
			padding: auto;
			width: 50%;
			background: #fcfcfc;
		}



		.grEntryUpdate input{
			height:33px;
			width: 90%;	
		}
		.grEntryUpdate select{
			height:33px;
			width: 90%;	
		}
		.grEntryUpdate button{
			margin-left: 50px;
			width: 30%;
		}
    
 }