/* ######### Responsive CSS ######### */

@media (max-width: 800px) {
    
    #topbar {
        width: 710px;
    }
    
    #ddtoptabs {
        width: 100%;
        margin: 0;
    }
    
    .maincontainer {
        width: 700px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    #rightcolumn {
        display: none;
    }
    
    #leftcolumn #mobilehide {
        display: none;
    }
    
    #middlecolumn {
        width: 518px;
        border-width: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

	.snapshotbox{
		width: 100%;
		float: left;
		margin-bottom: 1em;
	}

    #bottomarea {
        width: auto;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    #contentfooter {
        margin: auto;
    }

}

@media (max-width: 700px) {
    
    .maincontainer {
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    #topbar {
        width: 100%;
    }
    
    #leftcolumn {
        margin: 0;
        display: none;
        position: fixed;
        height: 100%;
        top: 0;
        left: 0;
        border-right: 2px solid #eee;
        box-shadow: 5px 0 5px gray;
    }
    
    #logodiv {
        display: none;
    }
    
    #middlecolumn {
        width: 100%;
        padding-left: 0;
    }

	.snapshotbox{
		width: 100%;
		float: left;
		margin-bottom: 1em;
	}

	  #sortbox ul{
	    	width: 100%;
	  }

}