@charset "utf-8";
/*----------------------------------------------------
	site name: photo gallery for smart phone
	style info : photogallery.css
 ----------------------------------------------------*/
 /*----------------------------------------------------
	Base settings
----------------------------------------------------*/
html, body {
	width: auto;
}
img{
	vertical-align: bottom;
}
h1 {
	margin-bottom: 15px;
	padding-left: 10px;
	font-size:116%;
}


/* 01. header
---------------------------------------------------- */
header #category-logo {
	margin: 15px 0 15px 10px;
}

/* 02. footer
---------------------------------------------------- */
footer {
	
}
footer p.copyright {
	padding: 8px 0;
	background: #333;
	line-height: 1;
	color: #fff;
	font-size: 62%;
	text-align: center;
}


/* 03. button style
---------------------------------------------------- */
/* To Top page */
.backhome {
	margin-top: 14px;
	padding: 10px 0 10px;
	border-top: 1px solid #d7d8da;
	text-align: center;
}
.backhome a {
	padding: 11px 0 13px 28px;
	background: url(../images/icon.png) no-repeat 0 -132px;
	background-size: 38px 160px;
	-webkit-background-size: 38px 160px;
	-moz-background-size: 38px 160px;
	line-height: 1;
}

 /* 04. contents style
---------------------------------------------------- */
.photoList {
	margin:0 auto;
	width: 300px; /*  */
}
.photoList ul:after{
	content: '';
	display: block; 
	clear: both;
}
.photoList li{
	float: left;
	width: 72px; /*  */
	margin-right: 4px;
	margin-bottom: 4px;
}
.photoList li:last-child{
	margin-right: 0;
}
.photoList span {
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	cursor: pointer;
}
.photoList span img{
	max-width: 70px; /*  */
	border:1px solid #ccc;
	-webkit-transition: border-color 0.5s;
}
.photoDetail img {
	max-width : 100%;
}
.photoDetail {
	display:none;
	clear: both;
	height: 187px; /*  */
	margin-bottom: 4px;
	padding: 0 1px;
}