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

[Master Stylesheet] 
  
- Project:    Nutty by Nature LLC
- Version:    2.0

- Author: 	Jason W. Ng

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

/*---------------------( RESET)-------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}


body {
	line-height: 1;
	color: black;
	background: white;
	font-size:0.625em;
}

ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
} 

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
#div {
   height/**/: 300px;
}
/* End hide from IE-mac */ 

/*----------------GENERAL-------------*/
blockquote {font-family:verdana,helvetica;color:#e88e02;font-size:15px;}
blockquote q{font-style:italic;font-weight:bold;display:block;font-size:18px;line-height:1.2;padding-bottom:10px;}
h1 {font-weight:bold; font-size:3.8em;}
h2{font-size:3.6em;}
h3{font-size:2.4em;}
h4 {font-size:2.1em;}
h5,p {font-size:1.8em;}
h6 {font-size:1.6em;}
q {color:#885300;}

body {
background: url(../img/bg.png) repeat-x;
background-color:#ff8a00;
font-family: verdana,helvetica, arial, san serif;

}

#container {
width:1000px;
height:auto;
margin:0 auto;
position:relative;
}


#balloon{
background: url(../img/almonds_riding_balloon.png) no-repeat 0 0;
width:161px;
height:250px;
position:absolute;
left:-110px;
top:-110px;}

/*HEADER*/

#header {
height:200px;
position:relative;
margin: auto;
background: url(../img/header_lightsource.png) top left no-repeat;

}

#header2 {
height:130px;
position:relative;
margin: auto;
background: url(../img/header_lightsource.png) top left no-repeat;

}


#header2 h1 a,#header h1 a{
background: url(../img/nutty_by_nature_logo.png) no-repeat 0 0;
float:left;
text-decoration:none;
overflow: hidden;
display: block;
text-indent:-9999px;
width:412px;
height:82px;
margin:5px 0px 0px 0px;
}

/*MAIN NAVIGATION*/
#mainnav {display:block;position:absolute; right:0px; top:0px;background: url(../img/navbar_bg.png) no-repeat 0 0;height:59px; width:600px;}
#mainnav ul {list-style:none; margin:15px 15px 15px 20px;}
#mainnav ul li{display:inline;padding-left:10px;padding-right:10px;font-size:1.5em;white-space:nowrap;}
#mainnav ul li a {font: "Neue Helvetica",Helvetica,arial;font-weight:bold;text-decoration:none;color:white;}
#mainnav ul li a:hover {text-decoration:underline;}
.view-cart {position:absolute;right:20px;top:65px;}

.view-cart a {font-size:1.5em;font-weight:bold;}
.view-cart a:hover {color:white;}

/*SLIDESHOW HEADER*/
#IEroot #mygallery {position:absolute; top:0px;}
#mygallery {position:absolute;right:10px;margin-top:5px;}

