/*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-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
/* remember to define focus styles! */
:focus {outline: 0}
body {line-height: 1}
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: "" ""}

em {font-style: italic}

/*handy*/
.right {float: right}
.left {float: left}
.center {text-align: center}
.clearboth {clear: both}

/*clearfix*/
.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;}
/* End hide from IE-mac */

/*structure*/
body {font: normal 12px arial,helvetica,sans-serif; background: #000; color: #e6e6e6; line-height: 1.35em}
#container {margin: 0 auto; width: 75em}

ul {padding: 0 0 1em 1em; list-style-type: disc}
a:link, a:visited, a:active {color: #ccff66; text-decoration: none} 
a:hover {text-decoration: underline; color: #ffcc33}
p {margin-bottom: 0.7em}
.imageCaption {font-style: italic; font-size: 0.92em; color: #ccc}

#header {background: url(../images/border-header.gif) repeat-x bottom; padding-bottom: 0.7em}
#nav {position: relative; clear: both; list-style: none; font-size: 1.05em; font-weight: bold; padding: 0}
#nav li {float: left;}
#nav li a {display: block; text-decoration: none; color: #fff; padding: .25em 1.45em}
#nav li a:hover {color: #ccff66}
#nav li a.selected {color: #ffcc33}
#nav li a.first {padding-left: 0}
#nav li a.last {padding-right: 0}

#leftNav {position: relative; clear: both; list-style: none; font-weight: bold; padding: 0; margin-bottom: 1em}
#leftNav li a {display: block; text-decoration: none; color: #000; width: 14.17em; background: #96d852; line-height: 2.08em; margin-top: 1px; padding-left: 0.83em}
#leftNav li a:hover {background: #ccff66; margin-top: 1px; line-height: 2.08em}
#leftNav li a.selected {background: #ffca33!important; margin-top: 1px; line-height: 2.08em}

#contentpage h1 {color: #ffcc33; font-size: 1.83em; padding: 1em 0 1.2em 0}
#homepage h1, p.logo {background: url(../images/logo.gif) no-repeat; width: 322px; height: 104px; display: block; margin: 0 0 2.64em 0; float: left}
#homepage h1 a, p.logo a {display: block; width: 322px; height: 104px; text-indent:-999em; overflow: hidden}
#homepage h2.strap, p.strap {background: url(../images/strap.gif) no-repeat; width: 260px; height: 96px; display: block; margin: 0; float: right}
#homepage h2.strap span, p.strap span {display: block; width: 260px; height: 96px; text-indent:-999em; overflow: hidden}

p.flashAlt {background: url(../images/home-anim/static.jpg) no-repeat; width: 900px; height: 200px; display: block; margin: 0}
p.flashAlt span {display: block; width: 900px; height: 200px; text-indent:-999em; overflow: hidden}

.availAlt {padding: 3em 3em 3em 0}
h2 {color: #ffcc33; font-size: 1.17em; margin-bottom: 0.7em}
h2.intro {color: #fff}

/*homepage*/
#homeMain {margin-bottom: 3.33em}
.homeCol {float: left; width: 23.33em; margin-right: 2.5em}
.homeCol.right {margin-right: 0}
.homePanel {margin-bottom: 2em}
.homePanel h2 {font-size: 1em; margin-bottom: 0}
.homePanel h2 a {color: #ffcc33}
.homePanel h2 a:hover {color: #ccff66}
.homePanel img {float: left; margin-right: 1.25em}
.homePanel a img  {border: 1px #000 solid}
.homePanel a:hover img {border: 1px #ccff66 solid}
.homePanel a.link {color: #e6e6e6; text-decoration: none}

/*footer*/
#footer {background: url(../images/border-header.gif) repeat-x top; margin-top: 2em; padding: 2em 0; font-size: 0.92em}
#footer p.right {text-align: right; color: #999}
#footer a {color: #ccff66}
#footer a.subtle {color: #666666}

/*hebe*/
#hebeLeft {float: left}
#hebeRight {float: right; width: 23.33em}
.hebeCol {float: left; margin-right: 0.92em}

.col3 {float: left; width: 23.33em; margin-right: 2.5em}
.col3.last {margin-right: 0}

.colwaterMid {float: left; width: 335px; margin-right: 2.5em}
.colwaterRight {float: left; width: 225px}

.margin21 {margin-top: 11px}
.margin19 {margin-top: 9px}
.margin20 {margin-top: 20px}
.margin17 {margin-top: 17px}
.featurePanel {background: #262626; padding: 1.8em 2.42em 11px}
.featurePanel.mission {margin-top: 20px}
.width180 {width: 180px}

.stockists h2 {margin-bottom: 0}

#availFlash {float: left; width: 50em}
#availRight {float: left; width: 22.5em; padding-left: 2.5em}

.newsItem {background: url(../images/border-grey.gif) repeat-x top; padding: 2.5em 0 2em 0}
* html .newsItem {padding: 2.5em 0 0 0}
.newsLeft {width: 310px; float: left}
.newsRight {width: 49em; float: right}
.newsRight h2 {text-transform: uppercase; margin-bottom: 0}
p.date {color: #ff9933}

.contactImage {float: left; margin: 0 65px 0 60px}
.contact {margin-top: 40px}

#contentpage h1.leftH1 {float: left; padding: 1em 0 0.5em}
#contentpage h2.leveLheader {float: left; width: 280px; color: #a3e560; font-size: 1.83em; font-weight: normal; padding: 1.05em 0 0.5em .3em; margin-bottom: 0}
p.intro {color: #fff; font-size: 1.17em; font-weight: bold; margin-bottom: 0.7em}

#hebeIntro {clear: both; background: url(../images/border-hebe.gif) repeat-x top; padding-top: 1em}

#hebeIntroLeft {clear: both; width: 36.67em; float: left}
#hebeIntroLeft h2 {margin: 1em 0 0 0}
#hebeIntroRight {width: 36.67em; float: right}

.featurePanel.hebe {padding: 1.67em}
.hebePanelRight {float: right; width: 242px}
.hebePanel p {margin-bottom: 0}
.hebePanel img {float: left}
.hebePanel.top {background: url(../images/border-hebe.gif) repeat-x bottom; padding-bottom: 1.67em}
.hebePanel.bottom {padding-top: 1.67em}

#hebeCat {clear: both; background: url(../images/border-hebe.gif) repeat-x top}
.hebeText {float: right; width: 281px}
.hebeItem {width: 440px; float: left}
.hebeItem.right {padding-left: 20px}
.hebeItem.left {clear: both}
.hebeItem p {margin-bottom: 0}
.hebeItem img {float: left}

.hebeRow {background: url(../images/border-hebe.gif) repeat-x bottom; padding: 20px 0}
.hebeRow.last {background: none; padding: 20px 0 0 0}

#hebeNav {float: right; list-style: none; font-weight: bold; padding: 0; margin: 7px 0}
#hebeNav li {float: left; margin-left: 1px}
#hebeNav li a {display: block; float: left; text-align: center; text-decoration: none; color: #000; width: 62px; background: #96d852; padding-top: 8px; height: 39px}

#hebeNav li a:hover {background: #ccff66}
#hebeNav li a.selected {background: #f4c231}