BLOGGER GRID LIST SHOPPING CART TEMPLATE

Saturday, 16 August 2014

BLOGGER GRID LIST SHOPPING CART TEMPLATE

----------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/08/blogger-grid-list-shopping-cart-template_16.html
http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-template-with-view-cart.html
http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-blogger-template-with.html

------------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<data:blog.title/>
<b:else/>
<data:blog.pageName/> | <data:blog.title/>
</b:if>
</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[

/*
* Superfish v1.4.8 - jQuery menu widget
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
*/

;(function($){
$.fn.superfish = function(op){
var sf = $.fn.superfish,
c = sf.c,
$arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
over = function(){
var $$ = $(this), menu = getMenu($$);
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
out = function(){
var $$ = $(this), menu = getMenu($$), o = sf.op;
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(function(){
o.retainPath=($.inArray($$[0],o.$path)>-1);
$$.hideSuperfishUl();
if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);} },o.delay); }, getMenu=function($menu){ var menu=$menu.parents(['ul.',c.menuClass,':first'].join(''))[0]; sf.op=sf.o[menu.serial]; return menu; }, addArrow=function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); }; return this.each(function() { var s=this.serial=sf.o.length; var o=$.extend({},sf.defaults,op); o.$path=$('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){ $(this).addClass([o.hoverClass,c.bcClass].join(' ')) .filter('li:has(ul)').removeClass(o.pathClass); }); sf.o[s]=sf.op=o; $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() { if (o.autoArrows) addArrow( $('>a:first-child',this) );
})
.not('.'+c.bcClass)
.hideSuperfishUl();
var $a = $('a',this);
$a.each(function(i){
var $li = $a.eq(i).parents('li');
$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
});
o.onInit.call(this);
}).each(function() {
var menuClasses = [c.menuClass];
if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
$(this).addClass(menuClasses.join(' '));
});
};
var sf = $.fn.superfish;
sf.o = [];
sf.op = {};
sf.IE7fix = function(){
var o = sf.op;
if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
this.toggleClass(sf.c.shadowClass+'-off');
};
sf.c = {
bcClass : 'sf-breadcrumb',
menuClass : 'sf-js-enabled',
anchorClass : 'sf-with-ul',
arrowClass : 'sf-sub-indicator',
shadowClass : 'sf-shadow'
};
sf.defaults = {
hoverClass : 'sfHover',
pathClass : 'overideThisToUse',
pathLevels : 1,
delay : 800,
animation : {opacity:'show'},
speed : 'normal',
autoArrows : true,
dropShadows : true,
disableHI : false, // true disables hoverIntent detection
onInit : function(){}, // callback functions
onBeforeShow: function(){},
onShow : function(){},
onHide : function(){}
};
$.fn.extend({
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
.find('>ul').hide().css('visibility','hidden');
o.onHide.call($ul);
return this;
},
showSuperfishUl : function(){
var o = sf.op,
sh = sf.c.shadowClass+'-off',
$ul = this.addClass(o.hoverClass)
.find('>ul:hidden').css('visibility','visible');
sf.IE7fix.call($ul);
o.onBeforeShow.call($ul);
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
return this;
}
});
})(jQuery);
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('w L(z,E){3 s=z.W("<");n(3 i=0;i<s.7;i++){4(s[i].8(">")!=-1){s[i]=s[i].A(s[i].8(">")+1,s[i].7)}}s=s.J("");s=s.A(0,E-1);K s}w T(m){g.l(\'<D O="P-S">\');j=(p)?q.G((e.7+1)*q.p()):0;6=10 M();n(3 i=0;i<N;i++){3 2=m.C.2[i];3 Q=2.R.$t;3 f;4(i==m.C.2.7)o;n(3 k=0;k<2.h.7;k++){4(2.h[k].H==\'I\'){f=2.h[k].r;o}}4("u"v 2){3 9=2.u.$t}x 4("y"v 2){3 9=2.y.$t}x 3 9="";4(j>e.7-1)j=0;6[i]=e[j];s=9;a=s.8("<6");b=s.8("B=\\"",a);c=s.8("\\"",b+5);d=s.V(b+5,c-b-5);4((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))6[i]=d;3 F=\'<a r="\'+f+\'"><6 B="\'+6[i]+\'" X="\'+Y+\'" Z="\'+U+\'"/></a>\';g.l(F);j++}g.l(\'</D>\')}',62,63,'||entry|var|if||img|length|indexOf|postcontent|||||product_image|permalink|document|link||||write|json|for|break|random|Math|href|||content|in|function|else|summary|strx|substring|src|feed|div|chop|item|floor|rel|alternate|join|return|removeHtmlTag|Array|product_image_number|id|featured|posttitle|title|product|featured_product|product_image_height|substr|split|width|product_image_width|height|new'.split('|'),0,{}))
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/****************************************************************************
Copyright (c) 2011 The Wojo Group

thewojogroup.com
simplecartjs.com
http://github.com/thewojogroup/simplecart-js/tree/master

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
****************************************************************************/

