/* Colors, fonts, etc */
#storyTitle {
	border-bottom: 1px dashed #B0AFAD;
	color: #1C3F83;
	font-family: Georgia,serif;
	font-size: 1.25em;
	font-weight: normal;
	padding-bottom: 0.5em;
}
#storyShare {
	float: right;
}
#storyInfo ul {
	list-style: none;
	padding: 0;
}
#text p:first-child {
	font-size:1em;
}
#storyQuote {
	color: #1C3F83;
	font-family: Georgia,serif;
	font-size: 1.25em;
	padding:1em 0;
}
#uvmmaincontent ul.newsheadlinelist {
	list-style-type: none;
	padding-left: 0;
}
#uvmmaincontent ul.newsheadlinelist li {
	line-height: 1.2;
	padding: .3em 0;
}
#uvmmaincontent ul.newsheadlinelist li span.newsheadlinedate {
	color: #50504f;
	display: block;
}
#uvmmaincontent ul.newsheadlinelist li a {
	font-weight: bold;
	text-decoration: none;
}
#uvmmaincontent figcaption {
	font-size: .8125em;
	color: #999;
	padding-bottom:.5em;
}
/* Layout */
#storyContainer {
	overflow:auto;
}
#left_spacer {
	clear: left;
	float: left;
	width: 0;
}
#UVM_Photo_Left #left_spacer, #UVM_Video_Left #left_spacer {
	height: 13.125em;
}
#UVM_Photo_Right #left_spacer, #UVM_Video_Right #left_spacer {
	height: 32em;
}
#UVM_No_Featured_Media #left_spacer {
	height: 7em;
}
#left_bottom {
	clear: left;
	float: left;
	width: 50%;
	margin-right:5%;
}
@media only screen and (min-width : 1000px) {
	#left_bottom {
		width:35%;
		margin-right: 2.5%;
	}
}
#storyExtras {
	border-top: 1px solid #ccc;
	margin: .625em 0;
}
#storyExtras .storyAddImages {
	padding-top: .5em;
}
#storyExtras img {
	max-width:100%;
}
#storyMore ul, #storyRelated ul {
	padding-left:1em;
}
#storyQuote, #storyMore, #storyMedia, #storyRelated {
	border-bottom: 1px solid #ccc;
}

/* Figures
 * This assumes that any figure will have a maximum of one child element,
 * plus possibly a caption
 * The table stuff is, as far as we have found, the only way of getting a
 * caption to size to the content above it without possibly extending beyond
 * that content
 *
 * Note: when images are being shrunk by our img { max-width: 100%; } rule,
 * this is undefined behavior per the css spec: specifically, a table with
 * a child with percentage max width and no other way for the table to
 * determine its size.
 * Webkit browsers do what we want
 * Gecko browsers do not, and the image sometimes overflows a narrow window
 * Since most people with narrow windows are mobile users, and most mobile
 * browsers are Webkit based, we're using this
 * See https://bugzilla.mozilla.org/show_bug.cgi?id=434230
 */
#storyPrimaryMedia {
	display: table;
	margin:0;
	width: 100%;
}
#storyPrimaryMedia > * {
	display: table-cell;
}
/* hack for video, which uses its own hacks to be responsive */
#storyPrimaryMedia > .video-container2 {
	width: 420px;
}
#storyPrimaryMedia > figcaption {
	display: table-caption;
	caption-side: bottom;
}
@media only screen and (min-width : 700px) {
	#UVM_Photo_Left #storyPrimaryMedia,
	#UVM_Video_Left #storyPrimaryMedia {
		float: left;
		margin-right:1em;
	}
	#UVM_Photo_Right #storyPrimaryMedia,
	#UVM_Video_Right #storyPrimaryMedia {
		float: right;
		margin-left:1em;
	}
	#storyPrimaryMedia {
		width: auto;
		margin-right:1em;
	}
	#storyPrimaryMedia > * {
		/* We wanted max-width: 50% on the table, and width: 100% here,
		 * but that doesn't work: Per CSS, if a table's contents are
		 * wider than the table's width, the table expands, so our
		 * max-width did nothing, and the percent can't be set on the
		 * image, because it would be a percent of the table.
		 */
		max-width: 420px;
	}
}