@charset "utf-8";
/* Little boxes on the hillside */

.bigbox { /* Scrolling area containing all little boxes */
	width:870px;
	height:340px;
	overflow:auto;
	}
.littlebox { /*The containing box for each sample and all its peripherals*/
	width:150px;
	height:150px;
	overflow:visible;
	border:2px solid #3d3dbd;
	float:left;
	margin-right:15px;
	margin-bottom:15px;
	position:relative;
	}
.littlebox .cover { /*White background for the description text*/
	display:none;
	position:absolute;
	top:0;
	left:0;
	background-color:#FFF;
	opacity:.70;
	width:150px;
	height:150px;
	}
.littlebox .desc { /*Description text for each sample*/
	display:none;
	position:absolute;
	left:0;
	top:0;
	width:130px;
	height:130px;
	padding:10px;
	overflow:auto;
	}
.littlebox p {
	margin-top:5px;
	font-size:80%;
	}	
div#bigsample { /*Div that holds the larger image*/
	background-color:#555;
	position:absolute;
	left:0;
	top:0px;
	text-align:center;
	width:100%;
	display:none;
	padding:50px 0;
	}
	
	
/*********** Medium boxes, with no popups! ****************/
.medbox {
	width:275px;
	height:275px;
	float:left;
	margin-right:20px;
	margin-bottom:20px;
	border:2px solid #3d3dbd;
	}
/****************** Mouseover effects *********************/
.littlebox:hover .cover {display:block;}
.littlebox:hover .desc {display:block;}