/* body {background-image: url(../stones.jpg); background-repeat: no-repeat; background-size: contain} */
body { padding-top: 30px; }
.navbar {
	margin-bottom: 0px;
}
.jumbotron {
    margin-bottom: 0px;
	background-image: url(../images/stones_dark.jpg);
    background-size: cover;
    background-repeat: no-repeat;
	color: white;
    text-shadow: black 0.3em 0.3em 0.3em;
}
.jumbotron p {
	font-size: 18pt;
	margin-bottom: 30px;
}
.imageBack {
	background-image: url(../images/stones_dark.jpg);
    background-size: contain;
	background-attachment: fixed;
    /*background-repeat: no-repeat; */
}
.whiteBack {
	background-color: rgba(255,255,255,0.95);
	border-radius: 5px;
}
.darkBack {
	background-color: rgba(0,0,0,0.1);
	border-radius: 20px
}
.verticalGap{
	height:30px;
	clear:both
}
hr {
	margin: 20px 30px 20px 30px;
	border-top-width: 2px;
	border-top-color: rgb(180,180,180);
}
blockquote{
	border-left-color: rgb(180,180,180);
	font-size: inherit;
	padding-right: 0px;
	/** These pads are restored to 10px at the larger screen size */
	padding-top: 2px;
	padding-bottom: 2px;
}
.dl-email {
	margin-bottom: 10px;
	font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
.dl-email dt {
	float: left;
	width: 40px;
	clear: left;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dl-email dd {
	margin-left: 50px;
}

/* Use for reapplying the -15 margins of a Bootstrap row */
.rowMargins{
	margin-left:0px;
	margin-right:0px;
}
/* blurb designed for descriptive text to right of composition. For extra-small screens, assumes it is beneath the comp, hence does not need a top margin; otherwise a top margin to stay alongside the comp, beneath the inset border. */
.blurb {
	min-width: 160px;
	float: left;
	margin-top: 0px
}
/* blurb-top designed for descriptive text to left of composition. Even on extra-small screens, it will be at the top of the container, so keeps the top margin. */
.blurb-top {
	min-width: 160px;
	float: left;
	margin-top: 20px
}
.comment {
	font-style:italic;
	margin-top: 20px;
	margin-bottom: 0px;
}
.note {
	font-style: italic;
}
/* Class for the outer div of compositions; applies left and right margins. */
.compContainer {
	float:left;
	margin:0px 0px 0px 10px;
	background-color: inherit
}
.compHeading{
	font-size: 16px;
}
/* Inset class gives white background and solid border. Can be used in conjunction with the inner comp classes, the compContainer class, or both */
.inset {
	float:left;
	min-width:200px;
	margin-top:15px;
	margin-right: 10px;
	margin-bottom: 15px;
	/* Margin-left unspecified to allow other classes to override it - e.g. the "inner comp" classes above */
	padding: 5px 4px 5px 8px;
	background-color: rgba(255,255,255,1.0); 
	opacity: 1.0;
	border-color: #0A2B76; 
	border-style: solid; 
	vertical-align: top;
}
pre {
	background-color: inherit; 
	opacity: 1.0;
	border-style: none; 
	padding: 0px;
	font-size: 11px;
}
h3 { font-size: 20px }

/* The "inner" comp classes determine the width of the comp. Several choices, most scale up as the screen size grows. 
   Here we set them to the minimum 280px widths which will fit on 320px smartphones. 
   Note "retina" phones report half the actual resolution! 
 */
.thinComp {	width:280px;}
.medComp { width:280px;}
.med2Comp { width:280px;}
.wideComp { width:280px;}
.bigComp {	width:280px;}
/* flowComp is designed to work inside compContainer (above) and flow across the screen without using Bootstrap rows */
.flowComp {width:280px;}
@media (min-width: 360px) {
	/** Higher-res smartphones */
	pre {font-size: 11px}
	.thinComp {	width:310px;}
	.medComp { width:310px;}
	.med2Comp { width:310px;}
	.wideComp { width:310px;}
	.bigComp { width:310px;}
	.flowComp {width:310px;}
}
@media (min-width: 400px) {
	/* Smallest screen size at which we can have normal-sized fonts. Reset comp widths to minimum standard. */
	pre {font-size: 13px}
	h3 { font-size: 24px }
	/* thinComp has min width 330px and does not increase with larger screen sizes */
	.thinComp {	width:330px;}
	/* medComp starts off at 340px, and goes up to 440px at the large screen size. It is designed to fit opposite blurb. */
	.medComp { width:340px;}
	.med2Comp { width:330px;}
	/* wideComp starts off at 380px, and goes up to 440px at the large screen size. It is designed to fit opposite blurb. */
	.wideComp { width:380px;}
	/* bigComp starts off at 380px below 500-pixel screen widths, rapidly increases to 420px, then 440px for medium screens up. It is designed to sit on its own, or side-by-side with other "big" comps, and adopts suitable margins at each screen size. */
	.bigComp {	width:380px;}
	.flowComp {width:330px;}
}
@media (min-width: 480px) {
	/* Unless screen is absolutely tiny, can have a bit of a margin for "big" and "wide" comps. */
	.wideComp { width:380px; margin-left: 20px;}
	.bigComp { width:420px; margin-left: 20px;}
	.compContainer {margin-left:40px}
}
@media (min-width: 672px) {
	/* Now two flowComps side-by-side, but only if they are made even thinner, and compContainer margins kept small */
	.compContainer {margin-left:10px; width:300px}
	.flowComp { width: 300px}
}
/* Bootstrap "small" breakpoint */
@media (min-width: 768px) {
	.sm-grow {margin-left:-30px}
	.sm-shrink {padding-left:45px}
	/* On bigger screens, increase the blurb top margin, since we now expect it to be at the top of the container. */
	.blurb {	margin-top: 20px; margin-left: -20px;}
	.wideComp { margin-left: 0px;}
	/* Only room for one "big" comp at the small size, so give more margin */
	.bigComp { width:440px; margin-left: 100px;}
	.tenSplContainer { margin:0px 20px 0px 20px;}
	/* Can squeeze two normal flowComps side-by-side at the small size, if we pack the margins in */
	.compContainer {margin-left:20px; width:330px;}
	.flowComp { width: 330px}
}
/* Bootstrap "medium" breakpoint */
@media (min-width: 992px) {
	.sm-grow {margin-left:0px}
	.sm-shrink {padding-left:15px}
	.medComp { width:440px;}
	.med2Comp { width:380px;}
	.wideComp { width:440px;}
	/* Two big comps at the medium size, with small margins */
	.bigComp { margin-left: 0px;}
	.blurb {	margin-left: 0px}
	/* Now three flowComps side-by-side, but only if they are made even thinner, and margins kept small */
	.compContainer {margin-left:10px; width:300px}
	.flowComp { width: 300px}
}
/* Bootstrap "large" breakpoint */
@media (min-width: 1200px) {
	.med2Comp { width:440px;}
	/* Two big comps at the large size, with large margins */
	.bigComp { margin-left: 50px;}
	/* Restore blockquote top/bottom padding */
	blockquote{ padding-top: 10px; padding-bottom: 10px;}
	/* At the large width there is room for three normal flowComps side-by-side, but only with a medium small margin */
	.compContainer {margin-left:30px; width:330px}
	.flowComp { width: 330px}
}

.compIndexRow{clear:left}
.compIndexCol1{float:left;width:250px}
.compIndexCol1thin{float:left;width:200px}
.compIndexCol2{float:left;padding-left:10px;width:110px}
.compIndexCol2a{float:left;padding-left:10px;width:125px}
.compIndexCol3{float:left;padding-left:10px;width:240px}
.compIndexCol4{float:left;padding-left:10px;width:310px}