app.css

.header{
	display: -webkit-flex;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

#wrapper{
	position: relative;
	height: 748px;
	width: 1024px;
}

#resourceContainer{
	position: absolute;
	height: 100%;
	width: 254px;
	left: 0px;
	background:  #E1DCD6;
}

#workArea{
	position: absolute;
	top: 0px;
	left: 254px;
	height: 100%;
	width: 770px;
	background: #ebe6e1;
}

#saveTip{
	position: absolute;
	width: 430px;
	height: 520px;
	right: 200px;
	top: 159px;
	display: none;
}

#savingLabel{
	position: absolute;
	top: 80px;
	left: 315px;
	width: 140px;
	height: 30px;
	background-color: #bdb5aa;
	color: #fff;
	font-size: 18px;
	display: none;
	text-align: center;
	line-height: 30px;
}

#resourceContainer>div:first-child{
	position: absolute;
	height: 98px;
	left: 0px;
	top: 0px;
	background: #E1DCD6;
	border-width: 0px;
	width: 100%;
}

#searchBar{
	position: absolute;
	width: 100%;
	height: 48px;
	left: 0px;
	top: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#searchBar>div{
	position: relative;
	width: 190px;
	height: 20px;
}

#searchBar>button{
	position: relative;
	height: 22px;
	width: 22px;
	border: none;
	padding: 0px;
	margin-left: 8px;
	background-image: url('assets/buttons/search.png');
	background-color: transparent;
}

#searchBar>button:hover{
	background-image: url('assets/buttons/search_over.png');
}

#searchInput{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 187px;
	height: 100%;
	padding: 0px;
	border-width: 0px;
	padding-left: 3px;
}

#removeInputX{
	position: absolute;
	right: 3px;
	color: #DA3F3F;
	font-size: 16px;
	font-weight: bold;
	visibility: hidden;
}

#resourceIconContainer{
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 50px;
	width: calc(100% - 16px);
	background: #d7d2cd;
	padding-left: 16px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#resourceIconContainer>button{
	width: 40px;
	height: 40px;
	border: none;
	padding: 0px;
	margin-right: 4px;
}

#pictureNavButton{
	background-color: transparent;
	background-image: url('assets/buttons/picture.png');
}

#pictureNavButton:hover{
	background-image: url('assets/buttons/picture_over.png');
}

#soundNavButton{
	background-color: transparent;
	background-image: url('assets/buttons/sound.png');
}

#soundNavButton:hover{
	background-image: url('assets/buttons/sound_over.png');
}

#cardNavButton{
	background-color: transparent;
	background-image: url('assets/buttons/card.png');
}

#cardNavButton:hover{
	background-image: url('assets/buttons/card_over.png');
}

#videoNavButton{
	background-color: transparent;
	background-image: url('assets/buttons/video.png');
}

#videoNavButton:hover{
	background-image: url('assets/buttons/video_over.png');
}

#resourceVS{
	position: absolute;
	top: 108px;
	left: 0px;
	width: 100%;
	bottom: 10px;
}

.Content{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	overflow-y: scroll;
	overflow-x:hidden;
}

#searchLine{
	visibility: hidden;
}

.lineContainer{
	position: relative;
	height: 40px;
	width: 100%;
}

.lineContainer>label{
	position: absolute;
	left: 10px;
	top: 12px;
	color: #666;
	font-size: 18px;
}

.line1{
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 1px;
	background-color: #ccc4ba;
	height: 2px;
}

.line2{
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 1px;
	background-color: #eee;
	height: 1px;
}

.myContainer{
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.TileGroup{
	width: 220px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}

.noMyLabel{
	width: 220px;
	height: 75px;
	line-height: 75px;
	font-size: 16px;
	color: #bbb;
	display: block;
	text-align: center;
}

.searchLine{
	position: relative;
	width: 100%;
	height: 40px;
}

.searchLine>label:nth-child(1){
	position: absolute;
	left: 10px;
	top: 12px;
	color: #666;
	font-size: 18px;
}

.searchLine>label:nth-child(2){
	position: absolute;
	right: 10px;
	top: 18px;
	color: #666;
	font-size: 14px;
}

#chooseArea{
	position: absolute;
	right: 0px;
	width: 770px;
	height: 748px;
	border: none;
}

#mask{
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	background-color: gray;
}

.hidden{
	visibility: hidden;
}

.show{
	visibility: visible;
}

button{
	outline: none;
}

button.imgUploadButton{
	position: absolute;
	right: 10px;
	top: 10px;
}

input.uploadImg{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 0px;
	height: 0px;
}

input.uploadAudio{
	position: absolute;
	width: 0px;
	height: 0px;
}

input.uploadVideo{
	position: absolute;
	width: 0px;
	height: 0px;
}

