Required JavaScript jQuery files

• None required
code <!--jquery-1.3.2.js--><!--ui.core.js--><!--ui.accordion.js--><!--ui.tabs.js--><!--ui.datepicker.js--><!--ui.draggable.js-->
[ ]String length: 123

CSS

@charset "utf-8";

/*--------------------------------------------------------------------------
Splash
--------------------------------------------------------------------------*/
div.splash {
	width: 770px; /* this is needed otherwise IE gets upset */
	height: 253px;
	background: transparent url(styleguide/images/home.jpg);	
	float: left;
	}		

/*--------------------------------------------------------------------------
Image navigation - ul and li
--------------------------------------------------------------------------*/
ul.image-navigation {
	margin: 0;
	padding: 0;
	width: 230px;
	height: 230px;
	background: url('styleguide/images/bg-003366-60percent.png');  /* transparent bg */
	list-style-type: none;
	float: right;
	margin: 10px;
	display: inline; /* IE6 - fix for doubled float margin bug */
	}

ul.image-navigation li {
	float: left;
	width: 66px; /* actual size of square */
	height: 66px; /* actual size of square */
	margin-left: 8px;
	margin-top: 8px;
	display: inline; /* Fix for IE6 doubled float margin bug */
	}

/*--------------------------------------------------------------------------
Image navigation - default
--------------------------------------------------------------------------*/
ul.image-navigation li a {
	display: block;
	height: 64px; /* size of bg image taking into account 2px border */
	width: 64px;  /* size of bg image taking into account 2px border */
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: white;
	text-decoration: none;
	border: 1px #ccc solid;	
	text-indent: -2000px;
	font-size: 8px;
	color: transparent;
	}

ul.image-navigation li a span {
	padding: 5px 2px;
	text-align: center;
	line-height: 1em;
	display: block;
	}

ul.image-navigation li a {
	background-image:url(styleguide/images/thumb-reel.jpg);		
	}

ul.image-navigation li a.home {
	background-position: 0px -70px;
	}

ul.image-navigation li a.the-villa {
	background-position: -70px -70px;
	}

ul.image-navigation li a.the-pool {
	background-position: -140px -70px;		
	}

ul.image-navigation li a.the-gardens {
	background-position: -210px -70px;		
	}

ul.image-navigation li a.la-herradura {
	background-position: -280px -70px;		
	}

ul.image-navigation li a.confirm-booking {
	background-position: -350px -70px;		
	}

ul.image-navigation li a.faqs {
	background-position: -420px -70px;		
	}

ul.image-navigation li a.contact-us {
	background-position: -490px -70px;		
	}

/*--------------------------------------------------------------------------
Image navigation - hover
--------------------------------------------------------------------------*/
ul.image-navigation li a:hover {
	display: block;
	height: 64px; /* size of bg taking into account 8px border */
	width: 64px;  /* size of bg taking into account 8px border */
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	}



/*--------------------------------------------------------------------------
Image navigation - active-trail
--------------------------------------------------------------------------*/
ul.image-navigation li.active-trail a.home,
ul.image-navigation li.active-trail a.home:hover,
ul.image-navigation li.active-trail a.the-villa,
ul.image-navigation li.active-trail a.the-villa:hover,
ul.image-navigation li.active-trail a.the-pool,
ul.image-navigation li.active-trail a.the-pool:hover,
ul.image-navigation li.active-trail a.the-gardens,
ul.image-navigation li.active-trail a.the-gardens:hover,
ul.image-navigation li.active-trail a.la-herradura,
ul.image-navigation li.active-trail a.la-herradura:hover,
ul.image-navigation li.active-trail a.confirm-booking,
ul.image-navigation li.active-trail a.confirm-booking:hover,
ul.image-navigation li.active-trail a.faqs,
ul.image-navigation li.active-trail a.faqs:hover,
ul.image-navigation li.active-trail a.contact-us,
ul.image-navigation li.active-trail a.contact-us:hover {
	border: 4px #fff solid;		
	height: 57px;
	width: 57px;
	} 


/*--------------------------------------------------------------------------
Image navigation - hover
--------------------------------------------------------------------------*/
ul.image-navigation li a.home:hover,
ul.image-navigation li a.the-villa:hover,
ul.image-navigation li a.the-pool:hover,
ul.image-navigation li a.the-gardens:hover,
ul.image-navigation li a.la-herradura:hover,
ul.image-navigation li a.confirm-booking:hover,
ul.image-navigation li a.faqs:hover,
ul.image-navigation li a.contact-us:hover {
	border: 1px white solid;		
	height: 64px;
	width: 64px;
	}

ul.image-navigation li a.home:hover {
	background-position: 0px 0px;
	}
	
