/* 
    Document   : buttons
    Created on : 16-Dec-2009, 10:59:58
    Author     : Peter Howells
    Description: Generic button styles
*/

/*
Generic button
Usage:
<button class="buttonGeneric" name="mybutton" type="submit">
	<span>Button text</span>
</button>
*/
.buttonGeneric {
	background:url(/images/buttons/tile/generic.png) left -52px no-repeat;
	border:0;
	cursor:pointer;
	display:inline-block;
	font-size:120%;
	height:26px;
	padding-left:5px;
	position:relative;
	outline:0;
	overflow:visible;
	text-decoration:none
}
.buttonGeneric:hover {
	background-position:left -78px;
	text-decoration:none!important;
}
.buttonGeneric::-moz-focus-inner {
	border:0
}
.buttonGeneric span {
	background:url(/images/buttons/tile/generic.png) right top no-repeat;
	color:#fff;
	display:block;
	font-weight:bold;
	height:26px;
	line-height:26px;
	padding:0 10px 0 5px;
	position:relative;
	white-space:nowrap
}
.buttonGeneric:hover span {
	background-position:right -26px
}

/* action */
.buttonAction {
	background:url(/images/buttons/tile/action.png) left -52px no-repeat
}
.buttonAction span {
	background:url(/images/buttons/tile/action.png) right top no-repeat
}

/* backwards action */
.buttonActionBack {
	background:url(/images/buttons/tile/action-back.png) right -52px no-repeat;
	padding-left:0;
	padding-right:5px;
}
.buttonActionBack span {
	background:url(/images/buttons/tile/action-back.png) left top no-repeat;
	padding:0 5px 0 34px
}
.buttonActionBack:hover {
	background-position:right -78px
}
.buttonActionBack:hover span {
	background-position:left -26px
}
/* accordion action */
.buttonActionAccordion {
	background:url(/images/buttons/btn_accordion.png) left -52px no-repeat;
	margin:10px 0 5px 10px;
}
.buttonActionAccordion span {
	background:url(/images/buttons/btn_accordion.png) right top no-repeat;
	padding:0 34px 0 5px
}
/* accordion action active */
.buttonActionAccordionActive {
	background:url(/images/buttons/btn_accordion_active.png) left -52px no-repeat;
	margin:10px 0 5px 10px;
}
.buttonActionAccordionActive span {
	background:url(/images/buttons/btn_accordion_active.png) right top no-repeat;
	padding:0 34px 0 5px
}


/* close action */
.buttonActionClose {
	background:url(/images/buttons/tile/action-close.png) left -52px no-repeat
}
.buttonActionClose span {
	background:url(/images/buttons/tile/action-close.png) right top no-repeat
}

/* important action */
.buttonActionImportant {
	background:url(/images/buttons/tile/action-important.png) left -52px no-repeat
}
.buttonActionImportant span {
	background:url(/images/buttons/tile/action-important.png) right top no-repeat;
	padding:0 34px 0 5px
}

/* purchase action */
.buttonActionPurchase {
	background:url(/images/buttons/tile/action-purchase.png) left -52px no-repeat
}
.buttonActionPurchase span {
	background:url(/images/buttons/tile/action-purchase.png) right top no-repeat;
	padding:0 34px 0 5px
}

/* remove action */
.buttonActionRemove {
	background:url(/images/buttons/tile/action-remove.png) left -52px no-repeat
}
.buttonActionRemove span {
	background:url(/images/buttons/tile/action-remove.png) right top no-repeat
}

/* Fix button span margin in Safari + Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	button.buttonGeneric span {
		margin:-1px 0 0 -1px;
	}
}

/*Action button plain. Use for positive action such resigter START*/
a.btnAction_plain{
display:block;
float:left;
font-weight:bold;
font-size:13px;
color:#FFFFFF;
text-decoration:none;
background:url(/images/buttons/new/btn_action_plain.png) no-repeat left top;
height:28px;
}
a.btnAction_plain span{
display:block;
float:left;
background:url(/images/buttons/new/btn_action_plain.png) no-repeat right top;
height:25px;
padding-top:5px;
padding-right:10px;
margin-left:10px;

}
a.btnAction_plain:hover{
background-position:0 0; color:#3b513d;
cursor:pointer;
}
a.btnAction_plain span:hover{
background-position:0 right;
cursor:pointer;
}

