/* --------------------------------------------/ UNIVERSAL CLASSES \-------------------------------------------- */

/* --------------------------------------------*/




/* --------------------------------------------/ BROWSER INITIALIZATION \-------------------------------------------- */

	* { margin : 0; padding : 0; }
	ol,ul { list-style : none; }
	table { border-collapse : collapse; border-spacing : 0; }
	fieldset,img { border : 0; }
	caption,th { text-align : left; }
	p { color:#333; }
	h1 { color:#333; font-family: Century Gothic, sans-serif; font-size:24px; }
	h2 { color:#333; font-family: Century Gothic, sans-serif; font-size:20px; margin-bottom:20px; }
	
	body { 
	text-align:left; 
	color:#FFF; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px; 
	background-color:#FFF;
	background-image:url(../images/solanco-nuts-MOCKUP-v1-bg.jpg);
	background-position:center;
	background-repeat:repeat;
	}

/* --------------------------------------------*/




/* --------------------------------------------/ BOX MODEL CLASS \-------------------------------------------- */

	.hp-box { position:relative; float:left; width:320px; height:270px; margin:30px; overflow:hidden; }
	.product-box { position:relative; float:left; width:327px; height:380px; margin:25px; }
	button.css3button {
	font-family: Century Gothic, sans-serif;
	font-size: 14px;
	color: #333;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#eac54d 0%,
		#eac54d);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#eac54d),
		to(#eac54d));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 1px solid #f2d785;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
}

.product-left { position:relative; float:left; width:320px; min-height:400px; }
.product-right { position:relative; float:left; width:380px; height:100%; }


/* --------------------------------------------*/


/* --------------------------------------------/ HEADER \-------------------------------------------- */

	#container_header { width:100%; height:100%; }
		
		#header { 
		position:relative; 
		width:1188px;
		height:490px;
		margin:auto;
		background-color:#FFF;
		}
		
		#sub-header { 
		position:relative; 
		width:1188px;
		height:240px;
		margin:auto;
		background-color:#FFF;
		}

/* --------------------------------------------*/


/* --------------------------------------------/ NAV \-------------------------------------------- */

#container_nav { width:100%; height:100%; }
	
	#nav {
	position:absolute;
	width:1000px;
	height:95px;
	margin-left:94px;
	margin-top:80px;
	background: #f4e2ab; /* Old browsers */
	background: -moz-linear-gradient(top, #f4e2ab 0%, #ebc85b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4e2ab), color-stop(100%,#ebc85b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f4e2ab 0%,#ebc85b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f4e2ab 0%,#ebc85b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f4e2ab 0%,#ebc85b 100%); /* IE10+ */
	background: linear-gradient(to bottom, #f4e2ab 0%,#ebc85b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4e2ab', endColorstr='#ebc85b',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow:  0px 1px 1px 1px rgba(0, 0, 0, 0.3);	
	box-shadow:  0px 1px 1px 1px rgba(0, 0, 0, 0.3);
	z-index:99;
	}
	
		#nav li { position:relative; float:right; height:95px; overflow:hidden; background: -moz-linear-gradient(top, #f4e2ab 0%, #ebc85b 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4e2ab), color-stop(100%,#ebc85b)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #f4e2ab 0%,#ebc85b 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #f4e2ab 0%,#ebc85b 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #f4e2ab 0%,#ebc85b 100%); /* IE10+ */
		background: linear-gradient(to bottom, #f4e2ab 0%,#ebc85b 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4e2ab', endColorstr='#ebc85b',GradientType=0 ); /* IE6-9 */ }
		
		#nav li:hover { background: #ebc85b; /* Old browsers */
		background: -moz-linear-gradient(top,  #ebc85b 0%, #f4e2ab 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebc85b), color-stop(100%,#f4e2ab)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #ebc85b 0%,#f4e2ab 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #ebc85b 0%,#f4e2ab 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #ebc85b 0%,#f4e2ab 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #ebc85b 0%,#f4e2ab 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebc85b', endColorstr='#f4e2ab',GradientType=0 ); /* IE6-9 */
		}
		
		img.center {   display: block; margin-top:4px;   margin-left: auto;   margin-right: auto; }

		#nav a { display:block; font-family: Century Gothic, sans-serif; font-size:24px; padding:13px; text-align:center; text-decoration:none; color:#2e1f10; }

		#get-social {
		position:absolute;
		width:1000px;
		height:68px;
		margin-left:94px;
		margin-top:418px;
		border-top:5px #fff solid;
		border-right:5px #fff solid;
		border-left:5px #fff solid;		
		background-color: #513d30;
		background-image:url(../images/get-social-bg.jpg);
		background-position:left;
		background-repeat:no-repeat;
		z-index:100;
		}
		
/* --------------------------------------------*/
 
/* --------------------------------------------/ CONTENT \-------------------------------------------- */

#container_content { width:100%; }

	#content { 
		position:relative;  
		width:1188px;
		height:100%;
		margin:auto;
		background-color:#FFF;  
		}
		
		#center-content { 
		position:relative;  
		width:1148px;
		min-height:200px;
		margin:auto;
		padding:20px; 
		}
		
		#ss-content {
		position:absolute;
		width:1178px; 
		height:485px;
		margin:auto;
		overflow:hidden;
		border:5px #fff solid;
		z-index:1;
		}
		
		#sub-content {
		position:absolute;
		width:1178px; 
		height:240px;
		margin:auto;
		overflow:hidden;
		border:5px #fff solid;
		z-index:1;
		}
		
		#left-content { 
		position:relative; 
		float:left; 
		width:260px; 
		height:100%;
		margin:auto;
		padding:20px;
		background-color:#069; 
		}

		#right-content { 
		position:relative; 
		float:left;
		width:660px; 
		height:100%;
		margin:auto;
		padding:20px;
		background-color:#363; 
		}
		
		#left-contact {
		position:relative;
		float:left;
		height:100%;
		width:554px;
		margin:auto;
		padding:20px;
		}
		
		#right-contact {
		position:relative;
		float:left;
		height:100%;
		width:554px;
		margin:auto;
		padding:20px;
		}

			.min-holder { float:left; width:1px; height:450px;  }
	
			.clear {clear:both; height:1px; overflow:hidden; }

