/*
      New Perspectives on HTML and CSS
      Module 7 Final Project
     

    
      Author: Brett Dayton
      Date:   5/20/2016

      	Filename: joinstyle.css
*/

/*Header Styles*/

header{margin-left: 140px;}

header nav { position: absolute;
			  left: 230px;
			   top: 220px;
				width: 70%;
				 z-index: 2;}

header nav ul li { display: block; 
					float: left; 
				     width: 12%;
					  margin: 0px 2px;
					   text-align: center;
					   -moz-border-radius: 20px;
   	                    -webkit-border-radius: 10px;
			              border: 4px outset;}

header nav ul li a { display: block;				 
					  width: 100%;
					   -moz-border-radius: 20px;
   	                    -webkit-border-radius: 10px;
					      background-color: #d3141c;
						   color: black;
						    font-size: 30px;
						     font-family: Impact, Charcoal, sans-serif;
						      font-variant: small-caps;}

header nav ul li a:hover { color: white;}

/*Body Styles*/

body { background-color: #090909;
	    width: 950px; 
	     margin: 0px auto; 
	      font-family: Arial, Helvetica, sans-serif;
		   font-variant: small-caps;
		    font-size: 25px;
	         color: #FFF;}
			 
h1 { margin-left: 155px;	
	  font-variant: small-caps;}
	  
/* Field set styles */

fieldset {background-color: #d3141c;
		   border: 1px solid #d3a93c;
		    margin-left: 180px;
             margin-bottom: 20px;
              width: 50%;}

legend {background-color: #d3a93c;
         color: white;
          padding: 3px 0px;
           text-indent: 5px;
            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%;}

/* Selection list styles */

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

/* Label styles */

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

/* Text area styles */

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

form p {text-align: center;
         margin-right: 70px;}

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

/* Validation Styles*/

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;}
						  
/*Article Sytles*/

article.story{ margin-right: 50px;}
						  
/*Footer Styles*/

footer { clear: both;
		  padding-top: 20px;
		   border-top: 2px solid #d3141c;
			font-size: 15px;
			 font-style: normal;  
			  text-align: center;}