/*Action button plain. Use for positive action such resigter END*/


/*General button plain. Use for gernal action such update add new deleivery address START*/
a.btn_general{
display:block;
float:left;
font-weight:bold;
font-size:13px;
color:#FFFFFF;
text-decoration:none;
background:url('/images/buttons/new/generalbtn_bg.png') no-repeat left top;
height:28px;
}
a.btn_general span{
display:block;
float:left;
background:url('/images/buttons/new/generalbtn_bg.png') no-repeat right top;
height:25px;

padding-right:10px;
margin-left:10px;

}
a.btn_general:hover{
background-position:0 0; color:#464543;
cursor:pointer;
}
a.btn_general span:hover{
background-position:0 right;
cursor:pointer;
}

/*General button plain. Use for gernal action such update add new deleivery address END*/

/*Action button with Arrow. Use for checkout, add to bag START*/
a.btnAction_arrow{
display:block;
float:left;
font-weight:bold;
font-size:13px;
color:#FFFFFF;
text-decoration:none;
background:url('/images/buttons/new/btn_action_left.png') no-repeat left top;
height:28px;
padding-left: 5px;
}
a.btnAction_arrow span{
display:block;
float:left;
background:url('/images/buttons/new/btn_action_arrow.png') no-repeat right top;
height:25px;
padding-right:32px;
margin-left:4px;
}
* html a.btnAction_arrow span{
margin-left:2px;
}
a.btnAction_arrow:hover{
background-position:0 0; color:#3b513d;
cursor:pointer;
text-decoration:none;
}
a.btnAction_arrow :hover span{
background-position:0 right;
cursor:pointer;
text-decoration:none;
}
/*Action button with Arrow. Use for checkout, add to bag END*/


/*Back button with Arrow. Use for back button functionality START*/
a.btnBack{
display:block;
float:left;
font-weight:bold;
font-size:13px;
color:#FFFFFF;
text-decoration:none;
background:url('/images/buttons/new/btn_back_arrow.png') no-repeat left top;
height:28px;
}
a.btnBack span{
display:block;
float:left;
background:url('/images/buttons/new/btn_back_right.png') no-repeat right top;
height:25px;
padding-right:10px;
margin-left:32px;
}
a.btnBack:hover{
background-position:0 0; color:#286768;
cursor:pointer;
text-decoration:none;
}
a.btnBack :hover span{
background-position:0 right;
cursor:pointer;
}
/*Back button with Arrow. Use for back button functionality END*/



/* =Buttons (pre redesign November 2009)
-----------------------------------------------------------------------------*/

.button{
	cursor:pointer;
	border: 3px double #999999;
	border-top-color: #CCCCCC;
	border-left-color: #CCCCCC;
	color:#414142;
	font-size:1em;
	font-weight:bold;
	text-decoration:none;
	background-repeat:no-repeat;
	width:auto;
    overflow:visible;
}

.button:hover{
	border: 3px double #cccccc;
	border-top-color: #999999;
	border-left-color: #999999;
	color:#87A712;
	font-weight:bold;
	background-repeat:no-repeat;
	text-decoration:none;
}
.btn_details{
	padding:0 15px 1px 4px;
	margin:0 0 5px 0;
	background-position: right;
	width:150px;
	text-align:left;
	background-image:url(/images/buttons/button_generic.gif);

}
.btn_details_buy{
	padding:0 15px 1px 4px;
	margin:0 0 5px 0;
	background-position: right;
	width:150px;
	text-align:left;
	background-image:url(/images/buttons/basket.gif);

}

.btn_details:hover{
	background-image:url(/images/buttons/button_generic_down.gif);
}
.btn_email{
	padding:0 4px 1px 15px;
	margin:0 0 5px 0;
	background-position: left;
	width:150px;
	text-align:right;
	background-image:url(/images/buttons/email_friends.gif);

}
.btn_email:hover{
	background-image:url(/images/buttons/email_friends_down.gif);
}

.btn_generic{
	padding:0 15px 1px 4px;
	background-position: right;
	background-image:url(/images/buttons/button_generic.gif);
}

.btn_generic:hover{
	background-image:url(/images/buttons/button_generic_down.gif);
}

