*
{
margin:0;
padding:0;
}

/* force right scrollbar in non-ie browsers to prevent horizontal jumping */
html
{
height: 100%;
margin-bottom: 1px;
}

/* ~~~~~~~~~~~~~~~~~ GENERAL ~~~~~~~~~~~~~~~~~*/

body
{
height: 100%;
background: url("../images/bg_top.jpg") 0 0 repeat-x #fff;
text-align: left;
margin: 0;
padding: 0;
color: #171717;
font-family: trebuchet ms,arial,helvetica,sans-serif;
font-size: 1em;
line-height: 1em;
}

a:link,
a:visited
{
color: #e98214;
text-decoration: none;
}

a:hover,
a:active
{
color: #e98214;
text-decoration: underline;
}

img
{
border: 0;
}

.clear
{
clear: both;
}

.alignright
{
float: right;
}

.aligncenter
{
text-align: center;
}


/* ~~~~~~~~~~~~~~~~~ TYPOGRAPHY~~~~~~~~~~~~~~~~~*/

h1
{
text-align: right;
font-size: 1.4em;
color: #739826;
font-weight: normal;
margin: 5px 0 10px 0;
}

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active
{
color: #739826;
text-decoration: none;
}

h2
{
font-size: 1em;
font-weight: bold;
color: #739826;
border-top: 1px solid #bcbdbd;
margin: 1em 0 0.5em 0;
padding-top: 0.5em; 
}

h3
{
font-size: 1em;
font-weight: bold;
color: #785989;
}

h3.box
{
width: 548px;
background: #739826;
color: #fff;
font-size: 0.9em;
font-weight: bold;
padding: 2px;
margin: 1em 0 0 0;
position: relative;
float: left; /* http://www.positioniseverything.net/explorer/peekaboo.html */ 
}

.intro
{
font-size: 0.95em;
color: #000;
line-height: 1.45em;
}

.pop
{
font-weight: bold;
color: #787c71;
}

.small
{
font-weight: bold;
font-size: 0.8em;
color: #999a9a;
}

.overview
{
font-family: georgia, times,times new roman;
font-style: italic;
font-size: 1.2em;
color: #999a9a;
line-height: 1.25em;
margin: 0.4em 0 1em 0;
}

ul.benefits
{
margin-left: 20px;
list-style-image: url("../images/bullet.gif");
list-style-type: circle;
}

ul.benefits li
{
font-size: 0.85em;
line-height: 1.3em;
margin-bottom: 0.5em;
}

ul.list
{
margin-top: 1em;
margin-left: 20px;
list-style-image: url("../images/bullet.gif");
list-style-type: circle;
}

ul.list li
{
font-size: 0.95em;
line-height: 1.3em;
margin-bottom: 0.5em;
}

p 
/* this could cause some spacing issues in some browsers? added after builk of production -- always worth checking here if there's any problems */
{
line-height: 1.3em;
margin-bottom: 1em;
}




/* ~~~~~~~~~~~~~~~~~ SUBNAV ~~~~~~~~~~~~~~~~~*/

.subnav
{
font-size: 0.95em;
line-height: 1.45em;
text-align: right;
}

.subnav a:link,
.subnav a:visited
{
color: #999a9a;
text-decoration: none;
}

.subnav a:hover,
.subnav a:active
{
color: #999a9a;
text-decoration: underline;
}

.subnav .on a:link,
.subnav .on a:visited
{
color: #739826;
font-weight: bold;
text-decoration: none;
}

.subnav .on a:hover,
.subnav .on a:active
{
color: #739826;
font-weight: bold;
text-decoration: underline;
}


/* ~~~~~~~~~~~~~~~~~ STRUCTURAL ~~~~~~~~~~~~~~~~~*/


#wrapper 
{
min-width:772px;
min-height:100%;
}

#left 
{
width:50%; 
float:left; 
margin:0 -386px 0 0;
}

#left #center 
{
width:772px;  
float:right; 
margin:0 -386px 0 0;
background: #fff;
position: relative;
}

#right 
{
width:50%; 
float: right; 
margin:0 0 0 -386px; 
position: relative;
}

