/* CSS Document */
#signInBox{
    position:absolute;
	width:70%;
	min-height:160px;
	font-size:15px;
	text-align:center;
	top:5%;
	margin-left:10%;
	line-height:1;
	grid-row-gap:10px;
}

#signUpBox{
	position:absolute;
	display:grid;
	visibility:hidden;
	grid-area:mainTitle;
	width:60%;
	min-height:280px;
	top:2.3%;
	margin-left:10%;
	line-height:1;
	grid-row-gap:10px;
}

#allContain{
	grid-template:auto/auto;
	width:100vw;
	row-gap:0vh;
	font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
}

	#topTitle{
		width:80vw;
		height:10vh;
		grid-template:1fr/10% 40% 30%;
		grid-column-gap:1vw;
	}
		#topTitle h1{
			white-space:nowrap;
		}
		#topTitle a{
			grid-column:auto;
			grid-row:1;
			width:27em;
			margin-left:-18em;
			margin-top:20vh;
			font-size:0.5em;
			white-space:nowrap;
			line-height:2;
		}
			#topTitle a>img{
				margin-top:2vh;
				margin-left:79vw;
				width:7vw;
				height:7vh;
				z-index:20;
			}
		#topTitle a>i{
			position:absolute;
			font-size:1.8em;
			margin-top:-9vh;
			margin-left:81vw;
			color:#2607F1;
		}

	#topLinks{
		grid-column:auto;
		grid-row:2;
		width:100vw;
		height:12vh;
		margin-left:0vw;
		background-color:#7B76F3;
		margin-top:25vh;
	}
	 #topLinks a{
		 font-size:1.5em;
		 text-decoration:underline;
		 color:#FFF;
		 margin-left:10VW;
		 width:40vw;		 
	 }
	 #topListArea ul{
		z-index:20;
	}
	#allMainArea{
		grid-row:3;
		width:100vw;
		height:80vh;
		grid-template:138vh 100vh/100vw;
		row-gap:10vh;
		margin-top:4vh;
	}
		#leftWing{
			display:grid;
			grid-column:1;
			grid-row:2;
			width:100vw;
			height:80vh;
			margin-left:2vw;
			grid-template:auto/auto;
		}
			#leftWing p{
				display:grid;
				gird-column:auto;
				grid-row:auto;
				font-size:18px;
				text-outline:#B72D30;
			}
				#leftWing h3{
					text-align:center;
					color:#FF8F13;
					font-size:20px;
				}
		#righWing{
			display:grid;
			grid-column:1;
			grid-row:1;
			width:100vw;
			height:118vh;
			grid-template:1fr/auto auto auto;
		}
			#firstCol, #secondCol, #thirdCol{
				display:grid;
				grid-row:1;
				height:25em;
			}
			#rightTop img, #rightMiddle img, #rightBottom img, #middleTop img, #middleBottom img, #firstRow img, #secondRow img, #thirdRow img, #fourthRow img{
						transform:perspective(500px) rotateX(15deg);
						margin-left:0.7em;
					}
					#rightTop p, #rightMiddle p, #rightBottom p, #middleTop p, #middleBottom p, #firstRow p, #secondRow p, #thirdRow p, #fourthRow p{
						font-size:1em;
						margin-left:1.5em;
					}
						#rightTop p>center, #rightMiddle p>center, #rightBottom p>center, #middleTop p>center, #middleBottom p>center, #firstRow p>center, #secondRow p>center, #thirdRow p>center, #fourthRow p>center{
							width:98%;
						}
			
	#footerArea{
		display:none;
	}


		#mainBooks{
		margin-top:1vh;
	}
		  #mainBooks div{
			  height:auto;
			  border-radius:10px;
		  }
		  #mainBooks div>div{
			  grid-row:auto;
			  grid-template:auto/1fr 1fr 1fr;
			  margin-left:2vw;
		  }
		  	#mainBooks div>div>div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  grid-template:auto/1fr 1fr 1fr;
			  border:#FFF thick solid;
			  border-radius:0px;
			  border-bottom:#D8C3C3 thick solid;
			  background:linear-gradient(to bottom, #FFF 10%, #FFF);
			  width:30vw;
		  }
				#mainBooks div>div>span{
					display:grid;
					grid-template:83vh 45vh/22vw 20vw;
					background-image:url(images/books/bookshape.png);
					background-repeat:no-repeat;
					background-size:125px 210px;
					background-position:9px 1px;
					z-index:10;
					margin-left:3vw;
				}
			 #mainBooks div>div>span>img{
				grid-column:1/span 2;
				width:130px;
				height:205px;
				margin-left:0vw;
				margin-top:7px;
				z-index:5;
			}
			#mainBooks div>div>span>article{
				display:grid;
				grid-row:2;
				grid-column:1;
				width:22vw;
				height:auto;
				overflow:hidden;
				background-color:#F6EAEA;
				color:#000;
			}
			#mainBooks div>div>span>h5{
				display:grid;
				grid-row:1;
				grid-column:2;
				width:10vw;
				font-size:10px;
				margin-left:-11vw;
				color:#000;
				line-height:5;
				padding-top:25vh;
				z-index:10;
			}
			#mainBooks div>div>span>h5>a{
				text-decoration:none;
				color:#FFF;
				text-align:center;
				line-height:1.5;
				width:15vw;
			}
			#mainBooks div>div>span>h5>a>center{
				font-size:23px;
				line-height:0.8;
				width:15vw;
			}
		#thisBook{
			margin-top:1vh;
		}
		#thisBook div{
			grid-template:1/1fr 1fr;
			width:95vw;
			grid-auto-flow:column;
			margin-left:5vw;
		}
			#thisBook div>img{
				width:30vw;
				height:80vh;
				margin-left:1vw;
			}
		
			#myListCreate{
				grid-template:1fr/40% 50%;
			}
			#listsToShow{
				width:55vw;
			}
			#listsToShow h3{
				font-size:0.8em;
			}
				#allListsFromuser a{
					font-size:0.8em;
					text-decoration:none;
				}
			
		#workOnListArea{
			width:40vw;
			grid-template:20vh 100vh/auto;
			grid-row-gap:8vh;
		}
			#topListArea{
				width:85vw;
				grid-template:5vh 5vh/20% 20% 20%;
				grid-row-gap:5vh;
			}
			#topListArea ul{
				display:grid;
				grid-column:1/span 3;
				list-style:none;
				height:30px;
			}
			#topListArea input[type="text"]{
				width:30vw;
				height:5vh;
			}
		#topListArea input[type="date"]{
			width:17vw;
			font-size:0.7em;
			grid-column:3;
		}
		#topListArea input{
			width:15vw;
			height:5vh;
			place-self:start;
			white-space:pre-wrap;
		}
		
		#booksShowingArea{
		width:50%;
		grid-template:auto/auto;
		margin-left:2vw;
		grid-row-gap:4vh;
		}
		  #booksShowingArea div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  grid-template:auto/20% 20% 20%;
			  grid-row-gap:1vh;
			  width:90vw;
			  height:auto;
			  border-radius:10px;
		  }
		  	#booksShowingArea div>div>div{
			  grid-template:auto/auto;
			  width:100px;
			  height:auto;
		  }
			#booksShowingArea div>div>span>img{
				width:85px;
				height:105px;
			}
				#booksShowingArea div>div>span{
					width:200px;
					background-size:85px 105px;
					background-position:6px 4px;
					white-space:pre-wrap;
				}
				#booksShowingArea div>div>span>a{
					font-size:0.7em;
					text-decoration:none;
					white-space:pre-wrap !important;
					overflow:hidden !important;
				}
	
