/* SmartCart 2.0 plugin jQuery Shopping Cart Plugin by Dipu http://www.techlaboratory.net http://tech-laboratory.blogspot.com */ .scMain { position:relative; margin:0; padding:0; font: normal 12px Verdana, Arial, Helvetica, sans-serif; color: #5A5655; border: 0px solid #CCC; width:300px; height: 70px; } .scMain .scTabs{ position:relative; margin:0; padding:0; top:0px; color: #5A5655; background-color: transparent; border: 1px solid #CCC; border-top: 0px solid transparent; border-bottom: 0px solid transparent; height:auto; } .scMain .scBottomBar { display:block; position: relative; padding: 3px; margin: 0; margin-top: 0px; width:292px; height:25px; border: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; background: rgb(44,83,158); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } /* Cart Styles */ .scMain .scCartHeader { display:block; position: relative; padding: 0px; padding-top: 0px; padding-bottom: 0px; margin: 0; width:auto; height:18px; border: 0; border-bottom: 1px solid #CCC; background: rgb(210,223,237); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(210,223,237,1) 0%, rgba(200,215,235,1) 26%, rgba(190,208,234,1) 51%, rgba(166,192,227,1) 51%, rgba(175,199,232,1) 62%, rgba(186,208,239,1) 75%, rgba(153,181,219,1) 88%, rgba(121,155,200,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(210,223,237,1)), color-stop(26%,rgba(200,215,235,1)), color-stop(51%,rgba(190,208,234,1)), color-stop(51%,rgba(166,192,227,1)), color-stop(62%,rgba(175,199,232,1)), color-stop(75%,rgba(186,208,239,1)), color-stop(88%,rgba(153,181,219,1)), color-stop(100%,rgba(121,155,200,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .scMain .scCartHeader .scCartTitle { display:block; position: relative; padding: 0px; padding-top: 1px; padding-left: 0px; margin: 0; height:18px; border: 0; border-right: 1px solid #CCC; float:left; } .scMain .scCartHeader .scCartTitle1 { width:155px; } .scMain .scCartHeader .scCartTitle2 { width:35px; } .scMain .scCartHeader .scCartTitle3 { width:44px; } .scMain .scCartHeader .scCartTitle4 { width:60px; } .scMain .scCartHeader .scCartTitle5 { width:5px; border-right: 0; } .scMain .scCartList { display:block; position: relative; padding: 0px; margin: 0; width:100%; height:100%; border: 0px solid #F5F5F5; background: #FFFFFF; overflow:auto; } .scMain .scCartList .scCartItem { display:block; position: relative; padding: 0px; padding-top: 0px; padding-bottom: 0px; margin: 0; margin-top: 0px; width:100%; /* 898px */ height: 35px; border: 0; border-bottom: 1px solid #CCC; background: rgb(30,87,153); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ float:left; } .scMain .scCartList .scCartItem .scCartItemTitle { display:block; position: relative; padding: 0px; padding-top: 5px; padding-left: 5px; margin: 0; border: 0; border-right: 1px solid #CCC; float:left; } .scMain .scCartList .scCartItem .scCartItemTitle1 { padding-top: 1px; width:150px; height:35px; } .scMain .scCartList .scCartItem .scCartItemTitle1 div, .scMain .scCartList .scCartItem .scCartItemTitle1 img { margin-left: 1px; padding-top: 1px; float:left; height:20px; } .scMain .scCartList .scCartItem .scCartItemTitle1 div{ display:block; /*overflow: hidden;*/ width:100px; padding-top: 0px; height:35px; } .scMain .scCartList .scCartItem .scCartItemTitle2 { padding-top: 3px; width:30px; height:34px; color: white; } .scMain .scCartList .scCartItem .scCartItemTitle3 { padding-top: 1px; width:39px; height:34px; } .scMain .scCartList .scCartItem .scCartItemTitle4 { padding-top: 3px; width:55px; height:34px; color: white; } .scMain .scCartList .scCartItem .scCartItemTitle5 { padding-top: 1px; border-right: 0; } /* Product List Styles */ .scMain .scSearchPanel { display:block; position: relative; padding: 2px; margin: 0; width:auto; height:23px; border: 1px solid #F5F5F5; border-bottom: 1px solid #CCC; background: rgb(210,223,237); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(210,223,237,1) 0%, rgba(200,215,235,1) 26%, rgba(190,208,234,1) 51%, rgba(166,192,227,1) 51%, rgba(175,199,232,1) 62%, rgba(186,208,239,1) 75%, rgba(153,181,219,1) 88%, rgba(121,155,200,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(210,223,237,1)), color-stop(26%,rgba(200,215,235,1)), color-stop(51%,rgba(190,208,234,1)), color-stop(51%,rgba(166,192,227,1)), color-stop(62%,rgba(175,199,232,1)), color-stop(75%,rgba(186,208,239,1)), color-stop(88%,rgba(153,181,219,1)), color-stop(100%,rgba(121,155,200,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .scMain .scSearchPanel .scTxtSearch { display:block; position: relative; padding: 2px; margin: 0; height:16px; line-height:18px; margin-left:1px; border:1px solid #AAAAAA; padding:1px 5px; width:70px; color:#5A5655; float:left; } .scMain .scSearchPanel .scLabelSearch { display:block; position: relative; padding: 2px; margin: 0; height:18px; line-height:18px; margin-left:1px; color:#5A5655; float:left; } .scMain .scSearchPanel .scLabelCategory { display:block; position: relative; padding: 0px; margin: 0; height:10px; line-height:5px; margin-left:0px; color:#5A5655; float:left; font-size: 5px; } .scMain .scSearchPanel .scSelCategory { display:block; position: relative; padding: 1px; margin: 0; margin-left:1px; border:1px solid #AAAAAA; padding:1px; color:#5A5655; float:left; } .scMain .scProductList { display:block; position: relative; padding: 3px; margin: 0; width:98%; height:265px; border: 0px solid #F5F5F5; background: #FFFFFF; overflow:auto; bottom: 0px; } .scMain .scProductList .scProducts { display:block; position: relative; padding: 0px; margin: 0; margin-top: 1px; width:100%; border: 1px solid #F5F5F5; border-bottom: 0px solid #CCC; overflow:visible; float:left; background: rgb(255,127,4); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(255,127,4,1) 33%, rgba(255,167,61,1) 72%, rgba(255,183,107,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(33%,rgba(255,127,4,1)), color-stop(72%,rgba(255,167,61,1)), color-stop(100%,rgba(255,183,107,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(255,127,4,1) 33%,rgba(255,167,61,1) 72%,rgba(255,183,107,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(255,127,4,1) 33%,rgba(255,167,61,1) 72%,rgba(255,183,107,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(255,127,4,1) 33%,rgba(255,167,61,1) 72%,rgba(255,183,107,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(255,127,4,1) 33%,rgba(255,167,61,1) 72%,rgba(255,183,107,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f04', endColorstr='#ffb76b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } /*.scMain .scProductList .scProducts:hover { border: 1px solid #CCC; background-color: #6699FF; color: white; }*/ .scMain .scProductList .scProducts .scPDiv1 { margin-left:0px; padding:2px; float:left; } .scMain .scProductList .scProducts .scPDiv2 { margin-left:3px; margin-bottom:3px; float:left; width:auto; padding:2px; color: rgb(255,255,255); } .scMain .scProductList .scProducts .scPDiv3 { margin-right:5px; margin-top:5px; margin-bottom:5px; float:right; width:auto; } .scMain ul.scMenuBar { display:block; list-style: none; position: relative; padding: 0px; margin: 0; height:25px; clear: both; border: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; background: rgb(44,83,158); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .scMain ul.scMenuBar li{ position: relative; margin: 0; padding: 0; padding-right: 2px; border-bottom: 0px; border-right: 0px; border-left: 0px; float: left; color:#002EB8; } .scMain ul.scMenuBar li a { position:relative; display:block; margin:0; margin-left:1px; margin-top:1px; padding:0; padding-top:1px; text-decoration: none; height:18px; width:80px; color:#002EB8; font: normal 13px Verdana, Arial, Helvetica, sans-serif; outline-style:none; text-align:center; background-color: #FCFCFC; border: 1px solid #AAAAAA; border-bottom: 1px solid #FCFCFC; } .scMain ul.scMenuBar li a:hover { color:#5A5655; background: #F2F2F2; border-bottom: 1px solid #F2F2F2; } .scMain ul.scMenuBar li a.sel { color:white; background: Green; cursor:text; font-weight:bold; border-bottom: 1px solid #F5F5F5; height:20px; width: 80px; bottom:px; } .scProductImage{ position:relative; width:45px; overflow:hidden; float:left; padding: 0; margin:1px 1px 1px 1px; background:transparent; border:1px solid #AAA; } .scProductImageSmall{ width:28px; height:28px; overflow:hidden; float:left; padding: 0; margin:0; background:transparent; border:1px solid #AAA; } .sImgLoader{ position:absolute; margin:0; padding: 0; margin-left:25px; margin-top:10px; background-color: #FFF; } .scSearch { display:block; margin:0; margin-top:0px; margin-left:1px; padding:0; padding-top:0px; text-decoration: none; height:18px; width:60px; color:white; /* 0464BB */ background-color: green; font: bold 12px Verdana, Arial, Helvetica, sans-serif; outline-style:none; text-align:center; background-color: Green; border: 1px solid red; float:left; -webkit-border-radius: 5px; -moz-border-radius : 5px; } .scSearch:hover { color:#FFF; /* 0464BB */ background-color: #5A5655; border: 1px solid #5A5655; } .scRemove { display:block; margin:0; padding-top: 0px; margin-top:0px; margin-left:1px; padding:0; padding-top:3px; text-decoration: none; height:16px; width:70px; color:#5A5655; /* 0464BB */ font: normal 12px Verdana, Arial, Helvetica, sans-serif; outline-style:none; text-align:center; background-color: #FCFCFC; border: 1px solid #AAAAAA; float:left; -webkit-border-radius: 5px; -moz-border-radius : 5px; } .scRemove:hover { color:#FFF; /* 0464BB */ background-color: #5A5655; border: 1px solid #5A5655; } .scAddToCart { display:block; margin:0; margin-top:10px; padding:0; padding-top:1px; padding-bottom:1px; text-decoration: none; height:16px; width:50px; color:#5A5655; /* 0464BB */ font: normal 11px Verdana, Arial, Helvetica, sans-serif; outline-style:none; text-align:center; background-color: #FCFCFC; border: 1px solid #AAAAAA; float:right; -webkit-border-radius: 5px; -moz-border-radius : 5px; } .scAddToCart:hover { color:#FFF; /* 0464BB */ background-color: #5A5655; border: 1px solid #5A5655; } .scTxtQuantity { margin-top:10px; margin-right:1px; border: 1px solid gray; padding:1px 5px; width:20px; height: 16px; float:left; font-size: 16px; -webkit-transition: box-shadow linear 1s; transition: box-shadow linear 1s; } .scTxtQuantity:focus { outline: none; border-color: green; box-shadow: 0 0 10px red; } .scTxtQuantity2 { margin-top:0px; margin-right:0px; border:1px solid #E0E0E0; padding:1px 1px; width:30px; float:left; font-size:16px; height: 16px; } .scLabelQuantity { margin-top:15px; margin-right:0px; padding:1px 5px; float:left; } .scLabelSubtotalText { display:block; margin-top:0px; margin-right:0px; padding:1px; font: bold 18px Verdana, Arial, Helvetica, sans-serif; float:right; color: white; } .scLabelSubtotalValue { display:block; margin-top:0px; margin-left:5px; margin-right:20px; padding:0px; background:#F5F5F5; font: bold 18px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #AAAAAA; float:right; } .scCheckoutButton { display:block; margin:0; margin-top:1px; margin-right:10px; padding:1; padding-top:1px; padding-bottom:1px; padding-left:2px; padding-right:2px; text-decoration: none; height:auto; width:auto; color:#FFF; font: bold 13px Verdana, Arial, Helvetica, sans-serif; outline-style:none; text-align:center; background-color: Green; border: 1px solid red; -webkit-border-radius: 5px; -moz-border-radius : 5px; float:right; } .scCheckoutButton:hover { color:#FFF; background-color: #EA8511; border: 1px solid #EA8511; } .scMessageBar { position:relative; margin:0; padding:10px; top:10px; left:1%; font: bold 13px Verdana, Arial, Helvetica, sans-serif; color: #5A5655; background: #FFFFDD; border: 1px solid #FFD700; width:90%; height:18px; text-align:center; -webkit-border-radius: 5px; -moz-border-radius : 5px; } .scMessageBar2 { position:relative; margin:0; margin-left:1px; margin-right:1px; padding:1px; padding-left:1px; padding-right:1px; top:1px; font: normal 7px Verdana, Arial, Helvetica, sans-serif; color: #000; background: #FFFFDD; border: 1px solid #FFD700; text-align:center; width:120px; height: 19px; -webkit-border-radius: 5px; -moz-border-radius : 5px; } /* TOOLTIP CSS */ .tooltip{ position:absolute; z-index:999; background-color:#AAA; padding:0px; border:1px solid #AAA; color:#FFF; width:auto; text-align: left; overflow:visible; } .tooltip img{ border:0; float:left; background-color:#FFF; } strong { font-family: "Consolas, monaco, monospace"; font-size: 15px; color: rgb(255,255,255); } small { color: rgb(255,255,255); } /*///// Media Query http://stephen.io/mediaqueries/#iPad /////*/ .scMain .scProductList { -webkit-transition:all 1.0s ease-in-out; -moz-transition:all 1.0s ease-in-out; -o-transition:all 1.0s ease-in-out; transition:all 1.0s ease-in-out; } /*iphone 5 landscape*/ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { .scMain .scProductList {height:160px;} } /*iphone 5 portrait*/ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /*iphone 5 portrait*/ } /*iphone 2G-4S landscape*/ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { /* STYLES GO HERE */} /*iphone 2G-4S portrait*/ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) { /* STYLES GO HERE */ } /*iPad Mini landscape*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */} /*iPad Mini portrait*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { .scMain .scProductList {font-size: 2em;} strong { font-size: 1em;} .scTxtQuantity{ height: 40px;font-size: 1em;} .scCheckoutButton{font-size: 20px; } .scLabelSubtotalValue{font-size: 20px;} input, textarea{font-size: 30px;} .web_dialog{width: auto;height: auto;} .Submit{font-size: 30px;} .web_dialog_title{font-size: 20px;} } /*iPad Lanscape*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .scMain .scProductList {height:500px;} } /*iPad Portrait*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .scMain .scProductList {height:800px;font-size: 2em;} strong { font-size: 1em;} .scTxtQuantity{ height: 40px;font-size: 1em;} .scCheckoutButton{font-size: 20px; } .scLabelSubtotalValue{font-size: 20px;} input, textarea{font-size: 30px;} .web_dialog{width: auto;height: auto;} .Submit{font-size: 30px;} .web_dialog_title{font-size: 20px;} }