#right div 
{
height: 94px;
background: url("../images/bg_top-flat.gif") 0 0 repeat-x #fff;
margin:0 0 0 386px; 
position: relative;
}

/* ~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~*/

#header
{
width: 773px;
height: 132px;
background: url("../images/bg_top-flat.gif") 0 0 repeat-x #fff;
text-align: right;
position: relative;
}

#header .logo
{
width: 459px;
height: 132px;
background: url("../images/bg_header.jpg") 0 0 no-repeat;
text-align: left;
position: absolute;
top: 0;
left: 0;
}

#header .links
{
height: 22px;
position: absolute;
top: 94px;
right: 0px;
background: #9a9e92;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
}

#header .links a
{
font-size: 0.8em;
}

#header .links a:link,
#header .links a:visited
{
color: #fff;
text-decoration: none;
}

#header .links a:hover,
#header .links a:active
{
color: #fff;
text-decoration: underline;
}

#header .links ul
{
margin-left: 0;
padding: 0;
display: inline;
}

#header .links ul li
{
margin-left: 0;
padding: 0 0.5em 4px 0.5em;
border-left: 2px solid #fff;
list-style: none;
display: inline;
}

#header .links ul li.first
{
margin-left: 0;
padding: 0 0.5em 4px 0.5em;
border: 0;
list-style: none;
display: inline;
}


/* ~~~~~~~~~~~~~~~~~ BASKET ~~~~~~~~~~~~~~~~~*/

#basket
{
background: #d0dfbd;
border: 0px solid #bbb;
font-size: 0.75em;
margin: 7px 0 0 0;
padding: 10px;
}

#basket .left
{
float: left;
text-align: left;
width: 160px;
}

#basket .right
{
margin-left: 170px;
text-align: right;
}

#basket input
{
cursor: pointer;
}

/* ~~~~~~~~~~~~~~~~~ MAIN BODY STRUCTURE ~~~~~~~~~~~~~~~~~*/

#main
{
width: 773px;
text-align: left;
position: relative;
}

#main .left
{
width: 213px;
margin-top: -1em;
float: left;
position: relative;
}

#main .right
{
margin-left: 221px;
margin-top: 2.5em;
}


/* ~~~~~~~~~~~~~~~~~ CONTENT ~~~~~~~~~~~~~~~~~*/

#main .content
{
margin-left: 223px;
}



/* ~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~*/

div.footer
{
width: 773px;
background: #999a9a;
font-size: 0.72em;
color: #413f42;
text-align: center;
position: relative;
padding: 0.6em 0;
margin: 0.8em 0;
}

div.footer ul
{
margin-left: 0;
padding: 0;
display: inline;
}

div.footer ul li
{
margin-left: 0;
padding: 5em 0.3em;
list-style: none;
display: inline;
}

div.footer ul li.first
{
margin-left: 1em;
padding: 0 0.3em;
list-style: none;
display: inline;
}

div.footer ul a:link,
div.footer ul a:visited
{
color: #fff;
text-decoration: none;
}

div.footer ul a:hover,
div.footer ul a:active
{
color: #fff;
text-decoration: underline;
}


/* ~~~~~~~~~~~~~~~~~ CREDITS ~~~~~~~~~~~~~~~~~*/

div.credits
{
width: 773px;
font-size: 0.7em;
color: #a8a9a9;
text-align: center;
margin: 0.8em 0;
position: relative;
}

div.credits ul
{
margin-left: 0;
padding: 0;
display: inline;
font-size: 1.2em;
}

div.credits ul li
{
margin-left: 0;
padding: 0 0.6em;
border-left: 1px solid #a8a9a9;
list-style: none;
display: inline;
}

div.credits ul li.first
{
margin-left: 0;
padding: 0 0;
border-left: 0;
list-style: none;
display: inline;
}

div.credits a
{
color: #a8a9a9;
}

div.credits ul a:link,
div.credits ul a:visited
{
color: #a8a9a9;
text-decoration: none;
}

div.credits ul a:hover,
div.credits ul a:active
{
color: #a8a9a9;
text-decoration: underline;
}