/*
 * Sexy Buttons
 * 
 * DESCRIPTION:
 * 	Sexy, skinnable HTML/CSS buttons with icons.
 * 
 * PROJECT URL: 
 * 	http://code.google.com/p/sexybuttons/
 * 
 * AUTHOR:
 * 	Richard Davies
 * 	http://www.richarddavies.us
 * 	Richard@richarddavies.us
 * 
 * VERSION:
 * 	1.1
 * 
 * LICENSE:
 * 	Apache License 2.0  (http://www.apache.org/licenses/LICENSE-2.0)
 * 	Creative Commons 3.0 Attribution  (http://creativecommons.org/licenses/by/3.0/)
 * 
 * CREDITS:
 * 	Inspired by, derived from, and thanks to:
 * 	http://www.p51labs.com/simply-buttons-v2/
 * 	http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
 * 	http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
 * 	http://www.elctech.com/snippets/make-your-buttons-look-super-awesome
 * 
 * USAGE:
 * 	Simply add class="sexybutton [skin]" to a <button> or <a> element and wrap the label text with double <span>s.
 * 	You can optionally add a "silk" icon to the button text by using a third <span> with class to identify the icon.
 */


/* 
 *	Generic styles for all Sexy Buttons
 */

.sexybutton {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-decoration: none !important;
    background: none;
    border: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;

    /* Fix extra width padding in IE */
    _width: 0;
    overflow: visible;
}

.sexybutton span {
    display: block; /* Prevents :active from working in IE--oh well! */
    height: 29px;
    padding-right: 12px;
    background-repeat: no-repeat;
    background-position: right top;
}

.sexybutton span span {
    padding-right: 0;
    padding-left: 12px;
    line-height: 29px;
    background-position: left top;
}

.sexybutton[disabled],
.sexybutton[disabled]:hover,
.sexybutton[disabled]:focus,
.sexybutton[disabled]:active,
.sexybutton.disabled,
.sexybutton.disabled:hover,
.sexybutton.disabled:focus,
.sexybutton.disabled:active {
    cursor: inherit;
}

.sexybutton:hover span,
.sexybutton:focus span {
    background-position: 100% -29px;
}
.sexybutton:hover span span,
.sexybutton:focus span span {
    background-position: 0% -29px;
}
.sexybutton:active span {
    background-position: 100% -58px;
}
.sexybutton:active span span {
    background-position: 0% -58px;
}
.sexybutton[disabled] span,
.sexybutton.disabled span {
    background-position: 100% -87px;
}
.sexybutton[disabled] span span,
.sexybutton.disabled span span {
    background-position: 0% -87px;
}

.sexybutton img {
	margin-right: 5px;
	vertical-align: text-top;
	/* IE6 Hack */
	_margin-top: 4px;
	_vertical-align: text-bottom;
	/* IE6 still requires a PNG transparency fix */ 
	/* _display: none;		Or just hide icons from the undeserving IE6 */
}

.sexybutton img.after {
	margin-right: 0;
	margin-left: 5px;
	/* IE6 still requires a PNG transparency fix */ 
	/* _margin-left: 0;		Or just hide icons from the undeserving IE6 */
}


/*
 * Button Skins
 * 
 * .PNG background images with alpha transparency are also supplied if you'd rather use them instead of the 
 * default .GIF images. (Just beware of IE6's lack of support.) 
 * 
 * Additional skins can be added below. The images/skins/ButtonTemplate.psd can be used to create new skins.
 * Prefix the skin name with "sexy" to avoid any potential conflicts with other class names. 
 */

/* Treenex Green Skin */

.sexybutton.green {
    color: #FFF !important;    
    font: 14px Tahoma, Verdana, Arial, Helvetica, sans-serif !important;
    font-weight: bold !important;
}
.sexybutton.green span {
	background-image: url(../images/buttons/sexybuttons/skins/green/button_right.png);
}
.sexybutton.green span span {
	background-image: url(../images/buttons/sexybuttons/skins/green/button_left.png);
}