/*
   New Perspectives on HTML and CSS
   Final Project
   My Personality Style Sheet
   Author: Kayla Lambert
   Date:   03 19 2016
*/

/* Display HTML5 structural elements as blocks */

article, aside, figure, figcaption, footer, hgroup, header, 
section, nav {
   display: block;
}

/* Set the default page element styles */

body * {
   font-family: Calibri, Helvetica, Arial;
   font-size: 100%;
   line-height: 1.2em;
   margin: 0px;
   padding: 0px;
   text-decoration: none;
   vertical-align: baseline;
}

body {
   margin: 10px auto;
   width: 90%;
   min-width: 820px;
   max-width: 1400px;
   
}

header {
   background-color: white; 
   border-bottom: 1px solid rgb(81,105,165);
   width: 99%; 
}

header img {
   width: 300px;
   height: 125px;
}

/* Navigation Styles */
nav {
   background-color: rgb(121, 15, 166);
   float: left; 
   min-height: 600px;
   width: 15%;
   border-right: 2px solid purple;
}

nav ul {
   list-style-type: none; 
   padding-left: 3px;
   padding-top: 5px;
   margin-left: 15px;
}

nav ul li {
   font-size: 22px;
   padding-top: 5px;
   padding-bottom: 5px;
}

nav ul li a {
   color: white;
   text-decoration: none; 
}

nav ul li a:hover {
   color: blue;
}

/* Section Styles */

section {
   float: left; 
   min-height: 600px;
   width: 84%; 
   padding: 0x;
   background: -o-linear-gradient(white, rgb(121, 121, 232) 20%, white 80%);
   background: -ms-linear-gradient(white, rgb(121, 121, 232) 20%, white 80%);
   background: -moz-linear-gradient(white, rgb(121, 121, 232) 20%, white 80%);
   background: -webkit-linear-gradient(white, rgb(121, 121, 232) 20%, white 80%);
   background: linear-gradient(white, rgb(121, 121, 232) 20%, white 80%);
   border-right: 2px solid orange;
   border-bottom: 1px solid green;
}

section p {
   font-size: 20px;
   margin-right: 70px;
   margin-left: 8px;
   padding: 10px;
}

section img {
  margin-left: 150px;
  border-radius: 10%;
}

h2 {
  float: left;
  margin-left: 40px;
  font-size: 20px;
}

/* List Styles */

ul {
   float: left;
   margin-left: 48px;
   margin-top: 10px;
   font-size: 18px;
}

ul li {
 margin-top: 7px;
}

ol {
   float: left;
   margin-left: 48px;
   margin-top: 10px;
   font-size: 18px;
}

ol li {
 margin-top: 7px;
}
/* Table Styles */

table.types {
 margin-left: 250px;
}

/* Footer Styles */

footer {
   clear: left;
   text-align: center;
}

/* Form Styles */

fieldset {
   background-color: purple;
   float: left;
   margin: 10px 0px 10px 2.5%;
   width: 46%;
   color: white;
}

legend {
   background-color: blue;
   color: white;
   padding: 3px 0px;
   width: 100%
}

label {
   clear: left;
   display: block;
   float: left;
   font-size: 0.9em;
   margin: 7px 4% 7px 5px;
   width: 40%
}

input {
   display: block;
   float: left;
   font-size: 0.9em;
   margin: 7px 0px;
   width: 50%;
}

input#state {
   width: 50px;
}

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

fieldset.optionGroup {
   border-width: 0px;
}

textarea {
   display: block;
   font-size: 0.9em;
   float: left;
   height: 150px;
   margin: 10px 0px;
   width: 50%;
}

label.sliderLabel {
   clear: none;
   font-size: 0.7em;
   margin: 10px 0px;
   text-align: center;
   width: 10px;
}

input[type="range"] {
   width: 150px;
}

form p {
   text-align: center;
}

input[type="submit"], input[type="reset"] {
   display: inline;
   float: none;
   height: 40px;
   width: 200px;
}

input:focus, select:focus, textarea:focus {
   background-color: rgb(220, 255, 220)
}

input:focus:valid {
	background: rgb(220, 255, 220) url(go.png) bottom right no-repeat;

   -o-background-size: contain;
   -moz-background-size: contain;
   -webkit-background-size: contain;
   background-size: contain;
}

input:focus:invalid {
   background: rgb(255, 232, 233) url(stop.png) bottom right no-repeat;

   -o-background-size: contain;
   -moz-background-size: contain;
   -webkit-background-size: contain;
   background-size: contain;
}