Monday, 4 August 2014
SHOPPING CART BLOGGER TEMPLATE PART 1
READ MORE:
------------------------------------------------------------------------------------------------------------
http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-blogger-template.html
http://www.ecwid.com/features
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
--------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
----------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: SIMPLE SHOPPING CART BLOGGER 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,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-family:inherit;
vertical-align:baseline;
}
/* remember to define focus styles! */:focus {
outline:0;
}
body,.body-fauxcolumn-outer {
line-height:1;
color:black;
background:white;
}
ol,ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse:separate;
border-spacing:0;
}
caption,th,td {
text-align:left;
font-weight:normal;
}
blockquote:before,blockquote:after,q:before,q:after {
content:"";
}
blockquote,q {
quotes:"" "";
}
img {
width:auto\9;
height:auto;
max-width:100%;
vertical-align:middle;
border:0;
-ms-interpolation-mode:bicubic;
}
#map_canvas img,.google-maps img {
max-width:none;
}
body {
margin:0;
padding:0;
color:#333333;
background:#F8F8F8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR0cucQR9aZaKl0l_iwEX18avDgg1AgKG3snxBtqx4DZLt9XJUbjZ1EmwdkWWI6ZEI4vcqjaNc4Pr3vGvG-2XKuYS2CZWyxcEzgT3zEDAeiPfcyCAtwiQWSsLYIt_p2aQh7KrRpcYTxjc/s1600/body-Bg.png);
font:normal normal 13px Tahoma,Geneva,sans-serif;
line-height:1.6em;
}
a,a:visited {
color:#1cc3cd;
}
a:hover {
color:#191919;
text-decoration:none;
}
a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
text-decoration:none;
}
hr {
border:0 solid #fff;
border-bottom-width:1px;
clear:both;
height:1px;
background:#ccc;
}
.container {
margin-left:auto;
margin-right:auto;
width:960px;
}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12 {
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
*zoom:1;
}
.grid_1 {
width:60px;
}
.grid_2 {
width:140px;
}
.grid_3 {
width:216px;
}
.grid_4 {
width:300px;
}
.grid_5 {
width:380px;
}
.grid_6 {
width:460px;
}
.grid_7 {
width:540px;
}
.grid_8 {
width:620px;
}
.grid_9 {
width:700px;
}
.grid_10 {
width:780px;
}
.grid_11 {
width:860px;
}
.grid_12 {
width: 940px;
}
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;
}
.date-header {
display:none;
}
.header-wrapper {
position:relative;
padding-bottom:25px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHKahtwIXE5cDDkiTQcPSQA3CN5HXUgLsNtbSm5NhhnhXsxT7s0cEK__ZKhHmfm-qn54xRbfujIVrGMFrpQEVYyGdk0opN6-NbD4cIRhCXqLcTCy0mH1SpyXvHh7kmGjX3BN9qP2cpbs/s1600/box-shadow.png) no-repeat bottom center;
z-index:20;
}
.header-container {
margin:0px auto;
width:960px;
min-height:70px;
background:#1cc3cd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA4BWHbepHkLlDkIVdn_G-mWVvTo0musY9NHuUSy5JHL0veFUXwE5dSpNPYuLz4t6ysiTPN79nSG8GYe-FHKsd5De4jC6bzUwgbWQxYp2sIIE3Ip_IKLOP6dAjsGmWIjP8e5tBb-cXVdg/s1600/header-bg.png);
}
.header {
display:inline;
float:left;
width:300px;
margin:10px;
}
.header h1,.header h1 a {
color:#fff;
font-family:'Dancing Script',cursive;
fontsize:28px;
font-weight:400;
text-shadow:0px 1px 2px #333;
}
.menu {
display:inline;
float:left;
margin-right:10px;
margin-left:10px;
width:620px;
}
.menu ul {
margin-top:20px;
}
.menu ul li {
list-style:none;
display:inline;
float:left;
}
.menu ul li a {
displa:block;
padding:0.75em 1.25em;
color:#fff;
font-family:'Noto Sans',sans-serif;
font-size:14px;
text-shadow:0px 1px 1px #333;
}
.subMenu {
display:none;
margin:0;
list-style:none;
min-width:200px;
max-width:220px;
background:#fff;
position:absolute;
z-index:999;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
border-radius:3px 3px 3px 3px;
-moz-box-shadow:1px 2px 5px #595959;
-webkit-box-shadow:1px 2px 5px #595959;
box-shadow:1px 2px 5px #595959;
}
.subMenu:before {
content:"";
display:block;
width:1px;
height:1px;
background:transparent;
border-top:8px solid transparent;
border-right:8px solid transparent;
border-bottom:8px solid #fff;
border-left:8px solid transparent;
position:absolute;
margin-top:-22px;
margin-left:20px;
}
.subMenu li {
display:inline-block;
float:none !important;
width:100%;
}
.subMenu li a {
display:block;
padding:5px !important;
color:#333 !important;
font-size:13px !important;
text-shadow:none !important;
}
.subMenu li a:hover {
background:#1cc3cd;
color:#fff !important;
}
.content-wrapper {
margin:0px auto;
width:960px;
background:#fff;
border:1px solid #ececec;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.cross-content {
padding:10px 0px;
background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8mYv6o-XpkapZs5EukqK7AXPuIsx44PG3DamW5Npu9pbMnFs__s7m-R0SGTVj_n7auZn-SSBMYnd9VZHD-nuxMvrTzk5ut9L2vFjW38dnP5CSNVhljzYLoGewS5FMNa-dWDZT1sjYp5s/s1600/info-box-bg.jpg);
border-top:1px solid #fff;
}
.search {
display:inline;
float:left;
margin:0px 10px;
width:780px;
}
.search input {
margin:0px;
padding:10px 10px 10px 25px;
width:95%;
border:0;
background: #ffffff;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
border-radius:3px 3px 3px 3px;
-moz-box-shadow:inset 0px 0px 3px #ccc;
-webkit-box-shadow:inset 0px 0px 3px #ccc;
box-shadow:inset 0px 0px 3px #ccc;
}
.cartwrp {
display:inline;
float:right;
margin-right:10px;
width:140px;
}
.cartInfo {
display:inline;
float:right;
margin:0px;
padding:7px 10px 7px 35px;
color:#fff;
background:#c2bfcd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdDbBgLNCXYVzOTk_nFxWCWscoTp4EGEzBTeSl6eem8iAnTBbS50euMHl684qEUT8bA9K5X61eKIfrAp7Ks-tCpvLUtVKXm74Lct2lID0BTnEfGbYV3pzyBM5dqZvIFDkuzkdwtnEASNs/s1600/cart.png) no-repeat left center;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
border-radius:3px 3px 3px 3px;
cursor:pointer;
}
.cartOn {
background:#1cc3cd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdDbBgLNCXYVzOTk_nFxWCWscoTp4EGEzBTeSl6eem8iAnTBbS50euMHl684qEUT8bA9K5X61eKIfrAp7Ks-tCpvLUtVKXm74Lct2lID0BTnEfGbYV3pzyBM5dqZvIFDkuzkdwtnEASNs/s1600/cart.png) no-repeat left center;
}
.cartBox {
display:none;
position:absolute;
z-index:9999;
width:200px;
min-height:30px;
background:#f0f0f0;
padding:10px;
margin-top:50px;
margin-left:-80px;
border-top: 3px solid #1cc3cd;
border-bottom: 3px solid #1cc3cd;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
border-radius:3px 3px 3px 3px;
-moz-box-shadow: 1px 2px 5px #000000;
-webkit-box-shadow: 1px 2px 5px #000000;
box-shadow: 1px 2px 5px #000000;
}
.cartBox:before {
content:"";
position:absolute;
display:block;
margin-top:-33px;
margin-left:120px;
width:1px;
height:1px;
background:transparent;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #1cc3cd;
border-left: 10px solid transparent;
z-index:100;
}
a.simpleCart_empty {
display:block;
float:right;
margin:-5px -5px 0px 0px;
width:25px;
height:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiog0gzx3F49rF6k2kEmM9FkKw0p8kTthptRmEBNf_teWyBiPLRhv_SH3zKPRCfZCt49ySFwS_3OtMKoWL53P9Ak9c8m3CQ5YmIEW4Rp5XXbC16XSldcfEI9SCogu7rNWVmNemNamIskeI/s1600/cart-icon.png) no-repeat -1px -51px;
text-indent:-99999px;
}
.simpleCart_items table{
width:100%;
background:#fafafa;
border:1px solid #fff;
box-shadow:0px 0px 1px #dedede;
}
.simpleCart_items table tr.headerRow{
background: #f5f5f5;
}
.simpleCart_items table tr.headerRow th{
padding:10px;
font-size:16px;
font-weight:bold;
}
.simpleCart_items table tr.itemRow {
border-bottom: 1px solid #ddd;
margin-bottom:3px;
}
.simpleCart_items table tr.itemRow td{
padding:10px;
}
.total {
display:block;
text-align:right;
font-size:16px;
font-weight:bold;
}
.feed-links {display:none;}
.main-wrapper {
margin:0px 10px;
width:940px;
padding-top:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHKahtwIXE5cDDkiTQcPSQA3CN5HXUgLsNtbSm5NhhnhXsxT7s0cEK__ZKhHmfm-qn54xRbfujIVrGMFrpQEVYyGdk0opN6-NbD4cIRhCXqLcTCy0mH1SpyXvHh7kmGjX3BN9qP2cpbs/s1600/box-shadow.png) no-repeat top center;
}
.post h3 {
font-family: 'Noto Sans', sans-serif;
font-size:20px;
font-weight:normal;
margin:10px 0px 20px 0px;
padding:5px 0px;
}
.post-data-meta {
display:inline;
float:left;
margin-right:20px;
width:220px;
}
.post-body {
display:inline;
float:left;
width:700px;
}
.post-footer {
clear:both;
}
.item_image {
padding:10px;
background:#fafafa;
border:1px solid #fff;
box-shadow:0px 0px 1px #dedede;
position:relative;
z-index:20;
}
img.item_thumb {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.item_price {
margin-top:-40px;
padding:10px 20px;
font-size:18px;
color: #1cc3cd;
display:block;
position:absolute;
background:#fafafa;
z-index:99;
border-top:1px solid #fff;
border-radius:0px 3px 0px 0px;
}
.item_Description {
margin:-10px 10px 0px 10px;
padding:20px 10px 10px 10px;
background:#fafafa;
border:1px solid #fff;
box-shadow:0px 0px 1px #dedede;
}
.item-bottom {
padding:20px 10px 10px 10px;
margin-bottom:50px;
background:#fafafa;
border:1px solid #fff;
box-shadow:0px 0px 1px #dedede;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
}
.item_Quantity {
padding:5px;
}
a.item_add {
position:relative;
margin:0px;
padding:10px 15px 10px 26px;
background:#1cc3cd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_D5blrQXhtgwrqx3V6N4mE7oSOfC1kDJboEPj07KY-TwSRf3KcYlWRwY9OkjxDCoWPcmuWSL0TCkgQRb3UFI-TZqkUoHyEF13eCLyLIIgGIm3XOhlSsSKvEpreucz9HX-SN8_w_Zsgx4/s1600/add-to-cart.png) no-repeat left center;
color:#ffffff;
min-width:90px;
text-align:center;
border-top:1px solid rgba(255, 255, 255, 0.4);
border-bottom:1px solid rgba(0, 0, 0, 0.4);
text-decoration:none;
border-radius:3px 3px 3px 3px;
transition:All 1s ease;
-webkit-transition:All .3s ease;
-moz-transition:All 3 ease;
-o-transition:All 3 ease;
}
a.item_add:hover {
background:#FF8821 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_D5blrQXhtgwrqx3V6N4mE7oSOfC1kDJboEPj07KY-TwSRf3KcYlWRwY9OkjxDCoWPcmuWSL0TCkgQRb3UFI-TZqkUoHyEF13eCLyLIIgGIm3XOhlSsSKvEpreucz9HX-SN8_w_Zsgx4/s1600/add-to-cart.png) no-repeat left center;
}
a.item_add:active {
border-bottom:1px solid rgba(255, 255, 255, 0.4);
border-top:1px solid rgba(0, 0, 0, 0.4);
}
.divider {
clear:both;
height:0px;
margin:15px 0px;
}
a.view-cart, a.view-cart:visited, a.simpleCart_checkout, a.simpleCart_checkout:visited {
padding:5px 15px 5px 25px;
background:#1cc3cd;
color:#fff;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
border-radius:3px 3px 3px 3px;
}
a.view-cart {
margin-right:5px;
}
.showpageArea {
margin:20px 0px 10px 0px;
}
.showpagePoint, .showpageNum {
margin:0px 3px;
padding:3px 8px;
background:#f8f8f8;
}
.showpagePoint {
background:#1cc3cd;
color:#fff;
}
.showpage {
margin:0px 3px;
}
.sidebar-wrapper {
margin:0px;
padding-top:10px;
padding-bottom:20px;
background:#ececec url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8mYv6o-XpkapZs5EukqK7AXPuIsx44PG3DamW5Npu9pbMnFs__s7m-R0SGTVj_n7auZn-SSBMYnd9VZHD-nuxMvrTzk5ut9L2vFjW38dnP5CSNVhljzYLoGewS5FMNa-dWDZT1sjYp5s/s1600/info-box-bg.jpg);
border-top: 1px solid #ececec;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sidebar {
display:inline;
float:left;
width: 460px;
margin-left:10px;
}
.sidebar h2 {
margin-bottom:10px;
font-weight:bold;
font-size:12px;
text-shadow:0px 1px 1px #fff;
}
.sidebar .widget {
margin-top:10px;
margin-bottom:10px;
}
.slider-wrapper {
margin-top:-100px;
margin-right:auto;
margin-left:auto;
width:100%;
max-width:1600px;
min-height:300px;
background:#fff;
}
.footer-wrapper {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHKahtwIXE5cDDkiTQcPSQA3CN5HXUgLsNtbSm5NhhnhXsxT7s0cEK__ZKhHmfm-qn54xRbfujIVrGMFrpQEVYyGdk0opN6-NbD4cIRhCXqLcTCy0mH1SpyXvHh7kmGjX3BN9qP2cpbs/s1600/box-shadow.png) no-repeat top center;
}
.footer {
padding:20px 0px;
}
]]></b:skin>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.blog-pager{clear:both}.post{display:inline;float:left;width:220px!important;margin:6px}.post .item_image img{width:100%;min-width:200px;height:130px}.post .item_price{margin-top:20px;padding:10px 10px;font-size:18px;display:block;position:absolute;border-top:none!important;background:#f8f8f8;z-index:99;border-radius:0 3px 0 0}.post a.post-judul{display:none;position:absolute;z-index:20;padding:5px;width:189px;height:120px;margin-top:-182px;text-align:left!important;text-decoration:none;text-transform:uppercase;color:#fafafa;background:rgba(0,0,0,0.8)}.post:hover a.post-judul{display:block;-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn}.post .item-bottom{padding:20px 10px 15px 10px;margin-bottom:0!important;background:#f8f8f8;text-align:right;border:1px solid #fff;box-shadow:0 0 1px #dedede;-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}.post .item_Description,.post h3,.post-header,.post-footer{display:none;margin:0}.post-body{width:auto!important}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.post-body{width:100%;}
</style>
</b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<style>
@charset "UTF-8";body{-webkit-backface-visibility:hidden}.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@-moz-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@-o-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;-moz-animation-name:flash;-o-animation-name:flash;animation-name:flash}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px)}}@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0)}10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}20%,40%,60%,80%{-moz-transform:translateX(10px)}}@-o-keyframes shake{0%,100%{-o-transform:translateX(0)}10%,30%,50%,70%,90%{-o-transform:translateX(-10px)}20%,40%,60%,80%{-o-transform:translateX(10px)}}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}.shake{-webkit-animation-name:shake;-moz-animation-name:shake;-o-animation-name:shake;animation-name:shake}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}40%{-webkit-transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px)}}@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0)}40%{-moz-transform:translateY(-30px)}60%{-moz-transform:translateY(-15px)}}@-o-keyframes bounce{0%,20%,50%,80%,100%{-o-transform:translateY(0)}40%{-o-transform:translateY(-30px)}60%{-o-transform:translateY(-15px)}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-o-animation-name:bounce;animation-name:bounce}@-webkit-keyframes tada{0%{-webkit-transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0)}}@-moz-keyframes tada{0%{-moz-transform:scale(1)}10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}100%{-moz-transform:scale(1) rotate(0)}}@-o-keyframes tada{0%{-o-transform:scale(1)}10%,20%{-o-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-o-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg)}100%{-o-transform:scale(1) rotate(0)}}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}.tada{-webkit-animation-name:tada;-moz-animation-name:tada;-o-animation-name:tada;animation-name:tada}@-webkit-keyframes swing{20%,40%,60%,80%,100%{-webkit-transform-origin:top center}20%{-webkit-transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg)}}@-moz-keyframes swing{20%{-moz-transform:rotate(15deg)}40%{-moz-transform:rotate(-10deg)}60%{-moz-transform:rotate(5deg)}80%{-moz-transform:rotate(-5deg)}100%{-moz-transform:rotate(0deg)}}@-o-keyframes swing{20%{-o-transform:rotate(15deg)}40%{-o-transform:rotate(-10deg)}60%{-o-transform:rotate(5deg)}80%{-o-transform:rotate(-5deg)}100%{-o-transform:rotate(0deg)}}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;-moz-animation-name:swing;-o-animation-name:swing;animation-name:swing}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%)}}@-moz-keyframes wobble{0%{-moz-transform:translateX(0%)}15%{-moz-transform:translateX(-25%) rotate(-5deg)}30%{-moz-transform:translateX(20%) rotate(3deg)}45%{-moz-transform:translateX(-15%) rotate(-3deg)}60%{-moz-transform:translateX(10%) rotate(2deg)}75%{-moz-transform:translateX(-5%) rotate(-1deg)}100%{-moz-transform:translateX(0%)}}@-o-keyframes wobble{0%{-o-transform:translateX(0%)}15%{-o-transform:translateX(-25%) rotate(-5deg)}30%{-o-transform:translateX(20%) rotate(3deg)}45%{-o-transform:translateX(-15%) rotate(-3deg)}60%{-o-transform:translateX(10%) rotate(2deg)}75%{-o-transform:translateX(-5%) rotate(-1deg)}100%{-o-transform:translateX(0%)}}@keyframes wobble{0%{transform:translateX(0%)}15%{transform:translateX(-25%) rotate(-5deg)}30%{transform:translateX(20%) rotate(3deg)}45%{transform:translateX(-15%) rotate(-3deg)}60%{transform:translateX(10%) rotate(2deg)}75%{transform:translateX(-5%) rotate(-1deg)}100%{transform:translateX(0%)}}.wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-o-animation-name:wobble;animation-name:wobble}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1)}}@-moz-keyframes pulse{0%{-moz-transform:scale(1)}50%{-moz-transform:scale(1.1)}100%{-moz-transform:scale(1)}}@-o-keyframes pulse{0%{-o-transform:scale(1)}50%{-o-transform:scale(1.1)}100%{-o-transform:scale(1)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.pulse{-webkit-animation-name:pulse;-moz-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in}}@-moz-keyframes flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out}40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out}50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in}80%{-moz-transform:perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function:ease-in}100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in}}@-o-keyframes flip{0%{-o-transform:perspective(400px) rotateY(0);-o-animation-timing-function:ease-out}40%{-o-transform:perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function:ease-out}50%{-o-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function:ease-in}80%{-o-transform:perspective(400px) rotateY(360deg) scale(.95);-o-animation-timing-function:ease-in}100%{-o-transform:perspective(400px) scale(1);-o-animation-timing-function:ease-in}}@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}80%{transform:perspective(400px) rotateY(360deg) scale(.95);animation-timing-function:ease-in}100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}}.flip{-webkit-backface-visibility:visible!important;-webkit-animation-name:flip;-moz-backface-visibility:visible!important;-moz-animation-name:flip;-o-backface-visibility:visible!important;-o-animation-name:flip;backface-visibility:visible!important;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1}}@-moz-keyframes flipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-moz-transform:perspective(400px) rotateX(-10deg)}70%{-moz-transform:perspective(400px) rotateX(10deg)}100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1}}@-o-keyframes flipInX{0%{-o-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-o-transform:perspective(400px) rotateX(-10deg)}70%{-o-transform:perspective(400px) rotateX(10deg)}100%{-o-transform:perspective(400px) rotateX(0deg);opacity:1}}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0}40%{transform:perspective(400px) rotateX(-10deg)}70%{transform:perspective(400px) rotateX(10deg)}100%{transform:perspective(400px) rotateX(0deg);opacity:1}}.flipInX{-webkit-backface-visibility:visible!important;-webkit-animation-name:flipInX;-moz-backface-visibility:visible!important;-moz-animation-name:flipInX;-o-backface-visibility:visible!important;-o-animation-name:flipInX;backface-visibility:visible!important;animation-name:flipInX}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}}@-moz-keyframes flipOutX{0%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1}100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}}@-o-keyframes flipOutX{0%{-o-transform:perspective(400px) rotateX(0deg);opacity:1}100%{-o-transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1}100%{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible!important;-moz-animation-name:flipOutX;-moz-backface-visibility:visible!important;-o-animation-name:flipOutX;-o-backface-visibility:visible!important;animation-name:flipOutX;backface-visibility:visible!important}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1}}@-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-moz-transform:perspective(400px) rotateY(-10deg)}70%{-moz-transform:perspective(400px) rotateY(10deg)}100%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1}}@-o-keyframes flipInY{0%{-o-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-o-transform:perspective(400px) rotateY(-10deg)}70%{-o-transform:perspective(400px) rotateY(10deg)}100%{-o-transform:perspective(400px) rotateY(0deg);opacity:1}}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-10deg)}70%{transform:perspective(400px) rotateY(10deg)}100%{transform:perspective(400px) rotateY(0deg);opacity:1}}.flipInY{-webkit-backface-visibility:visible!important;-webkit-animation-name:flipInY;-moz-backface-visibility:visible!important;-moz-animation-name:flipInY;-o-backface-visibility:visible!important;-o-animation-name:flipInY;backface-visibility:visible!important;animation-name:flipInY}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}}@-moz-keyframes flipOutY{0%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1}100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}}@-o-keyframes flipOutY{0%{-o-transform:perspective(400px) rotateY(0deg);opacity:1}100%{-o-transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{transform:perspective(400px) rotateY(0deg);opacity:1}100%{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-webkit-animation-name:flipOutY;-moz-backface-visibility:visible!important;-moz-animation-name:flipOutY;-o-backface-visibility:visible!important;-o-animation-name:flipOutY;backface-visibility:visible!important;animation-name:flipOutY}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInUpBig{0%{opacity:0;-moz-transform:translateY(2000px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInUpBig{0%{opacity:0;-o-transform:translateY(2000px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px)}100%{opacity:1;transform:translateY(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;-moz-animation-name:fadeInUpBig;-o-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDownBig{0%{opacity:0;-moz-transform:translateY(-2000px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInDownBig{0%{opacity:0;-o-transform:translateY(-2000px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px)}100%{opacity:1;transform:translateY(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;-moz-animation-name:fadeInDownBig;-o-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInLeftBig{0%{opacity:0;-moz-transform:translateX(-2000px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInLeftBig{0%{opacity:0;-o-transform:translateX(-2000px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInLeftBig{0%{opacity:0;transform:translateX(-2000px)}100%{opacity:1;transform:translateX(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;-moz-animation-name:fadeInLeftBig;-o-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRightBig{0%{opacity:0;-moz-transform:translateX(2000px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInRightBig{0%{opacity:0;-o-transform:translateX(2000px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInRightBig{0%{opacity:0;transform:translateX(2000px)}100%{opacity:1;transform:translateX(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;-moz-animation-name:fadeInRightBig;-o-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-o-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-o-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px)}}@-moz-keyframes fadeOutUp{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(-20px)}}@-o-keyframes fadeOutUp{0%{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(-20px)}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;-moz-animation-name:fadeOutUp;-o-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px)}}@-moz-keyframes fadeOutDown{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(20px)}}@-o-keyframes fadeOutDown{0%{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(20px)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;-moz-animation-name:fadeOutDown;-o-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px)}}@-moz-keyframes fadeOutLeft{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(-20px)}}@-o-keyframes fadeOutLeft{0%{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-20px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;-moz-animation-name:fadeOutLeft;-o-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px)}}@-moz-keyframes fadeOutRight{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(20px)}}@-o-keyframes fadeOutRight{0%{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(20px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;-moz-animation-name:fadeOutRight;-o-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px)}}@-moz-keyframes fadeOutUpBig{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(-2000px)}}@-o-keyframes fadeOutUpBig{0%{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(-2000px)}}@keyframes fadeOutUpBig{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-2000px)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;-moz-animation-name:fadeOutUpBig;-o-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px)}}@-moz-keyframes fadeOutDownBig{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(2000px)}}@-o-keyframes fadeOutDownBig{0%{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(2000px)}}@keyframes fadeOutDownBig{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(2000px)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;-moz-animation-name:fadeOutDownBig;-o-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px)}}@-moz-keyframes fadeOutLeftBig{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(-2000px)}}@-o-keyframes fadeOutLeftBig{0%{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(-2000px)}}@keyframes fadeOutLeftBig{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-2000px)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;-moz-animation-name:fadeOutLeftBig;-o-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px)}}@-moz-keyframes fadeOutRightBig{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(2000px)}}@-o-keyframes fadeOutRightBig{0%{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(2000px)}}@keyframes fadeOutRightBig{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(2000px)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;-moz-animation-name:fadeOutRightBig;-o-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(.9)}100%{-webkit-transform:scale(1)}}@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3)}50%{opacity:1;-moz-transform:scale(1.05)}70%{-moz-transform:scale(.9)}100%{-moz-transform:scale(1)}}@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3)}50%{opacity:1;-o-transform:scale(1.05)}70%{-o-transform:scale(.9)}100%{-o-transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px)}80%{-webkit-transform:translateY(10px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes bounceInUp{0%{opacity:0;-moz-transform:translateY(2000px)}60%{opacity:1;-moz-transform:translateY(-30px)}80%{-moz-transform:translateY(10px)}100%{-moz-transform:translateY(0)}}@-o-keyframes bounceInUp{0%{opacity:0;-o-transform:translateY(2000px)}60%{opacity:1;-o-transform:translateY(-30px)}80%{-o-transform:translateY(10px)}100%{-o-transform:translateY(0)}}@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px)}60%{opacity:1;transform:translateY(-30px)}80%{transform:translateY(10px)}100%{transform:translateY(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;-moz-animation-name:bounceInUp;-o-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px)}80%{-webkit-transform:translateY(-10px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-2000px)}60%{opacity:1;-moz-transform:translateY(30px)}80%{-moz-transform:translateY(-10px)}100%{-moz-transform:translateY(0)}}@-o-keyframes bounceInDown{0%{opacity:0;-o-transform:translateY(-2000px)}60%{opacity:1;-o-transform:translateY(30px)}80%{-o-transform:translateY(-10px)}100%{-o-transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px)}60%{opacity:1;transform:translateY(30px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px)}80%{-webkit-transform:translateX(-10px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes bounceInLeft{0%{opacity:0;-moz-transform:translateX(-2000px)}60%{opacity:1;-moz-transform:translateX(30px)}80%{-moz-transform:translateX(-10px)}100%{-moz-transform:translateX(0)}}@-o-keyframes bounceInLeft{0%{opacity:0;-o-transform:translateX(-2000px)}60%{opacity:1;-o-transform:translateX(30px)}80%{-o-transform:translateX(-10px)}100%{-o-transform:translateX(0)}}@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px)}60%{opacity:1;transform:translateX(30px)}80%{transform:translateX(-10px)}100%{transform:translateX(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-o-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px)}80%{-webkit-transform:translateX(10px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes bounceInRight{0%{opacity:0;-moz-transform:translateX(2000px)}60%{opacity:1;-moz-transform:translateX(-30px)}80%{-moz-transform:translateX(10px)}100%{-moz-transform:translateX(0)}}@-o-keyframes bounceInRight{0%{opacity:0;-o-transform:translateX(2000px)}60%{opacity:1;-o-transform:translateX(-30px)}80%{-o-transform:translateX(10px)}100%{-o-transform:translateX(0)}}@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px)}60%{opacity:1;transform:translateX(-30px)}80%{transform:translateX(10px)}100%{transform:translateX(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;-moz-animation-name:bounceInRight;-o-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1)}25%{-webkit-transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3)}}@-moz-keyframes bounceOut{0%{-moz-transform:scale(1)}25%{-moz-transform:scale(.95)}50%{opacity:1;-moz-transform:scale(1.1)}100%{opacity:0;-moz-transform:scale(.3)}}@-o-keyframes bounceOut{0%{-o-transform:scale(1)}25%{-o-transform:scale(.95)}50%{opacity:1;-o-transform:scale(1.1)}100%{opacity:0;-o-transform:scale(.3)}}@keyframes bounceOut{0%{transform:scale(1)}25%{transform:scale(.95)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.3)}}.bounceOut{-webkit-animation-name:bounceOut;-moz-animation-name:bounceOut;-o-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px)}}@-moz-keyframes bounceOutUp{0%{-moz-transform:translateY(0)}20%{opacity:1;-moz-transform:translateY(20px)}100%{opacity:0;-moz-transform:translateY(-2000px)}}@-o-keyframes bounceOutUp{0%{-o-transform:translateY(0)}20%{opacity:1;-o-transform:translateY(20px)}100%{opacity:0;-o-transform:translateY(-2000px)}}@keyframes bounceOutUp{0%{transform:translateY(0)}20%{opacity:1;transform:translateY(20px)}100%{opacity:0;transform:translateY(-2000px)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;-moz-animation-name:bounceOutUp;-o-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px)}}@-moz-keyframes bounceOutDown{0%{-moz-transform:translateY(0)}20%{opacity:1;-moz-transform:translateY(-20px)}100%{opacity:0;-moz-transform:translateY(2000px)}}@-o-keyframes bounceOutDown{0%{-o-transform:translateY(0)}20%{opacity:1;-o-transform:translateY(-20px)}100%{opacity:0;-o-transform:translateY(2000px)}}@keyframes bounceOutDown{0%{transform:translateY(0)}20%{opacity:1;transform:translateY(-20px)}100%{opacity:0;transform:translateY(2000px)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;-moz-animation-name:bounceOutDown;-o-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px)}}@-moz-keyframes bounceOutLeft{0%{-moz-transform:translateX(0)}20%{opacity:1;-moz-transform:translateX(20px)}100%{opacity:0;-moz-transform:translateX(-2000px)}}@-o-keyframes bounceOutLeft{0%{-o-transform:translateX(0)}20%{opacity:1;-o-transform:translateX(20px)}100%{opacity:0;-o-transform:translateX(-2000px)}}@keyframes bounceOutLeft{0%{transform:translateX(0)}20%{opacity:1;transform:translateX(20px)}100%{opacity:0;transform:translateX(-2000px)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;-moz-animation-name:bounceOutLeft;-o-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px)}}@-moz-keyframes bounceOutRight{0%{-moz-transform:translateX(0)}20%{opacity:1;-moz-transform:translateX(-20px)}100%{opacity:0;-moz-transform:translateX(2000px)}}@-o-keyframes bounceOutRight{0%{-o-transform:translateX(0)}20%{opacity:1;-o-transform:translateX(-20px)}100%{opacity:0;-o-transform:translateX(2000px)}}@keyframes bounceOutRight{0%{transform:translateX(0)}20%{opacity:1;transform:translateX(-20px)}100%{opacity:0;transform:translateX(2000px)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;-moz-animation-name:bounceOutRight;-o-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateIn{0%{-moz-transform-origin:center center;-moz-transform:rotate(-200deg);opacity:0}100%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateIn{0%{-o-transform-origin:center center;-o-transform:rotate(-200deg);opacity:0}100%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1}}@keyframes rotateIn{0%{transform-origin:center center;transform:rotate(-200deg);opacity:0}100%{transform-origin:center center;transform:rotate(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;-moz-animation-name:rotateIn;-o-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0}100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;-moz-animation-name:rotateInUpLeft;-o-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0}100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;-moz-animation-name:rotateInDownLeft;-o-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0}100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;-moz-animation-name:rotateInUpRight;-o-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0}100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;-moz-animation-name:rotateInDownRight;-o-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0}}@-moz-keyframes rotateOut{0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0}}@-o-keyframes rotateOut{0%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:center center;-o-transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center center;transform:rotate(0);opacity:1}100%{transform-origin:center center;transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;-moz-animation-name:rotateOut;-o-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}}@-moz-keyframes rotateOutUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}}@-o-keyframes rotateOutUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;-moz-animation-name:rotateOutUpLeft;-o-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}}@-moz-keyframes rotateOutDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}}@-o-keyframes rotateOutDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;-moz-animation-name:rotateOutDownLeft;-o-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}}@-moz-keyframes rotateOutUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}}@-o-keyframes rotateOutUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;-moz-animation-name:rotateOutUpRight;-o-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}}@-moz-keyframes rotateOutDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}}@-o-keyframes rotateOutDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;-moz-animation-name:rotateOutDownRight;-o-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}100%{-webkit-transform:translateY(700px);opacity:0}}@-moz-keyframes hinge{0%{-moz-transform:rotate(0);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}20%,60%{-moz-transform:rotate(80deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}40%{-moz-transform:rotate(60deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}80%{-moz-transform:rotate(60deg) translateY(0);opacity:1;-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}100%{-moz-transform:translateY(700px);opacity:0}}@-o-keyframes hinge{0%{-o-transform:rotate(0);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}20%,60%{-o-transform:rotate(80deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}40%{-o-transform:rotate(60deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}80%{-o-transform:rotate(60deg) translateY(0);opacity:1;-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}100%{-o-transform:translateY(700px);opacity:0}}@keyframes hinge{0%{transform:rotate(0);transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out}80%{transform:rotate(60deg) translateY(0);opacity:1;transform-origin:top left;animation-timing-function:ease-in-out}100%{transform:translateY(700px);opacity:0}}.hinge{-webkit-animation-name:hinge;-moz-animation-name:hinge;-o-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg)}}@-moz-keyframes rollIn{0%{opacity:0;-moz-transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-moz-transform:translateX(0px) rotate(0deg)}}@-o-keyframes rollIn{0%{opacity:0;-o-transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-o-transform:translateX(0px) rotate(0deg)}}@keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;transform:translateX(0px) rotate(0deg)}}.rollIn{-webkit-animation-name:rollIn;-moz-animation-name:rollIn;-o-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg)}}@-moz-keyframes rollOut{0%{opacity:1;-moz-transform:translateX(0px) rotate(0deg)}100%{opacity:0;-moz-transform:translateX(100%) rotate(120deg)}}@-o-keyframes rollOut{0%{opacity:1;-o-transform:translateX(0px) rotate(0deg)}100%{opacity:0;-o-transform:translateX(100%) rotate(120deg)}}@keyframes rollOut{0%{opacity:1;transform:translateX(0px) rotate(0deg)}100%{opacity:0;transform:translateX(100%) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;-moz-animation-name:rollOut;-o-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1}}@-moz-keyframes lightSpeedIn{0%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0}60%{-moz-transform:translateX(-20%) skewX(30deg);opacity:1}80%{-moz-transform:translateX(0%) skewX(-15deg);opacity:1}100%{-moz-transform:translateX(0%) skewX(0deg);opacity:1}}@-o-keyframes lightSpeedIn{0%{-o-transform:translateX(100%) skewX(-30deg);opacity:0}60%{-o-transform:translateX(-20%) skewX(30deg);opacity:1}80%{-o-transform:translateX(0%) skewX(-15deg);opacity:1}100%{-o-transform:translateX(0%) skewX(0deg);opacity:1}}@keyframes lightSpeedIn{0%{transform:translateX(100%) skewX(-30deg);opacity:0}60%{transform:translateX(-20%) skewX(30deg);opacity:1}80%{transform:translateX(0%) skewX(-15deg);opacity:1}100%{transform:translateX(0%) skewX(0deg);opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-moz-animation-name:lightSpeedIn;-o-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;-moz-animation-timing-function:ease-out;-o-animation-timing-function:ease-out;animation-timing-function:ease-out}.animated.lightSpeedIn{-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0}}@-moz-keyframes lightSpeedOut{0%{-moz-transform:translateX(0%) skewX(0deg);opacity:1}100%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0}}@-o-keyframes lightSpeedOut{0%{-o-transform:translateX(0%) skewX(0deg);opacity:1}100%{-o-transform:translateX(100%) skewX(-30deg);opacity:0}}@keyframes lightSpeedOut{0%{transform:translateX(0%) skewX(0deg);opacity:1}100%{transform:translateX(100%) skewX(-30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-moz-animation-name:lightSpeedOut;-o-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in}.animated.lightSpeedOut{-webkit-animation-duration:.25s;-moz-animation-duration:.25s;-o-animation-duration:.25s;animation-duration:.25s}@-webkit-keyframes wiggle{0%{-webkit-transform:skewX(9deg)}10%{-webkit-transform:skewX(-8deg)}20%{-webkit-transform:skewX(7deg)}30%{-webkit-transform:skewX(-6deg)}40%{-webkit-transform:skewX(5deg)}50%{-webkit-transform:skewX(-4deg)}60%{-webkit-transform:skewX(3deg)}70%{-webkit-transform:skewX(-2deg)}80%{-webkit-transform:skewX(1deg)}90%{-webkit-transform:skewX(0deg)}100%{-webkit-transform:skewX(0deg)}}@-moz-keyframes wiggle{0%{-moz-transform:skewX(9deg)}10%{-moz-transform:skewX(-8deg)}20%{-moz-transform:skewX(7deg)}30%{-moz-transform:skewX(-6deg)}40%{-moz-transform:skewX(5deg)}50%{-moz-transform:skewX(-4deg)}60%{-moz-transform:skewX(3deg)}70%{-moz-transform:skewX(-2deg)}80%{-moz-transform:skewX(1deg)}90%{-moz-transform:skewX(0deg)}100%{-moz-transform:skewX(0deg)}}@-o-keyframes wiggle{0%{-o-transform:skewX(9deg)}10%{-o-transform:skewX(-8deg)}20%{-o-transform:skewX(7deg)}30%{-o-transform:skewX(-6deg)}40%{-o-transform:skewX(5deg)}50%{-o-transform:skewX(-4deg)}60%{-o-transform:skewX(3deg)}70%{-o-transform:skewX(-2deg)}80%{-o-transform:skewX(1deg)}90%{-o-transform:skewX(0deg)}100%{-o-transform:skewX(0deg)}}@keyframes wiggle{0%{transform:skewX(9deg)}10%{transform:skewX(-8deg)}20%{transform:skewX(7deg)}30%{transform:skewX(-6deg)}40%{transform:skewX(5deg)}50%{transform:skewX(-4deg)}60%{transform:skewX(3deg)}70%{transform:skewX(-2deg)}80%{transform:skewX(1deg)}90%{transform:skewX(0deg)}100%{transform:skewX(0deg)}}.wiggle{-webkit-animation-name:wiggle;-moz-animation-name:wiggle;-o-animation-name:wiggle;animation-name:wiggle;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in}.animated.wiggle{-webkit-animation-duration:.75s;-moz-animation-duration:.75s;-o-animation-duration:.75s;animation-duration:.75s}
</style>
<script>
jQuery(document).ready(function($){
$(".cartInfo").click(function(){
$(".cartBox").slideToggle("fast");
$(this).toggleClass("cartOn"); return false;
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*----------------------------
SIMPLE CART SETTING
-----------------------------*/
simpleCart({
checkout: {
type: "PayPal",
email: "yours-store@yours.com"
}
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
Copyright (c) 2012 Brett Wejrowski
wojodesign.com
simplecartjs.org
http://github.com/wojodesign/simplecart-js
VERSION 3.0.5
Dual licensed under the MIT or GPL licenses.
~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~*/
/*jslint browser: true, unparam: true, white: true, nomen: true, regexp: true, maxerr: 50, indent: 4 */
(function (window, document) {
/*global HTMLElement */
var typeof_string = typeof "",
typeof_undefined = typeof undefined,
typeof_function = typeof function () {},
typeof_object = typeof {},
isTypeOf = function (item, type) { return typeof item === type; },
isString = function (item) { return isTypeOf(item, typeof_string); },
isUndefined = function (item) { return isTypeOf(item, typeof_undefined); },
isFunction = function (item) { return isTypeOf(item, typeof_function); },
isObject = function (item) { return isTypeOf(item, typeof_object); },
//Returns true if it is a DOM element
isElement = function (o) {
return typeof HTMLElement === "object" ? o instanceof HTMLElement : typeof o === "object" && o.nodeType === 1 && typeof o.nodeName === "string";
},
generateSimpleCart = function (space) {
// stealing this from selectivizr
var selectorEngines = {
"MooTools" : "$$",
"Prototype" : "$$",
"jQuery" : "*"
},
// local variables for internal use
item_id = 0,
item_id_namespace = "SCI-",
sc_items = {},
namespace = space || "simpleCart",
selectorFunctions = {},
eventFunctions = {},
baseEvents = {},
// local references
localStorage = window.localStorage,
console = window.console || { msgs: [], log: function (msg) { console.msgs.push(msg); } },
// used in views
_VALUE_ = 'value',
_TEXT_ = 'text',
_HTML_ = 'html',
_CLICK_ = 'click',
// Currencies
currencies = {
"USD": { code: "USD", symbol: "$", name: "US Dollar" },
"AUD": { code: "AUD", symbol: "$", name: "Australian Dollar" },
"BRL": { code: "BRL", symbol: "R$", name: "Brazilian Real" },
"CAD": { code: "CAD", symbol: "$", name: "Canadian Dollar" },
"CZK": { code: "CZK", symbol: " Kč", name: "Czech Koruna", after: true },
"DKK": { code: "DKK", symbol: "DKK ", name: "Danish Krone" },
"EUR": { code: "EUR", symbol: "€", name: "Euro" },
"HKD": { code: "HKD", symbol: "$", name: "Hong Kong Dollar" },
"HUF": { code: "HUF", symbol: "Ft", name: "Hungarian Forint" },
"ILS": { code: "ILS", symbol: "₪", name: "Israeli New Sheqel" },
"JPY": { code: "JPY", symbol: "¥", name: "Japanese Yen" },
"MXN": { code: "MXN", symbol: "$", name: "Mexican Peso" },
"NOK": { code: "NOK", symbol: "NOK ", name: "Norwegian Krone" },
"NZD": { code: "NZD", symbol: "$", name: "New Zealand Dollar" },
"PLN": { code: "PLN", symbol: "PLN ", name: "Polish Zloty" },
"GBP": { code: "GBP", symbol: "£", name: "Pound Sterling" },
"SGD": { code: "SGD", symbol: "$", name: "Singapore Dollar" },
"SEK": { code: "SEK", symbol: "SEK ", name: "Swedish Krona" },
"CHF": { code: "CHF", symbol: "CHF ", name: "Swiss Franc" },
"THB": { code: "THB", symbol: "฿", name: "Thai Baht" },
"BTC": { code: "BTC", symbol: " BTC", name: "Bitcoin", accuracy: 4, after: true }
},
// default options
settings = {
checkout : { type: "PayPal", email: "you@yours.com" },
currency : "USD",
language : "english-us",
cartStyle : "table",
cartColumns : [
{ attr: "name", label: "Name" },
{ attr: "price", label: "Price", view: 'currency' },
{ view: "decrement", label: false },
{ attr: "quantity", label: "Qty" },
{ view: "increment", label: false },
{ attr: "total", label: "SubTotal", view: 'currency' },
{ view: "remove", text: "Remove", label: false }
],
excludeFromCheckout : ['thumb'],
shippingFlatRate : 0,
shippingQuantityRate : 0,
shippingTotalRate : 0,
shippingCustom : null,
taxRate : 0,
taxShipping : false,
data : {}
},
// main simpleCart object, function call is used for setting options
simpleCart = function (options) {
// shortcut for simpleCart.ready
if (isFunction(options)) {
return simpleCart.ready(options);
}
// set options
if (isObject(options)) {
return simpleCart.extend(settings, options);
}
},
// selector engine
$engine,
// built in cart views for item cells
cartColumnViews;
// function for extending objects
simpleCart.extend = function (target, opts) {
var next;
if (isUndefined(opts)) {
opts = target;
target = simpleCart;
}
for (next in opts) {
if (Object.prototype.hasOwnProperty.call(opts, next)) {
target[next] = opts[next];
}
}
return target;
};
// create copy function
simpleCart.extend({
copy: function (n) {
var cp = generateSimpleCart(n);
cp.init();
return cp;
}
});
// add in the core functionality
simpleCart.extend({
isReady: false,
// this is where the magic happens, the add function
add: function (values, opt_quiet) {
var info = values || {},
newItem = new simpleCart.Item(info),
addItem = true,
// optionally supress event triggers
quiet = opt_quiet === true ? opt_quiet : false,
oldItem;
// trigger before add event
if (!quiet) {
addItem = simpleCart.trigger('beforeAdd', [newItem]);
if (addItem === false) {
return false;
}
}
// if the new item already exists, increment the value
oldItem = simpleCart.has(newItem);
if (oldItem) {
oldItem.increment(newItem.quantity());
newItem = oldItem;
// otherwise add the item
} else {
sc_items[newItem.id()] = newItem;
}
// update the cart
simpleCart.update();
if (!quiet) {
// trigger after add event
simpleCart.trigger('afterAdd', [newItem, isUndefined(oldItem)]);
}
// return a reference to the added item
return newItem;
},
// iteration function
each: function (array, callback) {
var next,
x = 0,
result,
cb,
items;
if (isFunction(array)) {
cb = array;
items = sc_items;
} else if (isFunction(callback)) {
cb = callback;
items = array;
} else {
return;
}
for (next in items) {
if (Object.prototype.hasOwnProperty.call(items, next)) {
result = cb.call(simpleCart, items[next], x, next);
if (result === false) {
return;
}
x += 1;
}
}
},
find: function (id) {
var items = [];
// return object for id if it exists
if (isObject(sc_items[id])) {
return sc_items[id];
}
// search through items with the given criteria
if (isObject(id)) {
simpleCart.each(function (item) {
var match = true;
simpleCart.each(id, function (val, x, attr) {
if (isString(val)) {
// less than or equal to
if (val.match(/<=.*/)) { val=parseFloat(val.replace('<=', '')); if (!(item.get(attr) && parseFloat(item.get(attr)) <=val)) { match=false; } // less than } else if (val.match(/</)) { val=parseFloat(val.replace('<', '')); if (!(item.get(attr) && parseFloat(item.get(attr)) < val)) { match=false; } // greater than or equal to } else if (val.match(/>=/)) {
val = parseFloat(val.replace('>=', ''));
if (!(item.get(attr) && parseFloat(item.get(attr)) >= val)) {
match = false;
}
// greater than
} else if (val.match(/>/)) {
val = parseFloat(val.replace('>', ''));
if (!(item.get(attr) && parseFloat(item.get(attr)) > val)) {
match = false;
}
// equal to
} else if (!(item.get(attr) && item.get(attr) === val)) {
match = false;
}
// equal to non string
} else if (!(item.get(attr) && item.get(attr) === val)) {
match = false;
}
return match;
});
// add the item if it matches
if (match) {
items.push(item);
}
});
return items;
}
// if no criteria is given we return all items
if (isUndefined(id)) {
// use a new array so we don't give a reference to the
// cart's item array
simpleCart.each(function (item) {
items.push(item);
});
return items;
}
// return empty array as default
return items;
},
// return all items
items: function () {
return this.find();
},
// check to see if item is in the cart already
has: function (item) {
var match = false;
simpleCart.each(function (testItem) {
if (testItem.equals(item)) {
match = testItem;
}
});
return match;
},
// empty the cart
empty: function () {
// remove each item individually so we see the remove events
var newItems = {};
simpleCart.each(function (item) {
// send a param of true to make sure it doesn't
// update after every removal
// keep the item if the function returns false,
// because we know it has been prevented
// from being removed
if (item.remove(true) === false) {
newItems[item.id()] = item
}
});
sc_items = newItems;
simpleCart.update();
},
// functions for accessing cart info
quantity: function () {
var quantity = 0;
simpleCart.each(function (item) {
quantity += item.quantity();
});
return quantity;
},
total: function () {
var total = 0;
simpleCart.each(function (item) {
total += item.total();
});
return total;
},
grandTotal: function () {
return simpleCart.total() + simpleCart.tax() + simpleCart.shipping();
},
// updating functions
update: function () {
simpleCart.save();
simpleCart.trigger("update");
},
init: function () {
simpleCart.load();
simpleCart.update();
simpleCart.ready();
},
// view management
$: function (selector) {
return new simpleCart.ELEMENT(selector);
},
$create: function (tag) {
return simpleCart.$(document.createElement(tag));
},
setupViewTool: function () {
var members, member, context = window, engine;
// Determine the "best fit" selector engine
for (engine in selectorEngines) {
if (Object.prototype.hasOwnProperty.call(selectorEngines, engine) && window[engine]) {
members = selectorEngines[engine].replace("*", engine).split(".");
member = members.shift();
if (member) {
context = context[member];
}
if (typeof context === "function") {
// set the selector engine and extend the prototype of our
// element wrapper class
$engine = context;
simpleCart.extend(simpleCart.ELEMENT._, selectorFunctions[engine]);
return;
}
}
}
},
// return a list of id's in the cart
ids: function () {
var ids = [];
simpleCart.each(function (item) {
ids.push(item.id());
});
return ids;
},
// storage
save: function () {
simpleCart.trigger('beforeSave');
var items = {};
// save all the items
simpleCart.each(function (item) {
items[item.id()] = simpleCart.extend(item.fields(), item.options());
});
localStorage.setItem(namespace + "_items", JSON.stringify(items));
simpleCart.trigger('afterSave');
},
load: function () {
// empty without the update
sc_items = {};
var items = localStorage.getItem(namespace + "_items");
if (!items) {
return;
}
// we wrap this in a try statement so we can catch
// any json parsing errors. no more stick and we
// have a playing card pluckin the spokes now...
// soundin like a harley.
try {
simpleCart.each(JSON.parse(items), function (item) {
simpleCart.add(item, true);
});
} catch (e){
simpleCart.error( "Error Loading data: " + e );
}
simpleCart.trigger('load');
},
// ready function used as a shortcut for bind('ready',fn)
ready: function (fn) {
if (isFunction(fn)) {
// call function if already ready already
if (simpleCart.isReady) {
fn.call(simpleCart);
// bind if not ready
} else {
simpleCart.bind('ready', fn);
}
// trigger ready event
} else if (isUndefined(fn) && !simpleCart.isReady) {
simpleCart.trigger('ready');
simpleCart.isReady = true;
}
},
error: function (message) {
var msg = "";
if (isString(message)) {
msg = message;
} else if (isObject(message) && isString(message.message)) {
msg = message.message;
}
try { console.log("simpleCart(js) Error: " + msg); } catch (e) {}
simpleCart.trigger('error', message);
}
});
/*******************************************************************
* TAX AND SHIPPING
*******************************************************************/
simpleCart.extend({
// TODO: tax and shipping
tax: function () {
var totalToTax = settings.taxShipping ? simpleCart.total() + simpleCart.shipping() : simpleCart.total(),
cost = simpleCart.taxRate() * totalToTax;
simpleCart.each(function (item) {
if (item.get('tax')) {
cost += item.get('tax');
} else if (item.get('taxRate')) {
cost += item.get('taxRate') * item.total();
}
});
return parseFloat(cost);
},
taxRate: function () {
return settings.taxRate || 0;
},
shipping: function (opt_custom_function) {
// shortcut to extend options with custom shipping
if (isFunction(opt_custom_function)) {
simpleCart({
shippingCustom: opt_custom_function
});
return;
}
var cost = settings.shippingQuantityRate * simpleCart.quantity() +
settings.shippingTotalRate * simpleCart.total() +
settings.shippingFlatRate;
if (isFunction(settings.shippingCustom)) {
cost += settings.shippingCustom.call(simpleCart);
}
simpleCart.each(function (item) {
cost += parseFloat(item.get('shipping') || 0);
});
return parseFloat(cost);
}
});
/*******************************************************************
* CART VIEWS
*******************************************************************/
// built in cart views for item cells
cartColumnViews = {
attr: function (item, column) {
return item.get(column.attr) || "";
},
currency: function (item, column) {
return simpleCart.toCurrency(item.get(column.attr) || 0);
},
link: function (item, column) {
return "<a href='" + item.get(column.attr) + "'>" + column.text + "</a>";
},
decrement: function (item, column) {
return "<a href='javascript:' class='" + namespace + "_decrement'>" + (column.text || "-") + "</a>";
},
increment: function (item, column) {
return "<a href='javascript:' class='" + namespace + "_increment'>" + (column.text || "+") + "</a>";
},
image: function (item, column) {
return "<img src='" + item.get(column.attr) + "'/>";
},
input: function (item, column) {
return "<input type='text' value='" + item.get(column.attr) + "' class='" + namespace + "_input'/>";
},
remove: function (item, column) {
return "<a href='javascript:' class='" + namespace + "_remove'>" + (column.text || "X") + "</a>";
}
};
// cart column wrapper class and functions
function cartColumn(opts) {
var options = opts || {};
return simpleCart.extend({
attr : "",
label : "",
view : "attr",
text : "",
className : "",
hide : false
}, options);
}
function cartCellView(item, column) {
var viewFunc = isFunction(column.view) ? column.view : isString(column.view) && isFunction(cartColumnViews[column.view]) ? cartColumnViews[column.view] : cartColumnViews.attr;
return viewFunc.call(simpleCart, item, column);
}
simpleCart.extend({
// write out cart
writeCart: function (selector) {
var TABLE = settings.cartStyle.toLowerCase(),
isTable = TABLE === 'table',
TR = isTable ? "tr" : "div",
TH = isTable ? 'th' : 'div',
TD = isTable ? 'td' : 'div',
cart_container = simpleCart.$create(TABLE),
header_container = simpleCart.$create(TR).addClass('headerRow'),
container = simpleCart.$(selector),
column,
klass,
label,
x,
xlen;
container.html(' ').append(cart_container);
cart_container.append(header_container);
// create header
for (x = 0, xlen = settings.cartColumns.length; x < xlen; x += 1) {
column = cartColumn(settings.cartColumns[x]);
klass = "item-" + (column.attr || column.view || column.label || column.text || "cell") + " " + column.className;
label = column.label || "";
// append the header cell
header_container.append(
simpleCart.$create(TH).addClass(klass).html(label)
);
}
// cycle through the items
simpleCart.each(function (item, y) {
simpleCart.createCartRow(item, y, TR, TD, cart_container);
});
return cart_container;
},
// generate a cart row from an item
createCartRow: function (item, y, TR, TD, container) {
var row = simpleCart.$create(TR)
.addClass('itemRow row-' + y + " " + (y % 2 ? "even" : "odd"))
.attr('id', "cartItem_" + item.id()),
j,
jlen,
column,
klass,
content,
cell;
container.append(row);
// cycle through the columns to create each cell for the item
for (j = 0, jlen = settings.cartColumns.length; j < jlen; j += 1) {
column = cartColumn(settings.cartColumns[j]);
klass = "item-" + (column.attr || (isString(column.view) ? column.view : column.label || column.text || "cell")) + " " + column.className;
content = cartCellView(item, column);
cell = simpleCart.$create(TD).addClass(klass).html(content);
row.append(cell);
}
return row;
}
});
/*******************************************************************
* CART ITEM CLASS MANAGEMENT
*******************************************************************/
simpleCart.Item = function (info) {
// we use the data object to track values for the item
var _data = {},
me = this;
// cycle through given attributes and set them to the data object
if (isObject(info)) {
simpleCart.extend(_data, info);
}
// set the item id
item_id += 1;
_data.id = _data.id || item_id_namespace + item_id;
while (!isUndefined(sc_items[_data.id])) {
item_id += 1;
_data.id = item_id_namespace + item_id;
}
function checkQuantityAndPrice() {
// check to make sure price is valid
if (isString(_data.price)) {
// trying to remove all chars that aren't numbers or '.'
_data.price = parseFloat(_data.price.replace(simpleCart.currency().decimal, ".").replace(/[^0-9\.]+/ig, ""));
}
if (isNaN(_data.price)) {
_data.price = 0;
}
if (_data.price < 0) {
_data.price = 0;
}
// check to make sure quantity is valid
if (isString(_data.quantity)) {
_data.quantity = parseInt(_data.quantity.replace(simpleCart.currency().delimiter, ""), 10);
}
if (isNaN(_data.quantity)) {
_data.quantity = 1;
}
if (_data.quantity <= 0) {
me.remove();
}
}
// getter and setter methods to access private variables
me.get = function (name, skipPrototypes) {
var usePrototypes = !skipPrototypes;
if (isUndefined(name)) {
return name;
}
// return the value in order of the data object and then the prototype
return isFunction(_data[name]) ? _data[name].call(me) :
!isUndefined(_data[name]) ? _data[name] :
isFunction(me[name]) && usePrototypes ? me[name].call(me) :
!isUndefined(me[name]) && usePrototypes ? me[name] :
_data[name];
};
me.set = function (name, value) {
if (!isUndefined(name)) {
_data[name.toLowerCase()] = value;
if (name.toLowerCase() === 'price' || name.toLowerCase() === 'quantity') {
checkQuantityAndPrice();
}
}
return me;
};
me.equals = function (item) {
for( var label in _data ){
if (Object.prototype.hasOwnProperty.call(_data, label)) {
if (label !== 'quantity' && label !== 'id') {
if (item.get(label) !== _data[label]) {
return false;
}
}
}
}
return true;
};
me.options = function () {
var data = {};
simpleCart.each(_data,function (val, x, label) {
var add = true;
simpleCart.each(me.reservedFields(), function (field) {
if (field === label) {
add = false;
}
return add;
});
if (add) {
data[label] = me.get(label);
}
});
return data;
};
checkQuantityAndPrice();
};
simpleCart.Item._ = simpleCart.Item.prototype = {
// editing the item quantity
increment: function (amount) {
var diff = amount || 1;
diff = parseInt(diff, 10);
this.quantity(this.quantity() + diff);
if (this.quantity() < 1) {
this.remove();
return null;
}
return this;
},
decrement: function (amount) {
var diff = amount || 1;
return this.increment(-parseInt(diff, 10));
},
remove: function (skipUpdate) {
var removeItemBool = simpleCart.trigger("beforeRemove", [sc_items[this.id()]]);
if (removeItemBool === false ) {
return false;
}
delete sc_items[this.id()];
if (!skipUpdate) {
simpleCart.update();
}
return null;
},
// special fields for items
reservedFields: function () {
return ['quantity', 'id', 'item_number', 'price', 'name', 'shipping', 'tax', 'taxRate'];
},
// return values for all reserved fields if they exist
fields: function () {
var data = {},
me = this;
simpleCart.each(me.reservedFields(), function (field) {
if (me.get(field)) {
data[field] = me.get(field);
}
});
return data;
},
// shortcuts for getter/setters. can
// be overwritten for customization
// btw, we are hiring at wojo design, and could
// use a great web designer. if thats you, you can
// get more info at http://wojodesign.com/now-hiring/
// or email me directly: brett@wojodesign.com
quantity: function (val) {
return isUndefined(val) ? parseInt(this.get("quantity", true) || 1, 10) : this.set("quantity", val);
},
price: function (val) {
return isUndefined(val) ?
parseFloat((this.get("price",true).toString()).replace(simpleCart.currency().symbol,"").replace(simpleCart.currency().delimiter,"") || 1) :
this.set("price", parseFloat((val).toString().replace(simpleCart.currency().symbol,"").replace(simpleCart.currency().delimiter,"")));
},
id: function () {
return this.get('id',false);
},
total:function () {
return this.quantity()*this.price();
}
};
/*******************************************************************
* CHECKOUT MANAGEMENT
*******************************************************************/
simpleCart.extend({
checkout: function () {
if (settings.checkout.type.toLowerCase() === 'custom' && isFunction(settings.checkout.fn)) {
settings.checkout.fn.call(simpleCart,settings.checkout);
} else if (isFunction(simpleCart.checkout[settings.checkout.type])) {
var checkoutData = simpleCart.checkout[settings.checkout.type].call(simpleCart,settings.checkout);
// if the checkout method returns data, try to send the form
if( checkoutData.data && checkoutData.action && checkoutData.method ){
// if no one has any objections, send the checkout form
if( false !== simpleCart.trigger('beforeCheckout', [checkoutData.data]) ){
simpleCart.generateAndSendForm( checkoutData );
}
}
} else {
simpleCart.error("No Valid Checkout Method Specified");
}
},
extendCheckout: function (methods) {
return simpleCart.extend(simpleCart.checkout, methods);
},
generateAndSendForm: function (opts) {
var form = simpleCart.$create("form");
form.attr('style', 'display:none;');
form.attr('action', opts.action);
form.attr('method', opts.method);
simpleCart.each(opts.data, function (val, x, name) {
form.append(
simpleCart.$create("input").attr("type","hidden").attr("name",name).val(val)
);
});
simpleCart.$("body").append(form);
form.el.submit();
form.remove();
}
});
simpleCart.extendCheckout({
PayPal: function (opts) {
// account email is required
if (!opts.email) {
return simpleCart.error("No email provided for PayPal checkout");
}
// build basic form options
var data = {
cmd : "_cart"
, upload : "1"
, currency_code : simpleCart.currency().code
, business : opts.email
, rm : opts.method === "GET" ? "0" : "2"
, tax_cart : (simpleCart.tax()*1).toFixed(2)
, handling_cart : (simpleCart.shipping()*1).toFixed(2)
, charset : "utf-8"
},
action = opts.sandbox ? "https://www.sandbox.paypal.com/cgi-bin/webscr" : "https://www.paypal.com/cgi-bin/webscr",
method = opts.method === "GET" ? "GET" : "POST";
// check for return and success URLs in the options
if (opts.success) {
data['return'] = opts.success;
}
if (opts.cancel) {
data.cancel_return = opts.cancel;
}
if (opts.notify) {
data.notify_url = opts.notify;
}
// add all the items to the form data
simpleCart.each(function (item,x) {
var counter = x+1,
item_options = item.options(),
optionCount = 0,
send;
// basic item data
data["item_name_" + counter] = item.get("name");
data["quantity_" + counter] = item.quantity();
data["amount_" + counter] = (item.price()*1).toFixed(2);
data["item_number_" + counter] = item.get("item_number") || counter;
// add the options
simpleCart.each(item_options, function (val,k,attr) {
// paypal limits us to 10 options
if (k < 10) {
// check to see if we need to exclude this from checkout
send = true;
simpleCart.each(settings.excludeFromCheckout, function (field_name) {
if (field_name === attr) { send = false; }
});
if (send) {
optionCount += 1;
data["on" + k + "_" + counter] = attr;
data["os" + k + "_" + counter] = val;
}
}
});
// options count
data["option_index_"+ x] = Math.min(10, optionCount);
});
// return the data for the checkout form
return {
action : action
, method : method
, data : data
};
},
GoogleCheckout: function (opts) {
// account id is required
if (!opts.merchantID) {
return simpleCart.error("No merchant id provided for GoogleCheckout");
}
// google only accepts USD and GBP
if (simpleCart.currency().code !== "USD" && simpleCart.currency().code !== "GBP") {
return simpleCart.error("Google Checkout only accepts USD and GBP");
}
// build basic form options
var data = {
// TODO: better shipping support for this google
ship_method_name_1 : "Shipping"
, ship_method_price_1 : simpleCart.shipping()
, ship_method_currency_1: simpleCart.currency().code
, _charset_ : ''
},
action = "https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/" + opts.merchantID,
method = opts.method === "GET" ? "GET" : "POST";
// add items to data
simpleCart.each(function (item,x) {
var counter = x+1,
options_list = [],
send;
data['item_name_' + counter] = item.get('name');
data['item_quantity_' + counter] = item.quantity();
data['item_price_' + counter] = item.price();
data['item_currency_ ' + counter] = simpleCart.currency().code;
data['item_tax_rate' + counter] = item.get('taxRate') || simpleCart.taxRate();
// create array of extra options
simpleCart.each(item.options(), function (val,x,attr) {
// check to see if we need to exclude this from checkout
send = true;
simpleCart.each(settings.excludeFromCheckout, function (field_name) {
if (field_name === attr) { send = false; }
});
if (send) {
options_list.push(attr + ": " + val);
}
});
// add the options to the description
data['item_description_' + counter] = options_list.join(", ");
});
// return the data for the checkout form
return {
action : action
, method : method
, data : data
};
},
AmazonPayments: function (opts) {
// required options
if (!opts.merchant_signature) {
return simpleCart.error("No merchant signature provided for Amazon Payments");
}
if (!opts.merchant_id) {
return simpleCart.error("No merchant id provided for Amazon Payments");
}
if (!opts.aws_access_key_id) {
return simpleCart.error("No AWS access key id provided for Amazon Payments");
}
// build basic form options
var data = {
aws_access_key_id: opts.aws_access_key_id
, merchant_signature: opts.merchant_signature
, currency_code: simpleCart.currency().code
, tax_rate: simpleCart.taxRate()
, weight_unit: opts.weight_unit || 'lb'
},
action = "https://payments" + (opts.sandbox ? "-sandbox" : "") + ".amazon.com/checkout/" + opts.merchant_id,
method = opts.method === "GET" ? "GET" : "POST";
// add items to data
simpleCart.each(function (item,x) {
var counter = x+1,
options_list = [];
data['item_title_' + counter] = item.get('name');
data['item_quantity_' + counter] = item.quantity();
data['item_price_' + counter] = item.price();
data['item_sku_ ' + counter] = item.get('sku') || item.id();
data['item_merchant_id_' + counter] = opts.merchant_id;
if (item.get('weight')) {
data['item_weight_' + counter] = item.get('weight');
}
if (settings.shippingQuantityRate) {
data['shipping_method_price_per_unit_rate_' + counter] = settings.shippingQuantityRate;
}
// create array of extra options
simpleCart.each(item.options(), function (val,x,attr) {
// check to see if we need to exclude this from checkout
var send = true;
simpleCart.each(settings.excludeFromCheckout, function (field_name) {
if (field_name === attr) { send = false; }
});
if (send && attr !== 'weight' && attr !== 'tax') {
options_list.push(attr + ": " + val);
}
});
// add the options to the description
data['item_description_' + counter] = options_list.join(", ");
});
// return the data for the checkout form
return {
action : action
, method : method
, data : data
};
},
SendForm: function (opts) {
// url required
if (!opts.url) {
return simpleCart.error('URL required for SendForm Checkout');
}
// build basic form options
var data = {
currency : simpleCart.currency().code
, shipping : simpleCart.shipping()
, tax : simpleCart.tax()
, taxRate : simpleCart.taxRate()
, itemCount : simpleCart.find({}).length
},
action = opts.url,
method = opts.method === "GET" ? "GET" : "POST";
// add items to data
simpleCart.each(function (item,x) {
var counter = x+1,
options_list = [],
send;
data['item_name_' + counter] = item.get('name');
data['item_quantity_' + counter] = item.quantity();
data['item_price_' + counter] = item.price();
// create array of extra options
simpleCart.each(item.options(), function (val,x,attr) {
// check to see if we need to exclude this from checkout
send = true;
simpleCart.each(settings.excludeFromCheckout, function (field_name) {
if (field_name === attr) { send = false; }
});
if (send) {
options_list.push(attr + ": " + val);
}
});
// add the options to the description
data['item_options_' + counter] = options_list.join(", ");
});
// check for return and success URLs in the options
if (opts.success) {
data['return'] = opts.success;
}
if (opts.cancel) {
data.cancel_return = opts.cancel;
}
if (opts.extra_data) {
data = simpleCart.extend(data,opts.extra_data);
}
// return the data for the checkout form
return {
action : action
, method : method
, data : data
};
}
});
/*******************************************************************
* EVENT MANAGEMENT
*******************************************************************/
eventFunctions = {
// bind a callback to an event
bind: function (name, callback) {
if (!isFunction(callback)) {
return this;
}
if (!this._events) {
this._events = {};
}
// split by spaces to allow for multiple event bindings at once
var eventNameList = name.split(/ +/);
// iterate through and bind each event
simpleCart.each( eventNameList , function( eventName ){
if (this._events[eventName] === true) {
callback.apply(this);
} else if (!isUndefined(this._events[eventName])) {
this._events[eventName].push(callback);
} else {
this._events[eventName] = [callback];
}
});
return this;
},
// trigger event
trigger: function (name, options) {
var returnval = true,
x,
xlen;
if (!this._events) {
this._events = {};
}
if (!isUndefined(this._events[name]) && isFunction(this._events[name][0])) {
for (x = 0, xlen = this._events[name].length; x < xlen; x += 1) {
returnval = this._events[name][x].apply(this, (options || []));
}
}
if (returnval === false) {
return false;
}
return true;
}
};
// alias for bind
eventFunctions.on = eventFunctions.bind;
simpleCart.extend(eventFunctions);
simpleCart.extend(simpleCart.Item._, eventFunctions);
// base simpleCart events in options
baseEvents = {
beforeAdd : null
, afterAdd : null
, load : null
, beforeSave : null
, afterSave : null
, update : null
, ready : null
, checkoutSuccess : null
, checkoutFail : null
, beforeCheckout : null
, beforeRemove : null
};
// extend with base events
simpleCart(baseEvents);
// bind settings to events
simpleCart.each(baseEvents, function (val, x, name) {
simpleCart.bind(name, function () {
if (isFunction(settings[name])) {
settings[name].apply(this, arguments);
}
});
});
/*******************************************************************
* FORMATTING FUNCTIONS
*******************************************************************/
simpleCart.extend({
toCurrency: function (number,opts) {
var num = parseFloat(number),
opt_input = opts || {},
_opts = simpleCart.extend(simpleCart.extend({
symbol: "$"
, decimal: "."
, delimiter: ","
, accuracy: 2
, after: false
}, simpleCart.currency()), opt_input),
numParts = num.toFixed(_opts.accuracy).split("."),
dec = numParts[1],
ints = numParts[0];
ints = simpleCart.chunk(ints.reverse(), 3).join(_opts.delimiter.reverse()).reverse();
return (!_opts.after ? _opts.symbol : "") +
ints +
(dec ? _opts.decimal + dec : "") +
(_opts.after ? _opts.symbol : "");
},
// break a string in blocks of size n
chunk: function (str, n) {
if (typeof n==='undefined') {
n=2;
}
var result = str.match(new RegExp('.{1,' + n + '}','g'));
return result || [];
}
});
// reverse string function
String.prototype.reverse = function () {
return this.split("").reverse().join("");
};
// currency functions
simpleCart.extend({
currency: function (currency) {
if (isString(currency) && !isUndefined(currencies[currency])) {
settings.currency = currency;
} else if (isObject(currency)) {
currencies[currency.code] = currency;
settings.currency = currency.code;
} else {
return currencies[settings.currency];
}
}
});
/*******************************************************************
* VIEW MANAGEMENT
*******************************************************************/
simpleCart.extend({
// bind outlets to function
bindOutlets: function (outlets) {
simpleCart.each(outlets, function (callback, x, selector) {
simpleCart.bind('update', function () {
simpleCart.setOutlet("." + namespace + "_" + selector, callback);
});
});
},
// set function return to outlet
setOutlet: function (selector, func) {
var val = func.call(simpleCart, selector);
if (isObject(val) && val.el) {
simpleCart.$(selector).html(' ').append(val);
} else if (!isUndefined(val)) {
simpleCart.$(selector).html(val);
}
},
// bind click events on inputs
bindInputs: function (inputs) {
simpleCart.each(inputs, function (info) {
simpleCart.setInput("." + namespace + "_" + info.selector, info.event, info.callback);
});
},
// attach events to inputs
setInput: function (selector, event, func) {
simpleCart.$(selector).live(event, func);
}
});
// class for wrapping DOM selector shit
simpleCart.ELEMENT = function (selector) {
this.create(selector);
this.selector = selector || null; // "#" + this.attr('id'); TODO: test length?
};
simpleCart.extend(selectorFunctions, {
"MooTools" : {
text: function (text) {
return this.attr(_TEXT_, text);
},
html: function (html) {
return this.attr(_HTML_, html);
},
val: function (val) {
return this.attr(_VALUE_, val);
},
attr: function (attr, val) {
if (isUndefined(val)) {
return this.el[0] && this.el[0].get(attr);
}
this.el.set(attr, val);
return this;
},
remove: function () {
this.el.dispose();
return null;
},
addClass: function (klass) {
this.el.addClass(klass);
return this;
},
removeClass: function (klass) {
this.el.removeClass(klass);
return this;
},
append: function (item) {
this.el.adopt(item.el);
return this;
},
each: function (callback) {
if (isFunction(callback)) {
simpleCart.each(this.el, function( e, i, c) {
callback.call( i, i, e, c );
});
}
return this;
},
click: function (callback) {
if (isFunction(callback)) {
this.each(function (e) {
e.addEvent(_CLICK_, function (ev) {
callback.call(e,ev);
});
});
} else if (isUndefined(callback)) {
this.el.fireEvent(_CLICK_);
}
return this;
},
live: function ( event,callback) {
var selector = this.selector;
if (isFunction(callback)) {
simpleCart.$("body").el.addEvent(event + ":relay(" + selector + ")", function (e, el) {
callback.call(el, e);
});
}
},
match: function (selector) {
return this.el.match(selector);
},
parent: function () {
return simpleCart.$(this.el.getParent());
},
find: function (selector) {
return simpleCart.$(this.el.getElements(selector));
},
closest: function (selector) {
return simpleCart.$(this.el.getParent(selector));
},
descendants: function () {
return this.find("*");
},
tag: function () {
return this.el[0].tagName;
},
submit: function (){
this.el[0].submit();
return this;
},
create: function (selector) {
this.el = $engine(selector);
}
},
"Prototype" : {
text: function (text) {
if (isUndefined(text)) {
return this.el[0].innerHTML;
}
this.each(function (i,e) {
$(e).update(text);
});
return this;
},
html: function (html) {
return this.text(html);
},
val: function (val) {
return this.attr(_VALUE_, val);
},
attr: function (attr, val) {
if (isUndefined(val)) {
return this.el[0].readAttribute(attr);
}
this.each(function (i,e) {
$(e).writeAttribute(attr, val);
});
return this;
},
append: function (item) {
this.each(function (i,e) {
if (item.el) {
item.each(function (i2,e2) {
$(e).appendChild(e2);
});
} else if (isElement(item)) {
$(e).appendChild(item);
}
});
return this;
},
remove: function () {
this.each(function (i, e) {
$(e).remove();
});
return this;
},
addClass: function (klass) {
this.each(function (i, e) {
$(e).addClassName(klass);
});
return this;
},
removeClass: function (klass) {
this.each(function (i, e) {
$(e).removeClassName(klass);
});
return this;
},
each: function (callback) {
if (isFunction(callback)) {
simpleCart.each(this.el, function( e, i, c) {
callback.call( i, i, e, c );
});
}
return this;
},
click: function (callback) {
if (isFunction(callback)) {
this.each(function (i, e) {
$(e).observe(_CLICK_, function (ev) {
callback.call(e,ev);
});
});
} else if (isUndefined(callback)) {
this.each(function (i, e) {
$(e).fire(_CLICK_);
});
}
return this;
},
live: function (event,callback) {
if (isFunction(callback)) {
var selector = this.selector;
document.observe(event, function (e, el) {
if (el === $engine(e).findElement(selector)) {
callback.call(el, e);
}
});
}
},
parent: function () {
return simpleCart.$(this.el.up());
},
find: function (selector) {
return simpleCart.$(this.el.getElementsBySelector(selector));
},
closest: function (selector) {
return simpleCart.$(this.el.up(selector));
},
descendants: function () {
return simpleCart.$(this.el.descendants());
},
tag: function () {
return this.el.tagName;
},
submit: function() {
this.el[0].submit();
},
create: function (selector) {
if (isString(selector)) {
this.el = $engine(selector);
} else if (isElement(selector)) {
this.el = [selector];
}
}
},
"jQuery": {
passthrough: function (action, val) {
if (isUndefined(val)) {
return this.el[action]();
}
this.el[action](val);
return this;
},
text: function (text) {
return this.passthrough(_TEXT_, text);
},
html: function (html) {
return this.passthrough(_HTML_, html);
},
val: function (val) {
return this.passthrough("val", val);
},
append: function (item) {
var target = item.el || item;
this.el.append(target);
return this;
},
attr: function (attr, val) {
if (isUndefined(val)) {
return this.el.attr(attr);
}
this.el.attr(attr, val);
return this;
},
remove: function () {
this.el.remove();
return this;
},
addClass: function (klass) {
this.el.addClass(klass);
return this;
},
removeClass: function (klass) {
this.el.removeClass(klass);
return this;
},
each: function (callback) {
return this.passthrough('each', callback);
},
click: function (callback) {
return this.passthrough(_CLICK_, callback);
},
live: function (event, callback) {
$engine(document).delegate(this.selector, event, callback);
return this;
},
parent: function () {
return simpleCart.$(this.el.parent());
},
find: function (selector) {
return simpleCart.$(this.el.find(selector));
},
closest: function (selector) {
return simpleCart.$(this.el.closest(selector));
},
tag: function () {
return this.el[0].tagName;
},
descendants: function () {
return simpleCart.$(this.el.find("*"));
},
submit: function() {
return this.el.submit();
},
create: function (selector) {
this.el = $engine(selector);
}
}
});
simpleCart.ELEMENT._ = simpleCart.ELEMENT.prototype;
// bind the DOM setup to the ready event
simpleCart.ready(simpleCart.setupViewTool);
// bind the input and output events
simpleCart.ready(function () {
simpleCart.bindOutlets({
total: function () {
return simpleCart.toCurrency(simpleCart.total());
}
, quantity: function () {
return simpleCart.quantity();
}
, items: function (selector) {
simpleCart.writeCart(selector);
}
, tax: function () {
return simpleCart.toCurrency(simpleCart.tax());
}
, taxRate: function () {
return simpleCart.taxRate().toFixed();
}
, shipping: function () {
return simpleCart.toCurrency(simpleCart.shipping());
}
, grandTotal: function () {
return simpleCart.toCurrency(simpleCart.grandTotal());
}
});
simpleCart.bindInputs([
{ selector: 'checkout'
, event: 'click'
, callback: function () {
simpleCart.checkout();
}
}
, { selector: 'empty'
, event: 'click'
, callback: function () {
simpleCart.empty();
}
}
, { selector: 'increment'
, event: 'click'
, callback: function () {
simpleCart.find(simpleCart.$(this).closest('.itemRow').attr('id').split("_")[1]).increment();
simpleCart.update();
}
}
, { selector: 'decrement'
, event: 'click'
, callback: function () {
simpleCart.find(simpleCart.$(this).closest('.itemRow').attr('id').split("_")[1]).decrement();
simpleCart.update();
}
}
/* remove from cart */
, { selector: 'remove'
, event: 'click'
, callback: function () {
simpleCart.find(simpleCart.$(this).closest('.itemRow').attr('id').split("_")[1]).remove();
}
}
/* cart inputs */
, { selector: 'input'
, event: 'change'
, callback: function () {
var $input = simpleCart.$(this),
$parent = $input.parent(),
classList = $parent.attr('class').split(" ");
simpleCart.each(classList, function (klass) {
if (klass.match(/item-.+/i)) {
var field = klass.split("-")[1];
simpleCart.find($parent.closest('.itemRow').attr('id').split("_")[1]).set(field,$input.val());
simpleCart.update();
return;
}
});
}
}
/* here is our shelfItem add to cart button listener */
, { selector: 'shelfItem .item_add'
, event: 'click'
, callback: function () {
var $button = simpleCart.$(this),
fields = {};
$button.closest("." + namespace + "_shelfItem").descendants().each(function (x,item) {
var $item = simpleCart.$(item);
// check to see if the class matches the item_[fieldname] pattern
if ($item.attr("class") &&
$item.attr("class").match(/item_.+/) &&
!$item.attr('class').match(/item_add/)) {
// find the class name
simpleCart.each($item.attr('class').split(' '), function (klass) {
var attr,
val,
type;
// get the value or text depending on the tagName
if (klass.match(/item_.+/)) {
attr = klass.split("_")[1];
val = "";
switch($item.tag().toLowerCase()) {
case "input":
case "textarea":
case "select":
type = $item.attr("type");
if (!type || ((type.toLowerCase() === "checkbox" || type.toLowerCase() === "radio") && $item.attr("checked")) || type.toLowerCase() === "text" || type.toLowerCase() === "number") {
val = $item.val();
}
break;
case "img":
val = $item.attr('src');
break;
default:
val = $item.text();
break;
}
if (val !== null && val !== "") {
fields[attr.toLowerCase()] = fields[attr.toLowerCase()] ? fields[attr.toLowerCase()] + ", " + val : val;
}
}
});
}
});
// add the item
simpleCart.add(fields);
}
}
]);
});
/*******************************************************************
* DOM READY
*******************************************************************/
// Cleanup functions for the document ready method
// used from jQuery
/*global DOMContentLoaded */
if (document.addEventListener) {
window.DOMContentLoaded = function () {
document.removeEventListener("DOMContentLoaded", DOMContentLoaded, false);
simpleCart.init();
};
} else if (document.attachEvent) {
window.DOMContentLoaded = function () {
// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", DOMContentLoaded);
simpleCart.init();
}
};
}
// The DOM ready check for Internet Explorer
// used from jQuery
function doScrollCheck() {
if (simpleCart.isReady) {
return;
}
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch (e) {
setTimeout(doScrollCheck, 1);
return;
}
// and execute any waiting functions
simpleCart.init();
}
// bind ready event used from jquery
function sc_BindReady () {
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if (document.readyState === "complete") {
// Handle it asynchronously to allow scripts the opportunity to delay ready
return setTimeout(simpleCart.init, 1);
}
// Mozilla, Opera and webkit nightlies currently support this event
if (document.addEventListener) {
// Use the handy event callback
document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
// A fallback to window.onload, that will always work
window.addEventListener("load", simpleCart.init, false);
// If IE event model is used
} else if (document.attachEvent) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", DOMContentLoaded);
// A fallback to window.onload, that will always work
window.attachEvent("onload", simpleCart.init);
// If IE and not a frame
// continually check to see if the document is ready
var toplevel = false;
try {
toplevel = window.frameElement === null;
} catch (e) {}
if (document.documentElement.doScroll && toplevel) {
doScrollCheck();
}
}
}
// bind the ready event
sc_BindReady();
return simpleCart;
};
window.simpleCart = generateSimpleCart();
}(window, document));
/************ JSON *************/
var JSON;JSON||(JSON={});
(function () {function k(a) {return a<10?"0"+a:a}function o(a) {p.lastIndex=0;return p.test(a)?'"'+a.replace(p,function (a) {var c=r[a];return typeof c==="string"?c:"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+a+'"'}function l(a,j) {var c,d,h,m,g=e,f,b=j[a];b&&typeof b==="object"&&typeof b.toJSON==="function"&&(b=b.toJSON(a));typeof i==="function"&&(b=i.call(j,a,b));switch(typeof b) {case "string":return o(b);case "number":return isFinite(b)?String(b):"null";case "boolean":case "null":return String(b);case "object":if (!b)return"null";
e += n;f=[];if (Object.prototype.toString.apply(b)==="[object Array]") {m=b.length;for (c=0;c<m;c += 1)f[c]=l(c,b)||"null";h=f.length===0?"[]":e?"[\n"+e+f.join(",\n"+e)+"\n"+g+"]":"["+f.join(",")+"]";e=g;return h}if (i&&typeof i==="object") {m=i.length;for (c=0;c<m;c += 1)typeof i[c]==="string"&&(d=i[c],(h=l(d,b))&&f.push(o(d)+(e?": ":":")+h))}else for (d in b)Object.prototype.hasOwnProperty.call(b,d)&&(h=l(d,b))&&f.push(o(d)+(e?": ":":")+h);h=f.length===0?"{}":e?"{\n"+e+f.join(",\n"+e)+"\n"+g+"}":"{"+f.join(",")+
"}";e=g;return h}}if (typeof Date.prototype.toJSON!=="function")Date.prototype.toJSON=function () {return isFinite(this.valueOf())?this.getUTCFullYear()+"-"+k(this.getUTCMonth()+1)+"-"+k(this.getUTCDate())+"T"+k(this.getUTCHours())+":"+k(this.getUTCMinutes())+":"+k(this.getUTCSeconds())+"Z":null},String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function () {return this.valueOf()};var q=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
p=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,e,n,r={"\u0008":"\\b","\t":"\\t","\n":"\\n","\u000c":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},i;if (typeof JSON.stringify!=="function")JSON.stringify=function (a,j,c) {var d;n=e="";if (typeof c==="number")for (d=0;d<c;d += 1)n += " ";else typeof c==="string"&&(n=c);if ((i=j)&&typeof j!=="function"&&(typeof j!=="object"||typeof j.length!=="number"))throw Error("JSON.stringify");return l("",
{"":a})};if (typeof JSON.parse!=="function")JSON.parse=function (a,e) {function c(a,d) {var g,f,b=a[d];if (b&&typeof b==="object")for (g in b)Object.prototype.hasOwnProperty.call(b,g)&&(f=c(b,g),f!==void 0?b[g]=f:delete b[g]);return e.call(a,d,b)}var d,a=String(a);q.lastIndex=0;q.test(a)&&(a=a.replace(q,function (a) {return"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)}));if (/^[\],:{}\s]*$/.test(a.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
"]").replace(/(?:^|:|,)(?:\s*\[)+/g,"")))return d=eval("("+a+")"),typeof e==="function"?c({"":d},""):d;throw new SyntaxError("JSON.parse");}})();
/************ HTML5 Local Storage Support *************/
(function () {if (!this.localStorage)if (this.globalStorage)try {this.localStorage=this.globalStorage}catch(e) {}else{var a=document.createElement("div");a.style.display="none";document.getElementsByTagName("head")[0].appendChild(a);if (a.addBehavior) {a.addBehavior("#default#userdata");var d=this.localStorage={length:0,setItem:function (b,d) {a.load("localStorage");b=c(b);a.getAttribute(b)||this.length++;a.setAttribute(b,d);a.save("localStorage")},getItem:function (b) {a.load("localStorage");b=c(b);return a.getAttribute(b)},
removeItem:function (b) {a.load("localStorage");b=c(b);a.removeAttribute(b);a.save("localStorage");this.length=0},clear:function () {a.load("localStorage");for (var b=0;attr=a.XMLDocument.documentElement.attributes[b++];)a.removeAttribute(attr.name);a.save("localStorage");this.length=0},key:function (b) {a.load("localStorage");return a.XMLDocument.documentElement.attributes[b]}},c=function (a) {return a.replace(/[^-._0-9A-Za-z\xb7\xc0-\xd6\xd8-\xf6\xf8-\u037d\u37f-\u1fff\u200c-\u200d\u203f\u2040\u2070-\u218f]/g,
"-")};a.load("localStorage");d.length=a.XMLDocument.documentElement.attributes.length}}})();
//]]>
</script>
</head>
<body>
<!--/- Outer-Wrrapper -/-->
<div class='outer-wrapper'>
<!--/- Header -/-->
<div class='header-wrapper'>
<div class='header-container'>
<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='menu'>
<ul>
<li><a href='#URL'>Home</a></li>
<li><a href='#URL'>Menu Item</a></li>
<li><a href='#URL'>Menu Item</a>
<ul class='subMenu'>
<li><a href='#URL'>Menu Item</a></li>
<li><a href='#URL'>Menu Item</a></li>
<li><a href='#URL'>Menu Item</a></li>
<li><a href='#URL'>Menu Item</a></li>
<li><a href='#URL'>Menu Item</a></li>
</ul>
</li>
<li><a href='#URL'>Menu Item</a></li>
<li><a href='#URL'>Menu Item</a></li>
<li><a href='#URL'>Menu Item</a></li>
</ul>
</div>
<div class='clear'/>
</div>
</div>
<!--/- End of Header -/-->
<div class='content-wrapper'>
<div class='cross-content'>
<div class='search'>
<form accept-charset='utf-8' action='/search' id='search' method='GET'>
<input class='input' name='q' onblur='if(this.value=='')this.value='type your search and hit enter'' onfocus='if(this.value=='type your search and hit enter')this.value=''' size='24' type='text' value='type your search and hit enter'/>
</form>
</div>
<div class='cartwrp'>
<div class='cartInfo'>
<span class='simpleCart_quantity'/> item(s)
</div>
<div class='cartBox'>
<div class='menu-cart'>
<b>In your cart:</b> <a class='simpleCart_empty' href='javascript:'>Clear Cart</a><br/>
<span class='simpleCart_quantity'/> item(s) -
Total Price : <span class='simpleCart_total'/> <br/>
<div class='divider'/>
<a class='view-cart' href='ADD BLOG VIEW CART PAGE URL' title='View Cart'>View Cart</a>
<a class='simpleCart_checkout' href='javascript:'>Checkout</a>
<div class='clear'/>
</div>
</div>
</div>
<div class='clear'/>
</div>
<div class='main-wrapper'>
<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 simpleCart_shelfItem'>
<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'>/*<![CDATA[*/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='comment-form' var='post'></b:includable>
<b:includable id='commentDeleteIcon' var='comment'></b:includable>
<b:includable id='comment_count_picker' var='post'></b:includable>
<b:includable id='comment_picker' var='post'></b:includable>
<b:includable id='comments' var='post'></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 hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title item_name entry-title' itemprop='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/>
<a expr:href='data:post.url'><data:post.title/></a>
</b:if>
<b:else/>
<a expr:href='data:post.url'><data:post.title/></a>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<b:if cond='data:blog.pageType == "item"'>
<ul class='post-header-line-0 post-data-meta'>
<li>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
</li>
<li>
<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>
</li>
<li>
<b:include name='nextprev'/>
</li>
<li>
<b:include data='post' name='postQuickEdit'/></li>
</ul>
</b:if>
<div class='post-header-line-1'/>
</div>
<b:if cond='data:blog.metaDescription == ""'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='item-bottom'>
<b:if cond='data:blog.pageType == "item"'>
<b>Quantity :</b><input class='item_Quantity' max='10000' min='1' type='number' value='1'/>
</b:if>
<a class='item_add' href='javascript:'>Add to Cart</a>
<b:if cond='data:blog.pageType != "item"'>
<a class='post-judul animated' expr:href='data:post.url'><data:post.title/></a>
</b:if>
</div>
</b:if>
<div style='clear:both'/>
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear:both'/>
<div class='item-bottom'>
<a class='item_add' href='javascript:'>Add to Cart</a>
</div>
</div>
</b:if>
<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'><div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>
<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>
</div>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</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_comments' var='post'></b:includable>
</b:widget>
</b:section>
<div class='clear'/>
</div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div> <!--/- End of Outer-Wrrapper -/-->
</body>
</html>
Related movie you might like to see :
BOOTSNIPP LOGIN SIGNUP FORM
BLOGGER INCLUDABLE SECTION
SHOPPING CART IN SIDEBAR TEMPLATE
SHOPPING CART IN SIDEBAR TEMPLATE
SELL YOUR APPS
SSL WEBSITE CHECKER FOR FACEBOOK
Platinum Arts Sandbox Free 3D Game ...
BASIC TEXT OR SCROLL BOX OR IMAGE S...
FREE SLL CERFICATE BY AZURE MICROSO...
GOOGLE CUSTOM SEARCH BOX
RADIO BUTTON SLIDER TO KEY FRAME SL...
Magento Hello World Module (Extensi...
HTML SYNTAX HIGHLIGHTER
HTML CSS GREEN COMMENTS NOTEPAD++
EDIT IMAGE IN NOTEPAD++
NOTEPAD++ REMOVE UNWANTED LINES
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR ...
GOOGLE CONSOLE
GOOGLE CHROME EXTENSION FILE SAVE O...
OPEN DESKTOP TEXT FILE BY COMMAND P...
Related Post for SHOPPING CART BLOGGER TEMPLATE PART 1
HTML CSS GREEN COMMENTS NOTEPAD++
Search Engine Optimization Toolkit UN USED CSS IN GOOGLE
RADIO BUTTON SLIDER TO KEY FRAME SLIDER
RELATED POST WIDGET LIST WITHOUT THUMBNAIL
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES
Magento Hello World Module (Extension)
GOOGLE CUSTOM SEARCH BOX 
ARROW BUTTON
WHACK A RAT CSS GAME
BOOTSNIPP LOGIN SIGNUP FORM
FIREBUG LITE USE OFFLINE
FLASH 8 DOWNLOAD
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON
FLICKITY JS CSS SLIDER
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.