.roomImageColumn {

    float:left;
    position: relative;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
}


/* grid */

#imageGrid {
    margin:20px 0 20px 0;
    max-height:10000px;
    overflow:hidden;
    transition:max-height 0.5s;
}

/* sadly not used */
#imageGrid.hiddenImageGrid  {

    max-height:0;
}

.gridItem {
    display: inline-block;
    background: #fff;
    background-repeat: no-repeat;
    /*padding: 1em;
    margin: 0 0 1.5em;*/
    width: 100%;
    margin:0 0 10px 0;
    /*box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;*/

    line-height:0px;
    
    background-size:100%;
    cursor:pointer;
    position:relative;
}

.gridItem img {
    width:100%;
    visibility:hidden;
    border: 1px solid #eee;
}

.gridItem .imageControl
{
    float:left;
    display:none;
    z-index:20;
    position:absolute;
    bottom:2px;
    right:2px;
    background:none;
}

.gridItem .imageControl div
{
    float:right;
    margin:5px 5px 5px 5px;
    padding: 8px 8px;
    background-color: rgba(255, 255, 255, 0.8);
    background-image: none;
    border: 1px solid #dddddd;
    /*border-radius: 4px;*/
    border-radius:0;
    outline: 0;
    color:#5c5c5c;
    font-size: 15px; 
}

.gridItem .imageControl div:hover
 {

    background-color: rgba(204, 204, 204, 0.8);
}

#gridClear {

    clear:both;
    height:0px;
    line-height:0px;
}

#gridBottom {

    display: inline-block;
    padding: 0 0 0 0 ;
    margin: 0 0 20px 0;
}

#gridBottom #spinner {

    height: 50px;
    width: 50px;
    background-color:white;
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
    background-image:url(/images/fixed/small_spinner.gif);
}

#gridBottom a {
    line-height: 20px;
    padding: 10px 15px 10px 15px;    text-decoration:none;
    color: #777777;
    font-size:14px;
    border:1px solid #cccccc;
}

#gridBottom a:hover {
    color: #333333;
    background-color: #e7e7e7;
    text-decoration:none;
}

/* slider */

#bigImageSlider {

    background: white;
    display: none;
    /*left: 0;
    top: 0;
    right:0;
    bottom:0;
    position: absolute;*/
    overflow: hidden;
    height:400px;
    z-index: 200;
    margin-top:20px;
    /*margin-top:-20px; for transition */
    max-height:1000px;
    transition:max-height 0.5s;
    border:1px solid #eee;
    direction:ltr; need to override on RTL sites*/
}

/* sadly not used 
#bigImageSlider.hiddenBigImageSlider {

    max-height:0;
}
*/

#bigImageStore {
    
    height: 100%;
    overflow: hidden;
    position: relative;
    transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1);
}

.bigImagePanel {
    float:left;
    height:100%;
    background: white;
    z-index:300;
    transform: translate3d(0px, 0px, 0px);
    margin-right: 10px;    /*make sure this is handled in the script*/    
}

.bigImagePanelFade {

    display: none;
    float:left;
    position:fixed;
    left:0;
    right:0;
    top:0;
    height:100%;
    background: white;
    z-index:300;
    transform: translate3d(0px, 0px, 0px);
}

.bigImageWrapper {
    min-height: 100%;
    height: auto !important;
    /*margin: 0 0 -30px 0; /* the bottom margin is the negative value of the footer's height */
    position: relative;
    border:0px solid #eee;
}

.bigImageHeader {
    display:block;
    height: 60px;
    position:relative;
    overflow: visible;
}

#bigImageMenu {
    color:black;
    background:transparent;
    display:block;
    /*position:absolute;
    top:0;
    left:0;
    right:0px;
    height:50px; */
    z-index:1000;
    height:auto;
}

#bigImageMenu ul {
    margin:0;
    list-style-type:none;
    float:right;
    color:#5c5c5c;
    background-color: transparent; /*rgba(255, 255, 255, 0.7);*/
    padding:0 0 0 0;
}

#bigImageMenu ul li {
    margin:0;
    display: inline-block;
    zoom:1;
    *display:inline;
}

.bigImageButton, .bigImageButton:focus {
    /*width:24px;
    line-height:24px;*/
    margin:5px;
    padding: 9px 10px;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: none;
    border: 1px solid #dddddd;
    /*border-radius: 4px;*/
    border-radius:0;
    outline: 0;
}

.bigImageButton:hover
{
    background-color: rgba(204, 204, 204, 0.5);
}


#likeCount {
    margin-left:4px;
}

#bigImageMenuButton
{
    display:none;
}

@media (max-width: 670px) {

    #bigImageMenuButton
    {
        display:inline;
    }
}    

.bigImage {
    cursor: col-resize;
    display:block;
    /*top:50px;
    bottom:50px;
    position: absolute;*/
    /*border:1px solid #eee;*/
    background-repeat:no-repeat;
    background-position:center;
    background-image:url(/images/fixed/loading_spinner.gif);
    width: 100%;
    padding: 0;
    /*max-height:400px;*/
    position:relative;
    height:400px;
}

.bigImage img {
    visibility:hidden;
    width:100%;
    border:0px solid green;
    padding:0;
    margin:0;
    line-height:0px;
    display:block;
    z-index:0;
    max-height:400px;
}

.bigImage div {

    display: block;
    height:100%;
    z-index:1600;
    float:left;
    background-color:transparent;
    margin:0;
    position: absolute;
    top:0;

}

.bigImage .leftClick {

    left:0;    
    width:35%;
    cursor: url(/images/fixed/arrow_left.cur) 24 24, default;
    cursor: url(/images/fixed/arrow_left.cur), default;
}

.bigImage .middleClick {

    left:35%;
    width:30%;
    cursor: url(/images/fixed/close.cur) 24 24, default;
    cursor: url(/images/fixed/close.cur), default;
}

.bigImage .rightClick {

    left:65%;
    width:35%;
    cursor: url(/images/fixed/arrow_right.cur) 24 24, default;
    cursor: url(/images/fixed/arrow_right.cur), default;
}

#bigImageCaption {

    display:none;
    padding:10px;
    border:1px solid #eee;
    margin-top:20px;
    overflow:hidden;
}

#bigImageCaption p {

    font-size:0.825em;
}


.bigImageFooter {
    /*display:block;*/
    /*height: 50px;    
    position:relative;*/
    /*overflow: hidden;
    /*margin-top:-50px;*/
    /*-moz-box-sizing: border-box;*/
}

.bigImageFooter .bigImageDescription {
   /* border:1px solid #eee;
    border-top:none;*/
    padding: 10px 0 0 0;
}

.bigImageFooter .bigImageDescription p {

    font-size:0.825em;
}

.bigImageName {
    /*display:block;
    position:absolute;
    left:0;
    width:100%;
    bottom:0;
    height:50px;
    z-index:500;
    text-align: center;*/
}

.bigImageName span {

    color:#5c5c5c;
    background-color:rgba(255, 255, 255, 0.5);
    padding:2px 10px 2px 10px;
    /*line-height:50px;*/
}

@media (max-width: 670px) {

    /*.bigImageHeader{
        height:0px;
    }
    
    .bigImageFooter{
        height:0px;
        margin-top:50px;
    }
    
    .bigImageName {
        display:none;
    }
    
    .bigImage {
        top:0;
        bottom:0;
    }*/
}