/****************************

Copyright the David Turner

Design CSS

Coded by David Turner
www.davidturner.info

NOTE: This code is copyrighted.  No unauthorized use
is allowed.  Dont steal code.  However, please feel free
to look at how we did something then write it yourself.

*/



/* Usage Instructions 
		- control the size of the container div by adding a second class to it e.g. class="imageTransition myClass"
		- add class name 'fade' to imageTransition div to replace the slide effect with fade effect
*/


/* BITS YOU CAN EDIT */
h2 {
	width: 100%;
	clear: both;
	padding-top: 1em;
}

/*container div*/
div.imageTransition {
	float: left;
	width: 800px; /* default width of container */
	height: 400px; /* default height of container */
}

#homepage.imageTransition { width: 800px; height:400px; }

/*navigation div*/
div.imageSlideInfo {
	font-family: Monaco, Arial, 'Courier New', monospaced;
	font-size: 0.9em;
	font-weight: bold;
	width: 100%;
	border-bottom: 1px dotted #666;
	margin-bottom: 20px;
	line-height: 20px;
	padding: 0;
}

/* CUSTOM STUFF 
#wrapper.platillos div.imageSlideInfo {
	border-bottom: 1px dotted #706038;
}
*/

.thumbnailContainer {
	width: 250px;
	float: left;
	margin-left: 12px;
}

.thumbnailContainer div {
	background: none;
	margin: 0px 12px 12px 0px;
	padding: 0px;
	width: auto;
	height: auto;
	line-height: normal; /* needs to be 4px smaller than height -> allows vertical align of images */
}

.thumbnailContainer div:hover {	background: #222; }

.thumbnailContainer div img { 
	max-width: 108px;
	max-height: 72px;
}



/* BITS YOU DONT NEED TO EDIT */
div.imageTransition {
	overflow: hidden; 	
	clear: left; 	
	position: relative;
	float: left;
}

/* next and previous buttons */
.imageSlideInfo span.next,
.imageSlideInfo span.prev {
	background-image: url(../images/jsa/arrow_orange.gif);
}

/* CUSTOM BITS
#wrapper.karenalder .imageSlideInfo span.next,
#wrapper.karenalder .imageSlideInfo span.prev {
	background-image: url(../images/karenalder/arrow_yellow.gif);
}
*/

div.imageTransition div, div.imageTransition img {	border: 0px !important; 	margin: 0px !important; 	padding: 0px !important; }

div.imageTransition div.slideContainer {	height: 100%; overflow: hidden; position: absolute; }

div.imageTransition div.slideContainer div.imageContainer {	overflow: hidden;	float: left;}

.imageSlideInfo {	display:none; float: left; height:30px; }

.imageSlideInfo span{
	display: inline-block;	padding: 0;	float: left; 
}

.imageSlideInfo span.imageSlideNavigation, .imageSlideInfo span.imageSlideNavigation span, .imageSlideInfo span.current, .imageSlideInfo span.total, .imageSlideInfo span.spacer {		font-size: 0.9em; }

.imageSlideInfo span.imageSlideNavigation span { font-size: 1em; }

span.imageSlideNavigation { 	margin-left: 1em; 	padding: 0px; }

span.imageSlideNavigation span { display: block; 	margin: 0;
}

.imageSlideInfo span.next,
.imageSlideInfo span.prev  { 
	text-indent: -9000em;
	width: 12px;
	height: 19px;
	cursor: pointer;
	background-repeat: no-repeat; 

} 

.imageSlideInfo span.next  { 	background-position: 4px center; }

.imageSlideInfo span.prev { 	background-position: -16px center;}


.thumbnailContainer {
	floaT: left;
}

.thumbnailContainer div {
	float: left;
	display: table-cell !important;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}

.thumbnailContainer div img { 
	vertical-align: middle;
	text-align: center;
}

img.image-float { float: left; margin-left: 12px; }