/*--------------------------------------------------------------------------------------------------

   Simply Buttons, version 1.0
   (c) 2007-2009 Kevin Miller

   This script is freely distributable under the terms of an MIT-style license.

   BUTTON DEFINITIONS

   Edit below at your own risk, everything done here is for a reason for cross browser
   compatibility so that the buttons will appear identical in the tested browsers.

   Tested on: IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC)

--------------------------------------------------------------------------------------------------*/

button,
a.button,
a.button:link,
a.button:visited
{
    border: none;
    display: block;
    float: left;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    white-space: nowrap;
    overflow: visible;
    height: 26px;
    font: normal 12px "Helvetica Neue", Helvetica, clean, sans-serif;
    color: #666666;
    background: none;
}

button
{
    margin-top: -2px;
}

.buttons
{
    margin-top: 10px;
    margin-left: 105px;
}

button span,
a.button span,
a.button:link span,
a.button:visited span
{
    display: block;
    padding: 0 14px 0 0;
    height: 24px;
    background: url(/buttons/right-default.png) right top no-repeat;
    font-weight: normal;
}


button.button_active,
a.button_active
{
}


button span span,
a.button span span,
a.button:link span span,
a.button:visited span span
{
    display: block;
    padding: 0 0 0 13px;
    height: 24px;
    line-height: 24px;
    background: url(/buttons/left-default.png) left top no-repeat;
}

button:hover,
a.button:hover
{
    color: #000000;
}

/*************
CUSTOM STYLES
*************/
form.order-summary a.delete.button
{
    height: 15px;
    margin-top: 0px;
    padding-right: 0px;
}

form.order-summary a.delete.button span
{
    background: none;
    padding: 0px;
    height: 15px;
}

form.order-summary a.delete.button span span
{
    font: normal 11px 'Rokkit', 'serif';
    background: none;
    padding: 0px;
    height: 15px;
}

form.order-summary a.delete.button:hover span
{
    color: red;
}

form.order-summary a.cart.button
{
    height: 100%;
    float: none;
    width: 200px;
    margin: 15px 0px;
    display: block;
}

button.proceed.button
{
    height: 100%;
    float: none;
    margin: 15px 0px;
    display: block;
    padding: 0px;
}

button.proceed.button span,
a.proceed.button span,
a.cart.button span
{
    background: #231F20;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px 15px 4px 15px;
}

button.proceed.button span span,
a.proceed.button span span,
a.cart.button span span
{
    font: bold 21px 'Rokkitt','serif';
    color: #E4BD2A;
    background: #231F20;
    padding: 0px;
}

button.proceed.button:hover span,
a.proceed.button:hover span,
a.cart.button:hover span
{
    color: white;
}

/***************************
**  Button types/variants **
***************************/

button:active span,
a:active:active span,
button.button_active span,
a.button_active:active span
{

  background-position: bottom right;
}

button:active span span,
a:active:active span span,
button.button_active span span,
a.button_active:active span span
{

  background-position: bottom left;
}



/** Submit/Save button **/

button.save span span,
a.save span span,
a.save:link span span,
a.save:visited span span
{
  padding-left: 30px;
  background-image: url(/buttons/left-save.png);
}

/** Cancel button **/

button.cancel span span,
a.cancel span span,
a.cancel:link span span,
a.cancel:visited span span
{
    padding-left: 30px;
    background-image: url(/buttons/left-cancel.png);
}

/** add button **/

button.add span span,
a.add span span,
a.add:link span span,
a.add:visited span span
{
  padding-left: 30px;
  background-image: url(/buttons/left-add.png);
}

/** Delete button **/

button.delete span span,
a.delete span span,
a.delete:link span span,
a.delete:visited span span
{
    padding-left: 30px;
    background-image: url(/buttons/left-delete.png);
}




/** Edit button **/

button.edit span span,
a.edit span span,
a.edit:link span span,
a.edit:visited span span
{
    padding-left: 30px;
    background-image: url(/buttons/left-edit.png);
}

/** Search button **/

button.search span span,
a.search span span,
a.search:link span span,
a.search:visited span span
{
    padding-left: 30px;
    background-image: url(/buttons/left-search.png);
}

/** Print button **/

button.print span span,
a.print span span,
a.print:link span span,
a.print:visited span span
{
    padding-left: 30px;
    background-image: url(/buttons/left-print.png);
}

