/**
 * Applique une image d'arriere plan sur le Domaine du site
 * @param String assetName Chemin de l'image depuis http://i1.limprimeriegenerale.com***
 * @param String @repeat background-repeat
 * @param String @x background-position x
 * @param String @y background-position y
 * @param String @color background-color
 * @param String @attachement background-attachment
 * @param String @dir repertoire de l'image pour utiliser img ou img2
 */
.backgroundSite (@assetName; @repeat : no-repeat; @x: 0px; @y: 0px; @color: transparent; @attachement: scroll; @dir: 'img')
{
	background-attachment: @attachement;
    background-color: @color;
	background-image: url("[[@HTTP_PROTOCOL]]://[[@SERVER_IMAGE_NAME]].limprimeriegenerale.com/assets/@{dir}/@{assetName}");
    background-position: @x @y;
    background-repeat: @repeat;
}

/**
 * Applique une image d'arriere plan sur le Domaine du site pour les image dans les spec
 * @param String assetName Chemin de l'image depuis http://i1.limprimeriegenerale.com***
 * @param String hostName nom du domaine dans les specs
 * @param String @repeat background-repeat
 * @param String @x background-position x
 * @param String @y background-position y
 * @param String @color background-color
 * @param String @attachement background-attachment
 * @param String @dir repertoire de l'image pour utiliser img ou img2
 */
.backgroundSiteSpec (@assetName; @hostName; @repeat : no-repeat; @x: 0px; @y: 0px; @color: transparent; @attachement: scroll; @dir: 'img')
{
	background-attachment: @attachement;
    background-color: @color;
	background-image: url("[[@HTTP_PROTOCOL]]://[[@SERVER_IMAGE_NAME]].limprimeriegenerale.com/assets/@{dir}/_specs/@{hostName}/@{assetName}");
    background-position: @x @y;
    background-repeat: @repeat;
}

/**
 * Applique une image d'arriere plan sur le Domaine UD
 * @param String assetName Chemin de l'image
 * @param String @repeat background-repeat
 * @param String @x background-position x
 * @param String @y background-position y
 * @param String @color background-color
 * @param String @attachement background-attachment
 */
.udBgImg (@assetName; @repeat : no-repeat; @x: 0px; @y: 0px; @color: transparent; @attachement: scroll)
{
	background-attachment: @attachement;
    background-color: @color;
    background-image: url("[[@HTTP_PROTOCOL]]://[[@SERVER_IMAGE_NAME]].limprimeriegenerale.com/assets/img2/ud/@{assetName}");
    background-position: @x @y;
    background-repeat: @repeat;
}


/**
 * Couleurs principales du site
 */
@hostColor1: #e3001b;
@hostColor2: #cc0000;
@hostColor1Alpha: rgba(243,0,27,.6);
@hostName: lig;

@hostColorGradient1: #930000;
@hostColorGradient2: #cc2626;
@hostColorGradientHover1: #cc0000;
@hostColorGradientHover2: #ff5050;


/*
	=============================================================================
		Structure du Menu du header
	=============================================================================
*/

/* Logo */
img.bloc-header-logo-img
{
	max-width: 396px;
}

/* Entete - Menu */
nav
{
    .backgroundSiteSpec('ihm/header-menu-fond.png', @hostName, repeat-x);
}


/*
	===================================
		Bloc Cadre
	===================================
*/

.main-panel-form,
.main-panel-info
{
	
	.panel-heading
	{
		color: @hostColor1;
		line-height: 26px;
        margin: 20px 0px 10px;
        text-transform: uppercase;
	}
	
	.panel-title
	{
		border-bottom: #dddddd 1px solid;
		border-top: #999999 2px solid;
		font-size: 13px;
		padding: 0px 10px;
	}
}

.cadre-titre-gauche
{
	.backgroundSiteSpec('ihm/cadre-titre-gauche.png', @hostName);
	float: left;
	height: 30px;
	width: 40px;
}

/* ================== Selection motif produits et Menu des produits ================= */
#bloc-products
{
	float: left;
	margin: 15px 0px 0px 0px;
	width: 100%;
}

#bloc-menu-products
{
	float: left;
	text-align: center;
	max-width: 908px;
}

.bloc-products-motif-label
{
	display: inline-block;
    height: 40px;
    line-height: 40px;
}

.products-motif-fond
{
	display: inline-block;
	margin-top: 5px;
	vertical-align: top;
}

.products-motif
{
	border: #444444 1px solid;
	border-radius: 10px;
	float: left;
	height: 20px;
	margin: 0px 5px;
	width: 20px;
}

