/* BUTTONS AND ICONS  V1.4*/

/*****************************

1 HREF BUTTONS
	1.1 SMALL HREF BUTTONS
	1.2 LARGE HREF BUTTONS
	1.3 XTRA LARGE HREF BUTTONS
	
2 SEPERATED BUTTONS FOR ALL LAYOUTS

3 REQUIRED BUTTON STYLES
	3.1 REQUIRED SMALL BUTTON
	3.2 REQUIRED LARGE BUTTON
	3.3 REQUIRED XTRA LARGE BUTTON
	
4 HREF ICONS

5 SYSTION BUTTONS

6 SYSTION ICONS

*****************************/


/* fixes button-tags with spans inside it - FF was adding extra padding */
button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}


/*-- 1 HREF BUTTONS --*/
.button {
    font-weight: bold;
    color: #fff !important;
    text-decoration: none;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 10px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

.button:hover {
    color: #999;
    text-decoration: none;
}

.button span, .button i {
    background: transparent url(../img/css/buttons.png) no-repeat 0 0;
    height: 16px;
    line-height: 15px;
    float: left;
}

	
	/*-- 1.1 SMALL HREF BUTTONS --*/
	
	.button span { padding: 0 3px 0 10px; background-position: 0 -180px; }
	.button i { padding: 0 16px 0 0; background-position: 100% -207px; }
	.simple i { padding-right: 7px; background-position: 100% -233px; }
	.button:hover span { background-position: 0 -259px; }
	.button:hover i { background-position: 100% -285px; }
	.simple:hover i { background-position: 100% -311px; }
	
	
	/*-- 1.2 LARGE HREF BUTTONS --*/
	
	.large { font-size: 12px; }
	.large span, .large i { height: 20px; line-height: 20px; }
	.large span { background-position: 0 0px; }
	.large i { padding-right: 20px; background-position: 100% -30px; }
	.large.simple i { padding-right: 7px; background-position: 100% -60px; }
	.large:hover span { background-position: 0 -90px; }
	.large:hover i { background-position: 100% -120px; }
	.large.simple:hover i { background-position: 100% -150px; }
	
	
	/*-- 1.3 XTRA LARGE HREF BUTTONS --*/
	
	.xlarge { font-size: 12px; }
	.xlarge span, .xlarge i { height: 25px; line-height: 25px; }
	.xlarge span { background-position: 0 0px; }
	.xlarge i { padding-right: 22px; background-position: 100% -1210px; }
	.xlarge.simple i { padding-right: 7px; background-position: 100% -1235px; }	
	.xlarge:hover span { background-position: 0 -1260px; }
	.xlarge:hover i { background-position: 100% -1285px; }
	.xlarge.simple:hover i { background-position: 100% -1310px; }



/*-- 2 SEPERATED BUTTONS FOR ALL LAYOUTS --*/

.btnTopNavigation span { background-position: 0 -337px; }
.btnTopNavigation i { background-position: 100% -363px; }
.btnTopNavigation.simple i { background-position: 100% -389px; }
.btnTopNavigation:hover span { background-position: 0 -415px; }
.btnTopNavigation:hover i { background-position: 100% -441px; }
.btnTopNavigation.simple:hover i { background-position: 100% -467px; }

.btnShoppingCart span { background-position: 0 -491px; }
.btnShoppingCart i { background-position: 100% -517px; padding-right: 20px; }
.btnShoppingCart.simple i { background-position: 100% -543px; }
.btnShoppingCart:hover span { background-position: 0 -569px; }
.btnShoppingCart:hover i { background-position: 100% -595px; }
.btnShoppingCart.simple:hover i { background-position: 100% -621px; }

.btnActiveSubNav span { background-position: 0 -647px; }
.btnActiveSubNav i { background-position: 100% -673px; }
.btnActiveSubNav.simple i { background-position: 100% -699px; }
.btnActiveSubNav:hover span { background-position: 0 -725px; }
.btnActiveSubNav:hover i { background-position: 100% -751px; }
.btnActiveSubNav.simple:hover i { background-position: 100% -777px; }

.btnPaginationNext span { background-position: 0 -803px; }
.btnPaginationNext i { background-position: 100% -829px; }
.btnPaginationNext.simple i { background-position: 100% -855px; }
.btnPaginationNext:hover span { background-position: 0 -881px; }
.btnPaginationNext:hover i { background-position: 100% -907px; }
.btnPaginationNext.simple:hover i { background-position: 100% -933px; }

.btnPaginationPrev span { background-position: 0 -959px; padding:0 0 0 20px!important;  }
.btnPaginationPrev i { background-position: 100% -985px;  }
.btnPaginationPrev.simple i { background-position: 100% -1011px; }
.btnPaginationPrev:hover span { background-position: 0 -1037px; }
.btnPaginationPrev:hover i { background-position: 100% -1063px; }
.btnPaginationPrev.simple:hover i { background-position: 100% -1089px; }

.btnPromo span { background-position: 0 -1115px; }
.btnPromo i { background-position: 100% -1141px; }
.btnPromo.simple i { background-position: 100% -1167px; }
.btnPromo:hover span { background-position: 0 -1192px; }
.btnPromo:hover i { background-position: 100% -1218px; }
.btnPromo.simple:hover i { background-position: 100% -1244px; }

.btnZoom span { background-position: 0 -1270px; }
.btnZoom i { background-position: 100% -1296px; }
.btnZoom.simple i { background-position: 100% -1322px; }
.btnZoom:hover span { background-position: 0 -1348px; }
.btnZoom:hover i { background-position: 100% -1374px; }
.btnZoom.simple:hover i { background-position: 100% -1400px; }

.btnContinue span { background-position: 0 -1426px; }
.btnContinue i { background-position: 100% -1456px; }

.btnContinue.simple i { background-position: 100% -1486px; }
.btnContinue:hover span { background-position: 0 -1516px; }
.btnContinue:hover i { background-position: 100% -1546px; }
.btnContinue.simple:hover i { background-position: 100% -1576px; }

.btnCheckoutNext span { background-position: 0 -1606px; }
.btnCheckoutNext i { background-position: 100% -1641px; }
.btnCheckoutNext:hover span { background-position: 0 -1676px; }
.btnCheckoutNext:hover i { background-position: 100% -1711px; }

.btnCheckoutPrev span { background-position: 0 -1746px; padding-left: 22px !important; }
.btnCheckoutPrev i { background-position: 100% -1781px; padding-right: 8px; }
.btnCheckoutPrev:hover span { background-position: 0 -1816px; }
.btnCheckoutPrev:hover i { background-position: 100% -1851px; }


.btnCollection span { background-position: 0 -1886px; }
.btnCollection i { background-position: 100% -1916px; }
.btnCollection.simple i { background-position: 100% -1946px; }
.btnCollection:hover span { background-position: 0 -1976px; }
.btnCollection:hover i { background-position: 100% -2006px; }
.btnCollection.simple:hover i { background-position: 100% -2036px; }

.btnShare span { background-position: 0 -2066px; }
.btnShare i { background-position: 100% -2092px; }
.btnShare:hover span { background-position: 0 -2118px; }
.btnShare:hover i { background-position: 100% -2144px; }

.btnOrder span { background-position: 0 -2362px; }
.btnOrder i { background-position: 100% -2388px; }
.btnOrder:hover span { background-position: 0 -2310px; }
.btnOrder:hover i { background-position: 100% -2336px; }


/*-- 3 REQUIRED BUTTON STYLES --*/		
button {
    position: relative;
    border: 0;
    padding: 0;
    cursor: pointer;
    overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner { border: none;  /* overrides extra padding in Firefox */ }

button span {
    position: relative;
    display: block;
    white-space: nowrap;
}


	/*-- 3.1 REQUIRED SMALL BUTTON --*/	
	
	.smallBtn {
	    padding-right: 16px;
	    font-size: 11px;
	    background: transparent url(../img/css/buttons.png) no-repeat right -2080px;
	}
	
	.smallBtn span {
	    padding-left: 10px;
	    height: 16px;
	    line-height: 16px;
	    background: transparent url(../img/css/buttons.png) no-repeat left -2060px;
	    color: #fff;
	}
	.smallBtn:hover, .smallBtnHover{ background-position: right -2120px; }
	
	.smallBtn:hover span, .smallBtnHover span { background-position: 0 -2100px; }


	/*-- 3.2 REQUIRED LARGE BUTTON --*/	
	
	.largeBtn {
	    padding-right: 18px;
	    font-size: 12px;
	    height: 18px;
	    background: transparent url(../img/css/buttons.png) no-repeat right -2662px;
	}
	
	.largeBtn span {
	    padding: 0 4px 0 10px;
	    height: 18px;
	    line-height: 20px;
	    background: transparent url(../img/css/buttons.png) no-repeat left -2636px;
	    color: #fff;
	}
	.largeBtn:hover, .largeBtnHover{ background-position: right -2714px; }
	
	.largeBtn:hover span, .largeBtnHover span { background-position: 0 -2688px; }
	

	/*-- 3.3 REQUIRED XTRA LARGE BUTTON --*/
	
	.xlargeBtn {
	    padding-right: 22px;
	    font-size: 15px;
	    background: transparent url(../img/css/buttons.png) no-repeat right -2205px;
	}
	
	.xlargeBtn span {
	    padding-left: 10px;
	    height: 25px;
	    line-height: 25px;
	    background: transparent url(../img/css/buttons.png) no-repeat left -2170px;
	    color: #fff;
	}
	
	.xlargeBtn:hover, .xlargeBtnHover{ background-position: right -2275px; }
	
	.xlargeBtn:hover span, .xlargeBtnHover span { background-position: 0 -2240px; }
	
	.btnSearch span{ background-position: left -2534px;  }
	
	.btnSearch { background-position: right -2560px; padding: 0 16px 0 0; }
	
	.btnSearch:hover span, .btnSearch:focus span { background-position: left -2586px; }
	
	.btnSearch:hover, .btnSearch:focus { background-position: right -2612px; }


/*-- 4 HREF ICONS */

.icon, .product_attention_label {
    font-size: 12px;
    padding-left: 21px;
    width: 0;
    height: 21px;
    font-weight: bold;
    text-decoration: none;
    background: transparent url(../img/css/iconen.png) no-repeat 0 0;
    overflow: hidden;
    display: inline-block;
    text-indent: -9999em;
}

.product_attention_label {
	background-position: -60px -360px;
	color: #f00;
	position: absolute;
	top: 3px;
	left: 3px;
	width: 50px;
	height: 50px;
	z-index: 900;
	padding: 0;
}
.product_attention_label.label_soldout { background-position: -120px -360px; }
.product_attention_label.label_action { background-position: -180px -360px; }

.close { background-position: -660px 0px; }
.close:hover { background-position: -660px -60px }

.large.close { background-position: -360px 0; }
.large.close:hover { background-position: -360px -60px; }

.light.large.close { background-position: -180px -60px; }
.light.large.close:hover { background-position: -180px 0 }

.refresh { background-position: -720px 0; }
.refresh:hover { background-position: -720px -60px; }

.crop { background-position: 0 0; }
.crop:hover { background-position: 0 -60px; }

.jump { background-position: -600px 0px; }
.jump:hover { background-position: -600px -60px; }

.plus { background-position: -540px 0px; }
.plus:hover { background-position: -540px -60px; }

.pencil { background-position: -60px 0px; }
.pencil:hover { background-position: -60px -60px; }

.back { background-position: -120px 0px; }
.back:hover { background-position: -120px -60px; }

.forward { background-position: -300px 0px; }
.forward:hover { background-position: -300px -60px; }

.back.arrow { background-position: -240px 0px; }
.back.arrow:hover { background-position: -240px -60px; }

.forward.arrow { background-position: -300px 0px; }
.forward.arrow:hover { background-position: -300px -60px; }

.small.back { background-position: -420px 0px; }
.small.back:hover { background-position: -420px -60px; }

.small.forward { background-position: -480px 0px; }
.small.forward:hover { background-position: -480px -60px; }

.add{ background-position: 0 -120px; }
.add:hover { background-position: 0px -180px;  }

.subtract{ background-position: -60px -120px; }
.subtract:hover { background-position: -60px -180px; }

.true, .false {
    background-position: -240px -120px;
    height: 11px;
    padding-left: 10px;
}

.false { background-position: -660px -120px; }

.pdf { background-position: -420px -120px; height:16px!important;}
.pdf:hover { background-position: -420px -180px; height:16px!important;}

.print { background-position: -480px -120px; height:16px!important;}
.print:hover { background-position: -480px -180px; height:16px!important;}

.home { background-position: -540px -120px; height:16px!important;}
.home:hover { background-position: -540px -180px; height:16px!important;}

.video {
    background-position: -600px -180px;
    height: 16px !important;
    position: absolute;
    bottom: 8px;
    right: 2px;
}

.shoppincart { background-position: -240px -360px; }
.shoppincart:hover { background-position: -240px -420px; }

.roundedPrev { background-position: -120px -60px;}
.roundedPrev:hover { background-position: -120px -60px; }

.roundedNext { background-position: -180px -0px; }
.roundedNext:hover { background-position: -180px -60px;}

.arrow {
    color: #FF790B;
    background-position: -720px -300px;
    padding-right: 23px;
}

.arrow.product_link, .arrow.product_link:hover {
	color: #666;
	font-size: 0.9em;
	font-weight: bold;
	background-position: 100% -97px;
}

.button.large.friendBtn i  { background-position: 100% -2952px; padding-right:25px; }
.button.large.friendBtn:hover i { background-position: 100% -3042px; }

.button.large.friendBtn span { background-position: 0 -2922px; }
.button.large.friendBtn:hover span{ background-position: 0 -3012px; }

.button.large.ContactBtn i { background-position: 100% -2772px; }
.button.large.ContactBtn:hover i { background-position: 100% -2862px; }

.button.large.ContactBtn span { background-position: 0 -2742px; }
.button.large.ContactBtn:hover span{ background-position: 0 -2832px; }


/**-- 5 SYSTION BUTTONS --**/

.button.openPopup i  { background-position: 100% -3128px; padding-right: 22px; }
.button.openPopup:hover i { background-position: 100% -3188px; }
.button.openPopup span { background-position: 0 -3102px; }
.button.openPopup:hover span { background-position: 0 -3162px; }

.button.dropDown i  { background-position: 100% -3248px; padding-right: 22px; }
.button.dropDown:hover i { background-position: 100% -3308px; }
.button.dropDown span { background-position: 0 -3222px; }
.button.dropDown:hover span { background-position: 0 -3282px; }

.button.createMail i  { background-position: 100% -3368px; padding-right: 22px; }
.button.createMail:hover i { background-position: 100% -3428px; }
.button.createMail span { background-position: 0 -3342px; }
.button.createMail:hover span { background-position: 0 -3402px; }

.button.basicButtonGreen i  { background-position: 100% -3486px; padding-right: 6px; }
.button.basicButtonGreen:hover i { background-position: 100% -3546px; }
.button.basicButtonGreen span { background-position: 0 -3456px; }
.button.basicButtonGreen:hover span { background-position: 0 -3516px; }

.button.basicButtonGrey i  { background-position: 100% -3606px; padding-right: 6px; }
.button.basicButtonGrey:hover i { background-position: 100% -3666px; }
.button.basicButtonGrey span { background-position: 0 -3576px; }
.button.basicButtonGrey:hover span { background-position: 0 -3636px; }

.button.addSmall i { background-position: 100% -3726px; padding-right: 14px; }
.button.addSmall:hover i { background-position: 100% -3786px; }
.button.addSmall span { background-position: 0 -3696px; }
.button.addSmall:hover span { background-position: 0 -3756px; }

.button.removeOrange i { background-position: 100% -3844px; padding-right: 20px; }
.button.removeOrange:hover i { background-position: 100% -3896px; }
.button.removeOrange span { background-position: 0 -3818px; }
.button.removeOrange:hover span { background-position: 0 -3870px; }

.button.removeGrey i { background-position: 100% -3964px; padding-right: 20px; }
.button.removeGrey:hover i { background-position: 100% -4016px; }
.button.removeGrey span { background-position: 0 -3938px; }
.button.removeGrey:hover span { background-position: 0 -3990px; }

.button.addMedium i { background-position: 100% -4084px; padding-right: 20px; }
.button.addMedium:hover i { background-position: 100% -4136px; }
.button.addMedium span { background-position: 0 -4058px; }
.button.addMedium:hover span { background-position: 0 -4110px; }


/**-- 6 SYSTION ICONS --**/



.sy_icon, .sy_icon_inline {
	background: url(../img/css/sy_icons.png) no-repeat top left;
	width: 12px;
	height: 12px;
}

.sy_icon_inline {
	display: inline-block;
	left: -16px;
	margin-top: 5px;
	opacity: 0.6;
	position: relative;
	vertical-align: top;
}