/* use # for id's.  Then set the id in the html to refer to the style
   for example <p id="monkey"> in html, then in the style sheet 
   #monkey font-color: red;
   that will set any id of monkey to a red font.
   ID's are meant to be unique within the html page.
   
   
   use . for class selector.  any object on the page will be subject to the class
   .center {
    text-align: center;
    color: red;
	}
    then on the html page 
	<h1 class="center">Red and center-aligned heading</h1>
	<p class="center">Red and center-aligned paragraph.</p> 
	both the h1 and the p will be centered.
*/


<style>
body {
	background: #493C56;
	font-family: Arial, Verdon, Tahoma, sans-serif; 
	font-size: 18px;
	overflow: auto;

}
h1, h2, h3{
	text-align: center;
	padding-left: 5%;
	color: #333333;
	font-family: Arial, Verdon, Tahoma, sans-serif; 
}

h4{
	text-align: left;
	padding-left: 5%;
	color: #333333;
	font-family: Arial, Verdon, Tahoma, sans-serif; 
}
p {
	padding 2%;
/*	color:#170b21;  */
	color:#E0E2EB;
}

hr {
  height: 1px;
  border: 0;
  border-top: 1px solid #542107;
  margin: 1em 0;
  padding: 0;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li {
	display: inline;
}
ul li img{
	height: 50px;
}


thead{
	font-weight: bold;
}

table{
	/*border-collapse: collapse;*/
	border-collapse: collapse; 
	border-spacing: 0;
	border: solid 1px #333333;
	width:98%;
	margin: 0px auto;
	

}

td {
	color: #red;
	font-family: Arial, Verdon, Tahoma, sans-serif;
	/*text-align: left;*/
	/*font-size: small;*/
	padding-left: 5px;
	border: none; /*solid transparent 1px;*/
	background: #FAFAFA;
}	

tr:nth-child(even) td { background: #e0e2eb; }
tr:nth-child(odd) td { background: #eff0f5; }
	
	
}

td a {
	color:#E0E2EB;
	font-family: Arial, Verdon, Tahoma, sans-serif;
	font-size: medium
}

footer {
	background: #e0e2eb;
	width: 100%;
	overflow: hidden;
	background-image: url(../images/elements/lesPaulQuiltSmall.jpg);
	background-repeat: repeat;
}
footer p, footer h3 {
	color: #333333;
}
footer p a {
	color: #333333;
	text-decoration: none;
}

/**********/
/*   ID's */
/**********/

#wrapper {
	margin: 0 auto;
	/*max-width;: 800px;   was 1020 */
	/*width: 98%;*/
	/* background: #170B21; */
	/*background-image: url(../images/elements/lesPaulQuilt.jpg);
	background-repeat: repeat;*/
	background: #e0e2eb;
	border: 1px solid #493c56;
	border-radius: 2px;
	box-shadow: 0 0 10px 0px rgba(12,2,25,0.8);
	overflow: hidden;
}
#callout {
	width: 100%;
	height: auto;
	background #333333;
	overflow: hidden;
	font-family: Arial, Verdon, Tahoma, sans-serif;
	font-size: 13px;

}
#callout p {
	text-align: right;
	font-size: 16px;
	padding: 0.1% 5% 0 0;
	color: #333333;
}
#callout p a{
	color: #f12345
	text-decoration: none;
}
#envelope form label{
	color:#333333;
	font-family: Arial, Verdon, Tahoma, sans-serif;
}
#envelope form p{
	font-family: Arial, Verdon, Tahoma, sans-serif;
}
#formresult{
	color:#333333;
	font-family: Arial, Verdon, Tahoma, sans-serif;
}
#formresult userdata{
	font-family: Arial, Verdon, Tahoma, sans-serif;
	color: #333333;
}

header{
	width: 96%;
	min-height: 70px;
	padding-left: 2%;
	text-align: center;
}
nav ul {
	list-style: none;
	margin: 0;
	padding-left: 30px;
}
nav ul li {
	float: left;
	border: 1px solid #493c56;
	width: 12%;
	font-family: Arial, Verdon, Tahoma, sans-serif;

}
nav ul li a {
	background: #021160;
	/*background-image: url(../images/elements/lesPaulQuiltSmall.jpg);
	background-repeat: repeat;*/
	display: block;
	padding: 5% 12%;
	font-weight: bold;
	font-size: 18px;
	color: #8CA5E5;
	text-decoration: none;
	text-align: center;
}
nav ul li a:hover, nav ul li.active a{
	background-color:#8CA5E5;
	color: #021160;
	
}


/***************************/
/*       classes           */
/***************************/
.headerpic{
/*max-width: 300px;*/  /*this is commented out because we switched from logo to banner*/
display: block;
margin: 0 auto;
}

