#ds_1
{
    width: 491px;
    position:absolute;
    height:310px;
    background-color:#F6F6F6;
    border:1px solid #245B7D;
}
  
#ds_2t
{
    display: inline-table;
    float: left;
}

#ds_2t3
{
    display: inline-table;
    float: left;
    margin-left: 0px;
    border-left: 1px solid #C0C0C0;
}
#ds_21t3
{
    display: none;
}

#calBottomTable
{
    border-top: 1px solid #C0C0C0;
    height:25px;
    
}

@media screen and (min-width: 461px)
{
     #ds_3 , #dtb_1depS , #dtb_1retS , #dtb_1depS1 , #dtb_1depS2 , #dtb_1depS3 { width:245px}  
     #ds_5 , #dtb_2depS , #dtb_2retS , #dtb_2depS1 , #dtb_2depS2 , #dtb_2depS3 { width:245px}  
     /* So it seems that if you set the total table width, Chrome stops using the W3C box model, and assumed widths include padding. But without a table width, Chrome correctly uses the W3C box model and adds padding to widths. */
}

/* for 460px or less */
@media screen and (max-width: 460px)
{


    #ds_1    
    {
        width: 370px;
    }

    #ds_2t3
    {
        display: none;
        width: 0px;
    }

    #ds_21t3
    {
        display: block;
        float:right;
        padding-right:8px
    }
    
    #ds_3 td, #dtb_1depS td, #dtb_1retS td, #dtb_1depS1 td, #dtb_1depS2 td, #dtb_1depS3 td{ width:53px}
    /*#ds_1 table td{ width:53px}*/

}

@media only screen and (min-width : 321px) and (max-width : 375px) 
{
    
    #ds_1
    {
        width: 320px;        
        margin-left:1px;
    }
          
    #ds_21t3
    {
        display: block;
        float:right;
        padding-right:13px
    }
    
    #ds_3 td, #dtb_1depS td, #dtb_1retS td, #dtb_1depS1 td, #dtb_1depS2 td, #dtb_1depS3 td{ width:50px}
}


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

    #ds_1
    {
        width: 280px;              
        margin-left:1px;
    }    
        
    #ds_21t3
    {
        display: block;
        float:right;
        padding-right:13px
    }
    
    
  #ds_3 td, #dtb_1depS td, #dtb_1retS td, #dtb_1depS1 td, #dtb_1depS2 td, #dtb_1depS3 td{ width:45px}
}


/* for 240px or less */
@media screen and (max-width: 240px)
{


    #ds_1
    {
        width: 230px;
    }
   
    #ds_21
    {
        width: 220px;
    }   
    
    #ds_21t3
    {
        display: block;
        float:right;
    }   

}