/*------- GLOBAL -------------*/

*{
margin: 0; 
padding: 0;
font-size: 11px;
font-family: tahoma, verdana, arial;
line-height: 14px;
color: #4A3419;
text-align: left;
vertical-align: top;
}

body{
background: url(images/bg-stripes.gif);
background-position: center center;
padding: 10px 0 0 0;
}

img {border: none;}

#wrapper{
width: 848px;
background: url(images/bg-container.gif);
background-repeat: repeat-y;
margin: 0 auto;
}
* a:hover{color: #990000;}

/*------- LISTS AND TEXT STYLES---------*/
ul{
list-style-type: none;
margin: 6px 0 10px 20px;
}

.productPhoto .indent ul{width: 250px;}

li{
background: url(images/bullet-tan.gif) no-repeat 0px 4px;
padding-left: 10px;}

h1 {font-size: 15px;line-height: 17px; margin: 12px 0 2px 0;}
h2, .productPhoto div h2 {font-size: 12px; color: #377093; margin: 10px 0 2px 0px; background: url(images/bullet-red.gif) no-repeat 0px 4px; padding-left: 10px;}
h2 span{font-weight: normal;}

.indent .indent h2{font-size: 11px; margin: 10px 0 0 0;background: url(images/bullet-blue.gif) no-repeat 0px 4px; padding-left: 8px;}h3 {font-style: italic; font-weight: normal; font-size: 10px; line-height: 13px;}
h4 {padding-left: 20px;font-style: italic; font-weight: normal; font-size: 10px; line-height: 13px;}
.indent{padding-left: 20px;}

h5{font-size: 12px; margin: 3px 0;}

#footer h2{background: none; padding: 0;}
#home p{margin: 0; padding: 0;}
#vending p, #servicearea p{padding-right: 25px;}
p{margin: 0 0 6px 0; padding-right:30px;}


#servicearea h1{padding-right: 20px;}

h6{border-bottom: 1px solid #EBDECC; width: 94%; margin: 0 0 5px 0; font-size: 12px; }
/*------- HEADER -------------*/

#header{
background: url(images/bg-header.gif);
float: left;
width: 848px;
height: 140px;
}

#header img{float: left;}

#header div{
float: right;
padding: 54px 16px 0 0;
width: 260px;
text-align: center;
background:  url(images/bg-header-right.gif) no-repeat top right ;
}

#header div img{
display: inline;
float: none;
}

#header div a img, .shopOnline {margin-top: 4px;}

.logo{
margin: 0 0 0 45px;
float: left;
}

.seal{
margin: 63px 0 0 9px;
}


/*------- FOOTER -------------*/

#footer{
background: url(images/bg-container-bottom.gif) no-repeat bottom left;
padding: 0 0 30px 0;
width: 848px;
}

#footer .col{
width: 196px; 
float: left;
padding: 0 0px 13px 0;
}

#links{
background: url(images/bg-footer.jpg) repeat-y top left;
margin-left: 17px;
}

#links a{background: url(images/bullet-footer.gif); background-repeat:no-repeat; background-position: 0px 5px; padding: 0 0 0 9px;font-size: 10px; display: block; text-decoration: none;color: #fff; font-family: verdana, arial;}
#links a:hover{text-decoration: underline;}
#links h1 a{font-size: 12px; color: #3E2C14; margin-top: 10px; font-family: tahoma, verdana, arial}
#links h2{color: #D2B893; margin: 7px 0 0 0;}
#links h1 a{padding: 0; background: none;}




.steamyCoffee{
margin: 0 0 0 30px;
}

#footer .linkTop, #footer .linkBottom{float: left; margin-left: 17px;}
#footer .linkBottom{float: left; }

.copyright{position: relative; top: -16px; left: 5px; background: none; width: 840px; margin: 0 auto -10px auto; height: 10px;}
.copyright, .copyright a{color: #D4B892; font-size: 10px;}
.copyright a:hover{color: #fff;}

.SEO{width: 840px; margin: 0 auto; padding: 0 10px;}
.SEO h1 {color: #2A1C0A; font-size: 10px; padding: 0 8px 10px 8px; line-height: 12px; }

/*------- NAV -------------*/

#nav{
background: url(images/bg-nav.gif);
background-position: top left;
background-repeat: repeat-x;
height: 29px;
width: 848px;
float: left;
margin: 0 0 5px 0;
}

#nav div{
width: 826px;
float: left;
}

.floatL {float: left;}

#nav a{
margin: 0 9.5px;
}

