#breadcrumb { display:none; }

/* layout */
#products-interactive { position:relative; width:516px; height:280px; }

#products-interactive ul.nav { position:absolute; left:0px; top:0px; display:block; width:164px; height:280px; margin:0; padding:0; }
#products-interactive ul.nav li { margin:0; padding:0; list-style:none; }
#products-interactive ul.nav li a { display:block; width:164px; height:0; padding:56px 0 0 0; overflow:hidden; }

.product { display:none; } /* these get shown with javascript */
#products-interactive .product .info { position:absolute; right:0; bottom:0; width:334px; height:auto; padding:10px 20px 5px 20px; }
#products-interactive .product .info  p { margin-bottom:10px; font-size:11px;  }
.product .slideshow, .product .slideshow img { position:absolute; left:0; top:0;  }

#products-interactive .product { z-index:1; }
#products-interactive .info { z-index:98; }
#products-interactive .nav { z-index:99; }


/* colour */
#products-interactive { background:transparent url(feature-bg.gif) no-repeat scroll 0 0; }
#products-interactive a:active { outline:none; }
#products-interactive ul.nav a { background: transparent url(nav.png) no-repeat scroll 0 0;  }
#products-interactive ul.nav a.paint 		{ background-position:0 0; }
#products-interactive ul.nav a.wallpaper 	{ background-position:0 -56px; }
#products-interactive ul.nav a.curtains 	{ background-position:0 -112px; }
#products-interactive ul.nav a.blinds 		{ background-position:0 -168px; }
#products-interactive ul.nav a.flooring 	{ background-position:0 -224px; }

#products-interactive ul.nav a.paint:hover 		{ background-position:-200px 0; }
#products-interactive ul.nav a.wallpaper:hover 	{ background-position:-200px -56px; }
#products-interactive ul.nav a.curtains:hover 	{ background-position:-200px -112px; }
#products-interactive ul.nav a.blinds:hover 	{ background-position:-200px -168px; }
#products-interactive ul.nav a.flooring:hover 	{ background-position:-200px -224px; }

#products-interactive ul.nav a.selected.paint 		{ background-position:-400px 0;  outline:none; }
#products-interactive ul.nav a.selected.wallpaper 	{ background-position:-400px -56px;  outline:none; }
#products-interactive ul.nav a.selected.curtains 	{ background-position:-400px -112px; outline:none; }
#products-interactive ul.nav a.selected.flooring 	{ background-position:-400px -224px; outline:none; }
#products-interactive ul.nav a.selected.blinds		{ background-position:-400px -168px; outline:none; }
#products-interactive ul.nav a.selected, #products-interactive ul.nav a.selected:hover { background-position-x:-400px; }
#products-interactive ul.nav a:active, #products-interactive ul.nav a:focus, #products-interactive ul.nav a.selected, #products-interactive ul.nav a.selected:hover { outline:none; }

#products-interactive .product .info { background:transparent url(info-bg.png) no-repeat bottom right; color:#fff; }
#products-interactive .product .info a { color:#e6e5d3; }
#products-interactive .product .info a { background:transparent url(arrow-button.png) no-repeat scroll center left; }


/* type */

#products-interactive a { cursor:pointer; }
#products-interactive .product .info a { display:block; font-weight:bold; line-height:20px; padding-left:25px; text-decoration:none; }
#products-interactive .product .info a:hover { text-decoration:underline; }

/*
        	<li><a class="paint" href="#products-paint">Paint</a></li>
        	<li><a class="wallpaper" href="#products-wallpaper">Wallpaper</a></li>
        	<li><a class="curtains" href="#products-curtains">Curtains</a></li>
        	<li><a class="blinds" href="#products-blinds">Blinds</a></li>
        	<li><a class="flooring" href="#products-flooring">Flooring</a></li>
*/

/* debug */