var Custom="Custom",GoogleCheckout="GoogleCheckout",PayPal="PayPal",Email="Email",IndonesianRupiah="IDR",IDR="IDR",AustralianDollar="AUD",AUD="AUD",CanadianDollar="CAD",CAD="CAD",CzechKoruna="CZK",CZK="CZK",DanishKrone="DKK",DKK="DKK",Euro="EUR",EUR="EUR",HongKongDollar="HKD",HKD="HKD",HungarianForint="HUF",HUF="HUF",IsraeliNewSheqel="ILS",ILS="ILS",JapaneseYen="JPY",JPY="JPY",MexicanPeso="MXN",MXN="MXN",NorwegianKrone="NOK",NOK="NOK",NewZealandDollar="NZD",NZD="NZD",PolishZloty="PLN",PLN="PLN",PoundSterling="GBP",GBP="GBP",SingaporeDollar="SGD",SGD="SGD",SwedishKrona="SEK",SEK="SEK",SwissFranc="CHF",CHF="CHF",ThaiBaht="THB",THB="THB",USDollar="USD",USD="USD";
function Cart(){
var me = this;
/* member variables */
me.nextId = 1;
me.Version = '2.2.2';
me.Shelf = null;
me.items = {};
me.isLoaded = false;
me.pageIsReady = false;
me.quantity = 0;
me.total = 0;
me.taxRate = 0;
me.taxCost = 0;
me.shippingFlatRate = 0;
me.shippingTotalRate = 0;
me.shippingQuantityRate = 0;
me.shippingRate = 0;
me.shippingCost = 0;
me.currency = USD;
me.checkoutTo = PayPal;
me.email = "";
me.merchantId = "";
me.successUrl = null;
me.cancelUrl = null;
me.cookieDuration = 30; // default duration in days
me.storagePrefix = "sc_";
me.MAX_COOKIE_SIZE = 4000;
me.cartHeaders = ['Name','Price','Quantity','Total'];
me.events = {};
me.sandbox = false;
me.paypalHTTPMethod = "GET";

/******************************************************
add/remove items to cart
******************************************************/
me.add = function ( values ) {
var me=this;
/* load cart values if not already loaded */
if( !me.pageIsReady ) {
me.initializeView();
me.update();
}
if( !me.isLoaded ) {
me.load();
me.update();
}
var newItem = new CartItem();
/* check to ensure arguments have been passed in */
if( !arguments || arguments.length === 0 ){
error( 'No values passed for item.');
return null;
}
var argumentArray = arguments;
if( values && typeof( values ) !== 'string' && typeof( values ) !== 'number' ){
argumentArray = values;
}
newItem.parseValuesFromArray( argumentArray );
newItem.checkQuantityAndPrice();
if( me.trigger('beforeAdd', [newItem] ) === false ){
return false;
}
var isNew = true;
/* if the item already exists, update the quantity */
if( me.hasItem(newItem) ) {
var foundItem=me.hasItem(newItem);
foundItem.quantity= parseInt(foundItem.quantity,10) + parseInt(newItem.quantity,10);
newItem = foundItem;
isNew = false;
} else {
me.items[newItem.id] = newItem;
}
me.update();
me.trigger('afterAdd', [newItem,isNew] );
return newItem;
};
me.remove = function( id ){
var tempArray = {};
me.each(function(item){
if( item.id !== id ){
tempArray[item.id] = item;
}
});
this.items = tempArray;
};
me.empty = function () {
me.items = {};
me.update();
};
/******************************************************
item accessor functions
******************************************************/
me.find = function (criteria) {
if( !criteria ){
return null;
}
var results = [];
me.each(function(item,x,next){
fits = true;
me.each( criteria , function(value,j,name){
if( !item[name] || item[name] != value ){
fits = false;
}
});
if( fits ){
results.push( item );
}
});
return (results.length === 0 ) ? null : results;
};
me.each = function( array , callback ){
var next,
x=0,
result;
if( typeof array === 'function' ){
var cb = array
items = me.items;
} else if( typeof callback === 'function' ){
var cb = callback,
items = array;
} else {
return;
}
for( next in items ){
if( typeof items[next] !== "function" ){
result = cb.call( me , items[next] , x , next );
if( result === false ){
return;
}
x++;
}
}
};
me.chunk = function(str, n) {
if (typeof n==='undefined'){
n=2;
}
var result = str.match(RegExp('.{1,'+n+'}','g'));
return result || [];
};
/******************************************************
checkout management
******************************************************/
me.checkout = function() {
if( me.quantity === 0 ){
error("Cart is empty");
return false;
}
switch( me.checkoutTo ){
case PayPal:
me.paypalCheckout();
break;
case GoogleCheckout:
me.googleCheckout();
break;
case Email:
me.emailCheckout();
break;
default:
me.customCheckout();
break;
}
};
me.paypalCheckout = function() {
var form = document.createElement("form"),
counter=1,
current,
item,
descriptionString;
form.style.display = "none";
form.method = me.paypalHTTPMethod =="GET" || me.paypalHTTPMethod == "POST" ? me.paypalHTTPMethod : "GET";
form.action = me.sandbox ? "https://www.sandbox.paypal.com/cgi-bin/webscr" : "https://www.paypal.com/cgi-bin/webscr";
form.acceptCharset = "utf-8";
// setup hidden fields
form.appendChild(me.createHiddenElement("cmd", "_cart"));
form.appendChild(me.createHiddenElement("rm", me.paypalHTTPMethod == "POST" ? "2" : "0" ));
form.appendChild(me.createHiddenElement("upload", "1"));
form.appendChild(me.createHiddenElement("business", me.email ));
form.appendChild(me.createHiddenElement("currency_code", "me.currency"));
if( me.taxRate ){
form.appendChild(me.createHiddenElement("tax_cart",me.taxCost ));
}
if( me.shipping() !== 0){
form.appendChild(me.createHiddenElement("handling_cart", me.shippingCost ));
}
if( me.successUrl ){
form.appendChild(me.createHiddenElement("return", me.successUrl ));
}
if( me.cancelUrl ){
form.appendChild(me.createHiddenElement("cancel_return", me.cancelUrl ));
}
me.each(function(item,iter){
counter = iter+1;
form.appendChild( me.createHiddenElement( "item_name_" + counter, item.name ) );
form.appendChild( me.createHiddenElement( "quantity_" + counter, item.quantity ) );
form.appendChild( me.createHiddenElement( "amount_" + counter, item.price ) );
form.appendChild( me.createHiddenElement( "item_number_" + counter, counter ) );
var option_count = 0;
me.each( item , function( value, x , field ){
if( field !== "id" && field !== "price" && field !== "quantity" && field !== "name" && field !== "shipping" && option_count < 10) {
form.appendChild( me.createHiddenElement( "on" + option_count + "_" + counter, field ) );
form.appendChild( me.createHiddenElement( "os" + option_count + "_" + counter, value ) );
option_count++;
}
});
form.appendChild( me.createHiddenElement( "option_index_" + counter, option_count) );
});
document.body.appendChild( form );
form.submit();
document.body.removeChild( form );
};
me.googleCheckout = function() {
var me = this;
if( me.currency !== USD && me.currency !== GBP ){
error( "Google Checkout only allows the USD and GBP for currency.");
return;
} else if( me.merchantId === "" || me.merchantId === null || !me.merchantId ){
error( "No merchant Id for google checkout supplied.");
return;
}
var form = document.createElement("form"),
counter=1,
current,
item,
descriptionString;
form.style.display = "none";
form.method = "POST";
form.action = "https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/" +
me.merchantId;
form.acceptCharset = "utf-8";
me.each(function(item,iter){
counter = iter+1;
form.appendChild( me.createHiddenElement( "item_name_" + counter, item.name ) );
form.appendChild( me.createHiddenElement( "item_quantity_" + counter, item.quantity ) );
form.appendChild( me.createHiddenElement( "item_price_" + counter, item.price ) );
form.appendChild( me.createHiddenElement( "item_currency_" + counter, me.currency ) );
form.appendChild( me.createHiddenElement( "item_tax_rate_" + counter, me.taxRate ) );
form.appendChild( me.createHiddenElement( "_charset_" , "" ) );
descriptionString = "";
me.each( item , function( value , x , field ){
if( field !== "id" &&
field !== "quantity" &&
field !== "price" ) {
descriptionString = descriptionString + ", " + field + ": " + value;
}
});
descriptionString = descriptionString.substring( 1 );
form.appendChild( me.createHiddenElement( "item_description_" + counter, descriptionString) );
});
// hack for adding shipping
if( me.shipping() !== 0){
form.appendChild(me.createHiddenElement("ship_method_name_1", "Shipping"));
form.appendChild(me.createHiddenElement("ship_method_price_1", parseFloat(me.shippingCost).toFixed(2)));
form.appendChild(me.createHiddenElement("ship_method_currency_1", me.currency));
}
document.body.appendChild( form );
form.submit();
document.body.removeChild( form );
};
me.emailCheckout = function() {
return;
};
me.customCheckout = function() {
return;
};
/******************************************************
data storage and retrival
******************************************************/
/* load cart from cookie */
me.load = function () {
var me = this,
id;
/* initialize variables and items array */
me.items = {};
me.total = 0.00;
me.quantity = 0;
/* retrieve item data from cookie */
if( readCookie(simpleCart.storagePrefix + 'simpleCart_' + "chunks") ){
var chunkCount = 1*readCookie(simpleCart.storagePrefix + 'simpleCart_' + "chunks"),
dataArray = [],
dataString = "",
data = "",
info,
newItem,
y=0;
if(chunkCount>0) {
for( y=0;y<chunkCount;y++){
dataArray.push( readCookie( simpleCart.storagePrefix + 'simpleCart_' + (1 + y ) ) );
}
dataString = unescape( dataArray.join("") );
data = dataString.split("++");
}
for(var x=0, xlen=data.length;x<xlen;x++){
info = data[x].split('||');
newItem = new CartItem();
if( newItem.parseValuesFromArray( info ) ){
newItem.checkQuantityAndPrice();
/* store the new item in the cart */
me.items[newItem.id] = newItem;
}
}
}
me.isLoaded = true;
};
/* save cart to cookie */
me.save = function () {
var dataString = "",
dataArray = [],
chunkCount = 0;
chunkCount = 1*readCookie(simpleCart.storagePrefix + 'simpleCart_' + "chunks");
for( var j=0;j<chunkCount;j++){
eraseCookie(simpleCart.storagePrefix + 'simpleCart_'+ j);
}
eraseCookie(simpleCart.storagePrefix + 'simpleCart_' + "chunks");
me.each(function(item){
dataString = dataString + "++" + item.print();
});
dataArray = simpleCart.chunk( dataString.substring(2) , simpleCart.MAX_COOKIE_SIZE );
for( var x=0,xlen = dataArray.length;x<xlen;x++){
createCookie(simpleCart.storagePrefix + 'simpleCart_' + (1 + x ), dataArray[x], me.cookieDuration );
}
createCookie( simpleCart.storagePrefix + 'simpleCart_' + "chunks", "" + dataArray.length , me.cookieDuration );
};

/******************************************************
view management
******************************************************/
me.initializeView = function() {
var me = this;
me.totalOutlets = getElementsByClassName('simpleCart_total');
me.quantityOutlets = getElementsByClassName('simpleCart_quantity');
me.cartDivs = getElementsByClassName('simpleCart_items');
me.taxCostOutlets = getElementsByClassName('simpleCart_taxCost');
me.taxRateOutlets = getElementsByClassName('simpleCart_taxRate');
me.shippingCostOutlets = getElementsByClassName('simpleCart_shippingCost');
me.finalTotalOutlets = getElementsByClassName('simpleCart_finalTotal');
me.addEventToArray( getElementsByClassName('simpleCart_checkout') , simpleCart.checkout , "click");
me.addEventToArray( getElementsByClassName('simpleCart_empty') , simpleCart.empty , "click" );
me.Shelf = new Shelf();
me.Shelf.readPage();
me.pageIsReady = true;
};
me.updateView = function() {
me.updateViewTotals();
if( me.cartDivs && me.cartDivs.length > 0 ){
me.updateCartView();
}
};
me.updateViewTotals = function() {
var outlets = [ ["quantity" , "none" ] ,
["total" , "currency" ] ,
["shippingCost" , "currency" ] ,
["taxCost" , "currency" ] ,
["taxRate" , "percentage" ] ,
["finalTotal" , "currency" ] ];
for( var x=0,xlen=outlets.length; x<xlen;x++){
var arrayName = outlets[x][0] + "Outlets",
outputString,
element;
for( var y = 0,ylen = me[ arrayName ].length; y<ylen; y++ ){
switch( outlets[x][1] ){
case "none":
outputString = "" + me[outlets[x][0]];
break;
case "currency":
outputString = me.valueToCurrencyString( me[outlets[x][0]] );
break;
case "percentage":
outputString = me.valueToPercentageString( me[outlets[x][0]] );
break;
default:
outputString = "" + me[outlets[x][0]];
break;
}
me[arrayName][y].innerHTML = "" + outputString;
}
}
};
me.updateCartView = function() {
var newRows = [],
y,newRow,current,header,newCell,info,outputValue,option,headerInfo;
/* create headers row */
newRow = document.createElement('div');
for(var y=0,ylen = me.cartHeaders.length; y<ylen; y++ ){
newCell = document.createElement('div');
headerInfo = me.cartHeaders[y].split("_");
newCell.innerHTML = me.print( headerInfo[0] );
newCell.className = "item" + headerInfo[0];
for(var z=1,zlen=headerInfo.length;z<zlen;z++){
if( headerInfo[z].toLowerCase() == "noheader" ){
newCell.style.display = "none";
}
}
newRow.appendChild( newCell );
}
newRow.className = "cartHeaders";
newRows[0] = newRow;
/* create a row for each item in the cart */
me.each(function(item, x){
newRow = document.createElement('div');
for(var y=0,ylen = me.cartHeaders.length; y<ylen; y++ ){
newCell = document.createElement('div');
info = me.cartHeaders[y].split("_");
outputValue = me.createCartRow( info , item , outputValue );
newCell.innerHTML = outputValue;
newCell.className = "item" + info[0];
newRow.appendChild( newCell );
}
newRow.className = "itemContainer";
newRows[x+1] = newRow;
});
for( var x=0,xlen=me.cartDivs.length; x<xlen; x++){
/* delete current rows in div */
var div = me.cartDivs[x];
if( div.childNodes && div.appendChild ){
while( div.childNodes[0] ){
div.removeChild( div.childNodes[0] );
}
for(var j=0, jLen = newRows.length; j<jLen; j++){
div.appendChild( newRows[j] );
}
}
}
};
me.createCartRow = function( info , item , outputValue ){
switch( info[0].toLowerCase() ){
case "total":
outputValue = me.valueToCurrencyString(parseFloat(item.price)*parseInt(item.quantity,10) );
break;
case "increment":
outputValue = me.valueToLink( "+" , "javascript:;" , "onclick=\"simpleCart.items[\'" + item.id + "\'].increment();\"" );
break;
case "decrement":
outputValue = me.valueToLink( "-" , "javascript:;" , "onclick=\"simpleCart.items[\'" + item.id + "\'].decrement();\"" );
break;
case "remove":
outputValue = me.valueToLink( "Remove" , "javascript:;" , "onclick=\"simpleCart.items[\'" + item.id + "\'].remove();\"" );
break;
case "price":
outputValue = me.valueToCurrencyString( item[ info[0].toLowerCase() ] ? item[info[0].toLowerCase()] : " " );
break;
default:
outputValue = item[ info[0].toLowerCase() ] ?
typeof item[info[0].toLowerCase()] === 'function' ?
item[info[0].toLowerCase()].call(item) :
item[info[0].toLowerCase()] :
" ";
break;
}
for( var y=1,ylen=info.length;y<ylen;y++){
option = info[y].toLowerCase();
switch( option ){
case "image":
case "img":
outputValue = me.valueToImageString( outputValue );
break;
case "input":
outputValue = me.valueToTextInput( outputValue , "onchange=\"simpleCart.items[\'" + item.id + "\'].set(\'" + info[0].toLowerCase() + "\' , this.value);\"" );
break;
case "div":
case "span":
case "h1":
case "h2":
case "h3":
case "h4":
case "p":
outputValue = me.valueToElement( option , outputValue , "" );
break;
case "noheader":
break;
default:
error( "unkown header option: " + option );
break;
}
}
return outputValue;
};
me.addEventToArray = function ( array , functionCall , theEvent ) {
var outlet,
element;
for(var x=0,xlen=array.length; x<xlen; x++ ){
element = array[x];
if( element.addEventListener ) {
element.addEventListener(theEvent, functionCall , false );
} else if( element.attachEvent ) {
element.attachEvent( "on" + theEvent, functionCall );
}
}
};
me.createHiddenElement = function ( name , value ){
var element = document.createElement("input");
element.type = "hidden";
element.name = name;
element.value = value;
return element;
};
/******************************************************
Event Management
******************************************************/
// bind a callback to a simpleCart event
me.bind = function( name , callback ){
if( typeof callback !== 'function' ){
return me;
}
if (me.events[name] === true ){
callback.apply( me );
} else if( typeof me.events[name] !== 'undefined' ){
me.events[name].push( callback );
} else {
me.events[name] = [ callback ];
}
return me;
};
// trigger event
me.trigger = function( name , options ){
var returnval = true;
if( typeof me.events[name] !== 'undefined' && typeof me.events[name][0] === 'function'){
for( var x=0,xlen=me.events[name].length; x<xlen; x++ ){
returnval = me.events[name][x].apply( me , (options ? options : [] ) );
}
}
if( returnval === false ){
return false;
} else {
return true;
}
};
// shortcut for ready function
me.ready = function( callback ){
if( !callback ){
me.trigger( 'ready' );
me.events['ready'] = true;
} else {
me.bind( 'ready' , callback );
}
return me;
};
/******************************************************
Currency management
******************************************************/
me.currencySymbol = function() {
switch(me.currency){
case IDR:
return "Rp ";
case CHF:
return "CHF ";
case CZK:
return "CZK ";
case DKK:
return "DKK ";
case HUF:
return "HUF ";
case NOK:
return "NOK ";
case PLN:
return "PLN ";
case SEK:
return "SEK ";
case JPY:
return "¥";
case EUR:
return "€";
case GBP:
return "£";
case CHF:
return "CHF ";
case THB:
return "฿";
case USD:
case CAD:
case AUD:
case NZD:
case HKD:
case SGD:
return "$";
default:
return "";
}
};
me.currencyStringForPaypalCheckout = function( value ){
if( me.currencySymbol() == "$" ){
return "$" + parseFloat( value ).toFixed(2);
} else {
return "" + parseFloat(value ).toFixed(2);
}
};
/******************************************************
Formatting
******************************************************/
me.valueToCurrencyString = function( value ) {
var val = parseFloat( value );
if( isNaN(val))
val = 0;
return val.toCurrency( me.currencySymbol() );
};
me.valueToPercentageString = function( value ){
return parseFloat( 100*value ) + "%";
};
me.valueToImageString = function( value ){
if( value.match(/<\s*img.*src\=/) ){ return value; } else { return "<img src=\"" + value + "\" />";
}
};
me.valueToTextInput = function( value , html ){
return "<input type=\"text\" value=\"" + value + "\" " + html + " />";
};
me.valueToLink = function( value, link, html){
return "<a href=\"" + link + "\" " + html + ">" + value + "</a>";
};
me.valueToElement = function( type , value , html ){
return "<" + type + " " + html + "> " + value + "</" + type + ">";
};
/******************************************************
Duplicate management
******************************************************/
me.hasItem = function ( item ) {
var current,
matches,
field,
match=false;
me.each(function(testItem){
matches = true;
me.each( item , function( value , x , field ){
if( field !== "quantity" && field !== "id" && item[field] !== testItem[field] ){
matches = false;
}
});
if( matches ){
match = testItem;
}
});
return match;
};
/******************************************************
Language managment
******************************************************/
me.ln = {
"en_us": {
quantity: "Quantity"
, price: "Price"
, total: "Total"
, decrement: "Decrement"
, increment: "Increment"
, remove: "Remove"
, tax: "Tax"
, shipping: "Shipping"
, image: "Image"
}
};
me.language = "en_us";
me.print = function( input ) {
var me = this;
return me.ln[me.language] && me.ln[me.language][input.toLowerCase()] ? me.ln[me.language][input.toLowerCase()] : input;
};
/******************************************************
Cart Update managment
******************************************************/
me.update = function() {
if( !simpleCart.isLoaded ){
simpleCart.load();
}
if( !simpleCart.pageIsReady ){
simpleCart.initializeView();
}
me.updateTotals();
me.updateView();
me.save();
};
me.updateTotals = function() {
me.total = 0 ;
me.quantity = 0;
me.each(function(item){
if( item.quantity < 1 ){
item.remove();
} else if( item.quantity !== null && item.quantity !== "undefined" ){
me.quantity = parseInt(me.quantity,10) + parseInt(item.quantity,10);
}
if( item.price ){
me.total = parseFloat(me.total) + parseInt(item.quantity,10)*parseFloat(item.price);
}
});
me.shippingCost = me.shipping();
me.taxCost = parseFloat(me.total)*me.taxRate;
me.finalTotal = me.shippingCost + me.taxCost + me.total;
};
me.shipping = function(){
if( parseInt(me.quantity,10)===0 )
return 0;
var shipping = parseFloat(me.shippingFlatRate) +
parseFloat(me.shippingTotalRate)*parseFloat(me.total) +
parseFloat(me.shippingQuantityRate)*parseInt(me.quantity,10),
next;
me.each(function(nextItem){
if( nextItem.shipping ){
if( typeof nextItem.shipping == 'function' ){
shipping += parseFloat(nextItem.shipping());
} else {
shipping += parseFloat(nextItem.shipping);
}
}
});
return shipping;
}
me.initialize = function() {
me.initializeView();
me.load();
me.update();
me.ready();
};
}

/********************************************************************************************************
* Cart Item Object
********************************************************************************************************/
function CartItem() {
while( simpleCart.items["c" + simpleCart.nextId] )
simpleCart.nextId++;
this.id = "c" + simpleCart.nextId;
}
CartItem.prototype = {
set : function ( field , value ){
field = field.toLowerCase();
if( typeof( this[field] ) !== "function" && field !== "id" ){
value = "" + value;
if( field == "quantity"){
value = value.replace( /[^(\d|\.)]*/gi , "" );
value = value.replace(/,*/gi, "");
value = parseInt(value,10);
} else if( field == "price" ){
value = value.replace( /[^(\d|\.)]*/gi, "");
value = value.replace(/,*/gi , "");
value = parseFloat( value );
}
if( typeof(value) == "number" && isNaN( value ) ){
error( "Improperly formatted input.");
} else {
if( typeof( value ) === "string" ){
if( value.match(/\~|\=/) ){
error("Special character ~ or = not allowed: " + value);
}
value = value.replace(/\~|\=/g, "");
}
this[field] = value;
this.checkQuantityAndPrice();
}
} else {
error( "Cannot change " + field + ", this is a reserved field.");
}
simpleCart.update();
},
increment : function(){
this.quantity = parseInt(this.quantity,10) + 1;
simpleCart.update();
},
decrement : function(){
if( parseInt(this.quantity,10) < 2 ){
this.remove();
} else {
this.quantity = parseInt(this.quantity,10) - 1;
simpleCart.update();
}
},
print : function () {
var returnString = '',
field;
simpleCart.each(this ,function(item,x,name){
returnString+= escape(name) + "=" + escape(item) + "||";
});
return returnString.substring(0,returnString.length-2);
},
checkQuantityAndPrice : function() {
if( !this.quantity || this.quantity == null || this.quantity == 'undefined'){
this.quantity = 1;
error('No quantity for item.');
} else {
this.quantity = ("" + this.quantity).replace(/,*/gi, "" );
this.quantity = parseInt( ("" + this.quantity).replace( /[^(\d|\.)]*/gi, "") , 10);
if( isNaN(this.quantity) ){
error('Quantity is not a number.');
this.quantity = 1;
}
}
if( !this.price || this.price == null || this.price == 'undefined'){
this.price=0.00;
error('No price for item or price not properly formatted.');
} else {
this.price = ("" + this.price).replace(/,*/gi, "" );
this.price = parseFloat( ("" + this.price).replace( /[^(\d|\.)]*/gi, "") );
if( isNaN(this.price) ){
error('Price is not a number.');
this.price = 0.00;
}
}
},
parseValuesFromArray : function( array ) {
if( array && array.length && array.length > 0) {
for(var x=0, xlen=array.length; x<xlen;x++ ){ /* ensure the pair does not have key delimeters */ array[x]=array[x].replace(/\|\|/g, "| |"); array[x]=array[x].replace(/\+\+/g, "+ +"); if( array[x].match(/\~/) ){ error("Special character ~ not allowed: " + array[x]); } array[x]=array[x].replace(/\~/g, ""); /* split the pair and save the unescaped values to the item */ var value=array[x].split('='); if( value.length>1 ){
if( value.length>2 ){
for(var j=2, jlen=value.length;j<jlen;j++){
value[1] = value[1] + "=" + value[j];
}
}
this[ unescape(value[0]).toLowerCase() ] = unescape(value[1]);
}
}
return true;
} else {
return false;
}
},
remove : function() {
simpleCart.remove(this.id);
simpleCart.update();
}
};

/********************************************************************************************************
* Shelf Object for managing items on shelf that can be added to cart
********************************************************************************************************/
function Shelf(){
this.items = {};
}
Shelf.prototype = {
readPage : function () {
this.items = {};
var newItems = getElementsByClassName( "simpleCart_shelfItem" ),
newItem;
me = this;
for( var x = 0, xlen = newItems.length; x<xlen; x++){
newItem = new ShelfItem();
me.checkChildren( newItems[x] , newItem );
me.items[newItem.id] = newItem;
}
},
checkChildren : function ( item , newItem) {
if( !item.childNodes )
return;
for(var x=0;item.childNodes[x];x++){
var node = item.childNodes[x];
if( node.className && node.className.match(/item_[^ ]+/) ){
var data = /item_[^ ]+/.exec(node.className)[0].split("_");
if( data[1] == "add" || data[1] == "Add" ){
var tempArray = [];
tempArray.push( node );
var addFunction = simpleCart.Shelf.addToCart(newItem.id);
simpleCart.addEventToArray( tempArray , addFunction , "click");
node.id = newItem.id;
} else {
newItem[data[1]] = node;
}
}
if( node.childNodes[0] ){
this.checkChildren( node , newItem );
}
}
},
empty : function () {
this.items = {};
},
addToCart : function ( id ) {
return function(){
if( simpleCart.Shelf.items[id]){
simpleCart.Shelf.items[id].addToCart();
} else {
error( "Shelf item with id of " + id + " does not exist.");
}
};
}
};
/********************************************************************************************************
* Shelf Item Object
********************************************************************************************************/
function ShelfItem(){
this.id = "s" + simpleCart.nextId++;
}
ShelfItem.prototype = {
remove : function () {
simpleCart.Shelf.items[this.id] = null;
},
addToCart : function () {
var outStrings = [],
valueString,
field;
for( field in this ){
if( typeof( this[field] ) !== "function" && field !== "id" ){
valueString = "";
switch(field){
case "price":
if( this[field].value ){
valueString = this[field].value;
} else if( this[field].innerHTML ) {
valueString = this[field].innerHTML;
}
/* remove all characters from price except digits and a period */
valueString = valueString.replace( /[^(\d|\.)]*/gi , "" );
valueString = valueString.replace( /,*/ , "" );
break;
case "image":
valueString = this[field].src;
break;
default:
if( this[field].value ){
valueString = this[field].value;
} else if( this[field].innerHTML ) {
valueString = this[field].innerHTML;
} else if( this[field].src ){
valueString = this[field].src;
} else {
valueString = this[field];
}
break;
}
outStrings.push( field + "=" + valueString );
}
}
simpleCart.add( outStrings );
}
};