ul.image-navigation li a.the-villa:hover {
	background-position: -70px 0px;
	}

ul.image-navigation li a.the-pool:hover {
	background-position: -140px 0px;		
	}

ul.image-navigation li a.the-gardens:hover {
	background-position: -210px 0px;		
	}

ul.image-navigation li a.la-herradura:hover {
	background-position: -280px 0px;		
	}

ul.image-navigation li a.confirm-booking:hover {
	background-position: -350px 0px;		
	}

ul.image-navigation li a.faqs:hover {
	background-position: -420px 0px;		
	}

ul.image-navigation li a.contact-us:hover {
	background-position: -490px 0px;		
	}

/*--------------------------------------------------------------------------
Image navigation - active
--------------------------------------------------------------------------*/
ul.image-navigation li.active-trail a:hover.home,
ul.image-navigation li.active-trail a.home {
	background-position: -3px -3px;
	}

ul.image-navigation li.active-trail a:hover.the-villa,
ul.image-navigation li.active-trail a.the-villa {
	background-position: -73px -3px;
	}

ul.image-navigation li.active-trail a:hover.the-pool,
ul.image-navigation li.active-trail a.the-pool {
	background-position: -143px -3px;		
	}

ul.image-navigation li.active-trail a.the-gardens,
ul.image-navigation li.active-trail a:hover.the-gardens {
	background-position: -213px -3px;		
	}

ul.image-navigation li.active-trail a:hover.la-herradura,
ul.image-navigation li.active-trail a.la-herradura {
	background-position: -283px -3px;		
	}

ul.image-navigation li.active-trail a.hover:confirm-booking,
ul.image-navigation li.active-trail a.confirm-booking {
	background-position: -353px -3px;		
	}

ul.image-navigation li.active-trail a:hover.faqs,
ul.image-navigation li.active-trail a.faqs {
	background-position: -423px -3px;		
	}

ul.image-navigation li.active-trail a:hover.contact-us,
ul.image-navigation li.active-trail a.contact-us {
	background-position: -493px -3px;		
	}

JavaScript

HTML

<ul class="image-navigation">
<li><a href="http://www.zerotouch.com/../." class="home" title="The house &amp; pool">The house &amp; pool</a></li>
<li><a href="http://www.zerotouch.com/../." class="the-villa" title="The climate">The climate</a></li>
<li><a href="http://www.zerotouch.com/../." class="the-pool" title="The beaches">The beaches</a></li>
<li><a href="http://www.zerotouch.com/../." class="the-gardens" title="Sports facilities">Sports facilities</a></li>
<li><a href="http://www.zerotouch.com/../." class="la-herradura" title="The locality">The locality</a></li>
<li><a href="http://www.zerotouch.com/../." class="confirm-booking" title="Rental rates">Rental rates</a></li>
<li><a href="http://www.zerotouch.com/../." class="faqs" title="The country walks">The country walks</a></li>
<li><a href="http://www.zerotouch.com/../." class="contact-us" title="The caves of Nerja">The caves of Nerja</a></li>
<li><a href="http://www.zerotouch.com/../." class="image-9" title="The food">The food</a></li>
</ul>
<p>With 7 images<br />
This shows the look and feel when  7-images are used.</p>
<ul class="image-navigation">
<li><a href="http://www.zerotouch.com/../." class="home" title="The house &amp; pool">The house &amp; pool</a></li>
<li><a href="http://www.zerotouch.com/../." class="the-villa" title="The climate">The climate</a></li>
<li><a href="http://www.zerotouch.com/../." class="the-pool" title="The beaches">The beaches</a></li>
<li><a href="http://www.zerotouch.com/../." class="the-gardens" title="Sports facilities">Sports facilities</a></li>
<li><a href="http://www.zerotouch.com/../." class="la-herradura" title="The locality">The locality</a></li>
<li><a href="http://www.zerotouch.com/../." class="confirm-booking" title="Rental rates">Rental rates</a></li>
<li><a href="http://www.zerotouch.com/../." class="faqs" title="The country walks">The country walks</a></li>
</ul>
<p>With 4 images<br />
This shows the look and feel when just 4-images are used.</p>
<ul class="image-navigation">
<li><a href="http://www.zerotouch.com/../." class="home" title="The house &amp; pool">The house &amp; pool</a></li>
<li><a href="http://www.zerotouch.com/../." class="the-villa" title="The climate">The climate</a></li>
<li><a href="http://www.zerotouch.com/../." class="the-pool" title="The beaches">The beaches</a></li>
<li><a href="http://www.zerotouch.com/../." class="the-gardens" title="Sports facilities">Sports facilities</a></li>
</ul>