/*
	Annette Emily Farah
	December 6, 2019
	Web 2010 WW1 - Web Design II: Web Fundamentals
	Instructor: Dr. Martha Merrill
	
	My Web Project: BookFind Web Design
	project.css
*/


/* ---------------------------------------------------------
   Desktop CSS 
   --------------------------------------------------------- */
#mobile 	{ 	display: none; 	}

#desktop 	{ 	display: inline;	}

* 			{ 	box-sizing: border-box; }

.grid-container	{	display: grid;
					grid-template-columns: auto auto auto auto auto auto auto;
					grid-gap: 2px;
					padding: 40px 2px 2px 2px;	
					font-size: 18px;	
					color: #FEE3A8;	}

.grid-container form	{ 	padding: 0;	
							margin: 0 auto;
							width: 50%;	}
					
.grid-container img	{	display: inline-block;
						height: 180px;
						width: 117px;	
						padding: 0;		
						margin: 0 1em;	}

.textsnippet	{	display: inline-block;
					width: 60%;	
					background-color: #F2F2F2;	
					background-image: linear-gradient(to bottom, rgba(118,60,48,0), rgba(118,60,48,1));
					border-radius: 15px 50px 30px 5px;
					padding: 0px 40px 0px 40px;	
					margin: 20px 70px 20px 70px;	
					text-align: left;
					font-size: 22px;
					font-weight: 600;	}

.cart		{	margin: 0 auto;	
				width: 80%;	
				padding: 0;	}

.cart form	{	padding: 0;	}

.formtext	{	margin: 0 auto;
				width: 30%;	
				text-align: center;	
				color: #FEE3A8;	
				text-shadow: 1px 1px #000000;	}

form		{	padding: 2em;	
				margin: 0 auto;	
				width: 40%;	
				color: #FEE3A8;	
				text-shadow: 1px 1px #000000;	}

label		{	float: left;
				display: block;	
				text-align: right;
				width: 8em;
				padding-right: 1em;	}
				
input,
textarea	{	display: block;
				margin-bottom: 1em;	}
				
#mySubmit	{	display: inline-block; margin-left: 9.5em; }
#myReset	{	display: inline-block;		}

/* Styles for page body: dark yellow background, black text */
body		{	background-color: #c8b781; 
				color: #000000;
				font-family: Calibri, Arial, sans-serif;	}

#wrapper	{	width: 95%;
				margin: auto;	
				background-color: #763C30;	/* semi dark brown*/
				max-width: 1280px;	}
				
/* Styles for header: dark yellow background, logo image on left */
header	{	background-color: #FED372;  /* dark yellow */
			background-image: url("BookFind_Logo.png");
			background-position: 2%;
			background-repeat: no-repeat;
			margin: auto;	}

h1		{	text-align: right;
			margin: auto;
			padding-right: 30px;
			padding-top: 10px;
			font-size: 70px;	
			font-family: 'Mystery Quest', 'Sofia', serif;
			letter-spacing: 8px;}

nav		{	width: 100%;
			margin: 0 auto;}
			
nav a	{	display: block;
			text-decoration: none; 	
			font-size: 22px;	
			border: 2px solid #000000;	
			background-color: #B43022;	} /* red/orange */
			
nav a:link 		{ 	color: #FEE3A8; }  	/* light yellow */
nav a:visited 	{ 	color: #FFFFFF; }	/* white  */
nav a:hover 	{ 	color: #00ff00; }	/* bright green */	

nav ul			{ 	list-style-type: none;	
					text-align: center;
					padding: 0px;	
					margin: 0;	}	
					
nav li			{	display: inline-block;	
					width: 12%;	
					margin: auto auto;}

main			{	padding-left: 2px;
					padding-right: 2px;	
					margin: 30px 0;
					display: block;	}

.browsetext		{	display: inline-block;
					width: 35%;	
					background-color: #F2F2F2;	
					background-image: linear-gradient(to bottom, rgba(118,60,48,0), rgba(118,60,48,1));
					border-radius: 15px 50px 30px 5px;
					padding: 0px 40px 0px 40px;	
					margin: 50px 70px 20px 70px;	
					text-align: left;
					font-size: 18px;
					font-weight: 600;	}
					
.pagetext		{	display: inline-block;
					width: 50%;	
					background-color: #F2F2F2;	
					background-image: linear-gradient(to bottom, rgba(118,60,48,0), rgba(118,60,48,1));
					border-radius: 15px 50px 30px 5px;
					padding: 20px 40px 20px 40px;	
					margin: 50px 60px 0px 20px;	
					text-align: left;
					font-size: 18px;}

.textheading 	{	text-align: center;
					font-weight: bold;
					font-size: 2em;	
					margin: 0 auto;	}
					
.floattable		{	display: inline-block; 
					width: 40%;	
					padding: 0;		
					margin: 0 40px 30px 0;	}
					
.textandtable	{	text-align: center;	}
					
table			{	margin: 0 auto;
					border-collapse: collapse;	
					width: 100%;	
					border: 2px solid #000000;}
					
caption			{	margin: 20px auto 10px auto;
					font-weight: bold;
					font-size: 200%;	
					color: #FEE3A8;	
					text-shadow: 2px 2px 20px #000000}
	
td, th			{	padding: 8px;	
					text-align: center;	}
tr				{ 	border: 2px solid #000000;	}
			
tr:nth-of-type(odd)		{	background-color: #F2F2F2;	}
tr:nth-of-type(even)	{	background-color: #FEE3A8;	}

/* Styles for Book Image Gallery -------------------------- */
.bookcovers img			{	display: inline-block;
							height: 200px;
							width: 130px;	
							padding: 0;		
							margin: 0 1em;	}							
a:hover .image			{ 	opacity: 0.3;}	
/* end of styles for Book Image Gallery ------------------- */

.bookinfo				{	display: inline-block;
							width: 50%;	
							background-color: #F2F2F2;	
							background-image: linear-gradient(to bottom, rgba(118,60,48,0), rgba(118,60,48,1));
							border-radius: 15px 50px 30px 5px;
							padding: 0px 40px 0px 40px;	
							margin: 50px 70px 20px 70px;	
							text-align: left;
							font-size: 18px; }
							
.bookinfo a				{	text-decoration: none;
							color: #FEE3A8;	}
							
.bookinfo a:link 		{ 	color: #FEE3A8; }  	/* light yellow */
.bookinfo a:visited 	{ 	color: #FFFFFF; }	/* white  */
.bookinfo a:hover 		{ 	color: #00ff00; }	/* bright green */

.floatcover  	{	float:left;
					margin: 20px 60px 20px 60px;						
					padding: 0 8px;
					border: none;
					width: 25%;	}
					
.floatcover p	{	padding: 0 0 0 15px;	
					margin: 0 0 10px 0px;	
					font-size: 120%;
					font-weight: 500; /*semi-bold*/
					letter-spacing: 1px;
					text-align: center;
					font-style: italic;	
					color: #FEE3A8;  /*lgt ylw*/	}
					
.floatcover img	{	border: 10px solid #F2F2F2;
					height: 520px;	}
					
.floatcover a	{	text-decoration: none;
					color: #FEE3A8;	}
					
.floatcover a:link 		{ 	color: #FEE3A8; }  	/* light yellow */
.floatcover a:visited 	{ 	color: #FFFFFF; }	/* white  */
.floatcover a:hover 	{ 	color: #00ff00; }	/* bright green */	

.row:after		{	content: "";
					display: table;
					clear: both;	}

footer			{	background-color: #071B06;
					font-size: 1em;
					font-style: italic;	
					text-align: center;	
					padding: 0.5em;	
					color: #FEE3A8;}
footer a		{	color: #FEE3A8;
					text-decoration: none;	}
footer a:link 		{ 	color: #FEE3A8; }  	/* light yellow */
footer a:visited 	{ 	color: #FFFFFF; }	/* white  */
footer a:hover 		{ 	color: #00ff00; }	/* bright green */	
					
header, nav, main, footer { display: block; }

/* ---------------------------------------------------------
   Tablet CSS 
   --------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
	body 		{	margin: 0px;
					padding: 0px;	}
					
	#wrapper	{	width: auto;
					min-width: 0px;
					margin: 0px;
					padding: 0px;	}
					
	h1			{	font-size: 3.5em;
					padding-top: 0.25em;
					padding-left: 2em;
					width: 85%;	
					text-align: center;	}					
					
	h2,p		{	padding: 0em 2em;	}
	main		{	margin: 0px; padding: 0px; font-size: 90%;	}
	
	.floatleft	{	float: none;
					width: auto;	}
					
	.floatcover	{	clear: both;	
					margin: 50px auto 0 auto;
					width: 100%;	
					text-align: center;	}
				
	.pagetext	{	text-align: left;	
					padding: 0;
					margin-left: 70px;
					margin-bottom: 30px; }
					
	.browsetext	{	margin: 50px;
					padding: 20px;
					width: 65%;	
					text-align: left;	
					font-size: 1.5em;}
					
	.floattable	{	margin-right: 0;	}
	
	.formtext	{	margin: 50px auto;
					width: 100%;	
					text-align: center;	
					font-size: 1.1em;}

	form		{	padding: 1em;	
					margin: 100px 150px 650px 150px;
					width: 100%;	
					font-size: 1.1em;}
					
	.grid-container	{	grid-template-columns: none;}

	.grid-container form	{ 	width: 10%;	
								margin-bottom: 75px;}
								
	.grid-container img	{	display: inline-block;
							height: 280px;
							width: 182px;	
							padding: 0;		
							margin: 0 1em;	}
							
	.cart		{	width: 100%;	}
	
	.cart form	{ 	width: 10%;	
					padding: 0;
					margin: 0 auto;}
					
	.bookinfo	{	margin: 30px;
					width: 90%;
					padding: 10px;}
}

/* ---------------------------------------------------------
   Mobile CSS 
   --------------------------------------------------------- */
@media only screen and (max-width: 760px) {
	header		{	background-image: url("BookFind_Logo_little.png");	
					height: 50px;	}
	
	h1			{	font-size: 2em;
					width: 100%;	
					text-align: center;	}

	nav a		{	display: block;
					padding: 0.1em;
					width: auto;
					margin: 0; }
				
	nav li		{	display: block;	 
					border-bottom: 1px #fef6c2;
					width: auto;}  

	main		{	padding-top: 0;	}
					
	footer		{	padding: 0.5em 0.5em 0.5em 1.2em;
					margin: 0;	}
	
	.floatleft	{	float: none;
					width: auto;	}					
	
	#mobile 	{ 	display: inline;	}
	#desktop 	{ 	display: none; 		}
	
	.floatcover img	{	height: 400px;	}
	
	.pagetext	{	margin: 50px auto 10px auto;	
					width: 90%;	
					text-align: left;}
					
	.floattable	{	margin: 20px auto;	
					padding: 0;
					width: 90%;	}
					
	.browsetext	{	margin: 50px auto 50px auto;
					padding: 0;
					width: 90%;	
					text-align: left;	
					font-size: 1.5em;}

	.bookcovers img			{	display: inline-block;
								height: 260px;
								width: 169px;	
								padding: 0;		
								margin: 0 1em;	}		

	.formtext	{	margin: 0 auto;
					width: 100%;	
					text-align: center;	
					font-size: 1.1em;}

	form		{	padding: 1em;	
					margin: 50px auto 120px auto;	
					width: 100%;	}

	label		{	font-size: 1.2em;}		

	.textsnippet	{	margin: 50px 0 50px 0;
						width: 100%; 
						padding: 0;
						text-align: left;}	
						
	.grid-container	{	grid-template-columns: none;}

	.grid-container form	{ 	width: 25%;	
								margin-bottom: 75px;}
								
	.cart	{	width: 100%;	}
	
	.cart form	{ 	width: 20%;	
					padding: 0;
					margin: 0 auto;}
					
	.bookinfo	{	margin: 30px;
					width: 90%;
					padding: 10px;}
}