/* --------------------------------------------*/

/* --------------------------------------------/ CONTACT FORM \-------------------------------------------- */

		#left-contact input, textarea { 
			padding: 8px;
			border: solid 1px #E5E5E5;
			font: normal 12px Verdana, Tahoma, sans-serif;
			width: 200px;
			background: #FFFFFF url('images/form_background.png') left top repeat-x;/*Mimic Background Property in Internet Explorer since IE 6,7,8 does not support CSS3*/
			background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
			background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
			box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*0.1 actually means 10 %*/
			-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
			-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
			}
		
		#left-contact textarea { 
			width: 400px;
			max-width: 400px;
			height: 150px;
			line-height: 150%;
			}
		
		#left-contact input:hover, textarea:hover,
		#left-contact input:focus, textarea:focus { 
		-moz-box-shadow:0 0 8px lightblue;
			-webkit-box-shadow:0 0 8px lightblue;
			box-shadow:0 0 8px lightblue;
		}
		
		.form label { 
			margin-left: 12px; 
			color: #999999; 
			}
		
		.submit input {
			font-family: Century Gothic, sans-serif;
	font-size: 14px;
	color: #333;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#eac54d 0%,
		#eac54d);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#eac54d),
		to(#eac54d));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 1px solid #f2d785;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
			}
			
		#form-div { 
		padding:15px;
		}

/* --------------------------------------------*/


/* --------------------------------------------/ FOOTER \-------------------------------------------- */

#container_footer { clear:both; width:100%; height:100%; }
	
	#footer { 
	position:relative; 
	width:1188px;
	height:286px;
	margin:auto;	
	background-image:url(../images/footer-right-bg.jpg);
	background-position:right;
	background-repeat:no-repeat;
	background-color:#fff;
	color:#333; 
	}
	
	#top-footer { position:relative; float:left; width:100%; height:186px; margin:20px; }
	
	#top-footer hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ECCA62;
    margin: 1em 40px 1em 0px; padding: 0; width:900px; }
	
	.country-fresh { font-family: Century Gothic, sans-serif; font-size:18px; width:900px; color:#333333; }
	
		#footer ul { position:relative; margin-top:23px; }
		#footer li { position:relative; margin-left:10px; }
		#footer a { text-decoration:none; color:#333; }
		#footer a:hover { color:#000; }
	
	#footer-left {
	position:relative;
	float:left;
	width:345px;
	height:60px; 
	}
	
		#footer-left ul { float:left; left:8px; }
		#footer-left li { float:right; }
	
	#footer-right {
	position:relative;
	float:left;
	width:594px;
	height:60px; 
	}

		#footer-right ul { float:right; right:20px; }
		#footer-right li { float:left; }
		
		.cdsLink {
			display: block;
			width: 328px;
			height: 18px;
			background:url(../images/chop-dawg-studios-website-design.png) bottom;
			text-indent: -99999px;
		}
		.cdsLink:hover {
			background-position: 0 0;
		}

/* --------------------------------------------*/