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

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: 488px; /* default width of container */
	height: 396px; /* default height of container */
}

#jsa_history.imageTransition { width: 500px; height:348px; }
#jsa_stationery.imageTransition { width: 526px; height:719px; }
#identitylaunch.imageTransition { width: 450px; height:324px; }
#LaunchInvitation.imageTransition { width: 350px; height:288px; }
#LaunchEvening.imageTransition { width: 487px; }
#ka_photos.imageTransition { width: 575px; height:495px; }
#ka_businesscards.imageTransition { width: 611px; height:413px; }
#ya_residency0506.imageTransition, #ya_residency0708.imageTransition, #ya_folderpack.imageTransition { height:343px; }
#ya_poster.imageTransition { width: 500px; height:343px; }
#ef_photos.imageTransition { width: 670px; height:448px; }
#ef_cover.imageTransition { width: 501px; height:336px; }
#ef_spreads.imageTransition { width: 500px; height:338px; }
#ef_knitting.imageTransition { width: 600px; height:387px; }
#ef_foxfur.imageTransition { width: 425px; height:650px; }
#us_identity.imageTransition { width: 450px; height:341px; }
#us_gnomes.imageTransition { width: 476px; height:347px; }
#us_prelaunch.imageTransition { width: 451px; height:351px; }
#us_seasonal.imageTransition { width: 726px; height:170px; }
#us_seeds.imageTransition { width: 550px; height:390px; }
#ew_thebuilding.imageTransition { width: 450px; height:375px; }
#ew_logo.imageTransition { width: 510px; height:375px; }
#ew_reception.imageTransition { width: 638px; height:375px; }
#ew_stationery.imageTransition { width: 513px; height:375px; }
#gwd_exhibition.imageTransition { width: 541px; height:393px; }
#os_design.imageTransition { width: 707px; height:471px; }
#os_photography.imageTransition { width: 567px; height:376px; }
#os_brochure.imageTransition { width: 513px; height:376px; }
#os_stationery.imageTransition { width: 513px; height:375px; }
#pl_platillos.imageTransition { width: 561px; height:377px; }
#pl_strapline.imageTransition { width: 685px; height:378px; }
#pl_menus.imageTransition { width: 501px; height:378px; }
#pl_pinbadge.imageTransition { width: 502px; height:378px; }
#uandi_businesscards.imageTransition { width: 513px; height:370px; }
#uandi_letterheads.imageTransition { width: 513px; height:370px; }
#uandi_photography.imageTransition { width: 550px; height:370px; }
#uandi_brochure.imageTransition { width: 513px; height:370px; }

/*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;
}

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

#wrapper.uandi div.imageSlideInfo {
	border-bottom: 1px dotted #826c4f;
}

#wrapper.jsa div.imageSlideInfo {
	color: #FD4703;
}

#wrapper.karenalder div.imageSlideInfo {
	color: #ffcb00;
}

#wrapper.yorkshireartspace div.imageSlideInfo, #wrapper.electricworks div.imageSlideInfo {
	color: #333333;
}

#wrapper.kidacne div.imageSlideInfo {
	color: #ff99cc;
}

#wrapper.urbansplash div.imageSlideInfo {
	color: #05d91e;
}

#wrapper.gwdmedia div.imageSlideInfo, #wrapper.platillos div.imageSlideInfo {
	color: #1bd81b;
}

#wrapper.osmosis div.imageSlideInfo {
	color: #4e413d;
}

#wrapper.uandi div.imageSlideInfo {
	color: #826c4f;
}

.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 */
#wrapper.jsa .imageSlideInfo span.next,
#wrapper.jsa .imageSlideInfo span.prev {
	background-image: url(../images/jsa/arrow_orange.gif);
}

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

#wrapper.yorkshireartspace .imageSlideInfo span.next,
#wrapper.yorkshireartspace .imageSlideInfo span.prev,
#wrapper.electricworks .imageSlideInfo span.next,
#wrapper.electricworks .imageSlideInfo span.prev {
	background-image: url(../images/yorkshireartspace/arrow_gray.gif);
}

#wrapper.kidacne .imageSlideInfo span.next,
#wrapper.kidacne .imageSlideInfo span.prev {
	background-image: url(../images/kidacne/arrow_kidacne.gif);
}

#wrapper.urbansplash .imageSlideInfo span.next,
#wrapper.urbansplash .imageSlideInfo span.prev {
	background-image: url(../images/urbansplash/arrow_urbansplash.gif);
}

#wrapper.gwdmedia .imageSlideInfo span.next,
#wrapper.gwdmedia .imageSlideInfo span.prev,
#wrapper.platillos .imageSlideInfo span.next,
#wrapper.platillos .imageSlideInfo span.prev {
	background-image: url(../images/gwdmedia/arrow_gwdmedia.gif);
}

#wrapper.osmosis .imageSlideInfo span.next,
#wrapper.osmosis .imageSlideInfo span.prev {
	background-image: url(../images/osmosis/arrow_osmosis.gif);
}

#wrapper.uandi .imageSlideInfo span.next,
#wrapper.uandi .imageSlideInfo span.prev {
	background-image: url(../images/uandi/arrow_uandi.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 {	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; }