#cartBox{
	width:98vw;
	height:100vh;
	top:0;
	left:-100vw;
	z-index:35;
	opacity:0;
}

	#cartBox #upperCartBox{
		height:15vh;
		grid-row:1;
		grid-template:15vh/80vw 15vw;
		grid-flow:column;
	}
		#cartBox #upperCartBox>article{
			width:70vmin;
			font-size:1em;
		}
		#cartBox #upperCartBox>a[href="#x"]{
			display:grid;
			width:10vmin;
		}
		
	#cartBox #cartTitle{
		position:relative;
		display:grid;
		grid-column:auto;
		grid-row:auto;
		margin-top:0em;
		jusify-self:start;
		grid-template:auto/auto;
		grid-flow:row;
		grid-template:auto/0vw 96vw;
		overflow:auto;
	}
		#cartTitle{
			position:relative;
			display:grid;
			grid-column:auto;
			grid-row:auto;
			margin-top:0em;
			grid-template:auto/auto;
		}
			#columnTitle{
				display:grid;
				height:0vh;
			}
			#proOnCart{
				position:relative;
				display:grid;
				height:auto;
				grid-column:auto;
				grid-row:auto;
				margin-top:0em;
				grid-template:repeate(1fr)/auto;
				grid-row-gap:1vh;
				grid-auto-rows:15vh;
			}
				#proOnCart>div{
					display:grid;
					grid-column:auto;
					grid-row:auto;
					height:15vh;
					width:96vw;
					grid-template:auto/15vw 10vw 10vw 15vw 15vw 10vw 10vw;
					grid-auto-flow:column;
					grid-auto-columns:10vw;
					background-color:#F2F2F2;
					align-self:start;
					justify-self:start;
				}
					#proOnCart>div>article{
						font-size:0.5em;
						overflow:hidden;
					}
					#proOnCart>div>img{
						width:15vmin;
						height:15vmin;
					}
					#proOnCart>div>input[type="button"]{
						width:10vmin;
						height:5vh;
						align-self:center;
						font-size:0.5em;
						border:none;
					}
					
					
					#proOnCart #cartSaveOrder{
					height:20vmin;
					width:96vmin;
					grid-template:auto/1fr;
					grid-auto-flow:row;
					grid-auto-columns:10vmin;
					background-color:#FFF;
				}

					
					#proOnCart #cartSaveOrder>input[type="button"]{
						width:30vmin;
						height:7vmin;
					}

#locationDetailBox{
	position:fixed;
	display:grid;
	visibility:hidden;
	grid-area:mainTitle;
	width:70%;
	height:70%;
	font-size:15px;
	text-align:center;
	top:1%;
	margin-left:10%;
	line-height:1;
}
#locationDetailBox h4{
	margin-top:em;
	font-size:15px;
}
#locationDetailBox textarea{
	width:64vw;
	height:35vh;
	margin-left:0.3em;
}