/*
   Pigs With Wings II Style Sheet
   Author: John L. Kotos
   Date:   7/17/2015

   Filename:         pwwstyles.css
   Supporting Files: 

*/

/* Set style for body of pages */
	body {
		margin: 0px auto;
		padding: 0px;
		line-height: 1.5em;
		width: 100%;
		max-width: 1280px;
		min-width: 800px;
		font-family: Verdana, Geneva, sans-serif;
	}

/* Set style for header */
	header h4 {
		color: blue;
		text-align: center;
	}

/* Set style for top section that has images and main heading */
	#top {
		display: block;
		width: 100%;
		margin: 0px;
	}
	
	#top figure {
		display: block;
		width: 27%;
		padding: 0px;
		border: 0px;
		margin: 0px;
		float: left;
	}
	
	#top figure figcaption {
		text-align: center;
	}
	
	#top figure img {
		width: 100%;
		border-radius: 10px;
		float: left;
	}

	#top h1 {
		display: block;
		width: 46%;
		padding-top: 60px; 
		/* padding-bottom : 60px; */
		float: left;
		font-size: 2.5em;
		text-align: center;
		color: red;
	}

/* Set styles for navigation list */
	nav.horizontal {
		background-color: white;
		height: 70px;
		width: 100%;		
	}
		
	nav.horizontal li {
		background-color: white;
		font-size: 14px;
		height: 30px;
		line-height: 30px;	
		width: 150px;
		display: block;
		float: left;
		margin-top: 5px;
		margin-left: 5px;
		margin-right: 5px;
		text-align: center;	
	}

	nav.horizontal a {
		display: block;
		background-color: red;
		color: white;
			
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
			
		text-decoration: none; 
	}

	nav.horizontal li a:hover {
		background-color: rgb(255, 101, 101);
		color: black;
	}

	nav.horizontal li:first-of-type {
		margin-left: 4%;
	}

	nav.horizontal li:last-of-type {
		margin-right: 4%;
	}

/* Set style for clip section which is an aside and a video clip */
	#clip {
		display: block;
		width: 100%;
	}

	#clip h2 {
		display: block;
		font-size: 1.5em;
		text-align: center;
	}

	#clip aside {
		display: block;
		clear: left;
		float:left;
		width: 50%;
	}

	#clip aside p {
		background-color: rgb(0, 255, 255);
		display: block;
		margin: 10px;
		padding: 8px 20px;
		text-align: justify;
		
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
	}
	#clip article {
		display: block;
		float: left;
		width: 50%;
	}

	#clip article h3 {
		text-align: center;
	}

	video {
		display: block;
		margin: 5px auto;
		border-radius: 15px;	
	}

/* Sets styles for table section */
	caption {
		font-size: 1.5em;
		font-weight: bold;
		margin-bottom: 5px;
	}

	table {
		width: 50%;
		border: 2px solid blue;
		font-size: 1.0em;
		text-align: center;
		margin-top: 25px;
		margin-bottom: 25px;
	}
	
	table tr td {
		border: 2px solid blue;
	}
	
	.redCells {
		border: 2px solid red;
	}

/* Set style for middle section which is general text */
	#middle {
		display: block;
		width: 100%;
		clear: left;
	}

	#middle h2 {
		display: block;
		font-size: 1.5em;
		text-align: center;
	}

	#middle p {
		text-align: justify;
	}

/* Sets styles for Contact Us section */
	/* Fieldset syles */
	#contact fieldset {
		background-color: rgb(255, 246, 205);
		border: 1px solid red;
		float: left;
		margin: 10px 5px;
		width: 47%;
	}
	
	legend {
		background-color: red;
		color: white;
		padding: 3px 0px;
		/* text-indent: 5px; */
		text-align: center;
		width: 100%;
	}

	/* Label styles */
	label {
		clear : left;
		display: block;
		float: left;
		font-size: 0.9em;
		margin: 7px 4% 7px 5px;
		width: 40%;
	}
	
	/* Input control styles */
	input {
		display: block;
		float: left;
		font-size: 0.9em;
		margin: 7px 0px;
		width: 50%;
	}

	select {
		display: block;
		float: left;
		font-size: 0.9em;
		margin: 7px 0px;
	}

	/* Option button styles */
	#experience  label {
		margin-top: 20px;
		width: 50%;
	}
	
	#experience fieldset.optionGroup {
		width: 25%;
	}
	
	#experience fieldset.optionGroup label {
		display: inline;
		float: none;
		margin: 0px 0px 0px 10px;
	}
	
	#experience fieldset.optionGroup input {
		display: inline;
		float: none;
		margin: 0px 10px 0px 1px;
		width: 20px;
	}

/* Form and Selection button styles */
	form p {
		text-align: center;
	}
	
	input[type="submit"], input[type="reset"] {
		display: inline;
		float: none;
		height: 40px;
		width: 200px;
	}
	
/* Set style for bottom section which are images and disclaimer */
	#bottom {
		margin-top: 40px;
		margin-bottom: 40px;
		width: 100%;	
	}
	
	#bottom figure {
		display: block;
		width: 27%;
		padding: 0px;
		border: 0px;
		margin: 0px;
		float: left;
	}
	
	#bottom figure figcaption {
		text-align: center;
	}
	
	#bottom figure img {
		width: 100%;
		border-radius: 10px;
		float: left;
	}

	#bottom article {
		display: block;
		width: 46%;
		float: left;
	}

	#bottom article a {
		display: block;
		margin-top: 60px; 
		font-size: 1.0em;
		text-align: center;
		color: red;
	}

	#bottom article h6 {
		display: block;
		font-size: 0.5em;
		text-align: center;
		color: red;
		margin-bottom: 60px;
	}

/* Set style for footer which is school address */
	footer {
		clear: left;
		width: 100%;
		text-align: center;
		margin-top: 5px;
		margin-bottom: 50px;
	}