/********************************************************************************************************
* Thanks to Peter-Paul Koch for these cookie functions (http://www.quirksmode.org/js/cookies.html)
********************************************************************************************************/
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
value = value.replace(/\=/g, '~');
document.cookie = name + "=" + escape(value) + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) === 0){
var value = unescape(c.substring(nameEQ.length, c.length));
return value.replace(/\~/g, '=');
}
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
//*************************************************************************************************
/*
Developed by Robert Nyman, http://www.robertnyman.com
Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};

/********************************************************************************************************
* Helpers
********************************************************************************************************/

String.prototype.reverse=function(){return this.split("").reverse().join("");};
Number.prototype.withCommas=function(){var x=6,y=parseFloat(this).toFixed(2).toString().reverse();while(x<y.length){y=y.substring(0,x)+","+y.substring(x);x+=4;}return y.reverse();};
Number.prototype.toCurrency=function(){return(arguments[0]?arguments[0]:"$")+this.withCommas();};

/********************************************************************************************************
* error management
********************************************************************************************************/

function error( message ){
try{
console.log( message );
}catch(err){
// alert( message );
}
}
var simpleCart = new Cart();
if( typeof jQuery !== 'undefined' ) $(document).ready(function(){simpleCart.initialize();});
else if( typeof Prototype !== 'undefined') Event.observe( window, 'load', function(){simpleCart.initialize();});
else window.onload = simpleCart.initialize;
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
/* SIMPLE CART SETTING
>>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = 'my_email@email.com';
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];
//]]>
</script>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOGGER GRID LIST SHOPPING CART TEMPLATE
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

/* VARIABLE DEFINITIONS
// Background Shopping Cart Setting
<Variable name="cart.background.color" description="Shopping Cart Background" type="color" default="#ffcc00" value="#ffcc00"/>
<Variable name="cart.border.color" description="Shopping Cart Border" type="color" default="#ff9900" value="#ff9900"/>
*/

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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}
body {
line-height:1
}
ol,ul {
list-style:none
}
blockquote,q {
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none
}
table {
border-collapse:collapse;
border-spacing: 0
}

/* SET TO HIDE
>>>>>>>>>>>>>>>>>>>>>>>>*/
#navbar,.date-header,.post-footer,.feed-links {display:none;}

/* GLOBAL STYLE
>>>>>>>>>>>>>>>>>>>>>>>>*/

/* Body */
body {
font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #666666;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1ke_EGwigNIoqQPcO0nTLVeFlRzWGnAbUWpawW8xF-vBPErr0LOnIu5nMuHdEa4xQC1_tTpY3yqepsO3_vKzZpAb7WwdOwsCGafLXb_3ZYHhqQOfna_w9ZwMa8nDveURuGwaOapb_VAt/s1600/back_body.gif) fixed repeat;
line-height: 18px;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}
/*****************************************
Global Links CSS CHANGE LINK INTO BUTTON
******************************************/
a{ color:White; outline:none; text-decoration: none; }

/* Heading */
h1,h2,h3,h4{font-weight:700;font-family:'Open Sans', Tahoma, sans-serif;}
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:20px;}
h4{font-size:16px;}

/* Aligment */
.left{float:left;}
.right{float:right;}

/* Cleaner */
.clearfix:after{clear:both;content:"";display:block;font-size:0;height:0;visibility:hidden;}
.clear{clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;margin:0;padding:0;}

/* Status Message */
.status-msg-wrap {
background:#fbfbfb;
border:5px solid #ddd;
font-size:14px;
text-shadow:1px 1px 1px #fff;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px;
-khtml-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
padding:5px;
}
.status-msg-border,.status-msg-bg {
border:none;
background:transparent;
}

/* Blog Pager */
#blog-pager {
position:relative;
top:10px;
background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Kx6VWtEeCvNbDgiWXjRGi_Y463zApY1xD5GqGBGQK5oRyqPjBURLDBKWQQXqvWuYcWRJvjOOfIrLFVHovJHcZuSYddSOESccnvykyaXsQkxU3QE0p_uou7gx7vKZAAF6epLl1vi1HE6q/s0/fade.png) repeat-x top left;
width:636px;
border:1px solid #ddd;
clear:both;
font-family:'Open Sans', Tahoma, sans-serif;
font-weight:700;
color:#000;
font-size:13px;
border-radius:4px;
margin:15px 0;
padding:5px 10px;
}

/* MAIN LAYOUT
>>>>>>>>>>>>>>>>>>>>>>>>*/

/* Container */
#container{
-webkit-box-shadow:#CCCCCC 0 0 6px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWh1UYJ3gCPc3-79ScvO1UEUyX-CSOsPI0u87Rfc2lEqNZ37JoXJbCl04Oc0RAi0-1be6n8IxNMbOXQw4pAu5jDsd7ywSZYgtMslqFGjvW7cBtP3ksZVSRJeAGgJOlkDstrfvpvA7raEpB/s0/container-bg.png);
border-left-color:#CCCCCC;
border-left-style:solid;
border-left-width:1px;
border-right-color:#CCCCCC;
border-right-style:solid;
border-right-width:1px;
box-shadow:#CCCCCC 0 0 6px;
clear:both;
margin:0 auto;
position:relative;
text-align:left;
width:964px;
}

/* Header Bar Menu */
#top-bar {
background-color:#DE360F;
padding:10px 20px 0 20px;
height:35px;
}
#top-bar-right {
float:right;
width:400px
}

/* Header */
#header-wrapper {
position:relative;
clear:both;
border-bottom:1px solid #ddd;
padding:20px;
height:auto;
}

/* Menu Container */
#menu-wrapper {
float:left;
width:100%;
background-color:#de360f;
height:46px;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px;
-khtml-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-webkit-box-shadow:0 2px 2px #DDD;
-moz-box-shadow:0 2px 2px #DDD;
box-shadow:0 2px 2px #DDD;
clear:both;
margin:25px 0 5px 0;
}

/* Content */
#main-content {
background:#fbfbfb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXTn9axWhZ4uJEOW6XGu_ymeVMrOgeDORtKr4hkVkzBpzv7OOGq7iVJPMezcj6yEBhrPl9I2JGg_B25ZHzFhMCDyrwd8S7njD9NnQiVXbIWCVGSTrhYJP4kKaWlnco-1JYj40-Kyw6m3ng/s0/content-light.png) no-repeat top center;
width:920px;
clear:both;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
padding:20px;
}
#main-content .content-left {
width:660px;
float:left;
}
#main-content .content-right {
width:250px;
float:right;
}
#main,#sidebar {
margin:0;
padding:0;
}

/* Footer */
#footer {
border-top:1px solid #ddd;
padding:10px 20px;
}

/* HEADER CONTENT
>>>>>>>>>>>>>>>>>>>>>>>>*/
#header-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuyvDlHLCcTtMAYrmcGwuRx24CJ80LNpMOa81Vw3pvMWtFRjLoDvI8-NLD8NKivUayJg51-7zGyRfaKqs7-OTHtN5MHOipEsO5j9NRDt7rDCmATXBTWcEx6jpDfp2oRtK4w_KGhbf_9BhB/s1600/960X400.jpg) no-repeat;
border:2px solid black;
height:250px;
margin:0 auto 10px;
width:920px;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
text-align: center;
color:Gold;
background-color:Transparent;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOKoN4UljmVsRXtPCVrGLIy8qkm1esBGqEblw18eerzMOqiZ57Lyx9Q9IxZ0V2VQ8tBBHuWFbJT261cvexzXvDlXrSwDpZQzdRMnJeuoPMIWiPvZMjwWYF4D3hCCCFYAenIeNB8RwRJTwh/s1600/50X50.png);
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font:bold
}
#header a {
color:Gold
text-decoration:none;
}
#header a:hover {
color:Red
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: Bold
color: $textcolor;
}
#header img {
margin-left: auto;
margin-right: auto;
}

/* Top Menu */
ul#top-nav{
list-style-type:none;
position:relative;
z-index:5;
margin:0;
padding:0
}
ul#top-nav li{
position:relative;
display:inline;
float:left;
color:#676767;
margin-top:2px
}
ul#top-nav li a{
display:block;
color:#666;
font-family:'Open Sans', Tahoma, sans-serif;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg-MtCTilbkAU_JaZwn-Pj68jsKNrIXI5KIllIoYWP5z4Qr3UN5rvM0AIrsI5ipUR8DwRugZpIpiQrMGgzl0k9uWEjG5vb0xxL7VFQbGDOi_F_nWBy-Lryciylx5pxAHzf9s78FS4DbLkA/s0/top-menu-sep.gif) no-repeat 0 6px;
padding:0 10px 12px
}
ul#top-nav li:first-child a {background:transparent}
* html ul#top-nav li a {display:inline-block}
ul#top-nav li a:link,#myslidemenu ul li a:visited {color:#6666}
ul#top-nav li a:hover {
color:#000;
text-decoration:none
}
ul#top-nav li ul {
background:#fbfbfb;
border:1px solid #ddd;
border-top:none;
position:absolute;
left:0;
display:block;
visibility:hidden;
font-size:11px;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:0;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
-webkit-box-shadow:inset 0 1px 5px 0 #eee;
-moz-box-shadow:inset 0 1px 5px 0 #eee;
box-shadow:inset 0 1px 5px 0 #eee;
padding:5px 10px 10px 10px
}
ul#top-nav li ul li {
display:list-item;
float:none;
margin:0;
padding:0
}
ul#top-nav li ul li ul {
top:0;
margin-left:10px;
-webkit-box-shadow:-1px 0 4px 0 #000;
-moz-box-shadow:-1px 0 4px 0 #000;
box-shadow:-1px 0 4px 0 #000;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px
}
ul#top-nav li ul li a{
width:120px;
background:transparent;
border-top:1px solid #ffffff;
border-bottom:1px solid #ddd;
margin:0;
padding:5px 0
}
ul#top-nav li ul li:first-child a{border-top:0}
ul#top-nav li ul li:last-child a{border-bottom:0}

/* Search */
#topsearch{float:right;margin-top:-2px}
#topsearch
input{background:#fff;border:1px solid #ddd;width:110px;height:22px;border-radius:3px;color:#999;padding-right:50px;padding-left:10px;padding-top:2px;position:relative;left:30px;font-size:11px}
#topsearch
input.searchsubmit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiSRYLrRSwK2YQ0H0_eMTbwnrzx8rIxydeqVtPCjGXUV9utO4GMILDUtyyL8Jeyu1IosSpNCKIFnYI1eVenVHQlnmEEnAl4I-l2qTtn42FgaaPjfbjcES2IrMqR90Xx292JYAbp8Dsi3Mj/s0/search-icon.png) no-repeat center;border:none;width:30px;text-indent:-3000px;position:relative;left:-10px;padding:0}
#topsearch input.searchsubmit:hover{cursor:pointer}