.products-motif-selected
{
	border: @hostColor1 1px solid;
}

a#menu-products-btn-background-1
{
	.backgroundSiteSpec('sprite/sprite-index.png', @hostName, no-repeat, -757px, -116px);
}

a#menu-products-btn-background-2
{
	.backgroundSiteSpec('sprite/sprite-index.png', @hostName, no-repeat, -777px, -116px);
}

a#menu-products-btn-background-3
{
	.backgroundSiteSpec('sprite/sprite-index.png', @hostName, no-repeat, -797px, -116px);
}

a#menu-products-btn-background-4
{
	.backgroundSiteSpec('sprite/sprite-index.png', @hostName, no-repeat, -817px, -116px);
}

a#menu-products-btn-background-5
{
	.backgroundSiteSpec('sprite/sprite-index.png', @hostName, no-repeat, -837px, -116px);
}

.menu-products-fond-1
{
	.backgroundSite('ihm/menu-products-fond-1.png', repeat-y);
}

.menu-products-fond-2
{
	.backgroundSite('ihm/menu-products-fond-2.png', repeat-y);
}

.menu-products-fond-3
{
	.backgroundSite('ihm/menu-products-fond-3.png', repeat-y);
}

.menu-products-fond-4
{
	.backgroundSite('ihm/menu-products-fond-4.png', repeat-y);
}

.menu-products-fond-5
{
	.backgroundSite('ihm/menu-products-fond-5.png', repeat-y);
}

.bloc-menu-products-items
{
	color: #ffffff;
	font-weight: bold;
	height: 45px;
	line-height: 45px;
	margin: 25px auto;
	position: relative;
	text-align: center;
	width: 775px;
	z-index: 1000;
}

a.bloc-menu-products-item
{
	background-color: #000000;
	color: #ffffff;
	float: left;
	width: 155px;
}

a.bloc-menu-products-item:hover
{
	color: #ffffff;
	float: left;
	height: 54px;
	text-decoration: none;
	width: 155px;
}

a.menu-products-item-selected
{
	color: #ffffff;
	background-color: transparent;
	float: left;
	width: 155px;
}

#menu-products-on-shelves
{
	float: left;
	margin-top: 40px;
	text-align: center;
	width: 100%;
}

.bloc-menu-products-shelf
{
	margin: 0px auto;
	height: 330px;
	width: 854px;
}

.bloc-products-on-shelf
{
	margin: 0px auto;
	position: relative;
	text-align: center;
	width: 800px;
	z-index: 100;
}

.bloc-product,
a.bloc-product,
a.bloc-product:hover
{
	float: left;
	height: 248px;
	position: relative;
	text-decoration: none;
	width: 200px;
}

.bloc-product span.bloc-product-picto
{
	background-size: 800% 800%;
	left: 0px;
	position: absolute;
	transition-duration: 0.5s;
	top: 48px;
}

div.shelf-fond-wrapper
{
    margin-top: -10px;
}

@media(min-width: @size-lg-min)
{ 
	.bloc-product:hover span.bloc-product-picto
	{
		background-size: 800% 800%;
		left: -40px;
		position: absolute;
		top: -30px;
		z-index: 220;
	}
}

.bloc-product-label
{
	background: #ffffff;
	box-shadow: 1px 1px 8px;
	color: #000000;
    display: inline-block;
	float: left;
	font-size: 14px;
	font-weight: bold;
    height: 52px;
	left: 0px;
	line-height: 28px;
	margin: 0px 5px 0px 5px;
	padding: 8px 0px;
	position: absolute;
	top: 0px;
    width: 190px;
	z-index: 210;
}

.product-label
{
	line-height: 1.2;
	margin: 0px 15px;
}

.bloc-product:hover .bloc-product-label
{
	color: @hostColor1;
	z-index: 230;
}

/* Sprite Produits */
.sprite-produit-small
{
	.backgroundSiteSpec('picto/produit/sprite-produit-small.png', @hostName);
	display: inline-block;
	height: 200px;
	width: 200px;
}

