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

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


#allContain{
	grid-template:auto/auto;
	width:100vw;
	row-gap:0.01vh;
	font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	overflow-x:hidden;
}
	#topTitle{
		display:grid;
		grid-column:auto;
		grid-row:1;
		width:100vw;
		height:15vh;
		margin-left:0px;
		grid-template:7vh 8vh/41% 35% 15%;
		grid-column-gap:3em;
		grid-auto-flow:column;
	}
		#topTitle h1{
			grid-column:1;
			grid-row:1;
			font-size:30px;
			white-space:nowrap;
			text-indent:2em;
		}
		#topTitle a{
			grid-column:auto;
			grid-row:2;
			margin-left:-130vw;
			margin-top:0vh;
			font-size:0.5em;
			color:#fff;
			line-height:4;
		}
			#topTitle a>img{
				margin-top:-8.2vh;
				margin-left:145.5vw;
				width:7vw;
				height:5vh;
				z-index:2;
			}
		#topTitle a>i{
			position:relative;
			font-size:1.2em;
			margin-top:-4vh;
			margin-left:147vw;
		}

	#topLinks{
		grid-row:2;
		width:auto;
		height:5vh;
		grid-template:auto/150px 150px 150px;
		margin-left:0px;
		margin-top:0vh;
		background-color:#8CD0E3;
		padding-left:1%;
		grid-template:1fr/23% 23% 20%;
	}
	 #topLinks a{
		 font-size:1.2em;
		 text-decoration:underline;
		 color:#FFF;
		 margin-left:1em;
		 width:40vw;
		 line-height:2.5;
	 }
	#allMainArea{
		grid-row:3;
		width:100vw;
		height:80vh;
		grid-template:auto/100vw;
		text-align:justify;
	}
	#allMainArea{
		display:grid;
		grid-column:auto;
		grid-row:3;
		width:100vw;
		height:80vh;
		grid-template:auto/100vw;
	}
	 #allMainArea h2{
		  color:#000;
		  font-size:1.8em;
		}
		#leftWing{
			grid-column:1;
			grid-row:2;
			width:100vw;
			height:auto;
			margin-left:1vw;
			grid-template:auto auto/50vw 50vw;
			grid-row-gap:10vh !important;
			grid-column-gap:1vw;
		}

			#leftWing>div:nth-child(1), #leftWing>div:nth-child(2), #leftWing>div:nth-child(3), #leftWing>div:nth-child(4), #leftWing>div:nth-child(5){
				width:50vw;
				background-color:#FFF;	
				overflow:auto;
				text-align:center;
				grid-template:30vh auto 4vh 10vh/35vw;
				justify-content:start;
				align-content:flex-start;
			}
			#leftWing>div:nth-child(4){
				grid-column:1;
				grid-row:2;
				height:70vh;
				width:40vw;
				margin-top:10vh;
			}
			#leftWing>div:nth-child(4)>img{
					grid-column:1;
					grid-row:1;
					width:35vw;
					height:25vh;
			}
			#leftWing>div:nth-child(4)>h2{
					display:grid;
					grid-column:1;
					grid-row:2;
					font-size:18px;
					align-self:flex-start;
				}
			#leftWing>div:nth-child(5){
				grid-column:2;
				grid-row:2;
				height:70vh;
				width:40vw;
				margin-top:10vh;
			}
			#leftWing>div:nth-child(5)>img{
					grid-column:1;
					grid-row:1;
					width:35vw;
					height:25vh;
				}
			#leftWing>div:nth-child(5)>h2{
					display:grid;
					grid-column:1;
					grid-row:2;
					font-size:18px;
					align-self:flex-start;
				}
			#leftWing>div:nth-child(1){
				grid-column:1;
				grid-row:1;
				height:auto;
				width:40vw;
				margin-top:1vh;
			}
			#leftWing>div:nth-child(1)>img{
					grid-column:1;
					grid-row:1;
					width:35vw;
					height:25vh;
			}
			#leftWing>div:nth-child(1)>h2{
					display:grid;
					grid-column:1;
					grid-row:2;
					font-size:18px !important;
					margin-top:5vh;
					margin-bottom:2vh;
					align-self:flex-start;
				}
			#leftWing>div:nth-child(1)>center>a{					
					background-color:#e3f6fa;
					color:#000;
					width:40vw !important;
					height:4vh;
					text-align:center;
					text-decoration:none;
					font-size:1.5em;
					align-self:flex-start;
				}

		 #leftWing>div:nth-child(2){
				grid-column:2;
				grid-row:1;
				height:auto;
				width:40vw;
				margin-top:1vh;
		}
		#leftWing>div:nth-child(2)>img{
					grid-column:1;
					grid-row:1;
					width:35vw;
					height:25vh;
					justify-self:center;
			}
			#leftWing>div:nth-child(2)>h2{
					display:grid;
					grid-column:1;
					grid-row:2;
					font-size:18px !important;
					margin-top:5vh;
					margin-bottom:2vh;
					align-self:flex-start;
				}
			#leftWing>div:nth-child(2)>center>a{				
					display:grid !important;
					width:40vw !important;
					text-align:center;
					font-size:1.5em !important;
					margin-left:1vw;
					align-self:flex-start;
				}
				#leftWing>div:nth-child(2)>center{
					margin-left:2vw !important;
					font-size:20px;
				}

				#leftWing>div:nth-child(1)>h3, #leftWing>div:nth-child(2)>h3, #leftWing>div:nth-child(3)>h3, #leftWing>div:nth-child(4)>h3, #leftWing>div:nth-child(5)>h3{
					grid-column:1;
					grid-row:3;
					font-size:14px !important;	
					align-self:flex-start;
					margin-bottom:2vh;
					text-align:center !important;
					color:#000;			
				}
				#leftWing>div:nth-child(1)>center, #leftWing>div:nth-child(2)>center, #leftWing>div:nth-child(3)>center, #leftWing>div:nth-child(4)>center, #leftWing>div:nth-child(5)>center{
					grid-column:1;
					grid-row:8;
					line-height:1;
					margin-left:1vw;
					font-size:14px;
					align-self:flex-start;
				}
				#leftWing>div:nth-child(1)>center>h3, #leftWing>div:nth-child(2)>center>h3, #leftWing>div:nth-child(3)>center>h3, #leftWing>div:nth-child(4)>center>h3, #leftWing>div:nth-child(5)>center>h3{
					font-size:1em;
					color:#C72629;
				}
				 #leftWing>div:nth-child(1)>center>a, #leftWing>div:nth-child(2)>center>a, #leftWing>div:nth-child(3)>center>a, #leftWing>div:nth-child(4)>center>a, #leftWing>div:nth-child(5)>center>a{					
					background-color:#e3f6fa;
					color:#000;
					text-align:center;
					text-decoration:none;
					font-size:1.5em;
					align-self:flex-start;
				}
						
			
		#righWing{
			display:grid;
			grid-column:1;
			grid-row:1;
			width:99vw;
			height:80vh;
			margin-top:-4vh;
			grid-template:1fr/99vw;
		}
			#firstCol, #secondCol, #thirdCol{
				display:grid;
				grid-row:1;
				height:470px;
				overflow:hidden;
			}
			#firstCol{
				grid-column:1;
				grid-template:100%/100% 100% 100%;
			}
				
				#rightTop, #rightMiddle, #rightBottom{
					display:grid;
					grid-template:100%/30vw 68vw;
					grid-auto-flow:column;
				}
				#rightTop{grid-column:1;}
				#rightMiddle, #rightBottom{grid-column:2;}
				#rightBottom{grid-column:2;}
				
				#rightTop{
					grid-row:1;
				}
					#rightTop img, #rightMiddle img, #rightBottom img, #middleTop img, #middleBottom img, #firstRow img, #secondRow img, #thirdRow img, #fourthRow img{
						grid-column:1;
						width:120%;
						height:45%;
						margin-left:0.1em;
						transition: all 1s ease-out;
						margin-top:8em;
						z-index:5;
					}
					#rightTop p, #rightMiddle p, #rightBottom p, #middleTop p, #middleBottom p, #firstRow p, #secondRow p, #thirdRow p, #fourthRow p{
						grid-column:2;
						width:105%;
						height:auto;
						margin-left:-1em;
						margin-top:2%;
						background-color:#e3f6fa;
						transition: all 1s ease-out;
						z-index:2;
						padding-left:20%;
						padding-top:10%;
					}
						#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:80%;
							text-align:justify;
							overflow:hidden;
						}
				#rightMiddle{
					grid-row:1;
				}
					
				#rightBottom{
					grid-row:1;
				}
			#secondCol{
				grid-column:1;
				grid-template:100%/100% 100% 100%;
			}
				#middleTop, #middleBottom{
					display:grid;
					grid-template:100%/30vw 68vw;
					grid-auto-flow:column;
				}
				#middleTop{
					grid-column:2;
					grid-row:1;
				}
				#middleBottom{
					grid-column:2;
					grid-row:1;
				}
									
			#thirdCol{
				grid-column:1;
				grid-template:100%/100% 100% 100%;
			}
				#firstRow, #secondRow, #thirdRow, #fourthRow{
					display:grid;
					grid-template:100%/30vw 58vw;
					grid-auto-flow:column;	
				}
				#firstRow{
					grid-column:2;
					grid-row:1;
					transition: all 1s ease-out;
				}
				#secondRow{
					grid-column:2;
					grid-row:1;
				}
				#thirdRow{
					grid-column:2;
					grid-row:1;
				}
				#fourthRow{
					grid-column:2;
					grid-row:1;
				}
				
	#footerArea{
		display:none;
	}
		#mainBooks{
		margin-top:1vh;
		grid-row-gap:5vh;
		}
		#mainBooks #loadingMessage{
			display: grid;
			grid-column:1/span 2;
			font-size: 1em;
			text-indent: 25vw;
			width: 2vw;
			height: 15vh;
			margin-top: -1vh;
		}		
		  #mainBooks div{
			  height:auto;
			  border-radius:10px;
			  grid-template:auto/1fr 1fr;
		  }
		  #mainBooks div>div{
			  grid-row:auto;
			  grid-template:auto/1fr 1fr;
			  width:250px;
			  margin-left:-0.5vw;
		  }
		  	#mainBooks div>div>div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  grid-template:auto/1fr 1fr;
			  border:#FFF thick solid;
			  border-radius:0px;
			  border-bottom:#D8C3C3 thick solid;
			  background:linear-gradient(to bottom, #FFF 10%, #FFF);
			  width:48vw;
		  }
				#mainBooks div>div>span{
					display:grid;
					grid-template:auto 30vh/22vw 20vw;
					width:300px;
					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:0.3vw;
				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:2;
				grid-column:2;
				width:15.5vw;
				overflow:hidden;
				margin-left:-1vw;
				font-size:0.7em;
				color:#000;
				word-wrap:break-word;
				line-height:2;
				padding-top:2vh;
			}
			#mainBooks div>div>span>h5>a{
				text-decoration:none;
				color:#FFF;
				text-align:left;
				line-height:1.5;
				padding-top:2vh;
				word-break:break-strick;
				width:15vw;
			}
			#mainBooks div>div>span>h5>a>center{
				font-size:2em;
				line-height:0.8;
				text-align:left;
				width:15vw;
			}
	#thisBook{
		display:grid;
		grid-template:auto/1fr;
		height:auto;
	}
		#thisBook div{
			display:grid;
			grid-column:auto;
			grid-row:auto;
			grid-template:1/25vw 30vw 20vw;
			max-height:300px;
			width:98vw;
			grid-auto-flow:column;
			grid-column-gap:2vw;
			margin-left:1vw;
			grid-auto-columns:30vw;
		}
			#thisBook div>img{
				display:grid;
				grid-column:auto;
				grid-row:auto;
				width:25vw;
				height:30vh;
				margin-left:1vw;
			}
			#thisBook div>div{
				grid-column:auto;
				grid-row:auto;
				width:auto;
				margin-left:2vw;
				justify-self:center;
				text-align:center;
				grid-template:auto/auto;
			}
			#thisBook div>div>h1{
				display:grid;
				grid-column:auto;
				grid-row:1;
				width:auto;
				margin-left:2px;
				text-align:center;
				font-size:2em;
			}
			#thisBook div>div>h3{
				display:grid;
				grid-column:auto;
				grid-row:2;
				margin-left:5vw;
			}
			#thisBook div>article{
				display:grid;
				grid-column:1/span 3;
				grid-row:5;
			}
				#thisBook div>a{
					display:grid;
					grid-column:auto;
					grid-row:4;
					margin-left:35%;
					width:40%;
					justify-self:end;
				}
					#thisBook div>a>img{
						width:50px;
						height:50px;
					}
				#thisBook #includeToCart{
					font-size:1.2em;
					text-decoration:none;
					color:#fff;
					background-color:#F76725;
					border-radius:90%;
					width:90px;
					height:70px;
					padding-top:13px;
					text-align:center;
				}
			
			
	#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/20% 20% 20%;
				grid-row-gap:2vh;
			}
			#topListArea ul{
				display:grid;
				grid-column:1/span 3;
				list-style:none;
				height:40px;
			}
			#topListArea input[type="text"]{
				width:30vw;
				height:5vh;
			}
		#topListArea input[type="date"]{
			width:27vw;
			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/40% 1fr;
			  grid-row-gap:1vh;
			  width:80vw;
			  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;
}


    #leftWing{
			grid-column:1;
			grid-row:2;
			width:100vw;
			height:auto;
			margin-left:2vw;
			grid-template:47vh 40vh/50vw 30vw;
			grid-row-gap:1vh;
		}
		#leftWing>div:nth-child(1){
			grid-column:1;
		}
			#leftWing>div:nth-child(1), #leftWing>div:nth-child(2){
				grid-column:1;
				grid-row:1/span 2;
				width:47vw;
				height:87vh;
				overflow:auto;
				grid-template:31vh auto/21vw 25vw;
				grid-auto-flow:dense;
			}
				#leftWing>div:nth-child(1)>img, #leftWing>div:nth-child(2)>img{
					grid-column:1/span 2;
					grid-row:1;
					width:40vw;
					height:30vh;
				}
				#leftWing>div:nth-child(1)>h2, #leftWing>div:nth-child(2)>h2{
					display:grid;
					grid-column:1/span 2;
					grid-row:auto;
					font-size:1em;
					word-break:break-strict;
				}
				#leftWing>div:nth-child(1)>h3, #leftWing>div:nth-child(2)>h3{
					grid-column-end:span 2;
					grid-row:auto;
					font-size:12px;
					text-align:left;
				}
				#leftWing>div:nth-child(1)>center, #leftWing>div:nth-child(2)>center{
					grid-column:1/span 2;
					grid-row:auto;
				}
				#leftWing>div:nth-child(1)>center>a{
					width:15vw;
				}
			
		#leftWing>div:nth-child(2){
			grid-column:2;
		}
			#leftWing>div:nth-child(2)>center>a{
				display:none;
			}
				
			#leftWing>div:nth-child(3){
				display:none;
			}