.wrapper {
	background: #EE9 url(/_img/shade_vertical_bottom.png) repeat-x left bottom;
	margin: 0;
	padding: 0;
}
.content {
	/*background-color: #EEB;*/
	background: none !important;
	width: 100%; /*960px;*/
	max-width: 960px;
	margin: 0 auto;
	height: auto;
	padding: 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.content {
		margin-top: -8px;
	}
}  
.message {
	position: relative;
	display: block;
	width: 450px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
	color: #663;
}
.message strong {
	display: block;
	font-size: 20pt;
	padding: 10pt 0;
}

/****************************** Submenu *******************************/
.menubar {
	position: relative;
	height: 46px;
	margin: 10px 10px 7px;
	padding: 0;
	background: #CC9;
	box-shadow: 0 23px 0 rgba(255, 255, 255, .2) inset;
	border-radius: 3pt;
	color: #663;
	text-shadow: 0 1px 0 #EEB;	
	z-index: 10;
}
/* Chrome & Safari specific CSS */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
        .menubar { margin-top: 19px;}
}
.view {
	display: table-cell;
	height: 46px;
	padding: 0 40px 0 20px;
	background: url(sprite_album.png) no-repeat right top;
	text-align: center;
	vertical-align: middle;
	cursor: default;
}
.viewall {
	display: table-cell;
	height: 46px;
	padding: 0 12px 0 40px;
	background: url(sprite_album.png) no-repeat left -92px;
	vertical-align: middle;
}
.viewalbum {
	display: table-cell;
	height: 46px;
	padding: 0 12px 0 40px;
	background: url(sprite_album.png) no-repeat left -46px;
	vertical-align: middle;
}
.viewalbum span {
	color: #663;
	font-weight: bold;
}
.zh-tw .viewalbum span {
	position: relative;
	top: 1px;
}
.viewsub {
	display: table-cell;
	height: 30px;
	padding: 0 20px 0 40px;
	vertical-align: middle;
}
a.viewall, a.viewalbum, a.viewsub {
	color: #663;
	text-decoration: none;
}
.menubar ul {
	position: relative;
	margin: 0;
	padding: 0 20px 0 0;
	list-style: none;
}
.menubar ul:after {
	content: ""; 
	clear: both; 
	display: block;
}
.menubar ul li {
	float: left;
}
.menubar ul li.link:hover {
	box-shadow: 0 20px 10px rgba(255, 255, 255, 0.4) inset,
	0 0 1px #FFF inset;
}
.menubar ul li.link:hover > a {
	color: #330;
}
.menubar ul li:hover > ul {
	display: block;
}
.menubar ul ul {
	position: absolute; 
	top: 100%;
	padding: 0;
	background: #EEC; 
	border-bottom-left-radius: 5pt;
	border-bottom-right-radius: 5pt;
	box-shadow: 1px 7px 10px rgba(0, 0, 0, 0.7);	
	display: none;
}
.menubar ul ul li  {
	position: relative;
	float: none;		
}
li.sublink:hover {
	background: #995;
}
li.sublink:hover > a {
	color: #FFF;
	text-decoration: none;
	text-shadow: none;
}
a.selected {
	background: url(sprite_album.png) no-repeat left -147px;
	color: #330;
}
li.sublink:hover > a.selected {
	background: url(sprite_album.png) no-repeat left -195px;
	cursor: default;
}
li.subend {
	height: 5px;
}

/**********************************************************************/
#container {
	padding-left: 10px;
}
.item {
	display: block;
	float: left;
	width: 180px;
	margin: 0 10px 10px 0;
	background-color: #CC9;
	-webkit-box-shadow: 1px 2px 5px #CC9;
	box-shadow: 1px 2px 5px #CC9;
}
.item img {
	width: 180px;
	height: auto;
	-webkit-border-radius: 3pt;
	border-radius: 3pt;
}
.item a img:hover {
	box-shadow: 0 5px 20px #660;
}
.small img {
	height: 118px;
}
.medium {
	width: 370px;
}
.medium img {
	width: 370px;
	height: 246px; /*auto;*/
}
.large {
	width: 560px;
}
.large img {
	width: 560px;
	height: 374px; /*auto;*/
}
.portrait_medium {
	width: 370px;
}
.portrait_medium img {
	width: 370px;
	height: auto;
}
.portrait_large {
	width: 560px;
}
.portrait_large img {
	width: 560px;
	height: auto;
}

/* Infinite Scroll loader
#infscr-loading { 
	position: fixed;
	width: 200px;
	left: 42%;
	bottom: 70px;
	padding: 10px;
	text-align: center;
	color: #FFF;
	background: #010; 
	opacity: 0.7;
	z-index: 100;
	-webkit-border-radius: 5pt;
	-moz-border-radius: 5pt;
	border-radius: 5pt;
}
*/
 
/***************************** Pagination *****************************/
.pagination {
	margin-top: 10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11pt;
	text-align: center;
	display: none;
}
.pagination a {
	text-decoration: none;
	font-weight: bold;
	color: #DB3;
	background-color: transparent;
	margin: 0 3px;
	padding: 2px 4px 2px 4px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
}
.pagination a:hover {
	color: #FFF;
	background: #D91;
}
.pagination span {
	color: #FFF;
	font-weight: bold;
	background: #DB3;
	margin: 0 3px;
	padding: 2px 4px 2px 4px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	cursor: default;
}

/****************************** Clearfix ******************************/
.clearfix:before, .clearfix:after { 
        content: ""; 
        display: table; 
}
.clearfix:after { 
        clear: both; 
}
.clearfix { 
        zoom: 1;
}

/**********************************************************************/
/*@media all and (min-width: 640px) and (max-width: 800px) {*/
@media all and (max-width: 800px) {
	.content {
		width: 100% !important;
	}
	.item {
		display: block;
		float: left;
		width: 30%;
		margin: 0 10px 10px 0;
		background-color: #CC9;
		-webkit-box-shadow: 1px 2px 5px #CC9;
		box-shadow: 1px 2px 5px #CC9;
	}
	.item img {
		width: 100%;
		height: auto;
		-webkit-border-radius: 3pt;
		border-radius: 3pt;
	}
	.item a img:hover {
		box-shadow: 0 5px 20px #660;
	}
	.portrait_ img, .portrait_medium img, .portrait_large img {
		height: 285px;
	}
}

@media all and (max-width: 640px) {
	.content {
		width: 100% !important;
	}
	.item {
		display: block;
		float: left;
		/*width: 260px;*/
		margin: 3px;
		background-color: #CC9;
		-webkit-box-shadow: 1px 2px 5px #CC9;
		box-shadow: 1px 2px 5px #CC9;
	}
	.item img {
		width: 260px;
		height: auto;
		-webkit-border-radius: 3pt;
		border-radius: 3pt;
	}
	.item a img:hover {
		box-shadow: 0 5px 20px #660;
	}
	.portrait_ {
		height: 350px;
	}
	.portrait_ img {
		height: 350px;
	}
}
/*@media all and (max-width: 640px) {*/
@media all and (max-width: 599px) {
	.view, .viewalbum {
		display: none;
	}
	.menubar ul li.link:hover, .menubar ul li.link:hover a {
		box-shadow: none;
		color: inherit;
	}
	.content {
		width: 100%;
	}
	#container {
		margin: 0 auto;
		padding: 0;
	}
	.item {
		width: 120px;
		height: auto;	
		margin: 2px;
		background: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.item img {
		width: 100%;
		height: auto;
	}

}