/*
  $Id: stylesheet.css,v 1.1.1.1 2004/03/04 23:42:24 ccwjr Exp $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2003 osCommerce

  Released under the GNU General Public License
*/
  .cat_description {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #800000;
     background : inherit;
     font-weight : bold;
      }
 .boxText {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
      }
 .centerTable {
     background-image : url('images/bg_cat4.gif');
     background-repeat : repeat-x;
     background : #fbfcfd;
     color : inherit;
      }
 .errorBox {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : inherit;
     background : #ffb3b5;
     font-weight : bold;
      }
 .stockWarning {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #cc0033;
     background : inherit;
      }
 .productsNotifications {
     background : #f2fff7;
     color : inherit;
      }
 .orderEdit {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #70d250;
     background : inherit;
     text-decoration : underline;
      }
 .navBlue {
     color : #ff0000;
     background : inherit;
     font-size : 8pt;
     font-family : verdana, Times New Roman, serif;
      }
 .subnavBlue {
     color : #9966ff;
     background : inherit;
     font-size : 8pt;
     font-family : verdana, Times New Roman, serif;
      }
 BODY {
     background : #ffffff;
     color : #000000;
     margin : 0;
      }
 A {
     color : #000000;
     background : inherit;
     text-decoration : none;
      }
 A:hover {
     color : #aabbdd;
     background : inherit;
     text-decoration : underline;
      }
 FORM {
     display : inline;
      }
 TR.header {
     background : #ffffff;
     color : inherit;
      }
 TR.headerNavigation {
     background : #bbc3d3;
     color : inherit;
      }
 TD.headerNavigation {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     background : #bbc3d3;
     color : #ffffff;
     font-weight : bold;
      }
 A.headerNavigation {
     color : #ffffff;
     background : #bbc3d3;
      }
 a:hover.headerNavigation {
     color : #ffffff;
     background : #bbc3d3;
      }
 TR.headerError {
     background : #ff0000;
     color : #bbc3d3;
      }
 TD.headerError {
     font-family : Tahoma, verdana, Times New Roman, serif;
     font-size : 12px;
     background : #ff0000;
     color : #ffffff;
     font-weight : bold;
      }
 TR.headerInfo {
     background : #00ff00;
     color : #bbc3d3;
      }
 TD.headerInfo {
     font-family : Tahoma, verdana, Times New Roman, serif;
     font-size : 12px;
     background : #00ff00;
     color : #ffffff;
     font-weight : bold;
      }
 TR.footer {
     background : #bbc3d3;
     color : inherit;
      }
 TD.footer {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     background : #bbc3d3;
     color : #ffffff;
     font-weight : bold;
      }
 .templateinfobox {
     background : #f8f8f9;
     color : inherit;
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
      }
 .infoBox {
     background : #b6b7cb;
     color : #000000;
      }
 TD.infoBox, SPAN.infoBox {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
     background : #bbc3d3;
     color : inherit;
      }
 TD.infoBoxHeading {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
     background : #bbc3d3;
     color : #ffffff;
      }

 .infoBoxContents {
     background : #f8f8f9;
     color : #000000;
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
      }
 TD.infoBoxFooter {
    font-family : verdana, Times New Roman, serif;
    font-size : 12px;
    font-weight : bold;
    background-color : #cccccc;
    color : #000000;
}

 TD.contentBoxHeading {
    font-family : verdana, Times New Roman, serif;
    font-size : 12px;
    font-weight : bold;
    color : #534f4d;
     background : #bbc3d3;
    padding-top : 5px;
}
 .infoBoxContentsHeader {
     background : #bbc3d3;
    color : #ffffff;
    font-family : verdana, Times New Roman, serif;
    font-size : 12px;
    font-weight : bold;
}

 TD.infoBoxContentsHeaderImage {
    font-family : verdana, Times New Roman, serif;
    font-size : 12px;
    font-weight : bold;
    background-color : #cccccc;
    color : #000000;
}

 .infoBoxContentsCenter {
    color : inherit;
     background : #f8f8f9;
    font-family : verdana, Times New Roman, serif;
    font-size : 12px;
}

 TD.infoBoxContentsfooter {
    color : #000000;
     background : #bbc3d3;
     font-family : verdana, Times New Roman, serif;
    font-size : 12px;
    font-weight : bold;
}
 TD.infoBoxHeadingImage {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
     background-position : left;
     background-color : #bbc3d3;
     color : #000000;
      }
 TD.infoBoxFooterImage {
     font-family : verdana, Times New Roman, serif;
     font-size : 1px;
     font-weight : bold;
     background-color : #bbc3d3;
     color : #000000;
      }
 .infoBoxNotice {
     background : #ff8e90;
     color : #ffffff;
      }
 .infoBoxNoticeContents {
     background : #ffe6e6;
     color : #ffffff;
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
      }
 TD.main_table_heading {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     background : #cccccc;
     color : #000000;
      }
 TD.main_table_heading_inner {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     background : #ffffff;
     color : #000000;
      }
 TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
     background : #f8f8f9;
     color : inherit;
      }
 TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
     background : #f8f8f9;
     color : inherit;
      }
 TABLE.productListing {
     border : 1px;
     border-style : solid;
     border-color : #b6b7cb;
     border-spacing : 1px;
      }
 .productListing-heading {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #000000;
     font-weight : bold;
   text-align:right;
      }
 .productlisting-headingPrice {
     font-family : verdana, Times New Roman, serif;
     font-size : 20px;
     color : #9a9a9a;
     font-weight : bold;
   text-align:right;
      }
 TD.productListing-data {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
      }
 A.pageResults {
     color : #0000ff;
     background : inherit;
      }
 a:hover.pageResults {
     color : #0000ff;
     background : #ffff33;
      }
 TD.pageHeading, DIV.pageHeading {
     font-family : verdana, Times New Roman, serif;
     font-size : 20px;
     font-weight : bold;
     color : #9a9a9a;
     background : inherit;
      }
 TR.subBar {
     background : #f4f7fd;
     color : inherit;
      }
 TD.subBar {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #000000;
     background : inherit;
      }
 TD.main, P.main {
     font-family : verdana, Times New Roman, serif;
     font-size : 11px;
     line-height : 1.5;
     color : #000000;
     background : inherit;
      }
 TD.smallText, SPAN.smallText, P.smallText {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
      }
 TD.accountCategory {
     font-family : verdana, Times New Roman, serif;
     font-size : 13px;
     color : #aabbdd;
     background : inherit;
      }
 TD.fieldKey {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
      }
 TD.fieldValue {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
      }
 TD.tableHeading {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
      }
 TD.category_desc {
     font-family : verdana, Times New Roman, serif;
     font-size : 11px;
     line-height : 1.5;
      }
 SPAN.newItemInCart {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #ff0000;
     background : inherit;
      }
 CHECKBOX, INPUT, RADIO, SELECT {
     font-family : verdana, Times New Roman, serif;
     font-size : 11px;
      }
 TEXTAREA {
     font-family : verdana, Times New Roman, serif;
     font-size : 11px;
      }
 SPAN.greetUser {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #f0a480;
     background : inherit;
     font-weight : bold;
      }
 TABLE.formArea {
     background : #f1f9fe;
     color : #f4f7fd;
     border-color : #7b9ebd;
     border-style : solid;
     border-width : 1px;
      }
 TD.formAreaTitle {
     font-family : Tahoma, verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
      }
 SPAN.markProductOutOfStock {
     font-family : Tahoma, verdana, Times New Roman, serif;
     font-size : 12px;
     color : #c76170;
     background : inherit;
     font-weight : bold;
      }
 SPAN.productSpecialPrice {
     font-family : verdana, Times New Roman, serif;
     color : #ff0000;
     background : inherit;
      }
 SPAN.errorText {
     font-family : verdana, Times New Roman, serif;
     color : #ff0000;
     background : inherit;
      }
 .moduleRowOver {
     background-color : #d7e9f7;
     color : inherit;
     cursor : pointer;
      }
 .moduleRowSelected {
     background-color : #e9f4fc;
     color : inherit;
      }
 .checkoutBarFrom, .checkoutBarTo {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #8c8c8c;
     background : inherit;
      }
 .checkoutBarCurrent {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #000000;
     background : inherit;
      }
 .messageBox {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
      }
 .messageStackError, .messageStackWarning {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     background-color : #ffb3b5;
     color : inherit;
      }
 .messageStackSuccess {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     background-color : #99ff00;
     color : inherit;
      }
 .inputRequirement {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #ff0000;
     background : inherit;
      }
 TABLE.linkListing {
     border : 1px;
     border-style : solid;
     border-color : #b6b7cb;
     border-spacing : 1px;
      }
 .linkListing-heading {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
     background : #b6b7cb;
     color : #ffffff;
     text-align : center;
      }
 TD.linkListing-data {
     border-right : 1px solid #b6b7cb;
     border-bottom : 1px solid #b6b7cb;
     padding : 4px;
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
      }
 TR.linkListing-odd {
     background : #f8f8f9;
     color : inherit;
      }
 TR.linkListing-even {
     background : #f5f5f5;
     color : inherit;
      }
 .content {
     color : #000000;
     background : inherit;
     font-size : 12px;
     font-family : verdana, Times New Roman, serif;
      }
 TR.ShowCartDetails, TD.ShowCartDetails, P.ShowCartDetails {
     font-family : verdana, Times New Roman, serif;
     font-size : 11px;
     line-height : 1.5;
     color : #bdcaf0;
     background : inherit;
      }
 TR.HeaderPageLinksLeft, TD.HeaderPageLinksLeft, P.HeaderPageLinksLeft {
     background-image : url('images/button_blank_left.gif');
      }
 TR.HeaderPageLinksRight, TD.HeaderPageLinksRight, P.HeaderPageLinksRight {
     background-image : url('images/button_blank_right.gif');
      }
 TR.HeaderPageLinks, TD.HeaderPageLinks, P.HeaderPageLinks {
     background-image : url('images/button_blank_middle.gif');
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
     background-color : inherit;
     color : #000000;
      }
