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

/*
	The following section of the file lays out the CSS for a basic site. It assumes a top navigation - see the other file for a left-hand navigation - and 1100px wide site as the baseline.
*/

html{
	padding:0px !important;
	margin:0px !important;
}

body{
	background-color:#999999;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	padding:0px !important;
	margin:0px !important;
}

img{
	max-width:100%;
	border:none;
}

.container{
	width:1100px;
	margin:0 auto 0 auto;
	background-color:#ffffff;
}

.header{
	background-image:url(images/header1.png);
	width:100%;
	height:123px;
}

.header address{
	font-style:normal;
	text-align:right;
	padding:20px 20px 0px 0px;
}

#toggleNav{
	display:none;
	width:100%;
	height:20px;
	background-color:#000000;
	text-align:center;
}

#toggleNav a{
	color:#ffffff;
}

a.pizzaz {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #FF0000;
}

/*Use this for simple top nav*/

#nav{
	width:100%;
	background-color:#00FF00;
	height:40px;
	background-color:#a6a0cb;
		/* BACKGROUND FADES. FIRST COLOR IS TOP COLOR. SECOND COLOR IS BOTTOM COLOR */
	background:linear-gradient(top, #a6a0cb 100%, #695ea6 0%);
	background: -webkit-gradient(linear, left top, left bottom, from(#a6a0cb), to(#695ea6));
	background: -moz-linear-gradient(top,  #a6a0cb,  #695ea6);
	background: -ms-linear-gradient(top left,  #a6a0cb,  #695ea6);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6a0cb', endColorstr='#695ea6');
}

#nav a{
	display:inline-block;
	position:relative;
	float:left;
	font-size:16px;
	text-decoration:none;
	padding:10px 15px 11px 15px;
	margin:0px 10px;
	color:#ffffff;
}

#nav a:hover{
	background-color:#a6a0cb;
	color:#000000;
}

.content-top{
	display:inline-block;
	width:100%;
	border-image:url(images/border.jpg) 0 0 15 0 repeat repeat;
	border-width:0px 0px 15px 0px;
}

.left{
	position:relative;
	float:left;
	width:63%;
}

.right{
	position:relative;
	float:right;
	width:35%;
	padding-right:2%;
}

.right h1{
	
}

.content{
	display:inline-block;
	width:100%;
}

.content-wide{
	display:inline-block;
	width:90%;
	padding:2% 5%;
}

.three-column{
	position:relative;
	float:left;
	width:23%;
	padding:0% 5%;	
}

.right-border{
	border-right:3px solid #756cae;
}

.contentleft{
	position:relative;
	float:left;
	width:60%;
	margin:15px 0px 15px 10px;
	padding:15px;
	background-color:#FFFF00;
}

.contentright{
	position:relative;
	float:right;
	margin:15px 10px 15px 0px;
	width:31%;
	padding:15px;
	background-color:#00CC00;
}

.footer{
	width:100%;
	background-color:#ffffff;
	color:#333333;
	min-height:40px;
	position:relative;
	float:left;
	padding-top:8px;
}

.footleft{
	float:left;
	padding:10px 0px 0px 25px;
}

.footright{
	float:right;
	padding:10px 25px 0px 0px;
}

.footright a{
	color:#333333;
}

/* ------------ 960 pixel wide version of the site ------------ */

@media only screen and (min-width:966px) and (max-width:1105px){
	.container{
		width:960px;
	}
	
	.header{
		background-image:url(images/header2.png);
	}
	
	.left{
		width:61%;	
	}
}

/* ------------ 800 pixel wide version of the site ------------ */

@media only screen and (min-width:806px) and (max-width:965px){
	.container{
		width:800px;
	}
	
	.header{
		background-image:url(images/header3.png);
	}
	
	.left{
		width:55%;	
	}
	
	.right{
		width:41%;
	}
	
	.contentleft{
		margin:12px 0px 12px 8px;
		padding:12px;
	}
	
	.contentright{
		margin:12px 8px 12px 0px;
		padding:12px;
	}
}

/* ------------ 600 pixel wide version of the site ------------ */

@media only screen and (min-width:605px) and (max-width:805px){
	.container{
		width:600px;
	}
	
	.header{
		display:block;
		background-image:url(images/header4.png);
	}
	
	address{
		margin-right:-16px;
	}

	#toggleNav{
		display:block;
	}
	
	#nav{
		text-align:center;
		height:100%;
		padding:5px 0px;
		margin:0px;
		display:none;
	}
	
	#nav a{
		float:none;
		display:block;
		margin-top:0px;
	}
	
	.left{
		display:none;	
	}
	
	.right{
		width:92%;
		padding-right:4%;
	}
	
	.three-column{
		width:90%;	
	}
	
	.right-border{
		border:none;	
	}
	
	.contentleft{
		width:96%;
		margin:0px;
		padding:12px;
	}
	
	.contentright{
		width:96%;
		margin:0px;
		padding:12px;
	}

	.footer{
		height:65px;
		text-align:center;
	}
	
	.footleft{
		float:none;
		padding:10px 0px 0px 0px;
		display:block;
	}
	
	.footright{
		float:none;
		padding:0px 0px 0px 0px;
		display:block;
	}
}

/* ------------ 400 pixel wide version of the site ------------ */

@media only screen and (min-width:405px) and (max-width:604px){
	.container{
		width:400px;
	}
	
	.header{
		display:block;
		background-image:url(images/header5.png);
	}
	
	.header address{
		display:none;	
	}

	#toggleNav{
		display:block;
	}
	
	#nav{
		text-align:center;
		height:100%;
		padding:5px 0px;
		margin:0px;
		display:none;
	}
	
	#nav a{
		float:none;
		display:block;
		margin-top:0px;
	}
	
	.left{
		display:none;	
	}
	
	.right{
		width:92%;
		padding-right:4%;
	}
	
	.three-column{
		width:92%;	
	}
	
	.right-border{
		border:none;	
	}
	
	.contentleft{
		width:96%;
		margin:0px;
		padding:8px;
	}
	
	.contentright{
		width:96%;
		margin:0px;
		padding:8px;
	}

	.footer{
		height:65px;
		text-align:center;
	}
	
	.footleft{
		padding:10px 0px 0px 0px;
		display:block;
		float:none;
	}
	
	.footright{
		padding:0px 0px 0px 0px;
		display:block;
		float:none;
	}
}

/* ------------ 300 pixel wide version of the site ------------ */

@media only screen and (max-width:404px){
	.container{
		width:300px;
	}
	
	.header{
		display:block;
		background-image:url(images/header6.png);
	}
	
	.header address{
		display:none;	
	}
	
	#toggleNav{
		display:block;
	}
	
	#nav{
		text-align:center;
		height:100%;
		padding:5px 0px;
		margin:0px;
		display:none;
	}
	
	#nav a{
		float:none;
		display:block;
		margin-top:0px;
	}
	
	.left{
		display:none;	
	}
	
	.right{
		width:94%;
		padding-right:3%;
	}
	
	.three-column{
		width:92%;	
	}
	
	.right-border{
		border:none;	
	}
	
	.contentleft{
		width:96%;
		margin:0px;
		padding:6px;
	}
	
	.contentright{
		width:96%;
		margin:0px;
		padding:6px;
	}

	.footer{
		height:65px;
		text-align:center;
	}
	
	.footleft{
		padding:10px 0px 0px 0px;
		display:block;
		float:none;
	}
	
	.footright{
		padding:0px 0px 0px 0px;
		display:block;
		float:none;
	}
}