.btn_add_basic {
    cursor:pointer;
    background-color:#fff;
    font-size:1em;
    border:none;
    text-decoration:underline;
    background-image:url(/images/generic/expand_icon.gif);
    background-position:1px 2px;
    background-repeat:no-repeat;
    padding:0 0 0 12px;
    text-align:left;
}
.btn_add_basic:hover{
    text-decoration:none;
}

.btn_top{
	padding:0 20px 1px 4px;
	background-position:right;
	background-image:url(/images/buttons/button_generic_top.gif);
}

.btn_top:hover{
	background-image:url(/images/buttons/button_generic_down_top.gif);
}

.btn_close{
	padding:0 20px 1px 4px;
	background-position:right;
	background-image:url(/images/buttons/button_generic_close.gif);
}

.btn_close:hover{
	color:#B92126;
	background-image:url(/images/buttons/button_generic_down_close.gif);
}

.btn_back{
    /*margin:0 10px 0 10px;*/
	padding:0 10px 1px 15px;
	background-position:left;
	background-image:url(/images/buttons/button_generic_back.gif);
}

/*Buttons styled as links*/
.btn_back_as_link{
	padding:0 0px 0px 10px;
    background-color:#fff;
	background-position:left;
	background-image:url(/images/buttons/arrow_red_trans_back.gif);
    background-repeat:no-repeat;
    border:0;
    font-weight: normal;
    cursor:pointer;
}

.btn_back_as_link:hover{
    border:0;
    font-weight: normal;
    text-decoration:underline;
}

.btn_generic_as_link{
	padding:0 10px 0 0;
    background-color:#fff;
	background-position:right;
	background-image:url(/images/buttons/arrow_red_trans.gif);
    background-repeat:no-repeat;
    border:0;
    font-weight: normal;
    cursor:pointer;
}

.btn_generic_as_link:hover{
    border:0;
    font-weight: normal;
    text-decoration:underline;
}

.btn_back:hover{
	background-image:url(/images/buttons/button_generic_back_down.gif);
}


.btn_plain, .btn_plain:hover {
	border:none;
	margin-right:9px;
	padding:0 12px 0 0;
	text-align:right;
    text-decoration: underline;
    color: #87a712;
    background: none;
}

.btn_plain:hover {
    color: #3a3a3b;
}

.btn_giftlist, .btn_giftlist:hover {
	background:url(/images/giftlist/icons/giftlist-icon.gif) right center no-repeat;
	padding-right:20px;
	margin-top:10px;

}

/*Button widths - required */
#add_new_delivery_button .button_full_right {
    width:100px;
}


.searchButton{
	border:none;
	background-image:url(/images/buttons/go-btn.gif);
	background-repeat:no-repeat;
	background-color:#EBE6D9;
	background-position: top left;
	color:#ffffff;
	cursor:pointer;
	font-weight:bold;
	font-size:11px;
	width:23px;
	height:22px;
	padding: 0px 0px 2px 1px;
}

/*hack to align Go correclty in IE6*/

* html .searchButton{
	padding:2px 0 0 0;
}

* html .searchButton:hover{
	padding:2px 0 0 0;
}

.searchButton:hover{
	border:none;
    background-image:url(/images/buttons/go-btnhover.gif);
	background-repeat:no-repeat;
	background-color:#EBE6D9;
	background-position: top left;
	color:#ffffff;
	cursor:pointer;
	font-weight:bold;
	font-size:11px;
	width:23px;
	height:22px;
	padding: 0px 0px 2px 1px;
	overflow : hidden;
}


.btn_personal{
	text-align:center;
	padding:0 15px 1px 4px;
	color:#980043;
	background-color:#CC6666;
}
.btn_personal:hover{
	text-align:center;
	padding:0 15px 1px 4px;
	color:#ffffff;
	background-color:#980043;
}

/* button positioning */
.button_right{
	text-align:right;
	padding-right:20px;
	padding-bottom:20px;
}

.button_full_right{
    float:right;
	text-align:right;
	padding-right:0px;
	padding-bottom:20px;
}

.button_full_left{
    float:left;
	text-align:left;
	padding-left:0px;
	padding-bottom:20px;
}

.button_right_address{
	text-align:right;
	padding-top:5px;
	padding-bottom:5px;
}
/* footer contact us */
.buttonContact {
	background:url(/images/buttons/footer.png) left -52px no-repeat
}
.buttonContact span {
	background:url(/images/buttons/footer.png) right top no-repeat
}