.stepcarousel{
position: relative; /*leave this value alone*/
border: none;
overflow: hidden; /*leave this value alone*/
width: 670px; /*Width of Carousel Viewer itself*/
height: 220px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 700px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

/*WELCOME MESSAGE*/
.welcome {background: url(../img/welcome_message.png) no-repeat 0 0; width:670px; height:101px;float:right;}
.welcome h2 {text-indent:-9999px;}

/*MAIN CONTENT*/

#maincontent {width:1000px;margin:auto; height:auto;background-color:#ffca56;position:relative;}
#featured {height:240px;position:relative; background-color:#bf7400;}
.signpost {width:59px;height:335px;background: url(../img/sign_post.png) no-repeat 0 0;position:absolute;left:115px;top:-95px;z-index:1;}
.grass {width:153px;height:17px;position:absolute;background: url(../img/grass.png) no-repeat 0 0;left:48px;bottom:0px;}

#featured ul li {text-indent:-9999px;}
#featured ul li a.almondsign, #featured ul li a.driedfruitsign, #featured ul li a.pistachiosign, #featured ul li a.walnutsign {position:absolute;left:30px;}
#featured ul li a.almondsign {background: url(../img/almond_post.png) no-repeat 0 0; width:204px; height:54px; top:-80px;z-index:2;}
#featured ul li a.almondsign:hover, #featured ul li a.driedfruitsign:hover, #featured ul li a.pistachiosign:hover , #featured ul li a.walnutsign:hover  {background-position:right;}
#featured ul li a.driedfruitsign {background: url(../img/dried_fruits_post.png) no-repeat 0 0; width:203px; height:44px;  top:-25px;z-index:2;}
#featured ul li a.pistachiosign {background: url(../img/pistachios_post.png) no-repeat 0 0; width:203px; height:42px;  top:30px;z-index:2;z-index:2;}
#featured ul li a.walnutsign {background: url(../img/walnuts_post.png) no-repeat 0 0; width:203px; height:49px;top:83px;z-index:2;}


/*PRODUCT LIST*/
#productlist {margin-left:30px;padding-bottom:50px;padding-top:20px;}
.almondtitle  {background: url(../img/almond_category.png) no-repeat; width:141px; height:23px;padding-bottom:20px;}
.driedfruitstitle {background: url(../img/dried_fruits_category.png) no-repeat; width:188px; height:24px;clear:both;padding-bottom:20px;}
.pistachiostitle {background: url(../img/pistachios_category.png) no-repeat; width:169px; height:24px;clear:both;padding-bottom:20px;}
.walnutstitle {background: url(../img/walnuts_category.png) no-repeat; width:131px; height:23px;clear:both;padding-bottom:20px;}
#productlist ul {float:left;padding-right:30px;padding-bottom:20px;}
#productlist ul li {display:block;line-height:1.5;font-size:1.5em;}
#productlist ul li  a{text-decoration:none;color:#885300;}
#productlist ul li  a:hover{color:white;}

/*FOOTER*/
#footerwrap {clear:both;position:relative;background-color:#ca6d00;width:1000px;height:100px;margin:auto;}
#footer p a{color:white;text-decoration:none;}
#footer p a:hover{text-decoration:underline;}
.twitter {position:absolute;right:30px;top:-70px;}
.facebook{position:absolute;right:100px;top:-60px;}

/*ABOUT*/
.title {color:#ca6d00;padding-bottom:15px;padding-top:15px;text-shadow: 0px -1px 0px #745a13;}
#content{width:612px;height:auto;margin-left:50px;padding-bottom:90px;}
#contentp{width:1000px;height:auto;margin-left:50px;padding-bottom:90px;}
#content p{color:#885300; line-height:1.2;font-size:1.3em;}



/*PRODUCTS*/
#productwrap {margin-top:20px;height:2000px;}
#productwrap ul {width:160px;margin-top:20px;display:inline;display:block;float:left;padding-left:10px;padding-right:10px;}
#productwrap ul li {font-size:1.4em;font-weight:bold;font-family:verdana,helvetica,arial;line-height:1.2;padding-top:5px;color:#673f00;}
#productwrap ul li a{text-decoration:none;color:#673f00;}
#productwrap ul li a:hover{color:white;}

.arrowfix .arrow1 {top:50px;}
.arrowfix1.arrow1 {top:80px;}
.arrow1 {
 width: 0;  
 height: 0;  
 line-height: 0;  
 border-top: 25px solid #885300;  
 border-right: 50px solid #ffc34f;

 position:absolute;
 right:-50px;}
 
 .arrow2 {
 width: 0;  
 height: 0;  
 line-height: 0;  
 border-top: 25px solid #885300;  
 border-right: 50px solid #ff8a00;
 position:absolute;
 right:-50px;}
 
 .arrow3{
 width: 0;  
 height: 0;  
 line-height: 0;  
 border-top: 25px solid #885300;  
 border-right: 50px solid #ff8a00;
 position:absolute;
 right:-50px;}
 
  .arrow4 {
 width: 0;  
 height: 0;  
 line-height: 0;  
 border-top: 25px solid #885300;  
 border-right: 50px solid #ff8a00;
 position:absolute;
 right:-50px;}

/*CONTACT*/
#contact-wrapper {
	width: 500px;
	margin-top: 25px;
	position:relative;
}

#contact-wrapper input, #contact-wrapper textarea {
	padding: 5px;
	width: 460px;
	font-family: verdana,helvetica;
	color:#885300;
	font-size: 1.5em;
	margin-left: 0px;
}

#contact-wrapper label {color:#885300;font-size:1.5em;}

