/* CSS Document */

		/* 
					For multiple lightboxes, just duplicate the HTML, no duplication of styles needed. 
					class="img-X-sm" denotes a thumbnail image.
					class="img-X-lg" denotes the larger image, which sits directly below the thumbnail in the HTML.
					The UL.image-box must be given dimensions big enough to encompass:
						imageNumber x imageWidth/imageHeight + any borders/padding/margins req'd
						- careful, box model problems will creep in if you start adding borders/margins here
					Any specified height attributes all relate to the size of the thumbnail image used.
				*/
					ul.image-boxb {
					position:relative; /* Important! */
					width:350px;
					height:400px;
					margin:0; padding:0;
					margin-left:20px;
					clear:both;
					background-position:0px 120px;
					background-repeat:no-repeat;
					
					}
				
				
				ul.image-box {
					position:relative; /* Important! */
					width:350px;
					height:400px;
					margin:0; padding:0;
					margin-left:20px;
					clear:both;
					background-position:0px 120px;
					background-repeat:no-repeat;
					
					}
				/* Duplicate the following style, change the letter suffix and add the new style to the UL's class list. */
				ul.box-a { background-image:url(../byronbayaccommodation/accommodation_images/Aspa_001.jpg); }
				ul.box-b { background-image:url(../byronbayaccommodation/accommodation_images/Cforest002.jpg); }
				ul.box-c { background-image:url(../byronbayaccommodation/accommodation_images/Dmountain003.jpg); }
				ul.box-d { background-image:url(../byronbayaccommodation/accommodation_images/hibc_001.jpg); }
				ul.box-e { background-image:url(../byronbayaccommodation/accommodation_images/palmlrg_002.jpg); }
					
				/* If you'd prefer the default image to be IMG instead of a background-image, uncomment the following styles and the DIV, below the UL. 
				div.default { margin-top:-270px; }			
					div.default img { padding-left:50px; }
					*/
					ul.image-box li {
						position:absolute;
						z-index:+2;
						left:0;
						width:100%;
						height:100px;
						list-style-type:none;
						}
					ul li a img { border:none; display:block; /* Important! */ }
					/* The following styles are restricted to spacing only, nothing majorly breakable here. */
					li.item-b { margin-left:105px; }
					li.item-c { margin-left:211px; }
					li .img-a-lg, li .img-b-lg, li .img-c-lg { position:absolute; padding-top:20px; }
					li a img.img-a-lg { left:0px; }
					li a img.img-b-lg { left:-105px; }
					li a img.img-c-lg { left:-212px; }
					ul.image-box li a { padding-right:15px; /* This padding makes sure MacIE5 doesn't spak when you're hovering over the gap between thumbnails */ }
					ul.image-box li a.last-item { width:125px; /* These styles are for edge margin/padding over-rides on the last items in a lightbox, optional depending on your layout. */ }
					/* Spacing styles end. */
						/*
							the magic -> 
							visibility and overflow (whether an elements excess content can be seen or not, 'auto' is the setting for scrollbars) are
							switched when you hover over an A tag. Each list item's A tag surrounds -both- the thumbnail and the enlarged image.
						*/					
						li a img.img-a-lg, li a img.img-b-lg, li a img.img-c-lg { visibility:hidden; /* Important! */ }
						li a:hover img.img-a-lg, li a:hover img.img-b-lg, li a:hover img.img-c-lg { visibility:visible; /* Important! */ }
			@media all { /* MacIE5 and Mac/IE NS4 filter */
						ul.image-box li a {
							overflow:hidden; /* Important! */
							display:block; /* Important! */
							height:100px; /* This should be the only value changed in this last set of styles, it's the same as your thumbnail image  */
							}
						ul.image-box li a:hover { overflow:visible; /* Important! */ }
						}