/** Create button **/

button.create span span,
a.create span span,
a.create:link span span,
a.create:visited span span
{
    padding-left: 30px;
    background-image: url(/buttons/left-create.png);
}

/**************
Custom Buttons
* ************/
div.yellow-button
{
    background: url(/images/layout/button.png) no-repeat;
    width: 235px;
    height: 235px;
    position: relative;
    display: block;
    margin: 0px auto;
    font-size: 18px;
}

div.yellow-button div.text-wrap
{
    width: 125px;
    position: absolute;
    top: 45px;
    left: 50px;
    text-align: center;
    padding: 0px 5px 5px 5px;
    height: 155px;
    line-height: 130%;
}

div.yellow-button p
{
    margin-top: 0px;
    height: inherit;
}

div.yellow-button div.text-wrap span.link
{
    position: absolute;
    bottom: -25px;
    right: -50px;
}

div.yellow-button div.text-wrap span.salelink
{
    position: absolute;
    bottom: 10px;
    right: -50px;
    line-height: 100%;
}

div.yellow-button div.text-wrap a
{
    width: 235px;
    height: 65px;
    display: inline-block;
    padding-top: 165px;
}

div.yellow-button a:hover
{
    text-decoration: underline;
    color: #221e1f;
}

div.yellow-button:hover
{
    background: url(/images/layout/button-hover.png) no-repeat;
}

div.savings:hover
{
    background: url(/images/layout/button.png) no-repeat;
}

div.yellow-button.savings
{
    position: absolute;
}

div.yellow-button span.huge
{
    display: inline;
    font-size: 36px;
    font-weight: bold;
    color: #221e1f;
}

div.yellow-button span.large
{
    display: inline;
    font-size: 30px;
    font-weight: bold;
    color: #221e1f;
}

div.yellow-button span.medium
{
    display: block;
    font-size: 18px;
    color: #221e1f;
    line-height: 100%;
}

div.yellow-button span.small
{
    display: inline;
    font-size: 14px;
    color: #221e1f;
}

/********************************
Styles for 'Sale Waiting Indicator
**********************************/
div.sale-waiting div.text-wrap
{
    margin-top: 10px;
}

/*******************************
Styles for 'Sale Live' Indicator
********************************/
div.sale-live p
{
    margin-top: 15px;
}

div.sale-live span.huge
{
    line-height: 100%;
}

/*******************************
Styles for 'Savings' Indicator
********************************/
div.savings div.text-wrap
{
    padding-left: 0px;
}

div.savings p
{
    margin-top: 25px;
}

div.savings span.huge
{
    line-height: 120%;
}

/******************************
Styles for Countdown Clock
*******************************/

div.countdown-clock
{
    background: url(/images/layout/countdown-clock.png) no-repeat;
    width: 145px;
    height: 145px;
    position: absolute;
    top: 120px;
    left: 50%;
    margin-left: 80px;
    display: block;
}

div.countdown-clock:hover
{
    color: #221e1f;
}

div.countdown-clock div.text-wrap-small
{
    width: 75px;
    text-align: center;
    position: absolute;
    top: 35px;
    left: 35px;
}

div.countdown-clock div.text-wrap-small p
{
    margin-top: 5px;
    font-weight: bold;
    font-size: 14px;
}

/*****************************
Styles for Stock Indicator
******************************/
div.stock-indicator
{
    position: absolute;
    z-index: 50;
    top: 410px;
    left: 50%;
    margin-left: 80px;
    width: 145px;
    height: 145px;
    display: block;
}

div.stock-indicator div.text-wrap-small
{
    width: 75px;
    text-align: center;
    position: absolute;
    top: 35px;
    left: 35px;
}

div.stock-indicator a:hover
{
    color: #221e1f;
}

div.stock-indicator p
{
    margin-top: 5px;
}

div.text-wrap-small p span.large
{
    font-weight: bold;
    font-size: 14px;
    color: #221e1f;
}

div.text-wrap-small p span.small
{
    font-size: 12px;
    color: #221e1f;
}

/*Styles for individual colours*/
div.red
{
    background: url(/images/layout/stock-indicator-red.png) no-repeat;
}

div.green
{
    background: url(/images/layout/stock-indicator-green.png) no-repeat;
}

div.yellow
{
    background: url(/images/layout/stock-indicator-yellow.png) no-repeat;
}