/*
Website:	www.villa-la-herradura.co.uk
Author: 	Matt Branthwaite (matthewbranthwaite.co.uk)
Created: 	2009-03-22
Updated:	2009-03-28

*/

/* Degrade Gracefully */
ul.photo-list li { list-style: none; margin: 0; padding: 5px; background-color: #fff; border: 1px solid #cac9c7; margin-bottom: 10px; }


/* jQuery powered
Uses the following jQuery plugins:
Galleria - http://devkick.com/lab/galleria/
jCarousel - http://sorgalla.com/jcarousel/
*/

div.gallery-container { position: relative; width: 580px; margin: 0 auto; }

div#main_image { clear: both; margin: -1px 0 20px -1px; width: 570px; height: 425px; padding: 5px; background-color: #fff; border: 1px solid #cac9c7; }
div#main_image span.caption { position: absolute; top: 85px; left: 0; font-size: 1.3em; line-height: 20px; font-style: bold; }

p.gallery-nav { position: absolute; top: 85px; right: 0; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial sans-serif; font-size: 11px; }
p.gallery-nav a { text-decoration: none; background: transparent url(images/features-head-bg.png) 0 0 repeat; color: #a52100; padding: 3px 5px; font-size: 0.85em; }
p.gallery-nav a:hover { background: none; background-color: #a52100; color: #efc228; }
p.gallery-nav a:active { background: none; background-color: #efc228; color: #fff; }
p.gallery-nav a.hidden { display: none; }


/* Thumbnail Measurements = 88 x 66px
		82px width
		62px height
		3px padding
		1px border
*/
ul.thumbnails li { list-style: none; float: left; display:block; overflow:hidden; width:82px; height:62px; padding: 3px; border:1px double #cac9c7; margin: 0 4px; background:#fff; cursor: pointer; } /* We set the width/height explicitly. No width/height causes infinite loops. */
ul.thumbnails li.active { cursor: default; }
ul.thumbnails li a { display:none }
ul.thumbnails li img { position:relative; z-index: 2; width: 82px !important; height: 62px !important;  }
ul.thumbnails li div { position:absolute; display:block; top:0; left:180px }
ul.thumbnails li div img { cursor:pointer }
ul.thumbnails li.active div img, .galleria li.active div { display:block }
ul.thumbnails li img.thumb { cursor:pointer; top:auto; left:auto; display:block; width:auto; height:auto }
ul.thumbnails li .caption { display:block;padding-top:.5em }


/* jCarousel Clip */
div.jcarousel-container { position: relative; width: 588px; margin: 0 -4px 40px -4px; }
div.jcarousel-clip { z-index: 2; overflow: hidden; position: relative; width: 588px; height: 70px; }
ul.jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; }

div.jcarousel-next { z-index: 3;  }
div.jcarousel-prev { z-index: 3; }

div.jcarousel-next-horizontal,
div.jcarousel-prev-horizontal { position: absolute; top: 22px; width: 25px; height: 25px; cursor: pointer; }
div.jcarousel-next-horizontal { right: -30px; background: transparent url(images/next-horizontal.gif) no-repeat 0 -30px; }
div.jcarousel-prev-horizontal { left: -30px; background: transparent url(images/prev-horizontal.gif) no-repeat 0 -30px;}

div.jcarousel-next-horizontal:hover,
div.jcarousel-prev-horizontal:hover { background-position: 0 -60px; }

div.jcarousel-next-horizontal:active,
div.jcarousel-prev-horizontal:active { background-position: 0 -90px; }

div.jcarousel-next-disabled-horizontal,
div.jcarousel-next-disabled-horizontal:hover,
div.jcarousel-next-disabled-horizontal:active,
div.jcarousel-prev-disabled-horizontal,
div.jcarousel-prev-disabled-horizontal:hover,
div.jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: 0 0; }


/* testing */
/*div.gallery-container { background-color: red; }
ul.galleria { background-color: green; }*/