@media(min-width: @size-lg-min)
{
	.sprite-produit-large,
	.bloc-product:hover .sprite-produit-small
	{
		.backgroundSiteSpec('picto/produit/sprite-produit-large.png', @hostName);
		display: inline-block;
		height: 280px;
		width: 280px;
	}

	.sprite-produit-large-affiche,
	.bloc-product:hover .sprite-produit-affiche
	{
		background-position: -280px 0px;
	}

	.sprite-produit-large-autocollant,
	.bloc-product:hover .sprite-produit-autocollant
	{
		background-position: -560px 0px;
	}

	.sprite-produit-large-badge,
	.bloc-product:hover .sprite-produit-badge
	{
		background-position: -840px 0px;
	}

	.sprite-produit-large-bloc-note,
	.bloc-product:hover .sprite-produit-bloc-note
	{
		background-position: -1120px 0px;
	}

	.sprite-produit-large-brochure,
	.bloc-product:hover .sprite-produit-brochure
	{
		background-position: -1400px 0px;
	}

	.sprite-produit-large-bracelet-evenementiel,
	.bloc-product:hover .sprite-produit-bracelet-evenementiel
	{
		background-position: -1680px 0px;
	}

	.sprite-produit-large-tour_pop-up,
	.bloc-product:hover .sprite-produit-tour_pop-up
	{
		background-position: -1960px 0px;
	}

	.sprite-produit-large-calendrier,
	.bloc-product:hover .sprite-produit-calendrier
	{
		background-position: 0px -280px;
	}

	.sprite-produit-large-calendrier-bancaire,
	.bloc-product:hover .sprite-produit-calendrier-bancaire
	{
		background-position: -280px -280px;
	}

	.sprite-produit-large-carte-de-correspondance,
	.bloc-product:hover .sprite-produit-carte-de-correspondance
	{
		background-position: -560px -280px;
	}

	.sprite-produit-large-carte-de-fidelite,
	.bloc-product:hover .sprite-produit-carte-de-fidelite
	{
		background-position: -840px -280px;
	}

	.sprite-produit-large-carte-de-visite,
	.bloc-product:hover .sprite-produit-carte-de-visite
	{
		background-position: -1120px -280px;
	}

	.sprite-produit-large-carte-de-voeux,
	.bloc-product:hover .sprite-produit-carte-de-voeux
	{
		background-position: -1400px -280px;
	}

	.sprite-produit-large-carte-tente,
	.bloc-product:hover .sprite-produit-carte-tente
	{
		background-position: -1680px -280px;
	}
	
	.sprite-produit-large-tour-de-cou-porte-cle,
	.bloc-product:hover .sprite-produit-tour-de-cou-porte-cle
	{
		background-position: -1960px -280px;
	}
	
	.sprite-produit-large-carte-postale,
	.bloc-product:hover .sprite-produit-carte-postale
	{
		background-position: 0px -560px;
	}

	.sprite-produit-large-chemise-a-rabats,
	.bloc-product:hover .sprite-produit-chemise-a-rabats
	{
		background-position: -280px -560px;
	}

	.sprite-produit-large-coupon-detachable,
	.bloc-product:hover .sprite-produit-coupon-detachable
	{
		background-position: -560px -560px;
	}

	.sprite-produit-large-depliant,
	.bloc-product:hover .sprite-produit-depliant
	{
		background-position: -840px -560px;
	}

	.sprite-produit-large-documents,
	.bloc-product:hover .sprite-produit-documents
	{
		background-position: -1120px -560px;
	}

	.sprite-produit-large-enveloppe,
	.bloc-product:hover .sprite-produit-enveloppe
	{
		background-position: -1400px -560px;
	}

	.sprite-produit-large-comptoir-publicitaire,
	.bloc-product:hover .sprite-produit-comptoir-publicitaire
	{
		background-position: -1680px -560px;
	}
	
	.sprite-produit-large-livre-contre-colle,
	.bloc-product:hover .sprite-produit-livre-contre-colle
	{
		background-position: -1960px -560px;
	}
	
	.sprite-produit-large-faire-part,
	.bloc-product:hover .sprite-produit-faire-part
	{
		background-position: 0px -840px;
	}

	.sprite-produit-large-flyer,
	.bloc-product:hover .sprite-produit-flyer
	{
		background-position: -280px -840px;
	}

	.sprite-produit-large-grands-formats,
	.bloc-product:hover .sprite-produit-grands-formats
	{
		background-position: -560px -840px;
	}

	.sprite-produit-large-magnets,
	.bloc-product:hover .sprite-produit-magnets
	{
		background-position: -840px -840px;
	}

	.sprite-produit-large-marque-page,
	.bloc-product:hover .sprite-produit-marque-page
	{
		background-position: -1120px -840px;
	}

	.sprite-produit-large-papier-cadeau,
	.bloc-product:hover .sprite-produit-papier-cadeau
	{
		background-position: -1400px -840px;
	}

	.sprite-produit-large-enroulleur-roll-up,
	.bloc-product:hover .sprite-produit-enroulleur-roll-up
	{
		background-position: -1680px -840px;
	}

	.sprite-produit-large-emballage,
	.bloc-product:hover .sprite-produit-emballage
	{
		background-position: -1960px -840px;
	}

	.sprite-produit-large-plaquette-entreprise,
	.bloc-product:hover .sprite-produit-plaquette-entreprise
	{
		background-position: 0px -1120px;
	}

	.sprite-produit-large-bloc-note-adhesif,
	.bloc-product:hover .sprite-produit-bloc-note-adhesif
	{
		background-position: -280px -1120px;
	}

	.sprite-produit-large-restauration,
	.bloc-product:hover .sprite-produit-restauration
	{
		background-position: -560px -1120px;
	}

	.sprite-produit-large-set-de-table,
	.bloc-product:hover .sprite-produit-set-de-table
	{
		background-position: -840px -1120px;
	}

	.sprite-produit-large-sous-main,
	.bloc-product:hover .sprite-produit-sous-main
	{
		background-position: -1120px -1120px;
	}

	.sprite-produit-large-tete-de-lettre,
	.bloc-product:hover .sprite-produit-tete-de-lettre
	{
		background-position: -1400px -1120px;
	}

	.sprite-produit-large-l-x-banners,
	.bloc-product:hover .sprite-produit-l-x-banners
	{
		background-position: -1680px -1120px;
	}

	.sprite-produit-large-textile,
	.bloc-product:hover .sprite-produit-textile
	{
		background-position: 0px -1400px;
	}

	.sprite-produit-large-livre,
	.bloc-product:hover .sprite-produit-livre
	{
		background-position: -280px -1400px;
	}
    
    .sprite-produit-large-bache,
	.bloc-product:hover .sprite-produit-bache
	{
		background-position: -560px -1400px;
	}
    
    .sprite-produit-large-menu,
	.bloc-product:hover .sprite-produit-menu
	{
		background-position: -840px -1400px;
	}
    
    .sprite-produit-large-rollup,
	.bloc-product:hover .sprite-produit-rollup
	{
		background-position: -1120px -1400px;
	}

	.sprite-produit-large-accroche-porte,
	.bloc-product:hover .sprite-produit-accroche-porte
	{
		background-position: -1400px -1400px;
	}

	.sprite-produit-large-panneau-ventouse,
	.bloc-product:hover .sprite-produit-panneau-ventouse
	{
		background-position: -1680px -1400px;
	}

	.sprite-produit-large-plv-suspendu,
	.bloc-product:hover .sprite-produit-plv-suspendu
	{
		background-position: 0px -1680px;
	}

	.sprite-produit-large-ruban-adhesif,
	.bloc-product:hover .sprite-produit-ruban-adhesif
	{
		background-position: -280px -1680px;
	}
    
    .sprite-produit-large-sac-papier,
	.bloc-product:hover .sprite-produit-sac-papier
	{
		background-position: -560px -1680px;
	}
    
    .sprite-produit-large-serviette-papier,
	.bloc-product:hover .sprite-produit-serviette-papier
	{
		background-position: -840px -1680px;
	}
    
    .sprite-produit-large-stand-parapluie,
	.bloc-product:hover .sprite-produit-stand-parapluie
	{
		background-position: -1120px -1680px;
	}

	.sprite-produit-large-toile-peintre,
	.bloc-product:hover .sprite-produit-toile-peintre
	{
		background-position: -1400px -1680px;
	}

	.sprite-produit-large-totem-sur-pied,
	.bloc-product:hover .sprite-produit-totem-sur-pied
	{
		background-position: -1680px -1680px;
	}
}

