/*
YouTubeSkinDefault
default.css
Studio2b
Michael Son(mson0129@gmail.com)
08JUL2015 - This file is newly created.
05JUL2015 - Category is supported.
*/

@charset "utf-8";

div.buttonArea {padding: 10px 0; text-align: right;}

table {width: 100%; border-collapse: collapse; border-top: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; color: #4a4a4a;}
table thead th {margin: 0; border: 0; padding: 14px 0 15px; border-bottom: double #DBDBDB; height: 14px; white-space: nowrap;}
table tbody td {padding: 8px 10px; border: 0; border-bottom: 1px solid #e6e6e6;}
	table tbody td.browse_thumbnail img {width: 120px; height: 90px;}
table .browse_thumbnail {width: 120px;}
table .browse_channel {width: 80px; text-align: center;}
table .browse_date {width: 80px; text-align: center;}
table a {color: #4a4a4a;}

div.youtube_popup {z-index: 99999; background-color: rgba(0,0,0,0.75); color: #FFF; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: center; white-space: nowrap;}
div.youtube_popup:before {content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em;}
div.youtube_popup .centered {display: inline-block; vertical-align: middle; white-space: initial;}

/*peruse*/
div.peruse {margin-bottom: 75px;}
div.peruse_header{margin-bottom: 20px;}
	h1.peruse_title {font-size: 21px; font-weight: 400; line-height: 36px; white-space: nowrap;}
		h1.peruse_title a {color: #444; text-decoration: none;}
	p.peruse_meta {margin: 0; padding: 8px 0 13px; border-bottom: 1px solid #DDD; zoom: 1; white-space: nowrap; color: #666;}
		p.peruse_meta span.peruse_channel a {color: #666; text-decoration: none;}

div.peruse_contents {padding: 15px 10px;}
	div.peruse_player {padding-bottom: 15px; text-align: center;}
	div.peruse_description {color: #333; line-height: 1.5;}

div.peruse_footer div.peruse_sns {margin-top: 50px;}
div.peruse_footer div.peruse_sns ul {text-align: center;}
div.peruse_footer div.peruse_sns li {display: inline; vertical-align: top;}
div.peruse_footer div.peruse_sns a {display: inline-block; width: 32px; height: 32px; border: 1px solid #e0e0e0; background-color: #f4f4f4; border-radius: 2px; text-decoration: none;}
div.peruse_footer div.peruse_sns a i {font-size: 22px; line-height: 32px; color: #bcbcbc;}

.categoryTab
{
	float: left;
	position: relative;
	list-style: none;
	border: 0;
	z-index: 2;
	white-space : nowrap;
	width:100%;
}

.categoryTab li
{
	float: left;
	display: inline-block;
	border: 0.3rem solid white;
	border-radius: 2rem;
	margin-left: 1rem;
	margin-bottom: 1rem;
	opacity: 0.7;
}
.categoryTab li:hover
{
	opacity: 1.0;
}

.categoryTab li a
{
	padding: 0.5rem;
	position: relative;
	float: left;
	font-size: 1rem;
	text-decoration: none;
	color: white;
}
.categoryTab li.on a
{
	text-decoration: none;
	background-color: white;
	border-radius: 2rem;
	color: #333333;
}


.item_board
{
	position: relative;
}

.item
{
	display:inline-block;
	margin:1em;
	width:20rem;
	height:auto;
	background-color : #333333;
	border-radius: 1rem;
	transform:scale(1.0);
	transition: all 0.5s;
}

.item:hover
{
	transform:scale(1.1);
}

.item_subject
{
	position: relative;
	display: block;
	width:20rem;
	height:2rem;
	background-color : #333333;
	border-radius: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.2rem;
	margin-top: 0.8rem;
}
.item_subject a:link
{
	color:white;
	text-decoration: none;
}
.item_subject a:visited
{
	color:#222222;
	text-decoration: none;
}
.item_subject a:hover
{
	text-decoration: none;
}
.item_subject a:active
{
	text-decoration: none;
}

.item_thumbnail
{
	position: relative;
	width:20rem;
	height:auto;
}
.crop{
	position: relative;
	overflow:hidden;
	border:0px solid #ccc;
	}
.crop img
{
	width:20rem;
	height:auto;
	margin:-1.9rem 0px -2.2rem 0px;
}

.item_date
{
	float:left;
	width:20rem;
	height:1rem;
	position: relative;
	font-size: 0.7rem;
	color:#555555;
	vertical-align: middle;
}

div.pages
{
	padding: 13px 0;
	text-align: center;
	font-size: 1.5rem;
}
div.pages a, div.pages strong
{
	display: inline-block;
	color: #777777;
	vertical-align: top;
	text-decoration: none;
	opacity: 0.5;
	transition: all 0.5s;
	margin:1rem;
}
div.pages a:hover
{
	color: #AAAAAA;
	opacity: 1.0;
}

div.pages strong
{
	color: white;
	opacity: 1.0;
}