/* website.css*/
/* sets the fonts styles for the header, nav bar and paragraphs on different pages*/
header{
	background-color: black;
	font-family: futura-pt, Arial, Helvetica, sans-serif;
	font-size: 14px
}

header nav{
	background-color: black;
	font-family: futura-pt, Arial, Helvetica, sans-serif;
	font-size: 16px
}

header nav li{
	display: inline;
	font-size: 16px;
	font-weight: bold;
	margin-right: 10px
}

header nav li a{
	color: white;
}

h1{
	font-size: 50px;
	font-weight: bold;
	color: white;
	position: relative;
	left: 50%;
}

#shop-text p{
	text-align: center;
	font-size: 50px;
	font-weight: bold;
	color: white;
	margin-top: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
	text-shadow: 5px 5px 2px #000,
		-1px -1px 0 #808080,
		1px -1px 0 #808080,
		-1px 1px 0 #808080,
		1px 1px 0 #808080;
	font-family: futura-pt, Arial, Helvetica, sans-serif;
}
/* sets the banner position color and size */
#banner{
	position: relative;
	top: 10px;
	left: 0px;
	right: 0;
	width: 100%;
	height: 215px;

}
/* logo position, background color and size */
.container > div {
	background-color: black;
	display: inline;
    padding: 5px;
}
/* position for logo and text underneath*/
#logo, #text {
    float: left;
}
/* styling for the navigation bar links*/
#mainNav{
	float: left;
	clear: left;
	position: absolute;
	bottom:0;
	left:0;
}

#mainNav ul{
	padding: 0px;
}

#mainNav li{
	list-style-type: none;
	display: inline;
	padding: 10px;
}

#mainNav a{
	font-size: 16px;
	font-weight: bold;
	color: white;
}

#mainNav a:hover{
	color: lightgreen;
}
/* position and size for video on home page*/
#video{
	position: relative;
	left: 30%;	
	width: 560px;
	height: 315px;
}
/* position and size for email form on home page*/
#email {
	position: relative;
	width: 560px;
  	height: 150px;
  	top: 25%;
	color: white;
	left: 37.5%;
	text-shadow: 5px 5px 2px #000,
		-1px -1px 0 #808080,
		1px -1px 0 #808080,
		-1px 1px 0 #808080,
		1px 1px 0 #808080;
	font-family: futura-pt, Arial, Helvetica, sans-serif;
	font-size: 36px
}
/* position and style for about text*/
#about-text{
	padding-left: 5px;
	padding-right: 5px;
	background-color: #c68c53;
	position: relative;
	width: 560px;
	color: white;
	left: 37.5%;
	font-family: futura-pt, Arial, Helvetica, sans-serif;
	font-size: 20px
}
/* position and size for form on contact page*/
.simple-form {
	background-color: #c68c53;
    padding: 4px;
    width: 300px;
    display: inline-block;
    vertical-align: top;
    color: white;
    font-family: futura-pt, Arial, Helvetica, sans-serif;
	font-size: 24px
}
/* position and size for contact text on contact page*/
#contact-text{
	color: white;
	left: 37.5%;
	text-shadow: 5px 5px 2px #000,
		-1px -1px 0 #808080,
		1px -1px 0 #808080,
		-1px 1px 0 #808080,
		1px 1px 0 #808080;
	font-family: futura-pt, Arial, Helvetica, sans-serif;
	font-size: 18px
}
/* position and size for text on shop page*/
#shop-text{
	position: relative;
	margin-left: auto;
	margin-right: auto;
  	width: 560px;
  	height: 500px;
  	padding: 10px;
	color: white;
	text-shadow: 5px 5px 2px #000,
		-1px -1px 0 #808080,
		1px -1px 0 #808080,
		-1px 1px 0 #808080,
		1px 1px 0 #808080;
	font-family: futura-pt, Arial, Helvetica, sans-serif;
}
/* text style for shop links to make them white and large*/
#shop-text a{
	font-size: 50px;
	font-weight: bold;
	color: white;
}
/* text style for shop links to make them light green when hovered over*/
#shop-text a:hover{
	color: lightgreen;
}
/* text style for footer*/
.footer{
    text-align: center;
    color: white;
	left: 37.5%;
	text-shadow: 5px 5px 2px #000,
		-1px -1px 0 #808080,
		1px -1px 0 #808080,
		-1px 1px 0 #808080,
		1px 1px 0 #808080;
	font-family: futura-pt, Arial, Helvetica, sans-serif;
	font-size: 12px

}