.sprite-produit-loading
{
	background-position: -280px -1400px;
	height: 1px;
	width: 1px;
}

.sprite-produit-affiche
{
	background-position: -200px 0px;
}

.sprite-produit-autocollant
{
	background-position: -400px 0px;
}

.sprite-produit-badge
{
	background-position: -600px 0px;
}

.sprite-produit-bloc-note
{
	background-position: -800px 0px;
}

.sprite-produit-brochure
{
	background-position: -1000px 0px;
}

.sprite-produit-bracelet-evenementiel
{
	background-position: -1200px 0px;
}

.sprite-produit-tour_pop-up
{
	background-position: -1400px 0px;
}

.sprite-produit-calendrier
{
	background-position: 0px -200px;
}

.sprite-produit-calendrier-bancaire
{
	background-position: -200px -200px;
}

.sprite-produit-carte-de-correspondance
{
	background-position: -400px -200px;
}

.sprite-produit-carte-de-fidelite
{
	background-position: -600px -200px;
}

.sprite-produit-carte-de-visite
{
	background-position: -800px -200px;
}

.sprite-produit-carte-de-voeux
{
	background-position: -1000px -200px;
}

.sprite-produit-carte-tente
{
	background-position: -1200px -200px;
}

.sprite-produit-tour-de-cou-porte-cle
{
	background-position: -1400px -200px;
}