/* Social Menu */
#top_social{float:right;margin-right:-10px}
#top_social
li{display:inline}
#top_social a
span{visibility:hidden}
#top_social a:hover{text-decoration:none}
.social_facebook a,.social_twitter a,.social_linkedin a,.social_myspace a,.social_rss
a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf-95Qeg5MQrUA8U6tFTeuxumlkIpahLrKmqwVwRe0YUNZiMkN7UCgWZPKszaTEgEp2fWjkMoszY3MIxw_oIYTm_3c0MyZ5dKXsvnsYWfJ-eOvn921T8D9yZrqT4tPQxzBIof580AXn6N2/s0/social_facebook.png) no-repeat;height:27px;width:24px;display:inline-block;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6}
.social_twitter
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtz-3QjcMHvepsorwmlwzBOSHaWzhPvywiG90V6_AWRqZRaBuicViI7gYUT08kYM_oj2kUPV67OJtAJV6R6dF-g3X48uZpH43CNQLmTAzwVQ1e_yx-2d-JBCOM8UVsym87geTL1esWDwHh/s0/social_twitter.png)}
.social_linkedin
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAWeEdtI7LlSDv1rfuQ-0DfpxR97tigEBxkt-ZBmI1AljGZm3yVXiueuOIxJN8KMqZi1iEmShn2UpV6COKIGF6BASa-o_bkPjUe2NooxHPSDrSWP7TDos5yplqKSW0Gs8px5IcluvgVkay/s0/social_linkedin.png)}
.social_myspace
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja8agh8ksqHocEXaGh_wnYB2z87iAHP4p8BPr5O-cXf7fiXv8QExMTM4czJMDGPjaCai8JfZDyFU3C0JiXdhhi25G2IE-X7rojQ_WqH51Yo0i_RJGnJZ-sgn8Pz8nr7eqOQ0oItPH3QDqf/s0/social_myspace.png)}
.social_rss
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUrEkMHhHUsZC97Ily0X5aotMY4f0Jje3Qh7BeUz0KyIDAzijdyr-AJJS3IC_6GtUZSj6CGwgN8KTJumFYMG37q9mqgETusZ_x6dMWnxyzly8oyBsk8nnWLDLBWJSZqCsiMzxabkR_LkVh/s0/social_rss.png)}

/* Dropdown Menu */
.nav {
width:600px;
float:left;
}
.nav ul {
background-position:bottom;
background-repeat:no-repeat;
position:absolute;
top:-999em;
z-index:10;
}
.nav li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFBC5DzPXKpkjlq4nDeZwTpfJQn6jMWLU3plMeUKO7RvFeHyGAFkVKggW3qlHW2mTHwe3adY5171cTTy6_ZR81pvR1yMDsMQ2HTdZ42ks0vmK6tw3D_N5ligErM6rIfqfZmfh2VEO0gfxz/s0/menu-separator.png) no-repeat scroll right center transparent;
float:left;
position:relative;
z-index:20;
}
.nav a {
display:block;
font-size:13px;
font-family:'Open Sans', Tahoma, sans-serif;
font-weight:700;
line-height:14px;
position:relative;
text-decoration:none;
color:#fff;
z-index:6;
padding:16px 15px 16px 14px;
}
.nav a:hover,.nav a.current {
color:#fc0;
}
.nav li:hover ul,ul.nav li.sfHover ul {
left:0;
top:45px;
background:#de360f;
}
.nav li li:hover ul,ul.nav li li.sfHover ul {
left:203px;
top:0;
}
.nav li li {
display:block;
float:left;
height:auto!important;
padding:0;
}
.nav li ul {
width:180px;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-khtml-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
-webkit-box-shadow:0 2px 2px #DDD;
-moz-box-shadow:0 2px 2px #DDD;
box-shadow:0 2px 2px #DDD;
padding-bottom:15px;
}
.nav li ul li {
width:180px;
background-image:none;
padding:10px 15px;
}
.nav li ul li a {
padding:0;
}
.nav li li a:link,.nav li li a:visited {
display:block;
float:left;
height:auto;
}
.nav li:hover {
visibility:inherit;
}
.nav li:hover li ul,.nav li.sfHover li ul,.nav li:hover ul,.nav li li:hover ul {
top:-999em;
}

/* LEFT CONTENT
>>>>>>>>>>>>>>>>>>>>>>>>*/

/* Switch View */
.display {
height:23px;
border-radius:4px;
background-color:#ededed;
repeat-x top left;
border:1px solid #ddd;
width:636px;
margin:0 0 -15px;
padding:8px;
}
.display a {
background:#fff;
border:1px solid #ddd;
border-radius:3px;
font-size:11px;
padding:3px 8px 3px 25px;
}
a.grid_view {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjFGtqcTD3sxZVUoS9AOBSFKeO35hWLsATTTQsGFzwrZkKlHOv0kSEF4XFNAYW_5O2z0ceYkV3-sSwvynZKZYvx6FFhL1fl7jIDdKdRq-z3n_aUEtt9YRS1kSqdfSH6P8DwEQrD0OF3ltI/s0/grid_view.png) no-repeat 3px center;
}
a.list_view {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFi6ULn64aVWumgjbg1AajPs-2uowDp2pR881Jh_2nJ28Z1AOngmeuB3sFS0b52ES8EhrhTMXYgvC0x-OevE_zPxP1RN7EYq1ywTkyxLoepQs5f21GZdAnZWZ_S1rvsDX1sPi5yjfjnFb/s0/display_large.png) no-repeat 3px center;
}
.display a.active {
background-color:#ededed;
border:1px solid #ccc;
color:#111;
cursor:default;
}

/* Post Section */
.post h3 {
background-color:#DE360F;
color:#FFFFFF;
font-size:24px;
margin-bottom:15px;
}
.post {
width:622px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWh1UYJ3gCPc3-79ScvO1UEUyX-CSOsPI0u87Rfc2lEqNZ37JoXJbCl04Oc0RAi0-1be6n8IxNMbOXQw4pAu5jDsd7ywSZYgtMslqFGjvW7cBtP3ksZVSRJeAGgJOlkDstrfvpvA7raEpB/s0/container-bg.png);
border:1px solid #ddd;
border-radius:2px;
float:left;
margin:0 0 15px;
padding:15px;
}
.post-body{padding-bottom:40px}

/* Comment Section */
#comments {
width:621px;
float:left;
border:1px solid #ddd;
margin:0 0 10px;
padding:15px;
}
#comments h4 {
font-size:18px;
margin-bottom:10px;
}
#comment-header {
background:#fff;
border:1px solid #ededed;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
margin-bottom:10px;
line-height:16px;
padding:15px 15px 15px 80px;
}
#comment-body {
line-height:16px;
margin-top:-10px;
}
#comment-date {
margin-bottom:-20px;
padding:0;
}
.avatar-image-container {
background:#fff;
border:1px solid #ddd;
width:42px;
height:42px;
float:left;
margin-left:-63px;
padding:5px;
}
.avatar-image-container img {
width:42px;
height:42px;
}
.comments-autor-name {
font-size:13px;
font-weight:700;
}
.comment-timestamp {
font-size:9px;
}
#comments .comment-author {
padding-left:0;
}
.comment-body {
margin:0;
}

/* RIGHT CONTENT
>>>>>>>>>>>>>>>>>>>>>>>>*/

/* Sidebar Heading */
#sidebar h2 {
background-color:#DE360F;
border-bottom:none;
border:1px solid #ddd;
border-radius:2px 2px 0 0;
color:#FFFFFF;
font-weight:700;
font-size:14px;
padding:5px 15px;
}

/* Sidebar Widget */
#sidebar .widget {
margin:0 0 10px;
padding:0;
}
#sidebar .widget-content {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwczjgCLl1ypQkDaQeY04SiY-SNfML2DYSn2KKdsuBoJEfuALIgy98sYLZoPy3OSKGf4qQToksL-oriEuVnMTUJUIMlSwdECHMp5DIvto8VPbwYOoVngoSO6HAk1ah8Q1ok0MKZRgoCQKR/s0/header-shadow.png) repeat-x top;
border:1px solid #ddd;
border-top:none;
border-radius:0 0 2px 2px;
padding:10px 10px 15px;
}
#sidebar .widget-content ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCs5TyQyFXetYIh6grHfTI1p6AE6TbzhJqA30UJ3Uldj86ESqI192d1hyZYsI5q8H0-KjIPxSo0f6T6Z-ji3DvtsMUViS-D4gM2hcyi5Rkv_htlxCZQPWgUASV9C0gp3_BI2wpCUslpwIc/s0/bullet_red.png) no-repeat 0 0;
padding-left:18px;
color:#878787;
font-weight:700;
font-size:12px;
}

/* FOOTER CONTENT
>>>>>>>>>>>>>>>>>>>>>>>>*/
#footer {
background-color:transparent;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-GA4PodUgVFpdJ37K_Qn8kkM3zKRuescVpLSYSWejy0_1bj3FZFNoGQWqHSg9EXOPwaPO_2HnV9Hfc3DE03RfxWo2qNtDbhmZXPVcXXjvdZ6k2OCcTnVQnVEvfn5e3Wq7Tkui9eatMR2/s1600/960X70.gif);
border:2px solid black;
clear:both;
height:70px;
letter-spacing:0.1em;
line-height:1.6em;
margin:0 auto;
text-align:center;
text-transform:uppercase;
width:920px;
}

/* SHOPPING CART STYLING
>>>>>>>>>>>>>>>>>>>>>>>>*/

/* Shopping Cart Setting for Single Post item */
.item_price {
font-size:15px;
background:#de360f;
color:#fff;
font-weight:700;
position:relative;
padding:5px 10px;
}
.item_image {
width:150px;
height:160px;
background:#fff;
border:1px solid #ddd;
float:left;
text-align:left;
margin:0 15px 10px 0;
padding:15px;
}
.item_image img {
width:150px;
height:150px;
}
.item_add {
position:absolute;
bottom:0;
z-index:20;
right:0;
background:#8bbd13 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Kx6VWtEeCvNbDgiWXjRGi_Y463zApY1xD5GqGBGQK5oRyqPjBURLDBKWQQXqvWuYcWRJvjOOfIrLFVHovJHcZuSYddSOESccnvykyaXsQkxU3QE0p_uou7gx7vKZAAF6epLl1vi1HE6q/s0/fade.png) repeat-x top left;
color:#fff;
text-shadow:1px 1px 1px #7aa514;
font-size:14px;
text-transform:uppercase;
font-weight:700;
border-radius:4px 0 0 0;
border:1px solid #7aa514;
padding:8px 10px;
}

/* Shopping Cart Box */
#menu-wrapper .menu-cart {
position:relative;
top:-5px;
border-radius:4px;
float:right;
margin-right:10px;
height:30px;
display:block;
line-height:16px;
background:$(cart.background.color) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjndCbSptS8hUHUPEEpXGQkGK2t6qwqTrC2hgC3mavICKFLcpU1gK5nuExQNuMBUPVMhmlFZMFDbF5sxlcdj4XAdUBiKZ_ylaXiZBu7oWFu2XhEAyAexZ2F0SsuQ46fz0tAMhEijVYOITAc/s0/basket.png) no-repeat 8px center;
border:1px solid $(cart.border.color);;
color:#111;
padding:12px 12px 12px 45px;
}
.menu-cart a.mycart {
font-size:16px;
display:block;
font-weight:700;
font-family:'Open Sans', Tahoma, sans-serif;
color:#111;
margin:0;
}
.menu-cart span {
color:red;
}
.menu-cart .bag {
display:none;
position:absolute;
top:50px;
z-index:2;
right:-1px;
background:$(cart.background.color);
border:1px solid $(cart.border.color);
border-top:none;
border-radius:0 0 6px 6px;
width:415px;
height:auto;
padding:15px 0 15px 15px;
}

