#content img,
#sidebar img {
max-width:100%;
height:auto;
}
#content img.not-responsive,
#sidebar img.not-responsive {
max-width:none;
}
figure figcaption {
color: #6D6E70;
font-family: "franklin-gothic-urw",Verdana,Geneva,sans-serif;
font-size: 1.3em;
line-height: 1.35;
padding-top: 10px;
margin-bottom:30px;
}
figure.aligncenter figcaption {
text-align:left;
}
li figure figcaption {
font-size:81.25%;
}
figure.aligncenter {
text-align:center;
}
.responsive-embed {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom:30px;
}
.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

#content .floatright,
img.alignright,
div.alignright,
figure.alignright {
float:right;
clear:right;
margin:5px 0 15px 15px;
}
#content .floatleft,
img.alignleft,
div.alignleft,
figure.alignleft {
float:left;
clear:left;
margin:5px 15px 15px 0;
}
img.aligncenter,
div.aligncenter,
figure.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
clear:both;
}

/* Page Curl */
.page-curl {
display:block;
margin:0 auto 2em;
background-color:#F7F7F3;
position:relative;
max-width:100%;
}
.page-curl:hover,
.page-curl:focus {
background-color:#E4DFD1;
text-decoration:none;
}
.singular #content.content .page-curl img.aligncenter {
padding-bottom:0px;
margin:0;
}
.page-curl strong {
border-top: 1px solid #ccc;
color: #000;
display: block;
font-size: 1.5em;
padding: 1em;
text-align: right;
}
.curl {
position: absolute;
bottom:4.1em;
right:0;
width:69px;
height:69px;
z-index:2;
background-image:url( img/promo-page-curl.gif );
background-repeat:no-repeat;
background-position:top left;
}
.page-curl:hover .curl,
.page-curl:focus .curl {
background-position:top right;
}

/* Images with widths between 100 and 299 will retain their floats until 500px */
/* Wider images have floats removed and responsively scale sooner */

@media (min-width: 500px){
	#content .floatright[width^="1"],
	img.alignright[width^="1"],
	div.alignright[width^="1"],
	figure.alignright[width^="1"],
	#content .floatright[width^="2"],
	img.alignright[width^="2"],
	div.alignright[width^="2"],
	figure.alignright[width^="2"] {
	float:right;
	clear:right;
	margin:5px 0 15px 15px;
	}
	#content .floatleft[width^="1"],
	img.alignleft[width^="1"],
	div.alignleft[width^="1"],
	figure.alignleft[width^="1"],
	#content .floatleft[width^="2"],
	img.alignleft[width^="2"],
	div.alignleft[width^="2"],
	figure.alignleft[width^="2"] {
	float:left;
	clear:left;
	margin:5px 15px 15px 0;
	}
}

/* Legacy site content well is 600px wide, New Template is 640 */
/* This max-width should work for images 300px-600px wide */
/* Full-width images are already display block, so it doesn't need to be any higher */

@media (max-width: 640px){
	#content .floatright,
	img.alignright,
	div.alignright,
	figure.alignright,

	#content .floatleft,
	img.alignleft,
	div.alignleft,
	figure.alignleft,

	img.aligncenter,
	div.aligncenter,
	figure.aligncenter {
		display:block;
		margin: 20px auto;
		float:none;
		clear:both;
	}
}