/* the css for the image spread, just within the containing .spread element
*/



	.spread {
		text-align: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
		background: #000000;
	}
	
	.spread .item {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		display: inline-block;
		vertical-align: top;
		
		overflow: hidden;
		position: relative;
		cursor: pointer;
	}
	
	.spread .item img {
		display: block;
		max-height: 150px;
		width: auto;
	}
	
	.spread .item .meta {
		display: none;
	}

/* these come into effect after layout tool has moved imgs and their divs to row elements */

	.spread .row {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		clear: both;
		padding-top: 1px;
		padding-bottom: 1px;
	}

	.spread .row.inner {
		display: table;
	}
	
	.spread .row .item {
		padding: 0;
		margin: 0;
		text-align: left;
	}
	
	.spread .row.inner .item {
		display: table-cell;
	}
	
	.spread .row .item + .item {
		margin-left: 2px;
		text-align: center;
	}
	
	.spread .row .item.lastInRow {
		//float: right;
		text-align: right;
	}
	
	
	.spread .row .item img {
		display: inline-block;
		max-height: none;
	}
	
	.spread .row .item + .item {
		text-align: center;
	}
	
	.spread .row .item.lastInRow {
		text-align: right;
	}
	
	.spread .row.lastRow {
		display: block;
	}
	

	.metaBox {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0;
		display: none;
	}

	.metaBox .arrow {
		background: #999999 url(/database/beacon/images/pointer.png) no-repeat;
		height: 12px;
		width: 100%;
	}
	
	.metaBox .close {
		float: right;
		padding: 10px 20px 6px 6px;
		cursor: pointer;
		width: 20px;
		height: 20px;
		text-indent: -999em;
		background: url(/database/beacon/images/close.png) no-repeat 4px 10px;
	}
	
		
	.metaBox .content {
		padding: 20px 15px 15px 15px;
	}
	
	
	.metaBox .content h2 {
		font-size: 20px;
		line-height: 1.25;
	}


	.metaBox .content h3.creator {
		margin-top: 6px;
		font-size: 14px;
		font-family: "Helvetica", sans-serif;
	}

	.metaBox .content .fullLink {
		margin-top: 12px;
		
		text-transform: uppercase;
		text-decoration: none;
		background: #e0e0e0;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		border: 1px solid #909090;
		font-size: 13px;
		font-family: sans-serif;
		color: black;
		display: inline-block;
		padding: 4px 7px;
		-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
		-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
		-o-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
		box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	}

	.metaRow {
		height: 0;
		background: white;
		overflow: hidden;
	}
	
	.metaRow .metaBox {
		display: block;
	}
	
	.metaRow .UI {
		padding: 15px;
	}
	
	.metaRow .UI .bigImage {

	}
	
	
	/* horizontal layout */
	.metaBox .content.horizontal {
	}
	
	.metaBox .UI.horizontal {
		float: right;
		text-align: right;
	}
	
	
	.metaBox:after {
		display: block;
		height: 0;
		clear: both;
		content: ".";
		text-indent: -9999em;
	}


	.metaBox .seqControls {
		margin-top: 10px;
		font-size: 12px;
		font-family: sans-serif;
		text-transform: uppercase;
	}
	
	.metaBox span {
		display: inline-block;
		border: 1px solid white;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		-o-border-radius: 2px;
		border-radius: 2px;
		padding: 2px 5px;
	}
	
	.metaBox span + span {
		margin-left: 10px;
	}
	
	.metaBox span em {
		font-style: normal;
	}
	
	.metaBox .prevSeq,
	.metaBox .nextSeq {
		border: 1px solid #a0a0a0;
		background: url(/database/beacon/images/arrows.png) no-repeat;
		text-indent: -999em;
		padding: 2px 6px;
		background-position: 3px -24px;
		-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
		-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
		-o-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
		box-shadow: 1px 1px 2px rgba(0,0,0,.3);
		cursor: pointer;
	}
	
	.metaBox .nextSeq {
		background-position: 3px 1px;
	}