// sexy apple buttons

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

input.button-black, a.button, a.button-red, a.button-yelange,  a.button-gray ,
a.button-ltblue, a.button-green, a.button-black {
    display: block;
    float: left;
    height: 39px;
    margin-right: 6px;
    padding-right: 16px; /* sliding doors padding */
    text-decoration: none;
}

a.button span , a.button-red span , a.button-yelange span , a.button-gray span , 
a.button-ltblue span , a.button-green span , a.button-black span  {
float:left;
	width:.1em;
    display: block;
    line-height: 29px;
    padding: 5px 2px 5px 18px;
}

/* overrides the ie6 width issue */
a.button > span , a.button-red > span , a.button-yelange > span , a.button-gray > span , 
a.button-ltblue > span , a.button-green > span , a.button-black > span  {
	width:auto;
}









input.button-black, 
a.button, a.button-black { background: transparent url('../images/button-images/black_02.png') no-repeat scroll top right; }
a.button span , a.button-black span  { background: transparent url('../images/button-images/black_01.png') no-repeat; }

a.button-red { background: transparent url('../images/button-images/red_02.png') no-repeat scroll top right; }
a.button-red span { background: transparent url('../images/button-images/red_01.png') no-repeat; }

a.button-gray { background: transparent url('../images/button-images/gray_02.png') no-repeat scroll top right; }
a.button-gray span { background: transparent url('../images/button-images/gray_01.png') no-repeat; }

a.button-yelange { background: transparent url('../images/button-images/yelange_02.png') no-repeat scroll top right; }
a.button-yelange span { background: transparent url('../images/button-images/yelange_01.png') no-repeat; }

a.button-green { background: transparent url('../images/button-images/green_02.png') no-repeat scroll top right; }
a.button-green span { background: transparent url('../images/button-images/green_01.png') no-repeat; }

a.button-ltblue { background: transparent url('../images/button-images/ltblue_02.png') no-repeat scroll top right; }
a.button-ltblue span { background: transparent url('../images/button-images/ltblue_01.png') no-repeat; }







a.button, a.button-red, a.button-ltblue, 
a.button-green {
    background-position: bottom right;
    color: #fff;
    outline: none; /* hide dotted outline in Firefox */
}

a.button-black {
    background-position: bottom right;
    color: #ccc;
    outline: none; /* hide dotted outline in Firefox */
}

a.button, a.button-yelange, a.button-gray {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}


a.button:active span , a.button-red:active span , a.button-yelange:active span ,  a.button-gray:active span , 
a.button-ltblue:active span , a.button-green:active span , a.button-black:active span  {
    display: block;
    line-height: 29px;
    padding: 6px 2px 4px 18px; /* push text down 1px */
}


a.button:hover span , a.button-red:hover span , a.button-yelange:hover span ,  a.button-gray:hover span , 
a.button-ltblue:hover span , a.button-green:hover span , a.button-black:hover span  {
    display: block;
    line-height: 29px;
    padding: 5px 2px 5px 18px; /* push text down 1px */
}



/********************************
	    black button
********************************/
/* black hover */
a.button-black:hover span {
    background: transparent url('../images/button-images/black_01.png') no-repeat;
}
a.button-black:hover {
    background: transparent url('../images/button-images/black_02.png') no-repeat scroll  bottom right;
}

/* black active  
a.button:active span {
    background: transparent url('../images/button-images/black_01.png') no-repeat;
}
a.button:active {
    background: transparent url('../images/button-images/black_02.png') no-repeat  bottom right;
}
*/


/********************************
	    gray button
********************************/
/* gray hover */
a.button-gray:hover span {
    background: transparent url('../images/button-images/gray_01.png') no-repeat;
}
a.button-gray:hover {
    background: transparent url('../images/button-images/gray_02.png') no-repeat scroll  bottom right;
}

/* black active  
a.button:active span {
    background: transparent url('../images/button-images/gray_01.png') no-repeat;
}
a.button:active {
    background: transparent url('../images/button-images/gray_02.png') no-repeat  bottom right;
}
*/


/********************************
	    green button
********************************/
/* green hover */
a.button-green:hover span {
    background: transparent url('../images/button-images/green_01.png') no-repeat;
}
a.button-green:hover {
    background: transparent url('../images/button-images/green_02.png') no-repeat scroll  bottom right;
}

/* green active 
a.button:active span {
    background: transparent url('../images/button-images/green_01.png') no-repeat;
}
a.button:active {
    background: transparent url('../images/button-images/green_02.png') no-repeat  bottom right;
}
*/


/********************************
	    ltblue button
********************************/
/* ltblue hover */
a.button-ltblue:hover span {
    background: transparent url('../images/button-images/ltblue_01.png') no-repeat;
}
a.button-ltblue:hover {
    background: transparent url('../images/button-images/ltblue_02.png') no-repeat scroll  bottom right;
}

/* ltblue active 
a.button:active span {
    background: transparent url('../images/button-images/ltblue_01.png') no-repeat;
}
a.button:active {
    background: transparent url('../images/button-images/ltblue_02.png') no-repeat  bottom right;
}
*/



/********************************
	    yelange button
********************************/
/* yelange hover */
a.button-yelange:hover span {
    background: transparent url('../images/button-images/yelange_01.png') no-repeat;
}
a.button-yelange:hover {
    background: transparent url('../images/button-images/yelange_02.png') no-repeat scroll  bottom right;
}

/* yelange active 
a.button:active span {
    background: transparent url('../images/button-images/yelange_01.png') no-repeat;
}
a.button:active {
    background: transparent url('../images/button-images/yelange_02.png') no-repeat  bottom right;
}
*/




/********************************
	    red button
********************************/
/* red hover */
a.button-red:hover span {
    background: transparent url('../images/button-images/red_01.png') no-repeat;
}
a.button-red:hover {
    background: transparent url('../images/button-images/red_02.png') no-repeat scroll  bottom right;
}

/* red active 
a.button:active span {
    background: transparent url('../images/button-images/red_01.png') no-repeat;
}
a.button:active {
    background: transparent url('../images/button-images/red_02.png') no-repeat  bottom right;
}
*/