#pages,
#pages .widget {margin:0 !important;}
.bag .cart_btn {
clear:both;
}
.bag .cartHeaders {
display:none;
}
.bag .itemContainer {
border-radius:4px;
float:left;
width:73px;
height:130px;
background:#fff;
text-align:center;
border:1px solid #c77f18;
margin:0 10px 10px 0;
padding:8px;
}
.bag .itemname a {
font:bold 10px Helvetica,Arial,sans-serif;
color:#000;
letter-spacing:-1px;
text-transform:uppercase;
}
.bag .itemthumb img {
width:40px;
height:40px;
margin:10px 0 0;
}
.bag .itemQuantity {
float:left;
clear:both;
display:inline;
margin:5px 0 5px 5px;
}
.bag .item_price {
clear:both;
margin-top:5px;
display:inline;
}
.bag .itemQuantity input {
width:35px;
height:18px;
background:#fbfbfb;
border:1px solid #ddd;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-radius:3px;
text-align:center;
color:#999;
font:bold 11px Arial,sans-serif;
vertical-align:top;
margin:0 5px 0 0;
padding:3px 9px 0;
}
.bag .itemQuantity input:focus {
outline:none;
}
.bag .itemincrement a {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8F1WLtb2zGDpSYBAiWMj5T8W89supa6S7tk84vNM1UQbQxCl0Q-WFk8v_KDrtvDJxbQNTKlU6zlyYUXQoReoKL3OjRXe-TCJKlzFzL2DoU4LT8Grl5SrAMJGV7B7-O_LGHBk-xDc__A2O/s0/arrow.png) -2px -3px;
width:7px;
height:5px;
text-indent:-9999px;
overflow:hidden;
margin:10px 0 0;
}
.bag .itemdecrement a {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8F1WLtb2zGDpSYBAiWMj5T8W89supa6S7tk84vNM1UQbQxCl0Q-WFk8v_KDrtvDJxbQNTKlU6zlyYUXQoReoKL3OjRXe-TCJKlzFzL2DoU4LT8Grl5SrAMJGV7B7-O_LGHBk-xDc__A2O/s0/arrow.png) -2px -10px;
width:7px;
height:5px;
text-indent:-9999px;
overflow:hidden;
margin:3px 0 0;
}
.bag a.simpleCart_empty,.bag a.simpleCart_checkout {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Kx6VWtEeCvNbDgiWXjRGi_Y463zApY1xD5GqGBGQK5oRyqPjBURLDBKWQQXqvWuYcWRJvjOOfIrLFVHovJHcZuSYddSOESccnvykyaXsQkxU3QE0p_uou7gx7vKZAAF6epLl1vi1HE6q/s0/fade.png) repeat-x top left;
color:#fff;
font-size:10px;
text-transform:uppercase;
font-weight:700;
border-radius:3px;
margin-right:10px;
padding:3px 8px;
}
.bag a.simpleCart_empty:hover,.bag a.simpleCart_checkout:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwghTX-uPPxQRy2GEMnpVUwVEZKCP2ngg2NuX1mWMVS7_xKRnHY1XRLsWoK4N1h54j9e_71cMDM0vdlgaT9d8EO6DBPGz-Ny7NoOXS3rgDIt3YmHxnmox3xs6Qe8vpzi6PY6Xk7LYJfKfu/s0/fade-hover.png);
}
.bag a.simpleCart_empty {
background-color:#ef9007;
border:1px solid #c77f18;
}
.bag a.simpleCart_checkout {
background-color:#8bbd13;
border:1px solid #7aa514;
}

]]></b:skin>

<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'>

/* List Style */
.post {
width:652px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwczjgCLl1ypQkDaQeY04SiY-SNfML2DYSn2KKdsuBoJEfuALIgy98sYLZoPy3OSKGf4qQToksL-oriEuVnMTUJUIMlSwdECHMp5DIvto8VPbwYOoVngoSO6HAk1ah8Q1ok0MKZRgoCQKR/s0/header-shadow.png) repeat-x top;
border:1px solid #ddd;
border-radius:2px;
float:left;
margin:0 0 15px;
padding:0;
}
.post h3 {
background-color:#DE360F;
color:#111;
text-shadow:1px 1px 1px #fff;
border-bottom:1px solid #ddd;
font-size:16px;
font-weight:700;
margin:0;
padding:10px 15px;
}
.post .post-body {
width:620px;
background:#fbfbfb;
border:1px solid #fff;
padding:15px;
}
.post .item_price {
top:148px;
font-size:15px;
background:#de360f;
font-family:'
color:#fff;
font-weight:700;
left:16px;
position:absolute;
padding:1px 5px;
height:20px;
}
.post .item_image {
background:#fff;
border:1px solid #ddd;
float:left;
height:100px;
text-align:center;
width:124px;
margin:0 15px 10px 0;
padding:5px;
}
.post .item_thumb {
height:92px;
width:92px;
}
.post img {
border:none;
padding:0;
}

/* Grid Style */
.grid {
background-color:#DE360F;
border:1px solid #ddd;
border-radius:2px;
width:158px;
margin:0 5px 5px 0;
padding:0;
}
.grid h3 {
background-color:#DE360F;
color:#FFFFFF;
border-bottom:1px solid #ddd;
font-size:13px;
font-weight:700;
margin:0;
padding:5px 10px;
}
.grid .post-body {
background:#fbfbfb;
width:136px;
border:1px solid #fff;
padding:10px;
}
.grid .item_price {
top:130px;
left:11px;
}
.grid .item_Description {
display:none;
visibility:hidden;
}
.grid .item_image {
margin:0;
}
.grid img {
border:none;
padding:0;
}

/* Add Cart and Readmore */
a.item_add,a.more_info {
position:relative;
color:#838383;
font-family:Arial,Helvetica,san-serif;
font-size:9px;
letter-spacing:-1px;
height:23px;
line-height:24px;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 1px #fff;
text-transform:uppercase;
margin-top:10px;
font-weight:400;
border-radius:0;
border:none;
padding:0;
}
a.item_add {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAhTypiRtykxn_6ga2h5kpKk9lemUvn0r9ljRjwE0KV-8pp3OiyN8m2TAec_Pl8FmuU1OM7Z2XalBW2nu17cVr74rKDOLSxgWyS6qcb6OV0WFkoeM45aBib7HMD_SXyxaafFlL46E8cD8K/s0/add-button.png) no-repeat;
float:left;
width:70px;
}
a.more_info {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_NVcMF5NwvWPFsB2UuR4zq4bde-slv2SYyLi_SSgZc8IRdr4kSc8AGg6UAIV7uqZEE2mlIOhy3k9as0KAaoLmNYPuBWaaQng2ZaGqgYv4hPxEYyKvNddUnE-fMdPlF8HRvV4CY2T88MtC/s0/more-button.png) no-repeat bottom right;
float:left;
width:65px;
border-left:1px solid #ddd;
}
a.item_add:hover {
background-position:bottom left;
color:#4c4b4b;
}
a.more_info:hover {
background-position:top right;
color:#4c4b4b;
}

</style>
</b:if>

</head>

<body>

<div class='clearfix' id='container'>
<div id='top-bar'>
<b:section id='pages' maxwidgets='1' showaddelement='no'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
</b:widget>
</b:section>

<div id='top-bar-right'>
<form expr:action='data:blog.homepageUrl + "search/"' id='topsearch' method='get'>
<input id='s' name='q' onblur='if(this.value.length == 0) this.value='Search this site..';' onclick='if(this.value == 'Search this site..') this.value='';' type='text' value='Search this site..'/>
<input class='searchsubmit' type='submit' value='Go'/>
</form>
<ul id='top_social'>
<li class='social_facebook'>
<a href='http://facebook.com/YOUR_USERNAME' tooltip='facebook'><span>facebook</span></a></li>
<li class='social_twitter'>
<a href='http://twitter.com/YOUR_USERNAME' tooltip='twitter'><span>twitter</span></a></li>
<li class='social_linkedin'>
<a href='http://linkedin.com/YOUR_USERNAME' tooltip='linkedin'><span>linkedin</span></a></li>
<li class='social_rss'>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' tooltip='linkedin'><span>linkedin</span></a></li>
</ul>
</div>

</div>

<div class='clearfix' id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='WhereIsMyIpAdress (Header)' type='Header'>
</b:widget>
</b:section>

<div class='header-right-element'>
<b:section class='ads-half-banner' id='ads-half-banner'/>
</div>
<div class='clearfix' id='menu-wrapper'>
<div class='menu-cart'>
<a class='mycart' href='#'>My Cart : <span class='simpleCart_quantity'/> item(s)</a>
Total Price : <span class='simpleCart_total'/>
<div class='bag'>
<div class='simpleCart_items'/>
<div class='clear'/>
<a class='simpleCart_empty' href='javascript:'>Empty Cart</a><a class='simpleCart_checkout' href='javascript:'>Checkout</a>
</div>
</div>
<ul class='nav'>
<li><a class='current' href='/'>Home</a></li>
<li><a href='#'>Product Category</a>
<ul>
<li><a href='#'>Camera</a></li>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Electronic</a></li>
<li><a href='#'>Phone</a></li>
</ul>
</li>
<li><a href='#'>Sample Page</a></li>
<li><a href='#'>Sample Page</a></li>
</ul>
</div>
</div>
<div class='clearfix' id='main-content'>
<div class='content-left'>
<b:if cond='data:blog.pageType == "index"'>
<div class='display'>
<a class='grid_view' href='#'>Grid</a>
<a class='list_view' href='#'>Detail</a>
</div>
</b:if>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:includable id='main' var='top'>
<b:if cond='data:mobile == "false"'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</div>

<b:include name='nextprev'/>
<b:include name='feedLinks'/>

<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>

<b:includable id='backlinkDeleteIcon' var='backlink'></b:includable>
<b:includable id='backlinks' var='post'></b:includable>

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display:none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img src='//www.blogger.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='comment_count_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
</span>
<b:else/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
</b:if>
</b:includable>
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4><data:post.commentLabelFull/>:</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
</b:if>
<data:post.commentRangeText/>
<b:if cond='data:post.hasNewerLinks'>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</b:if>
</span>
</b:if>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

<b:includable id='feedLinks'></b:includable>
<b:includable id='feedLinksBody' var='links'></b:includable>

<b:includable id='iframe_comments' var='post'></b:includable>

<b:includable id='mobile-index-post' var='post'></b:includable>
<b:includable id='mobile-main' var='top'></b:includable>
<b:includable id='mobile-nextprev'></b:includable>
<b:includable id='mobile-post' var='post'></b:includable>