/*save panel*/
#namecheck{
	position: absolute;
	width: 430px;
	height: 520px;
	background: #efeae4;
	border: 1px solid #696969;
	overflow: hidden;
	display: none;
}

#namecheck>form{
	position: absolute;
	height: 520px;
	width: 430px;
}

#infoLabel{
	position: absolute;
	top: 0px;
	width: 428px;
	height: 50px;
	line-height: 50px;
	background-color: #D4CCC2;
	color: #000;
	font-size: 20px;
	font-weight: bold;
	padding-left:  15px;
	vertical-align: middle;
}

#unsaveTipLabel{
	visibility: hidden;
	left: 160px;
	top: 14px;
	color: #d95f5f;
	font-size: 20px;
	font-weight: bold;
}

#namecheck>form>div:nth-child(3){
	position: absolute;
	top: 50px;
	width: 430px;
	height: 150px;
	text-align: center;
}

#namecheck>form>div:nth-child(3)>label:nth-child(1){
	position: absolute;
	right: 330px;
	top: 30px;
	font-size: 20px;
}

#cardsnametext{
	position: absolute;
	left: 120px;
	top: 20px;
	width: 260px;
	height: 40px;
	font-size: 18px;
}

#namecheck>form>div:nth-child(3)>label:nth-child(3){
	position: absolute;
	right: 20px;
	top: 30px;
	color: #c03535;
	font-size: 36px;
}

#namecheck>form>div:nth-child(3)>label:nth-child(4){
	position: absolute;
	right: 330px;
	top: 90px;
	font-size: 20px;
}

#tagstext{
	position: absolute;
	left: 120px;
	top: 80px;
	width: 260px;
	height: 40px;
	font-size: 18px;
}

#namecheck>form>div:nth-child(4){
	position: absolute;
	top: 200px;
	bottom: 80px;
	width: 430px;
}

#namecheck>form>div:nth-child(4)>label:nth-child(1){
	position: absolute;
	right: 330px;
	top: 0px;
	color: #0a78c8;
	font-size: 20px;
	font-weight: bold;
}

#namecheck>form>div:nth-child(4)>hr:nth-child(2){
	position: absolute;
	left: 0px;
	right: 0px;
	top: 30px;
	background-color: #ccc4ba;
	height: 1px;
	border: none;
}

#namecheck>form>div:nth-child(4)>hr:nth-child(3){
	position: absolute;
	left: 0px;
	right: 0px;
	top: 31px;
	background-color: #eee;
	height: 1px;
	border: none;
}

.tileGroup1{
	position: absolute;
	left: 50%;
	margin-left: -180px;
	top: 40px;
	width: 360px;
	height: 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

.tileGroup1>div{
	color: #0a78c8;
	font-size: 16px;
	flex-grow: 1;
	width: 90px;
	height: 25px;
	line-height: 25px;
}

#namecheck>form>div:nth-child(4)>label:nth-child(5){
	position: absolute;
	right: 20px;
	top: 60px;
	color: #c03535;
	font-size: 36px;
}

#namecheck>form>div:nth-child(4)>label:nth-child(6){
	position: absolute;
	right: 330px;
	top: 130px;
	color: #0a78c8;
	font-size: 20px;
}

#namecheck>form>div:nth-child(4)>label:nth-child(8){
	position: absolute;
	right: 330px;
	top: 185px;
	color: #0a78c8;
	font-size: 20px;
}

#Category1{
	position: absolute;
	left: 120px;
	top: 120px;
	width: 260px;
	height: 40px;
	font-size: 18px;
	color: #0a78c8;
}

#EX{
	position: absolute;
	left: 120px;
	top: 175px;
	width: 260px;
	height: 40px;
	font-size: 18px;
	color: #0a78c8;
}

#namecheck>form>div:nth-child(5){
	position: absolute;
	bottom: 0px;
	width: 430px;
	height: 80px;
	background-color: #D4CCC2;
	border: none;
}

#namecheck>form>div:nth-child(5)>button:nth-child(1){
	position: absolute;
	left: 60px;
	bottom: 20px;
	width: 150px;
	height: 40px;
	background-color: #0866c8;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	padding: 0px;
	border: 1px solid black;
}

#namecheck>form>div:nth-child(5)>button:nth-child(1):hover{
	background-color: #0a78c8;
}

#namecheck>form>div:nth-child(5)>button:nth-child(2){
	position: absolute;
	right: 60px;
	bottom: 20px;
	width: 150px;
	height: 40px;
	background-color: #636363;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	padding: 0px;
	border: 1px solid black;
}

#namecheck>form>div:nth-child(5)>button:nth-child(2):hover{
	background-color: #585858;
}

.cursor{
	cursor: url('assets/icon/target.png') 16 16, auto;
}