<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="header_top_nav">
<ul>
<li class="page_item page-item-5"><a href="http://madeinmayhem.com/cart/">Cart</a></li>
<li class="page_item page-item-7 page_item_has_children"><a href="http://madeinmayhem.com/my-account/">My Account</a>
<ul class="children">
<li class="page_item page-item-9"><a href="http://madeinmayhem.com/my-account/change-password/">Change Password</a></li>
<li class="page_item page-item-8"><a href="http://madeinmayhem.com/my-account/edit-address/">Edit My Address</a></li>
<li class="page_item page-item-6"><a href="http://madeinmayhem.com/my-account/order-tracking/">Track your order</a></li>
<li class="page_item page-item-10"><a href="http://madeinmayhem.com/my-account/view-order/">View Order</a></li>
</ul>
</li>
<li><a href="/cart/"><span>My Cart ( 3 ) Items</span></a><ul class="cart_list"><li class="cart_list_items"><a href="http://madeinmayhem.com/product/franklin-tobacco/"><div class="item_image"><img src="http://madeinmayhem.com/wp-content/uploads/2013/08/franklin_tobacco-26x36.jpg" class="attachment-shop_tiny wp-post-image" alt="franklin_tobacco" height="36" width="26"></div><div class="item_added">Franklin Tobacco</div><div class="item_quantity">1 ×</div><div class="item_cost">$110.00</div><div class="clear"></div></a></li><li class="cart_list_items"><a href="http://madeinmayhem.com/product/washington-cherry/"><div class="item_image"><img src="http://madeinmayhem.com/wp-content/uploads/2012/11/washington_cherry-28x36.jpg" class="attachment-shop_tiny wp-post-image" alt="washington_cherry" height="36" width="28"></div><div class="item_added">Washington Cherry</div><div class="item_quantity">5 ×</div><div class="item_cost">$60.00</div><div class="clear"></div></a></li><li class="cart_list_items"><a href="http://madeinmayhem.com/product/ludington-tan/"><div class="item_image"><img src="http://madeinmayhem.com/wp-content/uploads/2012/12/ludington_tan-22x36.jpg" class="attachment-shop_tiny wp-post-image" alt="ludington_tan" height="36" width="22"></div><div class="item_added">Ludington Tan</div><div class="item_quantity">1 ×</div><div class="item_cost">$80.00</div><div class="clear"></div></a></li><li><a href="/cart/">View Cart</a></li><li><a href="/checkout/">Checkout</a></li></ul></li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
/* demo */
html, body { margin:0px; padding:20px; height:100%; min-height:100%; outline:none; color:#222; font-smoothing:antialiased; font-family: 'Open Sans', sans-serif; }
/* original */
body { background-color:#FFF; }
.ie7 html, .ie7 body { cursor: default; }
.clear { clear:both; }
a { text-decoration: none; outline: none; margin:0px; padding:0px; }
img, a:link, a:visited, a:active, a:hover, img a:link, img a:visited, img a:active, img a:hover { text-decoration: none; outline:none; margin:0px; padding:0px; border:none; display: inline-block; }
p { margin:0px; padding:0px; line-height:20px; text-align:left; }
strong { font-weight:600; }
h1, h2, h3, h4, h5, h6 { padding:0px; margin: 0px; font-weight:normal; }
ul, li { margin:0px; padding:0px; list-style:none; list-style-type:none; }
.nsp { padding-left:0px!important; padding-right:0px!important; }
.full { width:864px!important; }
.image_holder { visibility:hidden; }
.homepage .image_holder { overflow: hidden; height: 576px;}
#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(images/loading.gif) no-repeat center center; }
#supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; outline:none; border:none; }
iframe[src^="//assets.pinterest"] {
display: none;
}
/* -------------------------------*/
/* -------- NAVIGATION --------*/
/* -------------------------------*/
.header_top_container { margin: 0px; padding: 0px; width: 100%; min-width: 864px; height: 40px; background-color: rgb(255, 255, 255); }
.header_top { width: 852px; padding: 0px 12px 0px 0px; height: 40px; margin: 0px auto; }
.header_top_nav { height: 40px; width: auto; float: right; }
.header_top_nav > ul { float: right; margin: 0px; padding: 0px; height: 40px; white-space: nowrap; position: relative; }
.header_top_nav > ul > li { float: left; font-size: 9px; padding: 0px; margin: 0px; height: 40px; line-height: 40px; position: relative; text-transform: uppercase; color: rgb(179, 179, 179) !important; }
.header_top_nav > ul > li:hover { cursor: default; }
.header_top_nav > ul > li > a, .header_top_nav > ul > li > a:link, .header_top_nav > ul > li > a:active, .header_top_nav > ul > li > a:visited, .header_top_nav > ul > li > span { display: block; color: rgb(179, 179, 179); height: 40px; line-height: 40px; padding: 0px 12px; }
.header_top_nav > ul > li:hover > a, .header_top_nav > ul > li:hover > span { position: relative; z-index: 110; background-color: rgb(247, 247, 247); cursor: pointer; color: rgb(102, 102, 102) !important; }
.header_top_nav > ul > li:hover > a:hover { color: rgb(0, 0, 0) !important; }
.header_top_nav > ul > li > ul { position: absolute; visibility: hidden; white-space: nowrap; z-index: 109; right: 0px; padding: 0px !important; }
.header_top_nav > ul > li > ul > li { position: relative; background-color: rgb(247, 247, 247); text-align: right; }
.header_top_nav > ul > li > ul > li > a, .header_top_nav > ul > li > ul > li > a:link, .header_top_nav > ul > li > ul > li > a:visited { text-align: right; display: block; font-size: 9px; height: 30px; line-height: 30px; white-space: nowrap; padding: 0px 12px; color: rgb(102, 102, 102) !important; }
.header_top_nav > ul > li > ul > li > a:hover, .header_top_nav > ul > li > ul > li > a:active { background-color: rgb(241, 241, 241); color: rgb(0, 0, 0) !important; }
.header_top_nav > ul > li:hover > ul { visibility: visible; position: absolute; min-width: 50px; z-index: 109; padding: 0px; top: 40px; cursor: default; box-shadow: rgba(0, 0, 0, 0.498039) 0px 3px 6px 0px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 3px 6px 0px; }
.ie7 .header_top_nav > ul > li:hover > ul, .ie8 .header_top_nav > ul > li:hover > ul { top: 40px; }
.header_nav { margin: 0px; padding: 0px; width: 864px; height: 60px; background-color: rgb(0, 0, 0); font-size: 11px; text-transform: uppercase; }
.header_nav > ul { float: right; max-width: 574px; margin: 0px; padding: 0px 10px 0px 0px; height: 60px; white-space: nowrap; text-transform: uppercase; position: relative; display: inline-table; }
.header_nav > ul > li { float: left; height: 60px; font-size: 10px; padding: 0px; margin: 0px; position: relative; }
.header_nav > ul > li:hover { cursor: pointer; }
.header_nav > ul > li > a, .header_nav > ul > li > a:link, .header_nav > ul > li > a:active, .header_nav > ul > li > a:visited { display: block; color: rgb(255, 255, 255); height: 60px; line-height: 60px; padding: 0px 14px; }
.header_nav > ul > li:hover > a { position: relative; z-index: 105; cursor: pointer; color: rgb(153, 153, 153) !important; }
.header_nav > ul > li > ul { position: absolute; left: 0px; visibility: hidden; white-space: nowrap; z-index: 104; margin: 0px; background-color: rgb(0, 0, 0); padding: 0px !important; }
.header_nav > ul > li > ul > li { position: relative; height: 30px; }
.header_nav > ul > li > ul > li > a, .header_nav > ul > li > ul > li > a:link, .header_nav > ul > li > ul > li > a:visited { text-align: left; display: block; font-size: 10px; height: 30px; line-height: 30px; white-space: nowrap; padding: 0px 14px; color: rgb(255, 255, 255) !important; }
.header_nav > ul > li > ul > li:first-child > a, .header_nav > ul > li > ul > li:first-child > a:link, .header_nav > ul > li > ul > li:first-child > a:visited { }
.header_nav > ul > li > ul > li > a:hover, .header_nav > ul > li > ul > li > a:active { color: rgb(120, 120, 120) !important; }
.header_nav > ul > li:hover > ul { visibility: visible; position: absolute; min-width: 50px; z-index: 104; padding: 0px; top: 60px; background-color: rgb(0, 0, 0); cursor: default; box-shadow: rgba(0, 0, 0, 0.498039) 0px 3px 6px 0px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 3px 6px 0px; }
.ie7 .header_nav > ul > li:hover > ul, .ie8 .header_nav > ul > li:hover > ul { top: 60px; }
.header_nav > ul > li > ul > li > ul { display: block; padding: 0px 14px; }
.header_nav > ul > li > ul > li:hover > ul { position: relative; left: 0px; display: block; white-space: nowrap; z-index: 104; margin: 0px; padding: 0px 14px !important; }
.header_nav > ul > li > ul > li > ul > li { position: relative; background-color: rgb(0, 0, 0); padding: 0px; }
.header_nav > ul > li > ul > li > ul > li > a, .header_nav > ul > li > ul > li > ul > li > a:link, .header_nav > ul > li > ul > li > ul > li > a:visited { text-align: left; display: block; font-size: 10px; height: 30px; line-height: 30px; white-space: nowrap; padding: 0px 6px; color: rgb(255, 255, 255) !important; }
.header_nav > ul > li > ul > li > ul > li > a::before {
content: '- ';
}
.header_nav > ul > li > ul > li > ul > li:first-child > a, .header_nav > ul > li > ul > li > ul > li:first-child > a:link, .header_nav > ul > li > ul > li > ul > li:first-child > a:visited { }
.header_nav > ul > li > ul > li > ul > li > a:hover, .header_nav > ul > li > ul > li > ul > li > a:active { color: rgb(120, 120, 120) !important; }
.header_nav > ul > li:hover > ul > ul > li { visibility: visible; position: absolute; min-width: 50px; z-index: 104; padding: 0px; top: 60px; background-color: rgb(22, 20, 21); cursor: default; }
.ie7 .header_nav > ul > li:hover > ul, .ie8 .header_nav > ul > li:hover > ul { top: 60px; }
/* added */
ul.cart_list > li {width:300px}
/* ---------------------------*/
/* ------- CART NAV -------*/
/* ---------------------------*/
li.cart_list_items { padding:0px!important; min-height:50px!important; max-height:50px!important; line-height:50px!important; }
li.cart_list_items > a { float:left; display:block; min-height:50px!important; height:50px!important; padding:0px!important; width:100%; }
li.cart_list_items > a .item_image { float:left; width:25px; padding:6px 12px!important; }
li.cart_list_items > a .item_added { float:left; width: 115px; padding: 6px 0px!important; }
li.cart_list_items > a .item_quantity { float:left; width:12px; padding:6px 0px 6px 12px!important; text-align:right; }
li.cart_list_items > a .item_cost { float:left; width:40px; padding:6px 12px!important; text-align:left; }
/* ------------------------*/
/* ------- HEADER -------*/
/* ------------------------*/
.header { margin:0px; padding:0px; width:864px; height:360px; position:relative; }
.header_image { margin:0px; padding:0px; width:864px; height:360px; position:relative; z-index:100; }
.logo { float:left; width:280px; height:60px; background-color:#000; }
/* ---------------------------------*/
/* ------- BREADCRUMBS -------*/
/* ---------------------------------*/
.breadcrumbs_container { float:left; border-bottom:1px solid #d5d5d5; width:840px; height:50px; line-height:50px; padding-right:24px; margin-bottom:30px; font-size:10px; cursor: default; }
.breadcrumbs_container ul { float:right; font-weight:600; }
.breadcrumbs_container ul li { float:right; margin-left:10px; color:#ddd; text-transform:uppercase; }
.breadcrumbs_container ul li:last-child { color:#787878; }
.breadcrumbs_container ul li a:link, .breadcrumbs_container ul li a:visited { color:#050505!important; text-decoration:none!important; }
.breadcrumbs_container ul li a:hover, .breadcrumbs_container ul li a:active { color:#787878!important; text-decoration:none!important; }
/* ----------------------*/
/* ------- BODY -------*/
/* ----------------------*/
#container { margin:0px auto; padding:0px 25px 0px 25px; width:864px; min-height:100%; position:relative; }
#body { margin:0px auto; width:864px; padding:0px 0px 231px 0px; }
.content { float:left; width:864px; padding:0px 0px 40px 0px; }
.shop_content { float:left; width:864px; padding:30px 0px 0px 0px; }
.page_content { float:left; width:816px; padding:30px 24px 0px 24px; }
.page_content p { float:left; width:100%; margin-bottom:20px; line-height:20px; font-size:13px; }
.page_content p a:link, .page_content p a:visited { text-decoration:underline; color:#989898; font-weight:400; }
.page_content p a:hover, .page_content p a:active { text-decoration:none; }
.page_content h2 { float: left; font-size: 18px; line-height: 22px; margin-bottom: 20px; font-weight: 400; text-transform: capitalize; }
.promotion_banner { width: 544px; margin: -10px auto 50px auto; padding: 20px 40px; border: 2px solid #000; }
.promotion_banner p:first-of-type { text-align:center!important; font-size:16px; color:#222; font-weight: 600; }
.promotion_banner p { text-align:center!important; font-size:12px; color:#222; font-weight: 600; }
.promo_banner_code { font-size: 20px; font-weight: 600; width: 40%; text-align: center!important; margin: 10px auto; padding: 6px 10px; /*background-color: #90FFB8;*/ background-color:#000; color:#fff!important; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius: 2px; border-radius: 2px; border-radius: 2px; text-transform:uppercase; }
.promo_banner_code_expire { font-size: 9px!important; color:#888!important; }
ul.small_product_list { width:864px; float:left; margin-bottom:60px; border-bottom:1px solid #d5d5d5; }
ul.small_product_list:last-of-type { margin-bottom:0px; border-bottom:none; }
ul.small_product_list > li { float:left; width:864px; margin:0px; }
ul.small_product_list > li > span { float:left; width:170px; margin:0px 10px 0px 0px; display:block; }
ul.small_product_list > li > span > a:link, ul.small_product_list > li > span > a:visited, ul.small_product_list > li > span > a:hover, ul.small_product_list > li > span > a:active { float:left; color:#222; font-size:14px; text-transform:uppercase; }
ul.small_product_list > li > ul { float:left; width:684px; margin:0px; }
ul.small_product_list > li > ul > li { float:left; width:208px; display:block; margin:0px 30px 40px 0px; }
ul.small_product_list > li > ul > li > a { float:left; width:208px; display:block; padding-bottom:10px; }
ul.small_product_list > li > ul > li span.img { float:left; width:208px; margin:0px 0px 10px 0px; padding:0px; }
ul.small_product_list > li > ul > li:nth-child(3n+3) {
margin-right:0px;
}
ul.small_product_list > li > ul > li span.product_list_title { float:left; width:208px; margin:10px 0px 0px 0px; height:20px; line-height:20px; font-size:16px; text-align:left; text-transform:capitalize; color:#222; }
ul.small_product_list > li > ul > li h3 span { float:right; height:20px; line-height:20px; font-size:16px; text-align:right; color:#222; }
ul.small_product_list > li > ul > li span.price { float:left; width:208px; margin: 5px 0px 0px 0px; height: 20px; line-height: 20px; font-size: 12px; text-align:left; text-transform:uppercase; letter-spacing:1px; color:#787878; }
ul.product_list { width:864px; float:left; }
ul.product_list li { float:left; width:242px; margin:0px 69px 40px 0px; }
ul.product_list li a { float:left; width:242px; display:block; padding-bottom:10px; }
ul.product_list li span.img { float:left; width:242px; margin:0px 0px 10px 0px; padding:0px; }
ul.product_list li:nth-child(3n+3) {
margin-right:0px;
}
ul.product_list li span.product_list_title { float:left; width:242px; margin:10px 0px 0px 0px; height:20px; line-height:20px; font-size:16px; text-align:left; text-transform:capitalize; color:#222; }
ul.product_list li h3 span { float:right; height:20px; line-height:20px; font-size:16px; text-align:right; color:#222; }
ul.product_list li span.price { float:left; width:242px; margin: 5px 0px 0px 0px; height: 20px; line-height: 20px; font-size: 12px; text-align:left; text-transform:uppercase; letter-spacing:1px; color:#787878; }
.col_text_left { float:left; width:393px; margin-right:30px; }
.col_text_right { float:left; width:393px; }
.col_text_left p, .col_text_right p { float:left; width:393px; font-size:11px; line-height:20px; color: #222; margin-bottom:20px; text-align:justify; }
.col_left { float:left; width:386px; margin-right:44px; }
.col_left h2, .col_right h2, .col_left h3, .col_right h3 { float:left; width:100%; font-size:18px; line-height:22px; margin-bottom:20px; font-weight:400; text-transform:capitalize; }
.col_left h3, .col_right h3 { margin-bottom:40px; }
.col_right { float:left; width:386px; }
.col_right h4 { float:left; width:386px; font-size:36px; line-height:25px; margin-bottom:14px; font-weight:300; }
.col_right h5 { float:left; width:386px; font-size:25px; font-weight:400; margin-bottom:20px; }
.col_right h5 { float:left; width:386px; font-size:25px; font-weight:400; margin-bottom:20px; }
.col_right h6 { float:left; width:386px; font-size:13px; color: #222; font-weight:600; margin-bottom:20px; }
.col_left p, .col_right p { float:left; width:386px; font-size:13px; line-height:18px; color: #222; margin-bottom:20px; text-align:justify; }
.col_left ul, .col_right ul { float:left; width:386px; font-size:13px; line-height:18px; color: #222; margin-bottom:20px; text-align:justify; }
.third {width:33%!important;}
.two_thirds {width:61%!important;}
.third p, .two_thirds p {width:100%!important;}
.col_right ul.retailers { float:left; width:100%; }
.col_right ul.retailers li.retailer { float:left; width:100%; font-size:13px; line-height:18px; color: #222; margin-bottom:40px; text-align:center; }
.col_right ul.retailers li.retailer h3 {font-size:58px; text-align:center; text-transform:uppercase;}
.rowElem { float:left; width:100%; margin-bottom:20px; display:block; }
.rowElem select#calc_shipping_country, .rowElem select#calc_shipping_state, .rowElem #calc_shipping_postcode, .rowElem #calc_shipping_state { float:right; margin: 0px 0px 0px 0px; }
.rowElem #calc_shipping_postcode { width:100px; }
.rowElem #calc_shipping_state { width:160px; }
.rowElem_review { float:left; width:400px; margin-bottom:8px; display:block; }
.rowElem.applied-coupons { margin-bottom:0px; }
.rowElem.checkoutbtn { margin-top:30px; }
.rowElem.coupons input { margin-bottom:0px; }
.actions { float:left; width:100%; padding:0px; margin:30px 0px; }
.cart-collaterals .cart_totals h2 { float:left; font-size:18px; font-weight:600; width:100%; margin-bottom:20px; text-align:right; }
.cart_totals { float:left; width:100%; }
.cart_totals_row { float:left; width:100%; margin-bottom:20px; text-align:right; font-size:14px; }
.cart_totals_row.short { margin-bottom:0px; }
.cart_totals_row.short .button { float:right; }
.cart_totals_row.short input { margin:0px; }
.cart_totals_row_item_header { float:right; text-align:right; font-size:14px; font-weight:600; margin-right:10px; line-height: 29px; }
.cart_totals_row_item { float:right; text-align:right; font-size:14px; color:#787878; line-height: 29px; height: 29px; }
.cart_totals_row select { margin:0px 0px 0px 0px; }
.shipping-calculator-form { float:right; padding:0px; }
.shipping-calculator-form { margin-bottom:20px; }
.shipping-calculator-form .rowElem { margin-bottom:10px; }
.applied-coupons-label { float:right; text-align:right; font-weight:600; margin-right:10px; height:29px; line-height:29px; }
ul.applied-coupons { float:right; }
ul.applied-coupons li { float:right; text-align:right; }
ul.applied-coupons li span { display: inline; text-align:right; margin-right:10px; }
ul.applied-coupons li a:link, ul.applied-coupons li a:visited { display:block; background-color:#90FFB8; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius: 2px; border-radius: 2px; border-radius: 2px; padding:6px 10px; color: #222; }
ul.applied-coupons li a:hover, ul.applied-coupons li a:active { display:block; background-color: #DDD; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius: 2px; border-radius: 2px; border-radius: 2px; padding:6px 10px; color: #666; }
.edit_button_container { float:left; width:100%; margin-bottom:15px; }
.address { float:left; width:100%; margin-bottom:5px; }
.address p { float:left; width:100%; margin-bottom:5px; }
.homepage{ padding:1px 0px 40px 0px;}
.homepage_slides { float:left; width:864px; height:576px; }
.slides { float:left; width:864px; height:576px; }
ul.slides_container li { float:left; width:864px; height:576px; display:none; }
/* -------------------------------*/
/* ------ PRODUCT PAGE -------*/
/* -------------------------------*/
.col_left_details { float:left; width:500px; min-width:500px; min-height:100px; margin-right:64px; }
.col_left_details h2 { float:left; width:500px; font-size:18px; line-height:22px; margin-bottom:20px; font-weight:400; text-transform:capitalize; }
.col_right_details h2 { float:left; width:300px; font-size:22px; line-height:22px; margin-bottom:20px; font-weight:400; text-transform:capitalize; }
.col_right_details { float:left; width:300px; }
.col_right_details h1 { float:left; width:300px; font-size:26px; line-height:25px; margin-bottom:20px; font-weight:300; }
.col_right_details h3 { float:left; width:300px; font-size:26px; line-height:25px; margin-bottom:20px; font-weight:300; }
.col_right_details h4 { float:left; width:300px; font-size:14px; font-weight:400; text-transform: uppercase; margin-bottom:20px; letter-spacing: 1px; color: #787878; }
.col_right_details h5, .col_right_details p.price { float:left; width:300px; font-size:18px; font-weight:300; margin-bottom:30px; }
.col_right_details h6, .col_right_details p.madeinusa { float:left; width:300px; font-size:10px; color: #222; font-weight:600; margin-bottom:20px; text-transform: uppercase; }
.col_right_details p.freeshipping { float: left; width: 300px; margin-bottom: 20px; }
.col_right_details p.freeshipping span { float: left; font-size: 10px; background-color: #222; font-weight: 600; text-transform: uppercase; color: white; padding: 5px 10px; }
.col_left_details p { float:left; width:500px; font-size:12px; line-height:18px; color: #222; margin-bottom:20px; text-align:justify; }
.col_right_details p { float:left; width:300px; font-size:12px; line-height:16px; color: #222; margin-bottom:20px; }
.col_left_details ul { float:left; width:500px; font-size:12px; line-height:18px; color: #222; margin-bottom:20px; text-align:justify; }
.col_right_details ul { float:left; width:300px; font-size:11px; line-height:14px; color: #222; margin-bottom:20px; text-align:justify; }
.post_image { float:left; width:500px; min-width:500px; min-height:400px; }
.product_slides { float:left; width:500px; position:relative; }
.product_slides .slides_container { float:left; width:500px; min-width:500px; min-height:400px; display:none; }
.product_slides .slides_container span { float:left; width:500px; min-height:400px; display:block; }
.product_slides .prev { position:absolute; z-index:5000; top:0px; right:40px; }
.product_slides .next { position:absolute; z-index:5000; top:0px; right:0px; }
.product_slides .prev, .product_slides .next { margin:0px; padding:0px; width:40px; height:30px; text-align:center; display:block; font-weight: normal; font-size: 18px; line-height: 24px; color:#222!important; background-color: rgba(246, 246, 246, .85); text-decoration:none!important; }
.product_slides:hover .prev, .product_slides:hover .next { background-color: rgba(246, 246, 246, 1); color:#222!important; text-decoration:none!important; }
.product_slides .prev:hover, .product_slides .next:hover { background-color: rgba(0, 0, 0, 1); color:#fff!important; text-decoration:none!important; }
.addtocart { margin-top:14px!important; }
/* ----------------------*/
/* ------ FORMS -------*/
/* ----------------------*/
.screenReader { display:none; }
span#shiptobilling { float:right; width: auto; margin-bottom: 0px!important; margin-left: 22px; padding: 0px 8px; height: 22px!important; min-height: 22px!important; border-radius: 2px; border-radius: 2px; border-radius: 2px; background-color:#eee; }
span#shiptobilling input { float: right; margin:4px 0px 0px 10px!important; }
span#shiptobilling label { float: right; width:auto!important; margin:0px!important; line-height: 22px!important; }
.quantity { float:left; width:100%; }
.input-text.qty.text { float:left; margin-right:10px; margin-bottom:0px; width:22px!important; }
.form_item_row, .form-row { float:left; margin-bottom:8px; min-height:40px; width: 100%; max-width: 400px; }
p.form-row { margin-bottom:0px; }
.input-text, .text { float:left; width:238px; height: 27px; padding: 0px 8px; margin:0px 0px 10px 10px; color:#222; font-size:13px; outline: none; border:1px solid #787878; border-right-color:#c5c5c5; border-bottom-color:#c5c5c5; background-color:#fff; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1); box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1); box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1); font-family: 'Open Sans', sans-serif; }
textarea, #order_comments { float:left!important; color:#222; font-size:13px; outline: none; border:1px solid #787878; background-color:#fff; height: 110px; padding:8px; width: 237px; max-width: 237px; max-height:160px; float:left; margin:0px 0px 10px 10px; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1); box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1); box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1); border-right-color:#c5c5c5; border-bottom-color:#c5c5c5; font-family: 'Open Sans', sans-serif; }
#order_comments { height: 60px!important; max-height: 60px!important; }
label { float:left; width:120px; font-size:12px; line-height:28px; }
select { position:relative; outline: none; border-radius:2px; border-radius:2px; border-radius:2px; border:1px solid #787878; border-right-color:#c5c5c5; border-bottom-color:#c5c5c5; background-color:#fff; height: 29px; padding: 4px 8px; float:left; margin:0px 10px 10px 10px; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1); box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1); box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1); background-color: #fafafa; background-image: gradient(linear, left top, left bottom, from(#fafafa), to(#f3f1f1)); background-image: linear-gradient(top, #fafafa, #f3f1f1); background-image: linear-gradient(top, #fafafa, #f3f1f1); background-image: linear-gradient(top, #fafafa, #f3f1f1); background-image: linear-gradient(top, #fafafa, #f3f1f1); background-image: linear-gradient(to bottom, #fafafa, #f3f1f1); max-width:240px!important; }
.subscribe_field {float:left; margin: 5px 6px 5px 0px; width: 128px;}
.subscribe_form {float:left; margin-bottom:6px; width:242px; height:39px; overflow:hidden;}
/* -----------------------*/
/* ------- TABLES -------*/
/* -----------------------*/
.cart_table, .orders_table { float:left; width: 100%; font-size:12px; text-transform:uppercase; }
.orders_table { margin-bottom:30px; }
.cart_table_header, .orders_table_header { float:left; width: 100%; height:30px; font-weight:600; font-size:12px; text-transform:uppercase; line-height:30px; background-color:#f7f7f7; }
.cart_table_body, .orders_table_body { float:left; width: 100%; }
.cart_table_body, .orders_table_body { margin-bottom:30px; }
.cart_table_row, .order_table_row { float:left; width: 100%; border-bottom:1px solid #E5e5e5; }
.cart_table .coupon_set { float:right; }
.cart_table .coupon_set label { line-height:29px; }
.product-name { float:left; width:250px; }
.product-price { float:left; width:120px; }
.product-quantity { float:left; width:188px; }
.product-subtotal { float:left; width:90px; }
.product-thumbnail { float:left; width:105px; min-width:105px; max-width:105px; }
.product-thumbnail a { float:left; width:65px; max-width:65px; margin:0px; padding:20px; }
.product-thumbnail a img { padding:0px; }
.product-remove { float:left; width:62px; min-width:62px; }
.listed { line-height:100px; }
/*.listed input { margin:46px 0px 0px 0px; }*/
.listed a:link, .listed a:visited { color:#222; }
.listed a:hover, .listed a:active { color:#787878; }
.listed .quantity { margin-top:36px; }
.order_review { float:left; width:814px; margin-top:20px; }
.order_review h3 { float:left; width:100%; font-size:18px; line-height:22px; margin-bottom:20px; font-weight:400; text-transform:capitalize; }
#order_review .listed { line-height: 40px!important; font-size:13px; }
#order_review .product-name { width:300px; }
#order_review .product-subtotal { width:200px; }
#order_review .cart_totals { margin:20px 0px; }
#payment { float:left; width:100%; }
.payment_box { margin-right: 10px; float: left; }
.payment_box p { line-height:24px!important; height:24px; margin-bottom:0px; }
ul.payment_methods.methods { float:right; margin-bottom:20px; }
ul.payment_methods.methods li { float:right; }
ul.payment_methods.methods li p { float:right; text-align:right; font-size:10px!important; color:#787878; line-height:14px; }
ul.payment_methods.methods li label, ul.payment_methods.methods li input { float:right; width:auto!important; }
ul.payment_methods.methods li span { float:right; height:24px; line-height: 24px; font-size:13px; }
ul.payment_methods.methods li input[type="radio"] { margin-top: 6px; }
ul.payment_methods.methods li img { float:left; margin-right:10px; }
.order_table_row { padding:6px 0px; height:34px; }
.order_number { float:left; width:45px; padding-right:10px; }
.order_date { float:left; width:180px; padding-right:10px; }
.order_total { float:left; width:70px; padding-right:10px; }
.order_shipto { float:left; width:240px; padding-right:10px; }
.order_status { float:left; width:80px; padding-right:10px; }
.order_actions { float:left; width:140px; margin-top:6px; }
/* ---------------------------*/
/* ------ SHARE THIS -------*/
/* ---------------------------*/
.share_this { float:left; height:20px; width:100%; overflow:hidden; margin:30px 0px; padding:20px 0px; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; }
.share_this a, .share_this iframe { float:left; margin-right:10px!important; }
.pinterest { float:left; margin-right:10px!important; }
/* ------------------------*/
/* ------ BUTTONS-------*/
/* ------------------------*/
a.shipping-calculator-button:link, a.shipping-calculator-button:visited { float:right; padding:0px 10px; margin:0px 0px 0px 0px; height: 27px; text-decoration: none; color:#fff; font-weight: normal; font-size: 13px; line-height: 27px; text-shadow:0px -1px 0px #0a0909; background-color: #272526; background-image: gradient(linear, left top, left bottom, from(#272526), to(#161415)); background-image: linear-gradient(top, #272526, #161415); background-image: linear-gradient(top, #272526, #161415); background-image: linear-gradient(top, #272526, #161415); background-image: linear-gradient(top, #272526, #161415); background-image: linear-gradient(to bottom, #272526, #161415); box-shadow: inset 0px 1px 0px rgba(77, 74, 75, 1); border: 1px solid #0a0909; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius:2px; border-radius:2px; border-radius:2px; }
a.shipping-calculator-button:hover, a.shipping-calculator-button:active { background-color: #3c393a; background-image: gradient(linear, left top, left bottom, from(#3c393a), to(#272526)); background-image: linear-gradient(top, #3c393a, #272526); background-image: linear-gradient(top, #3c393a, #272526); background-image: linear-gradient(top, #3c393a, #272526); background-image: linear-gradient(top, #3c393a, #272526); background-image: linear-gradient(to bottom, #3c393a, #272526); box-shadow: inset 0px 1px 0px rgba(77, 74, 75, 1); border: 1px solid #0a0909; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius:2px; border-radius:2px; border-radius:2px; cursor: pointer!important; }
a.remove { display: block; float: left; padding:0px 10px; margin:36px 0px 0px 0px; height: 27px; text-decoration: none; color:#222; font-weight: normal; font-size: 13px; line-height: 27px; text-shadow:0px 1px 0px #fff; background-color: #f7f7f7; background-image: gradient(linear, left top, left bottom, from(#f7f7f7), to(#dbdbdb)); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(to bottom, #f7f7f7, #dbdbdb); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1); border: 1px solid #707070; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius:2px; border-radius:2px; border-radius:2px; }
a.remove:hover { cursor: pointer!important; background-color: #ffffff; background-image: gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7)); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(to bottom, #ffffff, #f7f7f7); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1); border: 1px solid #a7a7a7; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius:2px; border-radius:2px; border-radius:2px; }
.checkout-button, a.checkout-button, a.checkout-button:link, a.checkout-button:visited { width:auto!important; float:right; padding:0px 10px; margin: 0px 0px 0px 10px; height: 29px; text-decoration: none; color:#222; font-weight: normal; font-size: 13px; line-height: 27px; text-shadow:0px 1px 0px #fff; background-color: #f7f7f7; background-image: gradient(linear, left top, left bottom, from(#f7f7f7), to(#dbdbdb)); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(to bottom, #f7f7f7, #dbdbdb); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1); border: 1px solid #707070; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius:2px; border-radius:2px; border-radius:2px; }
.checkout-button:hover, a.checkout-button:hover, a.checkout-button:active { cursor: pointer!important; background-color: #ffffff; background-image: gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7)); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(to bottom, #ffffff, #f7f7f7); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1); border: 1px solid #a7a7a7; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius:2px; border-radius:2px; border-radius:2px; }
a.checkout-button, a.checkout-button:link, a.checkout-button:visited { height:27px; }
input.minus, input.plus { float:left; width:30px; padding:0px 10px; margin: 0px 0px 0px 0px; height: 29px; text-decoration: none; color:#222; font-weight: 400; font-size: 13px; line-height: 27px; text-shadow:0px 1px 0px #fff; background-color: #f7f7f7; background-image: gradient(linear, left top, left bottom, from(#f7f7f7), to(#dbdbdb)); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(to bottom, #f7f7f7, #dbdbdb); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1); border: 1px solid #707070; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius:2px; border-radius:2px; border-radius:2px; }
input.minus:hover, input.plus:hover { cursor: pointer!important; background-color: #ffffff; background-image: gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7)); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(to bottom, #ffffff, #f7f7f7); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1); border: 1px solid #a7a7a7; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius:2px; border-radius:2px; border-radius:2px; }
input.plus.place_order { width:auto!important; }
a.edit_button, a.edit_button:link, a.edit_button:visited { width:auto!important; float:left; padding:0px 10px; margin: 0px 0px 0px 0px; height: 29px; text-decoration: none; color:#222; font-weight: normal; font-size: 13px; line-height: 27px; text-shadow:0px 1px 0px #fff; background-color: #f7f7f7; background-image: gradient(linear, left top, left bottom, from(#f7f7f7), to(#dbdbdb)); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(top, #f7f7f7, #dbdbdb); background-image: linear-gradient(to bottom, #f7f7f7, #dbdbdb); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1); border: 1px solid #707070; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius:2px; border-radius:2px; border-radius:2px; }
a.edit_button:hover, a.edit_button:active { cursor: pointer!important; background-color: #ffffff; background-image: gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7)); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(top, #ffffff, #f7f7f7); background-image: linear-gradient(to bottom, #ffffff, #f7f7f7); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1); border: 1px solid #a7a7a7; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border-radius:2px; border-radius:2px; border-radius:2px; }
.small-btn { height:19px!important; padding:0px 6px!important; line-height:19px!important; font-size: 10px!important; }
a.checkout-button.small-btn { margin: 0px 0px 0px 5px!important; }
.subscribe_btn {margin-top:5px!important;}
/* -------------------------------*/
/* ------ FORM ERRORS -------*/
/* -------------------------------*/
.alert { float:left; width:344px; margin-bottom:30px; background-color:#f9f9f9; padding:20px; border:1px solid #EFEFEF; }
.notice { float: left; width:344px; font-size: 14px; line-height: 22px; margin-bottom: 20px; font-weight: 600; text-transform: capitalize; }
.content p.error { float: left; width:344px; color: #F03; font-size: 10px; font-weight: 600; margin-bottom: 0px; }
/* --------------------------------*/
/* ------ SHOP MESSAGES -------*/
/* --------------------------------*/
.jigoshop_message { padding:10px; margin: -20px 0px 40px 0px; background-color:#F2F2F2; color:#000; font-size:13px; font-weight:600; border-radius: 3px; border-radius: 3px; background-clip: padding; background-clip: padding-box; background-clip: padding-box; border:1px solid #ddd; opacity:0;}
.jigoshop_message a:link, .jigoshop_message a:visited { color:#666; text-decoration:none; display: inline-block; float: right; }
.jigoshop_message a:hover, .jigoshop_message a:active { color:#000; text-decoration:underline; }
.jigoshop_error {/* float: left;*/ padding:10px; margin: 10px 0px 40px 0px; background-color: #FF5B74; color:#000; font-size:13px; font-weight:600; border-radius: 3px; border-radius: 3px; background-clip: padding; background-clip: padding-box; background-clip: padding-box; }
.jigoshop_error a:link, .jigoshop_error a:visited { color:#666; text-decoration:none; display: inline-block; float: right; }
.jjigoshop_error a:hover, .jigoshop_error a:active { color:#000; text-decoration:underline; }
/* --------------------------*/
/* ------- FOOTER -------*/
/* --------------------------*/
.footer_block { float:left;width:864px; height:148px; margin-bottom:40px;}
.footer_block_left { float:left;width:186px; height:148px; padding:0px 32px;}
.footer_block_middle { float:left;width:242px; height:148px; border-left:1px solid #d5d5d5; padding:0px 32px; }
.footer_block_right { float:left;width:242px; height:148px; border-left:1px solid #d5d5d5; padding:0px 32px; }
.footer_block_content {float:left;width:242px; margin:28px 0px; }
.footer_block_top { float:left; height:11px; line-height:9px; margin-bottom:5px; text-transform:uppercase; font-size:9px; color:#787878;}
.footer_block_top a:link, .footer_block_top a:visited {font-size:9px; color:#787878;}
.footer_block_text { float:left; width:242px; font-size:11px; color:#000; }
.footer_block_text p { float:left; width:242px; font-size:11px; line-height:14px; }
.the_tweet {float:left; width:242px; font-size:11px; color:#000; margin-bottom:6px; }
.the_tweet a:link, .the_tweet a:visited, .the_tweet_time a:link, .the_tweet_time a:visited { color:#787878; text-decoration:underline; font-weight:600;}
.the_tweet a:hover, .the_tweet a:active, .the_tweet_time a:hover, .the_tweet_time a:active { text-decoration:none; font-weight:600; }
.the_tweet_time {float:left; font-size:9px; color:#000;}
.social_buttons {width:242px; height:21px; float:left;}
a.social_facebook {background-image:url(images/social_facebook.png); background-position:bottom; background-repeat:no-repeat; height:21px; width:21px; margin-right:5px;}
a.social_twitter {background-image:url(images/social_twitter.png); background-position:bottom; background-repeat:no-repeat; height:21px; width:21px;margin-right:5px;}
a.social_instagram {background-image:url(images/social_instagram.png); background-position:bottom; background-repeat:no-repeat; height:21px; width:21px;margin-right:5px;}
a.social_facebook:hover {background-position:top; }
a.social_twitter:hover {background-position:top; }
a.social_instagram:hover {background-position:top; }
.footer_product_image_container {float:left; width:186px; margin:25px 0px;}
.footer_product_image_container a {float:left; width:186px; margin:0px;}
.footer_product_title {float:left; width:186px; font-size:9px; color:#787878; text-align:center; margin-top:6px; text-transform:uppercase;}
.subscribe_thanks {float:left;width:242px; margin-top:6px;}
.subscribe_thanks span {float:left; width:242px; font-size:14px; font-weight:600;}
.footer { position:absolute; z-index:102; bottom:0px; margin:0px; padding:0px; width:864px; height:231px; background-color:#FFF; }
.footer_container { width:864px; height:42px; /*margin-top:-1px;*/ border-top:1px solid #d5d5d5;}
.footer_copy { float:left; height:42px; line-height:42px; color:#a9a9a9; font-size:9px; text-transform:uppercase; }
.footer_copy ul { float:left; height:42px; margin-left:24px; }
.footer_copy ul li { float:left; height:42px; margin-right:16px; }
.footer_backtop { float:right; height:42px; background-color:#000; }
.footer_backtop a { display:block; height:42px; line-height:42px; padding:0px 24px; color:#FFF; font-size:9px; text-transform:uppercase; }
.footer_backtop a:hover { color:#999; }
.footer_links { margin:0px; padding:0px; float:right; width:auto; height:42px; font-size:9px; text-transform:uppercase; }
.footer_links > ul { float:right; margin:0px 14px 0px 0px; padding:0px; height:42px; white-space: nowrap; text-transform:uppercase; position:relative; }
.footer_links > ul > li { float:left; height:42px; font-size:9px; padding:0px; margin:0px; position: relative; color:#989898!important; }
.footer_links > ul > li:hover { cursor:pointer; }
.footer_links > ul > li > a, .footer_links > ul > li > a:link, .footer_links > ul > li > a:active, .footer_links > ul > li > a:visited { display:block; color:#000; height:42px; line-height:42px; padding:0px 12px; }
.footer_links > ul > li:hover > a { position:relative; z-index:105; color:#9E9E9E!important; background-color:#000; cursor:pointer; }
.footer_links > ul > li:hover > a:hover { color:#9E9E9E!important;}
.footer_links > ul > li > ul { position: absolute; visibility:hidden; z-index:104; padding:0px!important; margin:0px; min-width:50px; bottom:100%; background-color: #000; cursor:default; left:0px; white-space:nowrap; color:#9E9E9E!important; }
.footer_links > ul > li > ul > li { position:relative; background-color:#000; padding:0px!important; }
.footer_links > ul > li > ul > li > a, .footer_links > ul > li > ul > li > a:link, .footer_links > ul > li > ul > li > a:visited { text-align:left; display:block; color:#fff!important; font-size:9px; height:30px; line-height:30px; white-space:nowrap; padding:0px 12px; }
.footer_links > ul > li > ul > li > a:hover, .footer_links > ul > li > ul > li > a:active {color:#9E9E9E!important; }
.footer_links > ul > li:hover > ul { visibility:visible; position: absolute; min-width:50px; z-index:104; padding:0px; bottom:100%; background-color: #000; cursor:default; }
/* --------------------------------*/
/* ------- CONDITIONALS -------*/
/* --------------------------------*/
.left { float:left!important; }
.right { float:right!important; }
.margin-right { margin-right:10px!important; margin-left:0px!important; }
.margin-left { margin-right:0px!important; margin-left:10px!important; }
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |