@import url(font.css) ;
@import url(calendar.css) ;
@import url(clock.css) ;
@import url(browser.css) ;
@import url(tweet.css) ;
@import url(photo.css) ;
@import url(note.css) ;
@import url(comment.css) ;
@import url(readme.css) ;
@import url(bookmark.css) ;
@import url(login.css) ;

* {
	margin : 0px ;
	padding : 0px ;
	-ms-overflow-style : none;
	scrollbar-width : none;
}

*::-webkit-scrollbar {
	display : none ;
}

a {
	text-decoration : none ;
}

img {
	border : 0px ;
}


body {
	margin : 0px ;

	background-color : #172622 ;
	background-image : url('images/bg_texture.png') ;

	color : rgba(255,255,255,0.7) ;
	font-family : mplus2c, sans-serif ;
	font-size : 14px ;
	-webkit-font-smoothing : antialiased ;
	-moz-osx-font-smoothing : grayscale ;

	transition-duration : 0.5s ;
}


header {
	z-index : 10 ;
	position : fixed ;
	box-sizing : border-box ;
	overflow : hidden ;
	top : calc((100% - 80px) / 2);
	left : 36px ;
	width : 90px ;
	height : 80px ;
	background-color : #73001d ;
	border-radius : 1px 3px 3px 1px ;
	box-shadow : 0px 2px 2px rgba(0,0,0,0.25) ;
	transition-duration : 0.4s ;
}

	header .leftbox {
		position : absolute ;
		box-sizing : border-box ;
		top : 0px ;
		left : 0px ;
		width : 5px ;
		height : 100% ;
		background : linear-gradient(90deg, #33000d 0%, #800020 50%, #73001d 100%) ;
	}

	header .rightbox {
		cursor : pointer ;
		position : absolute ;
		box-sizing : border-box ;
		top : 0px ;
		right : 0px ;
		width : 85px ;
		height : 100% ;
		background-color : #73001d ;
	}

	header .rightbox svg {
		width : 80px ;
		height : 80px ;
	}

	header .rightbox path {
		fill : #fff ;
		opacity : 0.7 ;
	}

	header .rightbox:hover path {
		opacity : 1 ;
	}


nav {
	position : absolute ;
	box-sizing : border-box ;
	top : 0px ;
	right : 90px ;
	width : auto ;
	height : 100% ;
}

	nav ul {
		list-style : none ;
		display : flex ;
		width : auto ;
	}

		nav ul li {
			cursor : pointer ;
			position : relative ;
			box-sizing : border-box ;
			float : left ;
			overflow : hidden ;
			width : 40px ;
			height : 40px ;
			border-radius : 20px ;
			margin-top : 20px ;
			margin-right : 20px ;
		}

		nav ul li:hover {
			background-color : rgba(255,255,255,0.04) ;
			box-shadow : 0px 1px 4px rgba(0,0,0,0.15) ;
			margin-top : 19px ;
		}

		nav ul li g {
			fill : none ;
			stroke : #ffffff ;
			stroke-miterlimit : 10 ;
			opacity : 0.4 ;
		}

		nav ul li:hover g {
			fill : #ffffff ;
			opacity : 0.8 ;
		}


footer {
	z-index : 9 ;
	position : fixed ;
	box-sizing : border-box ;
	top : 0px ;
	left : 0px ;
	width : 40px ;
	height : 100% ;
	background-color : rgba(0,0,0,0.15) ;
/*
	background : linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 85%, rgba(0,0,0,0.3) 100%) ;
*/
}

	footer .sdw {
		position : absolute ;
		box-sizing : border-box ;
		top : 0px ;
		right : 0px ;
		width : 6px ;
		height : 100% ;
		background : linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%) ;
	}

	.chip {
		cursor : pointer ;
		position : relative ;
		width : 20px ;
		height : 20px ;
		border : solid 1px rgba(255,255,255,0.25) ;
		border-radius : 11px ;
		margin-top : 18px ;
		margin-left : 10px ;
	}

		.chip:hover {
			border-color : rgba(255,255,255,0.6) ;
		}

	.green {
		background-color : #172622 ;
	}

	.red {
		background-color : #261720 ;
	}

	.blue {
		background-color : #171d26 ;
	}


.options {
	list-style : none ;
	position : absolute ;
	box-sizing : border-box ;
	left : 0px ;
	bottom : 5px ;
	width : 40px ;
}

	.options li {
		cursor : pointer ;
		position : relative ;
		box-sizing : border-box ;
		width : 100% ;
		height : 40px ;
		margin-bottom : 15px ;
		border-radius : 20px ;
	}

	.options li g {
		fill : none ;
		stroke : #ffffff ;
		stroke-miterlimit : 10 ;
		opacity : 0.2 ;
	}

	.options li:hover g {
		opacity : 0.75;
	}

	.options .on g {
		fill : none ;
		stroke : #ffffff ;
		stroke-miterlimit : 10 ;
		opacity : 0.5 ;
	}


@keyframes aniGuru {
	0% {
		transform : rotate(0deg) ;
	}

	100% {
		transform : rotate(180deg) ;
	}
}


#mainArea {
	z-index : 8 ;
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	left : 40px ;
	width : calc(100vw - 40px) ;
	min-height : 100vh ;
/*
	background-color : rgba(255,0,0,0.05) ;
*/
}

h1 {
	position : absolute ;
	box-sizing : border-box ;
	top : calc((100% - 20px) / 2) ;
	right : 40px ;
	width : auto ;
	height : 20px ;
/*
	background-color : rgba(0,0,0,0.1) ;
*/
	color : rgba(255,255,255,0.25) ;
	font-size : 16px ;
	font-family : jenson ;
	font-weight : 400 ;
	line-height : 20px ;
	text-align : left ;
	white-space : nowrap ;
}

#teloplist {
	list-style : none ;
	position : absolute ;
	box-sizing : border-box ;
	overflow : visible ;
	visibility : hidden ;
	top : 0px ;
	left : 0px ;
	width : 0px ;
	height : auto ;
}

	#teloplist li {
		position : relative ;
		box-sizing : border-box ;
		width : auto ;
		height : 20px ;
		background-color : #000 ;
		font-size : 16px ;
		font-family : jenson ;
		font-weight : 400 ;
		line-height : 20px ;
		text-align : left ;
		white-space : nowrap ;
	}