A.Links {
     font-family : verdana, Times New Roman, serif;
     font-size : 14px;
     font-weight : bold;
     color : #1c1cf1;
     text-decoration: underline ;
      }
 A.HeaderPageLinks {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
     color : #000000;
     background : inherit;
      }
 a:hover.HeaderPageLinks {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
     background : inherit;
     color : #00ff00;
      }
 TD.cookieUsage {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     font-weight : bold;
     background : #000000;
     color : #ffffff;
      }
 .attributeBoxContent {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #000000;
     background-color : #808080;
      }
 .TR.attributeBoxContent {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #000000;
     background-color : #808080;
      }
 .TD.attributeBoxContent {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #000000;
     background-color : #c0c0c0;
      }
 .storyboxtitle {
     font-family : verdana, Times New Roman, serif;
     color : #000000;
     font-size : 12px;
     font-weight : bold;
     background : inherit;
      }
 .storyboxtitle A:link {
     font-family : verdana, Times New Roman, serif;
     color : #000000;
     font-size : 12px;
     font-weight : bold;
     background : inherit;
      }
 .storyboxtitle A:active {
     font-family : verdana, Times New Roman, serif;
     color : #000000;
     font-size : 12px;
     font-weight : bold;
     background : inherit;
      }
 .storyboxtitle A:visited {
     font-family : verdana, Times New Roman, serif;
     color : #000000;
     font-size : 12px;
     font-weight : bold;
     background : inherit;
      }
 .storyboxtitle A:hover {
     font-family : verdana, Times New Roman, serif;
     color : #ffffff;
     font-size : 12px;
     font-weight : bold;
     text-decoration : underline;
     background : inherit;
      }
 .yearHeader {
     font-family : verdana, Times New Roman, serif;
     font-size : 14px;
     font-weight : bold;
     color : #000000;
     background-color : #ffffff;
      }
 .calendarMonth {
     background-color : #cccccc;
     color : inherit;
     cursor : default;
     width : 100%;
      }
 .calendarHeader {
     font-family : verdana, Times New Roman, serif;
     font-size : 11px;
     font-weight : bold;
     color : #000000;
     background-color : #ffffff;
     text-decoration : none;
     height : 22px;
      }
 .calendarToday {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #000000;
     background-color : #ffcf00;
     padding-left : 3px;
     text-decoration : none;
     border : 1px solid #ffffff;
     height : 22px;
     width : 18px;
      }
 .calendarWeekend {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #000000;
     background-color : #caeeff;
     padding-left : 3px;
     line-height : 14px;
     text-decoration : none;
     border : 1px solid #ffffff;
     height : 22px;
     width : 18px;
      }
 .calendar {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     color : #000000;
     background-color : #ffffff;
     padding-left : 3px;
     line-height : 14px;
     text-decoration : none;
     height : 22px;
     width : 18px;
      }
 .event {
     font-family : verdana, Times New Roman, serif;
     font-size : 11px;
     color : #000000;
     background-color : #ffffff;
     text-decoration : none;
     border : 1px solid #e6e6e6;
      }
 .empty {
     background-color : #f0faff;
     color : inherit;
     line-height : 14px;
     height : 22px;
     width : 18px;
      }
 .calendar A:hover, .calendar A:link, .calendar A:visited, .calendar A:visited:hover, .yearHeader A:hover {
     color : red;
     text-decoration : underline;
     background : inherit;
      }
 .calendarWeekend A:hover, .calendarWeekend A:link, .calendarWeekend A:visited, .calendarWeekend A:visited:hover {
     color : red;
     text-decoration : underline;
     background : inherit;
      }
 .calendarToday A:hover, .calendarToday A:link, .calendarToday A:visited, .calendarToday A:visited:hover {
     color : red;
     text-decoration : underline;
     background : inherit;
      }
 h4.infoTitle {
     margin-top : 0;
     margin-right : 0;
     margin-left : 0;
     margin-bottom : 0.2em;
      }
 p.infoBlurb {
     margin-top : 0;
     margin-right : 0;
     margin-left : 0;
     margin-bottom : 2em;
      }
 TD.productPriceInListing {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     background : #d2e9fb;
     color : inherit;
      }
 TD.productPriceInBox {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     background : #eeeeee;
     color : inherit;
      }
 TD.productPriceInProdInfo {
     font-family : verdana, Times New Roman, serif;
     font-size : 12px;
     background : #ccffcc;
     color : inherit;
      }
 #navMenu {
     clear : both;
     height : 0.01%;
     margin : 0;
     padding : 0;
     list-style : none;
      }
 #navMenu ul {
     float : left;
     width : 150px;
     margin : 0;
     padding : 0;
     list-style : none;
      }
 #navMenu li {
     position : relative;
     float : left;
     line-height : 24px;
     margin-bottom : -1px;
     width : 150px;
      }
 #navMenu li ul {
     position : absolute;
     left : -999em;
     margin-left : 150px;
     margin-top : -26px;
      }
 #navMenu li ul ul {
     left : -999em;
      }
 #navMenu li a {
     width : 150px;
     display : block;
     color : #334;
     font-weight : bold;
     text-decoration : none;
     background : #ffffff;
     border : 1px solid #cce;
     padding-left : 2px;
      }
 #navMenu li a:hover {
     color : #000000;
     background : #aac;
      }
 #navMenu li:hover ul ul, #navMenu li:hover ul ul ul, #navMenu li.sfhover ul ul, #navMenu li.sfhover ul ul ul {
     left : -999em;
      }
 #navMenu li:hover ul, #navMenu li li:hover ul, #navMenu li li li:hover ul, #navMenu li.sfhover ul, #navMenu li li.sfhover ul, #navMenu li li li.sfhover ul {
     left : auto;
      }
