@charset "UTF-8";
/*
 * hum purple = #4c2177
 * orange = #fbad22
 * brown = #400000
 * beige = #e7e2c5 
 */
@media screen, print, tv, projection {
    .hide {width:0;height:0;overflow:hidden}
    .hidden {width:0;height:0;overflow:hidden}
}
/*
 * Basic Styles
 */
body {font-family:arial, helvetica, sans-serif;margin:0;padding:0}
@media print{
    body {font-size:16pt}
}
@media screen, print, tv, projection {
    body {font-size:10px}
}
body * {margin:0;padding:0}
img, a img, fieldset {border:none}
a {color:#000;text-decoration:underline}
a:hover {}
h1, h2, h3, h4, h5, h6, legend {margin:0;padding:0;font-family:arial,helvetica,sans-serif}
h1, h2, h3 {color:#400000}
@media print {
    h2, h3, h4, h5, h6, legend {color:#000}
}
ul {list-style-type:none}
ul li {list-style-position:outside;}

p.intro {font-size:1.5em;color:#400000}
cite {font-weight:bold;color:#400000;font-style:normal;font-size:1.1em;text-align: right;display:block;width:100%}
blockquote {font-style:italic;font-size:1.1em}
strong {color:#400000}
div.clear {width:0 !important;height:0 !important;display:block !important;float:none !important;clear:both !important}
address {font-style:normal}

p.justify, li.justify {float:none;clear:both;}
div.justifyleft {text-align:left;float:left;clear:left;}
div.justifyright {text-align:right;float:right;clear:right;}


/*
 * Main Content Wrapper div#wrapper
 * (Everything sits inside this, used to make sure we keep every thing centred because IE6 is poo)
 */
@media screen, tv, projection {
    div#wrapper {margin:0;padding:0;position:absolute;left:50%;margin-left:-349px}
}

/*
 * (Almost) Main Content Wrapper div#container
 * (Everything sits inside this)
 */ 
@media screen, tv, projection {
    div#container {margin:40px 0 0 0;width:698px;padding:0 12px;background:url('../img/right-shadow.gif') top right repeat-y}
}

/*
 * Mast Head div#masthead
 */
div#masthead {background:#400000;color:#fff}
div#masthead h1 {margin:0;padding:0}
div#masthead h1 img {margin:0;padding:0}
@media screen, tv, projection {
    div#masthead {width:698px;height:131px;margin-right:-12px;padding-right:12px;background:#400000 url('../img/top-right-shadow.gif') top right no-repeat}
    div#masthead h1 img {float:right;margin:17px 27px 0 0}
    div#masthead p img {margin:46px 0 0 23px;font-size:2em}
    div#masthead a {display:block;margin:0 0 0 -349px;padding:0;width:698px;height:131px;position:absolute;top:40px;left:50%;color:#fff}
}




/*
 * Primary Navigation div#primarymenu
 */
div#primarymenu {}
@media print {
    div#primarymenu {display:none}
}
@media screen, tv, projection {
    div#primarymenu {background:#fbad22;color:#fff;width:678px;min-height:29px;border-top:1px solid #fff;border-bottom:1px solid #fff;overflow:hidden;padding:0 0 0 20px}
    div#primarymenu li {float:left;display:block;height:17px;margin:0 15px 0 0;padding:8px 0 4px 0}
    div#primarymenu a {display:block;color:#fff;text-decoration:none;font-size:1.2em;height:17px;padding:0 0 0 10px;background:url('../img/menu-arrow.gif') 0 5px no-repeat}
    div#primarymenu a:hover {text-decoration:underline}
}
/*
 * Section Navigation div#sectionmenu
 */
div#sectionmenu {} 
@media print {
    div#sectionmenu {display:none}
}
@media screen, tv, projection {
    div#sectionmenu ul {width:658px;height:30px;border-bottom:1px solid #fff;background:#400000;padding-left:40px}
    div#sectionmenu li {float:left;display:block;height:17px;margin:0 15px 0 0;padding:8px 0 4px 0;color:#fff;white-space:nowrap;}
    div#sectionmenu a {color:#fff;text-decoration:none;display:block;font-size:1.2em;height:17px;padding:0 0 0 10px;background:#400000 url('../img/sub-menu-arrow.gif') 0 5px no-repeat}
}

body.home div#sectionmenu {display:none}

/*********************************************
 * Main Area for displaying content div#main *
 *                                           *
 * We have some special styles for certain   *
 * pages. The home page in particular. Note  *
 * that on the home page we want to try to   *
 * pass all the nice styling to the printer  *
 * too.                                      *
 *********************************************/ 
@media screen, tv, projection {
     div#main {font-size:1.1em;color:#4e4d4d;background:#e7e2c5 url('../img/beer-background.jpg') top left no-repeat;padding:30px 0 22px 0}
     body.home div#main {padding:0;background-image:none}
     div#main h2 {font-size:1.1em;font-weight:bold}
}

/*
 * Main Content - the main body of text goes here div#maincontent
 */
@media screen, tv, projection {
    div#maincontentwrapper {}
    img#largeimage {float:left;border-right:1px solid #fff}
    body.home div#freetrialpromo {width:174px;height:255px;overflow:hidden;float:left;clear:right;font-family:helvetica, arial, sans-serif;padding:10px}
    body.home div#freetrialpromo h2, div#freetrialpromo p {margin-bottom:10px}
    body.home div#freetrialpromo img {float:right;margin:-28px -5px 0 0}
    div#maincontent {clear:both;float:none;border-top:1px solid #e7e2c5;width:626px;margin:0 22px 0 22px;background:#fff url('../img/corner.gif') bottom right no-repeat;padding:0 13px 13px 13px;color:#000;font-size:1.1em}
    div#maincontent p, div#maincontent ul, div#maincontent ol, div#maincontent h3, div#maincontent h4 {margin-bottom:10px}
    div#maincontent h3 {font-size:1.2em}
    div#maincontent h4 {font-size:1.1em}
    /*body.home div#maincontent {font-family:arial, helvetica, sans-serif;border-top:1px solid #fff;width:698px;background:none;margin:0;padding:0}
        body.home div#maincontent div {background:#fff url('../img/corner.gif') bottom right no-repeat;min-height:311px;width:202px;padding:0 0 23px 0;margin:20px 2px 20px 24px;float:left}*/
     body.home div#maincontent {font-family:arial, helvetica, sans-serif;border-top:1px solid #fff;width:698px;background:transparent url('../img/home-corners.gif') bottom left no-repeat;margin:0;padding:0 0 43px 0} 
    body.home div#maincontent div.columns {width:654px;margin:20px 22px 0 22px;background:transparent url('../img/3-column-bg.gif') top left repeat-y;}
    body.home div#maincontent div.columns div.left, body.home div#maincontent div.columns div.middle, body.home div#maincontent div.columns div.right {min-height:311px;background:none;width:202px;padding:0;margin:0 24px 0 0;float:left} 
    body.home div#maincontent div.columns div.right {margin-right:0}
            
            
    body div#container div#maincontent div.clear, body div#container div#maincontent div.columns div.clear {margin:0;padding:0;float:none;display:block;clear:both;min-height:0;height:0;background:none;border:none;}
    body.home div#maincontent div p {margin:10px}
    body.home div#maincontent p.trading-name {text-align:center}
    body.home div#maincontent ul {list-style:none;list-style-image:none;padding-left:0;margin:0 10px 10px 10px;padding-bottom:10px;}
    body.home div#maintcontent address {margin:0;padding:0}

    body.home div#maincontent h2 {margin:20px 0 20px 20px;font-family:helvetica, arial, sans-serif;font-size:1.2em;font-weight:bold}
    div#maincontent h2 {height:26px;border-bottom:1px solid #e7e2c5;display:block;width:639px;font-size:2.1em;text-transform:uppercase;font-weight:normal;padding:10px 0 0 13px;margin:0 0 10px -13px}
    div#container div#main div#maincontent h2.hidden {width:0;height:0;overflow:hidden;margin:0;padding:0}
    div#maincontent div.columns {width:626px;margin:0;padding:0}
    div#maincontent div.columns div.left {width:308px;float:left;clear:left;padding-right:5px}
    div#maincontent div.columns div.right {width:308px;float:left;clear:right;padding-left:5px}
    body.about div#maincontent div.left {width:208px}
    body.about div#maincontent div.left p {width:208px;text-align:center}
    body.about div#maincontent div.right {width:400px;text-align:right}
    body.about div#maincontent div.right img {vertical-align:-500%;margin-right:-21px}
    body.manual-vs-automatic div#maincontent img {display:block;width:500px;margin:0 auto}
    body.manual-vs-automatic div#maincontent h3 {margin-bottom:0}
    div#maincontent ul {padding-left:15px;list-style-position:inside;list-style-image:url('../img/brown-bullet.gif');}
    div#maincontent ul.ticklist {padding-left:0;list-style:none;list-style-type:none;list-style-image:none;}
    div#maincontent ul.ticklist li {padding-left:30px;padding-top:3px;min-height:27px;background:url('../img/tick-box.gif') top left no-repeat}
    body.benefits div#maincontent div.right p {font-size:1.1em;line-height:1.3em;font-weight:bold;min-height:40px;width:190px}
    body.benefits div#maincontent div.right p img.padlock {float: right;margin-right:-118px}
    body.benefits div#maincontent div.columns div div {width:198px;margin-left:110px}
    body.benefits div#maincontent div.columns div.image {width:110px;min-height:100px;float:left;clear:left;margin:0} 
    body.benefits div#maincontent div.columns ul {min-height:100px}
    body.benefits div#maincontent h3 {margin-bottom:0}
    body.free-trial cite {text-align:left;margin-top:-10px}
    a.testimonials {display:block;height:15px;padding-right:50px;background:url('../img/point.gif') bottom right no-repeat;text-align:right;padding-top:5px;text-decoration:none;color:#400000;font-weight:bold}
    a.testimonials:hover {text-decoration:underline}
    a.apply-now {text-transform:uppercase;color:#400000;font-weight:bold;text-decoration:none;text-align:center;display:block;width:350px;margin:0 auto}
    a.apply-now:hover {text-decoration:underline}
    body.faq div#maincontent h3 {text-transform:uppercase}
    a.wastage-calculator {color:#400000;font-weight:bold;text-decoration:none;font-size:1.2em}
    a.wastage-calculator:hover {text-decoration:underline}
    address.last {margin-bottom:10px}
    a.email {text-decoration:none;}
    a.email:hover {text-decoration:underline;}
}
div#maincontent p, div#maincontent ul {}

body.calculator div#maincontent div.savings {position:relative;top:-25em;height:5em;margin-left:20px}
body.calculator div#maincontent form {height:18em;display:block;margin-top:6em}
div.savings p, div.savings h3 {font-style:italic;font-size:1.5em;margin-bottom:5px}
span.savings {font-style:normal;font-weight:bold}

/*
 * Breakout - secondary content related to Main Conent div#breakout
 */
@media screen, tv, projection,print {
    div#breakout {width:652px;height:87px;margin:0 22px 15px 22px;padding:0;float:none;clear:both;overflow:hidden}
    div#breakout div#freetrialpromo {height:62px;width:642px;float:left;clear:right;background:#e7e2c5 url('../img/free-trial-promo-background.jpg');padding-top:25px;color:#fff;font-size:1.1em;padding-right:10px}
    div#breakout div#freetrialpromo a {color:#fff;font-size:1.1em;margin-top:-5px;display:block}
    div#breakout h2 {display:block;width:88px;height:89px;float:left;clear:left;margin-top:-25px}
}
@media print {
    div#breakout {display:none}
}

/*
 * Image Selector - a small picture gallery that uses javascript
 *                  two divs that sit with in div#breakout
 */
div#imageselector, div#imageviewer {width:437px;margin-left:3px}
div#imageviewer {height:303px;margin-bottom:8px}
div#breakout div#imageselector *, div#breakout div#imageviewer * {margin:0;padding:0}
div#imageselector img, div#imageviewer img {border:1px solid #999298}
div#imageselector {width:450px;height:92px;overflow:hidden}
div#breakout div#imageselector img {display:block;float:left;margin-right:11px;cursor:pointer}

/* 
 * Form styling for forms in the main content area 
 */
@media screen, tv, projection {
    div#main form {width:630px;margin:10px 0 0 0;padding-bottom:20px;font-family:helvetica, arial, sans-serif}
    div#main form input, div#main form textarea, div#main form select {margin-left:0;width:255px}
    div#main form input[type=text], div#main form input[type=password], div#main form textarea, div#main form select {border:1px solid #400000}
    div#main form textarea {height:70px}
    div#main legend {font-family:helvetica, arial, sans-serif;color:#400000;font-weight:bold;font-size:1.4em; padding-bottom: 10px; text-decoration: underline; padding-top: 10px; }
    div#main legend.required {background:url('../img/required.gif') 245px 14px no-repeat;display:block; text-decoration: none; }
    div#main legend.required span {display:block;float:left;width:260px; text-decoration: underline;}
    /**div#main legend.required span{visibility:hidden}**/
    div#main legend.required span.show {visibility:visible}
    div#main label {display:-moz-inline-box;display:inline-block;width:255px;vertical-align:top;font-family:helvetica, arial, sans-serif;color:#400000;font-size:1.2em;font-weight:bold}
    div#main fieldset input.warning, div#main fieldset textarea.warning, div#main fieldset select.warning {background-color:#ff9fae}
    div#main fieldset input.checkbox {width:auto}
    div#main fieldset a {margin-left:186px}
    div#main form li {list-style:none;padding:5px 0}
    div#main form li.required {background:url('../img/required.gif') 245px 8px no-repeat}
    div#main label span {display:block;width:250px}
    div#main input[type=checkbox] {width:12px}
    div#main form input.button {margin-left:258px;width:auto;padding:3px 6px;}
    body.freetrial form {background:url('../img/free-110x110.jpg') right 30% no-repeat}
    body.calculator form {background:url('../img/calculator.jpg') right top no-repeat}
}
img#bottomshadow {display:none}
@media screen, tv, projection {
    div#footer {width:674px;height:75px;padding:12px;border-top:1px solid #fff;background:#fbad22}
    div#footer p {margin:0 0 10px 10px}
    div#footer img {color:#fff;font-size:1.5em}
    div#footer a {color:#fff;font-size:1.2em}
    div#footer div.left {width:472px;height:70px;float:left}
    div#footer div.right {width:200px;height:70px;float:left}
    div#footer div.right p {min-width:80px;float:left;margin:0;text-align:right;line-height:1em}
    div#footer div.right p img {display:inline;font-size:1em}
    div#footer img#wras{margin:15px 5px 0 0}
    div#meta {display:block;margin:0 auto;padding:0;width:698px;margin-bottom:40px}
    img#bottomshadow {display:block;margin:0;padding:0}
    div#meta li {color:#666;text-transform:uppercase;float:left;margin-right:10px}
    div#meta a#hum {color:#666;float:right;text-transform:lowercase;text-decoration:none}
}
span.ordernum { font-size: 1.4em; font-weight: bold; padding: 0px 8px; color: #400000; }
form#productImage { background-image: url(../img/bactosol.jpg); background-repeat: no-repeat; background-position: bottom right; overflow: visible; }
form#productImage p#notes { width: 50%; }
form#productImage input.shorter { width: 100px; }
form#productImage select#quantity { width: 100px; }
form#productImage input.button{ margin-bottom: 50px; }