/* --- viewport configuration ---------------------------------------------------------- */
				.frameMiddleInner .viewport {
					border: 3px solid #c0bbb3;
					float: left;
					height: 172px;
					overflow: hidden;
					position: relative;
					width: 250px;
				}
		
				/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
				   class to the last thumbnail in each row to get rid of the margin-right. */
				.frameMiddleInner .no-margin {
					margin-right: 0;
				}
		
				/* --- Link configuration that contains the image and label ----------------------------- */
				.frameMiddleInner .viewport a {
					display: block;
					position: relative;
				}
		
				.frameMiddleInner .viewport a img {
					height: 332px;
					left: -20px;
					position: relative;
					top: -20px;
					width: 500px;
					border:0;
				}
		
				/* --- Label configuration -------------------------------------------------------------- */
				.frameMiddleInner .viewport a span {
					display: none;
					font-weight: bold;
					height: 100%;
					padding-top: 70px;
					position: absolute;
					text-align: center;
					text-decoration: none;
					width: 100%;
					z-index: 100;
					font-size:18px;
				}
					.frameMiddleInner .viewport a span em {
						display: block;
						font-size: 15px;
						font-weight: normal;
					}
		
				/* --- Dark hover background ------------------------------------------------------------ */
				.frameMiddleInner .dark-background {
					background-color: rgba(15, 15, 15, 0.6);
					color: #eaeaea;
					font-family: 'Helvetica Neue', Helvetica, Arial, serif;
					text-shadow: #000 0px 0px 20px;
				}
					.frameMiddleInner ..dark-background em {
						color: #ccc;
					}
		
				/* --- Light hover background ----------------------------------------------------------- */
				.frameMiddleInner .light-background {
					background-color: rgba(255, 255, 255, 0.6);
					color: #333;
					text-shadow: #fff 0px 0px 20px;
				}
					.frameMiddleInner .light-background em {
						color: #707070;
					}
		
				/**
				 * You could create multiple hover background classes for different looks depending on the
				 * image type. Use your imagination!
				 */		
	
				.frameMiddleInner h2 {
				margin:20px 0 10px 5px;
				width:100%;
				float:left;
				font-weight:normal;
				color:#666666; }	
	
				.frameMiddleInner .thumbs {
				float:left;
				overflow:hidden;
				margin:10px 5px 0 5px;
				width:160px;
				height:160px; 
				position:relative;}	 
	
				.frameMiddleInner .thumbs img.center {  
				position: absolute;
				left: 50%;
				top: 50%;}
	
				.frameMiddleInner .thumbs:hover {
				background-color:#cac4ba; }