/**
 * @package Xpert Showcase
 * @version 1.0
 * @author Everexpert http://www.everexpert.com
 * @copyright Copyright (C) 2009 - 2011 Everexpert
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 *
 */

/**********************************************
          Common Settings
***********************************************/
.clearfix:after {clear: both;content: '.';display: block;visibility: hidden;height: 0;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

.xs-gallery{margin: 10px;}
.xs-gallery .xs-item-wrap{float: left; margin: 0 15px 15px 0;}
.xs-gallery .xs-item{position: relative;}
    .xs-item a { text-decoration:none;}
        .xs-gallery .xs-item a:hover{ background: #222 !important;}
    .xs-summary{ padding:10px;}
        .xs-item .xs-summary .xs-title{
            font-size:14px;
            font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
            line-height:16px;
            letter-spacing:0.15em;
            color:#fff;
            text-shadow:1px 1px 0 rgb(0,0,0);
        }
        .xs-item .xs-summary .xs-intro{
            font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif;
            color:#aaa;
            text-shadow:1px 1px 0 rgb(0,0,0);
        }
        .xs-item .xs-summary .xs-date{ color: yellow; }

/***************************************************
    Summery View styles (Shutter, Fade & Tooltip)
****************************************************/

.xs-shutter .xs-item,
.xs-fade .xs-item{
    overflow:hidden;
    background:#111 url(../images/progress.gif) no-repeat center center;
}
    .xs-backdrop{
        display:none;
        position:absolute;
        top:0;
        height:100%;
        width:100%;
        background:#111;
    }
    
    .xs-overlay {
        display:none;
        z-index:5;
        position:absolute;
        width:100%;
        height:auto;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
        filter:alpha(opacity=00);
        background: url(../images/bg-black.png) repeat;
    }
        .xs-fade .xs-overlay {
            opacity:0;
            height: 100%;
        }

        .xs-overlay {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            filter:alpha(opacity=80);
        }
/***** Theme: Image Wall *****/
.wall .xs-item-wrap{margin: 0}

/***** Theme: Rounded *****/
.rounded .xs-item{background-color: transparent;}
    .rounded .xs-backdrop{}
.rounded .xs-item *{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

/***** Theme: Polaroid *****/
.polaroid .xs-item-wrap{
    padding: 10px 10px 30px;
    background: #fff;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    -o-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #eee;

}
    .polaroid .xs-item{background: none;}
.polaroid .xs-backdrop, .polaroid .xs-overlay{
    background: none;
}
.polaroid .xs-item-wrap{
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);

}
.polaroid .xs-item-wrap:nth-child(even){
    -webkit-transform: rotate(3deg) scale(1.05);
    -moz-transform: rotate(3deg) scale(1.05);
    -o-transform: rotate(3deg) scale(1.05);
    -ms-transform: rotate(3deg) scale(1.05);
    transform: rotate(3deg) scale(1.05);
}

/***** Theme: Uncut *****/
.uncut .xs-item-wrap{position: relative; margin: 0 15px 25px 0}
.uncut .xs-item-wrap:before{
    content: " ";
    display: block;
    position: absolute;
    background:  url(../images/photo_corner.png);
    width: 27px;
    height: 28px;
    left: -8px;
    bottom: -8px;
    z-index: 20;
}
.uncut .xs-item-wrap:after{
    content: " ";
    display: block;
    position: absolute;
    background:  url(../images/photo_corner.png);
    width: 27px;
    height: 28px;
    right: -10px;
    top: -10px;
    z-index: 20;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}