media.less

//
// Media
// --------------------------------------------------

/* Removes border when inside `a` element in IE 8/9 */
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}

/* Corrects overflow displayed oddly in IE9  */
svg:not(:root) {
	overflow: hidden;
}

/* Addresses margin not present in IE 8/9 and Safari 5 */
figure {
	margin: 0;
}

/**
 * Responsive images (ensure images don't scale beyond their parents)
 */

/* Fluid images for posts, comments, and widgets */
.entry-content img,
.comment-content img,
.widget img {
	max-width: 100%;
	width: auto\9; // IE7-8 need help adjusting responsive images
	height: auto; // Scale the height according to the width, otherwise you get stretching
}

.size-full,
.size-large,
.wp-post-image {
	max-width: 100%;
	height: auto; // Make sure images with WordPress-added height and width attributes are scaled correctly
}

/* Add fancy borders to all WordPress-added images */
.entry-content img,
.comment-content img,
.wp-post-image,
.widget img,
.thumbnail,
.avatar {
	border-radius: 3px;
	box-shadow: 0 1px 4px fade(@black, 20%);
}

/* Post thumbnails */
.thumbnail {
	float: right;
	margin: 0 0 @smallGutterWidth @smallGutterWidth;
}

/* Aligned images */
img.aligncenter {
	margin: @smallGutterWidth auto;
}

img.alignleft {
	margin: 0 @smallGutterWidth 12px 0;
}

img.alignright {
	margin: 0 0 12px @smallGutterWidth;
}

/* Avatars */
.avatar {
	float: left;
	margin-right: @smallGutterWidth - 7px;
}

/* Remove borders from some images */
.wp-smiley,
.no-image-border,
.rsswidget img {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video {
	max-width: 100%;
}

iframe {
	border: none;
}

/* Style seamless iframes */
iframe[seamless] {
	background-color: transparent;
	border: 0px none transparent;
	padding: 0px;
	overflow: hidden;
}

/* Override the Twitter embed fixed width */
.entry-content .twitter-tweet-rendered {
	max-width: 100% !important;
}

/**
 * Captions [caption]
 */
.wp-caption {
	background: @grayDarker;
	border-radius: 0 0 3px 3px;
	clear: both;
	max-width: 100%;
	margin: @smallGutterWidth 0;
	padding-top: 5px;
	text-align: center;

	img {
		border-radius: 0;
		box-shadow: none;
	}

	// Aligned captions
	&.aligncenter {
		margin: @smallGutterWidth auto;
	}

	&.alignleft {
		margin: 0 @smallGutterWidth 0 0;
	}

	&.alignright {
		margin: 0 0 0 @smallGutterWidth;
	}
}

/* Caption text */
.wp-caption-text {
	color: darken(#eee, 6.5%);
	#font > .alternative(14px);
	padding: 10px 20px 20px;
	margin: 0;
}

/**
 * Galleries
 */
.gallery {
	display: block;
	clear: both;
	overflow: hidden;
	margin: @smallGutterWidth auto;
	text-align: center;
}

.gallery-row {
	display: block;
	clear: both;
	overflow: hidden;
	margin: 0;
}

.gallery-item {
	overflow: hidden;
	float: left;
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gallery-caption {
	#font > .alternative(14px);
	margin: 0 0 15px 0;
}

/* Gallery columns */
.gallery-cols(@index) when (@index > 0) {
	// Create the column class
	(~".col-@{index}") {
		width: percentage((100 / @index) / 100);
	}

	// Next column
	.gallery-cols(@index - 1);
}

// End the loop when index is 0
.gallery-cols(0) {}

// Generate 30 columns
.gallery-cols(30);