/**
 * widget.css
 *
 * tile gallery widget CSS file
 * @version 1.0.8
 *
 * copyright (c) 2011 Pison, Seol Dong-jin <www.codemission.org>
 */

@charset "utf-8";

div.tile_gallery_widget_outer {
	padding:0 0px;
}

div.tile_gallery_widget {
	position:relative;
	margin:0 auto;
	max-width:912px;
	font-family: 'Nanum Gothic','나눔고딕';
}
div.tile_gallery_widget ul {
	list-style:none;
}

/**
 * categories
 */
div.tile_gallery_widget ul.tile_gallery_categories {
	text-align:left;
	border-top:2px solid #d8d7d4;
}
div.tile_gallery_widget ul.tile_gallery_categories:after {
	content:"";
	display:block;
	clear:both;
}
div.tile_gallery_widget ul.tile_gallery_categories li {
	/*display:inline-block;*/
	float:left;
}
div.tile_gallery_widget ul.tile_gallery_categories li a {
	padding:9px 12px;
	cursor:pointer;
	cursor:hand;
	color:black;
	font-size:13px;
	position:relative;
	display:block;
	border-bottom:2px solid transparent;
}
div.tile_gallery_widget ul.tile_gallery_categories li a:after {
	font-size:13px;
}
div.tile_gallery_widget ul.tile_gallery_categories li a:hover {
	/*border-bottom:2px solid #FBCB9B;*/
	color:#FE7360; 
}
div.tile_gallery_widget ul.tile_gallery_categories li a.selected {
	color:#FE7360;
}
div.tile_gallery_widget ul.tile_gallery_categories li a.selected:after {
	position:absolute;
	top:0px;
	width:0px;
	height:0px;
	left:50%;
	margin-left:-6px;
	content:"";
	border: 6px solid #D8D7D4;
	border-color:#D8D7D4 transparent transparent transparent;
}


/**
 * items
 */
div.tile_gallery_widget
ul.tile_gallery_item {
	text-align:center;
	 margin:0; padding:0;
	 clear:both;
}
div.tile_gallery_widget
ul.tile_gallery_item li {
	*zoom:1; overflow:hidden; cursor:hand;cursor:pointer;
	float:left;
	width:25%;
	position:relative;
	font-size:18px;
}
div.tile_gallery_widget
ul.tile_gallery_item li.rowend {
	margin-right:-1px;
}
div.tile_gallery_widget
ul.tile_gallery_item li div.thumbArea {
	position:relative;
	overflow:hidden;
	margin-right:1px;
	margin-bottom:1px;
}
div.tile_gallery_widget
ul.tile_gallery_item li div.thumbArea img.thumbnail {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	width:100%;
	max-width:100%;
	display:block;
	margin:0px;
}
div.tile_gallery_widget.no_gray
ul.tile_gallery_item li div.thumbArea img.thumbnail {
    filter: none;
	-webkit-filter: none;
}
/* normal type */
div.tile_gallery_widget
ul.tile_gallery_item li div.thumbArea div.buttonArea {
	display:none;
}
/* no image type */
div.tile_gallery_widget
ul.tile_gallery_item li div.thumbArea.no_image {
	background-color:#D8D7D4;
}
ul.tile_gallery_item li div.thumbArea.no_image img.thumbnail {
	opacity:0.55;
}
div.tile_gallery_widget
ul.tile_gallery_item li div.thumbArea.no_image:after {
	position:absolute;
	content:"No Image";
	bottom:10px;
	right:10px;
	font-size:20px;
	color:white;
}
div.tile_gallery_widget
ul.tile_gallery_item li div.thumbArea.no_image.video:after {
	display:none;
}
div.tile_gallery_widget
ul.tile_gallery_item li div.thumbArea.video div.buttonArea {
	display:block;
	position:absolute;
	bottom:5.6%;
	right:5.6%;
	width:50px;
	height:50px;
	background-size:50px 50px;
	background-image:url('./video_play_btn.png');
	background-repeat:no-repeat;
	opacity:0.6;
	/*-webkit-transition: width 300ms, height 300ms, background-size 300ms, bottom 300ms, right 300ms;*/
}
div.tile_gallery_widget.no_video
ul.tile_gallery_item li div.thumbArea.video div.buttonArea {
	display:none;
}
div.tile_gallery_widget.video_btn_white
ul.tile_gallery_item li div.thumbArea.video div.buttonArea {
	background-image:url('./video_play_btn_white.png');
}
/*div.tile_gallery_widget
ul.tile_gallery_item li:hover div.thumbArea.video div.buttonArea {
	width:50%;
	height:50%;
	bottom:2.4%;
	right:2.4%;
	background-size:140px 140px;
}*/
div.tile_gallery_widget
ul.tile_gallery_item li:hover div.thumbArea.video div.buttonArea:hover {
	opacity:0.9;
}

/**
 * items infoArea
 */
div.tile_gallery_widget
ul.tile_gallery_item li div.infoArea {
	background-color:#FE7360;
	width:100%;
	height:100%;
	position:absolute;
	top:-100%;
	left:-100%;
}
div.tile_gallery_widget
ul.tile_gallery_item li div.infoArea div.infoArea_box {
	margin:8%;
	text-align:left;
}
/* title part */
div.tile_gallery_widget
ul.tile_gallery_item li div.infoArea div.infoArea_box div.title {
	padding-bottom:15px;
}
div.tile_gallery_widget
ul.tile_gallery_item li div.infoArea div.infoArea_box div.title a {
	color: #282724;
	text-decoration:none;
}
div.tile_gallery_widget
ul.tile_gallery_item li div.infoArea div.infoArea_box div.title a:hover {
	text-decoration:underline;
}
div.tile_gallery_widget.title_nowrap
ul.tile_gallery_item li div.infoArea div.infoArea_box div.title {
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
ul.tile_gallery_item li div.infoArea div.infoArea_box div.text {
	margin:0px;
	padding:0px;
	font-size:12px;
	color:white;
}
ul.tile_gallery_item li div.infoArea div.infoArea_box dl {
	font-size:12px;
	color:white;
	line-height:1.5em;
}
ul.tile_gallery_item li div.infoArea div.infoArea_box dl dt {
	display:inline;
}
ul.tile_gallery_item li div.infoArea div.infoArea_box dl dt:after {
	content:" : ";
}
ul.tile_gallery_item li div.infoArea div.infoArea_box dl dd {
	display:inline;
	margin:0;
}
ul.tile_gallery_item li div.infoArea div.infoArea_box dl dd:after {
	content:"\A";
	white-space:pre;
}
/* writer info */
ul.tile_gallery_item li div.infoArea div.infoArea_box div.writer_info {
	font-size: 12px;
	margin-bottom: 7px;
}
ul.tile_gallery_item li div.infoArea div.infoArea_box div.writer_info span.nickname {
	margin-right:8px;
}

/**
 * resizing screen size
 */
@media only screen and (min-width: 568px) and (max-width: 800px) {
	div.tile_gallery_widget
	ul.tile_gallery_item li {
		width:33.333333%;
	}
}
@media only screen and (max-width: 567px) {
	div.tile_gallery_widget
	ul.tile_gallery_item li {
		width:50%;
	}
}
@media only screen and (max-width: 300px) {
	div.tile_gallery_widget
	ul.tile_gallery_item li {
		width:100%;
	}
}