/* 
 Responsive media queries for the 10-spliced "Renaissance" series
 We pack different numbers of compositions across the screen, always ensuring the calling figures are in the left-hand column
*/
.tenSplContainer { margin:0px;}
.splicedMethods {
	width:140px;
	float:left;
	margin:0px;
	background-color: inherit
}
.splicedFigures {
	width:140px;
	float:left;
	margin: 0px;
	background-color: inherit
}
.inset {
	padding: 5px 0px 5px 0px;
	margin-right: 0px;
}
.insetMin {
	min-width: 320px;
	padding: 5px 0px 5px 0px;
	margin-right: 0px;
	float:left;
	min-width:200px;
	margin-top:15px;
	margin-bottom: 15px;
	background-color: rgba(255,255,255,1.0); 
	opacity: 1.0;
	border-color: #0A2B76; 
	border-style: solid; 
	vertical-align: top;
}
.tenSpl2 {display: block; clear:left}
.tenSpl3 {display: block; clear:left}
.tenSpl4 {display: block; clear:left}
.tenSpl5 {display: block; clear:left}
.tenSpl6 {display: block; clear:left}
.tenSpl7 {display: block; clear:left}
.tenSpl8 {display: block; clear:left}
.tenSpl9 {display: block; clear:left}
.tenSpl10 {display: block; clear:left}
@media (min-width: 360px) {
	.splicedFigures { width: 160px; }
	.splicedMethods { width: 160px; }
}
/* Just enough room for two compositions */
@media (min-width: 590px) {
	.splicedFigures { margin: 0px 0px 0px 20px; }
	.insetMin { min-width: 358px; }
	.tenSpl3 {display: none}
	.tenSpl5 {display: none}
	.tenSpl7 {display: none}
	.tenSpl9 {display: none}
}
/* Just enough room for three compositions at this "extra small" size */
@media (min-width: 724px) {
	.tenSpl3 {display: none}
	.tenSpl4 {display: none}
	.tenSpl5 {display: block}
	.tenSpl6 {display: none}
	.tenSpl7 {display: none}
	.tenSpl8 {display: block}
	.tenSpl9 {display: none}
	.tenSpl10 {display: none}
}
/* Bootstrap "small" breakpoint - enough room for three compositions, and can now give more margin to container */
@media (min-width: 768px) {
	.tenSplContainer { margin:0px 20px 0px 20px;}
}
/* Bootstrap "medium" breakpoint - enough room for four compositions, with bigger margins */
@media (min-width: 992px) {
	.tenSplContainer { margin:0px 40px 0px 40px;}
	.tenSpl3 {display: none}
	.tenSpl4 {display: none}
	.tenSpl5 {display: none}
	.tenSpl6 {display: block}
	.tenSpl7 {display: none}
	.tenSpl8 {display: none}
	.tenSpl9 {display: none}
	.tenSpl10 {display: block}
}
/* Bootstrap "large" breakpoint - enough room for four compositions, with biggest margin */
@media (min-width: 1200px) {
	.tenSplContainer { margin:0px 60px 0px 60px;}
	.tenSpl3 {display: none}
	.tenSpl4 {display: none}
	.tenSpl5 {display: none}
	.tenSpl6 {display: none}
	.tenSpl7 {display: block}
	.tenSpl8 {display: none}
	.tenSpl9 {display: none}
	.tenSpl10 {display: none}
}