.sprite-produit-carte-postale
{
	background-position: 0px -400px;
}

.sprite-produit-chemise-a-rabats
{
	background-position: -200px -400px;
}

.sprite-produit-coupon-detachable
{
	background-position: -400px -400px;
}

.sprite-produit-depliant
{
	background-position: -600px -400px;
}

.sprite-produit-documents
{
	background-position: -800px -400px;
}

.sprite-produit-enveloppe
{
	background-position: -1000px -400px;
}

.sprite-produit-comptoir-publicitaire
{
	background-position: -1200px -400px;
}

.sprite-produit-livre-contre-colle
{
	background-position: -1400px -400px;
}

.sprite-produit-faire-part
{
	background-position: 0px -600px;
}

.sprite-produit-flyer
{
	background-position: -200px -600px;
}

.sprite-produit-grands-formats
{
	background-position: -400px -600px;
}

.sprite-produit-magnets
{
	background-position: -600px -600px;
}

.sprite-produit-marque-page
{
	background-position: -800px -600px;
}

.sprite-produit-papier-cadeau
{
	background-position: -1000px -600px;
}

.sprite-produit-enroulleur-roll-up
{
	background-position: -1200px -600px;
}

.sprite-produit-emballage
{
	background-position: -1400px -600px;
}

.sprite-produit-plaquette-entreprise
{
	background-position: 0px -800px;
}

.sprite-produit-bloc-note-adhesif
{
	background-position: -200px -800px;
}

.sprite-produit-restauration
{
	background-position: -400px -800px;
}

.sprite-produit-set-de-table
{
	background-position: -600px -800px;
}

.sprite-produit-sous-main
{
	background-position: -800px -800px;
}

.sprite-produit-tete-de-lettre
{
	background-position: -1000px -800px;
}

.sprite-produit-l-x-banners
{
	background-position: -1200px -800px;
}

.sprite-produit-textile
{
	background-position: 0px -1000px;
}

.sprite-produit-livre
{
	background-position: -200px -1000px;
}

.sprite-produit-bache
{
	background-position: -400px -1000px;
}

.sprite-produit-menu
{
	background-position: -600px -1000px;
}

.sprite-produit-rollup
{
	background-position: -800px -1000px;
}

.sprite-produit-accroche-porte
{
	background-position: -1000px -1000px;
}

.sprite-produit-panneau-ventouse
{
	background-position: -1200px -1000px;
}

.sprite-produit-plv-suspendu
{
	background-position: 0px -1200px;
}

.sprite-produit-ruban-adhesif
{
	background-position: -200px -1200px;
}

.sprite-produit-sac-papier
{
	background-position: -400px -1200px;
}

.sprite-produit-serviette-papier
{
	background-position: -600px -1200px;
}

.sprite-produit-stand-parapluie
{
	background-position: -800px -1200px;
}

.sprite-produit-toile-peintre
{
	background-position: -1000px -1200px;
}

.sprite-produit-totem-sur-pied
{
	background-position: -1200px -1200px;
}

span.bloc-product-price-mini
{
    height: 20px;
    line-height: 20px;
    left: 10px;
    position: absolute;
    right: 10px;
    text-align: right;
    top: 55px;
}

span.bloc-product-price-mini-img
{
    .backgroundSite('produit/best-price.png', no-repeat);
    display: inline-block;
    height: 13px;
    vertical-align: middle;
    width: 50px;
}


/*
	=======================================================
		Module de Chat (Zopim)
	=======================================================
*/

.chat-online,
.chat-offline
{
	.backgroundSiteSpec('ihm/sprite-ihm.png', @hostName);
}

.sprite-ihm-chat-online,
.chat-online
{
	background-position: 0px -427px;
	height: 60px;
	width: 300px;
}

.sprite-ihm-chat-offline,
.chat-offline
{
	background-position: -300px -427px;
	height: 60px;
	width: 300px;
}