/*   CONTENTS


0.... Media Queries

1.... Webpage defults

2.... Header and Main defaults

3.... NAV bar 

4.... Universal classes and containers

5.... Home Page

6.... Order Form

7.... Admin Form

8.... Footer

*/

/*....0.... Media Queries*/
	/*Media queryy for screens with a width greater than 1200px. */
	@media screen and (min-width: 1200px){
			
	/*Initial width of the wrap containers. */
		.wrap {
			width: 50%;
		}
	/*Initial margins of the paragraphs within the wrap containers. */	
		.wrap p {
			margin: 3%;
		}
	/*Initial margins of the Headings within the wrap containers. */	
		.wrap h2, .wrap h3 {
			margin-left: 3%;
		}
	/*Initial width of the box container used on the Credits page. */
		.box {
			width: 30%;
			margin-left: 35%;
			margin-right: 35%;
		}
	/*Initial setting for the navigation links. */	
		nav a {
			width: 19%;
			display: inline-block;
		}
	/*Inital setting for the list items within the Navigation menu. */
		nav li {
			display: inline;
		}
	/*Initial height of the navigation BAR. */
		nav {
			height: 40px;
		}
	/*Initial Margins of <main>*/
		main {
			margin: 0 auto;
		}
		
	}
	/*Media queryy for screens with a width smaller 1200px. */
	@media screen and (min-width: 600px) and (max-width: 1199px ){	

	/*No changes to this element from above query. */
		nav a {
			width: 19%;
		}
	/*No changes to this element from above query. */		
		nav {
			height: 40px;
		}
	/*No changes to this element from above query. */
		main {
			margin: 0 auto;
		}
	}
	/*Media queryy for screens with a width between 991px and 1200px. */
	@media screen and (min-width: 992px) and (max-width: 1199px ) {
		
	/**/

	/*No changes to this element from above query. */
		.wrap {
			width: 50%;
		}
	/*No changes to this element from above query. */
		.wrap p {
			margin: 3%;
		}
	/*No changes to this element from above query. */
		.wrap h2, .wrap h3 {
			margin-left: 3%;
		}
	/*Container increases in size to better fir smaller screen. */	
		.box {
			width: 40%;
			margin-left: 30%;
			margin-right: 30%;
		}
	}
	/*Media queryy for screens with a width smaller than 992px. */
	@media screen and (max-width: 991px ){
		
	/*Chnages from 50% to 100% width. */
		.wrap {
			width: 100%;
		}
	/*Margins change to match the wrapFullWidth class.*/
		.wrap p {
			margin: 1.5%;
		}
	/*Margins change to match the wrapFullWidth class. */
		.wrap h2, .wrap h3 {
			margin-left: 1.5%;
		}

	/*Container decreases in size to better fit smaller screen. */	
		.box {
			width: 50%;
			margin-left: 25%;
			margin-right: 25%;
		}
	}

/*....1.... Webpage defults*/

	/*Defaults*/
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			text-decoration: none;
		}
		body {
			background-color: white; 
			min-height: 100%;
		}


/*....2.... Header and Main defaults*/

	/*CSS for the header of each page*/
		header {
			max-width: 1400px;
			font-family: Arial;
			padding-top: 0px;
			background-color: white;
			margin: 0 auto;
		}  		


		
	/*CSS for the main body of each page to control the size + General styling of the page title.*/	
		main {
			max-width: 1400px;
			min-height: 1000px;
			max-height: 100%;
			padding-top: 0px;
			color: #071f3d;
			background-color: whitesmoke;
		}	
		header form {
			margin-top: 5px;
			margin-bottom: 5px;
		}
		
/*....3.... NAV bar*/

	/* Default styles for the Navigation menu */
		nav {
			list-style: none;
			text-align: center;
			background-color: #071f3d;
			font-family: Arial;
			text-decoration: none;
		}								
	/*List items for the Navigatin menu. */		
		nav li {
			font-size: 22px;
			max-width: 1400px;
			display: inline;
		}	
	/*Links for the Navigation menu. */
		nav a{
			display: inline-block;
			text-decoration: none;
			color: white;
			padding-top: 7px;
			padding-left: 5px;
			padding-right: 5px;
			height: 33px;
			transition: 0.3s;
		}	
	/*Colour of navigation links after they have been clicked. */
		nav a:visited {
			text-decoration: none;
			color: White;
		}	
	/*Colour of navigation links when focused*/
		nav a:focus { 
			color: white;
		}
	/*Hover effect for navigation links*/
		nav a:hover {
			background-color: #bbdbfe;
			color: #071f3d;
			font-weight: bold;
		}
		
		
		
