/* ------------- "generic" styles */
body {
margin: 0;
padding: 0;
background-color: #123B17;
background-image: url(/content/ocilloscope.jpg);
background-attachment: fixed;
font-family: arial, sans-serif;
font-size: 12px;
}
a {
text-decoration: none;
}
a img {
border: 0 none;
}
.clearfloat {
clear:left;
/*height:0;*/
font-size: 1px;
line-height: 0px;
}
/*
I big help in putting the left bar together was
with the help of this page
http://www.alistapart.com/articles/taminglists/
border: 1px solid #000;
*/
#content {
margin: 0 auto;
width: 1000px;
color: #000;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
/*
overflow:hidden; /* This chops off any overhanging divs */
*/
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 20em 0;
}
/* 2 Column (left menu) settings */
.leftmenu {
background:#fff; /* right column background colour */
}
.leftmenu .colleft {
right:85%; /* right column width */
background:transparent; /* left column background colour */
}
.leftmenu .col1 {
width:81%; /* right column content width */
left:104%; /* 100% plus left column left padding */
background: #fff;
}
.leftmenu .col2 {
width:19%; /* left column content width (column width minus left and right padding) */
left:4%; /* (right column left and right padding) plus (left column left padding) */
height: 400px;
}
#leftsidebar ul.topList {
list-style: none;
margin: 0;
padding: 0;
}
#leftsidebar ul.nestedList {
list-style: none;
margin: 0;
padding: 8px 0px 5px 0px;
}
#leftsidebar li.listItemDepth0 a {
background: transparent url(/template5/images/leftsidebar-top-img.gif) no-repeat scroll left top;
padding: 2px 2px 2px 10px;
margin-right: 10px;
display: block;
color: #fff;
text-decoration: none;
font-weight: bold;
width: 100%;
}
#leftsidebar li.listItemDepth0 a:hover {
color: #f79b4a;
}
#leftsidebar li.listItemDepth1 {
background: transparent;
display: block;
padding: 0px 1px 0px 10px;
margin-right: 0px;
font-weight: normal;
color: blue;
text-decoration: none;
width: 100%;
}
#leftsidebar li.listItemDepth1 a {
background: transparent;
padding: 0px 0px 0px 5px;
display: block;
color: blue;
text-decoration: none;
font-weight: normal;
width: 100%;
}
#leftsidebar li.listItemDepth1 a:hover {
color: #f79b4a;
}
#leftsidebar li.listItemDepth2 {
background: transparent;
display: block;
padding: 0px 0px 0px 20px;
margin-right: 0px;
font-weight: normal;
color: red;
text-decoration: none;
width: 100%;
}
#leftsidebar li.listItemDepth2 a {
background: transparent;
padding: 0px 0px 0px 15px;
display: block;
color: red;
text-decoration: none;
font-weight: normal;
width: 100%;
}
#leftsidebar li.listItemDepth2 a:hover {
color: #f79b4a;
}
#leftsidebar li.listItemDepth3 {
background: transparent;
display: block;
padding: 0px 0px 0px 30px;
margin-right: 0px;
font-weight: normal;
color: green;
text-decoration: none;
width: 100%;
}
#leftsidebar li.listItemDepth3 a {
background: transparent;
padding: 0px 0px 0px 25px;
display: block;
color: green;
text-decoration: none;
font-weight: normal;
width: 100%;
}
#leftsidebar li.listItemDepth3 a:hover {
color: #f79b4a;
}
/*
Here is the top menu. Very simple
*/
#top {
clear: both;
float:left;
width:100%;
background: #000;
}
div#top {
position: relative;
display: block;
margin-top: 0;
width: 100%;
height: 150px;
background-image: url(/content/csinewtop.png);
background-repeat: repeat-x;
z-index: 2;
-moz-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-right-radius:20px;
-webkit-border-top-left-radius:20px;
}
div#topLogo {
display: block;
position: absolute;
background-image: url(/content/csi.png);
z-index: 3;
height: 95px;
width: 229px;
left: 25px;
top: 30px;
background-repeat: no-repeat;
}
div#topSlogan {
display: block;
position: absolute;
z-index: 4;
width: 330px;
right: 10px;
top: 31px;
text-align: right;
}
div#topSlogan p {
color: yellow;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 4px;
letter-spacing: 0.1em
}
div#outerDiv {
position: relative;
width: 1000px; /* sets the content width */
margin: 0 auto; /* no top/bottom margin, centered horizontally */
background: #fff; /* white content background, header image */
}
div#bbb {
display: block;
position: absolute;
top: 58px;
left: 276px;
height: 56px;
width: 149px;
z-index: 4;
background-image: url(/content/cbbb-badge-horz.png);
background-repeat: no-repeat;
}
div#ups {
display: block;
position: absolute;
top: 50px;
left: 440px;
height: 72px;
width: 61px;
background-image: url(/content/UPSLogoSmall2.png);
z-index: 4;
}
div#upsText {
display: block;
position: absolute;
top: 13px;
left: 384px;
height: 40px;
width: 169px;
z-index: 4;
}
div#upsText p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: yellow;
text-align: center;
margin: 0;
}
div#freeStuff {
display: block;
position: absolute;
top: 44px;
left: 530px;
width: 149px;
text-align: center;
z-index: 4;
}
div#freeStuff p {
color: yellow;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
margin: 0;
}
div#freeStuff span {
color: yellow;
}
.freeStuff:link {
color: #fff;
text-decoration: none;
}
.freeStuff:visited {
color: #fff;
text-decoration: none;
}
.freeStuff:hover {
color: #fff;
text-decoration: none;
}
div#cardsPaypal {
display: block;
position: absolute;
top: 74px;
right: 180px;
height: 55px;
width: 144px;
background-image: url(/content/creditcardpaypal.png);
z-index: 4;
}
div#topmenu {
display: block;
position: absolute;
top: 0px;
height: 22px;
width: 100%;
text-align: right;
padding: 10px 0px 0px 0px;
}
#topmenu ul {
margin: 0;
display: inline;
padding-right: 10px;
}
#topmenu ul li {
font-weight: bolder;
border-left: 1px solid #fae9b5;
padding-left: 8px;
padding-right: 5px;
list-style: none;
display: inline;
}
#topmenu ul li.first {
border-left: none;
}
#topmenu ul li a {
text-decoration: none;
color: #fae9b5;
}
#topmenu ul li a:hover {
color: #f79b4a;
}
#showcart {
background-color:#EBDFC7;
float:right;
height:22px;
text-align:right;
vertical-align: middle;
width:180px;
}
#navbar {
clear:both;
float:left;
width:100%;
background: #999;
}
#navlinks {
margin: 0;
padding: 0.25em 3em .25em 1em;
background: #999;
background-repeat: repeat-x;
background-image: url("/template5/images/top_nav_bg_brown.gif");
}
#navlinks li {
padding: 0 0.75em 0 0.75em;
border-right: 1px solid #fae9b5;
font-weight: bold;
display: inline;
list-style: none;
color: #fae9b5;
}
#navlinks li.first {
border-left: none;
}
#navlinks a {
text-decoration: none;
color: #fae9b5;
}
#navlinks a:hover {
color: #f79b4a;
}
a.navbarDark {
font-weight: bold;
text-decoration: none;
color: #333333;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
background: #666;
z-index: auto;
overflow: hidden;
}
#footer p {
padding:10px;
margin:0;
}
#footer a {
color: #1b9d95;
text-decoration: none;
}
#footerlinks {
margin: 0;
padding: 0;
display: inline;
}
#footerlinks li {
font-weight: bolder;
border-left: 1px solid #996633;
padding-left: 8px;
padding-right: 5px;
list-style: none;
display: inline;
}
#footerlinks li.first {
border-left: none;
}
#footerlinks li a {
text-decoration: none;
color: #996633;
}
#footerlinks li a:hover {
color: #f79b4a;
}
#mainbody {
padding-top: 10px;
}
/* Item Detail Section */
#productCell {
margin-right: 70px;
padding: 0px;
}
#productCell .itemDescription {
padding: 5px 10px 3px 10px;
text-align: left;
}
#productCell .name {
font-size: 14px;
font-weight: bold;
}
#productCell .mainbody {
text-align: left;
margin: 0px;
padding-bottom: 5px;
}
#productCell .imagecell {
vertical-align: top;
padding-right: 10px;
padding-left: 10px;
width: 300px;
text-align: center;
}
#productCell .availabilty {
padding-bottom: 3px;
padding-top: 3px;
border-top: solid;
border-top-width: 1px;
}
#productCell .sku {
border-top: solid;
border-top-width: 1px;
padding-top: 3px;
padding-bottom: 3px;
}
#productCell .price {
border-top: solid;
border-top-width: 1px;
border-bottom: solid;
border-bottom-width: 1px;
padding-top: 3px; padding-bottom: 3px;
}
#productCell .info {
margin-top: 5px;
padding-bottom: 5px;
border-top: 1px solid;
background-color: #eaeaea;
}
#productCell .addToCart {
margin-bottom: 1.5em;
padding-bottom: 0px;
}
#productCell .description {
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
text-align: left;
}
#productCell .suggest {
color: #333;
}
#productCell .suggesttab {
width: 660px;
margin: 0;
padding: 0;
}
/*------- breadcrumbs--------*/
.bread {
padding-right: 8px;
padding-left: 8px;
padding-bottom: 1px;
padding-top: 1px;
clear:both;
height:100%;
}
.bread:link {
font-size:10px;
text-transform: uppercase;
color: #000;
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.bread:visited {
font-size:10px;
text-transform: uppercase;
color:#000;
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.bread:hover {
font-size:10px;
text-transform: uppercase;
color:#820721;
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.breadoff {
padding-right: 8px;
padding-left: 8px;
padding-bottom: 1px;
padding-top: 1px;
clear:both;
height:100%;
}
.breadoff:link {
font-size:10px;
text-transform: uppercase;
color: #d3d3d3;
text-decoration: none;
vertical-align:middle;
font-weight:400;
}
.breadoff:visited {
font-size:10px;
text-transform: uppercase;
color:#d3d3d3;
text-decoration: none;
vertical-align:middle;
font-weight:400;
}
.breadoff:hover {
font-size:10px;
text-transform: uppercase;
color:#820721;
text-decoration: none;
vertical-align:middle;
font-weight:400;
}
/* Form Input */
input.formInputText {
color: #000;
background-color: #f1f1f1;
border: solid 1px #666;
}
input.formInputText:hover {
background-color: #ddd;
border: solid 1px #666;
color: #000;
cursor: pointer;
}
input.formInputText:focus {
color: #000;
background-color: #feffbd;
border: solid 1px #666;
cursor: text;
}
input.formInputButton {
text-align: center;
padding: 1px;
border: solid 1px #f66;
cursor: pointer;
}
input.formInputButton:hover {
background-image: url(bg_button_hover.png);
}
input.formInputButton:active {
background-image: url(bg_button.png);
}
.btngr {
/*border:1px #D2D0E9 solid;*/
padding-right: 8px;
padding-left: 8px;
padding-bottom: 2px;
padding-top: 2px;
clear:both;
height:100%;
background-color: #7D868F;
background-image: url("/template5/images/btnBkgndGreen.gif");
-moz-border-radius:3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius:3px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
}
.btngr:link {
font-size:10px;
text-transform: uppercase;
color: #FFF;
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.btngr:visited {
font-size:10px;
text-transform: uppercase;
color:#FFF;
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.btngr:hover {
font-size:10px;
text-transform: uppercase;
color:#fabb63;
/*border:1px #fabb63 solid;*/
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.btnsm {
/*border:1px #D2D0E9 solid;*/
padding-right: 8px;
padding-left: 8px;
padding-bottom: 2px;
padding-top: 2px;
clear:both;
height:100%;
background-color: #7D868F;
background-image: url("/template5/images/btnBkgndBrown.gif");
-moz-border-radius:3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius:3px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
}
.btnsm:link {
font-size:10px;
text-transform: uppercase;
color: #FFF;
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.btnsm:visited {
font-size:10px;
text-transform: uppercase;
color:#FFF;
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.btnsm:hover {
font-size:10px;
text-transform: uppercase;
color:#fabb63;
/*border:1px #fabb63 solid;*/
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
div.product-summary-box {
width: 100%;
}
div.product-summary-box div {
float: left;
width: 210px;
height: 235px;
margin: 5px;
padding: 0;
border: 1px solid #cfcfcf;
}
div.product-summary-box div.detailsBox {
float: left;
width: 220px;
height: 160px;
margin: -5px;
padding: 0;
border: none;
}
div.product-summary-box img {
padding: 0 15px 0 20px;
}
div.product-summary-box a {
color: #996633;
}
div.product-summary-box a:visited {
color: #89b65c;
}
div.product-summary-box a:hover {
color: #f79b4a;
}
div.product-summary-box p {
margin: 0;
padding: 0 10px 8px 10px;
text-align: center;
}
div.product-summary-box div h2 {
margin: 0 ;
padding: .5em 1em .5em;
color: #686397;
background: #A0C63A;
font-size: 1em;
border: none;
}
div.product-summary-box div img {
float: none;
margin: 2em 0 0 0;
border: none;
}
div#product-summary-box div div {
margin: 1em;
border: none;
}
#prevnext {
text-align: right;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
width: 650px;
}
#prevnextend {
text-align: right;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
}
/*Shadow for images*/
.img-shadow {
float:left;
background: url('/content/shadowAlpha.png') no-repeat bottom right !important;
background: url('/content/shadow.gif') no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
.tableData {
color: #000;
}
.tableDataRight {
color: #000;
text-align: right;
}
.tableDataCenter {
color: #000;
text-align: center;
vertical-align: middle;
}
.dataTable {
border-style: solid;
border-color: #9e9ec3;
border-width: 1px 1px 1px 1px;
}
.dataTable td {
padding: 3px 3px 3px 3px;
margin: 0px 0px 0px 0px;
border-style: solid;
border-color: #9e9ec3;
border-width: 1px 1px 1px 1px;
}
.dataTable th {
padding: 2px 3px 2px 3px;
margin: 0px 0px 0px 0px;
border-style: solid;
border-color: #9e9ec3;
border-width: 1px 1px 1px 1px;
}
.oddrow {
background: #fff;
}
.evenrow {
background: #e5e5e5;
}
.btnpage {
/*border:1px #D2D0E9 solid;*/
padding-right: 8px;
padding-left: 8px;
padding-bottom: 2px;
padding-top: 2px;
clear:both;
height:100%;
background-color: #f9be60;
border:1px #f9be60 solid;
-moz-border-radius:3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius:3px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
}
.btnpage:link {
font-size:10px;
text-transform: uppercase;
color: #FFF;
border:1px #FFF solid;
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.btnpage:visited {
font-size:10px;
text-transform: uppercase;
border:1px #FFF solid;
color:#FFF;
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.btnpage:active {
font-size:10px;
text-transform: uppercase;
color:red;
border:1px #FFF solid;
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.btnpage:hover {
font-size:10px;
text-transform: uppercase;
color:#333333;
/*border:1px #333333 solid;*/
text-decoration: none;
vertical-align:middle;
font-weight:800;
}
.showcartcheckout {
background-color:#EEFF44;
color:#333333;
font-weight:bold;
height:28px;
/* margin:10px 0 10px 365px; */
margin:10px 0 10px 365px;
padding:10px 5px 0 10px;
text-align:right;
vertical-align:middle;
width:266px;
-moz-border-radius:3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius:3px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
}
/* Ship To Format */
#shipToArea .crb{border-right:1px solid #dadada;}
#shipToCell {position:relative;float:left; background:#fff;padding-bottom:10px;}
#shipToCell dd{padding:1px 10px;}
#shipToCell table{width:100%;clear:both;}
#shipToCell table .cell{float:none;}
#shipToCell .cell{width:220px;height:11em;position:relative;margin:2;padding:10px 0px 0px 1px;float:left;border:1px solid LightGrey;}
#shipToCell .header{position:relative;height:15sem;}
#shipToCell .body{position:relative;height:5em;background:#fff;}
#shipToCell .footer{position:relative;height:5em;}
#shipToCell .icons{position:absolute;top:70px;left:125px;}
#shipToCell .description{position:absolute;left:0;top:3.3em;width:228px;background:#fff;text-align:left;}
#shipToCell .description .title h3{font-weight:normal;margin:0;padding:0;}
#shipToCell .description .bullet ul,#bcaProductCell .description .bullet li{margin:0 0 0 15px;padding:0;}