@import url("reset.css");

/* -------- OFFice Green CSS  ---------- **/
/* ----------------- by SJJ ---------------- */


* { font-family:  Arial, Verdana, Helvetica, sans-serif; line-height: 130%;  color: #333333;}
body {background: #020f16 url(../img/bg/body.jpg) 50% 0% no-repeat; font-size: 95%; }

hr { text-align: right; width: 100%;  height: 1px; color: #76aa6b; border: none; margin-bottom: 23px; clear: both; margin-top: 23px;} /* For Internet Explorer */
html>body hr { margin-right: 0; width: 100%; height: 1px; background-color: #76aa6b; border: none; } /* For Gecko-based browsers */
html>body hr { margin-right: 0; width: 100%; height: 1px; background-color: #76aa6b; border: 0px solid #76aa6b; } /* For Opera and Gecko-based browsers */


#wrapper {width: 960px; margin-left: auto; margin-right:auto; clear: both; font-size: 80%; padding: 0px 10px 10px 10px; background-color: #ddd; overflow: hidden; height: 1%; margin-bottom: 8px;}
#wrapper a {text-decoration: underline;}
#wrapper a:hover {text-decoration: none;}

#header {height: 114px; border-bottom: 5px solid #63b331; background: #031b27 url(../img/bg/header.gif) top left repeat-x; padding: 15px 29px 0px 35px; }
a.logo {text-indent: -9999px; overflow:hidden; outline: none; text-decoration: none; display: block; background: url(../img/bg/logo.jpg) top left no-repeat; height: 96px; width: 152px; float: left;}

#header div.subnav {width: 375px; text-align: right;  float: left; margin-left: 30px;}
#header div.subnav a {color: #577dae; text-decoration: none; margin-left: 7px;}
#header div.subnav a:hover {color: #83a3cc; text-decoration: underline;}

#headerdrop {z-index: 100; float: right; width: 276px; height: 28px;  background: url(../img/headings/three-easy-steps.jpg) top left no-repeat; padding: 80px 0px 0px 47px; position: relative; }
#headerdrop p {text-indent: -9999px; position: absolute; }
#headerdrop ol {display: none;  position: absolute; }
#headerdrop:hover ol, #headerdrop.over ol {display: block;}
#headerdrop ol li {height: 68px; border-top: 1px solid #0b355a; padding-left: 61px; width: 215px; }
#headerdrop ol li a {display: block; height: 68px; background-position: 0px 0px; background-repeat: no-repeat;  text-indent: -9999px; overflow: hidden; outline: none;}
#headerdrop ol li a:hover {background-position: 0px -68px;}
#headerdrop ol li.o1 {background: url(../img/icons/one.gif) top left no-repeat;}
#headerdrop ol li.o1 a {background-image: url(../img/headings/o1.jpg);}
#headerdrop ol li.o2 {background: url(../img/icons/two.gif) top left no-repeat;}
#headerdrop ol li.o2 a {background-image: url(../img/headings/o2.jpg);}
#headerdrop ol li.o3 {background: url(../img/icons/three.gif) top left no-repeat;}
#headerdrop ol li.o3 a {background-image: url(../img/headings/o3.jpg);}


#topnav {height: 47px; background: #0b355a url(../img/bg/topnav.gif) top left repeat-x; padding: 1px 30px 1px 0px;}
#topnav ul { overflow: visible; height: 47px; z-index: 4; width: 830px; float: left;}
#topnav ul li {float: left; position: relative; z-index: 5; }
#topnav ul li a {color: #fff; height: 34px; padding: 13px 12px 0px 12px; text-decoration: none; display: inline-block; font-size: 110%; }
#topnav ul li a:hover, #topnav ul li.active a { background: #06263b url(../img/bg/nav-active.gif) top left repeat-x; }
#topnav ul li ul { display: none; position: absolute; top: 47px; left: 0px; z-index: 10;  left: 0px; height: auto; clear: both; width: 100%; background-color: #06263b; min-width: 180px; }
#topnav ul li:hover ul, #topnav ul li.over ul {display: block; }
#topnav ul li ul li {border-top: 1px solid #449980; float: none; padding: 0px;   }
#topnav ul li ul li a, #topnav ul li.active ul li a {background-image: none; background-color: #123954; padding: 10px 13px; display: block; height: auto;}
#topnav ul li ul li a:hover, #topnav ul li.active ul li a:hover  {background-image: none; background-color: #2b85be; }



#topnav a.facebook { display: block; height: 25px; width: 34px; background: url(../img/icons/facebook.gif) top left no-repeat; overflow: hidden; outline: none; text-indent: -9999px; float: right; margin-left: 10px; margin-top: 9px;}
#topnav a.twitter { display: block; height: 25px; width: 37px; background: url(../img/icons/twitter.gif) top left no-repeat; overflow: hidden; outline: none; text-indent: -9999px;float: right; margin-top: 9px; }
#topnav a.icon:hover {background-position: 0px -25px;}

#homebanner {height: 231px; border: 1px solid #0f202d; border-top: none; margin-bottom: 7px; width: 958px; padding: 0px;}
#header-image {height: 231px;  width: 788px; position: relative; overflow: hidden; float: left;}
#homebanner div.slideshow {position: absolute; width: 5000px; height: 232px; }
#homebanner div.slideshow img {float: left; }
#homebanner ul {float: right; width: 170px;}
#homebanner ul li {}
#homebanner ul li a {height: 57px; display: block; border-top: 1px solid #0f202d; background-position: top left; background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; outline: none; }
#homebanner ul li a.panel1 {background-image: url(../img/banners/n1.jpg); border-top: none;}
#homebanner ul li a.panel2 {background-image: url(../img/banners/n2.jpg);}
#homebanner ul li a.panel3 {background-image: url(../img/banners/n3.jpg);}
#homebanner ul li a.panel4 {background-image: url(../img/banners/n4.jpg);}
#homebanner ul li a:hover, #homebanner ul li a.active {background-position: 0px -57px;}


#homerow1 { background: url(../img/bg/homerow1.gif) top left repeat-y; overflow: hidden; height: 1%; margin-bottom: 8px; height: 153px; border-bottom: 3px solid #adadad;}

#homerow1 div.col1 {background: url(../img/bg/homerow1divider.gif) 100% 50% no-repeat; width: 303px; float: left; padding: 15px 50px 0px 30px; height: 138px; }
#homerow1 div.col1 a {display: block; width: 141px; height: 27px; display: block; text-indent: -9999px; overflow: hidden; outline: none;  margin-bottom: 11px;}
#homerow1 div.col1 div {width: 141px; float: left;}
#homerow1 div.col1 div a.cartridges {background: url(../img/buttons/cartridges.gif) top left no-repeat;  }
#homerow1 div.col1 div a.phones {background: url(../img/buttons/phones.gif) top left no-repeat;  }
#homerow1 div.col1 div a:hover {background-position: 0px -27px;}
#homerow1 div.col1 p {color: #fff; float: right; width: 140px; }

#homerow1 div.col2 {width: 258px; float: left; height: 138px; background: url(../img/bg/box.jpg) 367px 0px no-repeat; padding: 15px 265px 0px 54px;}
#homerow1 div.col2 p {color: #fff; margin-bottom: 5px;}
#homerow1 div.col2 p.large { font-size: 120%;}
#homerow1 div.col2 p.large em { font-size: 140%; font-style: normal; color: #fff; font-weight: bold;}


#homerow1 h2 {background-color: #315a7e; padding: 5px 10px; color: #fff; font-weight: bold; margin-bottom: 15px;  }

#homerow2 { overflow: hidden;}
#homerow2 a {display:block; float: left;  }
#homerow2 a.unused {border: 3px solid #acacac; height: 106px; background: url(../img/bananas/unused-cartridges.jpg) top left no-repeat; width: 234px; margin-right: 12px; padding-left: 142px; padding-top: 20px; text-decoration: none;}
#homerow2 a.unused:hover {border-color: #8c92a5;}
#homerow2 a.unused strong { display: block; color: #00538e; font-weight: bold;  margin-bottom: 10px; font-size: 150%;} 
#homerow2 a.unused span { display: block; color: #00538e; }
#homerow2 a.unused:hover strong, #homerow2 a.unused:hover span {color: #013356;} 

#homerow2 a.payasyougo {border: 1px solid #88d257; height: 70px; width: 173px; background: url(../img/bananas/pay-as-you-go.jpg) top left no-repeat;  margin-right: 12px; text-indent: -9999px; overflow: hidden; outline: none; padding: 60px 0px 0px 107px;}
#homerow2 a.payasyougo span {display: block; height: 34px; width: 160px;  background: url(../img/buttons/waste.gif) 0px 0px no-repeat; }
#homerow2 a.payasyougo:hover {border-color: #56b119;}
#homerow2 a.payasyougo:hover span {background-position: 0px -34px;}

#homerow2 a.haiti {border: 3px solid #acacac; height: 26px; background: url(../img/bananas/help-haiti.jpg) top left no-repeat; width: 266px; color: #fff; text-align: center; text-decoration: none; padding-top: 100px; }
#homerow2 a.haiti:hover {border-color: #8c92a5; color: #bbb;}

#homerow2 a.general {border: 3px solid #acacac; height: 126px; width: 266px; overflow: hidden;  }
#homerow2 a.general:hover {border-color: #8c92a5;}


#internalbanner {margin-bottom: 10px; height: 231px; border: 1px solid #0f202d; border-top: none;  width: 958px; padding: 0px; background: url(../img/banners/internal.jpg) top left no-repeat;}



/* -----------Left Column -------------*/
#leftcol {width: 240px; float: left; margin-right: 10px; }
#leftcol div.box {background-color: #1a4062; padding: 10px; margin-bottom: 10px;}
#leftcol div.box h2 {background-color: #315a7e; color: #fff; font-weight: bold; padding: 8px;  margin-bottom: 15px; font-size: 140%; }

#leftcol div.phone {background-color: #093051;}
#leftcol div.phone h2 {background-color: #10436e;}
#leftcol div.phone p {font-weight: bold; font-size: 210%; background: url(../img/icons/phone.gif) 0% 50% no-repeat; padding-left: 30px; color: #ddd; line-height: 120%;}


#leftcol div.box  a {display: block; width: 141px; height: 27px; display: block; text-indent: -9999px; overflow: hidden; outline: none;  margin-bottom: 11px;}
#leftcol div.box  a.cartridges {background: url(../img/buttons/cartridges.gif) top left no-repeat;  }
#leftcol div.box  a.phones {background: url(../img/buttons/phones.gif) top left no-repeat;  }
#leftcol div.box  a:hover {background-position: 0px -27px;}
#leftcol div.box a.showall {background: url(../img/buttons/show-all-makes.gif) top left no-repeat;}


#leftcol a.payasyougo {display: block; width: 170px; height: 65px; padding: 65px 0px 0px 68px; border: 1px solid #88d257; background: url(../img/bananas/pay-as-you-go-small.jpg) top left no-repeat; text-indent: -9999px; overflow: hidden; outline: none; margin-bottom: 10px; }
#leftcol a.payasyougo:hover {border-color: #56b119;}
#leftcol a.payasyougo span {display: block; height: 34px; width: 160px;  background: url(../img/buttons/waste.gif) 0px 0px no-repeat; }
#leftcol a.payasyougo:hover span {background-position: 0px -34px;}
#leftcol a.unused {display: block; width: 234px; height: 126px;  padding: 0px; background: url(../img/bananas/unused-cartridges-internal.jpg) top left no-repeat; text-indent: -9999px; overflow: hidden; outline: none;  border: 3px solid #acacac;}
#leftcol a.unused:hover {border-color: #8c92a5;} 


#breadcrumb {width: 710px; background: url(../img/bg/breadcrumb.gif) 100% 50% no-repeat; margin-left: -20px; margin-bottom: 20px; overflow: hidden; height: 1%; clear: both;}
#breadcrumb a {float: left; color: #fff; text-decoration: none; padding: 7px 30px 7px 15px; background: #298416 url(../img/bg/inner-breadcrumb.gif) 100% 50% no-repeat; font-weight: bold; font-size: 120%; }
#breadcrumb a:hover {text-decoration: underline;}
#breadcrumb a.first {background-image: url(../img/bg/first-breadcrumb.gif);}


/* -----------Main Column -------------*/
#maincol {width: 670px; float: left; background-color: #fff; padding: 0px 20px 30px 20px;  color: #1c1c1c; }
#maincol h1 {color: #093051; font-family: Tahoma, Arial, Verdana; font-size: 190%; margin-bottom: 20px; font-weight: normal;  }
#maincol h2 {color: #298416; font-family: Tahoma, Arial, Verdana; font-size: 120%; margin-bottom: 15px; font-weight: normal;  }
#maincol p {color: #1c1c1c; margin-bottom: 15px;}
#maincol p.strapline {font-weight: bold; font-style: italic; display: block; clear: both;}
#maincol ul {list-style-type: disc; margin-left: 20px; margin-bottom: 15px; }
#maincol ul li, #maincol ol li {margin-bottom: 3px;}
#maincol ul ul { list-style-type: circle;}
#maincol ol {list-style-type:decimal; margin-left: 20px; margin-bottom: 15px; }
#maincol img {float: left; padding: 7px; background-color: #fff; border: 2px solid #d7d7d7; margin-right: 25px; margin-bottom: 25px;  }
#maincol a:hover img {border-color: #5ab131;}
#maincol table {margin: 0px 30px 15px 30px; }
#maincol table tr th {background-color: #1a4062; color: #fff; padding: 5px; font-weight: bold;}
#maincol table tr td {padding: 7px; border: 1px solid #ddd;}
#maincol table tr td.title {font-weight: bold; color: #298416; background-color: #eefdeb;}
#maincol div.split {float: left; width: 325px; margin-right: 10px;}
#maincol ul.form {list-style-type: none; margin-left: 0px;}
#maincol ul.form li {overflow: hidden; height: 1%; clear: both; margin-bottom: 5px;}
#maincol ul.form li label {float: left; width: 120px; margin-right: 10px;}
#maincol ul.form li label span {color: #ff0000; margin-left: 3px;}
#maincol ul.form li input {float: left; width: 160px; margin-right: 5px;}
#maincol ul.form li select {float: left; width: 160px; margin-right: 5px; overflow: visible;}


#maincol ul.form li.wide {position: relative; height: 25px; overflow: visible;}
#maincol ul.form li.wide label {position: absolute; top: 0px; left: 0px;}
#maincol ul.form li.wide select {position: absolute; top: 0px; left: 130px;}
#maincol ul.form li.wide select.expand { width: 250px; }

#maincol ul.form li textarea {float: left; width: 160px; margin-right: 5px;}
#maincol ul.form li.checkbox label {width: 265px;}
#maincol ul.form li.checkbox input {width: auto;}
#maincol ul.form li.button {margin-top: 15px;}
#maincol ul.form li.button input {width: auto;}
#maincol div.validationsummary {border: 1px solid #ff0000; padding: 10px; margin-bottom: 10px;}
#maincol div.validationsummary ul {margin: 0px; list-style-type: none;}
#maincol div.validationsummary ul li {color: #ff0000; margin: 0px;}
#maincol div.col {width: 168px; margin-right: 40px; float: left; }
#maincol div.col img {padding: 0px; margin-bottom: 10px;}


#maincol ul.formnarrow li label {width: 220px;}
#maincol ul.formnarrow li input {width: 60px;}
#maincol ul.formnarrow li select {width: 60px;}
#maincol ul.formnarrow li textarea {width: 60px;}

#maincol div.message {border: 1px solid #888; padding: 10px; background-color: #efefef; margin-bottom: 10px;}
#maincol div.error {border-color: #ff0000;  background-color: #fff;}
#maincol div.error span {color: #ff0000; font-weight: bold;}

/* Cartridge checker */
#maincol div.picker-container {background:  url(../img/bg/dottedline-vertical.gif) 244px 0px repeat-y; overflow: hidden; margin-left: -14px; width: 684px; }
#maincol div.cartridge-checker {width: 170px; float: left; margin-right: 30px; padding: 20px 15px 41px 29px; background:  url(../img/bg/checker.jpg) bottom left no-repeat; }
#maincol div.cartridge-checker input, #maincol div.cartridge-checker select {width: 170px; margin-bottom: 20px; padding: 3px 5px; }
#maincol div.cartridge-checker select.disabled {color: #bbb;}
#maincol div.cartridge-checker input {width: 160px;}
#maincol div.cartridge-checker input.disabled {color: #bbb;}
#maincol div.cartridge-checker input.button-disabled, #maincol div.cartridge-checker input.button {font-weight: bold; width: auto; margin-bottom: 0px; float: right; cursor: pointer; cursor: mouse;}
#maincol div.cartridge-checker input.button {color: #235a8d; }
#maincol div.cartridge-checker input.button-disabled {color: #bbb;}


#maincol div.cartridge-picker-results {width: 355px; float: left; padding-left: 30px; }
#maincol div.cartridge-picker-results h3 {margin-bottom: 10px;}
#maincol div.cartridge-picker-results ul.cartridge-checker {margin-left: 0px; padding-left: 0px; overflow: hidden;}
#maincol div.cartridge-picker-results ul.cartridge-checker li {list-style-type: none; background: url(../img/icons/bullet-arrow.gif) 0px 50% no-repeat; padding-left: 12px; margin-bottom: 1px;  }
#maincol div.cartridge-picker-results ul.cartridge-checker li acronym.ok-plus {text-indent: -9999px; width: 15px; height: 14px; background: url(../img/icons/ok-plus.gif) 0px 0px no-repeat; margin-left: 10px; display: inline-block; }
#maincol div.cartridge-picker-results p.ok-plus {background: url(../img/icons/ok-plus.gif) 0px 2px no-repeat; padding-left: 20px;}

#maincol ul.news-list {margin-left: 0px; margin-bottom: 0px; list-style-type: none;}
#maincol ul.news-list li {overflow: hidden; height: 1%;}
#maincol ul.news-list li h2 {margin-bottom: 5px;}
#maincol ul.news-list li h2 a {color: #298416; font-family: Tahoma, Arial, Verdana;  text-decoration: none;}
#maincol ul.news-list li p.date {font-weight: bold;}
#maincol ul.news-list li p {margin-bottom: 0px;}
#maincol ul.news-list li a {color: #298416;}
#maincol span.news-date {color: #298416; font-family: Tahoma, Arial, Verdana; font-size: 120%; margin-bottom: 15px; font-weight: normal; margin-bottom: 15px; display: block;}

#maincol div.pagenav p {margin-bottom: 5px;}
#maincol div.pagenav ul {overflow: hidden; height: 1%; margin-bottom: 15px; clear: both;  margin-left: 0px;}
#maincol div.pagenav ul li {display: inline-block; float: left; margin-right: 6px; padding-top: 5px; padding-bottom: 5px;}
#maincol div.pagenav ul li a {color: #298416; padding: 1px 3px; }
#maincol div.pagenav ul li a.linkDeactived {color: #aaa; text-decoartion: none;}
#maincol div.pagenav ul li a.active {text-decoration: none; border: 1px solid #298416; }

/* ----------------- Footer  ---------------- */
#footer { width: 960px; margin-left: auto; margin-right:auto; clear: both; font-size: 80%; padding: 10px; overflow: hidden; height: 1%; margin-bottom: 30px; background-color: #06334a; }
#footer p {color: #8db2d2;}
#footer p a {color: #8db2d2;}
#footer p.left {width: 350px; padding-left: 85px; padding-top: 3px; text-align: left; float: left; background: url(../img/icons/dsa.gif) top left no-repeat; color: #fff; min-height: 39px;}
#footer a.iso {display: block; background: #06334a url(../img/icons/iso.gif) top left no-repeat; width: 69px; height: 42px; float: left; margin-right: 10px; text-indent: -9999px;}



#footer p.right {width: 400px; text-align: right;float: right;}
#footer p.right a {text-decoration: underline; margin-left: 20px;}
#footer p.right a:hover {text-decoration: none;}