@charset "UTF-8";
/* CSS Document */

  html{ 
  	  height: 100%;
	  width: 100%;
}
		
		
        body {
            background-image: url("light_textured_backround.jpg");/*http://www.momorialcards.com/texturebackgrounds.html is where I found the background*/
			background-size: 100%;
			
	    }
		
		header {
			width: 96%;
            margin: 2%;
			clear: both;
		}
		
		header #logo {
			width: 600px;
			height: auto;
			float: left;
			margin: auto;
		}
		
		header img {
            float: left;
            width: 50%;
        }
		
        header nav {
            float: right;
            width: 50%;
			float: right;
			clear: right;
        }
		
		header nav ul li{
    	list-style: none;
    	display: block;
    	float: left;
    	margin: 20px;
		}

		header nav ul li a{
   		text-decoration: none;  
    	font-family: 'Open Sans', sans-serif;
    	font-size: 20px;
		color: black;
		}
		
		li {
		list-style: none;	
			}
		
		a {
			text-decoration: none;
			font-family: 'Open Sans', sans-serif;
			color: brown;
		}
		
		a:hover {
		color: #B9B9B9;	
			}
		
		header nav ul li a:hover{
    	color: #B9B9B9;
		}
		
		header div h1 {
			font-family: 'Open Sans', sans-serif;
			font-size: 50px;
			color: brown;
			float: right;
			clear: both;
			margin-top: -25px;
		}
		 /*Breadcrumbs*/
		#breadcrumbs {
			float: left;
			font-family: 'Open Sans', sans-serif;
			font-size: 15px;
			
			}
			
		#breadcrumbs a {
			text-decoration: none;
			color: brown;
			}
			
		#breadcrumbs a:hover {
			color: #B9B9B9;
			}
		
		/*Login Columns*/
		#container {
            width:96%;
            margin: 2%;
			
		}
		   
		#colLeft{
            float:left;
            width:56%;
			height: auto;
			margin: 2%
		}
		
#colRight{
            width:36%;
			height: auto;
			margin: 2%;
            float:left;
         }

fieldset {
	color: black;
	background-color: rgba(255,255,255,0.5);
	 border-radius: 13px;
	 border-color: brown;
	 border-size: 4px;
	
	}

legend {
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	color: brown;
	}

label {
	font-family: 'Open Sans', sans-serif;
	
	}
	
	input {
		margin: 2%;
		border-radius: 5px;
		background-color: rgba(255,255,200,0.5);
		
		}
	input[type=text], textarea {
		font-size: 12px;
		font-family: 'Open Sans', sans-serif;
		border-radius: 5px;
		}
		
	textarea {
		margin-left: 2%;
		background-color: rgba(255,255,200,0.5);
		}
	
	/*I received help coding this below from css3buttongenerator.com*/
	input[type=submit], [type=reset] {
		font-family: 'Open Sans', sans-serif;
		font-size: 15px;
		color: white;
		background: #540000;
 		background-image: -webkit-linear-gradient(top, #540000, #000000);
  		background-image: -moz-linear-gradient(top, #540000, #000000);
  		background-image: -ms-linear-gradient(top, #540000, #000000);
  		background-image: -o-linear-gradient(top, #540000, #000000);
  		background-image: linear-gradient(to bottom, #540000, #000000);
		 -webkit-border-radius: 13px;
 		 -moz-border-radius: 13px;
  		border-radius: 13px;
		padding: 10px 15px 10px 15px;
		
	}
	
	input[type=submit]:hover {
  	background: #e0e000;
  	text-decoration: none;
		
		
		}

		
h1 {
			text-align:center;
			font-family: 'Open Sans', sans-serif;
			font-size: 50px;
		}
		
		
h2 {
			text-align: left;
			font-family: 'Open Sans', sans-serif;
			font-size: 15px;
			color: brown;
		}
		
p {
            text-align: left;
			font-family: 'Open Sans', sans-serif;
		}
		
.clear {
			clear: both;
		}
		
		
 #footer {
            clear:both;
            text-align:center;
			font-family: 'Open Sans', sans-serif;
			
        }
		
/*Media Queries*/
        @media screen and (max-width: 960px) {
            header img {
                width: 40%;
            }
            header nav {
                width: 60%;
            }
        }

        /*Tablets*/
        @media screen and (max-width: 758px) {
            header img {
                float: none;
                width: 100%;
            }
            header nav {
                float: none;
                width: 100%;
            }
        }

        /*Phones*/
        @media screen and (max-width: 524px){
#colLeft{
            float:none;
            width: auto;
			margin: auto;
		}
		
#colRight{
            float: none;
			width: auto;
			margin: auto;
         }

        }