<b:includable id='nextprev'></b:includable>

<b:includable id='post' var='post'>
<div class='post grid hentry uncustomized-post-template simpleCart_shelfItem'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title item_name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content clearfix' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear:both'/>
<b:if cond='data:blog.pageType != "static_page"'>
<a class='item_add' href='javascript:'>Add to Cart</a>
<b:if cond='data:blog.pageType != "item"'>
<a class='more_info' href='javascript:'>More Info</a>
</b:if>
</b:if>
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</span>
<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>
</div>
</div>
</b:includable>

<b:includable id='postQuickEdit' var='post'></b:includable>

<b:includable id='shareButtons' var='post'></b:includable>
<b:includable id='status-message'></b:includable>

<b:includable id='threaded-comment-form' var='post'></b:includable>
<b:includable id='threaded_comment_js' var='post'></b:includable>
<b:includable id='threaded_comments' var='post'></b:includable>

</b:widget>
</b:section>
</div>


<div class='content-right'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
</b:widget>
</b:section>
</div>

</div>


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery('a.mycart').click(function() {
jQuery('.bag').slideToggle('medium');
return false;
});
/* Superfish */
jQuery('.nav').superfish({
delay: 200,
animation: {
opacity: 'show'
},
speed: 'fast',
autoArrows: true,
dropShadows: false
})
/* Superfish */
jQuery('ul#top-nav').superfish({
delay: 200,
animation: {
opacity: 'show'
},
speed: 'fast',
autoArrows: true,
dropShadows: false
})
/* Style View */
var $box = jQuery('.post'),
$grid = jQuery('a.grid_view');
$list = jQuery('a.list_view');
$list.click(function() {
$box.removeClass("grid");
jQuery(this).addClass('active');
$grid.removeClass('active');
jQuery.cookie('list_style', 0);
return false;
});
$grid.click(function() {
$box.addClass("grid");
jQuery(this).addClass('active');
$list.removeClass('active');
jQuery.cookie('list_style', 1);
return false;
});
if (jQuery.cookie('list_style') == 0) {
$box.removeClass("grid");
$list.addClass('active');
} else {
$box.addClass("grid");
$grid.addClass('active');
}
jQuery('#featured-product').carouFredSel({
curcular: false,
infinite: false,
auto: true,
prev: {
button: '#featured-product_prev',
key: 'left'
},
next: {
button: '#featured-product_next',
key: 'right'
},
pagination: '#featured-product_pag'
});
jQuery('.footer-right a').hover(function(){
jQuery(this).stop().animate({
opacity: 1
}, 400);
}, function(){
jQuery(this).stop().animate({
opacity: 0.5
}, 400);
});
});
//end of ready function
//]]>
</script>

</body>
</html>

--------------------------------------------------------------------------------------------------
OR USE THIS CSS CODE
--------------------------------------------------------------------------------------------------

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOGGER MEGA GRID AND LIST TEMPLATE
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}
body {
line-height:1
}
ol,ul {
list-style:none
}
blockquote,q {
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none
}
table {
border-collapse:collapse;
border-spacing: 0
}

/* SET TO HIDE
>>>>>>>>>>>>>>>>>>>>>>>>*/
#navbar,.date-header,.post-footer,.feed-links {display:none;}

/* GLOBAL STYLE
>>>>>>>>>>>>>>>>>>>>>>>>*/

/* Body */
body {
font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #666666;
background: #FFF url(http://bit.ly/1Ama2gc) fixed repeat;
line-height: 18px;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}
/*****************************************
Global Links CSS CHANGE LINK INTO BUTTON
******************************************/
a{ color:White; outline:none; text-decoration: none; }

/* Heading */
h1,h2,h3,h4{font-weight:700;font-family:'Open Sans', Tahoma, sans-serif;}
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:20px;}
h4{font-size:16px;}

/* Aligment */
.left{float:left;}
.right{float:right;}

/* Cleaner */
.clearfix:after{clear:both;content:"";display:block;font-size:0;height:0;visibility:hidden;}
.clear{clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;margin:0;padding:0;}

/* Status Message */
.status-msg-wrap {
background:#fbfbfb;
border:5px solid #ddd;
font-size:14px;
text-shadow:1px 1px 1px #fff;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px;
-khtml-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
padding:5px;
}
.status-msg-border,.status-msg-bg {
border:none;
background:transparent;
}

/* MAIN LAYOUT
>>>>>>>>>>>>>>>>>>>>>>>>*/

/* Container */
#container{
-webkit-box-shadow:#CCCCCC 0 0 6px;
background:url(http://bit.ly/VusyTC);
border-left-color:#CCCCCC;
border-left-style:solid;
border-left-width:1px;
border-right-color:#CCCCCC;
border-right-style:solid;
border-right-width:1px;
box-shadow:#CCCCCC 0 0 6px;
clear:both;
margin:0 auto;
position:relative;
text-align:left;
width:964px;
}

/* Header Bar Menu */
#top-bar {
background-color:#DE360F;
padding:10px 20px 0 20px;
height:35px;
}
#top-bar-right {
float:right;
width:400px
}

/* Header */
#header-wrapper {
position:relative;
clear:both;
border-bottom:1px solid #ddd;
padding:20px;
height:auto;
}

/* Menu Container */
#menu-wrapper {
float:left;
width:100%;
background-color:#de360f;
height:46px;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px;
-khtml-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-webkit-box-shadow:0 2px 2px #DDD;
-moz-box-shadow:0 2px 2px #DDD;
box-shadow:0 2px 2px #DDD;
clear:both;
margin:25px 0 5px 0;
}

/* Content */
#main-content {
background:#fbfbfb url(http://bit.ly/1v18aq5) no-repeat top center;
width:920px;
clear:both;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
padding:20px;
}
#main-content .content-left {
width:660px;
float:left;
}
#main-content .content-right {
width:250px;
float:right;
}
#main,#sidebar {
margin:0;
padding:0;
}

/* Footer */
#footer {
border-top:1px solid #ddd;
padding:10px 20px;
}

/* HEADER CONTENT
>>>>>>>>>>>>>>>>>>>>>>>>*/
#header-wrapper {
background:url(http://bit.ly/1vUC6bA) no-repeat;
border:2px solid black;
height:250px;
margin:0 auto 10px;
width:920px;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
text-align: center;
color:Gold;
background-color:Transparent;
background-image:url(http://bit.ly/1rF4FU7);
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font:bold
}
#header a {
color:Gold
text-decoration:none;
}
#header a:hover {
color:Red
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: Bold
color: $textcolor;
}
#header img {
margin-left: auto;
margin-right: auto;
}

/* Top Menu */
ul#top-nav{
list-style-type:none;
position:relative;
z-index:5;
margin:0;
padding:0
}
ul#top-nav li{
position:relative;
display:inline;
float:left;
color:#676767;
margin-top:2px
}
ul#top-nav li a{
display:block;
color:#666;
font-family:'Open Sans', Tahoma, sans-serif;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
background:url(http://bit.ly/1uFgMVW) no-repeat 0 6px;
padding:0 10px 12px
}
ul#top-nav li:first-child a {background:transparent}
* html ul#top-nav li a {display:inline-block}
ul#top-nav li a:link,#myslidemenu ul li a:visited {color:#6666}
ul#top-nav li a:hover {
color:#000;
text-decoration:none
}
ul#top-nav li ul {
background:#fbfbfb;
border:1px solid #ddd;
border-top:none;
position:absolute;
left:0;
display:block;
visibility:hidden;
font-size:11px;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:0;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
-webkit-box-shadow:inset 0 1px 5px 0 #eee;
-moz-box-shadow:inset 0 1px 5px 0 #eee;
box-shadow:inset 0 1px 5px 0 #eee;
padding:5px 10px 10px 10px
}
ul#top-nav li ul li {
display:list-item;
float:none;
margin:0;
padding:0
}
ul#top-nav li ul li ul {
top:0;
margin-left:10px;
-webkit-box-shadow:-1px 0 4px 0 #000;
-moz-box-shadow:-1px 0 4px 0 #000;
box-shadow:-1px 0 4px 0 #000;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px
}
ul#top-nav li ul li a{
width:120px;
background:transparent;
border-top:1px solid #ffffff;
border-bottom:1px solid #ddd;
margin:0;
padding:5px 0
}
ul#top-nav li ul li:first-child a{border-top:0}
ul#top-nav li ul li:last-child a{border-bottom:0}

