@charset "utf-8";
/* CSS Document */

/*
*
*	Created by: David W. Murray
*	Date: October 7, 2009
*	Based upon concepts used in CSS drop-down menus at "Drop Down CSS Menus"
*	http://www.cssmenumaker.com/
*	Specifically:	http://www.cssmenumaker.com/builder/menu_info.php?menu=003
*
*/

/*^+^ DIMENSIONS ^+^*/
.css-image-gallery-wrapper {/*
	width: 780px;
	height: 320px;*/
}
.trigger {
	width: 100px;
	height: 75px;
}
	.trigger .image-thumbnail {
		width: 100%;
		height: 100%;
	}
.popup {
	width: 500px;
}
	.popup .image-large {
		width: 300px; /* 230px */
		height: 225px; /* 230px */
	}
	.popup .image-description {
		width: 190px;
	}

/*^+^ DISPLAY ^+^*/
.css-image-gallery-wrapper {
	
}
.trigger {
	
}
.popup {
	
}


/*^+^ FLOAT ^+^*/
.css-image-gallery-wrapper {
	
}
.trigger {
	float: left;
}
.popup {
	float: left;
}
	.popup .image-large {
		float: left;
	}
	.popup .image-caption {
		clear: both;
	}
	.popup .image-description {
		float: right;
	}

/*^+^ BORDERS ^+^*/
.css-image-gallery-wrapper {
	border: none;
}
	.css-image-gallery-wrapper div:hover > img {
		border: 1px solid #CC0000;
	}
	.css-image-gallery-wrapper .popup .image-large {
		border: none;
	}
.trigger {
	
}
	.trigger .image-thumbnail {
		border: 1px solid #FFFFFF;
	}
.popup {
	border: 1px solid #CC0000;
}

/*^+^ BACKGROUNDS ^+^*/
.css-image-gallery-wrapper {
	background-color: #FFFFFF;
}
.trigger {
	
}
.popup {
	background-color: #FFFFFF;
}


/*^+^ POSITIONING ^+^*/
.css-image-gallery-wrapper {
	
}
.trigger {
	
}
.popup {
	position: relative;
	left: -10000px;
}

/*^+^ MARGINS / PADDING ^+^*/
/*
*	NOTE:	There's actually a bit of trickiness going on here...
*				I wanted to leave ONLY a 10px margin, or "border area", if you will,
*				around each image.  The problem was, with CSS, I could target the first 
*				thumbnail image ("trigger" class), assign a new class to the "trigger" box 
*				that came into contact with the right-hand wall of the bounding wrapper box 
*				("css-image-gallery-wrapper" class), alter the padding for the wrapper box, 
*				or alter the margin for the individual trigger boxes.  The problem is, if they were 
*				the right shape conceivably one would make it right to the edge of the wrapper
*				box and have 20px space between it and the border of the wrapper.
*
*				The solution was to add 10px padding to the left and top of the wrapper 
*				box and add a 10px margin	 on the right and bottom of the trigger elements.
*
*/
.css-image-gallery-wrapper {
	padding: 10px 0px 0px 10px;
}
.trigger {
	margin: 0px 10px 10px 0px;
}
.popup {
	padding: 10px;	
}
	.popup .image-large {
		margin: 0px;
	}
	.popup .image-caption {
		margin: 0px 0px 10px;
	}
	.popup .image-description {
		padding: 0px;
	}
		.popup .image-description > p {
			margin: 0px;
		}
		.popup .image-description > p + p {
			margin: 10px 0px 0px;
		}

/*^+^ LAYERING ^+^*/
.css-image-gallery-wrapper {
	z-index: 0;
}
.trigger {
	z-index: 10;
}
.popup {
	z-index: 20;
}

/*^+^ FONT ^+^*/
.css-image-gallery-wrapper {
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.trigger {
	
}
.popup {
	
}
	.popup .image-caption {
		font-size: 14px;
		color: #CC0000;
		text-align: center;
	}
	.popup .image-description {
		font-size: 12px;
		font-family: "Verdana";
		color: #000000;
	}

/*^+^ !!! ACTION !!! ^+^*/
/*
.css-image-gallery-wrapper div:hover > div {
	left: 0px;
	top: -5px;
}*/
.css-image-gallery-wrapper .trigger.item-1:hover > div {
	left: 0px;
	top: -5px;
}
.css-image-gallery-wrapper .trigger.item-2:hover > div {
	left: -110px;
	top: -5px;
}
.css-image-gallery-wrapper .trigger.item-3:hover > div {
	left: -220px;
	top: -5px;
}
.css-image-gallery-wrapper .trigger.item-4:hover > div {
	left: -330px;
	top: -5px;
}
.trigger {
	
}
.popup {
	
}