@charset "utf-8";

html, body
{
	margin:0px;
	padding:0px;
	width:100vw;
	height:100vh;
	background-color: #333333;
}
h1
{
	text-decoration: none;
	color:white;
	font-size: 3rem;
	line-height: 1vh;
}
h2
{
	text-decoration: none;
	color:#AAAAAA;
	font-size: 2rem;
	line-height: 0.7vh;
}
h3
{
	text-decoration: none;
	color:#777777;
	font-size: 1rem;
	line-height: 0.5vh;
}
p
{
	text-decoration: none;
}

.playlog_layout
{
	position: relative;
	float:left;
	border-width:0px;
	width:100vw;
	height:100vh;
	text-align: center;
	vertical-align: middle;
	z-index:1;
}

.RandomBackground
{
	position: absolute;
	float:left;
	border-width:0px;
	width:100vw;
	height:100vh;
	z-index:2;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	-webkit-filter:blur(10px);
	-moz-filter:blur(10px);
	-o-filter:blur(10px);
	-ms-filter:blur(10px);
	filter:blur(10px);
}
@keyframes LogoGelly {
	0% {
		transform: skew(10deg,10deg);
		-webkit-transform: skew(10deg,10deg);
	}
	10%
	{
		transform: skew(-8deg,-8deg);
		-webkit-transform: skew(-8deg,-8deg);
	}
	20%
	{
		transform: skew(6deg,6deg);
		-webkit-transform: skew(6deg,6deg);
	}
	30%
	{
		transform: skew(-4deg,-4deg);
		-webkit-transform: skew(-4deg,-4deg);
	}
	40%
	{
		transform: skew(2deg,2deg);
		-webkit-transform: skew(2deg,2deg);
	}
	to {
		transform: skew(0deg,0deg);
		-webkit-transform: skew(0deg,0deg);
	}
  }
.logo
{
	float:right;
	position: absolute;
	left: calc( 100vw - 6rem );
	top: calc( 100vh - 11rem );
	margin-right:2rem;
	width:5rem;
	height:5rem;
	background: url("../images/logo.png") no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	animation-duration: 2s;
	animation-name: LogoGelly;
	animation-iteration-count: infinite;
	/*animation-direction: alternate;*/
}

.header
{
	position: relative;
	background-color: #333333;
	width: 100vw;
	height: 3.5rem;
	clear: both;
	overflow: hidden;
	opacity: 0.9;
	z-index: 4;
}
.header:hover
{
	opacity: 1.0;
}

.middle
{
	position: relative;
	width: 100vw;
	height: calc( 100% - 5.5rem );
	clear: both;
	overflow: hidden;
	z-index: 3;
}

.footer
{
	position: relative;
	background-color: #333333;
	bottom:0px;
	width: 100vw;
	height: 2rem;
	clear: both;
	overflow: hidden;
	z-index: 4;
	opacity: 0.9;
}
.footer:hover
{
	opacity: 1.0;
}

.widgetmenu
{
	position: relative;
	float: left;
	width: 10rem;
}

/*
.topmenu
{
	float: left;
	width: calc( 100% - 20rem );
}

.topmenu ul
{
	list-style-type: none;
	margin: 0.5rem;
	padding: 0;
	white-space: nowrap;
	overflow-x: auto;
}

.topmenu li
{
	display: inline;
	margin-right:1rem;
}

.topmenu a
{
	text-decoration: none;
	background-color: white;
	border-bottom: 0.3rem solid gray;
	border-radius: 1rem;
	padding: 0rem 0.5rem 0rem 0.5rem;
	display:inline-block;
	font-style: :bold;
	font-size: 1.2rem;
	line-height: 0rem;
	color:#333333;
	transition: all 0.1s;
}
.topmenu a:active
{
	transform: translateY(0.2rem);
	border-bottom: 0.1rem solid gray;
}
.topmenu a:hover
{
	color:#222222;
	background-color:#DDDDDD;
}
*/
.membermenu
{
	float: left;
	position: relative;
	width: calc( 100% - 22rem );
}

.sitename
{
	float: right;
	width: 12rem;
	margin-top:0.7rem;
	color:white;
	font-size: 2rem;
}

@keyframes slidein {
	from {
	  width: 3.5rem;
	}
  
	to {
	  width: 20rem;
	}
  }
  @keyframes slideout
  {
	  from{
		width: 20rem;
	  }
	  to{
		width: 3.5rem;
	  }
  }

.sidemenu
{
	float: left;
	display: inline-block;
	position: relative;
	background-color:#333333;
	overflow-x:hidden;
	height: 100%;
	opacity: 0.9;
	animation-duration: 0.5s;
	animation-name: slidein;
	width:20rem;
	
}

#IsOpenedSideMenu:checked ~ .sidemenu
{
	animation-duration: 0.5s;
	animation-name: slideout;
	overflow-y:hidden;
	width:3.5rem;
}

@keyframes sizeup {
	from {
	width: calc( 100vw - 20rem );
	}
  
	to {
	width: calc( 100vw - 3.5rem );
	}
  }
  @keyframes sizedown
  {
	  from{
		width: calc( 100vw - 3.5rem );
	  }
	  to{
		width: calc( 100vw - 20rem );
	  }
  }
.contents
{
	float:right;
	display: inline-block;
	position: relative;
	height: 100%;
	width: calc( 100vw - 20rem );
	font:#333333;
	overflow-y:auto;
	overflow-x:hidden;
	animation-duration: 0.5s;
	animation-name: sizedown;
}
#IsOpenedSideMenu:checked ~ .contents
{
	width: calc( 100vw - 3.5rem );
	animation-duration: 0.5s;
	animation-name: sizeup;
}

.contents_view
{
	position: relative;
	overflow-x:hidden;
	height:100%;
}

.copyright
{
	color:#777777;
	font-size: 1rem;
	margin-top: 0.5rem;
}

#IsOpenedSideMenu 
{
	display:none;
}
.bt_opensidemenu 
{
	float: left;
	display: inline-block;
	background: url("../images/bt_slidemenu.png") no-repeat;
	margin-top: 0.5rem;
	margin-left: 0.5rem;
	width: 2rem;
	height: 2rem;
	z-index:999;
	cursor:pointer;
}
.bt_opensidemenu:active
{
	width: 1.5rem;
	height: 1.5rem;
}
.bt_opensidemenu:hover 
{
	width: 1.8rem;
	height: 1.8rem;
}

#style-8::-webkit-scrollbar-track
{
	width:0.1rem;
	color:red;
	border-radius: 5rem;
}

#style-8::-webkit-scrollbar
{
	width: 0.5rem;
	background:transparent;
	background-color: #333333;
}

#style-8::-webkit-scrollbar-thumb
{
	border-radius: 5rem;
}
#style-8::-webkit-scrollbar-thumb:hover
{
	border-radius: 5rem;
	background-color: #888888;
}