/* ########################################### */
/* -------- BUTTONS STYLES STYLESHEET -------- */
/* ########################################### */
a.button, a.button .bg {
	color: #fff;
	cursor:pointer;
	line-height:1;
	background-repeat:no-repeat;
}
.rounded, .rounded .bg {
	background-repeat:no-repeat;
	display:block;
}
#content a.button input.roundedButton,
.modal a.button input.roundedButton {
	background-color:transparent;
	border-width:0;
	color: #fff;
	cursor:pointer;
	font-size: 1.5em;
	padding:0;
	font-family: Oswald, serif;
	text-transform: uppercase;
}
.rounded .r1 {
	background-position:right top;
	margin-left:7px;
}
.rounded .r2 {
	background-position:left top;
	margin-left:-7px;
	padding:0 0 0 7px;
}
a.button .r3 {
	padding: 3px 30px 7px 3px;
	line-height:1.5em;
}
form a.button .r3,
#content form .button .r3:hover {
	padding-top:2px; 
}
form a.button .r1,
#content form .button .r1:hover{
	padding-top:0px;
	padding-bottom:0px; 
}
.rounded .r3 {
	background-position:right top;
}
a.button  {
	cursor:pointer;
	float:left;
}

/* button types */
div.buttonType1 a.button, div.buttonType1 a.button .bg {
	background-image:url(/_hbi_ui/_MTO/_images/bkg/bkgButtonType1.gif);
}
div.buttonType1 a.button:hover,
div.buttonType1 a.button:active,
div.buttonType1 a.button:focus,
div.buttonType1 a.button:hover .bg,
div.buttonType1 a.button:active .bg,
div.buttonType1 a.button:focus .bg {
	background-image: url(/_hbi_ui/_MTO/_images/bkg/bkgButtonType1Hover.gif);
}
div.buttonType2 a.button, div.buttonType2 a.button .bg {
	background-image:url(/_hbi_ui/_MTO/_images/bkg/bkgButtonType2.gif);
}
div.buttonType2 a.button:hover,
div.buttonType2 a.button:active,
div.buttonType2 a.button:focus,
div.buttonType2 a.button:hover .bg,
div.buttonType2 a.button:active .bg,
div.buttonType2 a.button:focus .bg {
	background-image: url(/_hbi_ui/_MTO/_images/bkg/bkgButtonType2Hover.gif);
}
div.buttonType3 a.button, div.buttonType3 a.button .bg {
	background-image:url(/_hbi_ui/_MTO/_images/bkg/bkgButtonType3.gif);
}
div.buttonType3 a.button:hover,
div.buttonType3 a.button:active,
div.buttonType3 a.button:focus,
div.buttonType3 a.button:hover .bg,
div.buttonType3 a.button:active .bg,
div.buttonType3 a.button:focus .bg {
	background-image: url(/_hbi_ui/_MTO/_images/bkg/bkgButtonType3Hover.gif);
}

/* ---- special case ---- */
a.button:hover,
a.button:active,
a.button:focus {
	background-position: left top;
}
a.button:hover .r1,
a.button:active .r1,
a.button:focus .r1 {
	background-position: right top;
	padding: 0px 0 0 0px;
}
a.button:hover .r2,
a.button:active .r2,
a.button:focus .r2 {
	background-position: left top;
}
a.button:hover .r3,
a.button:active .r3,
a.button:focus .r3 {
	background-position: right top;
}
a.button .r3 input:hover {
	background-position: right top;
	/*padding:3px 14px 3px 3px;*/
}
a.button{
	font-size: 1.5em;
	font-family: Oswald, serif;
	text-transform: uppercase;
}

/* TODO: see if there's another way of fixing this */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	a.button .r3 {
		padding:4px 30px 7px 3px;
	}
	a.button .r3:hover {
		padding:4px 30px 7px 3px;
	}
	.tabContainer ul.tabs li.last a {
	padding-right:63px;
	}
}