﻿/* --- Container configuration ---------------------------------------------------------- */
ul.viewport li {
    position: relative;
    float: left;
	margin-right:12px;
    width: 193px;
    height: 280px;
	list-style:none;
	}

/* 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. */
#no-margin {
    margin:0;
	}

/* --- Link configuration that contains the image and label ----------------------------- */
.viewport li a {
    display: block;
    position: relative;
	}
	.viewport li a img {
		position: relative;
		left:0;
		top:0;
		width: 193px;
		height: 280px;
		}

/* --- Label configuration -------------------------------------------------------------- */
.viewport li a span {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    font-size: 2.0em;
    text-align: center;
    text-decoration: none;
	}
    .viewport li a span em {
        display: block;
        font-size: 0.45em;
        font-weight: normal;
    	}

/* --- Dark hover background ------------------------------------------------------------ */
.viewport .background {
    background-color: rgba(7,171,232,0.7);
	background-color: transparent\9;
	zoom:1\8; /* required for the filters */
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffad0000, endColorstr=#ffad0000)"; /* IE8 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffad0000, endColorstr=#ffad0000); /* IE5.5-7 */
	background-position:center 100px;
	background-repeat:no-repeat;
    color: #fff;
	}
    .viewport .background em {
		margin:90px auto;
		width:60px;
		height:60px;
		display:block;
        color: #ccc;
		background-image:url(../img/common/zoom.png);
		_background:none;/*IE6*/
    	}

/* --- Layout configuration -------------------------------------------------------------- */
.slogan ul {
	}
	.slogan li {
		float:left;
		margin-right:12px;
		list-style:none;
		width:193px;
		height:280px;
		display:block;
		}
		.slogan li:last-child {margin-right:0;}


