/* GENERAL */
html, body{
	width:auto;
	height:auto;
}
.hider{
    display:none;
}
.clear-fix{
    clear:both;
}

/* IMAGES */
.before-after-holder {
    display: block;
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 100%;
}

.before-after-holder img {
    height: auto;  
}

.after-image {
   position:absolute;
   width: 100%;
}

#ie-label {
   position:relative;
   width: 100%;
   height: 25px;
}

.before-image{

}

.before-after-byline{
  color: #969696;
  font-size: .6875em;
  float:right;
  clear:both;
}

.aBox {
	display:block;
	z-index:1;
	position:absolute;
    width: 100%;
    height:auto;
}

.bBox {
	display:block;
	z-index:2;
	position:relative;
	overflow:hidden;
	height:auto;  
	  
}

/* DRAGBAR */
#dragBar {
	z-index:6;
	position:absolute;
	width:10px;
	
	right:0px;
	cursor:col-resize;
	top:0;
	opacity:0.9;
	height:100%;
}
#dragBg {
	z-index:1;
	position:absolute;
	width:100%;
	height:100%;
	background-color:#ebebeb;
	opacity:0.3;
	filter: alpha(opacity=30); 
}

#dragLine {
	z-index:4;
	position:relative;
	width:2px;
	height:100%;
	background-color:white;
	margin:0 auto;
	top:0;
	opacity:0.9;
	filter: alpha(opacity=90); 
}

#dragBlock {
    display:block;
    z-index:7;
    position:absolute;
    width:10px;
    height:60px;
    right:0px;
    background-repeat:no-repeat;
    background-position:right top;
    background-image: url(handle.png);
    top:40%;
}

.dragFade{
    opacity:0.1;
}

.hidden{
    display:none;
}
#before-label{
    padding:5px 5px 5px 5px;
    white-space: nowrap;
    overflow: hidden;
    position:absolute;
    left:1px;
    top:1px;
    color:white;
    font-size:.8125em;
    line-height:.9em;
    font-weight:bold;
    background-color:#000;
}
#after-label{
    z-index:2;
    position:absolute;
    right:0px;
    padding:5px 5px 5px 5px;
    color:white;
    font-size:.8125em;
    line-height:.9em;
    font-weight:bold;
    background-color:#000;
}

#caption{
    color: #757575;
    font-size: .6875em;
    float:right;
    clear:both;
}