.news_box {
	border-bottom : 1px solid #ff0000; padding: 3px;
	font-family: Osaka; font-size: 12px; font-weight: none; background: #000000; color: #ffffff;
}

.news_inner_box {
	border-bottom : 1px solid #ff0000; padding: 3px;
	font-family: verdana, Times New Roman, serif; font-size: 12px; font-style: italic; background: #ffffff; color: #000000;
}

.news_bottom_box {
	border-bottom : 1px solid #cccccc; padding: 3px;
	font-family: verdana, Times New Roman, serif; font-size: 12px; background: #ffffff; color: #000000;
}
div.menuBar,
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
	font-family: arial, verdana, sans-serif;
	font-size: 11px;
}

div.menuBar {
	background-color: #F1F3F5;
	border-top:4px solid #80B5D7;
	border-bottom:1px solid #cccccc;
	height:25px;
}

div.menuBar a.menuButton {
	color: #000000;
	cursor: default;
	padding: 4px 6px 4px 6px;
	position: relative;
	text-decoration: none;
	top: 5px;
	z-index: 100;
	border: 1px solid #F1F3F5;
}

div.menuBar a.menuButton:hover {
	color: black;
}

div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
	background-color: #B5CDE8;
	border:1px solid #30559C;
	color: black;
}

div.menu {
	background-color: #F1F3F5;
	border: 1px solid #8C867B;
	left: 0px;
	position: absolute;
	visibility: hidden;
	z-index: 101;
}

