/*
   fristcenter.fluid.css
   Frist Art Museum

   Created by Jesse Bunch on 2011-04-07.
   Copyright 2011 Paramore, the digital agency (www.paramore.is). All rights reserved.
*/


/*

	These styles define the look and feel for the callouts in both
	the front and back ends of the site. To add a new callout size,
	you have to add:

		1. A Callout Size (see the comment below)
		2. An Image Size (see the comment below)

*/

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.fluid-container {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

	.fluid-container .fluid-item {
		display: block;
		padding: 10px;
		margin: 0 10px 10px 0;
		text-decoration: none;
		background-color: #fefcfc;
		overflow: hidden;
	}

		.fluid-container .fluid-item a:link,
		.fluid-container .fluid-item a:visited,
		.fluid-container .fluid-item a:hover { text-decoration: none; }

		/* Callout Sizes */
		.fluid-container .fluid-item.feature { width: 450px; background-color: #fff; }
		.fluid-container .fluid-item.full { width: 210px; }
		.fluid-container .fluid-item.half { width: 100px; padding: 5px; }

		.fluid-container .fluid-item .image {
			position: relative;
			display: block;
			height: 100%;
			padding: 0;
			margin: 0;
		}

			.fluid-container .fluid-item.half .image { margin: 0; }

				/* Image Sizes */
				.fluid-container .fluid-item.half .image img { width: 100px; }
				.fluid-container .fluid-item.half .fb-video,
				.fluid-container .fluid-item.half .fb-video span,
				.fluid-container .fluid-item.half .fb-video iframe {
					height: 56px;
					min-width: 100px;
					width: 100px;
				}
				.fluid-container .fluid-item.full .image img { width: 210px; }
				.fluid-container .fluid-item.full .fb-video,
				.fluid-container .fluid-item.full .fb-video span,
				.fluid-container .fluid-item.full .fb-video iframe {
					height: 118px;
					min-width: 210px;
					width: 210px;
				}
				.fluid-container .fluid-item.feature .image img { width: 450px; }
				.fluid-container .fluid-item.feature .fb-video,
				.fluid-container .fluid-item.feature .fb-video span,
				.fluid-container .fluid-item.feature .fb-video iframe {
					height: 253px;
					min-width: 450px;
					width: 450px;
				}

				/* Play button for video */
				.fluid-container .fluid-item .image .play-icon {
					display: block;
					position: absolute;
					z-index: 5000;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: transparent url('/css/img/ico-play-button-med.png') no-repeat center center;
					text-indent: -3000px;
					opacity: 0.8;
					-moz-opacity: 0.8;
					filter:alpha(opacity=80);
				}


			.fluid-container .fluid-item object,
			.fluid-container .fluid-item embed {
				position: absolute;
				top: 10px;
				left: 10px;
				z-index: 5000;
			}

			.fluid-container .fluid-item .fluid-copy {
				display: block;
				margin: 0;
				padding: 0 0 0 5px;
			}

				.fluid-container .fluid-item .fluid-copy .subtitle {
					display: block;
					padding: 0;
					margin: 25px 0 -15px;
					font: 10px Verdana, sans-serif;
					color: #333;
					color: rgba(51, 51, 51, 0.8);
				}

				.fluid-container .fluid-item.tweet-item .fluid-copy .subtitle { margin: 0; }

				.fluid-container .fluid-item .fluid-copy .title,
				.fluid-container .fluid-item .fluid-copy .title a:link,
				.fluid-container .fluid-item .fluid-copy .title a:visited,
				.fluid-container .fluid-item .fluid-copy .title a:hover {
					display: block;
					padding: 0;
					margin: 25px 0 30px;
					font: normal 23px/26px "TradeGothicBoldCond", sans-serif;
					color: #333;
					color: rgba(51, 51, 51, 0.875);
					text-indent: 0;
					border: none;
					letter-spacing: 0.03em;
					line-height: 26px;
				}

				.fluid-container .fluid-item.tweet-item .fluid-copy .title { margin: 0 0 15px; }

					.fluid-container .fluid-item .fluid-copy .title span {
						padding: 0;
						margin: 0;
						color: #9C9B9B;
						color: rgba(0, 0, 0, 0.3);
						font: normal 22px/26px "TradeGothicBoldCond", sans-serif;
						letter-spacing: 0.03em;
					}

				.fluid-container .fluid-item.tweet-item .fluid-copy .tweet { font-size: 12px; line-height: 20px; margin: 10px 0 35px; }

					.fluid-container .fluid-item.tweet-item .fluid-copy .tweet a { text-decoration: underline; }

				.fluid-container .fluid-item .fluid-copy .tag {
					display: block;
					padding: 10px 10px 10px 15px;
					margin: 0 -10px -10px -15px;
					font: normal 10px Verdana, sans-serif;
					text-transform: uppercase;
					color: #333;
					color: rgba(51, 51, 51, 0.65);
					background-color: #f4f4f5;
					border-top: 1px solid #eee;
					-webkit-transition:background-color 0.1s ease-in;
					-moz-transition:background-color 0.1s ease-in;
					-o-transition:background-color 0.1s ease-in;
					transition:background-color 0.1s ease-in;
				}

				.fluid-container .fluid-item.tweet-item .fluid-copy .tag {
					background-image: url(img/ico-twitter-callout.png);
					background-position: 100% 11px;
					background-repeat: no-repeat;
				}

					.fluid-container .fluid-item.half .fluid-copy .tag { padding: 7px 10px 13px 15px; background-color: #fefcfc; }
					.fluid-container .fluid-item:hover .fluid-copy .tag { background-color: #F9F9F9; }