/** humber vhb css **/

/* by boris grudinin */
/* http://www.dunwoody.co.uk/ */
/* ---------------------------- */

/* ---------------------------- */
/*** main styles ***/

html { background: url(/images/frontend/bg/bg-html.jpg) center top no-repeat #ffffff; font-family: Trebuchet MS, Helvetica, sans-serif; }
body { background: url(/images/frontend/bg/bg-main.jpg) center 15px no-repeat; } 

div.hr { width: 100%; height: 1px !important; background: url(/images/frontend/bg/bg-dotted-line-horiz-dark.gif) left top repeat-x; clear: both; margin-bottom: 15px; }
div.hr hr { display: none; }
div.light { background: url(/images/frontend/bg/bg-dotted-line-horiz-light.gif) left top repeat-x; } 

.left { float: left; }
.right { float: right; }
.clear { clear: both; }

a { }
a, button { outline: none; }
a:hover { text-decoration: none; }

strong { font-weight: bold; }
em { font-style: italic; }

/* ---------------------------- */
/*** main divs ***/

div#main { position: relative; width: 859px; margin: 0 auto; padding-top: 15px; text-align: left; }
div#top { position: relative; height: 45px; padding-bottom: 80px; }
body#home div#top { position: relative; height: 90px; padding-bottom: 80px; }
div#content { min-height: 350px; }
div#content div.wrapper { position: relative; overflow: hidden; background: #ffffff; }
div#footer { background: url(/images/frontend/bg/bg-thick-divider.jpg) center top no-repeat; padding: 25px 0px 30px; margin-top: 25px; font-size: 0.85em; }

/* ---------------------------- */
/*** top ***/

div#top a.logo { float: left; background: url(/images/frontend/humber-logo.jpg) left top no-repeat; width: 114px; height: 43px; margin-top: 20px; }
div#top a.logo:hover { background-position: left bottom; }
div#top a.logo span { display: block; text-indent: -9999px; }

div#top ol.nav { float: right; overflow: hidden; margin-top: 30px; }
div#top ol.nav li { float: left; margin-left: 8px; padding-left: 8px; background: url(/images/frontend/bg/bg-nav-divider.gif) left top no-repeat; }
div#top ol.nav li a { color: #f7941d; font-size: 1.1em; text-transform: lowercase; }
div#top ol.nav li a:hover { color: #5d4439; }
div#top ol.nav li a.current { font-weight: bold; color: #5d4439; text-decoration: none; }
div#top ol.nav li.first { background: none; padding-left: 0px; }

/* ---------------------------- */
/*** general stuff ***/

div.wrapper div.col-left2 { float: left; width: 237px; margin: 20px 0px; padding-left: 20px; }
div.wrapper div.col-right2 { float: right; width: 541px; background: url(/images/frontend/bg/bg-dotted-line-vert-dark.gif) left top repeat-y; padding: 0px 20px 10px; margin: 20px 0px 20px; }
div.wrapper div.col-centre { padding: 20px; }

div#content h1 { color: #ffffff; font-size: 3em; letter-spacing: -0.1em; margin: -5px 0px 12px; }
div#content h2 { color: #f7941d; font-size: 2.2em; letter-spacing: -0.1em; margin-bottom: 12px; } 
div#content h3 { text-transform: uppercase; color: #5d4439; font-size: 1.15em; font-weight: bold; letter-spacing: -0.05em; margin-bottom: 12px; }
div#content div.col-left3 h3 { background: url(/images/frontend/bg/bg-dotted-line-horiz-dark.gif) left bottom repeat-x; padding-bottom: 2px; margin-bottom: 9px; }

div#content p { color: #5d5c5c; font-size: 0.95em; line-height: 1.55em; margin-bottom: 15px; }
div#content p.large { font-size: 1.1em; }
div#content p.small { font-size: 0.85em; line-height: 1.4em; }
div#content p span.date { font-weight: bold; color: #f7941d; font-size: 0.85em; }
div#content p a { color: #f7941d; }

div#content div.brown-box { background: #5d4439; padding: 20px;  }
div#content div.brown-box p { color: #ffffff; font-size: 1.3em; line-height: 1.5em; margin-bottom: 0px; }
div#content div.brown-box p a { color: #f7941d; }

div.col-left2 ol.subnav { }
div.col-left2 ol.subnav li { background: url(/images/frontend/bg/bg-dotted-line-horiz-dark.gif) left bottom repeat-x; padding-bottom: 6px; margin-bottom: 6px; }
div.col-left2 ol.subnav li a { display: block; height: 20px; font-size: 1.1em; color: #f7941d; background: url(/images/frontend/buttons/btn-subnav.jpg) right top no-repeat; }
div.col-left2 ol.subnav li a:hover { color: #5d4439; background-position: right bottom; }
div.col-left2 ol.subnav li a.current { font-weight: bold; color: #5d4439; text-decoration: none; background-position: right bottom; }
div.col-left2 ol.subnav li a.current:hover { color: #f7941d; }
div.col-left2 ol.subnav li.header a { font-size: 1.5em; background: none; height: auto; font-weight: bold; color: #5d4439; text-decoration: none; }
div.col-left2 ol.subnav li ol.subnav { margin: 6px 0px -12px 0px; background: url(/images/frontend/bg/bg-dotted-line-horiz-dark.gif) left top repeat-x; padding: 10px 0px 0px 20px; }
div.col-left2 ol.subnav li ol.subnav li a { background: none; font-size: 0.85em; text-transform: uppercase; } 

div#content ol.pages { overflow: hidden; margin: 4px 0px 12px; float: right; }
div#content ol.pages li { float: left; margin-left: 5px; font-size: 0.95em; }
div#content ol.pages li.header { line-height: 20px; font-weight: bold; color: #f7941d; }
div#content ol.pages li a { display: block; background: #5d4439; color: #ffffff; text-decoration: none; width: 20px; line-height: 20px; text-align: center; }
div#content ol.pages li a:hover,
div#content ol.pages li a.current { background: #f7941d; }

div#content img.img-strip { margin-bottom: -3px; }

div.col-right2 ul { margin-bottom: 15px; }
div.col-right2 ul li { margin: 0px 0px 5px 15px; line-height: 1.4em; list-style: disc; color: #5d5c5c; }

div.col-right2 ul.herbs { overflow: hidden; }
div.col-right2 ul.herbs li { margin: 0px 15px 10px 0px; list-style: none; width: 170px; height: 395px; float: left; }
div.col-right2 ul.herbs li.last { margin-right: 0px; }
div.col-right2 ul.herbs li div p { padding: 0px 10px; line-height: 1.4em !important; }
div.col-right2 ul.herbs li div p span { display: block; font-size: 0.85em; color: #9d9c9c; }
div.col-right2 ul.herbs li div p span.intro { font-size: 0.9em; color: #5d5c5c; margin-bottom: 4px; }
div.col-right2 ul.herbs li div p strong { color: #c1ce2f; }
div.col-right2 ul.herbs li div p em { display: block; font-size: 1.3em; color: #f7941d; letter-spacing: -0.05em; margin: 0px -2px 4px 0px; }
div.col-right2 ul.short li { height: 240px; }

div#content table { border: 1px solid #dedede; border-bottom: none; margin-bottom: 15px; }
div#content table h3 { font-size: 0.95em; margin-bottom: 0px; }
div#content table tr { border-bottom: 1px solid #dedede; }
div#content table th { background: #f7941d; padding: 10px 6px 7px; color: #ffffff; font-size: 1.4em; letter-spacing: -0.1em; }
div#content table th.col1 { width: 110px; }
div#content table th.col2 { width: 130px; }
div#content table td { padding: 6px 6px 7px; line-height: 1.5em; color: #5d5c5c; font-size: 0.85em; }

div.col-right2 form { } 
div.col-right2 form ul { overflow: hidden; width: 541px; margin-bottom: 0px; }
div.col-right2 form ul li { width: 258px; margin: 0px 0px 8px 0px; list-style: none; }
div.col-right2 form ul li.right { margin-right: 3px; }
div.col-right2 form ul li.full-width { clear: both; width: 539px; }
div.col-right2 form ul li label { display: block; font-size: 0.85em; color: #5d4439; letter-spacing: -0.05em; margin-bottom: 2px; }
div.col-right2 form ul li input.text { display: block; width: 252px; padding: 3px; font-size: 0.95em; color: #5d5c5c; }
div.col-right2 form ul li select { width: 262px; }
div.col-right2 form ul li.full-width input.text { width: 532px; }
div.col-right2 form ul li.full-width textarea { display: block; width: 532px; height: 90px; padding: 3px; font-size: 0.95em; color: #5d5c5c; line-height: 1.4em; }
div.col-right2 form ul li button { float: right; text-transform: uppercase; font-size: 0.85em; color: #4d4c4c; padding: 3px 2px; }

div.error h2 { color: #e00909 !important; }
div.error ul { margin-bottom: 10px; }
div.error ul li { margin-left: 15px; list-style: disc; color: #e00909; }

div.col-right2 a.apply-for-position { display: block; width: 408px; height: 90px; background: url(/images/frontend/buttons/btn-apply-for-position.jpg) left top no-repeat; margin-left: 52px; }
div.col-right2 a.apply-for-position:hover { background-position: left bottom; }
div.col-right2 a.apply-for-position span { display: block; text-indent: -9999px; }

a.loginbtn { display: block; width: 267px; height: 90px; background: url(/images/frontend/buttons/btn-login.jpg) left top no-repeat; margin-left: 52px; }
a.loginbtn:hover { background-position: left bottom; }
a.loginbtn span { display: block; text-indent: -9999px; }

/* ---------------------------- */
/*** homepage ***/

div#content div.homepage-splash { position: relative; height: 511px; }
div#content div.homepage-splash img { position: absolute; left: 0px; top: 0px; }
div#content div.homepage-splash a.more { position: absolute; right: 40px; bottom: 266px; display: block; width: 120px; height: 20px; background: url(/images/frontend/homapage-cta/find-out-more.jpg) left top no-repeat; }
div#content div.homepage-splash a.more:hover { background-position: left bottom; }
div#content div.homepage-splash a.more span { display: block; text-indent: -9999px; }

div#content ul.homepage-cta { position: absolute; bottom: 22px; left: 28px; width: 804px; height: 112px; }
div#content ul.homepage-cta li { float: left; }
div#content ul.homepage-cta li.buy { margin: 0px 46px 0px 70px; }
div#content ul.homepage-cta li.view { margin-right: 56px; }
div#content ul.homepage-cta li a { display: block; height: 112px; }
div#content ul.homepage-cta li.buy a { background: url(/images/frontend/homapage-cta/buy.png) left top no-repeat; width: 167px; }
div#content ul.homepage-cta li.view a { background: url(/images/frontend/homapage-cta/view.png) left top no-repeat; width: 250px; }
div#content ul.homepage-cta li.supply a { background: url(/images/frontend/homapage-cta/supply.png) left top no-repeat; width: 144px; }
div#content ul.homepage-cta li a:hover { background-position: left bottom; }
div#content ul.homepage-cta li a span { display: none; }

div.wrapper div.col-left3 { width: 408px; float: left; background: url(/images/frontend/bg/bg-dotted-line-vert-dark.gif) right top repeat-y; padding-right: 20px; margin: 12px 20px 0px 0px; }
div.wrapper div.col-right3 { width: 408px; float: right; margin: 12px 0px 0px 0px; }
div.wrapper div.fresh-herbs { width: 270px; float: right; }
div.wrapper div.fresh-herbs a { display: block; width: 270px; height: 225px; background: url(/images/frontend/homapage-cta/fresh-herbs.jpg) left top no-repeat; }
div.wrapper div.fresh-herbs a:hover { background-position: left bottom; }
div.wrapper div.fresh-herbs a span { display: block; text-indent: -9999px; }

div.wrapper div.col-left3 div.hr { margin-bottom: 8px; }
div.wrapper div.col-left3 p,
div.wrapper div.col-right3 p { margin-bottom: 8px !important; }
div.wrapper a.more { background: url(/images/frontend/icons/icon-small-arrow-orange.gif) left center no-repeat; padding-left: 11px; color: #5d4439; font-weight: bold; font-size: 0.95em; }

div.wrapper ul.news {}
div.wrapper ul.news li { background: url(/images/frontend/bg/bg-dotted-line-horiz-dark.gif) left bottom repeat-x; padding-bottom: 8px; margin: 0px 0px 5px 0px; list-style: none; }
div.wrapper ul.news li span.date { display: block; font-weight: bold; color: #f7941d; font-size: 0.85em; margin-bottom: 4px; }
div.wrapper ul.news li a { display: block; line-height: 1.4em; font-size: 0.95em; color: #5d4439; }
div.wrapper ul.news li.header a { font-size: 1.5em; background: none; height: auto; font-weight: bold; color: #5d4439; text-decoration: none; }
div.wrapper ul.news li.header a:hover { color: #f7941d; }
div.wrapper ul.news li.no-bg { background: none; padding-bottom: 5px; }

/* ---------------------------- */
/*** products ***/

div.wrapper ul.product-cta { overflow: hidden; width: 541px; height: 90px; background: url(/images/frontend/bg/bg-product-cta.jpg) 0px 4px no-repeat; margin-bottom: 14px; padding-top: 6px; }
div.wrapper ul.product-cta li { float: left; margin: 0px 0px 0px 68px; list-style: none; }
div.wrapper ul.product-cta li a { display: block; height: 90px; }
div.wrapper ul.product-cta li a.buy { width: 170px; background: url(/images/frontend/buttons/product-cta-buy.png) left top no-repeat; }
div.wrapper ul.product-cta li a.supply { width: 150px; background: url(/images/frontend/buttons/product-cta-supply.png) left top no-repeat; }
div.wrapper ul.product-cta li a:hover { background-position: left bottom; }
div.wrapper ul.product-cta li a span { display: block; text-indent: -9999px; }

/* ---------------------------- */
/*** locations ***/

div.wrapper ul#locations { float: left; width: 240px; margin-bottom: 0px; }
div.wrapper ul#locations li { border-bottom: 1px solid #eeeeee; padding-bottom: 5px; margin: 0px 0px 5px 0px; list-style: none; }
div.wrapper ul#locations li a { display: block; line-height: 20px; font-size: 1.1em; color: #f7941d; font-weight: bold; cursor: pointer; background: url(/images/frontend/buttons/btn-down-arrow.jpg) right top no-repeat; }
div.wrapper ul#locations li a.active,
div.wrapper ul#locations li a:hover { color: #5d4439; background-position: right bottom; }
div.wrapper ul#locations li div { width: 240px; }
div.wrapper ul#locations li div p { margin-bottom: 6px; }
div.wrapper ul#locations li div p.small { margin-bottom: 0px; }
div.wrapper ul#locations li div div { margin-bottom: 6px !important; }

div.wrapper div#map { float: right; width: 280px; height: 310px; }
div#map div#logocontrol,
div#map span,
div#map a { display: none; }

/* ---------------------------- */
/*** suppliers section ***/

div.col-centre form { display: block; background: url(/images/frontend/bg/bg-form-box.jpg) left top no-repeat; width: 288px; height: 150px; margin-left: 254px; padding: 35px 30px 30px 33px; } 
div.col-centre form ul { overflow: hidden; margin-bottom: 0px; }
div.col-centre form ul li { position: relative; overflow: hidden; width: 279px; margin: 0px 0px 8px 0px; list-style: none; }
div.col-centre form ul li.right { margin-right: 3px; }
div.col-centre form ul li label { display: block; font-size: 1.05em; color: #737772; letter-spacing: -0.05em; margin-bottom: 2px; }
div.col-centre form ul li input.text { display: block; width: 270px; padding: 3px; font-size: 0.95em; color: #5d5c5c; }
div.col-centre form ul li button { float: right; text-transform: uppercase; font-size: 0.85em; color: #4d4c4c; padding: 3px 2px; }
div.col-centre form ul li a { position: absolute; bottom: 5px; left: 0px; color: #888b88; font-size: 0.95em; }
div.col-centre form ul li span { display: block; font-size: 0.95em; line-height: 1.4em; color: #90948f; margin: 8px 0px 3px; }

/* ---------------------------- */
/*** footer ***/

div#footer p { color: #5d5c5c; margin-bottom: 14px; }
div#footer a { color: #5d4439; }
div#footer ul { overflow: hidden; }
div#footer ul li { float: left; margin-left: 8px; }
div#footer ul li a { text-transform: lowercase; }