/*....4.... Universal classes and containers*/


	/*Container class used within the main section that contains ALL other elements. 
		This is the PARENT container and should be used within <main> on all pages. */	
		.inner {
			max-width: 1400px;
			height: 100%;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			font-family: arial;
			padding-bottom: 20px;
			padding-left: 15px;
			padding-right: 15px;
			justify-content: space-evenly;
		}
		

	/*Margin(top) for all paragraphs Within the "Inner" container. */
		.inner p {
			margin-top: 5px;
		}
	/*Container class for the page H1 HEADING. */
		.title {
			width: 100%;
			display: table;	
			margin-top: 30px;
			margin-bottom: 40px;
		}				
	/*Sizing and styling for the page H1 HEADING. */
		.title h1 {
			display: table-cell;
			text-align: center;
			font-size: 35px;
			border-radius: 15px;
			letter-spacing: 1px;
			color: black;
			font-family: arial;
		}								
	/*Sub-container used for text elements and images on the hoe page on credits page. 
		Margins are controlled by media queries. */		
		.wrap {
			height: 100%;
		}
	/*Main heading for each sub-container. Margins are controlled by media queries.  */
		.wrap h2 {
			padding-bottom: 5px;
			margin-top: 20px;
		}
	/*Size and Margin for the H3 tag within each "wrap" class. */
		.wrap h3 {
			margin-top: 20px;
			font-size: 20px;
		}
	/*Sub-container class that spans the whole length of its parent container at ALL times. */
		.wrapFullWidth {
			width: 100%;
			height: 100%;
		}
	/*FONT-SIZE and MARGINS for the H2 tags within the "wrapFullWidth" container. */
		.wrapFullWidth h2 {
			padding-bottom: 5px;
			margin-left: 1.5%;
			font-size: 24px;
			margin-top: 20px;
		}
	/*FONT-SIZE and MARGINS for the H3 tags within the "wrapFullWidth" container.*/
		.wrapFullWidth h3 {
			font-size: 20px;
			margin-left: 1.5%;
			margin-top: 20px;
		}
	/*Centers the H2 headings within the"box" , "wrapFullWidth" and "wrap" containers on the "Credits" page. */
		.center {
			text-align: center;
		}	
	/*MARGINS for paragraphs within the "wrapFullWidth" container. */
		.wrapFullWidth p {
			margin: 1.5%;
			margin-top: 5px;
		}
	/*Container class with colour styling for text on the Credits. */
		.box {
			border-style: solid;
			border-color: black;
			border-width: 3px;
			background-color: #e7ecf3;
			padding-bottom: 15px;
		}
		
		
/*....5.... Home Page*/

	#offers {
		width: 50%;
	}
	.offersTitle h1{
		margin: 10px;
	}

/*....6.... Order Form*/

	.item {
		margin: 10px;
	}
	#checkCost, #collection, #placeOrder  {
		margin: 10px;
	}
	#orderToys h2 {
		margin: 10px;
	}
	
/*....7.... Admin Form*/


	.adminText p {
		margin-top: 40px;
		font-size: 20px;
	}
	#UpdateToy {
		margin: 10px;
		font-family: arial;
	}
	#UpdateToy h1{
		font-family:arial;
		margin: 10px;
	}
	#UpdateToy input, select {
		margin-top: 5px;
	}
	.toy {
		margin: 10px;
		font-family: arial;
		color: #071f3d;
		border-style: solid;
		border-width: 5px;
		border-color: #071f3d;
		padding: 5px;
	}
	.toy a{
		font-size: 20px;
	}
	.toy h2 {
		margin: 3px;
	}
	
	.toy h3 {
		margin: 3px;
	}
	.toy p {
		margin: 3px;
	}
	#UpdateToy {
		max-width: 75%;
	}
	.formTitle {
		margin: 10px;
	}
	.toyNameField {
		max-width: 100%;
	}
/*....8.... Footer*/

	/*Size, colour and position of the footer. */
		footer {
			position: absolute;
			height: 120px;
			width: 100%;
			background-color: #071f3d;
			font-family: Arial;
			text-align: center;
		}								
	/*Position and colour of the text within the footer. */
		footer p {
			text-align: center;
			color: white;
			font-weight: normal;
		}
	/*margin to get Footer text to sit at the bottom. */	
		footer div {
			margin-top: 97px;
		}


		
/*.....END.....*/