/*These are the styles that can be overwritten by the site owner's (or visitor's) choices.*/
/*If this is required, you must copy these styles below*/
body {background: #99ca3b;}
#header {background: #FFFFFF;}
#menu {}
#menu ul.mainmenu a {color: #336600;}
#wrapper {background: #FFFFFF;}
#rightcolumn, #leftcolumn {color: #58585a;}
#rightcolumn a, #leftcolumn ul a {color: #336600;}
#rightcolumn h1, #leftcolumn form {background: #FFFFFF;}
#footer {background: #FFFFFF;}
#rightcolumn h1, #leftcolumn form {color:#58585a;} 


/*For a 3 column layout, you need to make the wrapper wider, turn on the farright column and*/
/*fill in the 'template-include-farright' text and translation*/
#wrapper, #footer {width:953px;} /*wider wrapper and footer, should be all the widths below + 3 pixels for borders*/
#leftcolumn {width: 200px;} /*more space for the left column if desired*/
#rightcolumn {width: 550px;} /*wider central column with a right border*/
#farrightcolumn {width: 200px; display: block;} /*right column with display turned on*/
#menu ul.mainmenu a {font-weight: bold; color: #336600; text-decoration: none;}
#menu ul.mainmenu a:hover {color: white; text-decoration: underline;}
#menu {background:url(http://www.we-love-local.com/images/mnbg.jpg);}

/*These lines enable the Suckerfish menu.*/
#menu {height: 2em;} /*It has a height so that it will appear correctly even if ul is floated for Suckerfish*/
#menu ul.mainmenu li ul {display: block;} /*Display the sub menus*/
#menu ul.mainmenu li {float: left;} /*They must be floated left*/
#menu ul.mainmenu li a {display:block;} /*Needed for Suckerfish submenus on IE*/
#menu ul.mainmenu li {background: url(../images/mnbg.jpg); border-left: none; border-right: 1px solid white;} /*Put the separator lines on the right*/

#wrapper {background-image:url("../images/lbgd.jpg");}
#leftcolumn ul {padding :0;}
#leftcolumn ul li {padding: 2px 20px;}
#leftcolumn ul li{border-bottom :none;}
#leftcolumn ul li.selected a{color: #58585a; text-indent: 3px; font-weight: bold;}
#header {padding-top: 10px; background: #99ca3b;}

/*Styles for the left column, including removing the border*/
#rightcolumn {border-left: none;}
#leftcolumn div.leftpadding {padding: 0;}
#leftcolumn h3 {text-align:center; margin:0 ; padding-top:0; padding-bottom:5px; color: #; font-size: 14px;}
#leftcolumn h3 a {margin:0 ; padding-top:0px; padding-bottom:5px; color: #; font-size: 14px;}
#leftcolumn ul {margin: 0 3px 5px 3px; padding: 0; border: 1px solid #99ca3b; font-size: 12px;}
#leftcolumn ul ul {border: none;} /*no border on nested ul's though*/
body.page_aboutsection #leftcolumn ul.leftmenu {display: none;} /*don't display the submenu in the about us section*/

/*Products in the listing pages should have a grey background*/
#rightcolumn div.product {background: none; border :1px solid #99ca3b;}

#footer {color: black; background:url(http://www.we-love-local.com/images/mnbg.jpg); border-top: none; border: 1px #99ca3b;}

/*Buttons in the right column (like add to basket) should have a border*/
#rightcolumn input.button {color: white; padding:0; border:1px solid black; background: #99ca3b;}
#wrapper {border: 0 solid white; background: white;}


/****************************************************** Far right column styles *******************************************************/
#rightcolumn div {border: 1px #99ca3b;}
/*#farrightcolumn div {padding-top: 15px;padding-left:3px;padding-right:3px;}*/
/*#farrightcolumn div div {margin:0 ;border: 1px solid #99ca3b; padding:0; color: white;}*/
/*#farrightcolumn h3 {margin:0 ; padding-left:35px;padding-top:7px;padding-bottom:5px; background: #9bbb59; color: white; font-size: 16px;background:url(/images/header-chicken.gif);}*/
/*#farrightcolumn img {border-bottom:1px solid #;margin:15px 7px 5px 11px;}*/
/*#farrightcolumn p {color:#; padding-left:2px;margin-bottom:0px; background: #99ca3b; padding-top:3px; padding-bottom:3px;}*/

/*On 21 July 2008, Paul redid these styles so that they don't need divs any more. The far right column has a width of 200px*/
/*which the h3 and p tags stretch to, leaving 194px after their 3px left and right margins. The image in the middle is 170px wide*/
/*and goes inside a p tag. It has -3 margins each side to overcome all but 1px of the paragraph's 4px padding. This leaves 22px of*/
/*space on the left and right of the image, so it has 11px white borders each side. There is also a style for the image in case it*/
/*is not in a paragraph tag (it should always be with the upgraded FCKeditor). This uses padding to make up the 22px. This method does not*/
/*require any divs, but means that the images are always displayed at 170px wide. This looks fine as long as the HTML has h3, then p.img, then p.*/
#farrightcolumn h3 {margin: 15px 3px 0 3px; padding: 7px 1px 5px 33px; background: #9bbb59; color: white; font-size: 16px; background:url(/images/header-chicken.gif);}
/*Just in case the image is not inside a paragraph tag*/
#farrightcolumn img {margin: 0 3px; padding: 11px; border: 1px solid #99ca3b; width:170px;}
#farrightcolumn p {color: white; margin: 0 3px; padding: 6px 4px; background: #99ca3b;}
#farrightcolumn p img {margin: 0 -3px; padding: 0; border: 11px solid white;}

#farrightcolumn p b {color: white ;font-size: 14px;}
#farrightcolumn p a {color: white; font-decoration: none;}
#farrightcolumn h3.apple {background:url(/images/header-apple.gif);}
#farrightcolumn h3.broccoli {background:url(/images/header-broccoli.gif);}
#farrightcolumn {min-height: 700px;}