/*	PhotoTables.css - CSS Style Sheet for fancy boxed-photos on the left, right,
	and center of a page:
		photoLeft, photoCenter, photoRight,
		photoCaptionCenter, photoCaptionAudio
	
	Extracted from Flutopedia.com on 6/20/2015 to use on the FluteHaven.com staff page,
	then used on subsequent web sites.
*/

/*	Note that there is no "float: center" ... this must be done with the margin-left and -right properties,
	which seem to work on all browsers.
	align=center in the <table> tag, except that only works on IE!!
*/

table.photoLeft, table.photoCenter, table.photoRight {
	background-color: #fcfaf2;
	border-top: #d3c7bc 2px solid;
	border-left: #c3b7ac 2px solid;
	border-right: #a3978c 2px solid;
	border-bottom: #93877c 1px solid;
}
	
table.photoLeft {
	float: left;
	margin: 0.6em 1.0em 0.6em 0.0em;		/* Top Right Bottom Left */
}

table.photoRight {
	float: right;
	margin: 0.6em 0.0em 0.6em 0.6em;		/* Top Right Bottom Left */
}

/* Approved way to center a table, according to http://theodorakis.net/tablecentertest.html
	It does seem to work on all browsers, except IE 7, which requires the <table align=center ...>
*/

table.photoCenter {
	margin-left: auto;
	margin-right: auto;
}

.photoLeft td, .photoCenter td, .photoRight td {
	background-color: #fcfaf2;
	border-top: #93877c 1px solid;
	border-left: #a3978c 1px solid;
	border-right: #c3b7ac 1px solid;
	border-bottom: #d3c7bc 1px solid;
}

/* Paragraph tag for the <p> contents of the lower (or upper) caption box in a
   .photoLeft/Right/Center table.
*/

.photoCaptionCenter {
	font-size: 85%;
	font-style: italic;
	line-height: 1.33;
	margin: 2px 5px 2px 5px;		/* Top Right Bottom Left */
	text-align: center;
}

/* Paragraph tag for and <audio ...> element in the lower (or upper) caption box
   in a .photoLeft/Right/Center table.
*/

.photoCaptionAudio {
	margin: 0px 0px 0px 0px;		/* Top Right Bottom Left */
}