/**
 * CSS3 Buttons
 *
 * <code>
 *	<button href="#" class="button x-small|small|medium|large|x-large buttonHilighted|buttonNeutral|buttonMP">
 *	 <span class="buttonIcon|buttonIconTwoLines|txtIcon iconBasketSmall|Medium|Large"><!-- --></span> // Optional, if icon wanted only
 *	 <span class="buttonText"><strong>Ajouter</strong> au panier</span> // Can be put on two lines using <br> tag
 *  </button>
 * </code> 
 *
 * @version     2.0
 * @author      Céline Juan <webmaster@c-linn.com>
 * @author      Jonathan Travens
 * @Imagesrep   [10/BasePath]/buttons/
 *
 */
 
/**
 * Generic settings
 */
.buttonCss{
	-moz-border-radius:3px;  /* To set rounded borders on FF, Chrome, Safari and Opera */
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow:0 2px 5px #c1c1c1;  /* To set bottom shadow on buttons for FF, Chrome, Safari and Opera */
	-webkit-box-shadow:0 2px 5px #c1c1c1;
	box-shadow:0 2px 5px #c1c1c1;
	display:inline-block;
    zoom:1;  /* inline-block support for IE */
    *display:inline;
	cursor:pointer;
	font-family:Arial,sans-serif;
	margin:0 0 10px;
	outline:none;
	padding:2px 6px;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	overflow:visible; /* to remove button padding on IE */
}
.buttonCss:active{
	position:relative;
	top:1px;
}
.buttonText
{
	display:inline-block;
	text-align:center;
	vertical-align:middle;
    *display:inline;
    zoom:1;
    white-space:no-wrap;
}


/*
 * Common settings for visual or "txt" icons
 */