div.menu a.menuItem {
	color: #000000;
	cursor: default;
	display: block;
	text-decoration: none;
	white-space: nowrap;
	border:1px solid #F1F3F5;
	/*	background-image:url(/includes/js/ThemeOffice/edit.png);  causes pages to load slow looking for non existant image path */
	background-repeat:no-repeat;
	padding:4px;
	padding-left:24px;
	padding-right:10px;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
	background-color: #B5CDE8;
	color: black;
	border:1px solid #30559C;
	/*	background-image:url(/includes/js/ThemeOffice/edit.png);  causes pages to load slow looking for non existant image path */
	background-repeat:no-repeat;
}

.columnLeft {
	background-color:transparent;
	border-color: transparent;
	border-width: 0px;
	border-style:none;
	padding: 0px;
	width:0px;
}
/* --- static menu styles ---
note:
	1. not all browsers render styles the same way so try out your style sheet
	on different browsers before publishing;
style naming convention:
	m<zero based menu number>l<zero based level number>i|o<for inner or outer tag>
*/


.m0l0o {
	border: 1px solid #ffffff;
	text-decoration: none;
	font-weight : bold;
}

.m0l1o {
	border: 1px solid #ffffff;
	text-decoration: none;
	font : bold;
}

.m0l2o {
	border: 1px solid #ffffff;
	text-decoration: none;
	font : bold;
}
.m0l3o {
	border: 1px solid #ffffff;
	text-decoration: none;
	font : bold;
}

