html,body{margin:0;padding:0;height:100%;min-height:100%;}
/* STRUCTURE */
body {
color:#336699;
font-family: Avenir, Helvetica, Arial, sans-serif;
font-size: 14px;
text-decoration: none;
}
#wrapper {
width: 820px;
margin:0 auto;
}
/* HEADERS */
#top-border {
background-image:url(../images/top-border.jpg);
background-repeat:no-repeat;
margin-top: 15px;
height: 72px;
}
#bot-border {
background-image:url(../images/bot-border.jpg);
background-repeat:no-repeat;
height: 72px;
margin-top: 5px;
}
h1 { padding:0 0 20px 0; margin: 0 auto; text-align: center; width: 465px; height: 113px; }
/* NAVIGATION - with Image backgrounds */
#nav-main { width: 469px; text-align: center; margin: 0 auto; }
#nav-sub { width: 367px; text-align: center; margin: 0 auto; }
#nav1 { height: 16px; padding: 0; text-indent: -9999px; overflow: hidden; margin: 15px 0 15px 0; position: relative; }
#nav1 li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
#nav1 a { height: 16px; display: block; }
#nav2 { height: 15px; padding: 0; text-indent: -9999px; overflow: hidden; margin: 15px 0 15px 0; position: relative; }
#nav2 li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
#nav2 a { height: 15px; display: block; }
/* BUTTONS */
#home { left: 0px; width: 50px; }
#divider { left: 50px; width: 28px; background: url(../images/nav/nav.jpg) -50px 0 no-repeat; }
#foods { left: 78px; width: 56px; }
#divider2 { left: 134px; width: 28px; background: url(../images/nav/nav.jpg) -134px 0 no-repeat; }
#buy { left: 162px; width: 31px; }
#divider3 { left: 193px; width: 27px; background: url(../images/nav/nav.jpg) -193px 0 no-repeat; }
#news { left: 220px; width: 47px; }
#divider4 { left: 267px; width: 27px; background: url(../images/nav/nav.jpg) -267px 0 no-repeat; }
#recipes { left: 294px; width: 65px; }
#divider5 { left: 359px; width: 27px; background: url(../images/nav/nav.jpg) -359px 0 no-repeat; }
#about { left: 386px; width: 83px; }
#newsletter { left: 0px; top: 32px; width: 100px; }
#d1 { left: 100px; width: 26px; background: url(../images/nav/nav.jpg) -100px -32px no-repeat; }
#blog { left: 126px; top: 32px; width: 40px; }
#d2 { left: 166px; width: 25px; background: url(../images/nav/nav.jpg) -166px -32px no-repeat; }
#twitter { left: 191px; top: 32px; width: 66px; }
#d3 { left: 257px; width: 25px; background: url(../images/nav/nav.jpg) -257px -32px no-repeat; }
#facebook { left: 282px; top: 32px; width: 85px; }
/* LINK STATE */
#home a { left: 0px; width: 50px; background: url(../images/nav/nav.jpg) 0 0 no-repeat; }
#foods a { left: 78px; width: 56px; background: url(../images/nav/nav.jpg) -78px 0 no-repeat; }
#buy a { left: 162px; width: 31px; background: url(../images/nav/nav.jpg) -162px 0 no-repeat; }
#news a { left: 220px; width: 47px; background: url(../images/nav/nav.jpg) -220px 0 no-repeat; }
#recipes a { left: 294px; width: 65px; background: url(../images/nav/nav.jpg) -294px 0 no-repeat; }
#about a { left: 386px; width: 83px; background: url(../images/nav/nav.jpg) -386px 0 no-repeat; }
#newsletter a { left: 0px; top: 32px; width: 100px; background: url(../images/nav/nav.jpg) 0 -32px no-repeat; }
#blog a { left: 126px; top: 32px; width: 40px; background: url(../images/nav/nav.jpg) -126px -32px no-repeat; }
#twitter a { left: 191px; top: 32px; width: 66px; background: url(../images/nav/nav.jpg) -191px -32px no-repeat; }
#facebook a { left: 282px; top: 32px; width: 85px; background: url(../images/nav/nav.jpg) -282px -32px no-repeat; }
/* OVER STATES */
#home a:hover { left: 0px; width: 50px; background: url(../images/nav/nav.jpg) 0 -16px no-repeat; }
#foods a:hover { left: 78px; width: 56px; background: url(../images/nav/nav.jpg) -78px -16px no-repeat; }
#buy a:hover { left: 162px; width: 31px; background: url(../images/nav/nav.jpg) -162px -16px no-repeat; }
#news a:hover { left: 220px; width: 47px; background: url(../images/nav/nav.jpg) -220px -16px no-repeat; }
#recipes a:hover { left: 294px; width: 65px; background: url(../images/nav/nav.jpg) -294px -16px no-repeat; }
#about a:hover { left: 386px; width: 83px; background: url(../images/nav/nav.jpg) -386px -16px no-repeat; }
#newsletter a:hover { left: 0px; width: 100px; background: url(../images/nav/nav.jpg) 0 -47px no-repeat; }
#blog a:hover { left: 126px; width: 40px; background: url(../images/nav/nav.jpg) -126px -47px no-repeat; }
#twitter a:hover { left: 191px; width: 66px; background: url(../images/nav/nav.jpg) -191px -47px no-repeat; }
#facebook a:hover { left: 282px; width: 85px; background: url(../images/nav/nav.jpg) -282px -47px no-repeat; }
/* MAINFRAME */
#mainframe1 { height: 270px; line-height: 175%; padding-bottom: 20px; } /* For the Index page, setting a fixed height. */
#leftcol { float:left; width:495px; padding: 0; margin: -17px 0 0 0; } /* For the Index page */
#rightcol { width:295px; float: right; color: #444444; } /* For the Index page */
#list-frame { line-height: 175%; height: 650px; margin: 0; list-style: none; display: block; } /* For the "Foods" page */
#mainframe { line-height: 175%; margin: 0; }
#content { width: 600px; margin: 0 auto; }
.drop { margin-top: 4px; padding: 0 8px 0 0; }
.copy { margin: 0; display: inline; }
.section { padding: 15px 0 0 0; display: block; list-style: none; }
.title { font-weight: bold; display: block; text-transform: uppercase; padding: 15px 0 0 0; }
.section li { font-weight: bold; display: block; padding: 10px 0 0 0; list-style: none; }
.recipe { display: block; text-indent: 25px; padding: 0; margin: 10px 0 0 0; list-style: none; }
.how-to { list-style: decimal; margin: 0; padding: 0; }
.how-to ol { padding: 0; text-indent: 0; margin: 0 0 0 25px;}
#lists { width: 600px; height: auto; margin: 0 auto; list-style: none; display: block; text-align: center; }
.col1 {
width: 280px;
padding: 0 10px 0 10px;
text-align: center;
float: left;
}
.col2 {
width: 280px;
padding: 0 10px 0 10px;
text-align: center;
float: right;
}
.uppercase {
text-transform: uppercase;
font-family: "Gill Sans", "Century Gothic", Geneva, Arial, Helvetica, sans-serif;
letter-spacing: .95px;
}
/* PAGE BOTTOMS */
#jar {
height:116px;
text-align: center;
display: block;
width: 132px;
margin: 0 auto;
background-image: url(../images/jar.jpg);
margin-top: 20px;
background-repeat:no-repeat;
}
.copyright {
font-size: 10px;
margin-top: 9px;
line-height: 120%;
text-align: center;
padding-bottom: 20px;
}
/* MISCELLANEOUS */
img { border: none; margin:0; padding:0; }
/* LINK STYLES */
a { color: #3399CC; }
#mainframe a { text-decoration: none; }
#mainframe a:hover { border-bottom: 1px dotted; text-decoration: none; }
.copyright a { text-decoration: none; }
.copyright a:hover { border-bottom: 1px dotted; text-decoration: none; }