/* Search */
#topsearch{float:right;margin-top:-2px}
#topsearch
input{background:#fff;border:1px solid #ddd;width:110px;height:22px;border-radius:3px;color:#999;padding-right:50px;padding-left:10px;padding-top:2px;position:relative;left:30px;font-size:11px}
#topsearch
input.searchsubmit{background:url(http://bit.ly/1qeZWGK) no-repeat center;border:none;width:30px;text-indent:-3000px;position:relative;left:-10px;padding:0}
#topsearch input.searchsubmit:hover{cursor:pointer}

/* Social Menu */
#top_social{float:right;margin-right:-10px}
#top_social
li{display:inline}
#top_social a
span{visibility:hidden}
#top_social a:hover{text-decoration:none}
.social_facebook a,.social_twitter a,.social_linkedin a,.social_myspace a,.social_rss
a{background:url(http://bit.ly/1vUD3AJ) no-repeat;height:27px;width:24px;display:inline-block;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6}
.social_twitter
a{background-image:url(http://bit.ly/1pn7ASx)}
.social_linkedin
a{background-image:url(http://bit.ly/1pzZpmh)}
.social_myspace
a{background-image:url(http://bit.ly/1nZIwwe)}
.social_rss
a{background-image:url(http://bit.ly/1pn8crw)}

/* Dropdown Menu */
.nav {
width:600px;
float:left;
}
.nav ul {
background-position:bottom;
background-repeat:no-repeat;
position:absolute;
top:-999em;
z-index:10;
}
.nav li {
background:url(http://bit.ly/1uFgMVW) no-repeat scroll right center transparent;
float:left;
position:relative;
z-index:20;
}
.nav a {
display:block;
font-size:13px;
font-family:'Open Sans', Tahoma, sans-serif;
font-weight:700;
line-height:14px;
position:relative;
text-decoration:none;
color:#fff;
z-index:6;
padding:16px 15px 16px 14px;
}
.nav a:hover,.nav a.current {
color:#fc0;
}
.nav li:hover ul,ul.nav li.sfHover ul {
left:0;
top:45px;
background:#de360f;
}
.nav li li:hover ul,ul.nav li li.sfHover ul {
left:203px;
top:0;
}
.nav li li {
display:block;
float:left;
height:auto!important;
padding:0;
}
.nav li ul {
width:180px;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-khtml-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
-webkit-box-shadow:0 2px 2px #DDD;
-moz-box-shadow:0 2px 2px #DDD;
box-shadow:0 2px 2px #DDD;
padding-bottom:15px;
}
.nav li ul li {
width:180px;
background-image:none;
padding:10px 15px;
}
.nav li ul li a {
padding:0;
}
.nav li li a:link,.nav li li a:visited {
display:block;
float:left;
height:auto;
}
.nav li:hover {
visibility:inherit;
}
.nav li:hover li ul,.nav li.sfHover li ul,.nav li:hover ul,.nav li li:hover ul {
top:-999em;
}

/* LEFT CONTENT
>>>>>>>>>>>>>>>>>>>>>>>>*/

/* Switch View */
.display {
height:23px;
border-radius:4px;
background-color:#ededed;
repeat-x top left;
border:1px solid #ddd;
width:636px;
margin:0 0 -15px;
padding:8px;
}
.display a {
background:#fff;
border:1px solid #ddd;
border-radius:3px;
font-size:11px;
padding:3px 8px 3px 25px;
}
a.grid_view {
background:url(http://bit.ly/1sLyyGn) no-repeat 3px center;
}
a.list_view {
background:url(http://bit.ly/1laeivQ) no-repeat 3px center;
}
.display a.active {
background-color:#ededed;
border:1px solid #ccc;
color:#111;
cursor:default;
}

/* Post Section */
.post h3 {
background-color:#DE360F;
color:#FFFFFF;
font-size:24px;
margin-bottom:15px;
}
.post {
width:622px;
background:url(http://bit.ly/VusyTC);
border:1px solid #ddd;
border-radius:2px;
float:left;
margin:0 0 15px;
padding:15px;
}
.post-body{padding-bottom:40px}

/* Comment Section */
#comments {
width:621px;
float:left;
border:1px solid #ddd;
margin:0 0 10px;
padding:15px;
}
#comments h4 {
font-size:18px;
margin-bottom:10px;
}
#comment-header {
background:#fff;
border:1px solid #ededed;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
margin-bottom:10px;
line-height:16px;
padding:15px 15px 15px 80px;
}
#comment-body {
line-height:16px;
margin-top:-10px;
}
#comment-date {
margin-bottom:-20px;
padding:0;
}
.avatar-image-container {
background:#fff;
border:1px solid #ddd;
width:42px;
height:42px;
float:left;
margin-left:-63px;
padding:5px;
}
.avatar-image-container img {
width:42px;
height:42px;
}
.comments-autor-name {
font-size:13px;
font-weight:700;
}
.comment-timestamp {
font-size:9px;
}
#comments .comment-author {
padding-left:0;
}
.comment-body {
margin:0;
}

/* RIGHT CONTENT
>>>>>>>>>>>>>>>>>>>>>>>>*/

/* Sidebar Heading */
#sidebar h2 {
background-color:#DE360F;
border-bottom:none;
border:1px solid #ddd;
border-radius:2px 2px 0 0;
color:#FFFFFF;
font-weight:700;
font-size:14px;
padding:5px 15px;
}

/* Sidebar Widget */
#sidebar .widget {
margin:0 0 10px;
padding:0;
}
#sidebar .widget-content {
background:#fff url(http://bit.ly/1oQNV8U) repeat-x top;
border:1px solid #ddd;
border-top:none;
border-radius:0 0 2px 2px;
padding:10px 10px 15px;
}
#sidebar .widget-content ul li a {
background:url(http://bit.ly/1qf1K2l) no-repeat 0 0;
padding-left:18px;
color:#878787;
font-weight:700;
font-size:12px;
}

/* FOOTER CONTENT
>>>>>>>>>>>>>>>>>>>>>>>>*/
#footer {
background-color:transparent;
background-image:url(http://bit.ly/1t9NUlO);
border:2px solid black;
clear:both;
height:70px;
letter-spacing:0.1em;
line-height:1.6em;
margin:0 auto;
text-align:center;
text-transform:uppercase;
width:920px;
}

/* SHOPPING CART STYLING
>>>>>>>>>>>>>>>>>>>>>>>>*/

/* Shopping Cart Setting for Single Post item */
.item_price {
font-size:15px;
background:#de360f;
color:#fff;
font-weight:700;
position:relative;
padding:5px 10px;
}
.item_image {
width:150px;
height:160px;
background:#fff;
border:1px solid #ddd;
float:left;
text-align:left;
margin:0 15px 10px 0;
padding:15px;
}
.item_image img {
width:150px;
height:150px;
}
.item_add {
position:absolute;
bottom:0;
z-index:20;
right:0;
background:#8bbd13 url(http://bit.ly/1nZKfBE) repeat-x top left;
color:#fff;
text-shadow:1px 1px 1px #7aa514;
font-size:14px;
text-transform:uppercase;
font-weight:700;
border-radius:4px 0 0 0;
border:1px solid #7aa514;
padding:8px 10px;
}

/* Shopping Cart Box */
#menu-wrapper .menu-cart {
position:relative;
top:-5px;
border-radius:4px;
float:right;
margin-right:10px;
height:30px;
display:block;
line-height:16px;
background:#ffcc00; url(http://bit.ly/Yhehfa) no-repeat 8px center;
border:1px solid #ff9900;
color:#111;
padding:12px 12px 12px 45px;
}
.menu-cart a.mycart {
font-size:16px;
display:block;
font-weight:700;
font-family:'Open Sans', Tahoma, sans-serif;
color:#111;
margin:0;
}
.menu-cart span {
color:red;
}
.menu-cart .bag {
display:none;
position:absolute;
top:50px;
z-index:2;
right:-1px;
background:#ffcc00;
border:1px solid #ff9900;
border-top:none;
border-radius:0 0 6px 6px;
width:415px;
height:auto;
padding:15px 0 15px 15px;
}
#pages,
#pages .widget {margin:0 !important;}
.bag .cart_btn {
clear:both;
}
.bag .cartHeaders {
display:none;
}
.bag .itemContainer {
border-radius:4px;
float:left;
width:73px;
height:130px;
background:#fff;
text-align:center;
border:1px solid #c77f18;
margin:0 10px 10px 0;
padding:8px;
}
.bag .itemname a {
font:bold 10px Helvetica,Arial,sans-serif;
color:#000;
letter-spacing:-1px;
text-transform:uppercase;
}
.bag .itemthumb img {
width:40px;
height:40px;
margin:10px 0 0;
}
.bag .itemQuantity {
float:left;
clear:both;
display:inline;
margin:5px 0 5px 5px;
}
.bag .item_price {
clear:both;
margin-top:5px;
display:inline;
}
.bag .itemQuantity input {
width:35px;
height:18px;
background:#fbfbfb;
border:1px solid #ddd;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-radius:3px;
text-align:center;
color:#999;
font:bold 11px Arial,sans-serif;
vertical-align:top;
margin:0 5px 0 0;
padding:3px 9px 0;
}
.bag .itemQuantity input:focus {
outline:none;
}
.bag .itemincrement a {
display:block;
background:url(http://bit.ly/1BngeWK) -2px -3px;
width:7px;
height:5px;
text-indent:-9999px;
overflow:hidden;
margin:10px 0 0;
}
.bag .itemdecrement a {
display:block;
background:url(http://bit.ly/1BngeWK) -2px -10px;
width:7px;
height:5px;
text-indent:-9999px;
overflow:hidden;
margin:3px 0 0;
}
.bag a.simpleCart_empty,.bag a.simpleCart_checkout {
background:url(http://bit.ly/1nZKfBE) repeat-x top left;
color:#fff;
font-size:10px;
text-transform:uppercase;
font-weight:700;
border-radius:3px;
margin-right:10px;
padding:3px 8px;
}
.bag a.simpleCart_empty:hover,.bag a.simpleCart_checkout:hover {
background-image:url(http://bit.ly/1nZKfBE);
}
.bag a.simpleCart_empty {
background-color:#ef9007;
border:1px solid #c77f18;
}
.bag a.simpleCart_checkout {
background-color:#8bbd13;
border:1px solid #7aa514;
}

]]></b:skin>

<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'>

/* List Style */
.post {
width:652px;
background:#fff url(http://bit.ly/1oQNV8U) repeat-x top;
border:1px solid #ddd;
border-radius:2px;
float:left;
margin:0 0 15px;
padding:0;
}
.post h3 {
background-color:#DE360F;
color:#111;
text-shadow:1px 1px 1px #fff;
border-bottom:1px solid #ddd;
font-size:16px;
font-weight:700;
margin:0;
padding:10px 15px;
}
.post .post-body {
width:620px;
background:#fbfbfb;
border:1px solid #fff;
padding:15px;
}
.post .item_price {
top:148px;
font-size:15px;
background:#de360f;
font-family:'
color:#fff;
font-weight:700;
left:16px;
position:absolute;
padding:1px 5px;
height:20px;
}
.post .item_image {
background:#fff;
border:1px solid #ddd;
float:left;
height:100px;
text-align:center;
width:124px;
margin:0 15px 10px 0;
padding:5px;
}
.post .item_thumb {
height:92px;
width:92px;
}
.post img {
border:none;
padding:0;
}

/* Grid Style */
.grid {
background-color:#DE360F;
border:1px solid #ddd;
border-radius:2px;
width:158px;
margin:0 5px 5px 0;
padding:0;
}
.grid h3 {
background-color:#DE360F;
color:#FFFFFF;
border-bottom:1px solid #ddd;
font-size:13px;
font-weight:700;
margin:0;
padding:5px 10px;
}
.grid .post-body {
background:#fbfbfb;
width:136px;
border:1px solid #fff;
padding:10px;
}
.grid .item_price {
top:130px;
left:11px;
}
.grid .item_Description {
display:none;
visibility:hidden;
}
.grid .item_image {
margin:0;
}
.grid img {
border:none;
padding:0;
}

/* Add Cart and Readmore */
a.item_add,a.more_info {
position:relative;
color:#838383;
font-family:Arial,Helvetica,san-serif;
font-size:9px;
letter-spacing:-1px;
height:23px;
line-height:24px;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 1px #fff;
text-transform:uppercase;
margin-top:10px;
font-weight:400;
border-radius:0;
border:none;
padding:0;
}
a.item_add {
background:url(http://bit.ly/1t7KOxP) no-repeat;
float:left;
width:70px;
}
a.more_info {
background:url(http://bit.ly/1t7KQ8W) no-repeat bottom right;
float:left;
width:65px;
border-left:1px solid #ddd;
}
a.item_add:hover {
background-position:bottom left;
color:#4c4b4b;
}
a.more_info:hover {
background-position:top right;
color:#4c4b4b;
}

</style>
</b:if>

</head>

------------------------------------------------------------------------------------------------------------
HOW POST HTML CODE
COPY AND PASTE BELOW CODE
------------------------------------------------------------------------------------------------------------

<div class="item_image">
<img border="0" class="item_thumb" src="image.jpg" /> <span class="item_price">$00.00</span></div>
<div class="item_Description">
Descriptions... </div>

FbGadgets

Saturday, 16 August 2014

BLOGGER GRID LIST SHOPPING CART TEMPLATE

0 comments:

Post a Comment

SPONSORS ❤ ☕ ❀ ✿ ❁ ✾ ✽ ❃ ❋

RANDOM POST

RANDOM

RECENT POST MULTI COLOR

Learning Codes

Labels

RECENT COMMENTS AVATAR