.home2, .office2, .water2, .vending2, .benefits2, .specials2, .servicearea2, .contact2{display: none;}
#home .home1, #office .office1, #water .water1, #vending .vending1, #benefits .benefits1, #servicearea .servicearea1, #specials .specials1, #contact .contact1{display: none;}
#home .home2, #office .office2, #water .water2, #vending .vending2, #benefits .benefits2, #servicearea .servicearea2, #specials .specials2, #contact .contact2{display: inline;margin: 0 9.5px;}



/*------- CONTENT -------------*/

#content{
padding: 0 0 5px 17px;
}

#flash{
margin: 0 0 5px 0;
}


/*------- HOME CALLOUTS -------------*/

#homeCallouts{
background: url(images/bg-home-cobox.gif);
background-repeat: repeat-y;
float: left;
width: 848px;
}

.coBox1{
background: url(images/bg-home-callout.gif);
background-repeat: repeat-x;
float: left;
width: 400px;
height: 200px;
}

.calloutRow{
float: left;
padding: 0 0 0 5px;}

.coBox2{
margin: 5px 5px 0 5px;
}

.left img{
display: block;
}

.left{
width: 150px;
padding: 10px 5px 5px 15px;
}

.left p{margin: 7px 5px 0 0; font-size: 10px;}
.left a{font-size: 10px; display:block;background: url(images/bullet-callouts.gif); background-repeat:no-repeat; background-position: 0px 5px; padding: 0 0 0 9px;margin-bottom: 1px;}

.right {
float: right;
width: 208px;
}

.divider{margin: 4px 0;}



/*------- SUBNAV and SUBPAGE -------------*/


/*-- subpage titles ---*/
.pageTitle{
margin: 10px 0;
border-bottom: 1px solid #EBDECC;
padding-bottom: 5px;
width: 592px;
}

.pageTitle img{margin: 0 6px 0 0;}



/*-- subpage table ---*/

#subContent .subNav {
width: 192px; 
background: #563E27 url(images/bg-sn-bottom.gif);
background-repeat: no-repeat;
background-position: bottom left;
text-align: left;
}

#subContent .subContent {
padding: 0 15px 15px 15px;
}

/*--- subnav ---*/

.subNav div div {
display: none;
margin: 0 7px;
}

.subNav div div div{ 
display: block; 
text-align: left;
float: left;
margin: 0 0 10px 0;
position: relative;
left: 8px;
}

.subNav div div div  a:hover { 
height:16px;
}


.subNav div div a{
border-top: 1px solid #6F5032; 
margin: 0 ; 
float: left; 
display: block; 
width: 180px; 
height: 22px;
}

.subNav div div div a {
border: none; 
height:16px;
display: block;
float: left;
}

.subNav div div a:hover{
background: url(images/bullet-subnav.gif); 
background-repeat:no-repeat; 
background-position: center left; 
padding: 0 0 0 7px;
display: block;  
height: 22px; 
overflow: hidden; 
}
.subNav  .noBorder a{
border: none;
}

#subNavContainer{
overflow: hidden; 
display: block; 
width: 184px;
}


.state{
margin-top: 10px;
}

#office #snOffice, 
#water #snWater, 
#vending #snVending, 
#benefits #snBenefits, 
#specials #snSpecials, 
#servicearea #snServiceArea, 
#contact #snContact {display: block;}

