@charset "utf-8";
/* DPI Sales CSS  */


/* General Styles  */
*{ margin: 0px; padding: 0px; }
body { background-color: #EEEEEE; font-family: Arial, Helvetica, sans-serif; line-height:19px; font-size: 12px; color: #6C6C6C; }
h1 { text-transform:uppercase; line-height:25px; float: left; font-size: 25px;}
h2 { text-transform:uppercase; float: left; font-size: 17px;}
ul { list-style:none;}
ul li { font-size: 11px; text-transform:uppercase;}

/* Container Styles  */
#container {  margin: 10px auto; width: 984px; position:relative;}
#padd { background-color: #FFFFFF;  width: 944px; padding: 20px; float:left; margin-bottom: 20px;}

#header { float: left; width: 100%; border-bottom: 1px dotted #ccc;}
#header #headerleft { float: left; margin: 0px 40px 0px 10px; }
#header #headerleft-bottom { float: left; clear: both;}
#header #headerright { float: right; margin: 50px 0px 0px 0px; width: 500px; }
#header #headerright #headerright-top { float: right; width: 100%;}
#header #headerright #headerright-bottom { float: right; width: 100%; clear: both; margin: 5px 0px 0px 0px;}

#main { float: left; width: 100%;  height: 279px; clear: both; margin: 10px 0px 0px 0px; padding: 0px 0px 10px 0px; border-bottom: 1px dotted #ccc;}
#main .anythingSlider { padding: 0px; border: 0px; overflow: hidden;}
#main .anythingSlider .anythingControls { float:right; z-index: 500; position:relative; top: -145px; width: 200px;}
#main .anythingControls .start-stop.playing { background: transparent url(../images/play.png) no-repeat scroll left top; width: 22px; height: 22px; line-height: 0px; font-size: 0px; text-indent:-9999px;}
#main .anythingControls .start-stop { float: left; background: transparent url(../images/pause.png) no-repeat scroll left top; width: 22px; height: 22px; line-height: 0px; font-size: 0px; text-indent:-9999px;}
#main .anythingControls .thumbNav li a {background: transparent url(../images/navbac.png) no-repeat scroll left top; width: 23px; height: 22px; padding:0px; }
#main .anythingControls .thumbNav li a.cur {background: transparent url(../images/navbaccur.png) no-repeat scroll left top;  }
#main .anythingControls .thumbNav li {width: 23px;}
#main .anythingSlider .anythingWindow { border: 0px; }
#main #slider { overflow: hidden; }
#main #slider li { text-transform:lowercase;}
#main #slide-1 { background: transparent url(../images/web-promotions.jpg) no-repeat scroll left top;}
#main #slide-2 {background: transparent url(../images/pens-promotion.jpg) no-repeat scroll left top;}
#main #slide-3 {background: transparent url(../images/trolley-promotions.jpg) no-repeat scroll left top;}
#main #slide-4 {background: transparent url(../images/freshner-promotion.jpg) no-repeat scroll left top;}
#main .slide { float: left; width: 100%;  height: 279px; }
#main #mainleft { float: left; width: 350px; margin: 180px 20px 0 55px;}
#main #mainright { float: left; width: auto; margin: 10px 0px 0px 0px; width: 543px;}

#about { clear: both; float: left; width: 100%;}
#about #aboutheader {  float: left; padding: 0px 20px 10px 20px; margin: 10px 0px 10px 0px; border-bottom: 1px dotted #ccc; width:904px;  }
#about #aboutbody { float: left; clear: both; width: 100%;}
#about #aboutbody #aboutbody-left { float: left; width: 370px; margin: 0px 50px 0px 20px;}
#about #aboutbody #aboutbody-right { float: left;  }

#subscribe { float: left; clear: both; width: 100%; border-top: 1px dotted #ccc; margin-top: 10px; padding-top: 10px; border-bottom: 1px dotted #ccc;}
#subscribe #subleft { float: left; width: 438px; margin-left: 20px; }
#subscribe #subright { float: left; width: 470px; }
#subscribe #subright #exclusive { float: left; clear: both; width: 470px; margin-top: 5px; }

#footer { margin-top: 10px; float: left; clear: both; width: 100%;}
#footer p { float: right; font-size: 10px; text-transform: uppercase; color: #aaa;}

#share { float: right; width: 100%; margin-bottom: 5px;}
#share p { float: right; margin-right: 5px; }

#want { background: transparent url(../images/want.png) no-repeat scroll left top; width: 334px; height: 54px; float: left; clear: both; margin-top: 20px;}

/* Cufon Styles  */
h1.top { color: #25ade3; font-size: 38px; float: left;  }
h1.want { color: #0d0d19; font-size: 14px; margin: 12px 0px 0px 10px;} h1.want a {color: #0d0d19; text-decoration:none;}
h2.top { color: #000000; margin: 0px 0px 0px 0px; text-align:right; float:right; }
h2.below a { text-decoration: none; color: #25ADE3;} h2.below a:hover { text-decoration: underline; color: #25ADE3;}
h2.below { font-size: 12px; clear: both; text-transform:lowercase; margin-top:-6px; float:left; width: 290px; text-align:right;}
h1.aboutheader-left, h1.aboutheader-right { font-size: 23px; color: #25ade3;  float: left;}
h1.sub { font-size: 23px; color:#900; float: left;}
h1.aboutheader-right { margin-left: 74px;}
h1.main { color: #ffffff; margin-bottom: 10px; }
span.main{ clear: both; float: left; color: #ffffff; width: 100%; font-size: 15px; font-weight: 325; font-style:normal;}
h3 { font-size: 13px; text-transform:uppercase; color:#F00;}

/* Positioning Styles */
#header #headerright #headerright-bottom img { float: right; margin-right: 2px; clear: both;}
#main #mainright #monitors { background: transparent url(../images/monitors.png) no-repeat scroll left top; width: 432px; height: 244px; padding:22px 0px 0px 20px; float: left; }
#main #mainright #monitors img, #main #mainright .packdetails ul li {position: absolute; }
#main #mainright .packdetails ul li { text-transform:uppercase;}
#main #mainright #badge  { background: url(../images/badge.png) no-repeat scroll left top; position: relative; left: 350px; top: 0px; z-index: 2; width: 133px; height: 133px;}
#main #mainright #packback {background: url(../images/packback.jpg) no-repeat scroll left top;  position: relative; left: 9px; top: 20px; z-index: 3; width: 280px; height: 58px;}
#main #mainright #details{ }
#main #mainright #title {position: relative; left: 19px; top: -82px; z-index: 4; width: 280px; height: 33px; font-weight:bold; color: #fff; text-transform: uppercase; }
#main #mainright .packdetails { position: relative; left: 135px; top: -40px; z-index: 4; width: 280px; height: 33px; color: #fff;}
#main #mainright .packdetails p , #main #mainright .packdetails ul { }
#main #mainright .packdetails p { margin-right: 5px;}
#about #aboutbody #aboutbody-right div { float: left; margin-left: 20px;}
#about #aboutbody #aboutbody-right #ul-left .design { margin-top: 10px;}
.add { padding-top: 10px; margin-top: 10px; border-top: 1px solid #ccc;}
.like { margin-top: 5px; float: left;}
.tweet { float: left; margin-right: 10px !important;}
.tweet a img { border: 0px;}
.twitter-share-button { width: 100px !important;}
#subscribe #subright p { clear: both; float: left; margin-top: 5px; width: 100%; }
#subscribe #subright #exclusive form { float: left; width: 100%; }
#subscribe #subright #exclusive form div { float: left; width: auto; margin-left: 10px; }
#subscribe #subright #exclusive form div input { background: url(../images/send.png) no-repeat scroll left top; width: 119px; height: 35px; border: 0px;}
#subscribe #subright #exclusive form input#emailinput {  float: left; width: 300px; border: 1px solid #ccc; padding: 9px;}
#subscribe #subright #exclusive #error { border-bottom: 1px solid #F00; color: #F00; font-weight: bold; margin-bottom: 5px; width: 450px; text-transform: uppercase;}
#subscribe #subright #exclusive #valid p { font-weight:bold; text-transform:uppercase; color: #993;}

#call { float: right; width: 400px; margin-top: 5px; margin-bottom: 5px;}
#callleft { float: left; padding-top: 10px; width: 265px;  }
#callright { float: right; width: 291px;  }

/* FancyBox Contact Form */

#contact {width:620px height: 265px; margin: 10px 10px 10px 10px; background-color: #fff; padding: 30px 40px 40px 40px; float: left;}
#contact  h1 { float: left; width: 100%;}
#contact p.intro { float: left; clear: both; text-align:left; padding: 5px 0px 5px 0px; border-bottom: 1px dotted #ccc; width: 100%;}
#contact #wform {text-align:left; clear: both; margin-top: 5px; float: left; width: 280px;}
#contact #wform  #wsubmit { float: left; background: url( ../images/submit.png) no-repeat scroll left top; border: 0px; width: 119px; height:35px; margin-top: 5px; cursor:pointer; clear: both;}
#contact #wform input {width:260px; border: 1px solid #ccc; padding: 9px; float: left; clear: both;}
#contact #wform label { float: left; clear: both;}
#contact p {text-align:left;}
#contact #note { float: left; margin: 5px 0px 0px 20px;  }
#contact #notesuc { float: left; margin: 5px 0px 0px 0px;  }
#contact #note .errortitle { color: #F00; font-size: 14px; border-bottom: 1px solid #F00; }
#contact #note #errorm { float: left; clear: both; width: auto;}
#contact #note #errorm p { color: #F00; width: 300px;}
#contact #notesuc .success { color: #960; font-size: 14px; text-decoration: underline;}
#contact #notesuc #sucm { float: left; clear: both; width: auto;}
#contact .tweet { margin-top: 3px; margin-left: 5px;}
#contact .add { border-top: 0px; float: left; width: 315px; margin-left: 20px; margin-top: 0px; }