/*  Bare Escentuals | variance.css  */

.variance .variance_title {
	margin-bottom: 5px;
	color: #333333;
}
.variance {
	width: 302px;
}
.variance .variance_selector_top {
	height: 25px;
	padding: 8px 10px 0px;
	background: transparent url(../../../images/bg_variance_selector.gif) 0 0 no-repeat;
}
	body.bx .variance .variance_selector_top {
		background-image: url(../../../images/bx/bg_variance_selector.gif);
	}
	body.mdf .variance .variance_selector_top {
		background-image: url(../../../images/mdf/bg_variance_selector.gif);
	}
.variance .variance_select {
	width: 282px;
}
.variance .variance_selector_btm {
	padding: 3px 10px 10px;
	background: transparent url(../../../images/bg_variance_selector.gif) 0 bottom no-repeat;
	position: relative;
}
	body.bx .variance .variance_selector_btm {
		background-image: url(../../../images/bx/bg_variance_selector.gif);
	}
	body.mdf .variance .variance_selector_btm {
		background-image: url(../../../images/mdf/bg_variance_selector.gif);
	}
.variance li {
	float: left;
	display: inline;
	text-align: center;
	height: 42px;
}
.variance li a {
	display: block;
	width: 29px;
	height: 27px;
	margin: 3px 1px 0px 0;
	background: transparent url(../../../images/bg_swatch.gif) 0 0 no-repeat;
	outline: none;
	/*text-indent: -300em;*/
}						

.variance li a.selected {background-position: 0px -29px;}
.variance li a:hover {background-position: 0px -58px;}

#variance_changed li a {
	display: block;
	width: 39px;
	height: 34px;
	margin: 3px 1px 0px 0;
	background: transparent url(../../../images/bg_swatch_changed.gif) 0 0 no-repeat;
	outline: none;
	/*text-indent: -300em;*/
}						

#variance_changed li a.selected {background-position: 0px -34px;}
#variance_changed li a:hover {background-position: 0px -72px;}
/* BUXOM */
						body.bx .variance li a,
						body.bx .variance li a:hover, 
						body.bx .variance li a.selected {background-image: url(../../../images/bx/bg_swatch.gif);}

						
/* Code for Ready PDP */

.type2-1 .variance li {

                float: left;

                display: inline;

                text-align: center;

                height: 42px;
                margin:0 11px;

}

.type2-1 .variance li a {

                display: block;

                width: 61px;

                height: 29px;

                margin: 3px 1px 0px 0;

                background: transparent url(../../../images/bg_swatch_changed-2-1.gif) 0 0 no-repeat;

                outline: none;

                /*text-indent: -300em;*/

}                                                                                              

 

.type2-1 .variance li a.selected {background-position: 0px -61px;}

.type2-1 .variance li a:hover {background-position: 0px -122px;}

.type2-1 .variance li img, .type2-1 #variance_changed li img{margin-top:2px} 

.type2-1 #variance_changed li a {

                display: block;

                width: 71px;

                height: 34px;

                margin: 3px 1px 0px 0;

                background: transparent url(../../../images/bg_swatch_changed-2-1.gif) 0 0 no-repeat;

                outline: none;

                /*text-indent: -300em;*/

}                                                                                              

 

.type2-1 #variance_changed li a.selected {background-position: 0px -35px;}

.type2-1 #variance_changed li a:hover {background-position: 0px -73px;}


.type4-1 .variance li {

                float: left;

                display: inline;

                text-align: center;

                height: 84px;
                margin:0 6px;

}

.type2-1 .variance li a {

                display: block;

                width: 61px;

                height: 29px;

                margin: 3px 1px 0px 0;

                background: transparent url(../../../images/bg_swatch_changed-2-1.gif) 0 0 no-repeat;

                outline: none;

                /*text-indent: -300em;*/

}                                                                                              

 

.type2-1 .variance li a.selected {background-position: 0px -61px;}

.type2-1 .variance li a:hover {background-position: 0px -122px;}

.type4-1 .variance li img, .type4-1 #variance_changed li img{margin-top:3px} 

.type4-1 #variance_changed li a {

                display: block;

                width: 81px;

                height: 34px;

                margin: 3px 1px 0px 0;

                background: transparent url(../../../images/bg_swatch_changed-4-1.gif) 0 50px no-repeat;

                outline: none;

                /*text-indent: -300em;*/

}                                                                                              

 

.type4-1 #variance_changed li a.selected {background-position: 0px -35px; height: 80px;}
.type4-1 #variance_changed li a:hover {background-position: 0px -116px; height: 80px;}