.benefitsOverview .benefitsOverview, 
.variety .variety, 
.service .service, 
.convenience .convenience, 
.experience .experience, 
.testimonials .testimonials, 
.guarantee .guarantee, 
.employment .employment,
.flaviaOverview .flaviaOverview,
.keurigOverview .keurigOverview, 
.officeOverview .officeOverview,
.otherbrewing .otherbrewing,
.gourmet .gourmet,
.teas .teas,
.creamers .creamers,
.hotchocolate .hotchocolate,
.soda .soda,
.snacks .snacks,
.otherproducts .otherproducts,
.cups .cups,
.janitorial .janitorial,
.freedemo .freedemo,
.waterOverview .waterOverview,
.fivegallon .fivegallon,
.filtration .filtration,
.serviceoptions .serviceoptions,
.vendingOverview .vendingOverview,
.equipment .equipment,
.service .service,
.serviceOverview .serviceOverview,
.philadelphia .philadelphia,
.bucks .bucks,
.montgomery .montgomery,
.delaware .delaware,
.chester .chester,
.lehigh .lehigh,
.mercer .mercer,
.burlington .burlington,
.camden .camden,
.gloucester .gloucester,
.salem .salem,
.hunterdon .hunterdon,
.middlesex .middlesex,
.somerset .somerset,
.monmouth .monmouth,
.newcastle .newcastle,
.general .general,
.demo .demo,
.referral .referral,
.currentspecials .currentspecials
{background:#402C19 url(images/bullet-subnav.gif);background-repeat: no-repeat; background-position: 168px 9px; padding-left: 6px; width: 174px; float: left; }


.flaviaMenu .flaviaMenu,
.flaviaSystems .flaviaSystems,
.flaviaFlavors .flaviaFlavors,
.keurigMenu .keurigMenu,
.keurigSystems .keurigSystems
{background:#402C19 url(images/bullet-subnav.gif);background-repeat: no-repeat; background-position: 160px 6px; padding-left: 6px; width: 162px; float: left; }



#subCallouts {display: block; margin: 10px 0 ;}
#office .co1 {display: none;}
#water .co2 {display: none;}
#vending .co3 {display: none;}
#servicearea .co4 {display: none;}


/*---subpage content---*/

.officeLanding a{
margin: 0 8px 10px 0;
float: left;
}

.benefitCallout {background: url(images/bg-benefit-callout.gif) repeat-x bottom left; float: left; width: 284px; margin: 0 16px 12px 0;}
.benefitCallout .box{margin: 15px; height: 125px;}
.benefitCallout .box p, .benefitCallout .box img{color: #2E6A8D; margin: 6px 0 6px 0;}
.benefitCallout .box h1{margin: 3px 0; font-size: 11px; font-weight: normal; float: right; width: 160px; line-height:14px;}

.productPhoto{
float: right;
padding: 0 25px 0 0;
}

.productPhoto .indent{
padding-left: 35px;
padding-top: 12px;
}

.productPhoto img{
border-bottom: 1px solid #F0E7DA;
padding-bottom: 10px;
}

#benefits .productPhoto img{border: none;}

.testyName{text-align: right; width: 300px;}
.testyName i{display: block;text-align: right;}
.testimonials hr{background:#990000; height: 1px; margin: 20px 20px 20px 0; border: none; }



/*-------FLAVIA & KEURIG PAGES -------------*/

.flaviaLanding{
background: #E1CAA9 url(images/bg-flavia-top.jpg) no-repeat top left;
float: left;
width: 603px;
position: relative;
left: -4px;
}

.flaviaLanding .text{
height: 338px;
}

.flaviaLanding .text ul{
margin: 185px 0 0 0px;
float: left;
width: 320px;
position: relative;
left: 30px;
padding: 0;
}

.flaviaLanding .text li{
font-size: 13px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 18px;
}

.flaviaLanding .row2, .keurigLanding .row2, .vendingLanding .row2{text-align: center; margin-bottom: 4px;}

.flaviaLanding .row2 a, .keurigLanding .row2 a, .vendingLanding .row2 a{
text-align: center;
margin: 6px;
}

.systems h1{text-align: center;}
.systems td{text-align: center;}
.systems{margin: 0 25px 0px 0;}
.systems li{margin: 0 0 6px 0;}
.systems ul{padding-right: 20px;}
.otherSystems table{margin: 0 0 20px 0; width: 590px; }
.otherSystems td{ text-align: left; vertical-align: bottom; padding: 10px 25px 0 30px;}
.otherSystems h1{ border-bottom: 1px solid #785B35; width: 590px;}

.keurigLanding{
background: #E1CAA9 url(images/bg-keurig-top.jpg) no-repeat top left;
float: left;
width: 603px;
position: relative;
left: -4px;
}

.keurigLanding .text{
height: 330px;
}

.keurigLanding .text li{
font-size: 12px;
font-weight: bold;
margin: 0 0 6px 0;
line-height: 16px;
}

.keurigLanding .text ul{
margin: 165px 0 0 0px;
float: left;
width: 300px;
position: relative;
left: 15px;
padding: 0;
}

.keurigBeverages td{
width: 50%;
padding: 0 20px 0 0;}



.keurigBeverages ul {
display: block;
width: 100%;
float: left;
margin: 0 0 15px 0;}

.keurigBeverages li {
margin: 0 0 0 10px;}

.keurigBeverages img{
float: left;
margin: 0 6px 4px 0px;}

.keurigBeverages h2{
background: none;
padding: 0;
}

.subHeader{
margin: 15px 0 0 0px; 
border-bottom: 1px solid #F1E7D8; 
padding: 0 0 14px 0; 
width: 590px;
}

.subHeader a{
position: relative; top: 15px; left: 10px;}

.keurigLanding li, .flaviaLanding li, .vendingLanding li{
background: url(images/bullet-whitecircle.gif) no-repeat center left;
padding: 0 0 0 14px;
list-style-type:none;
background-position: 0px 4px;
}

.systemDetailFooter{
position: relative;
left: -4px;
float: left;
}

.quickNav {padding: 7px 0; border-bottom: 1px solid #F1E7D8; width: 590px; }
.quickNav img {height: 12px; margin: 0 15px 0 0;}

#packets {
float: left;
width: 100%; 
}

#packets div{
width: 275px;
float: left;
height: 125px;
margin: 0 12px 10px 0;
}

#packets p {
float: right;
width: 180px;
font-size: 10px;
line-height: 13px;
padding-top: 10px;
}

.flaviaMenu p{padding: 0;}

#packets div b{display: block; }

#packets .title{display: block; clear: both; margin: 25px 0 15px 0; }

#packets .topButton, .topButton{
width:580px;
clear: both;
text-align:right;
height: 16px;
height: 25px;
}



.flavors {text-align: center;
margin: 20px;}
.flavors img{
text-align: center;
margin: 0 0 15px 0;
}


/*-------Water Cooler -------------*/



.waterLanding{
background: url(images/bg-watercooler-top.jpg) no-repeat top left;
float: left;
width: 603px;
position: relative;
left: -4px;
}

.waterLanding .text{
height: 341px;
}

.waterLanding .text ul{
margin: 172px 0 0 0px;
float: left;
width: 330px;
position: relative;
left: 20px;
padding: 0;

}

.waterLanding .text li{
font-size: 13px;
font-weight: bold;
margin: 0 0 8px 0;
line-height: 16px;
color: #020D71;
background: url(images/bullet-whitecircle.gif) no-repeat center left;
padding: 0 0 0 14px;
list-style-type:none;
background-position: 0px 5px;
}

.waterLanding .row2{text-align: center; margin-bottom: 4px;}



/*-------vending landing page---------*/

.vendingLanding{
background: #060401 url(images/bg-vending-top.jpg) no-repeat top left;
float: left;
width: 603px;
position: relative;
left: -4px;
}

.vendingLanding .text{
height: 341px;
}

.vendingLanding .text li{
font-size: 12px;
font-weight: bold;
margin: 0 0 11px 0;
line-height: 14px;
color: #fff;
}

.vendingLanding .text ul{
margin: 150px 0 0 0px;
float: left;
width: 310px;
position: relative;
left: 15px;
padding: 0;
}

.vendingMachine{
float: right;} 


.subpagePad{padding: 0 50px 0 0;}
.subpagePad p{width: 350px;}

.fivegallon .subpagePad{padding: 0 13px 0 0;}




/*-------contact---------*/
.contact{width: 380px;}

.contact td, .contact th{
padding: 4px;
border-bottom: 1px solid #F0E7DA;
}

.contact th{
width: 150px;
padding: 2px 10px 0 0;
}

.contact td{
}

.contact th span{font-weight: normal; font-style:italic;}

.contact select, .contact .form, .contact textarea  {
width: 210px;
background: #F7F2EA;
border-right: 1px solid #EBDFCD;
border-bottom: 1px solid #EBDFCD;
border-left: 2px solid #CAB18B;
border-top: 2px solid #98784B;
padding: 2px;
}

.checkbox, .radio{margin: 0 8px 5px 0;}

.form:focus{background: #DAEAF3;}

.need{color: red; font-weight: bold}