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

#signInBox article{
	font-size:0.8em;
}

#signUpBox{
	position:absolute;
	display:block;
	visibility:hidden;
	grid-area:mainTitle;
	width:70%;
	height:70%;
	top:12.3%;
	margin-left:10%;
	line-height:1;
	grid-row-gap:10px;
}
#signUpBox article{
	font-size:0.5em;
	margin-top:1.5em;
}
#signUpBox input[type="text"], #signUpBox input[type="password"]{
	margin-top:0.5em;
}




#allContain{
	grid-template:auto/auto;
	width:100vw;
	row-gap:0vh;
	font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
}
	#topTitle{
		display:grid;
		grid-column:auto;
		grid-row:1;
		width:70vw;
		height:8vh;
		font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
		font-size:1em;
		margin-left:1vw;
		grid-template:5vh 5vh/15% 40% 30%;
		grid-column-gap:5vw;
		grid-auto-flow:row dense;
	}
		#topTitle h1{
			display:grid;
			grid-column:1;
			grid-row:1;
			font-size:20px;
			color:#16DC00;
			white-space:nowrap;
		}
		#topTitle a{
			grid-column:3;
			grid-row:auto;
			color:#16DC00;
			font-size:0.7em;
			white-space:nowrap;
			line-height:0;
			margin-top:-1em;
		}

	#topLinks{
		grid-column:auto;
		grid-row:2;
		width:100vw;
		height:7vh;
		margin-left:0vw;
		background-color:#7B76F3;
		grid-template:1fr/30% 30% 20%;
	}
	 #topLinks a{
		 font-size:1.2em;
		 text-decoration:underline;
		 color:#FFF;
		 margin-left:2em;
		 width:60vw;
		 line-height:1;
		 font-size:0.9em;
	 }
	#allMainArea{
		grid-row:3;
		width:100vw;
		height:80vh;
		grid-template:auto/100vw;
	}
		#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;
				margin-top:1em;
			}
				#leftWing h3{
					text-align:center;
					color:#FF8F13;
					font-size:40px;
				}
		#righWing{
			display:grid;
			grid-column:1;
			grid-row:1;
			width:100vw;
			height:46vh;
			grid-template:1fr/auto auto auto;
		}
			#firstCol, #secondCol, #thirdCol{
				display:grid;
				grid-row:1;
				height:10em;
			}
						#rightTop img, #rightMiddle img, #rightBottom img, #middleTop img, #middleBottom img, #firstRow img, #secondRow img, #thirdRow img, #fourthRow img{
						transform:perspective(200px) rotateX(15deg);
						margin-left:0.6em;
					}
					#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;
			  width:250px;
			  margin-left:1vw;
		  }
		  	#mainBooks div>div>div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  grid-template:auto/1fr 1fr;
			  width:215px;
		  }
		  		#mainBooks div>div>span>img{
					width:135px;
					height:205px;
					margin-left:2vw;
					margin-top:7px;
					z-index:5;
				}
				#mainBooks div>div>span{
					width:200px;
					background-image:url(images/books/bookshape.png);
					background-repeat:no-repeat;
					background-size:140px 210px;
					background-position:5px 2px;
					z-index:10;
				}
			#mainBooks div>div>span>article{
				display:inline-block;
				margin-left:1em;
				width:20%;
				height:auto;
				white-space:pre-wrap;
				font-size:0.5em;
				vertical-align:top;
			}
		#thisBook{
			margin-top:1vh;
		}
		#thisBook div{
			grid-template:1/1fr 1fr;
			width:95vw;
			grid-auto-flow:column;
			margin-left:5vw;
		}
			#thisBook div>img{
				width:35vw;
				height:30vh;
				margin-left:1vw;
			}
			#thisBook div>h1{
				display:grid;
				grid-column:1/span 2;
				margin-left:5vw;
				font-size:2em;
			}
			#thisBook div>h3{
				display:grid;
				grid-column:1/span 2;
				margin-left:5vw;
			}
			#thisBook div>article{
				display:grid;
				grid-column:1/span 2;
				text-align:justify;
				width:90%;
			}
			
	#myListCreate{
		grid-template:1fr/35% 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;
		}
			#topListArea{
				width:85vw;
				grid-template:5vh 5vh 2vh 5vh/20% 20% 20%;
				grid-row-gap:2vh;
				grid-auto-flow:row dense;
			}
			#topListArea ul{
				display:grid;
				grid-column:1/span 3;
				list-style:none;
				height:20px;
			}
				#topListArea ul li{
					overflow:visible;
					line-height:0.1;
				}
			#topListArea input[type="text"]{
				width:55vw;
				height:5vh;
				font-size:1em;
				margin-top:1em;
			}

		#topListArea input[type="date"]{
			width:55vw;
			font-size:0.7em;
			grid-column:1;
			margin-top:1.4em;
		}
		#topListArea input{
			width:45vw;
			height:6vh;
			place-self:start;
			white-space:pre-wrap;
			margin-top:1.5em;
			grid-column:1;
			grid-row:auto;
		}
		
		#booksShowingArea{
		width:50%;
		grid-template:auto/auto;
		margin-left:2vw;
		margin-top:2em;
		grid-row-gap:4vh;

		}
		  #booksShowingArea div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  grid-template:auto/40% 1fr;
			  grid-row-gap:1vh;
			  grid-column-gap:1.3vw;
			  width:80vw;
			  height:auto;
			  border-radius:10px;
			  margin-left:-2vw;
		  }
		  	#booksShowingArea div>div>div{
			  grid-template:auto/auto;
			  width:77px;
			  height:auto;
		  }
			#booksShowingArea div>div>span>img{
				width:65px;
				height:105px;
			}
				#booksShowingArea div>div>span{
					width:150px;
					background-size:65px 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;
}