#contact-wrapper textarea {
	height: 100px;
}

#contact-wrapper textarea:focus, #contact-wrapper input:focus {
	border: 2px solid #885300;
}

#contact-wrapper input.submit {
	width: 130px;
	height:40px;
	float:right;
	margin-right:25px;
}
#contact-wrapper input.clear {width:80px;height:40px;float:right;}

/*MENU*/
#left-column ul#menu, #left-column ul#menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 250px;
}

#left-column ul#menu a {
  display: block;
  text-decoration: none;
  font:verdana, helvetica, arial;
  text-align:center;
}

#left-column ul#menu li {
  margin-top: 1px;
}

#left-column ul#menu li a {
  background: #bf7400;
  color: #fff;	
  padding: 0.5em;
  font-size:1.0em;
}

#left-column ul#menu li a:hover {
  background: #885300;
}

#left-column ul#menu li ul li a {
  background: #ffca56;
  color: #000;
  padding-left: 15px;
}

#left-column ul#menu li ul li a:hover {
  background: #885300;
  border-left: 5px #885300 solid;
  color:white;
  padding-left: 15px;
}


/*INDIVIDUAl PRODUCTS PAGE*/
#left-column {width:250px;float:left;height:100%;display:block;}
#middle-column {width:520px;height:auto;float:left;background-color:#ffca56;display:block;padding-left:10px;padding-bottom:50px;}
#right-column {width:220px;float:right;background-color:#ffca56;display:block;margin-top:30px;}

#middle-column p.back {font-size:1.0em;}
#middle-column h1.title {font-size:2.5em;}

.productimage {float:left;display:inline;width:200px;}
.productimage img{padding-top:5px;}
.productdescription {width:280px;float:left;display:inline;margin-left:10px;line-height:1.2;}
.productdescription p {font-size:1.3em;color:#885300;padding-top:10px;padding-bottom:10px;}
.productdescription p.information {font-size:1.0em;line-height:1.0;}
.productdescription h2 {font-size:1.3em;font-weight:bold;}
.productdescription h3 {font-size:1.1em;font-weight:bold;}
.nutritional-facts {margin-left:10px;}

#right-column h3 {font-weight:bold;font-size:1.8em;text-align:center;color:#885300;}
#right-column  p.price span {font-size:3.0em;color:#885300;}
#right-column  p.price  {text-align:center;font-size:1.5em;}
#right-column .addcart {padding-left:50px;padding-top:30px;}


/**
 * Define the table to be of the class "nutrition"
 */
 
.msg_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color:#bf7400;
	margin:1px;
}

p.msg_head {color:white;}

table.nutrition {
	width : 275px;
	margin-top : 10px;
	margin-left : 0;
	margin-right : 0;

	border : 1px solid black;
	border-collapse : collapse;
	table-layout : auto;

}

/**
 * Format the caption at the top of the table
 */
.nutrition caption {
	font-family : verdana;
	font-size : small;
	font-style: italic;
}

/** 
 * Format the tr ids 
 */
.nutrition tr#calories td {
	border-bottom : 4px solid black;
}

.nutrition tr#servings td {
	border-bottom : 6px solid black;	
}

.nutrition tr#minerals td {
	border-top : 4px solid black;
}

 /**
  * Format the header, which is basically the text "Nutrition Facts"
  */
.nutrition th {
	background-color : transparent;
	padding : 3px;
	border : 0;
	font-family : Arial;
	font-size : large;
	font-weight : bolder;
}	

 /**
  * Define the baseline style for cells
  */
.nutrition td {
	padding : 3px;
			
	font-family : Arial;
	font-size : x-small;
	border : 0;
	border-bottom : 1px solid black;
	
	text-align : left;
}

 /**
  * Define the cell for Daily Values
  */
.nutrition td.dv {
	font-weight : bold;
	text-align : right;
}

 /**
  * Set an indent for subordinate nutrients
  */
.nutrition td.sub {
	text-indent : 10px;
}

 /**
  * Set the style of the disclaimer text
  */
.nutrition td.disclaimer {
	font-size : xx-small;
}

 /**
  * Use the strong tag to set emphasis on particular text
  */
.nutrition strong {
	font-weight : x-bolder;
}