.container{
	margin:auto;
	max-width:800px;
	
}
.banner{
	background-color: #542107;
	color: #333333;
	background-image: url(../images/elements/lesPaulQuiltSmall.jpg);
	background-repeat: repeat;
}

.banner h1{
	font-size: 36px;
}

.banner img {
	width: 100%;
	/*
	border-top: 1px solid #493c56;
	border-bottom: 1px solid #493c56;
	*/
	
}

.home {
	
	text-align: center;
	width: 100%;
	font-family: Arial, Verdon, Tahoma, sans-serif; 
	font-size: 26px;

}
.clearfix {
	clear: both;
}
.left-col {
	width: 55%;
	float: left;
	margin: 1% 1% 1% 1%;
	font-family: Arial, Verdon, Tahoma, sans-serif; 
}

.left-col p {
	color:#E0E2EB;
}
.right-col {
	width: 55%;
	float: right;
/*	margin: 1% 1% 1% 1%; */
	font-family: Arial, Verdon, Tahoma, sans-serif; 
}

#recipes {
	
}

#recipes table{
	width: 60%;
}

.sidebar {
	width: 500px;
	float: left;
	margin: 1%;
	text-align: center;
}

.leftsidebar {
	width: 130px;
	float: left;
/* 	margin: 1%; */
	text-align: left;
	font-family: Arial, Verdon, Tahoma, sans-serif; 

	

}

.twocolumnleft {
	width: 48%;
	float: left;
	text-align: left;
	font-family: Arial, Verdon, Tahoma, sans-serif; 
}

.twocolumnright {
	width: 48%;
	float: right;
	text-align: center;
	font-family: Arial, Verdon, Tahoma, sans-serif; 
}

.webpic {
	/*float: left;*/
	margin: 0 auto;
	width: 30%;
	height: auto;
	padding: 1%;

}

.section {
	width: 29%;
	float: left;
	margin: 2% 2%;
	text-align: center;
}

.section ul{
	color:#E0E2EB;
	font-family: Arial, Verdon, Tahoma, sans-serif;
}

.section ul a {
	color:#E0E2EB;
	padding:4px;
}

.section image{
	max-height: 100px;
}

.section p {
	font-family: Arial, Verdon, Tahoma, sans-serif; 
}


.newscolumn {
	width: 95%;
	float: left;
	margin: 2% 2%;
	text-align: left;
}

.singlecolumn {
	width:95%;
	margin: 2% 2%;
	align: center;
	background-color:#e0e2eb;
	color: #E0E2EB;
	
/* 	font-family: Arial, Verdon, Tahoma, sans-serif; */
}


.singlecolumn td {
	color: #E0E2EB;
}

.centercolumn {
	text-align: center;
}

.centercolumn img {
	text-align: center;
	
}

.recipeinfo{
	font-family: Arial, Verdon, Tahoma, sans-serif;
}

.recipeinfo li{
	padding:2px;
}


/*********************MEDIA!!!******************************/
   @media screen and (max-width:478px){   
	body {
		font-size: 13px;
	}
}
@media screen and (max-width:740px){    /*used to be 1450, increased for GS7*/
	h1{
	font-size: 25px;
	}
	
	h2{
	font-size: 18px;
	}	
	
	h3{
	font-size: 14px;
	}	
	
	
	nav {
		width 100%;
		margin-bottom: 10px;
		
	}
	nav ul {
		list-style: none;
		margin: 0 auto;
		padding-left: 0;
	}
	nav ul li {
		text-align: center;
		margin-left: 0 auto;
		width: 100%;
		float: left;
		border-top; 1px solid #493c56;
		border-right: 0px solid #493c56;
		border-bottom; 1px solid #493c56;
		border-left; 0px solid #493c56;
		vertical-align:middle;
		height: 25px;

	}
	
	nav ul li a{
		padding: 8px 0;
		font-size: 14px;
	}
	
	td {
	color:#333333;
	font-family: Arial, Verdon, Tahoma, sans-serif;
	text-align: left;
	font-size: 14px;
	padding-left: 5px;
	vertical-align: top;
	border-collapse: collapse
}
	.banner h1{
		font-size: 20px;
		
	}
	
	
	.left-col{
		width:100%;
	}
	.sidebar{
		width:60%;
		

	}
	.right-col{
		width:100%;
	}
	.leftsidebar{
		width:30%;
		font-family: Arial, Verdon, Tahoma, sans-serif; 


	}

	.section{
		float: left;
		width:100%;
		margin: 0;
	}

	.promosection{
		float: left;
		width:100%;
		margin: 0;
	}

	.galTitle{
	font-size:16px;
	word-wrap:break-word;	
	}	

	.galName{
	font-size:16px;
	word-wrap:break-word;	
	}	
	
	.galGig{
	font-size:12px;
	word-wrap:break-word;
	}
	
	.footlogo img{
	height:80px;
	}



}

</style>