﻿/* listing image tag overlay*/
/*Sam 20 Jan 2015*/
.image-taged
{    
    position:absolute;
    left:0;
    top:0;
}
.image-tag
{
    font-size:14px;
    background-color:#4a525d;
    z-index:100;
    position:absolute;    
    color: #ffffff;
    left:0px;
    top:20px;
    padding:5px;
    text-transform:uppercase;
}
.property-status-tag-common,
.property-status-tag,
.property-status-tag-flipped {
  background: #4a525d;
  color: #ffffff;
}
.image-tag:hover {
  background-color: #ff8000;
}
.image-tag:hover:before {
  border-right-color: #ff8000;
}
.image-tag:before {
  border-color: transparent #4a525d transparent transparent;
}
.image-tag:hover {
  background-color: #ff8000;
}
.image-tag:hover:after {
  border-left-color: #ff8000;
}
.image-tag:after {
  border-color: transparent transparent transparent #4a525d;
   right: -16px;
    border-width: 16px 0 16px 16px;
}


/* END listing image tag overlay*/



.listing
{
    background-color:#f5f3f3;
    box-shadow: 0px 0px 1px #ccc;
    padding:0px;
    border:1px solid #e8e8e8;
    border-radius:5px;
    margin:20px 0px;
}
.listing-detail
{
    padding:10px;
    background-color:white;
}

.listing-property
{
    padding:15px 5px 5px 5px;
}



/* Sam:25 Feb 2016
    listing image effects
   http://stackoverflow.com/questions/28377817/zoom-in-on-image-on-hover-using-transform-scale-still-making-image-bigger-from 
*/
.img-wrapper {
    display: inline-block;
    overflow: hidden;
    
    border: 1px solid gray;
}

.img-wrapper img {
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    
    vertical-align: middle;
}

.img-wrapper img:hover {
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
    transform:scale(1.5);
}

#content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}