/*
Title:  Harvard Battery
Author:  Tome Wilson - tome@creativewebgroup.net
Last Updated:  July 8, 2009
*/


/* ---[ css reset ]--------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
/* remember to define focus styles! */
:focus {outline: 0}
body {line-height: 1; color: #000; background: #fff}
ol, ul {list-style: none}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0}
td {padding: 6px}
/* td {padding: 6px; border: 1px solid #ccc} */
caption, th, td {text-align: left; font-weight: normal}
em, .em {font-style: italic}
strong, .strong {font-weight: bold}
.big {font-size: 1.15em}
.small {font-size: .85em}
.l {float: left}
.r {float: right}
#content h1{font-family:Calibri, Tahoma, Arial, Helvetica, sans-serif;}
.clear {clear: both; width: 467px; display: block}
.center {text-align: center}


/* ---[ structure ]--------------------- */
html, body {background: #fff url(../images/shell/background.gif) repeat-x; height: 100%; min-width: 760px; text-align: center; color: #222}
#container {margin: 0 auto; width: 760px; display: block; text-align: left}


/* ---[ header ]--------------------- */
#header {width: 760px; height: 50px}

#header #top-navigation {font: normal 15px/51px Calibri, Tahoma, Arial, Helvetica, sans-serif; width: 466px; height: 50px; float: left}
#header #top-navigation #navlist ul {margin: 0; padding: 0}
#header #top-navigation #navlist li {list-style-type: none; margin-right: 22px; float: left}
#header #top-navigation #navlist a:link {text-decoration: none; color: #fff}
#header #top-navigation #navlist a:visited {text-decoration: none; color: #fff}
#header #top-navigation #navlist a:hover {text-decoration: underline; color: #fff}
#header #top-navigation #navlist a:active {text-decoration: none; color: #fff}

#header #call-us {float: left}


/* ---[ logo and search bar ]--------------------- */
#logobar {width: 760px; height: 58px; clear: both}
#logobar #logo {float: left}
#logobar #searchbar {width: 629px; height: 58px; float: left}
#logobar #product-search {margin: 0 7px 0 225px; float: left}

#logobar #searchbar #category {width: 77px; height: 58px; margin-right: 4px; background: transparent url('../images/shell/category-background.gif') no-repeat left center; float: left}
#logobar #searchbar #category .box {border: 0; height: 19px; width: 73px; margin: 18px 0 0 2px; padding: 0; color: #ef6310; font: normal 15px/1em Calibri, Tahoma, Arial, Helvetica, sans-serif}
#logobar #searchbar #keyword {width: 163px; height: 58px; margin-right: 4px; background: transparent url('../images/shell/keyword-background.gif') no-repeat left center; float: left}
#logobar #searchbar #keyword .box {border: 0; height: 19px; width: 155px; margin: 19px 0 0 4px; padding: 0; color: #ef6310; font: normal 15px/1em Calibri, Tahoma, Arial, Helvetica, sans-serif}
#logobar #searchbar #search-button {width: 32px; height: 58px; float: left}


/* ---[ content shell ]--------------------- */
#content-top {width: 760px; height: 9px; clear: both; background: transparent url('../images/shell/content-t.gif') repeat-x}
#content-container {width: 760px; background: transparent url('../images/shell/content-background.gif') repeat-y; font: normal 12px/1.6em Arial, Helvetica, sans-serif; text-align: left; color: #222}


/* ---[ navigation ]--------------------- */
#content-container #navigation {float: left; margin: 0 0 0 10px; padding: 10px 0 0 0; width: 234px; font: normal 13px/1.6em Calibri, Arial, Helvetica, sans-serif; color: #000}
#content-container #navigation #send-button {width: 59px; height: 23px}
#content-container #navigation .inputText {width: 224px; height: 17px; border: 3px double #ccc; padding-left: 3px; font: normal 13px/1.6em Calibri, Arial, Helvetica, sans-serif; color: #000}
#content-container #navigation .inputTextarea {width: 221px; height: 51px; border: 3px double #ccc; font: normal 13px/1.6em Calibri, Arial, Helvetica, sans-serif; color: #000}

#content-container #content {float: left; position: relative; top: 0; left: 18px; width: 488px; font: normal 12px/1.6em Arial, Helvetica, sans-serif; text-align: left; color: #222}


/* ---[ colors ]--------------------- */
.o {color: #ef6310 !Important}
.b {color: #221f73 !Important}
.g {color: #4b4b4b !Important}
.red {color: #ef6310 !Important} 
.k {color: #000 !Important}
.w {color: #fff !Important}


/* ---[ content styles ]--------------------- */
#content p {margin: .25em 0 1em 0}

#content ul {margin: 0; padding: 0 0 .75em 2em; list-style-type: circle}
#content ul ul {padding: 0; margin: .25em 0 -.15em 30px}
#content ol {padding: 0; margin: .25em 0 1em 30px; list-style-type: decimal}
#content ol ol {padding: 0; margin: .25em 0 -.25em 30px}
#content li {padding: 4px}

.none {margin: 0; padding: 0 0 .75em 0; list-style-type: none}

#content .list ul {margin: 0; padding: 0 0 0 1em; list-style-type: none} 
#content .list li {background: url(../images/icons/bullet.gif) no-repeat; background-position: 0 3px; padding: 0 0 0 18px; margin: 1em 0; list-style-type: none}

.column1, .column2 {width: 240px; display: block; float: left; margin-right: 6px}
.column2 {margin-right: 0}

#quote {font-style: italic; margin: 1em 0;}
#quote p {display: inline}
.startquote {display: inline; background: transparent url('../images/icons/quotes1.gif') no-repeat 0 .5em; height: 14px; width: 10px; padding: 7px 5px}
.endquote {display: inline; background: transparent url('../images/icons/quotes2.gif') no-repeat right center; height: 14px; width: 10px; padding: 7px 5px}

.photoL {float: left; clear: left; margin: .25em .75em .25em 0}
.photoR {float: right; clear: right; margin: .25em 0 .25em .75em}

.border {border: 1px solid #000}
.cell {padding: 6px 0}
.zebra {background-color: #efefef; border: 1px solid #ccc}

.pdf {background: transparent url(../images/icons/pdf.gif) no-repeat right top; padding-right: 12px}
.back {background: transparent url(../images/icons/back.gif) no-repeat left top; padding-left: 18px}
.forward {background: transparent url(../images/icons/forward.gif) no-repeat right top; padding-right: 15px}

.hr {font-size: 1px; border-bottom: 1px solid #ccc}
.hro {font-size: 1px; border-bottom: 1px dashed #ccc}

#content a:link {text-decoration: none; color: #ef6310}
#content a:visited {text-decoration: none; color: #ef6310}
#content a:hover {text-decoration: underline; color: #221f73}
#content a:active {text-decoration: none; color: #ef6310}

.box {background: #fff url(../images/shell/orange-box/middle.gif) repeat-y; width: 467px; padding: 0 10px}
.question {font-weight: bold; color: #4b4b4b; width: 467px; display: block}
.answer {margin-bottom: -1em}
.bottom {margin-bottom: -1em; clear: both}
.bump {padding: .5em 0}

.features {padding: 6px; background: #fff url(../images/products/bar-background.gif) repeat-x; border: 1px solid #ccc; margin-bottom: 3px; font-size: 11px}
.description {padding: 6px; background: #fff url(../images/products/bar-background.gif) repeat-x; border: 1px solid #ccc; margin-bottom: 1em; font-size: 11px}
#product-image {height: 120px; width: 120px; float: right; clear: right; margin: .25em 0 .25em .75em}
#product-image.scanner-batteries {background: #fff url(../images/icons/scanner-batteries.jpg) no-repeat}
#product-image.printer-batteries {background: #fff url(../images/icons/printer-batteries.jpg) no-repeat}
#product-image.replacement-batteries {background: #fff url(../images/icons/replacement-batteries.jpg) no-repeat}
#product-image.cables {background: #fff url(../images/icons/cables.jpg) no-repeat}
#product-image.ribbons {background: #fff url(../images/icons/ribbons.jpg) no-repeat}
#product-image.battery-chargers {background: #fff url(../images/icons/battery-chargers.jpg) no-repeat}


/* ---[ headings ]--------------------- */
h1 {font: normal 40px/1.25em Georgia, "Times New Roman", Times, serif; color: #ef6310; letter-spacing: -.05em}
h2 {font-size: 1.25em; font-weight: bold; line-height: 1.25em; color: #ef6310; margin: .25em 0}
h3 {font-size: 1em; font-weight: bold; line-height: 1.25em; color: #4b4b4b; margin-bottom: .25em}


/* ---[ contact form ]--------------------- */
#content form {margin: 0; padding: 0; font-size: 100%; width: auto}
#content form fieldset {clear: both; font-size: 100%; border-color: #000; border-width: 1px 0 0 0; border-style: solid none none none; padding: 10px; margin: 0}
#content form fieldset legend {font-size: 1.25em; font-weight: bold; color: #4b4b4b; margin: 0; padding: 0 .25em;}
#content label {font-size: 100%}
#content label u {font-style: normal; text-decoration: underline}
#content input, select, textarea {font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif; font-size: .9em; color: #000}
#content textarea {overflow: auto}
#content form div {clear: left; display: block; width: 440px; height: 1%; margin: 5px 0 0 0; padding: 1px 3px}
#content form div fieldset {clear: none; border: 1px solid #666; margin: 0 0 0 144px; padding: 0 5px 5px 5px; width: 197px}
#content form div fieldset legend {font-size: 100%; padding: 0 3px 0 9px}
#content form div.required fieldset legend {font-weight: bold; color: #ef6310}
#content form div label {display: block; float: left; width: 130px; padding: 3px 5px; margin: 0 0 5px 0; text-align: right}
#content form div.optional label, label.optional {font-weight: normal}
#content form div.required label, label.required {font-weight: bold; color: #ef6310}
#content form div label.labelCheckbox, form div label.labelRadio {float: none; display: block; width: 200px; height: 1%; padding: 0; margin: 0 0 5px 142px; text-align: left}
#content form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {margin: 0 0 5px 0; width: 170px}
#content form div img {border: 1px solid #000}
#content p.error {background-color: #f00; background-image: url(../images/form/icon_error.gif); background-repeat: no-repeat; background-position: 3px 3px; color: #fff; padding: 3px 3px 5px 27px; border: 1px solid #000; margin: auto 100px}
#content form div.error {background-color: #ffffe1; background-image: url(../images/form/required_bg.gif); background-repeat: no-repeat; background-position: top left; color: #666; border: 1px solid #f00}
#content form div.error p.error {background-image: url(../images/form/icon_error.gif); background-position: top left; background-color: transparent; border-style: none; font-size: 88%; font-weight: bold; margin: 0 0 0 118px; width: 200px; color: #f00}
#content form div input, form div select, form div textarea {width: 200px; padding: 1px 3px; margin: 0}
#content form div input.inputFile {width: 211px}
#content form div select.selectOne {width: 211px; padding: 1px 3px}
#content form div select.selectMultiple {width: 211px}
#content form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {display: inline; height: 14px; width: 14px; background-color: transparent; border-width: 0; padding: 0; margin: 0 0 0 140px}
#content form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {background-color: #cccccc; color: #000; width: auto; padding: 0 6px; margin: 0}
#content form div.submit div input.inputSubmit, form div.submit div input.inputButton {float: right; margin: 0 0 0 5px}
#content form div small {display: block; margin: 0 0 5px 142px; padding: 1px 3px; font-size: .75em; height: 1%}
#content form fieldset legend {line-height: 150%}
#content form input, form select, form textarea {background-color: #fff}
/* #content form textarea.expanding {overflow: auto; overflow-x: auto; overflow-y: visible} */
#content div.optional label:before {content: ''}
#content div.required label:before {content: ''}
#content form div label.labelCheckbox, form div label.labelRadio, label.labelCheckbox, label.labelRadio {display: block; width: 190px; height: 1%; padding: 4px 0 0 18px; text-indent: -18px; line-height: 120%}
#content form div label.labelCheckbox input.inputCheckbox, form div label.labelRadio input.inputRadio, label.labelCheckbox input.inputCheckbox, label.labelRadio input.inputRadio {margin: 0}
#content form div fieldset input.inputText, form div fieldset input.inputPassword, form div fieldset input.inputFile, form div fieldset textarea.inputTextarea {width: 160px; margin: 0 0 0 18px; margin: 0 0 0 -124px}
#content form div label.compact {display: inline; width: auto; padding: 4px 10px 0 0; text-indent: 0; margin: 0}
#content form div.wide label {float: none; display: block}
#content form div label.wide {width: 348px}
#content form div.wide input.inputText, form div.wide input.inputPassword, form div.wide input.inputFile, form div.wide select, form div.wide textarea {width: 344px; margin: 0}
#content form div.notes p, form div small {line-height: 125%}
#content form div.wide small {margin: 0 0 5px 0}
p.floatmid {margin:suto;float:right;}

/*--- [Bob Babb] ------------------- */
.droplist {width: 95px;}
table.results {width: 482px; margin-left: auto; margin-right: auto; padding: 0; font: normal 10pt Verdana, Arial, Helvetica, sans-serif;}
table.results td {vertical-align: text-top;}
table.results th {vertical-align: text-top; width: 120px;}
table.results img {width: 120px; height: 120px; border: 0; vertical-align: bottom}
table.searchit {width: 487px; margin-left: auto; margin-right: auto; padding: 5px; font: normal 11pt Verdana, Arial, Helvetica, sans-serif;}
table.searchit th {padding: 6px; background: #fff url(../images/products/bar-background.gif) repeat-x; border: 1px solid #ccc; margin-bottom: 3px; font-size: 13px}
table.searchit td {padding: 6px; background: #fff url(../images/products/bar-background.gif) repeat-x; border: 1px solid #ccc; margin-bottom: 3px; font-size: 13px}
table.searchit td.noright {padding: 6px; background: #fff url(../images/products/bar-background.gif) repeat-x; border-left: 1px solid #ccc;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc; margin-bottom: 3px; font-size: 13px}
table.searchit td.noborder {background: #fff url(../images/products/bar-background.gif)repeat-x;border-bottom:1px solid #ccc;border-top:none;margin-bottom:3px;font-size:13px;vertical-align:text-top}
table.searchit th.nobordtop {padding: 6px; background: #fff url(../images/products/bar-background.gif) repeat-x; border-top: 1px solid #ccc;border-bottom:none; margin-bottom: 3px; font-size: 13px}
table.searchit td.noleft {padding: 6px; background: #fff url(../images/products/bar-background.gif) repeat-x; border-top: 1px solid #ccc;border-bottom: 1px solid #ccc; margin-bottom: 3px; font-size: 13px}

.productlist {background: #fff url(../images/products/bar-background.gif) repeat-x; border: 1px solid #ccc; width: 148px; height: 190px; display: block; margin: 3px 6px 3px 0; padding: 6px 3px 0 3px; text-align: center; float: left; overflow: hidden}
.productnav {background: #fff url(../images/products/bar-background.gif) repeat-x; border: 1px solid #ccc; width: 487px; margin: 1em 0; padding: .5em 0; clear: both; font-weight: bold; color: #4b4b4b; text-align: center}

.productlist_new {display: block; margin: 10px 0; border-bottom: 1px solid #ccc; padding: 10px}
.productlist_image {float: left; display: block; width: 120px; padding: 0 20px 5px 0}
.productlist_specs {float: left; display: block; width: 305px}


/* ---[ footer ]--------------------- */
#footer {clear: both; margin-top: 3em; width: 100%; height: 26px; text-align: center; font: normal 12px/24px Calibri, Tahoma, Arial, Helvetica, sans-serif; background: #ef6310 url(../images/shell/footer-background.gif) repeat-x; color: #ef6310}
#footer a:link {text-decoration: none; color: #fff; margin: 0 12px}
#footer a:visited {text-decoration: none; color: #fff}
#footer a:hover {text-decoration: underline; color: #fff}
#footer a:active {text-decoration: none; color: #fff}