.buttonIcon,
.buttonIconTwoLines,
.txtIcon{
	background:url(https://i2.cdscdn.com/struct/buttons/buttonIcons.png) no-repeat;
	display:inline-block;
	vertical-align:middle;
	margin:0 2px;
    zoom:1;
}
.txtIcon{
	background:none;
	font-size:larger;
	font-weight:bolder;
}

/**
 * Size settings
 */

/*
 * x-small & small size buttons
 */
 .xx-small{
	font-size:10px;
	line-height:11px;
    padding:0;
}
.x-small{
	font-size:11px;
	line-height:12px; /* We have to reduce top and bottom padding to have really small button */
}
.small{
	font-size:12px;
	line-height:13px;
}
.x-small .buttonIcon,
.small .buttonIcon{
	height:15px;
	width:15px;
}

/*
 * Medium size buttons
 */
.medium{
	font-size:13px;
	line-height:14px;
}
.medium .buttonIcon,
.medium .buttonIconTwoLines,
.x-small .buttonIconTwoLines,
.small .buttonIconTwoLines{
	height:20px;
	width:20px;
}

/*
 * Large & x-large size buttons
 */
.large{
	font-size:14px;
	line-height:15px;
}
.x-large{
	font-size:16px;
	line-height:16px;
	padding-top:4px;
	padding-bottom:4px;
}
.large .buttonIcon,
.large .buttonIconTwoLines,
.x-large .buttonIcon,
.x-large .buttonIconTwoLines{
	height:25px;
	width:25px;
}

/**
 * Color settings
 */

/*
 * "Highlighted" - Actual style = green
 */
.buttonHilighted{
	color:#fff;
	background:url(https://i2.cdscdn.com/struct/buttons/buttonGradients.png) #35bb0c;
	border:1px solid #21800b;
	background:-moz-linear-gradient(top, #35bb0c 0%, #389623 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#35bb0c), color-stop(100%,#389623)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, #35bb0c 0%,#389623 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, #35bb0c 0%,#389623 100%); /* Opera11.10+ */
	background:-ms-linear-gradient(top, #35bb0c 0%,#389623 100%); /* IE10+ */
	background:linear-gradient(top, #35bb0c 0%,#389623 100%); /* W3C */
	text-shadow:0 -1px 1px #1d850a;
}
.buttonHilighted:hover,
.buttonHilighted_over{
	background:url(https://i2.cdscdn.com/struct/buttons/buttonGradients.png) 0 -49px #4ec22a;
    background:-moz-linear-gradient(top, #4ec22a 0%, #1e8607 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ec22a), color-stop(100%,#1e8607));
	background:-webkit-linear-gradient(top, #4ec22a 0%,#319f17 69%,#1e8607 100%);
    background:-o-linear-gradient(top, #4ec22a 0%,#1e8607 100%);
	background:-ms-linear-gradient(top, #4ec22a 0%,#1e8607 100%);
	background:linear-gradient(top, #4ec22a 0%,#1e8607 100%);
	text-shadow:7px 1px 10px #fff;
}
.buttonHilighted strong,
.buttonHilighted:focus strong,
.buttonHilighted_over strong,
.buttonHilighted:hover strong{
	text-shadow:0 0 25px #fff;
}
.buttonHilighted:active,	
a.buttonHilighted:active{
	color:#edffe8;
	background:#21800b;
	background:-moz-linear-gradient(top, #21800b 0%, #4ec22a 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#21800b), color-stop(100%,#4ec22a));
	background:-webkit-linear-gradient(top, #21800b 0%,#4ec22a 100%);
	background:-o-linear-gradient(top, #21800b 0%,#4ec22a 100%);
	background:-ms-linear-gradient(top, #21800b 0%,#4ec22a 100%);
	background:linear-gradient(top, #21800b 0%,#4ec22a 100%);
	text-shadow:0 1px 1px #1d850a;
	-moz-box-shadow:inset 0 0 5px #7e7e7e; /* creates an inside shadow when button is pushed */
	-webkit-box-shadow:inset 0 0 5px #7e7e7e;
	box-shadow:inset 0 0 5px #7e7e7e;
}

/*
 * "Neutral" - Actual style = white/grey
 */
.buttonNeutral {
	color:#3c5981;
	border:1px solid #adb5bc;
	background:url(https://i2.cdscdn.com/struct/buttons/buttonGradients.png) 0 -100px #fefeff;
	background:-moz-linear-gradient(top, #fefeff 0%, #ced6df 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefeff), color-stop(100%,#ced6df));
	background:-webkit-linear-gradient(top, #fefeff 0%,#ced6df 100%);
	background:-o-linear-gradient(top, #fefeff 0%,#ced6df 100%);
	background:-ms-linear-gradient(top, #fefeff 0%,#ced6df 100%);
	background:linear-gradient(top, #fefeff 0%,#ced6df 100%);
	text-shadow:0 -1px 1px #fff;
}
.buttonNeutral:hover,
.buttonNeutral_over {
	background:url(https://i2.cdscdn.com/struct/buttons/buttonGradients.png) 0 -150px #f3f5f9;
	background:-moz-linear-gradient(top, #f3f5f9 0%, #d7dde6 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f5f9), color-stop(100%,#d7dde6));
	background:-webkit-linear-gradient(top, #f3f5f9 0%,#d7dde6 100%);
	background:-o-linear-gradient(top, #f3f5f9 0%,#d7dde6 100%);
	background:-ms-linear-gradient(top, #f3f5f9 0%,#d7dde6 100%);
	background:linear-gradient(top, #f3f5f9 0%,#d7dde6 100%);
	text-shadow:0 0 20px #e2e3e4; /* create a glow effect on text */
}
.buttonNeutral strong,
.buttonNeutral:hover strong,
.buttonNeutral_over strong,
.buttonNeutral:focus strong{
	text-shadow:0 0 25px #e2e3e4;
}
.buttonNeutral:active{
	color:#65717d;
	background:#d7dde6;
	background:-moz-linear-gradient(top, #d7dde6 0%, #f3f5f9 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7dde6), color-stop(100%,#f3f5f9));
	background:-webkit-linear-gradient(top, #d7dde6 0%,#f3f5f9 100%);
    background:-o-linear-gradient(top, #d7dde6 0%,#f3f5f9 100%);
	background:-ms-linear-gradient(top, #d7dde6 0%,#f3f5f9 100%);
	background: linear-gradient(top, #d7dde6 0%,#f3f5f9 100%);
	text-shadow:0 1px 1px #fff;
	-moz-box-shadow:inset 0 0 5px #7e7e7e;
	-webkit-box-shadow:inset 0 0 5px #7e7e7e;
	box-shadow:inset 0 0 5px #7e7e7e;
}

/*
 * "Market Place" - Actual style = blue
 */
.buttonMP{
	color:#fff;
	border:1px solid #2c4d78;
	background:url(https://i2.cdscdn.com/struct/buttons/buttonGradients.png) 0 -214px #3689eb;
	background:-moz-linear-gradient(top, #539aee 0%, #0d52ad 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#539aee), color-stop(100%,#0d52ad));
	background:-webkit-linear-gradient(top, #539aee 0%,#0d52ad 100%);
	background:-o-linear-gradient(top, #539aee 0%,#0d52ad 100%);
	background:-ms-linear-gradient(top, #539aee 0%,#0d52ad 100%);
	background:linear-gradient(top, #539aee 0%,#0d52ad 100%);
	text-shadow:0 -1px 1px #2c4d78;
}
.buttonMP:hover,
.buttonMP_over ,
.buttonMP:focus{
	background:url(https://i2.cdscdn.com/struct/buttons/buttonGradients.png) 0 -224px #3689eb;
	background:-moz-linear-gradient(top, #3689eb 0%, #0d52ad 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3689eb), color-stop(100%,#0d52ad));
	background:-webkit-linear-gradient(top, #3689eb 0%,#0d52ad 100%);
	background:-o-linear-gradient(top, #3689eb 0%,#0d52ad 100%);
	background:-ms-linear-gradient(top, #3689eb 0%,#0d52ad 100%);
	background:linear-gradient(top, #3689eb 0%,#0d52ad 100%);
	text-shadow:0 0 20px #fff; /* creates a glow effect on text */
}
.buttonMP strong,
.buttonMP:hover strong,
.buttonMP_over strong,
.buttonMP:focus strong{
	text-shadow:0 0 25px #fff;
}
.buttonMP:active{
	color:#d0dbee;
	background:#0d52ad;
	background:-moz-linear-gradient(top, #0d52ad 0%, #3689eb 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d52ad), color-stop(100%,#3689eb));
	background:-webkit-linear-gradient(top, #0d52ad 0%, #3689eb 100%);
    background:-o-linear-gradient(top, #0d52ad 0%,#3689eb 100%);
	background:-ms-linear-gradient(top, #0d52ad 0%,#3689eb 100%);
	background:linear-gradient(top, #0d52ad 0%,#3689eb 100%);
	text-shadow:0 1px 1px #2c4d78;
	-moz-box-shadow:inset 0 0 5px #7e7e7e; /* creates an inside shadow when button is pushed */
	-webkit-box-shadow:inset 0 0 5px #7e7e7e;
	box-shadow:inset 0 0 5px #7e7e7e;
}

/**
 * buttonIcons - You can choose between several size for each
 */
 
 /*
  * Basket buttons
  */
.iconBasketSmall{background-position:-1px 2px;}
.xx-small .iconBasketSmall{background-position:-1px 0;}
.iconBasketMedium{background-position:-2px -38px;}
.buttonIconTwoLines.iconBasketMedium{background-position:-2px -33px;}
.iconBasketLarge{background-position:-2px -77px;}
.buttonIconTwoLines.iconBasketLarge{background-position:-2px -73px;}
.xx-small .buttonIconTwoLines{height:28px;}

.xx-small .buttonIcon{
    height:15px;
    width:15px;
}
.x-small .buttonIconTwoLines{height:30px;}
.x-small .buttonIcon{height:18px;}

.small  .buttonIconTwoLines{height:32px;}
.small  .buttonIcon{height:18px;}

.medium .buttonIcon{height:22px;}
.medium  .buttonIconTwoLines,
.large .buttonIconTwoLines{
    height:34px;
}
.large .buttonIcon{height:27px;}

.x-large .buttonIconTwoLines{height:41px;}
.x-large .buttonIcon{height:27px;}

/**
 * Buttons to get to the productsheet popin
 *
 */
.button-text{
  background-position:-8px -307px;
  font-size:12px;
  font-weight:bold;
  height:26px;
  line-height:26px;
  padding-left:3px;
  text-align:center;
  width:80px;
  color:#3c5a80;
}
  .button-text span{
    background:url(https://i2.cdscdn.com/imagesok/button/buttons-small.png) right -351px;
    display:block;
    text-align:center;
  }
.button-text_over{
  background-position:-8px -395px;
  text-decoration:underline;
}
.button-text_over span{background-position:right -439px;}

.button-text,
.button-textExtended{
  background:url(https://i2.cdscdn.com/imagesok/button/buttons-small.png) no-repeat -8px -306px;
  float:right;
  font-weight:bold;
  height:30px;
  line-height:28px;
  padding-left:3px;
  width:120px;
  color:#3c5a80;
  text-align:left;
}
.button-textExtended_over{background-position:-8px -1084px;}
 
.button-text span,
.button-textExtended span{
    background:url(https://i2.cdscdn.com/imagesok/button/buttons-small.png) no-repeat -35px -350px;   
    display:block;
    font-size:11px;
  }
 .button-textExtended_over span{
    background-position:-35px -1129px;
    color:#fff;    
 }
 .button-textExtended_li a:hover{text-decoration:none;}
 
.button-textExtended .buttonIcon{
    background-image:url(https://i2.cdscdn.com/struct/common/icon/icone-png.png);
    background-repeat:no-repeat;
    display:inline-block;
    height:26px;
    width:15px;
    margin-left:7px;
    float:left;
}
.button-textExtended .iconArrow{background-position:0 -97px;}
 
.button-textExtended_over .iconArrow{background-position:0 -125px;}
