/* pattern:

<div class="postcard">
        <span class="picture">
                <img class="thumb" src="thumb.jpg">
                <img class="full" src="full.jpg">
        </span>
        <div class="info">
		...tbd...
        </div>
</div>

or replace <span class="picture"> with <a class="picture" href="...">

*/

body { width: 750px; }

p { width : 35em; }


h1, h2, h3, h4, h5 { clear: both; }

.postcard { clear: both; }

.postcard .picture {
	position: relative;
	float: left;
	z-index: 0;
	margin-right: 8px;
}

.postcard .picture:first-of-type { width: 160px; }

.postcard .picture:hover { z-index: 50; }

.postcard .picture .thumb {
	float: right;
	padding-bottom:2ex;
}

.postcard .picture .full {
	position: absolute;
	background-color: lightyellow;
	padding: 5px;
	border: 1px solid black;
	visibility: hidden;
}

.postcard .picture:hover .full {
	visibility: visible;
	top: -20px; 
	left: 20px;
}

.postcard .info {
	width: 570px;
	float: right;
	padding-bottom: 2ex;
}

/* see http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ 
       http://www.tek-tips.com/viewthread.cfm?qid=1014970 */