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

**** THIS DOCUMENT IS TO BE USED AS A BASIS FOR CSS DEVELOPMENT ****

**** BASIC STANDARD TAGS SET OUT HERE TO BE EDITED IN STYLE ****

**** WHEN CREATING FROM THIS TEMPLATE, USE THE BASE STYLES, THEN DEVELOP SPECIFICITY AS NEEDED ****

For example, don't automatically set up a h1 tag for every div. 
Only set it up when different, and even then, think about how you can 
reduce the amount of tags you use throughout. The less tags, the less to debug.
Taking this example further - instead of setting a h1 tag for each, 
set an over-arching font size in em units, so that each div works on 
a percentage of the main h1 style.

** FOR INITIAL USE, I'VE LEFT THE STYLES IN FOR YOU TO ADD TO/REMOVE **


///////////// REMOVE THIS HEADER + OTHER COMMENTS BEFORE PUBLISHING LIVE SITE ////////////////
 
 
--------------------------------------------------------------

   TYPOGRAPHY

/* Default font settings. 
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size:100.01%; }
body { 
  font-size: 75%;
  color: #333; 
  background: #fff;
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}

a:link, a:visited, a:hover {text-decoration:none; color:inherit;}

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 {font-weight: normal; color:#333333; }

h1 { font-size: 1.7em; margin-bottom: 0.5em; color:#A4B27C; padding-top:.8em; margin-top:0px;}
h2 { font-size: 1.4em; margin-bottom: 0.75em; color:#333;}
h3 { font-size: 1em; line-height: 1.3em; margin-bottom: 1em; font-weight:bold; }
h4 { font-size: .8em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: .8em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: .8em; font-weight: bold; color:#333333;}

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}



/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus, 
a:hover     { color: #5E7647; }
a           { color: #009; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
em {font-weight:bold; font-style:normal;}
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre 				{ margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists
-------------------------------------------------------------- */

li ul, 
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}



/* Misc classes

For example, these could be applied to p tags in the html markup

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

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.3em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

.notice {color:#5E7647; font-style:italic; font-size:1em;}
.notice a:link, .notice a:visited, .notice a:hover {text-decoration:underline; color:#5E7647;}


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

   LAYOUT

*** REMEMBER *****

An ID (#) can appear only once within a layout, so #divs should form framework of your layout.

A CLASS (.) can appear numerous times, so forms elements within your layout.
   
-------------------------------------------------------------- */

/* --- html and body don't need # because they are universal, only styles you make up names for need either # or . ---- */

html	{	}
body	{margin: 0 0 0 0; padding:0 0 0 0; background-color:#ffffff; background-image:url(../img/body_bg3.jpg); background-repeat:repeat-x;}

#masthead {width:900px; margin-left:auto; margin-right:auto; background-color:#FFF; margin-top:0px; height:123px;}
.logo 	{height:123px; background-color: #ffffff; width:420px; float:left;}
.shopping_cart {width:280px; float:right; text-align:right; margin-top:2em;}
.shopping_cart img {float:right; padding-left:1em;}
.shopping_cart p {font-size:.8em; text-transform:uppercase; color:#666666; margin-top:4em;}

#features {width:900px; margin-left:auto; margin-right:auto;}
#features img {padding:10px; background-color:#ffffff; border:solid 1px #CCCCCC; margin-top:10px;}


#features_wrap_text {width:830px; margin-left:auto; margin-right:auto; background-color:#fff; min-height:350px; height:auto; padding-left:50px; padding-right:50px; padding-bottom:50px;}
#features_wrap_text p.first {font-weight:bold; padding-top:5em;}
#features_wrap_text p.first a:link {text-decoration:underline; color:#333333;}
#features_wrap_text p.first a:hover {text-decoration:underline; color:#336699;}
#features_wrap_text h6 {padding-left:10em;}

#features_wrap_text p.small      {padding-left:10em; padding-right:5em; font-size:.8em; margin-bottom:1.875em; line-height:1.3em; }


#front_entry {width:870px; background-image:url(../img/green_bg.jpg); background-repeat:repeat; height:200px; margin-left:auto; margin-right:auto; padding:15px;}
#front_entry img {background-color:#FFFFFF; padding:10px; border:solid 1px #CCCCCC; float:left; margin-right:15px;}

#listings { background-color:#FFF;}
#listings img {border:0px; padding:0px; margin-top:0px;}
.item {width:200px; border:1px #CCC solid; padding:10px; height:300px; margin-right:40px; float:left; margin-top:2em;}
.item h3 { margin-top:.8em; margin-bottom:.2em; font-weight:bold;}
.item p { color:#999; margin-bottom:.2em;}
.item p a:link, .item p a:hover, .item p a:visited {text-decoration:none;}
p.price {color:#933; font-weight:bold; text-align:right; margin-top:-1.4em;}
p.more {margin-top:.8em;}
p.price2 {color:#933; font-weight:bold; margin-top:-1.4em;}
p.free {color:#066; font-style:italic; margin-top:-1.3em;}

.clear {clear:both;}

img.mid {float:left; padding-right:30px; padding-top:0px; padding-bottom:20px;}
img.seal {float:left; padding-top:0px; margin-top:0px;}
img.seal2 {float:left; padding-top:0px; margin-top:0px; padding-right:218px;}


.payment {width:203px; margin-left:430px;}
.payment2 {width:203px; float:right; margin-top:-73px;}
.payment p {font-size:.8em; padding-top:.2em; color:#666;}


p.red {color:#933; font-weight:bold; }

/* --- when working with multiple columns

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

.1column	{	}

.2column	{	}

.3column	{	}

.4column	{	}

/* --- when working with multiple columns of various widths

each column is treated individually, as they are different and only appear once in a layout.
you could use a combination of these and the above columns in one layout.

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

#left	{	}

#middle	{	}

#right	{	}

/* --- navigation

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

#nav {width:900px; margin-top:30px; margin-bottom:10px; margin-left:auto; margin-right:auto; }

#nav ul {list-style:none; display:inline;}
#nav ul li {font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size:1.3em; color:#CCCCCC; font-weight:bold; text-transform:uppercase; margin-right:3em; display:inline; text-align:left;}
#nav ul li a:link, #nav ul li a:visited {text-decoration:none; color:#666666;}
#nav ul li a:hover {text-decoration:none; color:#A4B27C;}

#sub_nav	{width:900px; margin-top:20px; margin-left:auto; margin-right:auto; height:20px; background-color:#A4B27C; padding-top:.5em;}
#sub_nav ul {list-style:none; display:inline;}
#sub_nav ul li {font-size:.8em; color:#333333; text-transform:uppercase; margin-right:3em; display:inline; text-align:left;}
#sub_nav ul li a:link, #sub_nav ul li a:visited {text-decoration:none; color:#333333;}
#sub_nav ul li a:hover {text-decoration:underline;}
#sub_nav ul li.right {float:right; text-align:right; margin-left:3em; margin-top:2px; display:inline;}


#sub_sub_nav	{	}

#footer	{ width:890px; margin-left:auto; margin-right:auto; height:50px; padding-left:30px;}
#footer img.icon {float:left; margin-right:5px; margin-top:0px;}
#footer img {float:right; margin-top:-75px;}

#footer p {text-transform:uppercase; font-size:1em; font-weight:bold; text-align:right; margin-top:1.8em;}

/*----- mail chimp signup form ---------- */

#mc_embed_signup {}

#mce-responses {padding-left:10em; padding-right:5em; padding-bottom:30px; width:400px;}


.blog_item {}

.blog_divider {}