/* This is the CSS required for the gallery of room images
   I have chosen a font size of 76% as this is gives a suitable default size for
   most screen resolutions. It also allows Internet Explorer users to
   resize the font if they wish. */
#gallerybox body {
    text-align:center;    /* For IE and Opera */
    font-family: tahoma, arial, sans-serif;
    font-size:76%;
    letter-spacing:0.05em;
}
/* The containing box for the gallery.
   In order that the gallery can be viewed at a resolution of 800 x 600
   I will limit the #gallerybox div to a fixed size of 770px wide by 396px high.
   I will also add a 1px thick grey border.*/
#gallerybox {
    position:relative; 
    width:753px; 
    height:500px; 
    margin:20px auto 0 auto;  /* Non IE and Opera browsers will centre */
    border:0px solid #aaa;    /* set border to 1px to see box */
    }
/* Removing the list bullets and indentation (method depends on browser) */
#gallerybox ul {
    padding:0;    /* Non IE and Opera browsers */
    margin:0;     /* For IE and Opera */
    list-style-type:none; 
    }
/* Remove the images and text from sight by overlaying in 1 x 1 span
   at the top left of the gallerybox div. Also hides the text.
   top anf left position the dot */
#gallerybox a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:5px; 
    overflow:hidden;   /* Don't allow image and text to show */
    background:#fff;
    }
/* Adding the thumbnail images */
#gallerybox a.gallery, #gallerybox a.gallery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:0px solid #000; 
    margin:0px 0px 0px 0px; 
    text-align:left; 
    cursor:default;
    }
#gallerybox a.slidea {
    background:url(images/plans/plan-lounge-top.png); 
    height:130px; 
    width:130px;
    }
#gallerybox a.slideb {
    background:url(images/plans/plan-dining.png); 
    height:130px; 
    width:97px;
    }
#gallerybox a.slidec {
    background:url(images/plans/plan-kitchen.png); 
    height:130px; 
    width:76px;
    }
#gallerybox a.slided {
    background:url(images/plans/plan-garage.png); 
    height:130px; 
    width:97px;
    }
#gallerybox a.slidee {
    background:url(images/plans/plan-lounge-bottom.png); 
    height:112px; 
    width:130px;
    }
#gallerybox a.slidef {
    background:url(images/plans/plan-outside.png); 
    height:112px; 
    width:270px;
    }
    
#gallerybox a.slideg {
    background:url(images/plans/plan-bed3.png); 
    height:130px; 
    width:130px;
    }
#gallerybox a.slideh {
    background:url(images/plans/plan-bed4.png); 
    height:130px; 
    width:82px;
    }
#gallerybox a.slidei {
    background:url(images/plans/plan-bed5.png); 
    height:130px; 
    width:83px;
    }
#gallerybox a.slidej {
    background:url(images/plans/plan-bed1.png); 
    height:130px; 
    width:102px;
    }
#gallerybox a.slidek {
    background:url(images/plans/plan-bed2.png); 
    height:112px; 
    width:125px;
    }
#gallerybox a.slidel {
    background:url(images/plans/plan-first-outside.png); 
    height:112px; 
    width:267px;
    }

/* set the size of the unordered list to neatly house the thumbnails */
#gallerybox ul {
    width:410px; 
    height:386px;
    margin:0px; 
    float:right;      /* Show thumbnail box on right */
    }
#gallerybox li {
    float:left;
    }

/* styling the :hover span
    Since I have a relatively positioned #gallerybox div I can give the span
    an absolute position within this gallerybox (as I did at step 7 when hiding
    the images). I need to give this a width and height value of 372px to
    enable both portrait and landscape images to be fully displayed and a
    position of 10px from the top and 15px from the left to roughly center the
    images in the space available */
#gallerybox a.gallery:hover span {
    position:absolute; 
    width:340px; 
    height:372px; 
    top:20px; 
    left:0px; 
    color:#000; 
    background:#fff;
    }
#gallerybox a:hover { text-indent:0; } /* Trick to force IE6 to show the image on hover */

/*  Add default image when there is no hover */
#gallerybox {
    background:#fff url(images/rooms/2014_shutters_from_pool.jpg) 0px 20px no-repeat;
    }
#gallerybox img {
    width: 340px;
    height: 255px;
}