.m0l0i {
	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;
	padding: 4px;
	text-decoration: none;
	font : bold;
}

.m0l1i {
	font-size: 12px;
	font-family: Tahoma, Verdana, Arial;
	padding: 4px;
	text-decoration: none;
	font-weight : bold;
}

.m0l2i {
	font-size: 12px;
	font-family: Tahoma, Verdana, Arial;
	padding: 4px;
	text-decoration: none;
	font : bold;
}

.m0l3i {
	font-size: 12px;
	font-family: Tahoma, Verdana, Arial;
	padding: 4px;
	text-decoration: none;
	font : bold;
}
div#scrollbar1, div#scrollbar2, div#scrollbar3 {
    display:block; /* initially display:none; to hide from incapable */
    }

div#wn1  { 
  position:relative; 
  width:220px; height:150px; 
  overflow:hidden;
  }
div#wn2	{ 
	position:relative; 
	width:166px; height:166px; 
	overflow:hidden;
	}
  
div#scrollbar1 { 
  position:relative;
  width:11px; height:150px; 
  font-size:1px;  /* so no gap or misplacement due to image vertical alignment */
  }
div#track1 { 
  position:absolute; left:0; top:12px;
  width:11px; height:126px;
  background: #336;
  }
div#dragBar1 {
  position:absolute; left:1px; top:1px;
  width:9px; height:20px;
  background-color:#ceced6;
  z-index:1
  }  
div#up1 { position:absolute; left:0; top:0; z-index:2 }  
div#down1 { position:absolute; left:0; bottom:0; z-index:3 }  

/* vertical scrollbar for wn2 */    
div#scrollbar2 { 
  position:relative;
  width:11px; height:140px; 
  font-size:1px;
  }
div#track2 { 
  position:absolute; left:0; top:12px;
  width:11px; height:116px;
  background: #336;
  }
div#dragBar2 {
  position:absolute; left:1px; top:1px;
  width:9px; height:20px;
  background-color:#ceced6;
  }  
div#up2 { position:absolute; left:0; top:0; }  
div#down2 { position:absolute; left:0; bottom:0; } 
  
/* Horizontal scrollbar for wn2 */  
div#scrollbar3 { 
  position:relative;
  width:130px; height:11px;
  font-size:1px;
  }
div#track3 { 
  position:absolute; left:12px; top:0;
  width:106px; height:11px; 
  background: #336;
  }
div#dragBar3 {
  position:absolute; left:1px; top:1px;
  width:20px; height:9px; 
  background-color:#ceced6;
  }  
div#left3 { position:absolute; left:0; top:0; }  
div#right3 { position:absolute; right:0; top:0; }


/* for safari, to prevent selection problem  */
div#scrollbar1, div#track1, div#dragBar1, div#up1, div#down1,
div#scrollbar2, div#track2, div#dragBar2, div#up2, div#down2,
div#scrollbar3, div#track3, div#dragBar3, div#up3, div#down3
    {
    -moz-user-select: none;
    -khtml-user-select: none;
    }


/* so no gap or misplacement due to image vertical alignment
font-size:1px in scrollbar has same effect (less likely to be removed, resulting in support issues) */
div#scrollbar1 img, div#scrollbar2 img, div#scrollbar3 img {
    display:block; 
    }