/****************************************************
*   Beloit College - Creative Images CSS    		*
*   By: Nick Mischler                               *
****************************************************/

@charset "utf-8";
/* CSS Document */

div#creative_images,
div#creative_images div.set,
div#creative_images div.set div.block div.image {
	width:100%;
}
div#creative_images div.set div.block {
	width:100%;
	height:auto;
	position:relative;
	overflow:hidden;
	margin-bottom: 1%;
}
div#creative_images div.set.has_video div.block.video div.image {
	cursor: pointer;
}
div#creative_images div.set div.block div.image div.image_space {
	width: 100%;
	height: 0;
	position: relative;
	/*padding-bottom defined inline*/
	/*background-image defined inline*/
	/*pointer-events defined inline*/
}
div#creative_images div.set div.block iframe,
div#creative_images div.set div.block div.image div.play_icon {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
div#creative_images div.set div.block div.image div.play_icon {
	 background: rgba(0, 0, 0, 0) url("/images/common/play-icon.png") no-repeat scroll 50% 50% / 20% auto;
}

@media screen and (min-width: 800px){
	/* 2 Images */
	div#creative_images div.set.of_2 div.block {width: 50%;}
	div#creative_images div.set.of_2 div.block.image_1 {padding-right: 0.5%;}
	div#creative_images div.set.of_2 div.block.image_2 {padding-left: 0.5%;}
	
	/* 3 Images */
	div#creative_images div.set.even.of_3 div.block,
	div#creative_images div.set.stack.of_3 div.block.image_2,
	div#creative_images div.set.stack.of_3 div.block.image_3 {width:33.333%;}
	div#creative_images div.set.stack.of_3 div.block.image_1 {width:66.666%;}
	
	div#creative_images div.set.even.of_3 div.block.image_1 {padding-right:0.666%;}
	div#creative_images div.set.even.of_3 div.block.image_2 {padding-left:0.333%; padding-right:0.333%;}
	div#creative_images div.set.even.of_3 div.block.image_3 {padding-left:0.666%;}
	
	div#creative_images div.set.stack.of_3 {margin-bottom:1%;}
	div#creative_images div.set.stack.of_3 div.block.image_1,
	div#creative_images div.set.stack.of_3 div.block.image_3 {margin-bottom:0;}
	div#creative_images div.set.stack.of_3.right div.block.image_1 {padding-right: 0.12%;}
	div#creative_images div.set.stack.of_3.left div.block.image_1 {padding-left: 0.12%;}
	div#creative_images div.set.stack.of_3.right div.block.image_2,
	div#creative_images div.set.stack.of_3.right div.block.image_3 {padding-left: 0.88%;}
	div#creative_images div.set.stack.of_3.left div.block.image_2,
	div#creative_images div.set.stack.of_3.left div.block.image_3 {padding-right: 0.88%;}
	
	/* 4 Images */
	div#creative_images div.set.even.of_4 div.block,
	div#creative_images div.set.stack.of_4 div.block.image_2,
	div#creative_images div.set.stack.of_4 div.block.image_3,
	div#creative_images div.set.stack.of_4 div.block.image_4 {width:25%;}
	div#creative_images div.set.stack.of_4 div.block.image_1 {width:75%;}
	
	div#creative_images div.set.even.of_4 div.block.image_1 {padding-right:0.75%;}
	div#creative_images div.set.even.of_4 div.block.image_2 {padding-left:0.25%; padding-right:0.50%;}
	div#creative_images div.set.even.of_4 div.block.image_3 {padding-left:0.50%; padding-right:0.25%;}
	div#creative_images div.set.even.of_4 div.block.image_4 {padding-left:0.75%;}
	
	div#creative_images div.set.stack.of_4 {margin-bottom:1%;}
	div#creative_images div.set.stack.of_4 div.block.image_1,
	div#creative_images div.set.stack.of_4 div.block.image_4 {margin-bottom:0;}
	div#creative_images div.set.stack.of_4.right div.block.image_2,
	div#creative_images div.set.stack.of_4.right div.block.image_3,
	div#creative_images div.set.stack.of_4.right div.block.image_4 {padding-left: 1.08%;}
	div#creative_images div.set.stack.of_4.left div.block.image_2,
	div#creative_images div.set.stack.of_4.left div.block.image_3,
	div#creative_images div.set.stack.of_4.left div.block.image_4 {padding-right: 1.08%;}
	
	/* Arrangement */
	div#creative_images div.set.even div.block,
	div#creative_images div.set.stack.right div.block.image_1,
	div#creative_images div.set.stack.left div.block.image_2,
	div#creative_images div.set.stack.left div.block.image_3,
	div#creative_images div.set.stack.left div.block.image_4 {float:left;}
	div#creative_images div.set.stack.left div.block.image_1,
	div#creative_images div.set.stack.right div.block.image_2,
	div#creative_images div.set.stack.right div.block.image_3,
	div#creative_images div.set.stack.right div.block.image_4 {float:right;}
	
}