/* Style sheet for Product List Attributes module */

/*
	The pla_attributes class defines the appearance of the block
	containing all of the user interface elements specific to
	the Product List Attributes module for a given product.
*/
.pla_attributes {
}

/*
	The following block supplements the pla_attributes class
	with additional instructions which apply only for those user
	interface elements appearing in the featured products section
	of the home page.
*/
#featured-products_block_center .pla_attributes {
	width: 120px;
	margin-left: 0.5em;
	text-align: right;
	vertical-align: bottom;
}

/*
	The pla_select class defines the appearance of select
	elements for attribute groups which are displayed in a product
	list (e.g., a category page).  The default matches the width
	of the "Add to Cart" button in the default prestashop theme.
	Additionally, a default margin-left setting applicable across
	the default theme is overriden because it is counterproductive
	here.
*/
select.pla_select {
	width: 120px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0.5em;
	margin-bottom: 0;
}

/*
	The following block supplements the pla_select class
	with additional instructions which apply only for those select
	elements appearing in the featured products section of the
	home page.
*/
#featured-products_block_center select.pla_select {
}

/*
	The pla_select_label class defines the appearance of labels
	for select elements for attributes which are displayed in a
	product list (e.g., a category page).
	By default, labels are not displayed at all in order to
	conserve space.  To display the labels, edit the
	productlistattributes.tpl file, search for the div element to
	which this class is applied, and remove the "{*" and "*}"
	characters.  Note that this div element is programmatically
	created by jQuery code.
	If labels are displayed, it may also be desirable to decrease
	the margin-top setting of the pla_select class.
*/
.pla_select_label {
	width: 120px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0.5em;
	margin-bottom: 0;
}

/*
	The pla_quantity class defines the appearance of text fields
	for the quantity to purchase which are displayed in a product
	list (e.g., a category page).  The default matches the width
	of the "Add to Cart" button in the default prestashop theme.
	Additionally, a default margin-left setting applicable across
	the default theme is overriden because it is counterproductive
	here.
*/
input.pla_quantity {
	width: 40px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0.5em;
	margin-bottom: 0;
	text-align: left;
}

#pla_attribute_groups {
	list-style: none;
}

#pla_attribute_groups li {
	display: block;
	padding: 20px 10px;
	margin-bottom: 3px;
	background-color: #efefef;
}

#pla_attribute_groups li img.handle {
	margin-right: 20px;
	cursor: move;
}

div.pla_color_swatch {
	width: 120px;
	margin: 3px 0 0 0
}

div.pla_color_container {
	float: left;
	width: 15px;
	height: 15px;
	padding: 2px;
	margin: 1px 0 0 1px
}

div.pla_color_container_selected {
	padding: 1px;
	border: 1px solid black
}

a.pla_color {
	float: left;
	display: block;
	width: 15px;
	height: 15px;
	cursor: pointer
}

/*
	The appearance of code which has been successfully installed in the
	theme.  Only used in the Back Office interface.
*/
.pla_installation_modification_good {
	font-weight: bold;
	color: green;
}

/*
	The appearance of code which is not yet successfully installed in the
	theme.  Only used in the Back Office interface.
*/
.pla_installation_modification_bad {
	font-weight: bold;
	color: red;
}

/*
	The appearance of step numbers and similar elements within the
	Back Office interface.
*/
.pla_installation_step {
	font-weight: bold;
	font-style: italic;
}

/*
	The appearance of important notes regarding installation within the
	Back Office interface.
*/
.pla_installation_note {
	font-weight: bold;
	font-style: italic;
	color: red;
}

/*
	The appearance of bullet points within the Back Office interface.
*/
.pla_office_bullet {
	margin-left: 10px;
}

/*
	The appearance of general notices within the Back Office interface.
*/
.pla_office_notice {
	font-weight: bold;
	color: black;
}

/*
	The appearance of important warnings within the Back Office interface.
*/
.pla_office_warning {
	font-weight: bold;
	color: red;
}