@import url(fileicons.css) ;
@import url(filebar.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 : #807d77 ;
	background-image : url('/getFileList/images/bg_white.png') ;
	background-attachment : fixed ;
	color : #fff ;
	font-family : sans-serif ;
	font-size : 14 ;
	-webkit-font-smoothing : antialiased ;
	-moz-osx-font-smoothing : grayscale ;
}

header {
	z-index : 2 ;
	position : fixed ;
	box-sizing : border-box ;
	bottom : 50% ;
	width : 256px ;
	height : 80px ;
}

	header svg {
		position : relative ;
		box-sizing : border-box ;
		display : block ;
		float : left ;
		filter : drop-shadow(0px 1px 0px rgba(255,255,255,0.66)) ;
		margin-left : 15px ;
	}

	header .logo {
		width : 80px ;
		height : 80px ;
	}

		header .logo g {
			fill : #000 ;
			opacity : 0.35 ;
		}

	header .title {
		top : 18px ;
		width : 128px ;
		height : 49px ;
	}

		header .title g {
			fill : none ;
			stroke-width : 4px ;
			stroke : #000 ;
			stroke-linecap : square ;
			stroke-miterlimit : 10 ;
			opacity : 0.35 ;
		}

footer {
	position : fixed ;
	box-sizing : border-box ;
	display :flex ;
	flex-wrap : wrap ;
	justify-content : center ;
	align-items : stretch ;
	align-content : flex-end ;
	top : 0px ;
	left : 0px ;
	width : 280px ;
	height : 100% ;
	background-color : rgba(0,0,0,0.05) ;
	border-right : solid 1px rgba(0,0,0,0.15) ;
}

	footer .btn {
		cursor : pointer ;
		position : relative ;
		box-sizing : border-box ;
		width : 48px ;
		height : 48px ;
		color : rgba(0,0,0,0.35) ;
		font-family : sans-serif ;
		font-size : 11px ;
		font-weight : bold ;
		text-align : center ;
		text-shadow : 0px 1px rgba(255,255,255,0.2) ;
		margin-left : 15px ;
		margin-right : 15px ;
		margin-bottom : 35px ;
	}

	footer .btn:hover {
		color : rgba(255,255,255,0.65) ;
		text-shadow : 0px 1px rgba(0,0,0,0.25) ;
	}

		footer .btn svg {
			display : block ;
			position : relative ;
			box-sizing : border-box ;
			top : 0px ;
			left : 0px ;
			width : 48px ;
			height : 48px ;
			filter : drop-shadow(0px 1px 0px rgba(255,255,255,0.66)) ;
		}

		footer .btn:hover svg {
			filter : drop-shadow(0px 1px 0px rgba(0,0,0,0.3)) ;
		}

			footer .btn svg g {
				fill : none ;
				stroke : #000 ;
				stroke-width : 4 ;
				stroke-miterlimit : 10 ;
				opacity : 0.35 ;
			}

			footer .btn:hover svg g {
				stroke : #fff ;
				opacity : 0.6 ;
			}

#pageArea {
	z-index : 1 ;
	position : absolute ;
	box-sizing : border-box ;
	top : 0px ;
	left : 280px ;
	width : calc(100% - 280px) ;
	min-height : 100% ;
	background-color : rgba(255,255,255,0.05) ;
	border-left : solid 1px rgba(255,255,255,0.15) ;
}

	#pageArea .icons {
		list-style : none ;
		position : absolute ;
		box-sizing : border-box ;
		overflow : scroll ;
		visibility : hidden ;
		display : flex ;
		flex-direction : row ;
		flex-wrap : wrap ;
		justify-content : flex-start ;
		align-items : stretch ;
		align-content : flex-start ;
		top : 0px ;
		left : 0px ;
		width : 100% ;
		max-height : calc(100% - 30px) ;
		padding : 20px ;
		margin-top : 30px ;
	}


	#pageArea .bars {
		list-style : none ;
		position : absolute ;
		box-sizing : border-box ;
		visibility : hidden ;
		display : flex ;
		flex-direction : row ;
		flex-wrap : wrap ;
		justify-content : flex-start ;
		align-items : stretch ;
		align-content : flex-start ;
		top : 0px ;
		left : 0px ;
		width : 100% ;
		padding : 20px ;
		margin-top : 30px ;
	}


#filelist {
	list-style : none ;
	position : relative ;
	box-sizing : border-box ;
	display : flex ;
	flex-direction : row ;
	flex-wrap : wrap ;
	justify-content : flex-start ;
	align-items : stretch ;
	align-content : flex-start ;
	width : 100% ;
	min-height : 85% ;
/*
	background-color : rgba(255,128,0,0.1) ;
*/
	padding : 20px ;
	margin-top : 30px ;
}


#pathlist {
	list-style : none ;
	position : fixed ;
	box-sizing : border-box ;
	top : 0px ;
	left : 280px ;
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : flex-start ;
	align-content : flex-start ;
	width : calc(100% - 280px) ;
	height : 30px ;
	background-color : rgba(255,255,255,0.05) ;
	border-bottom : solid 1px rgba(0,0,0,0.15) ;
}

	#pathlist li {
		position : relative ;
		box-sizing : border-box ;
		height : 100% ;
		background-color : rgba(255,255,255,0.15) ;
		color : rgba(0,0,0,0.45) ;
		font-size : 13px ;
		font-weight : bold ;
		line-height : 29px ;
		text-shadow : 0px 1px 0px rgba(255,255,255,0.35) ;
		padding-left : 10px ;
		padding-right : 10px ;
		border-left : solid 1px rgba(255,255,255,0.2) ;
		border-right : solid 1px rgba(0,0,0,0.2) ;
	}


#viewOptions {
	position : fixed ;
	box-sizing : border-box ;
	top : 0px ;
	right : calc(100% - 270px) ;
}

	#viewOptions ul {
		list-style : none ;
		position : relative ;
		box-sizing : border-box ;
		overflow : hidden ;
		display : flex ;
		flex-direction : column ;
		flex-wrap : nowrap ;
		justify-content : flex-start ;
		align-items : flex-start ;
		align-content : flex-start ;
		padding-top : 10px ;
		padding-bottom : 10px ;
		border-bottom : solid 1px rgba(0,0,0,0.25) ;
	}

		#viewOptions ul li {
			cursor : pointer ;
			position : relative ;
			box-sizing : border-box ;
			width : 40px ;
			height : 40px ;
			border-radius : 4px ;
		}

		#viewOptions ul li:hover {
			background-color : rgba(255,255,255,0.15) ;
		}

			#viewOptions ul li svg {
				position : relative ;
				box-sizing : border-box ;
				width : 40px ;
				height : 40px ;
				filter : drop-shadow(0px 1px 0px rgba(255,255,255,0.66)) ;
			}

				#viewOptions ul li svg g {
					fill : #000 ;
					opacity : 0.35 ;
				}

		#viewOptions ul .on {
			background-color : rgba(0,0,0,0.08) ;
/*
			box-shadow : 0px 0px 4px rgba(0,0,0,0.3) inset ;
*/
		}